uikit-react-public 0.36.0 → 0.37.0

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

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