feat: react table component (#351)

packages/design/tailwind/css/components.css

@@ -943,3 +943,20 @@ input[type='file' i] {
 }
 
 /* End of Breadcrumbs */
+
+/* Table */
+
+.gi-table {
+  @apply gi-w-full gi-border-spacing-0 gi-border-collapse gi-text-md;
+}
+
+.gi-table-th,
+.gi-table-td {
+  @apply gi-text-left gi-align-top gi-pl-1 gi-pr-5 gi-py-2.5 gi-border-b-[gray] gi-border-b gi-border-solid gi-align-middle gi-max-w-[25ch] gi-overflow-hidden gi-text-ellipsis gi-whitespace-nowrap;
+}
+
+.gi-table-no-data {
+  @apply gi-text-center gi-border-0 gi-py-8 gi-px-4;
+}
+
+/* End of Table */

packages/react/ds/src/checkbox/checkbox.tsx

@@ -18,6 +18,7 @@ type CheckboxType = {
   className?: string;
   checked?: boolean;
   disabled?: boolean;
+  ariaLabel?: string;
 };
 
 const Checkbox = ({
@@ -31,6 +32,7 @@ const Checkbox = ({
   className,
   checked,
   disabled,
+  ariaLabel,
 }: CheckboxType) => {
   return (
     <div className={`gi-checkbox-container ${className && className}`}>
@@ -42,6 +44,7 @@ const Checkbox = ({
         value={value}
         className={`${getSizeClass(size)} ${getTickSize(size)} gi-checkbox-input`}
         checked={checked}
+        aria-label={ariaLabel}
         disabled={disabled}
         type="checkbox"
       />

packages/react/ds/src/table/caption.tsx

@@ -1,5 +1,14 @@
 import React from 'react';
 
-export function Caption(props: React.PropsWithChildren) {
-  return <caption>{props.children}</caption>;
+type CaptionProps = {
+  children: React.ReactNode;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+
+export function Caption({ children, size = 'lg' }: CaptionProps) {
+  return (
+    <caption className={`gi-text-left gi-mb-4 gi-font-bold gi-text-${size}`}>
+      {children}
+    </caption>
+  );
 }

packages/react/ds/src/table/table-data.tsx

@@ -1,5 +1,16 @@
 import React from 'react';
+import { cn } from '../cn.js';
 
-export function TableData(props: React.PropsWithChildren) {
-  return <td>{props.children}</td>;
+interface TableDataProps extends React.PropsWithChildren {
+  className?: string;
+  colSpan?: number;
+}
+
+export function TableData({ children, className, colSpan }: TableDataProps) {
+  const baseClasses = 'gi-table-td';
+  return (
+    <td className={cn(baseClasses, className)} colSpan={colSpan}>
+      {children}
+    </td>
+  );
 }

packages/react/ds/src/table/table-header.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
 
 export function TableHeader(props: React.PropsWithChildren) {
-  return <th>{props.children}</th>;
+  return <th className="gi-table-th">{props.children}</th>;
 }

packages/react/ds/src/table/table-row.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
 
-export function TableRow(props: React.PropsWithChildren) {
-  return <tr>{props.children}</tr>;
+interface TableRowProps extends React.PropsWithChildren {
+  className?: string;
+}
+
+export function TableRow({ children, className }: TableRowProps) {
+  return <tr className={className}>{children}</tr>;
 }