uikit-react-public 0.36.1 → 0.37.2

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

@@ -5,11 +5,12 @@ exports[`Cell > Snapshot: default 1`] = `
   <tbody>
     <tr>
       <td
-        class="css-u1gowl ucl-uikit-table__cell"
+        class="ucl-uikit-table__cell css-501n1z"
+        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"
         >
           Default cell
@@ -25,22 +26,24 @@ exports[`Cell > Snapshot: variants 1`] = `
   <tbody>
     <tr>
       <td
-        class="css-u1gowl ucl-uikit-table__cell"
+        class="ucl-uikit-table__cell css-501n1z"
+        data-mobile-role="field"
         data-testid="ucl-uikit-table__cell"
       >
         <div
-          class="ucl-uikit-table__cell-content css-tlcu3i"
+          class="ucl-uikit-table__cell-content css-1tff2yh"
           data-testid="ucl-uikit-table__cell-content"
         >
           123
         </div>
       </td>
       <td
-        class="css-u1gowl ucl-uikit-table__cell"
+        class="ucl-uikit-table__cell css-11iy32t"
+        data-mobile-role="selection"
         data-testid="ucl-uikit-table__cell"
       >
         <div
-          class="ucl-uikit-table__cell-content css-1kkenvm"
+          class="ucl-uikit-table__cell-content css-e77rql"
           data-testid="ucl-uikit-table__cell-content"
         >
           <span
@@ -60,11 +63,12 @@ exports[`Cell > Snapshot: variants 1`] = `
         </div>
       </td>
       <td
-        class="css-u1gowl ucl-uikit-table__cell"
+        class="ucl-uikit-table__cell css-501n1z"
+        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"
         >
           <svg
@@ -91,11 +95,12 @@ exports[`Cell > Snapshot: variants 1`] = `
         </div>
       </td>
       <td
-        class="css-u1gowl ucl-uikit-table__cell"
+        class="ucl-uikit-table__cell css-x1o1q5"
+        data-mobile-role="primaryAction"
         data-testid="ucl-uikit-table__cell"
       >
         <div
-          class="css-1fubti ucl-uikit-table__cell-content"
+          class="ucl-uikit-table__cell-content css-1d5ok6z"
           data-testid="ucl-uikit-table__cell-content"
         >
           <button

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

@@ -1,8 +1,7 @@
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../theme';
 
-export interface TableHeadProps
-  extends React.HTMLAttributes<HTMLTableSectionElement> {}
+export interface TableHeadProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
 
 const NAME = 'ucl-uikit-table__head';
 
@@ -12,10 +11,22 @@ const Head = ({ className, children, ...props }: TableHeadProps) => {
   const baseStyle = css`
     height: 40px;
     background-color: #f8f8f8; // TODO: Add a design token
+
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
   `;
 
   const rowStyle = css`
-    border-bottom: 1px solid ${theme.color.neutral.grey20};
+    border-bottom: 1px solid ${theme.colour.border.default};
   `;
 
   const style = cx(baseStyle, className, NAME);

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

@@ -1,11 +1,17 @@
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../../theme';
 import HeadCellContent from './HeadCellContent';
-import type { ColumnVariant, SortOrder } from '../../Table.types';
+import type {
+  ColumnVariant,
+  SortOrder,
+  TableMobileRole,
+} from '../../Table.types';
 
 export interface TableHeadCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
   variant?: ColumnVariant;
   accessor?: string;
+  mobileRole?: TableMobileRole;
+  mobileLabel?: string;
   sort?: SortOrder;
   onSortChange?: (
     accessor: string,
@@ -27,6 +33,8 @@ const NAME = 'ucl-uikit-table__head-cell';
 const HeadCell = ({
   variant = 'default',
   accessor,
+  mobileRole,
+  mobileLabel,
   sort = null,
   onSortChange,
   showSortIcon = true,
@@ -73,9 +81,12 @@ const HeadCell = ({
 
   const baseStyle = css`
     padding: ${theme.padding.p8} ${theme.padding.p16};
-    color: ${theme.color.text.secondary};
-    font-family: ${theme.font.family.primary};
-    font-weight: 400;
+    color: ${theme.colour.text.secondary};
+    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}%;
     text-align: left;
     cursor: ${isSortable ? 'pointer' : 'default'};
     user-select: none;
@@ -91,6 +102,8 @@ const HeadCell = ({
       className={style}
       data-testid={testId}
       data-accessor={accessor}
+      data-mobile-role={mobileRole}
+      data-mobile-label={mobileLabel}
       data-sort={sort}
       tabIndex={isSortable ? 0 : undefined}
       aria-sort={

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

@@ -5,7 +5,7 @@ exports[`HeadCell > Snapshot: checkbox variant 1`] = `
   <thead>
     <tr>
       <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"
       >
@@ -40,7 +40,7 @@ exports[`HeadCell > Snapshot: default 1`] = `
   <thead>
     <tr>
       <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"
       >
@@ -100,7 +100,7 @@ exports[`HeadCell > no sorting icon 1`] = `
   <thead>
     <tr>
       <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"
       >

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

@@ -1,47 +1,236 @@
+import { Children, cloneElement, isValidElement, useState } from 'react';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../theme';
+import { useTableContext } from '../Table.context';
+import Icon from '../../Icon/Icon';
+import type { TableCellProps } from './Cell/Cell';
+import type { NormalizedTableMobileRole } from '../Table.types';
 
 export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
   selected?: boolean;
+  mobileExpanded?: boolean;
+  defaultMobileExpanded?: boolean;
+  mobileCollapsible?: boolean;
+  mobileDetailsLabel?: string;
+  mobileExpandLabel?: string;
+  mobileCollapseLabel?: string;
+  onMobileExpandedChange?: (expanded: boolean) => void;
 }
 
 const NAME = 'ucl-uikit-table__row';
 
+const isMobileBodyRole = (mobileRole?: NormalizedTableMobileRole) =>
+  !mobileRole || mobileRole === 'field';
+
+const isMobileRole = (
+  mobileRole: NormalizedTableMobileRole | undefined,
+  expectedMobileRole: NormalizedTableMobileRole
+) => mobileRole === expectedMobileRole;
+
 const Row = ({
   selected = false,
+  mobileExpanded,
+  defaultMobileExpanded = true,
+  mobileCollapsible = true,
+  mobileDetailsLabel = 'Details',
+  mobileExpandLabel = 'Show details',
+  mobileCollapseLabel = 'Hide details',
+  onMobileExpandedChange,
   className,
   children,
   ...props
 }: TableRowProps) => {
   const [theme] = useTheme();
+  const { columns } = useTableContext();
+  const [uncontrolledMobileExpanded, setUncontrolledMobileExpanded] = useState(
+    defaultMobileExpanded
+  );
+
+  const isMobileExpanded =
+    mobileExpanded === undefined ? uncontrolledMobileExpanded : mobileExpanded;
+
+  const hasMobileBodyFields = Children.toArray(children).some(
+    (child, index) =>
+      isValidElement(child) && isMobileBodyRole(columns[index]?.mobileRole)
+  );
+  const hasMobileSelection = Children.toArray(children).some(
+    (child, index) =>
+      isValidElement(child) &&
+      isMobileRole(columns[index]?.mobileRole, 'selection')
+  );
+  const hasMobilePrimaryMeta = Children.toArray(children).some(
+    (child, index) =>
+      isValidElement(child) &&
+      isMobileRole(columns[index]?.mobileRole, 'primaryMeta')
+  );
+  const hasMobileContextMenu = Children.toArray(children).some(
+    (child, index) =>
+      isValidElement(child) &&
+      isMobileRole(columns[index]?.mobileRole, 'contextMenu')
+  );
+  const firstMobileBodyFieldIndex = Children.toArray(children).findIndex(
+    (child, index) =>
+      isValidElement(child) && isMobileBodyRole(columns[index]?.mobileRole)
+  );
+
+  const canMobileCollapse = mobileCollapsible && hasMobileBodyFields;
+  const effectiveMobileExpanded = !canMobileCollapse || isMobileExpanded;
+
+  const handleMobileExpandedChange = () => {
+    const nextMobileExpanded = !isMobileExpanded;
+
+    if (mobileExpanded === undefined)
+      setUncontrolledMobileExpanded(nextMobileExpanded);
+
+    onMobileExpandedChange?.(nextMobileExpanded);
+  };
 
   const baseStyle = css`
     height: 40px;
-    border-bottom: 1px solid ${theme.color.neutral.grey20};
+    border-bottom: 1px solid ${theme.colour.border.default};
 
     &:hover {
-      background-color: ${theme.color.neutral.grey5};
+      background-color: ${theme.colour.surface.secondary};
+    }
+
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: start;
+      column-gap: ${theme.padding.p16};
+      row-gap: 0;
+      height: auto;
+      padding: ${theme.padding.p16};
+      margin-bottom: ${theme.margin.m16};
+      border: ${theme.border.b1} solid ${theme.colour.border.default};
+      border-radius: ${theme.radius.r4};
+      background-color: ${theme.colour.surface.default};
+
+      &:hover {
+        background-color: ${theme.colour.surface.default};
+      }
+
+      &[data-mobile-expanded='false'] > [data-mobile-role='field'] {
+        display: none;
+      }
+
+      &[data-mobile-expanded='false'] > [data-mobile-role='primaryAction'] {
+        display: none;
+      }
     }
   `;
 
   const highlightedStyle = css`
-    background-color: ${theme.color.interaction.blue5};
+    background-color: ${theme.colour.surface.brandSecondary};
 
     &:hover {
-      background-color: ${theme.color.interaction.blue5};
+      background-color: ${theme.colour.surface.brandSecondary};
+    }
+
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      background-color: ${theme.colour.surface.brandSecondary};
+      border-color: ${theme.colour.border.brandSubtle};
+
+      &:hover {
+        background-color: ${theme.colour.surface.brandSecondary};
+      }
+    }
+  `;
+
+  const mobileContextMenuGridStyle = css`
+    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+      grid-template-columns: auto minmax(0, 1fr) auto auto;
     }
   `;
 
-  const style = cx(baseStyle, selected && highlightedStyle, className, NAME);
+  const style = cx(
+    baseStyle,
+    selected && highlightedStyle,
+    hasMobileContextMenu && mobileContextMenuGridStyle,
+    className,
+    NAME
+  );
+
+  const mobileDetailsCellStyle = css`
+    display: block;
+    grid-column: 1 / -1;
+    order: 10;
+    margin-top: ${theme.margin.m8};
+
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      display: none;
+    }
+  `;
+
+  const mobileDetailsButtonStyle = css`
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: ${theme.height.h24};
+    color: ${theme.colour.text.secondary};
+    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}%;
+    cursor: pointer;
+
+    &:focus-visible {
+      box-shadow: ${theme.boxShadow.focus};
+    }
+  `;
+
+  let columnIndex = -1;
+  const mobileChildren = Children.map(children, (child) => {
+    if (!isValidElement<TableCellProps>(child)) return child;
+
+    columnIndex += 1;
+
+    return cloneElement(child, {
+      __mobileColumnIndex: columnIndex,
+      __mobileHasSelection: hasMobileSelection,
+      __mobileHasPrimaryMeta: hasMobilePrimaryMeta,
+      __mobileIsFirstBodyField: columnIndex === firstMobileBodyFieldIndex,
+    });
+  });
+
+  const mobileDetailsAriaLabel = isMobileExpanded
+    ? mobileCollapseLabel
+    : mobileExpandLabel;
 
   return (
     <tr
       className={style}
       data-testid={NAME}
       aria-selected={selected}
+      data-mobile-expanded={effectiveMobileExpanded}
       {...props}
     >
-      {children}
+      {mobileChildren}
+      {canMobileCollapse && (
+        <td
+          className={mobileDetailsCellStyle}
+          data-mobile-role='details'
+        >
+          <button
+            type='button'
+            className={mobileDetailsButtonStyle}
+            aria-label={mobileDetailsAriaLabel}
+            aria-expanded={isMobileExpanded}
+            onClick={handleMobileExpandedChange}
+          >
+            <span>{mobileDetailsLabel}</span>
+            {isMobileExpanded ? (
+              <Icon.ChevronUp size={20} />
+            ) : (
+              <Icon.ChevronDown size={20} />
+            )}
+          </button>
+        </td>
+      )}
     </tr>
   );
 };

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

@@ -11,12 +11,12 @@ const SortingIcon = ({ sortOrder, size = 16 }: SortingIconProps) => {
 
   const leftArrowColour =
     sortOrder === 'asc'
-      ? theme.color.neutral.black
-      : theme.color.neutral.grey20;
+      ? theme.colour.icon.default
+      : theme.colour.icon.disabled;
   const rightArrowColour =
     sortOrder === 'desc'
-      ? theme.color.neutral.black
-      : theme.color.neutral.grey20;
+      ? theme.colour.icon.default
+      : theme.colour.icon.disabled;
 
   return (
     <svg

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.36.1",
+  "version": "0.37.2",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -55,11 +55,10 @@
     "@eslint/compat": "^1.2.7",
     "@eslint/eslintrc": "^3.3.0",
     "@eslint/js": "^9.22.0",
+    "@storybook/addon-docs": "10.4.6",
     "@storybook/addon-links": "10.4.6",
     "@storybook/addon-onboarding": "10.4.6",
     "@storybook/react-vite": "10.4.6",
-    "@storybook/addon-docs": "10.4.6",
-    "eslint-plugin-storybook": "10.4.6",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
@@ -77,9 +76,10 @@
     "eslint-plugin-jest": "^28.11.0",
     "eslint-plugin-no-for-of-loops": "^1.0.1",
     "eslint-plugin-no-function-declare-after-return": "^1.1.0",
-    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-storybook": "10.4.6",
     "gh-pages": "^6.3.0",
     "globals": "^16.0.0",
     "husky": "^9.1.7",
@@ -88,7 +88,7 @@
     "prettier": "^3.5.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router": "^7.13.1",
+    "react-router": "^8.3.0",
     "storybook": "10.4.6",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.26.1",