uikit-react-public 0.36.1 → 0.37.0

package/lib/components/Table/Table.context.ts

@@ -0,0 +1,12 @@
+import { createContext, use } from 'react';
+import type { TableColumnMetadata } from './Table.types';
+
+export type TableContextValue = {
+  columns: TableColumnMetadata[];
+};
+
+const TableContext = createContext<TableContextValue>({ columns: [] });
+
+export const TableContextProvider = TableContext.Provider;
+
+export const useTableContext = () => use(TableContext);

package/lib/components/Table/Table.tsx

@@ -1,10 +1,77 @@
+import { Children, isValidElement } from 'react';
 import { css, cx } from '@emotion/css';
 import { Head, HeadCell, Body, Row, Cell } from './subcomponents';
 import { useTheme } from '../../theme';
-import type { TableProps } from './Table.types';
+import { TableContextProvider } from './Table.context';
+import type {
+  ColumnVariant,
+  NormalizedTableMobileRole,
+  TableColumnMetadata,
+  TableMobileRole,
+  TableProps,
+} from './Table.types';
+import type { TableHeadCellProps } from './subcomponents';
 
 const NAME = 'ucl-uikit-table';
 
+const getTextFromChildren = (children: React.ReactNode): string => {
+  if (typeof children === 'string' || typeof children === 'number')
+    return String(children);
+
+  if (Array.isArray(children))
+    return children.map(getTextFromChildren).join('').trim();
+
+  if (isValidElement<{ children?: React.ReactNode }>(children))
+    return getTextFromChildren(children.props.children);
+
+  return '';
+};
+
+const normalizeMobileRole = (
+  mobileRole: TableMobileRole | undefined,
+  variant: ColumnVariant | undefined
+): NormalizedTableMobileRole => {
+  if (mobileRole === 'primaryStatus') return 'status';
+  if (mobileRole) return mobileRole;
+  if (variant === 'checkbox') return 'selection';
+  return 'field';
+};
+
+const getColumnsFromChildren = (
+  children: React.ReactNode
+): TableColumnMetadata[] => {
+  const head = Children.toArray(children).find(
+    (child) => isValidElement(child) && child.type === Head
+  );
+
+  if (!isValidElement<{ children?: React.ReactNode }>(head)) return [];
+
+  const columns = Children.toArray(head.props.children)
+    .filter(isValidElement<TableHeadCellProps>)
+    .map((cell) => ({
+      mobileRole: normalizeMobileRole(
+        cell.props.mobileRole,
+        cell.props.variant
+      ),
+      mobileLabel:
+        cell.props.mobileLabel ?? getTextFromChildren(cell.props.children),
+    }));
+
+  if (columns.some((column) => column.mobileRole === 'primary')) return columns;
+
+  const fallbackPrimaryIndex = columns.findIndex(
+    (column) => column.mobileRole === 'field'
+  );
+
+  if (fallbackPrimaryIndex === -1) return columns;
+
+  return columns.map((column, index) =>
+    index === fallbackPrimaryIndex
+      ? { ...column, mobileRole: 'primary' }
+      : column
+  );
+};
+
 const Table = ({
   testId = NAME,
   className,
@@ -14,25 +81,37 @@ const Table = ({
   ...props
 }: TableProps) => {
   const [theme] = useTheme();
+  const columns = getColumnsFromChildren(children);
 
   const baseStyle = css`
-    font-family: ${theme.font.family.primary};
-    font-size: ${theme.font.size.f14};
+    width: 100%;
+    font-family: ${theme.typography.body.sm.fontFamily};
+    font-feature-settings: ${theme.typography.body.sm.fontSettings};
+    font-size: ${theme.typography.body.sm.fontSize}px;
+    font-weight: ${theme.typography.body.sm.fontWeight};
+    line-height: ${theme.typography.body.sm.lineHeight}%;
     border-collapse: collapse;
+
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      display: block;
+      border-collapse: separate;
+    }
   `;
 
   const style = cx(baseStyle, className, NAME);
 
   return (
-    <table
-      className={style}
-      data-testid={testId}
-      aria-label={ariaLabel}
-      ref={ref}
-      {...props}
-    >
-      {children}
-    </table>
+    <TableContextProvider value={{ columns }}>
+      <table
+        className={style}
+        data-testid={testId}
+        aria-label={ariaLabel}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </table>
+    </TableContextProvider>
   );
 };
 

package/lib/components/Table/Table.types.ts

@@ -2,6 +2,27 @@ export type ColumnVariant = 'default' | 'numeric' | 'checkbox' | 'button';
 
 export type SortOrder = 'asc' | 'desc' | null;
 
+export type TableMobileRole =
+  | 'selection'
+  | 'primaryMeta'
+  | 'primary'
+  | 'status'
+  | 'primaryStatus'
+  | 'field'
+  | 'primaryAction'
+  | 'contextMenu'
+  | 'hidden';
+
+export type NormalizedTableMobileRole = Exclude<
+  TableMobileRole,
+  'primaryStatus'
+>;
+
+export type TableColumnMetadata = {
+  mobileRole: NormalizedTableMobileRole;
+  mobileLabel?: string;
+};
+
 export type SortPattern = {
   accessor: string | null;
   order: SortOrder;

package/lib/components/Table/__tests__/Table.test.tsx

@@ -1,6 +1,6 @@
 import { createRef } from 'react';
 import { describe, expect, test } from 'vitest';
-import { render, screen, within } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
 import Table from '../Table';
 import { ThemeContextProvider } from '../../../theme/useTheme';
 
@@ -137,4 +137,98 @@ describe('Table', () => {
       screen.getByRole('table', { name: 'User list' })
     ).toBeInTheDocument();
   });
+
+  test('maps mobile column roles and labels from header cells to body cells', () => {
+    render(
+      <ThemeContextProvider>
+        <Table>
+          <Table.Head>
+            <Table.HeadCell
+              variant='checkbox'
+              mobileLabel='Select'
+            />
+            <Table.HeadCell mobileRole='primaryMeta'>Reference</Table.HeadCell>
+            <Table.HeadCell mobileRole='primary'>Course</Table.HeadCell>
+            <Table.HeadCell mobileRole='primaryStatus'>Status</Table.HeadCell>
+            <Table.HeadCell mobileRole='primaryAction'>Action</Table.HeadCell>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell
+                variant='checkbox'
+                checkboxProps={{ ariaLabel: 'Select Computer Science' }}
+              />
+              <Table.Cell>12345678</Table.Cell>
+              <Table.Cell>Computer Science BSc</Table.Cell>
+              <Table.Cell>Open</Table.Cell>
+              <Table.Cell>
+                <a href='/courses/computer-science'>View course</a>
+              </Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </ThemeContextProvider>
+    );
+
+    const cells = screen.getAllByTestId('ucl-uikit-table__cell');
+
+    expect(cells[0]).toHaveAttribute('data-mobile-role', 'selection');
+    expect(cells[1]).toHaveAttribute('data-mobile-role', 'primaryMeta');
+    expect(cells[2]).toHaveAttribute('data-mobile-role', 'primary');
+    expect(cells[2]).toHaveAttribute('data-mobile-label', 'Course');
+    expect(cells[3]).toHaveAttribute('data-mobile-role', 'status');
+    expect(cells[4]).toHaveAttribute('data-mobile-role', 'primaryAction');
+  });
+
+  test('uses the first field column as the mobile primary when none is marked', () => {
+    render(
+      <ThemeContextProvider>
+        <Table>
+          <Table.Head>
+            <Table.HeadCell showSortIcon={false}>Name</Table.HeadCell>
+            <Table.HeadCell showSortIcon={false}>Email</Table.HeadCell>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Ada Lovelace</Table.Cell>
+              <Table.Cell>ada@example.com</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </ThemeContextProvider>
+    );
+
+    const cells = screen.getAllByTestId('ucl-uikit-table__cell');
+
+    expect(cells[0]).toHaveAttribute('data-mobile-role', 'primary');
+    expect(cells[1]).toHaveAttribute('data-mobile-role', 'field');
+  });
+
+  test('toggles row mobile expansion from the details disclosure button', () => {
+    render(
+      <ThemeContextProvider>
+        <Table>
+          <Table.Head>
+            <Table.HeadCell mobileRole='primary'>Name</Table.HeadCell>
+            <Table.HeadCell>Email</Table.HeadCell>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row defaultMobileExpanded={false}>
+              <Table.Cell>Ada Lovelace</Table.Cell>
+              <Table.Cell>ada@example.com</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </ThemeContextProvider>
+    );
+
+    const row = screen.getByTestId('ucl-uikit-table__row');
+    const button = screen.getByRole('button', { name: 'Show details' });
+
+    expect(row).toHaveAttribute('data-mobile-expanded', 'false');
+
+    fireEvent.click(button);
+
+    expect(row).toHaveAttribute('data-mobile-expanded', 'true');
+  });
 });

package/lib/components/Table/__tests__/__snapshots__/Table.test.tsx.snap

@@ -2,18 +2,18 @@
 
 exports[`Table > Snapshot: basic table 1`] = `
 <table
-  class="css-3bowfr ucl-uikit-table"
+  class="css-1mnnjq ucl-uikit-table"
   data-testid="ucl-uikit-table"
 >
   <thead
-    class="css-3fy35g ucl-uikit-table__head"
+    class="css-1ux39q6 ucl-uikit-table__head"
     data-testid="ucl-uikit-table__head"
   >
     <tr
-      class="css-7kbd2r"
+      class="css-1pr7kjy"
     >
       <th
-        class="css-19iwbn3 ucl-uikit-table__head-cell"
+        class="css-x1n4gt ucl-uikit-table__head-cell"
         data-testid="ucl-uikit-table__head-cell"
         scope="col"
       >
@@ -64,7 +64,7 @@ exports[`Table > Snapshot: basic table 1`] = `
         </div>
       </th>
       <th
-        class="css-19iwbn3 ucl-uikit-table__head-cell"
+        class="css-x1n4gt ucl-uikit-table__head-cell"
         data-testid="ucl-uikit-table__head-cell"
         scope="col"
       >
@@ -115,7 +115,7 @@ exports[`Table > Snapshot: basic table 1`] = `
         </div>
       </th>
       <th
-        class="css-19iwbn3 ucl-uikit-table__head-cell"
+        class="css-x1n4gt ucl-uikit-table__head-cell"
         data-testid="ucl-uikit-table__head-cell"
         scope="col"
       >
@@ -168,46 +168,87 @@ exports[`Table > Snapshot: basic table 1`] = `
     </tr>
   </thead>
   <tbody
+    class="css-13y1iix ucl-uikit-table__body"
     data-testid="ucl-uikit-table__body"
   >
     <tr
       aria-selected="false"
-      class="css-jetl3c ucl-uikit-table__row"
+      class="css-icxsp9 ucl-uikit-table__row"
+      data-mobile-expanded="true"
       data-testid="ucl-uikit-table__row"
     >
       <td
-        class="css-u1gowl ucl-uikit-table__cell"
+        class="ucl-uikit-table__cell css-1bdqdyj"
+        data-mobile-label="Header Cell 1"
+        data-mobile-role="primary"
         data-testid="ucl-uikit-table__cell"
       >
         <div
-          class="ucl-uikit-table__cell-content css-1ao6jhw"
+          class="ucl-uikit-table__cell-content css-1ugtgeo"
           data-testid="ucl-uikit-table__cell-content"
         >
           Test Cell 1
         </div>
       </td>
       <td
-        class="css-u1gowl ucl-uikit-table__cell"
+        class="ucl-uikit-table__cell css-1yys4um"
+        data-mobile-label="Header Cell 2"
+        data-mobile-role="field"
         data-testid="ucl-uikit-table__cell"
       >
         <div
-          class="ucl-uikit-table__cell-content css-1ao6jhw"
+          class="ucl-uikit-table__cell-content css-qn93h1"
           data-testid="ucl-uikit-table__cell-content"
         >
           Test Cell 2
         </div>
       </td>
       <td
-        class="css-u1gowl ucl-uikit-table__cell"
+        class="ucl-uikit-table__cell css-501n1z"
+        data-mobile-label="Header Cell 3"
+        data-mobile-role="field"
         data-testid="ucl-uikit-table__cell"
       >
         <div
-          class="ucl-uikit-table__cell-content css-1ao6jhw"
+          class="ucl-uikit-table__cell-content css-qn93h1"
           data-testid="ucl-uikit-table__cell-content"
         >
           Test Cell 3
         </div>
       </td>
+      <td
+        class="css-1nfo37q"
+        data-mobile-role="details"
+      >
+        <button
+          aria-expanded="true"
+          aria-label="Hide details"
+          class="css-1edts3y"
+          type="button"
+        >
+          <span>
+            Details
+          </span>
+          <svg
+            class="ucl-uikit-icon css-148hpxb"
+            data-testid="ucl-uikit-icon"
+            fill="none"
+            focusable="false"
+            height="20"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m18 15-6-6-6 6"
+            />
+          </svg>
+        </button>
+      </td>
     </tr>
   </tbody>
 </table>

package/lib/components/Table/index.ts

@@ -1,5 +1,10 @@
 export { default } from './Table';
-export type { TableProps, ColumnVariant } from './Table.types';
+export type {
+  TableProps,
+  ColumnVariant,
+  TableMobileRole,
+  TableColumnMetadata,
+} from './Table.types';
 export type {
   TableHeadProps,
   TableHeadCellProps,

package/lib/components/Table/subcomponents/Body.tsx

@@ -1,12 +1,25 @@
-export interface TableBodyProps
-  extends React.HTMLAttributes<HTMLTableSectionElement> {}
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../../theme';
+
+export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
 
 const NAME = 'ucl-uikit-table__body';
 
 const Body = ({ className, children, ...props }: TableBodyProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      display: block;
+      width: 100%;
+    }
+  `;
+
+  const style = cx(baseStyle, className, NAME);
+
   return (
     <tbody
-      className={className}
+      className={style}
       data-testid={NAME}
       {...props}
     >

package/lib/components/Table/subcomponents/Cell/Cell.tsx

@@ -1,7 +1,11 @@
 import { css, cx } from '@emotion/css';
 import CellContent from './CellContent';
 import { useTheme } from '../../../../theme';
-import type { ColumnVariant } from '../../Table.types';
+import { useTableContext } from '../../Table.context';
+import type {
+  ColumnVariant,
+  NormalizedTableMobileRole,
+} from '../../Table.types';
 import type { CheckboxProps } from '../../../Checkbox/Checkbox';
 import type { ButtonProps } from '../../../Button';
 
@@ -21,10 +25,25 @@ export interface TableCellProps extends React.HTMLAttributes<HTMLTableCellElemen
     ButtonProps<'button'>,
     'variant' | 'onClick' | 'className'
   >;
+  /** @internal */
+  __mobileColumnIndex?: number;
+  __mobileHasSelection?: boolean;
+  /** @internal */
+  __mobileHasPrimaryMeta?: boolean;
+  /** @internal */
+  __mobileIsFirstBodyField?: boolean;
 }
 
 const NAME = 'ucl-uikit-table__cell';
 
+const getDefaultMobileRole = (
+  variant: ColumnVariant
+): NormalizedTableMobileRole => {
+  if (variant === 'checkbox') return 'selection';
+  if (variant === 'button') return 'primaryAction';
+  return 'field';
+};
+
 const Cell = ({
   variant = 'default',
   icon,
@@ -36,9 +55,17 @@ const Cell = ({
   children,
   checkboxProps,
   buttonProps,
+  __mobileColumnIndex,
+  __mobileHasSelection = false,
+  __mobileHasPrimaryMeta = false,
+  __mobileIsFirstBodyField = false,
   ...props
 }: TableCellProps) => {
   const [theme] = useTheme();
+  const { columns } = useTableContext();
+  const mobileColumn = columns[__mobileColumnIndex ?? -1];
+  const mobileRole = mobileColumn?.mobileRole ?? getDefaultMobileRole(variant);
+  const mobileLabel = mobileColumn?.mobileLabel;
 
   if (
     variant === 'checkbox' &&
@@ -63,20 +90,182 @@ const Cell = ({
     box-sizing: border-box;
     padding: 0 ${theme.padding.p16};
     height: 40px;
-    font-family: ${theme.font.family.primary};
-    font-size: ${theme.font.size.f14};
+    font-family: ${theme.typography.body.sm.fontFamily};
+    font-feature-settings: ${theme.typography.body.sm.fontSettings};
+    font-size: ${theme.typography.body.sm.fontSize}px;
+    font-weight: ${theme.typography.body.sm.fontWeight};
+    line-height: ${theme.typography.body.sm.lineHeight}%;
+
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      min-width: 0;
+      height: auto;
+      padding: 0;
+    }
+  `;
+
+  const mobileSelectionStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      grid-column: 1;
+      grid-row: 1 / span 2;
+      order: 0;
+      align-self: center;
+      padding-top: ${theme.padding.p2};
+    }
+  `;
+
+  const mobilePrimaryStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: start;
+      gap: ${theme.padding.p8};
+      min-height: 20px;
+    }
+  `;
+
+  const mobilePrimaryAfterSelectionStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      grid-column: 2;
+    }
+  `;
+
+  const mobilePrimaryWithoutSelectionStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      grid-column: 1 / 3;
+    }
+  `;
+
+  const mobilePrimaryWithPrimaryMetaStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      grid-row: 2;
+      order: 2;
+    }
+  `;
+
+  const mobilePrimaryWithoutPrimaryMetaStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      grid-row: 1 / span 2;
+      order: 1;
+      align-self: center;
+    }
+  `;
+
+  const mobilePrimaryMetaStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      grid-row: 1;
+      order: 1;
+      min-height: 18px;
+    }
+  `;
+
+  const mobilePrimaryMetaAfterSelectionStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      grid-column: 2;
+    }
+  `;
+
+  const mobilePrimaryMetaWithoutSelectionStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      grid-column: 1 / 3;
+    }
+  `;
+
+  const mobileStatusStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      grid-column: 3;
+      grid-row: 1 / span 2;
+      order: 2;
+      align-self: center;
+    }
+  `;
+
+  const mobileContextMenuStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      grid-column: 4;
+      grid-row: 1 / span 2;
+      order: 3;
+      align-self: center;
+    }
+  `;
+
+  const mobileFieldStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      display: grid;
+      grid-template-columns: minmax(90px, 32%) minmax(0, 1fr);
+      grid-column: 1 / -1;
+      order: 20;
+      align-items: start;
+      column-gap: ${theme.padding.p16};
+      padding: ${theme.padding.p6} 0;
+
+      &::before {
+        content: attr(data-mobile-label);
+        color: ${theme.colour.text.secondary};
+        font-weight: ${theme.typography.body.sm.fontWeight};
+      }
+    }
+  `;
+
+  const mobileFirstFieldStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      margin-top: ${theme.margin.m16};
+      padding-top: ${theme.padding.p12};
+      border-top: ${theme.border.b1} solid ${theme.colour.border.default};
+    }
+  `;
+
+  const mobilePrimaryActionStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      grid-column: 1 / -1;
+      order: 30;
+      margin-top: ${theme.margin.m8};
+      padding-top: ${theme.padding.p12};
+      border-top: ${theme.border.b1} solid ${theme.colour.border.default};
+    }
+  `;
+
+  const mobileHiddenStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      display: none;
+    }
   `;
 
   const style = cx(baseStyle, className, NAME);
+  const mobileStyle = cx({
+    [mobileSelectionStyle]: mobileRole === 'selection',
+    [mobilePrimaryStyle]: mobileRole === 'primary',
+    [mobilePrimaryAfterSelectionStyle]:
+      mobileRole === 'primary' && __mobileHasSelection,
+    [mobilePrimaryWithoutSelectionStyle]:
+      mobileRole === 'primary' && !__mobileHasSelection,
+    [mobilePrimaryWithPrimaryMetaStyle]:
+      mobileRole === 'primary' && __mobileHasPrimaryMeta,
+    [mobilePrimaryWithoutPrimaryMetaStyle]:
+      mobileRole === 'primary' && !__mobileHasPrimaryMeta,
+    [mobilePrimaryMetaStyle]: mobileRole === 'primaryMeta',
+    [mobilePrimaryMetaAfterSelectionStyle]:
+      mobileRole === 'primaryMeta' && __mobileHasSelection,
+    [mobilePrimaryMetaWithoutSelectionStyle]:
+      mobileRole === 'primaryMeta' && !__mobileHasSelection,
+    [mobileStatusStyle]: mobileRole === 'status',
+    [mobileContextMenuStyle]: mobileRole === 'contextMenu',
+    [mobileFieldStyle]: mobileRole === 'field',
+    [mobileFirstFieldStyle]: mobileRole === 'field' && __mobileIsFirstBodyField,
+    [mobilePrimaryActionStyle]: mobileRole === 'primaryAction',
+    [mobileHiddenStyle]: mobileRole === 'hidden',
+  });
 
   return (
     <td
-      className={style}
+      className={cx(style, mobileStyle)}
       data-testid={testId}
+      data-mobile-role={mobileRole}
+      data-mobile-label={mobileLabel}
       {...props}
     >
       <CellContent
         variant={variant}
+        mobileRole={mobileRole}
         icon={icon}
         checked={checked}
         handleCheckboxChange={handleCheckboxChange}