uikit-react-public 0.40.1 → 0.40.3

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/Header/Header.tsx

@@ -1,9 +1,10 @@
 import { memo, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
-import { useTheme } from '../..';
+import { themes, useTheme } from '../../theme';
 import UclLogo from '../UclLogo/UclLogo';
 import HeaderMenu from './HeaderMenu';
 import Link from '../Link';
+import HeaderNew from '../HeaderNew';
 
 export const NAME = 'ucl-uikit-header';
 export const HEADER_DESKTOP_HEIGHT_PX = 72;
@@ -12,17 +13,19 @@ export const DEFAULT_Z_INDEX = 3;
 
 export interface HeaderProps extends HTMLAttributes<HTMLElement> {
   title?: string;
+  /** @deprecated Only used by the default-theme legacy Header. */
   fixed?: boolean;
   titleAs?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
   titleClassName?: string;
   titleProps?: Record<string, unknown>;
   homeLinkHref?: string;
   homeLinkProps?: Record<string, unknown>;
+  /** @deprecated Use `homeLinkProps={{ 'aria-label': '...' }}` instead. */
   homeLinkAriaLabel?: string;
   testId?: string;
 }
 
-const Header = ({
+const LegacyHeader = ({
   title,
   fixed = false,
   titleAs = 'div',
@@ -159,15 +162,77 @@ const Header = ({
   );
 };
 
+const Header = ({
+  title,
+  titleAs = 'div',
+  titleClassName,
+  titleProps,
+  homeLinkHref,
+  homeLinkProps,
+  homeLinkAriaLabel,
+  testId = NAME,
+  className,
+  children,
+  fixed,
+  ...props
+}: HeaderProps) => {
+  const [theme] = useTheme();
+
+  if (theme === themes.default) {
+    return (
+      <LegacyHeader
+        title={title}
+        fixed={fixed}
+        titleAs={titleAs}
+        titleClassName={titleClassName}
+        titleProps={titleProps}
+        homeLinkHref={homeLinkHref}
+        homeLinkProps={homeLinkProps}
+        homeLinkAriaLabel={homeLinkAriaLabel}
+        testId={testId}
+        className={className}
+        {...props}
+      >
+        {children}
+      </LegacyHeader>
+    );
+  }
+
+  const resolvedHomeLinkProps =
+    homeLinkAriaLabel && !homeLinkProps?.['aria-label']
+      ? { ...homeLinkProps, 'aria-label': homeLinkAriaLabel }
+      : homeLinkProps;
+
+  return (
+    <HeaderNew
+      title={title ?? ''}
+      titleAs={titleAs}
+      titleClassName={titleClassName}
+      titleProps={titleProps}
+      homeLinkHref={homeLinkHref}
+      homeLinkProps={resolvedHomeLinkProps}
+      testId={testId}
+      className={className}
+      {...props}
+    >
+      {children}
+    </HeaderNew>
+  );
+};
+
 const MemoAppHeader = memo(Header);
 
 export interface IHeaderSubComponents {
   Menu: typeof HeaderMenu;
+  MenuContainer: (typeof HeaderNew)['MenuContainer'];
+  Item: (typeof HeaderNew)['Item'];
 }
 
 const HeaderWithSubComponents = MemoAppHeader as typeof MemoAppHeader &
   IHeaderSubComponents;
 
 HeaderWithSubComponents.Menu = HeaderMenu;
+HeaderWithSubComponents.MenuContainer = HeaderNew.MenuContainer;
+HeaderWithSubComponents.Item = HeaderNew.Item;
 
 export default HeaderWithSubComponents;

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

@@ -39,4 +39,54 @@ describe('Header', () => {
     expect(link).toBeInTheDocument();
     expect(link.getAttribute('href')).toBe('/');
   });
+
+  test('uses the legacy header for the default theme', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Header title='LIDS'>
+          <Header.Menu testId='legacy-header-menu'>Menu</Header.Menu>
+        </Header>
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByTestId('legacy-header-menu')).toBeInTheDocument();
+    expect(
+      renderResult.container.querySelector('.ucl-uikit-header__border')
+    ).not.toBeInTheDocument();
+  });
+
+  test('uses the new header for light and dark themes', () => {
+    const renderResult = render(
+      <ThemeContextProvider theme='light'>
+        <Header title='LIDS'>
+          <Header.MenuContainer>
+            <Header.Item testId='new-header-item'>Item</Header.Item>
+          </Header.MenuContainer>
+        </Header>
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByTestId('new-header-item')).toHaveClass(
+      'ucl-uikit-header__item'
+    );
+    expect(
+      renderResult.container.querySelector('.ucl-uikit-header__border')
+    ).toBeInTheDocument();
+  });
+
+  test('maps the deprecated homeLinkAriaLabel prop to the new header link props', () => {
+    render(
+      <ThemeContextProvider theme='dark'>
+        <Header
+          title='LIDS'
+          homeLinkHref='/'
+          homeLinkAriaLabel='Go home'
+        />
+      </ThemeContextProvider>
+    );
+
+    const link = screen.getByLabelText('Go home');
+    expect(link).toBeInTheDocument();
+    expect(link.getAttribute('href')).toBe('/');
+  });
 });

package/lib/components/HeaderNew/Header.tsx

@@ -1,6 +1,6 @@
 import { memo, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
-import { useTheme } from '../..';
+import { useTheme } from '../../theme';
 import HeaderMenuContainer from './HeaderMenuContainer';
 import HeaderItem from './HeaderItem';
 import HeaderTitle from './HeaderTitle';

package/lib/components/HeaderNew/HeaderBorder.tsx

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

package/lib/components/HeaderNew/HeaderItem.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-header__item';
 

package/lib/components/HeaderNew/HeaderLogo.tsx

@@ -1,5 +1,7 @@
 import { css, cx } from '@emotion/css';
-import { UclLogoNew, UclLogoProps, useTheme } from '../..';
+import { useTheme } from '../../theme';
+import UclLogoNew from '../UclLogoNew/UclLogo';
+import type { UclLogoProps } from '../UclLogoNew/UclLogo';
 
 export const NAME = 'ucl-uikit-header__logo';
 

package/lib/components/HeaderNew/HeaderTitle.tsx

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

package/package.json

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