feat: Table subcomponents

src/components/Table/components/TBody/TBody.mdx

@@ -0,0 +1,10 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import TBody from './TBody';
+
+<Meta title="Updated Components/Table/Components/TBody" />
+
+<SectionHeader title={'TBody'} sections={[{ title: 'Overview', href: '#overview' }]} />
+
+## Overview
+
+A universal styled `<tbody/>` component used to group the body content of a table.

src/components/Table/components/TBody/TBody.stories.tsx

@@ -0,0 +1,13 @@
+import TBody from './TBody';
+
+export default {
+  title: 'Updated Components/Table/Components/TBody',
+  component: TBody,
+
+  parameters: {
+    storyshots: {
+      disable: true,
+    },
+    controls: { disable: true },
+  },
+};

src/components/Table/components/TBody/TBody.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TBody: React.FCC = ({ children }) => {
+  return <tbody>{children}</tbody>;
+};
+
+export default TBody;

src/components/Table/components/TBody/index.ts

@@ -0,0 +1 @@
+export { default } from './TBody';

src/components/Table/components/TD/TD.mdx

@@ -0,0 +1,20 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import TD from './TD';
+
+<Meta title="Updated Components/Table/Components/TD" />
+
+<SectionHeader
+  title={'TD'}
+  sections={[
+    { title: 'Overview', href: '#overview' },
+    { title: 'Props', href: '#props' },
+  ]}
+/>
+
+## Overview
+
+A universal styled `<td/>` component used to define data cells within a table.
+
+## Props
+
+<ArgTypes of={TD} />

src/components/Table/components/TD/TD.stories.tsx

@@ -0,0 +1,13 @@
+import TD from './TD';
+
+export default {
+  title: 'Updated Components/Table/Components/TD',
+  component: TD,
+
+  parameters: {
+    storyshots: {
+      disable: true,
+    },
+    controls: { disable: true },
+  },
+};

src/components/Table/components/TD/TD.style.ts

@@ -0,0 +1,38 @@
+import type { SerializedStyles, Theme } from '@emotion/react';
+import { css } from '@emotion/react';
+
+import type { RowSize, TableProps } from 'components/Table';
+
+/** @TODO replace all css with tokens */
+
+export const getMinHeight = (rowSize: RowSize) => (theme: Theme) => {
+  switch (rowSize) {
+    case 'md':
+      return theme.globals.sizing.get('13');
+    case 'lg':
+      return theme.globals.sizing.get('15');
+    default: /** sm and default */
+      return theme.globals.sizing.get('11');
+  }
+};
+
+export const tdContainer =
+  ({ rowSize }: Pick<TableProps<any>, 'rowSize'>) =>
+  (theme: Theme): SerializedStyles => {
+    return css`
+      height: ${getMinHeight(rowSize)(theme)};
+      padding: 8px 16px;
+      border-bottom: 1px solid ${theme.tokens.colors.get('borderColor.decorative.default')};
+      border-right: 1px solid ${theme.tokens.colors.get('borderColor.decorative.default')};
+      box-sizing: border-box;
+      align-content: center;
+    `;
+  };
+
+export const tdContent = (): SerializedStyles => {
+  return css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  `;
+};

src/components/Table/components/TD/TD.tsx

@@ -0,0 +1,21 @@
+import type { RowSize } from 'index';
+import React from 'react';
+
+import { tdContainer, tdContent } from './TD.style';
+
+type Props = {
+  /** The html colSpan attribute */
+  colSpan?: number;
+  /** Size of Row */
+  rowSize?: RowSize;
+};
+
+const TD: React.FCC<Props> = ({ colSpan, rowSize = 'sm', children, ...rest }) => {
+  return (
+    <td css={tdContainer({ rowSize })} colSpan={colSpan} {...rest}>
+      <div css={tdContent()}>{children}</div>
+    </td>
+  );
+};
+
+export default TD;

src/components/Table/components/TD/index.ts

@@ -0,0 +1 @@
+export { default } from './TD';

src/components/Table/components/TH/TH.mdx

@@ -0,0 +1,20 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import TH from './TH';
+
+<Meta title="Updated Components/Table/Components/TH" />
+
+<SectionHeader
+  title={'TH'}
+  sections={[
+    { title: 'Overview', href: '#overview' },
+    { title: 'Props', href: '#props' },
+  ]}
+/>
+
+## Overview
+
+A universal styled `<th/>` component used to define header cells within a table.
+
+## Props
+
+<ArgTypes of={TH} />

src/components/Table/components/TH/TH.stories.tsx

@@ -0,0 +1,13 @@
+import TH from './TH';
+
+export default {
+  title: 'Updated Components/Table/Components/TH',
+  component: TH,
+
+  parameters: {
+    storyshots: {
+      disable: true,
+    },
+    controls: { disable: true },
+  },
+};

src/components/Table/components/TH/TH.style.ts

@@ -0,0 +1,23 @@
+import type { SerializedStyles, Theme } from '@emotion/react';
+import { css } from '@emotion/react';
+
+import { getMinHeight } from '../TD/TD.style';
+import type { TableProps } from 'components/Table';
+import { generateStylesFromTokens } from 'components/Typography/utils';
+
+/** @TODO replace all css with tokens */
+
+export const thContainer =
+  ({ rowSize }: Pick<TableProps<any>, 'rowSize'>) =>
+  (theme: Theme): SerializedStyles => {
+    return css`
+      height: ${getMinHeight(rowSize)(theme)};
+      align-content: center;
+      box-sizing: border-box;
+      padding: 8px 16px;
+      border-bottom: 1px solid ${theme.tokens.colors.get('borderColor.decorative.default')};
+      border-right: 1px solid ${theme.tokens.colors.get('borderColor.decorative.default')};
+      color: ${theme.tokens.colors.get('textColor.default.secondary')};
+      ${generateStylesFromTokens(theme.tokens.typography.get('normal.body02'))};
+    `;
+  };

src/components/Table/components/TH/TH.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { thContainer } from './TH.style';
+import type { RowSize } from 'components/Table/types';
+
+type Props = {
+  /** The html colSpan attribute */
+  colSpan?: number;
+  /** Size of Row */
+  rowSize: RowSize;
+};
+
+const TH: React.FCC<Props> = ({ rowSize = 'sm', children, ...rest }) => {
+  return (
+    <th css={thContainer({ rowSize })} {...rest}>
+      {children}
+    </th>
+  );
+};
+
+export default TH;

src/components/Table/components/TH/index.ts

@@ -0,0 +1 @@
+export { default } from './TH';

src/components/Table/components/THead/THead.mdx

@@ -0,0 +1,10 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import THead from './THead';
+
+<Meta title="Updated Components/Table/Components/THead" />
+
+<SectionHeader title={'THead'} sections={[{ title: 'Overview', href: '#overview' }]} />
+
+## Overview
+
+A universal styled `<thead/>` component used to define the header section of a table.

src/components/Table/components/THead/THead.stories.tsx

@@ -0,0 +1,13 @@
+import THead from './THead';
+
+export default {
+  title: 'Updated Components/Table/Components/THead',
+  component: THead,
+
+  parameters: {
+    storyshots: {
+      disable: true,
+    },
+    controls: { disable: true },
+  },
+};

src/components/Table/components/THead/THead.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const THead: React.FCC = ({ children }) => {
+  return <thead>{children}</thead>;
+};
+
+export default THead;

src/components/Table/components/THead/index.ts

@@ -0,0 +1 @@
+export { default } from './THead';

src/components/Table/components/TR/TR.mdx

@@ -0,0 +1,10 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import TR from './TR';
+
+<Meta title="Updated Components/Table/Components/TR" />
+
+<SectionHeader title={'TR'} sections={[{ title: 'Overview', href: '#overview' }]} />
+
+## Overview
+
+A universal styled `<tr/>` component used to define a row within a table.

src/components/Table/components/TR/TR.stories.tsx

@@ -0,0 +1,13 @@
+import TR from './TR';
+
+export default {
+  title: 'Updated Components/Table/Components/TR',
+  component: TR,
+
+  parameters: {
+    storyshots: {
+      disable: true,
+    },
+    controls: { disable: true },
+  },
+};

src/components/Table/components/TR/TR.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TR: React.FCC = ({ children }) => {
+  return <tr>{children}</tr>;
+};
+
+export default TR;

src/components/Table/components/TR/index.ts

@@ -0,0 +1 @@
+export { default } from './TR';

src/components/Table/components/TTitle/TTitle.mdx

@@ -0,0 +1,29 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import TTitle from './TTitle';
+
+<Meta title="Updated Components/Table/Components/TTitle" />
+
+<SectionHeader
+  title={'TTitle'}
+  sections={[
+    { title: 'Overview', href: '#overview' },
+    { title: 'Usage', href: '#usage' },
+  ]}
+/>
+
+## Overview
+
+This component includes all the actions of the Table.
+
+## Usage
+
+<UsageGuidelines
+  guidelines={[
+    'Appears at the top of the table container, above the table head',
+    'Table title content changes depending on whether the table is read-only or interactive',
+    'Table title may include column chooser for both read-only and interactive tables',
+    'If table is read only, item count shows all items found in table',
+    'If table is interactive, item count shows items selected (shows 0 selected on page load)',
+    'If table is interactive, table title also displays bulk actions when user selects at least one table row',
+  ]}
+/>

src/components/Table/components/TTitle/TTitle.stories.tsx

@@ -0,0 +1,13 @@
+import TTitle from './TTitle';
+
+export default {
+  title: 'Updated Components/Table/Components/TTitle',
+  component: TTitle,
+
+  parameters: {
+    storyshots: {
+      disable: true,
+    },
+    controls: { disable: true },
+  },
+};

src/components/Table/components/TTitle/TTitle.style.ts

@@ -0,0 +1,11 @@
+import type { SerializedStyles, Theme } from '@emotion/react';
+import { css } from '@emotion/react';
+
+export const tTitleContainer =
+  () =>
+  (theme: Theme): SerializedStyles => {
+    return css`
+      padding: 8px 16px;
+      border-bottom: 1px solid ${theme.tokens.colors.get('borderColor.decorative.default')};
+    `;
+  };

src/components/Table/components/TTitle/TTitle.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { tTitleContainer } from './TTitle.style';
+
+const TTitle: React.FCC = ({ children }) => {
+  return <div css={tTitleContainer()}>{children}</div>;
+};
+
+export default TTitle;

src/components/Table/components/TTitle/index.ts

@@ -0,0 +1 @@
+export { default } from './TTitle';

src/components/Table/components/index.ts

@@ -0,0 +1,6 @@
+export { default as TBody } from './TBody';
+export { default as THead } from './THead';
+export { default as TH } from './TH';
+export { default as TR } from './TR';
+export { default as TD } from './TD';
+export { default as TTitle } from './TTitle';

src/components/Table/utils/TableStoryComponents.tsx

@@ -0,0 +1,9 @@
+import type React from 'react';
+
+import type { DisplayColumn, TableData } from '../types';
+
+/** This is just a dummy component to be used in Storybook for showing the Row type on props */
+export const DisplayColumnStory: React.FC<DisplayColumn> = () => null;
+
+/** This is just a dummy component to be used in Storybook for showing the Cell type on props */
+export const TableDataStory: React.FC<TableData<any>> = () => null;