uikit-react-public 0.36.0 → 0.37.0

package/lib/components/Snackbar/Snackbar.tsx

@@ -40,7 +40,6 @@ const Snackbar = ({
     error: Icon.AlertTriangle,
     success: Icon.CheckCircle,
   }[variant];
-  // Success token currently differs from Figma (#008E49).
   const backgroundColor = {
     default: theme.colour.fill.brandPrimary,
     error: theme.colour.fill.critical,
@@ -90,7 +89,7 @@ const Snackbar = ({
 
   const closeButtonStyle = css`
     &:hover {
-      color: ${theme.colour.icon.brandInverse}; // todo: update to hover token when available
+      color: ${theme.colour.icon.brandInverseSecondaryHover};
     }
   `;
 
@@ -102,7 +101,7 @@ const Snackbar = ({
     cursor: pointer;
 
     &:hover {
-      color: ${theme.colour.icon.brandInverse}; // todo: update to hover token when available
+      color: ${theme.colour.icon.brandInverseSecondaryHover};
     }
 
     &:focus-visible {

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

@@ -40,7 +40,7 @@ exports[`Snackbar > snapshot: custom test id 1`] = `
     class="css-1xjm0bq"
   >
     <button
-      class="css-16c49qk"
+      class="css-1omltr1"
       data-testid="custom-test-id-undo-button"
     >
       <span
@@ -95,7 +95,7 @@ exports[`Snackbar > snapshot: minimal props 1`] = `
   >
     <button
       aria-label="Dismiss notification"
-      class="ucl-uikit-icon-button css-1kh68vi"
+      class="ucl-uikit-icon-button css-1s0isp9"
       data-testid="ucl-uikit-snackbar-close-button"
     >
       <svg

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}
     >