uikit-react-public 0.40.2 → 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/Footer/Footer.tsx

@@ -1,23 +1,31 @@
 import { memo, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
-import { Divider, UclLogo, useTheme } from '../..';
+import { themes, useTheme } from '../../theme';
+import Divider from '../Divider';
+import { UclLogo } from '../UclLogo';
 import FooterColumn from './FooterColumn';
+import type { FooterColumnProps } from './FooterColumn';
 import SocialLink from './SocialLink';
 import FooterNavLink from './FooterNavLink';
+import type { FooterNavLinkProps } from './FooterNavLink';
+import FooterNew from '../FooterNew';
 
 export const NAME = 'ucl-uikit-footer';
 
 export interface FooterProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
+  addressFormat?: 'compact' | 'full';
+  showSocialLinks?: boolean;
   disclaimer?: string;
   freedomOfInformation?: string;
   accessibility?: string;
   cookies?: string;
   privacy?: string;
   slaveryStatement?: string;
+  login?: string;
 }
 
-const Footer = ({
+const LegacyFooter = ({
   testId = NAME,
   className,
   disclaimer = 'https://www.ucl.ac.uk/legal-services/disclaimer',
@@ -257,17 +265,86 @@ const Footer = ({
   );
 };
 
+const Footer = ({
+  testId = NAME,
+  className,
+  addressFormat,
+  showSocialLinks,
+  disclaimer,
+  freedomOfInformation,
+  accessibility,
+  cookies,
+  privacy,
+  slaveryStatement,
+  login,
+  children,
+  ...props
+}: FooterProps) => {
+  const [theme] = useTheme();
+
+  if (theme === themes.default) {
+    return (
+      <LegacyFooter
+        testId={testId}
+        className={className}
+        disclaimer={disclaimer}
+        freedomOfInformation={freedomOfInformation}
+        accessibility={accessibility}
+        cookies={cookies}
+        privacy={privacy}
+        slaveryStatement={slaveryStatement}
+        {...props}
+      >
+        {children}
+      </LegacyFooter>
+    );
+  }
+
+  return (
+    <FooterNew
+      testId={testId}
+      className={className}
+      addressFormat={addressFormat}
+      showSocialLinks={showSocialLinks}
+      disclaimer={disclaimer}
+      freedomOfInformation={freedomOfInformation}
+      accessibility={accessibility}
+      cookies={cookies}
+      privacy={privacy}
+      slaveryStatement={slaveryStatement}
+      login={login}
+      {...props}
+    >
+      {children}
+    </FooterNew>
+  );
+};
+
+const FooterColumnBridge = (props: FooterColumnProps) => {
+  const [theme] = useTheme();
+  const Column = theme === themes.default ? FooterColumn : FooterNew.Column;
+
+  return <Column {...props} />;
+};
+
+const FooterNavLinkBridge = (props: FooterNavLinkProps) => {
+  const [theme] = useTheme();
+  const NavLink = theme === themes.default ? FooterNavLink : FooterNew.NavLink;
+
+  return <NavLink {...props} />;
+};
+
 const MemoFooter = memo(Footer);
 
 export interface IFooterSubComponents {
-  Column: typeof FooterColumn;
-  NavLink: typeof FooterNavLink;
+  Column: typeof FooterColumnBridge;
+  NavLink: typeof FooterNavLinkBridge;
 }
 
 const FooterWithSubComponents = MemoFooter as typeof MemoFooter &
   IFooterSubComponents;
 
-FooterWithSubComponents.Column = FooterColumn;
-FooterWithSubComponents.NavLink = FooterNavLink;
+FooterWithSubComponents.Column = FooterColumnBridge;
+FooterWithSubComponents.NavLink = FooterNavLinkBridge;
 
 export default FooterWithSubComponents;

package/lib/components/Footer/FooterColumn.tsx

@@ -1,11 +1,10 @@
 import { memo, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
-import { useTheme } from '../..';
+import { useTheme } from '../../theme';
 
 export const NAME = 'ucl-uikit-footer__column';
 
-export interface FooterColumnProps
-  extends HTMLAttributes<HTMLDivElement> {
+export interface FooterColumnProps extends HTMLAttributes<HTMLDivElement> {
   heading: string;
   testId?: string;
 }

package/lib/components/Footer/FooterNavLink.tsx

@@ -1,6 +1,8 @@
 import { memo } from 'react';
 import { css, cx } from '@emotion/css';
-import { Link, LinkProps, useTheme } from '../..';
+import { useTheme } from '../../theme';
+import Link from '../Link';
+import type { LinkProps } from '../Link';
 
 export const NAME = 'ucl-uikit-footer__nav-link';
 

package/lib/components/Footer/SocialLink.tsx

@@ -1,6 +1,9 @@
 import { memo } from 'react';
 import { css, cx } from '@emotion/css';
-import { Icon, Link, LinkProps, useTheme } from '../..';
+import { useTheme } from '../../theme';
+import Icon from '../Icon';
+import Link from '../Link';
+import type { LinkProps } from '../Link';
 
 export const NAME = 'ucl-uikit-footer__social-link';
 

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

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'vitest';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import Footer from '../Footer';
 import { ThemeContextProvider } from '../../../theme/useTheme';
 
@@ -12,9 +12,7 @@ describe('Footer', () => {
         <Footer />
       </ThemeContextProvider>
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
   test('snapshot: footer links provided', () => {
@@ -30,9 +28,7 @@ describe('Footer', () => {
         />
       </ThemeContextProvider>
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
   test('snapshot: nav links', () => {
@@ -50,8 +46,45 @@ describe('Footer', () => {
         </Footer>
       </ThemeContextProvider>
     );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('uses the legacy footer for the default theme', () => {
+    render(
+      <ThemeContextProvider>
+        <Footer />
+      </ThemeContextProvider>
+    );
+
+    expect(
+      screen.queryByRole('button', { name: /back to top/i })
+    ).not.toBeInTheDocument();
+  });
+
+  test('uses the new footer for light and dark themes', () => {
+    render(
+      <ThemeContextProvider theme='light'>
+        <Footer
+          login='https://www.ucl.ac.uk/login'
+          showSocialLinks={false}
+        >
+          <Footer.Column heading='Category 1'>
+            <Footer.NavLink href='#'>Item 1</Footer.NavLink>
+          </Footer.Column>
+        </Footer>
+      </ThemeContextProvider>
+    );
+
     expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+      screen.getByRole('button', { name: /back to top/i })
+    ).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Login' })).toHaveAttribute(
+      'href',
+      'https://www.ucl.ac.uk/login'
+    );
+    expect(screen.getByText('Category 1')).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Item 1' })).toHaveClass(
+      'ucl-uikit-footer__nav-link'
+    );
   });
 });

package/lib/components/FooterNew/BackToTop.tsx

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
-import { useTheme } from '../..';
+import { useTheme } from '../../theme';
 import Icon from '../Icon';
 import scrollToTop from '../../utils/scrollToTop';
 

package/lib/components/FooterNew/Footer.tsx

@@ -1,6 +1,6 @@
 import { memo, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
-import { useTheme } from '../..';
+import { useTheme } from '../../theme';
 import FooterColumn from './FooterColumn';
 import FooterNavLink from './FooterNavLink';
 import LogoAddressAndSocial from './LogoAddressAndSocial';

package/lib/components/FooterNew/FooterColumn.tsx

@@ -1,6 +1,6 @@
 import { memo, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
-import { useTheme } from '../..';
+import { useTheme } from '../../theme';
 
 export const NAME = 'ucl-uikit-footer__column';
 

package/lib/components/FooterNew/FooterLinks.tsx

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
-import { useTheme } from '../..';
+import { useTheme } from '../../theme';
 
 export const NAME = 'ucl-uikit-footer__links';
 

package/lib/components/FooterNew/FooterNavLink.tsx

@@ -1,6 +1,8 @@
 import { memo } from 'react';
 import { css, cx } from '@emotion/css';
-import { Link, LinkProps, useTheme } from '../..';
+import { useTheme } from '../../theme';
+import Link from '../Link';
+import type { LinkProps } from '../Link';
 
 export const NAME = 'ucl-uikit-footer__nav-link';
 

package/lib/components/FooterNew/LegalAndCopyright.tsx

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
-import { useTheme } from '../..';
+import { useTheme } from '../../theme';
 
 export const NAME = 'ucl-uikit-footer__legal-and-copyright';
 

package/lib/components/FooterNew/LogoAddressAndSocial.tsx

@@ -1,6 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
-import { UclLogoNew, useTheme } from '../..';
+import { useTheme } from '../../theme';
+import UclLogoNew from '../UclLogoNew/UclLogo';
 import SocialLink from './SocialLink';
 
 export const NAME = 'ucl-uikit-footer__logo-address-social';

package/lib/components/FooterNew/SocialLink.tsx

@@ -1,6 +1,9 @@
 import { memo } from 'react';
 import { css, cx } from '@emotion/css';
-import { Icon, Link, LinkProps, useTheme } from '../..';
+import { useTheme } from '../../theme';
+import Icon from '../Icon';
+import Link from '../Link';
+import type { LinkProps } from '../Link';
 
 export const NAME = 'ucl-uikit-footer__social-link';
 

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