docs(nhsuk-frontend-react): add complete tasks and confimation page s…

…tories
rowellx68 · Feb 14, 2025 · e8dee48 · e8dee48
1 parent bd9c500
commit e8dee48
Show file tree

Hide file tree

Showing 6 changed files with 230 additions and 6 deletions.
diff --git a/packages/nhsuk-frontend-react/src/__stories__/patterns/AskUsersForTheirNhsNumber.stories.tsx b/packages/nhsuk-frontend-react/src/__stories__/patterns/AskUsersForTheirNhsNumber.stories.tsx
@@ -13,7 +13,7 @@ import { Button } from '@/components/form-elements/button/Button';
  * https://service-manual.nhs.uk/design-system/patterns/ask-users-for-their-nhs-number
  */
 const meta: Meta = {
-  title: 'Patterns/Tasks/Ask users for their NHS number',
+  title: 'Patterns/Ask users for/NHS number',
   parameters: {
     layout: 'fullscreen',
   },
@@ -24,6 +24,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const AskUsersForTheirNhsNumber: Story = {
+  name: 'NHS number',
   render: (args) => (
     <>
       <Header {...args}>

diff --git a/packages/nhsuk-frontend-react/src/__stories__/patterns/CompleteMultipleTasks.stories.tsx b/packages/nhsuk-frontend-react/src/__stories__/patterns/CompleteMultipleTasks.stories.tsx
@@ -0,0 +1,126 @@
+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 { TaskList } from '@/components/content-presentation/task-list/TaskList';
+import { Button } from '@/components/form-elements/button/Button';
+
+/**
+ * Use this pattern to give users more control over how they complete long, complex services.
+ *
+ * https://service-manual.nhs.uk/design-system/patterns/complete-multiple-tasks
+ */
+const meta: Meta = {
+  title: 'Patterns/Help users to/Complete multiple tasks',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const CompleteMultipleTasks: 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="two-thirds">
+              <Heading size="l">Service name</Heading>
+
+              <Heading as="h2" size="m">
+                Your details
+              </Heading>
+              <TaskList>
+                <TaskList.Item variant="with-link">
+                  <TaskList.Item.NameAndHint as="a" href="#">
+                    Name
+                  </TaskList.Item.NameAndHint>
+                  <TaskList.Item.Status variant="completed">
+                    Completed
+                  </TaskList.Item.Status>
+                </TaskList.Item>
+                <TaskList.Item variant="with-link">
+                  <TaskList.Item.NameAndHint as="a" href="#">
+                    Contact details
+                  </TaskList.Item.NameAndHint>
+                  <TaskList.Item.Status variant="incomplete">
+                    Incomplete
+                  </TaskList.Item.Status>
+                </TaskList.Item>
+              </TaskList>
+
+              <Heading as="h2" size="m">
+                Your health
+              </Heading>
+              <TaskList>
+                <TaskList.Item variant="with-link">
+                  <TaskList.Item.NameAndHint as="a" href="#">
+                    Physical activity
+                  </TaskList.Item.NameAndHint>
+                  <TaskList.Item.Status variant="completed">
+                    Completed
+                  </TaskList.Item.Status>
+                </TaskList.Item>
+                <TaskList.Item variant="with-link">
+                  <TaskList.Item.NameAndHint as="a" href="#">
+                    Smoking history
+                  </TaskList.Item.NameAndHint>
+                  <TaskList.Item.Status variant="incomplete">
+                    Incomplete
+                  </TaskList.Item.Status>
+                </TaskList.Item>
+                <TaskList.Item variant="with-link">
+                  <TaskList.Item.NameAndHint as="a" href="#">
+                    Vaccination history
+                  </TaskList.Item.NameAndHint>
+                  <TaskList.Item.Status variant="completed">
+                    Completed
+                  </TaskList.Item.Status>
+                </TaskList.Item>
+                <TaskList.Item variant="with-link">
+                  <TaskList.Item.NameAndHint as="a" href="#">
+                    Alcohol use
+                  </TaskList.Item.NameAndHint>
+                  <TaskList.Item.Status variant="incomplete">
+                    Incomplete
+                  </TaskList.Item.Status>
+                </TaskList.Item>
+                <TaskList.Item variant="with-link">
+                  <TaskList.Item.NameAndHint as="a" href="#">
+                    Body measurements
+                  </TaskList.Item.NameAndHint>
+                  <TaskList.Item.Status variant="incomplete">
+                    Incomplete
+                  </TaskList.Item.Status>
+                </TaskList.Item>
+              </TaskList>
+
+              <Button>Send</Button>
+            </Column>
+          </Row>
+        </Main>
+      </Container>
+
+      <Footer>
+        <Footer.Content>
+          <Footer.List />
+          <Footer.Copyright>NHS England</Footer.Copyright>
+        </Footer.Content>
+      </Footer>
+    </>
+  ),
+};
diff --git a/packages/nhsuk-frontend-react/src/__stories__/patterns/ConfirmationPage.stories.tsx b/packages/nhsuk-frontend-react/src/__stories__/patterns/ConfirmationPage.stories.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Panel } from '@/components/content-presentation/panel/Panel';
+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 { Link } from '@/components/styles/typography/link/Link';
+import { Footer } from '@/components/navigation/footer/Footer';
+import { SummaryList } from '@/components/content-presentation/summary-list/SummaryList';
+import { Paragraph } from '@/components/styles/typography/paragraph/Paragraph';
+
+/**
+ * Use a confirmation page to show users they have completed a task.
+ *
+ * https://service-manual.nhs.uk/design-system/patterns/confirmation-page
+ */
+const meta: Meta = {
+  title: 'Patterns/Page types/Confirmation page',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ConfirmationPage: 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="two-thirds">
+              <Panel>
+                <Panel.Title>Booking complete</Panel.Title>
+                <Panel.Body>
+                  Confirmation has been sent to you by email
+                </Panel.Body>
+              </Panel>
+
+              <Heading as="h2">Your appointment details</Heading>
+              <SummaryList variant="no-border">
+                <SummaryList.Row>
+                  <SummaryList.Key>Site location</SummaryList.Key>
+                  <SummaryList.Value>
+                    St Georges Pharmacy
+                    <br />
+                    46 St George's Rd,
+                    <br />
+                    Elephant and Castle,
+                    <br />
+                    London
+                    <br />
+                    SE1 6ET
+                    <br />
+                    <Link href="#">
+                      Map and directions (opens in a new tab)
+                    </Link>
+                  </SummaryList.Value>
+                </SummaryList.Row>
+                <SummaryList.Row>
+                  <SummaryList.Key>Date and time</SummaryList.Key>
+                  <SummaryList.Value>
+                    Thursday 15 June at 9:10am
+                  </SummaryList.Value>
+                </SummaryList.Row>
+              </SummaryList>
+
+              <Paragraph>
+                <Link href="#">
+                  Tell us about your experience using this service (opens in a
+                  new tab)
+                </Link>
+              </Paragraph>
+            </Column>
+          </Row>
+        </Main>
+      </Container>
+
+      <Footer>
+        <Footer.Content>
+          <Footer.List />
+          <Footer.Copyright>NHS England</Footer.Copyright>
+        </Footer.Content>
+      </Footer>
+    </>
+  ),
+};
diff --git a/...-frontend-react/src/__stories__/patterns/HelpUsersDecideWhenAndWhereToGetCare.stories.tsx b/...-frontend-react/src/__stories__/patterns/HelpUsersDecideWhenAndWhereToGetCare.stories.tsx
@@ -11,7 +11,8 @@ import {
  * https://service-manual.nhs.uk/design-system/patterns/help-users-decide-when-and-where-to-get-care
  */
 const meta: Meta = {
-  title: 'Patterns/Tasks/Help users decide when and where to get care',
+  title:
+    'Patterns/Help users to/Decide when and where to get care (care cards)',
 };
 
 export default meta;

diff --git a/...hsuk-frontend-react/src/__stories__/patterns/ReassureUsersThatAPageIsUpToDate.stories.tsx b/...hsuk-frontend-react/src/__stories__/patterns/ReassureUsersThatAPageIsUpToDate.stories.tsx
@@ -8,7 +8,7 @@ import { Paragraph } from '@/components/styles/typography/paragraph/Paragraph';
  * https://service-manual.nhs.uk/design-system/patterns/reassure-users-that-a-page-is-up-to-date
  */
 const meta: Meta = {
-  title: 'Patterns/Tasks/Reassure users that a page is up to date',
+  title: 'Patterns/Help users to/Know that a page is up to date',
 };
 
 export default meta;

diff --git a/packages/nhsuk-frontend-react/src/components/content-presentation/panel/Panel.stories.tsx b/packages/nhsuk-frontend-react/src/components/content-presentation/panel/Panel.stories.tsx
@@ -20,9 +20,7 @@ export const Default: Story = {
   render: (args) => (
     <Panel {...args}>
       <Panel.Title>Application complete</Panel.Title>
-      <Panel.Body>
-        Confirmation has been sent to you by email
-      </Panel.Body>
+      <Panel.Body>Confirmation has been sent to you by email</Panel.Body>
     </Panel>
   ),
 };