feat: update Table

* refactor: table components

* feat(table): add verticalAlign prop

---------

Co-authored-by: denkristoffer <denkristoffer@users.noreply.github.com>

.changeset/plenty-flies-smash.md

@@ -0,0 +1,6 @@
+---
+'@contentful/f36-table': minor
+---
+
+- Add new `verticalAlign` prop to control vertical alignment of table cell content.
+- Table styles minor update.

packages/components/table/README.mdx

@@ -3,7 +3,7 @@ title: 'Table'
 slug: /components/table/
 github: 'https://github.com/contentful/forma-36/tree/main/packages/components/table'
 storybook: 'https://f36-storybook.contentful.com/?path=/info/components-table--default'
-typescript: ./src/Table.tsx,./src/TableCell.tsx,./src/TableRow.tsx,./src/TableBody.tsx,./src/TableHead.tsx
+typescript: ./src/Table.tsx,./src/TableCell/TableCell.tsx,./src/TableRow/TableRow.tsx,./src/TableBody/TableBody.tsx,./src/TableHead/TableHead.tsx
 ---
 
 ## Import

packages/components/table/package.json

@@ -8,6 +8,7 @@
   "dependencies": {
     "@contentful/f36-core": "^4.29.0",
     "@contentful/f36-tokens": "^4.0.1",
+    "@contentful/f36-typography": "^4.26.0",
     "emotion": "^10.0.17"
   },
   "peerDependencies": {

packages/components/table/src/CompoundTable.tsx

@@ -1,8 +1,8 @@
 import { Table as OriginalTable } from './Table';
-import { TableBody } from './TableBody';
-import { TableCell } from './TableCell';
-import { TableHead } from './TableHead';
-import { TableRow } from './TableRow';
+import { TableBody } from './TableBody/TableBody';
+import { TableCell } from './TableCell/TableCell';
+import { TableHead } from './TableHead/TableHead';
+import { TableRow } from './TableRow/TableRow';
 
 type CompoundTable = typeof OriginalTable & {
   Row: typeof TableRow;

packages/components/table/src/Table.styles.ts

@@ -0,0 +1,27 @@
+import { css } from 'emotion';
+import tokens from '@contentful/f36-tokens';
+
+export const getTableStyles = () => ({
+  inline: css({
+    borderRadius: tokens.borderRadiusMedium,
+    boxShadow: `0 0 0 1px ${tokens.gray200}`,
+    'th:first-child': {
+      borderTopLeftRadius: tokens.borderRadiusMedium,
+    },
+    'th:last-child': {
+      borderTopRightRadius: tokens.borderRadiusMedium,
+    },
+    'tr:last-child td:first-child': {
+      borderBottomLeftRadius: tokens.borderRadiusMedium,
+    },
+    'tr:last-child td:last-child': {
+      borderBottomRightRadius: tokens.borderRadiusMedium,
+    },
+  }),
+  embedded: css({
+    borderBottom: `1px solid ${tokens.gray200}`,
+  }),
+  root: css({
+    width: '100%',
+  }),
+});

packages/components/table/src/Table.tsx

@@ -1,39 +1,28 @@
-import { cx, css } from 'emotion';
+import { cx } from 'emotion';
 import React, { forwardRef } from 'react';
 import {
   Box,
   type CommonProps,
   type PropsWithHTMLElement,
   type ExpandProps,
 } from '@contentful/f36-core';
-import tokens from '@contentful/f36-tokens';
+import type * as CSS from 'csstype';
 
-const getStyles = () => {
-  return {
-    inline: css({
-      borderRadius: tokens.borderRadiusMedium,
-      boxShadow: `0 0 0 1px ${tokens.gray200}`,
-      'th:first-child': {
-        borderTopLeftRadius: tokens.borderRadiusMedium,
-      },
-      'th:last-child': {
-        borderTopRightRadius: tokens.borderRadiusMedium,
-      },
-      'tr:last-child td:first-child': {
-        borderBottomLeftRadius: tokens.borderRadiusMedium,
-      },
-      'tr:last-child td:last-child': {
-        borderBottomRightRadius: tokens.borderRadiusMedium,
-      },
-    }),
-    root: css({
-      width: '100%',
-    }),
-  };
-};
+import { getTableStyles } from './Table.styles';
+import { TableContextProvider } from './tableContext';
 
 export type TableInternalProps = CommonProps & {
+  /**
+   * @default 'inline'
+   */
   layout?: 'inline' | 'embedded';
+  /**
+   * @default 'top'
+   */
+  verticalAlign?: Extract<
+    CSS.Property.VerticalAlign,
+    'baseline' | 'bottom' | 'middle' | 'top'
+  >;
 };
 
 export type TableProps = PropsWithHTMLElement<TableInternalProps, 'table'>;
@@ -45,11 +34,13 @@ export const Table = forwardRef<HTMLTableElement, ExpandProps<TableProps>>(
       className,
       layout = 'inline',
       testId = 'cf-ui-table',
+      verticalAlign = 'top',
       ...otherProps
     },
     forwardedRef,
   ) => {
-    const styles = getStyles();
+    const styles = getTableStyles();
+
     return (
       <Box
         cellPadding="0"
@@ -58,16 +49,12 @@ export const Table = forwardRef<HTMLTableElement, ExpandProps<TableProps>>(
         as="table"
         display="table"
         ref={forwardedRef}
-        className={cx(
-          styles.root,
-          {
-            [styles.inline]: layout === 'inline',
-          },
-          className,
-        )}
+        className={cx(styles.root, styles[layout], className)}
         testId={testId}
       >
-        {children}
+        <TableContextProvider value={{ verticalAlign }}>
+          {children}
+        </TableContextProvider>
       </Box>
     );
   },

packages/components/table/src/TableCell/TableCell.styles.ts

@@ -0,0 +1,23 @@
+import { css } from 'emotion';
+import tokens from '@contentful/f36-tokens';
+import { TableCellInternalProps } from './TableCell';
+import { TableProps } from '../Table';
+
+export const getTableCellStyles = ({
+  isTableHead,
+  sorting,
+  align,
+  verticalAlign,
+}: {
+  isTableHead?: boolean;
+  verticalAlign?: TableProps['verticalAlign'];
+} & Pick<TableCellInternalProps, 'sorting' | 'align'>) => ({
+  container: css({
+    borderBottom: `1px solid ${tokens.gray200}`,
+    padding: tokens.spacingS,
+    textAlign: align,
+    color: sorting ? tokens.gray900 : tokens.gray700,
+    fontWeight: isTableHead ? tokens.fontWeightMedium : tokens.fontWeightNormal,
+    verticalAlign,
+  }),
+});

packages/components/table/src/TableCell/TableCell.tsx

@@ -0,0 +1,80 @@
+import { cx } from 'emotion';
+import React, { forwardRef } from 'react';
+import {
+  type CommonProps,
+  type PropsWithHTMLElement,
+  type ExpandProps,
+  type PolymorphicComponent,
+} from '@contentful/f36-core';
+import { Text, Caption, type TextProps } from '@contentful/f36-typography';
+
+import { useTableCellContext } from './TableCellContext';
+import { getTableCellStyles } from './TableCell.styles';
+import { useTableContext } from '../tableContext';
+
+export const sortingDirections = {
+  asc: 'asc',
+  desc: 'desc',
+};
+
+export type TableCellSorting = keyof typeof sortingDirections | boolean;
+
+export type TableCellInternalProps = CommonProps & {
+  align?: 'center' | 'left' | 'right';
+  sorting?: TableCellSorting;
+  width?: string | number;
+  children?: React.ReactNode;
+} & Pick<TextProps, 'isTruncated' | 'isWordBreak'>;
+
+export type TableCellProps = PropsWithHTMLElement<
+  TableCellInternalProps,
+  'th' | 'td'
+>;
+
+function _TableCell(
+  {
+    align = 'left',
+    children,
+    className,
+    sorting = false as TableCellSorting,
+    testId = 'cf-ui-table-cell',
+    ...otherProps
+  }: TableCellProps,
+  forwardedRef: React.Ref<any>,
+) {
+  const { as, name: context, offsetTop } = useTableCellContext();
+  const { verticalAlign } = useTableContext();
+
+  const isTableHead = context === 'head';
+  const styles = getTableCellStyles({
+    isTableHead,
+    sorting,
+    align,
+    verticalAlign,
+  });
+
+  const BaseComponent = isTableHead ? Caption : Text;
+
+  return (
+    <BaseComponent
+      {...otherProps}
+      as={as}
+      className={cx(styles.container, className)}
+      ref={forwardedRef}
+      style={{
+        ...otherProps.style,
+        top: offsetTop || undefined,
+      }}
+      testId={testId}
+    >
+      {children}
+    </BaseComponent>
+  );
+}
+
+_TableCell.displayName = 'TableCell';
+
+export const TableCell: PolymorphicComponent<
+  ExpandProps<TableCellInternalProps>,
+  'th' | 'td'
+> = forwardRef(_TableCell);

packages/components/table/src/tableCellContext.ts → packages/components/table/src/TableCell/TableCellContext.ts

@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { createContext, useContext } from 'react';
 
 export type TableCellContextOption = {
   name: 'body' | 'head';
@@ -15,3 +15,11 @@ export const contextOptions: {
 };
 
 export const TableCellContext = createContext(contextOptions.body);
+
+export const useTableCellContext = () => {
+  const context = useContext(TableCellContext);
+
+  return context;
+};
+
+export const TableCellContextProvider = TableCellContext.Provider;

packages/components/table/src/TableHead/TableHead.styles.ts

@@ -0,0 +1,12 @@
+import { css } from 'emotion';
+import tokens from '@contentful/f36-tokens';
+
+export const getTableHeadStyles = () => ({
+  sticky: css({
+    th: {
+      position: 'sticky',
+      top: 0,
+      zIndex: tokens.zIndexDefault,
+    },
+  }),
+});