docs: add more patterns

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

@@ -7,8 +7,13 @@ import { Main } from '@/components/styles/layout/main/Main';
 import { Column, Row } from '@/components/styles/layout/grid/Grid';
 import { Button } from '@/components/form-elements/button/Button';
 
+/**
+ * Use this pattern to ask people for their NHS number and help them find it.
+ *
+ * https://service-manual.nhs.uk/design-system/patterns/ask-users-for-their-nhs-number
+ */
 const meta: Meta = {
-  title: 'Patterns/Ask users for their NHS number',
+  title: 'Patterns/Tasks/Ask users for their NHS number',
   parameters: {
     layout: 'fullscreen',
   },

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+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.
+ *
+ * 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',
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const NonUrgent: Story = NonUrgentCareCard;
+
+export const Urgent: Story = UrgentCareCard;
+
+export const Emergency: Story = EmergencyCareCard;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Paragraph } from '@/components/styles/typography/paragraph/Paragraph';
+
+/**
+ * Use review dates to let users know when a page was last checked and will be checked again.
+ *
+ * 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',
+};
+
+export default meta;
+
+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 />
+      Next review due: 15 March 2024
+    </Paragraph>
+  ),
+};