uikit-react-public 0.36.1 → 0.37.2

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}

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

@@ -4,10 +4,14 @@ import type { CheckboxProps } from '../../../Checkbox/Checkbox';
 import Button from '../../../Button';
 import type { ButtonProps } from '../../../Button';
 import { useTheme } from '../../../../theme';
-import type { ColumnVariant } from '../../Table.types';
+import type {
+  ColumnVariant,
+  NormalizedTableMobileRole,
+} from '../../Table.types';
 
 interface CellContentProps extends React.HTMLAttributes<HTMLDivElement> {
   variant: ColumnVariant;
+  mobileRole: NormalizedTableMobileRole;
   icon?: React.ReactNode;
   checked?: boolean;
   checkboxProps?: Omit<CheckboxProps, 'checked' | 'onChange'>;
@@ -23,6 +27,7 @@ const NAME = 'ucl-uikit-table__cell-content';
 
 const CellContent = ({
   variant,
+  mobileRole,
   icon,
   checked,
   checkboxProps,
@@ -44,11 +49,11 @@ const CellContent = ({
 
   const variantStyles = {
     default: css`
-      font-weight: ${theme.font.weight.regular};
+      font-weight: ${theme.typography.body.sm.fontWeight};
     `,
     numeric: css`
       justify-content: flex-end;
-      font-weight: ${theme.font.weight.regular};
+      font-weight: ${theme.typography.body.sm.fontWeight};
     `,
     checkbox: css`
       justify-content: flex-end;
@@ -61,13 +66,68 @@ const CellContent = ({
     height: auto;
   `;
 
+  const mobileStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      align-items: flex-start;
+      justify-content: flex-start;
+      min-width: 0;
+      height: auto;
+      padding-right: 0;
+    }
+  `;
+
+  const mobilePrimaryStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      display: -webkit-box;
+      overflow: hidden;
+      color: ${theme.colour.text.default};
+      font-family: ${theme.typography.body.md.fontFamily};
+      font-feature-settings: ${theme.typography.body.md.fontSettings};
+      font-size: ${theme.typography.body.md.fontSize}px;
+      line-height: ${theme.typography.body.md.lineHeight}%;
+      font-weight: ${theme.typography.body.md.fontWeight};
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+    }
+  `;
+
+  const mobilePrimaryMetaStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      color: ${theme.colour.text.secondary};
+      font-family: ${theme.typography.body.xs.fontFamily};
+      font-feature-settings: ${theme.typography.body.xs.fontSettings};
+      font-size: ${theme.typography.body.xs.fontSize}px;
+      font-weight: ${theme.typography.body.xs.fontWeight};
+      line-height: ${theme.typography.body.xs.lineHeight}%;
+    }
+  `;
+
+  const mobilePrimaryActionStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      color: ${theme.colour.link.visited};
+      font-weight: ${theme.typography.body.sm.fontWeight};
+    }
+  `;
+
+  const mobileHeaderTrailingStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      justify-content: flex-end;
+    }
+  `;
+
   const style = cx(
     baseStyle,
     {
       [variantStyles.default]: variant === 'default',
       [variantStyles.numeric]: variant === 'numeric',
       [variantStyles.checkbox]: variant === 'checkbox',
+      [mobilePrimaryStyle]: mobileRole === 'primary',
+      [mobilePrimaryMetaStyle]: mobileRole === 'primaryMeta',
+      [mobilePrimaryActionStyle]: mobileRole === 'primaryAction',
+      [mobileHeaderTrailingStyle]:
+        mobileRole === 'status' || mobileRole === 'contextMenu',
     },
+    mobileStyle,
     NAME
   );