Add A to Z navigation

.changeset/gold-suns-argue.md

@@ -0,0 +1,5 @@
+---
+"nhsuk-frontend-react": minor
+---
+
+feat: add a-to-z and back to top

.changeset/smooth-falcons-provide.md

@@ -0,0 +1,5 @@
+---
+"nhsuk-frontend-react": patch
+---
+
+fix: add missing element props for heading

packages/nhsuk-frontend-react/src/__stories__/patterns/AToZPage.stories.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { AToZ } from '@/components/navigation/a-to-z/AToZ';
+import { Header } from '@/components/navigation/header/Header';
+import { Container } from '@/components/styles/layout/container/Container';
+import { Card } from '@/components/navigation/card/Card';
+import { Main } from '@/components/styles/layout/main/Main';
+import { Column, Row } from '@/components/styles/layout/grid/Grid';
+import { Heading } from '@/components/styles/typography/heading/Heading';
+import { List } from '@/components/styles/typography/list/List';
+import { Link } from '@/components/styles/typography/link/Link';
+import { Footer } from '@/components/navigation/footer/Footer';
+
+/**
+ * A to Z is a way of presenting a number of pages alphabetically.
+ *
+ * https://service-manual.nhs.uk/design-system/patterns/a-to-z-page
+ */
+const meta: Meta = {
+  title: 'Patterns/Page types/A to Z page',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const AToZPage: Story = {
+  render: (args) => (
+    <>
+      <Header {...args}>
+        <Header.Container>
+          <Header.Logo variant="logo-only" href="/" aria-label="NHS homepage" />
+        </Header.Container>
+        <Header.Nav />
+      </Header>
+
+      <Container>
+        <Main>
+          <Row>
+            <Column width="full">
+              <Heading>Health A to Z</Heading>
+
+              <AToZ id="nhsuk-nav-a-z" aria-label="A to Z Navigation">
+                <AToZ.Item href="#A">A</AToZ.Item>
+                <AToZ.Item href="#B" noItems>
+                  B
+                </AToZ.Item>
+                <AToZ.Item href="#C">C</AToZ.Item>
+                <AToZ.Item href="#D">D</AToZ.Item>
+              </AToZ>
+
+              <Card variant="feature">
+                <Card.Content>
+                  <Card.Heading id="A">A</Card.Heading>
+                  <List border>
+                    <List.Item>
+                      <Link href="#">AAA</Link>
+                    </List.Item>
+                    <List.Item>
+                      <Link href="#">Abdominal aortic aneurysm</Link>
+                    </List.Item>
+                    <List.Item>
+                      <Link href="#">Abscess</Link>
+                    </List.Item>
+                  </List>
+                </Card.Content>
+              </Card>
+
+              <Card variant="feature">
+                <Card.Content>
+                  <Card.Heading id="B">B</Card.Heading>
+                  <List border>
+                    <List.Item>
+                      There are currently no conditions listed
+                    </List.Item>
+                  </List>
+                </Card.Content>
+              </Card>
+            </Column>
+          </Row>
+        </Main>
+      </Container>
+
+      <Footer>
+        <Footer.Content>
+          <Footer.List />
+          <Footer.Copyright>NHS England</Footer.Copyright>
+        </Footer.Content>
+      </Footer>
+    </>
+  ),
+};

packages/nhsuk-frontend-react/src/__stories__/patterns/HelpUsersDecideWhenAndWhereToGetCare.stories.tsx

@@ -1,5 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { NonUrgentCareCard, UrgentCareCard, EmergencyCareCard } from '@/components/navigation/card/Card.stories';
+import {
+  NonUrgentCareCard,
+  UrgentCareCard,
+  EmergencyCareCard,
+} from '@/components/navigation/card/Card.stories';
 
 /**
  * Care cards help users identify and understand the care they need, who to contact and how quickly.

packages/nhsuk-frontend-react/src/__stories__/patterns/MiniHub.stories.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Header } from '@/components/navigation/header/Header';
+import { Container } from '@/components/styles/layout/container/Container';
+import { Main } from '@/components/styles/layout/main/Main';
+import { Column, Row } from '@/components/styles/layout/grid/Grid';
+import { Heading } from '@/components/styles/typography/heading/Heading';
+import { List } from '@/components/styles/typography/list/List';
+import { Footer } from '@/components/navigation/footer/Footer';
+import { Breadcrumb } from '@/components/navigation/breadcrumb/Breadcrumb';
+import { VisuallyHidden } from '@/components/core/visually-hidden/VisuallyHidden';
+import { ContentsList } from '@/components/navigation/contents-list/ContentsList';
+import { Paragraph } from '@/components/styles/typography/paragraph/Paragraph';
+import { Pagination } from '@/components/navigation/pagination/Pagination';
+
+const meta: Meta = {
+  title: 'Patterns/Page types/Mini-hub page',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const MiniHub: Story = {
+  render: (args) => (
+    <>
+      <Header {...args}>
+        <Header.Container>
+          <Header.Logo variant="logo-only" href="/" aria-label="NHS homepage" />
+        </Header.Container>
+        <Header.Nav />
+      </Header>
+
+      <Breadcrumb>
+        <Breadcrumb.List>
+          <Breadcrumb.ListItem>Home</Breadcrumb.ListItem>
+          <Breadcrumb.ListItem>Health A to Z</Breadcrumb.ListItem>
+        </Breadcrumb.List>
+        <Breadcrumb.BackLink>Health A to Z</Breadcrumb.BackLink>
+      </Breadcrumb>
+
+      <Container>
+        <Main>
+          <Row>
+            <Column width="two-thirds">
+              <Heading>
+                <span role="text">
+                  What is AMD?
+                  <span className="nhsuk-caption-xl nhsuk-caption--bottom">
+                    <VisuallyHidden>-</VisuallyHidden>
+                    Age-related macular degeneration (AMD)
+                  </span>
+                </span>
+              </Heading>
+
+              <ContentsList aria-label="Pages in this guide">
+                <ContentsList.Item href="#" active>
+                  What is AMD?
+                </ContentsList.Item>
+                <ContentsList.Item href="#">Symptoms</ContentsList.Item>
+                <ContentsList.Item href="#">
+                  Getting diagnosed
+                </ContentsList.Item>
+                <ContentsList.Item href="#">Treatment</ContentsList.Item>
+                <ContentsList.Item href="#">Living with AMD</ContentsList.Item>
+              </ContentsList>
+
+              <List variant="unordered">
+                <List.Item>
+                  <strong>
+                    Age-related macular degeneration (AMD) is a common condition
+                    that affects the middle part of your vision.
+                  </strong>{' '}
+                  It usually first affects people in their 50s and 60s.
+                </List.Item>
+                <List.Item>
+                  <strong>It doesn't cause total blindness.</strong> But it can
+                  make everyday activities like reading and recognising faces
+                  difficult.
+                </List.Item>
+                <List.Item>
+                  <strong>Without treatment, your vision may get worse.</strong>{' '}
+                  This can happen gradually over several years ("dry AMD"), or
+                  quickly over a few weeks or months ("wet AMD").
+                </List.Item>
+                <List.Item>
+                  <strong>The exact cause is unknown.</strong> It's been linked
+                  to smoking, high blood pressure, being overweight and having a
+                  family history of AMD.
+                </List.Item>
+              </List>
+
+              <Paragraph
+                variant="small"
+                className="nhsuk-u-margin-top-7 nhsuk-u-secondary-text-color"
+              >
+                Page last reviewed: 27 March 2018 <br />
+                Next review due: 27 March 2021
+              </Paragraph>
+
+              <Pagination>
+                <Pagination.Next pageTitle="Symptoms" />
+              </Pagination>
+            </Column>
+          </Row>
+        </Main>
+      </Container>
+
+      <Footer>
+        <Footer.Content>
+          <Footer.List />
+          <Footer.Copyright>NHS England</Footer.Copyright>
+        </Footer.Content>
+      </Footer>
+    </>
+  ),
+};

packages/nhsuk-frontend-react/src/__stories__/patterns/ReassureUsersThatAPageIsUpToDate.stories.tsx

@@ -17,8 +17,13 @@ type Story = StoryObj<typeof meta>;
 
 export const ReassureUsersThatAPageIsUpToDate: Story = {
   render: (args) => (
-    <Paragraph {...args} variant="small" className="nhsuk-u-secondary-text-color nhsuk-u-margin-top-7 nhsuk-u-margin-bottom-0">
-      Page last reviewed: 15 March 2021<br />
+    <Paragraph
+      {...args}
+      variant="small"
+      className="nhsuk-u-secondary-text-color nhsuk-u-margin-top-7 nhsuk-u-margin-bottom-0"
+    >
+      Page last reviewed: 15 March 2021
+      <br />
       Next review due: 15 March 2024
     </Paragraph>
   ),

packages/nhsuk-frontend-react/src/__stories__/patterns/StartPage.stories.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Header } from '@/components/navigation/header/Header';
+import { Container } from '@/components/styles/layout/container/Container';
+import { Main } from '@/components/styles/layout/main/Main';
+import { Column, Row } from '@/components/styles/layout/grid/Grid';
+import { Heading } from '@/components/styles/typography/heading/Heading';
+import { Footer } from '@/components/navigation/footer/Footer';
+import { Breadcrumb } from '@/components/navigation/breadcrumb/Breadcrumb';
+import { Paragraph } from '@/components/styles/typography/paragraph/Paragraph';
+import { Pagination } from '@/components/navigation/pagination/Pagination';
+import { Button } from '@/components/form-elements/button/Button';
+
+const meta: Meta = {
+  title: 'Patterns/Page types/Start page',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const MiniHub: Story = {
+  render: (args) => (
+    <>
+      <Header {...args}>
+        <Header.Container>
+          <Header.Logo variant="logo-only" href="/" aria-label="NHS homepage" />
+        </Header.Container>
+        <Header.Nav />
+      </Header>
+
+      <Breadcrumb>
+        <Breadcrumb.List>
+          <Breadcrumb.ListItem>Home</Breadcrumb.ListItem>
+          <Breadcrumb.ListItem>Section</Breadcrumb.ListItem>
+          <Breadcrumb.ListItem>Subsection</Breadcrumb.ListItem>
+        </Breadcrumb.List>
+        <Breadcrumb.BackLink>Subsection</Breadcrumb.BackLink>
+      </Breadcrumb>
+
+      <Container>
+        <Main>
+          <Row>
+            <Column width="two-thirds">
+              <Heading>Service name goes here</Heading>
+
+              <Paragraph>Use this service to do something.</Paragraph>
+              <Pagination>You can use this service if you:</Pagination>
+
+              <ul>
+                <li>live in England</li>
+                <li>need to get a thing</li>
+                <li>need to change a thing</li>
+              </ul>
+
+              <Heading as="h2">Before you start</Heading>
+
+              <Paragraph>We'll ask you for: ...</Paragraph>
+
+              <Button as="a" href="#">
+                Start now
+              </Button>
+
+              <Paragraph>
+                By using this service you are agreeing to our{' '}
+                <a href="#">terms of use</a> and <a href="#">privacy policy</a>.
+              </Paragraph>
+            </Column>
+          </Row>
+        </Main>
+      </Container>
+
+      <Footer>
+        <Footer.Content>
+          <Footer.List />
+          <Footer.Copyright>NHS England</Footer.Copyright>
+        </Footer.Content>
+      </Footer>
+    </>
+  ),
+};

packages/nhsuk-frontend-react/src/components/navigation/a-to-z/AToZ.spec.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { composeStory } from '@storybook/react';
+import meta, { Default as DefaultStory } from './AToZ.stories';
+
+const AToZ = composeStory(DefaultStory, meta);
+
+it('should render AToZ', () => {
+  const { container } = render(<AToZ />);
+
+  expect(container).toMatchSnapshot();
+  expect(container.querySelectorAll('a')).toHaveLength(24);
+  expect(
+    container.querySelectorAll('.nhsuk-u-secondary-text-color'),
+  ).toHaveLength(2);
+});