uikit-react-public 0.40.3 → 0.40.5

package/lib/components/BreadcrumbsNew/BaseBreadcrumbsItem.tsx

@@ -8,7 +8,6 @@ export const NAME = 'ucl-uikit-breadcrumbs__item';
 
 export interface BaseBreadcrumbsItemProps extends LiHTMLAttributes<HTMLLIElement> {
   separator?: boolean;
-  back?: boolean;
   size?: BreadcrumbsSize;
   testId?: string;
   children?: ReactNode;
@@ -16,7 +15,6 @@ export interface BaseBreadcrumbsItemProps extends LiHTMLAttributes<HTMLLIElement
 
 const BaseBreadcrumbsItem = ({
   separator = false,
-  back = false,
   size = 'medium',
   testId = NAME,
   className,
@@ -47,13 +45,6 @@ const BaseBreadcrumbsItem = ({
       data-testid={testId}
       {...props}
     >
-      {back && (
-        <Icon.ArrowLeft
-          aria-hidden
-          className={iconStyle}
-          size={size === 'small' ? 16 : 20}
-        />
-      )}
       {children}
       {separator && (
         <Icon.ChevronRight

package/lib/components/BreadcrumbsNew/BreadcrumbsLink.tsx

@@ -1,5 +1,6 @@
 import { Children, isValidElement, ReactNode } from 'react';
 import { css, cx } from '@emotion/css';
+import Icon from '../Icon';
 import StandaloneLink, { StandaloneLinkProps } from '../StandaloneLink';
 import { useTheme } from '../../theme';
 import BaseBreadcrumbsItem, {
@@ -10,8 +11,10 @@ export const NAME = 'ucl-uikit-breadcrumbs__link';
 
 type BreadcrumbsLinkOwnProps = Pick<
   BaseBreadcrumbsItemProps,
-  'separator' | 'back' | 'size'
->;
+  'separator' | 'size'
+> & {
+  back?: boolean;
+};
 
 export type BreadcrumbsLinkProps = BreadcrumbsLinkOwnProps &
   Omit<StandaloneLinkProps, 'size' | 'variant'>;
@@ -45,9 +48,15 @@ const BreadcrumbsLink = ({
       : theme.typography.body.mdSemibold.fontWeight;
 
   const linkStyle = css`
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0;
+    ${
+      back
+        ? ''
+        : `
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0;
+    `
+    }
 
     &::after {
       content: attr(data-breadcrumb-label);
@@ -62,11 +71,19 @@ const BreadcrumbsLink = ({
   return (
     <BaseBreadcrumbsItem
       separator={separator}
-      back={back}
       size={size}
     >
       <StandaloneLink
         className={cx(NAME, linkStyle, className)}
+        icon={
+          back ? (
+            <Icon.ArrowLeft
+              aria-hidden
+              width={size === 'small' ? 16 : 20}
+              height={size === 'small' ? 16 : 20}
+            />
+          ) : undefined
+        }
         variant='secondary'
         noVisited
         size={size === 'small' ? 'small' : 'default'}

package/lib/components/BreadcrumbsNew/__tests__/Breadcrumbs.test.tsx

@@ -30,6 +30,9 @@ describe('BreadcrumbsNew', () => {
     expect(
       within(lists[1]).getByRole('link', { hidden: true })
     ).toHaveAttribute('href', '/parent');
+    expect(
+      within(lists[1]).getByRole('link', { hidden: true }).querySelector('svg')
+    ).toBeTruthy();
     const parentLink = within(lists[0]).getByRole('link', {
       name: 'Parent',
       hidden: true,

package/lib/components/Table/Table.context.ts

@@ -3,10 +3,19 @@ import type { TableColumnMetadata } from './Table.types';
 
 export type TableContextValue = {
   columns: TableColumnMetadata[];
+  disableMobileView: boolean;
 };
 
-const TableContext = createContext<TableContextValue>({ columns: [] });
+const TableContext = createContext<TableContextValue>({
+  columns: [],
+  disableMobileView: false,
+});
 
 export const TableContextProvider = TableContext.Provider;
 
 export const useTableContext = () => use(TableContext);
+
+export const getMobileBreakpoint = (
+  tabletBreakpoint: number,
+  disableMobileView: boolean
+) => (disableMobileView ? -1 : tabletBreakpoint - 1);

package/lib/components/Table/Table.tsx

@@ -2,7 +2,7 @@ import { Children, isValidElement } from 'react';
 import { css, cx } from '@emotion/css';
 import { Head, HeadCell, Body, Row, Cell } from './subcomponents';
 import { useTheme } from '../../theme';
-import { TableContextProvider } from './Table.context';
+import { TableContextProvider, getMobileBreakpoint } from './Table.context';
 import type {
   ColumnVariant,
   NormalizedTableMobileRole,
@@ -78,10 +78,15 @@ const Table = ({
   children,
   ref,
   ariaLabel,
+  disableMobileView = false,
   ...props
 }: TableProps) => {
   const [theme] = useTheme();
   const columns = getColumnsFromChildren(children);
+  const mobileBreakpoint = getMobileBreakpoint(
+    theme.breakpoints.tablet,
+    disableMobileView
+  );
 
   const baseStyle = css`
     width: 100%;
@@ -92,7 +97,7 @@ const Table = ({
     line-height: ${theme.typography.body.sm.lineHeight}%;
     border-collapse: collapse;
 
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       display: block;
       border-collapse: separate;
     }
@@ -101,7 +106,7 @@ const Table = ({
   const style = cx(baseStyle, className, NAME);
 
   return (
-    <TableContextProvider value={{ columns }}>
+    <TableContextProvider value={{ columns, disableMobileView }}>
       <table
         className={style}
         data-testid={testId}

package/lib/components/Table/Table.types.ts

@@ -33,4 +33,6 @@ export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
   className?: string;
   ref?: React.Ref<HTMLTableElement>;
   ariaLabel?: string;
+  /** Disable the responsive switch to a mobile card layout below the tablet breakpoint, keeping a real table at all widths. */
+  disableMobileView?: boolean;
 }

package/lib/components/Table/__tests__/Table.test.tsx

@@ -3,6 +3,10 @@ import { describe, expect, test } from 'vitest';
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import Table from '../Table';
 import { ThemeContextProvider } from '../../../theme/useTheme';
+import defaultTheme from '../../../theme/original/defaultTheme';
+
+const getGeneratedClass = (element: HTMLElement) =>
+  [...element.classList].find((className) => className.startsWith('css-'));
 
 describe('Table', () => {
   // Snapshot tests
@@ -231,4 +235,90 @@ describe('Table', () => {
 
     expect(row).toHaveAttribute('data-mobile-expanded', 'true');
   });
+
+  test('uses the real mobile breakpoint for the card layout by default', () => {
+    render(
+      <ThemeContextProvider>
+        <Table>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Test Cell</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </ThemeContextProvider>
+    );
+
+    const table = screen.getByTestId('ucl-uikit-table');
+    const tableClass = getGeneratedClass(table);
+    const mobileMaxWidth = defaultTheme.breakpoints.tablet - 1;
+
+    expect(tableClass).toBeDefined();
+    expect(document.head.textContent).toContain(
+      `@media screen and (max-width: ${mobileMaxWidth}px){.${tableClass}{display:block;border-collapse:separate;}}`
+    );
+  });
+
+  test('disableMobileView removes the mobile-card layout media query from the table', () => {
+    render(
+      <ThemeContextProvider>
+        <Table disableMobileView>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Test Cell</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </ThemeContextProvider>
+    );
+
+    const table = screen.getByTestId('ucl-uikit-table');
+    const tableClass = getGeneratedClass(table);
+    const mobileMaxWidth = defaultTheme.breakpoints.tablet - 1;
+
+    expect(tableClass).toBeDefined();
+    expect(document.head.textContent).toContain(
+      `@media screen and (max-width: -1px){.${tableClass}{display:block;border-collapse:separate;}}`
+    );
+    expect(document.head.textContent).not.toContain(
+      `@media screen and (max-width: ${mobileMaxWidth}px){.${tableClass}{display:block;border-collapse:separate;}}`
+    );
+  });
+
+  test('disableMobileView also disables the row card layout and details disclosure media queries', () => {
+    render(
+      <ThemeContextProvider>
+        <Table disableMobileView>
+          <Table.Head>
+            <Table.HeadCell mobileRole='primary'>Name</Table.HeadCell>
+            <Table.HeadCell>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 row = screen.getByTestId('ucl-uikit-table__row');
+    const rowClass = getGeneratedClass(row);
+    const detailsCell = row.querySelector('[data-mobile-role="details"]');
+    const detailsClass =
+      detailsCell && getGeneratedClass(detailsCell as HTMLElement);
+
+    expect(rowClass).toBeDefined();
+    expect(document.head.textContent).toContain(
+      `@media screen and (max-width: -1px){.${rowClass}{display:grid;`
+    );
+
+    // The details disclosure cell is hidden via a min-width query one above
+    // the (disabled) mobile breakpoint, so it forces display:none at every width.
+    expect(detailsClass).toBeDefined();
+    expect(document.head.textContent).toContain(
+      `@media screen and (min-width: 0px){.${detailsClass}{display:none;}}`
+    );
+  });
 });

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

@@ -1,5 +1,6 @@
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../theme';
+import { getMobileBreakpoint, useTableContext } from '../Table.context';
 
 export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
 
@@ -7,9 +8,14 @@ const NAME = 'ucl-uikit-table__body';
 
 const Body = ({ className, children, ...props }: TableBodyProps) => {
   const [theme] = useTheme();
+  const { disableMobileView } = useTableContext();
+  const mobileBreakpoint = getMobileBreakpoint(
+    theme.breakpoints.tablet,
+    disableMobileView
+  );
 
   const baseStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       display: block;
       width: 100%;
     }

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

@@ -1,7 +1,7 @@
 import { css, cx } from '@emotion/css';
 import CellContent from './CellContent';
 import { useTheme } from '../../../../theme';
-import { useTableContext } from '../../Table.context';
+import { getMobileBreakpoint, useTableContext } from '../../Table.context';
 import type {
   ColumnVariant,
   NormalizedTableMobileRole,
@@ -62,7 +62,11 @@ const Cell = ({
   ...props
 }: TableCellProps) => {
   const [theme] = useTheme();
-  const { columns } = useTableContext();
+  const { columns, disableMobileView } = useTableContext();
+  const mobileBreakpoint = getMobileBreakpoint(
+    theme.breakpoints.tablet,
+    disableMobileView
+  );
   const mobileColumn = columns[__mobileColumnIndex ?? -1];
   const mobileRole = mobileColumn?.mobileRole ?? getDefaultMobileRole(variant);
   const mobileLabel = mobileColumn?.mobileLabel;
@@ -96,7 +100,7 @@ const Cell = ({
     font-weight: ${theme.typography.body.sm.fontWeight};
     line-height: ${theme.typography.body.sm.lineHeight}%;
 
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       min-width: 0;
       height: auto;
       padding: 0;
@@ -104,7 +108,7 @@ const Cell = ({
   `;
 
   const mobileSelectionStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-column: 1;
       grid-row: 1 / span 2;
       order: 0;
@@ -114,7 +118,7 @@ const Cell = ({
   `;
 
   const mobilePrimaryStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       display: grid;
       grid-template-columns: minmax(0, 1fr) auto;
       align-items: start;
@@ -124,26 +128,26 @@ const Cell = ({
   `;
 
   const mobilePrimaryAfterSelectionStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-column: 2;
     }
   `;
 
   const mobilePrimaryWithoutSelectionStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-column: 1 / 3;
     }
   `;
 
   const mobilePrimaryWithPrimaryMetaStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-row: 2;
       order: 2;
     }
   `;
 
   const mobilePrimaryWithoutPrimaryMetaStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-row: 1 / span 2;
       order: 1;
       align-self: center;
@@ -151,7 +155,7 @@ const Cell = ({
   `;
 
   const mobilePrimaryMetaStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-row: 1;
       order: 1;
       min-height: 18px;
@@ -159,19 +163,19 @@ const Cell = ({
   `;
 
   const mobilePrimaryMetaAfterSelectionStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-column: 2;
     }
   `;
 
   const mobilePrimaryMetaWithoutSelectionStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-column: 1 / 3;
     }
   `;
 
   const mobileStatusStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-column: 3;
       grid-row: 1 / span 2;
       order: 2;
@@ -180,7 +184,7 @@ const Cell = ({
   `;
 
   const mobileContextMenuStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-column: 4;
       grid-row: 1 / span 2;
       order: 3;
@@ -189,7 +193,7 @@ const Cell = ({
   `;
 
   const mobileFieldStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       display: grid;
       grid-template-columns: minmax(90px, 32%) minmax(0, 1fr);
       grid-column: 1 / -1;
@@ -207,7 +211,7 @@ const Cell = ({
   `;
 
   const mobileFirstFieldStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       margin-top: ${theme.margin.m16};
       padding-top: ${theme.padding.p12};
       border-top: ${theme.border.b1} solid ${theme.colour.border.default};
@@ -215,7 +219,7 @@ const Cell = ({
   `;
 
   const mobilePrimaryActionStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-column: 1 / -1;
       order: 30;
       margin-top: ${theme.margin.m8};
@@ -225,7 +229,7 @@ const Cell = ({
   `;
 
   const mobileHiddenStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       display: none;
     }
   `;

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

@@ -4,6 +4,7 @@ import type { CheckboxProps } from '../../../Checkbox/Checkbox';
 import Button from '../../../Button';
 import type { ButtonProps } from '../../../Button';
 import { useTheme } from '../../../../theme';
+import { getMobileBreakpoint, useTableContext } from '../../Table.context';
 import type {
   ColumnVariant,
   NormalizedTableMobileRole,
@@ -37,6 +38,11 @@ const CellContent = ({
   children,
 }: CellContentProps) => {
   const [theme] = useTheme();
+  const { disableMobileView } = useTableContext();
+  const mobileBreakpoint = getMobileBreakpoint(
+    theme.breakpoints.tablet,
+    disableMobileView
+  );
 
   const baseStyle = css`
     display: flex;
@@ -67,7 +73,7 @@ const CellContent = ({
   `;
 
   const mobileStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       align-items: flex-start;
       justify-content: flex-start;
       min-width: 0;
@@ -77,7 +83,7 @@ const CellContent = ({
   `;
 
   const mobilePrimaryStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       display: -webkit-box;
       overflow: hidden;
       color: ${theme.colour.text.default};
@@ -92,7 +98,7 @@ const CellContent = ({
   `;
 
   const mobilePrimaryMetaStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       color: ${theme.colour.text.secondary};
       font-family: ${theme.typography.body.xs.fontFamily};
       font-feature-settings: ${theme.typography.body.xs.fontSettings};
@@ -103,14 +109,14 @@ const CellContent = ({
   `;
 
   const mobilePrimaryActionStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}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) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       justify-content: flex-end;
     }
   `;

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

@@ -1,5 +1,6 @@
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../theme';
+import { getMobileBreakpoint, useTableContext } from '../Table.context';
 
 export interface TableHeadProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
 
@@ -7,12 +8,17 @@ const NAME = 'ucl-uikit-table__head';
 
 const Head = ({ className, children, ...props }: TableHeadProps) => {
   const [theme] = useTheme();
+  const { disableMobileView } = useTableContext();
+  const mobileBreakpoint = getMobileBreakpoint(
+    theme.breakpoints.tablet,
+    disableMobileView
+  );
 
   const baseStyle = css`
     height: 40px;
     background-color: ${theme.colour.surface.secondary};
 
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       position: absolute;
       width: 1px;
       height: 1px;

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

@@ -1,7 +1,7 @@
 import { Children, cloneElement, isValidElement, useState } from 'react';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../theme';
-import { useTableContext } from '../Table.context';
+import { getMobileBreakpoint, useTableContext } from '../Table.context';
 import Icon from '../../Icon/Icon';
 import type { TableCellProps } from './Cell/Cell';
 import type { NormalizedTableMobileRole } from '../Table.types';
@@ -41,7 +41,11 @@ const Row = ({
   ...props
 }: TableRowProps) => {
   const [theme] = useTheme();
-  const { columns } = useTableContext();
+  const { columns, disableMobileView } = useTableContext();
+  const mobileBreakpoint = getMobileBreakpoint(
+    theme.breakpoints.tablet,
+    disableMobileView
+  );
   const [uncontrolledMobileExpanded, setUncontrolledMobileExpanded] = useState(
     defaultMobileExpanded
   );
@@ -93,7 +97,7 @@ const Row = ({
       background-color: ${theme.colour.surface.secondary};
     }
 
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       display: grid;
       grid-template-columns: auto minmax(0, 1fr) auto;
       align-items: start;
@@ -127,7 +131,7 @@ const Row = ({
       background-color: ${theme.colour.surface.brandSecondary};
     }
 
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       background-color: ${theme.colour.surface.brandSecondary};
       border-color: ${theme.colour.border.brandSubtle};
 
@@ -138,7 +142,7 @@ const Row = ({
   `;
 
   const mobileContextMenuGridStyle = css`
-    @media screen and (max-width: ${theme.breakpoints.tablet - 1}px) {
+    @media screen and (max-width: ${mobileBreakpoint}px) {
       grid-template-columns: auto minmax(0, 1fr) auto auto;
     }
   `;
@@ -157,7 +161,7 @@ const Row = ({
     order: 10;
     margin-top: ${theme.margin.m8};
 
-    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+    @media screen and (min-width: ${mobileBreakpoint + 1}px) {
       display: none;
     }
   `;

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.40.3",
+  "version": "0.40.5",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",