@tpzdsp/next-toolkit 2.5.0 → 3.0.0

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,41 @@
+import { Copyright } from './Copyright';
+import { Licence } from './Licence';
+import { MetaLinks } from './MetaLinks';
+import { DefraLogo } from '../../assets/images/DefraLogo';
+import { WidthContainer } from '../Layout/WidthContainer/WidthContainer';
+
+export const Footer = () => (
+  <footer className="bg-wash">
+    <WidthContainer className="py-gds-3">
+      <div
+        className="grid gap-gds-2 grid-cols-1 sm:grid-cols-[1fr_min-content]
+          grid-rows-[min-content_min-content_min-content_min-content]
+          sm:grid-rows-[min-content_min-content_min-content] md:grid-rows-[min-content_min-content]"
+      >
+        <nav className="row-start-1 col-start-1 w-full pb-gds-2 self-end">
+          <h2 className="sr-only">Support Links</h2>
+
+          <MetaLinks />
+        </nav>
+
+        <div className="row-start-2 col-start-1 self-end pt-gds-1">
+          <Licence />
+        </div>
+
+        <DefraLogo
+          aria-hidden
+          className="row-start-3 sm:row-span-3 md:row-span-1 sm:row-start-1 col-start-1
+            sm:col-start-2 h-20 w-auto shrink-0 fill-body md:h-20 justify-self-start
+            sm:justify-self-end"
+        />
+
+        <div
+          className="row-start-4 sm:row-start-3 col-start-1 md:row-start-2 md:col-start-2 self-end
+            justify-self-start md:justify-self-end"
+        >
+          <Copyright />
+        </div>
+      </div>
+    </WidthContainer>
+  </footer>
+);

package/src/components/Footer/Licence.tsx

@@ -0,0 +1,18 @@
+import { OglLogo } from '../../assets/images/OglLogo';
+import { ExternalLink } from '../ExternalLink/ExternalLink';
+
+export const Licence = () => (
+  <span className="block w-full wrap-break-word text-body">
+    <OglLogo className="inline w-9 mr-gds-2 align-middle" aria-hidden />
+    All content is available under the{' '}
+    <ExternalLink
+      className="wrap-break-word"
+      appearance="contrast"
+      variant="plain"
+      href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
+    >
+      Open Government Licence v3.0
+    </ExternalLink>
+    , except where otherwise stated.
+  </span>
+);

package/src/components/{layout/footer → Footer}/MetaLinks.tsx

@@ -1,4 +1,4 @@
-import { ExternalLink } from '../../link/ExternalLink';
+import { ExternalLink } from '../ExternalLink/ExternalLink';
 
 const LINKS = [
   {
@@ -24,10 +24,15 @@ const LINKS = [
 ];
 
 export const MetaLinks = () => (
-  <ul className="flex w-full flex-wrap gap-x-4 gap-y-2 md:gap-6 text-xs md:justify-start">
+  <ul className="flex w-full flex-wrap gap-x-gds-4 gap-y-gds-2 md:gap-gds-5 md:justify-start">
     {LINKS.map((link) => (
       <li className="flex" key={link.label}>
-        <ExternalLink className="text-black md:text-left" href={link.url}>
+        <ExternalLink
+          className="md:text-left"
+          appearance="contrast"
+          href={link.url}
+          variant="plain"
+        >
           {link.label}
         </ExternalLink>
       </li>

package/src/components/Footer/Small/SmallFooter.tsx

@@ -1,6 +1,8 @@
-import { DefraLogo } from '../../images/DefraLogo';
-import { EaLogo } from '../../images/EaLogo';
-import { OglLogo } from '../../images/OglLogo';
+import { DefraLogo } from '../../../assets/images/DefraLogo';
+import { EaLogo } from '../../../assets/images/EaLogo';
+import { OglLogo } from '../../../assets/images/OglLogo';
+import { ExternalLink } from '../../ExternalLink/ExternalLink';
+import { WidthContainer } from '../../Layout/WidthContainer/WidthContainer';
 
 const CROWN_COPYRIGHT_URL =
   'https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/';
@@ -17,45 +19,44 @@ export const SmallFooter = ({
   eaLogoPrimaryFill = '#F3F2F1',
   eaLogoHighlightFill = '#79A12F',
 }: SmallFooterProps) => (
-  <footer
-    aria-label="Site footer"
-    className="flex justify-center border-t border-gray-200 bg-[##F3F2F1] px-4 py-2"
-  >
-    <div className="flex w-full max-w-[1020px] items-center justify-between px-4 md:px-36">
-      <div className="flex items-center gap-2">
-        <EaLogo
-          className="h-8 w-auto"
-          aria-hidden="true"
-          primaryFill={eaLogoPrimaryFill}
-          highlightFill={eaLogoHighlightFill}
-        />
+  <footer aria-label="Site footer" className="flex justify-center">
+    <WidthContainer className="bg-wash py-gds-2">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <EaLogo
+            className="h-8 w-auto"
+            aria-hidden="true"
+            primaryFill={eaLogoPrimaryFill}
+            highlightFill={eaLogoHighlightFill}
+          />
+        </div>
+
+        <div className="flex items-center gap-gds-6 xs:gap-gds-2">
+          <ExternalLink
+            appearance="contrast"
+            variant="plain"
+            href={LICENSING_DETAILS_URL}
+            className="flex gap-gds-1 items-center"
+          >
+            <OglLogo className="size-10 shrink-0" aria-hidden="true" />
+
+            <span className="hidden xs:inline">Licencing details</span>
+          </ExternalLink>
+
+          <ExternalLink
+            appearance="contrast"
+            variant="plain"
+            href={CROWN_COPYRIGHT_URL}
+            className="flex gap-gds-1 items-center"
+          >
+            <DefraLogo className="size-10 shrink-0" aria-hidden="true" />
+
+            <span className="inline xs:hidden">©</span>
+
+            <span className="hidden xs:inline">© Crown copyright</span>
+          </ExternalLink>
+        </div>
       </div>
-
-      <div className="flex items-center gap-2 text-sm">
-        <OglLogo className="h-4 w-auto" aria-hidden="true" />
-
-        <a
-          href={LICENSING_DETAILS_URL}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="underline"
-        >
-          Licencing details
-        </a>
-
-        <span aria-hidden="true">|</span>
-
-        <a
-          href={CROWN_COPYRIGHT_URL}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="underline"
-        >
-          © Crown copyright
-        </a>
-
-        <DefraLogo className="h-8 w-auto" aria-hidden="true" />
-      </div>
-    </div>
+    </WidthContainer>
   </footer>
 );

package/src/components/Form/FormGroup.css

@@ -0,0 +1,18 @@
+@layer components {
+  /* MARK: Form group */
+  .cn-form-group {
+    @apply flex flex-col gap-gds-1;
+  }
+
+  .cn-form-group[data-invalid] {
+    @apply pl-gds-2;
+
+    border-left: 5px solid var(--color-error);
+  }
+
+  /* Label.css handles disabled via sibling combinator (~ :disabled), which
+     doesn't pierce wrapper elements like InputGroup. This catches that case. */
+  .cn-form-group:has(:is(:disabled, [aria-disabled='true'])) .cn-label {
+    @apply cursor-not-allowed select-none text-body-secondary;
+  }
+}

package/src/components/Form/FormGroup.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { FormGroup } from './FormGroup';
+import { Alert, AlertBody, AlertList, AlertListItem, AlertTitle } from '../Alert/Alert';
+import { ErrorText } from '../ErrorText/ErrorText';
+import { HintText } from '../HintText/HintText';
+import { Input } from '../Input/Input';
+import { Label } from '../Label/Label';
+import { Link } from '../Link/Link';
+
+const meta: Meta<typeof FormGroup> = {
+  title: 'Components/Form/FormGroup',
+  component: FormGroup,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A layout wrapper that groups a form field with its label, hint, and error text. When `invalid` is set, a red left border is applied to the whole group, matching the GDS error pattern. Accessibility attributes (`aria-describedby`, `aria-invalid`, `id`) must be wired manually on the input.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FormGroup>;
+
+export const Default: Story = {
+  render: () => (
+    <FormGroup>
+      <Label htmlFor="name">Full name</Label>
+
+      <HintText>As it appears on your passport</HintText>
+
+      <Input id="name" aria-describedby="name-hint" />
+    </FormGroup>
+  ),
+};
+
+export const Invalid: Story = {
+  render: () => (
+    <FormGroup invalid>
+      <Label htmlFor="name-invalid">Full name</Label>
+
+      <HintText id="name-invalid-hint">As it appears on your passport</HintText>
+
+      <ErrorText id="name-invalid-error">Enter your full name</ErrorText>
+
+      <Input
+        id="name-invalid"
+        aria-invalid
+        aria-describedby="name-invalid-hint name-invalid-error"
+      />
+    </FormGroup>
+  ),
+};
+
+export const WithErrorSummary: Story = {
+  render: () => (
+    <div className="flex flex-col gap-gds-4">
+      <Alert appearance="error">
+        <AlertTitle>There is a problem</AlertTitle>
+
+        <AlertBody>
+          <AlertList>
+            <AlertListItem>
+              <Link appearance="error" href="#full-name">
+                Enter your full name
+              </Link>
+            </AlertListItem>
+          </AlertList>
+        </AlertBody>
+      </Alert>
+
+      <FormGroup invalid>
+        <Label htmlFor="full-name">Full name</Label>
+
+        <HintText id="full-name-hint">As it appears on your passport</HintText>
+
+        <ErrorText id="full-name-error">Enter your full name</ErrorText>
+
+        <Input id="full-name" aria-invalid aria-describedby="full-name-hint full-name-error" />
+      </FormGroup>
+    </div>
+  ),
+};

package/src/components/Form/FormGroup.tsx

@@ -0,0 +1,16 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils/components';
+
+export type FormGroupProps = ComponentProps<'div'> & {
+  invalid?: boolean;
+};
+
+export const FormGroup = ({ invalid, className, ...props }: FormGroupProps) => (
+  <div
+    data-slot="form-group"
+    data-invalid={invalid ? true : undefined}
+    className={cn('cn-form-group', className)}
+    {...props}
+  />
+);

package/src/components/{layout/header → Header}/Header.stories.tsx

@@ -1,14 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Header } from './Header';
-import type { Credentials } from '../../../types/auth';
-import type { NavLink } from '../../../types/navigation';
-
-const navLinks: NavLink[] = [
-  { label: 'Home', url: '/', openInNewTab: false },
-  { label: 'API', url: '/api-docs', openInNewTab: false },
-  { label: 'Support', url: 'https://example.com/support', openInNewTab: true },
-];
+import { HeaderAppContent } from './HeaderAppContent';
+import type { Credentials } from '../../types/auth';
 
 const authenticatedCredentials: Credentials = {
   token: 'mock-token',
@@ -20,7 +14,7 @@ const authenticatedCredentials: Credentials = {
 };
 
 export default {
-  title: 'Components/Layout/Header',
+  title: 'Components/Header',
   component: Header,
   parameters: {
     layout: 'fullscreen',
@@ -32,15 +26,35 @@ export default {
     },
   },
   args: {
-    dspUrl: 'https://environment.data.gov.uk',
-    appName: 'Wetlands Inventory',
-    navLinks,
     credentials: null,
   },
 } as Meta<typeof Header>;
 
 export const Default: StoryObj<typeof Header> = {};
 
+export const AppSpecificContent: StoryObj<typeof Header> = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Resize the viewport (or Storybook's own frame) narrower to see the app nav links collapse from an inline list into a dropdown menu once the row no longer comfortably fits both the title and the links.",
+      },
+    },
+  },
+  args: {
+    appContent: (
+      <HeaderAppContent
+        title="UK Wetland Inventory"
+        links={[
+          { url: '/apis', label: 'Wetlands APIs' },
+          { url: '/downloads', label: 'Downloads' },
+          { url: '/faqs', label: 'FAQs' },
+        ]}
+      />
+    ),
+  },
+};
+
 export const Authenticated: StoryObj<typeof Header> = {
   args: {
     credentials: authenticatedCredentials,

package/src/components/Header/Header.test.tsx

@@ -0,0 +1,87 @@
+import { Header } from './Header';
+import { render, screen, userEvent } from '../../test/renderers';
+import type { Credentials } from '../../types/auth';
+
+const ARIA_EXPANDED = 'aria-expanded';
+
+const CREDENTIALS: Credentials = {
+  token: 'mock-token',
+  user: {
+    name: 'Jamie Taylor',
+    email: 'jamie.taylor@example.com',
+    groupInfoIds: ['group-1', 'group-2'],
+  },
+};
+
+describe('Header', () => {
+  it('renders the DEFRA and Data Services Platform brand links', () => {
+    render(<Header />);
+
+    expect(screen.getByRole('link', { name: 'DEFRA' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /data services platform/i })).toBeInTheDocument();
+  });
+
+  it('shows a Sign-in link pointing at /login when signed out', async () => {
+    render(<Header />);
+
+    const signInLink = await screen.findByRole('link', { name: 'Sign-in' });
+
+    expect(signInLink).toHaveAttribute('href', expect.stringContaining('/login?redirect_uri='));
+  });
+
+  it('shows a Profile menu with a sign-out link when signed in', async () => {
+    const user = userEvent.setup();
+
+    render(<Header credentials={CREDENTIALS} />);
+
+    expect(screen.queryByRole('link', { name: 'Sign-in' })).not.toBeInTheDocument();
+
+    await user.click(await screen.findByRole('button', { name: 'Profile' }));
+
+    expect(await screen.findByText(CREDENTIALS.user.email)).toBeInTheDocument();
+
+    const signOutLink = screen.getByRole('link', { name: 'Sign-out' });
+
+    expect(signOutLink).toHaveAttribute('href', expect.stringContaining('/logout?redirect_uri='));
+  });
+
+  it('toggles the nav drawer open and closed', async () => {
+    const user = userEvent.setup();
+
+    render(<Header />);
+
+    const trigger = screen.getByRole('button', { name: 'Navigation drawer' });
+
+    expect(trigger).toHaveAttribute(ARIA_EXPANDED, 'false');
+
+    await user.click(trigger);
+
+    expect(trigger).toHaveAttribute(ARIA_EXPANDED, 'true');
+    expect(screen.getByRole('navigation', { name: 'More navigation' })).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Close' }));
+
+    expect(trigger).toHaveAttribute(ARIA_EXPANDED, 'false');
+  });
+
+  it('toggles the search drawer open and closed', async () => {
+    const user = userEvent.setup();
+
+    render(<Header />);
+
+    const trigger = screen.getByRole('button', { name: 'Search the Data Services Platform' });
+
+    expect(trigger).toHaveAttribute(ARIA_EXPANDED, 'false');
+
+    await user.click(trigger);
+
+    expect(trigger).toHaveAttribute(ARIA_EXPANDED, 'true');
+    expect(screen.getByRole('searchbox')).toBeInTheDocument();
+  });
+
+  it('renders appContent when provided', () => {
+    render(<Header appContent={<div>App-specific content</div>} />);
+
+    expect(screen.getByText('App-specific content')).toBeInTheDocument();
+  });
+});