uikit-react-public 0.36.1 → 0.37.0

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
   );
 

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.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",