Merge branch 'main' into update-button-docs

.storybook/manager.ts

@@ -1,6 +1,16 @@
 import { addons } from '@storybook/manager-api';
 import nhsTheme from './theme';
+import { startCase, upperFirst } from "lodash";
+
+const sentenceCase = string => {
+  if (typeof string !== 'string') return ''
+  return upperFirst(startCase(string).toLowerCase())
+}
 
 addons.setConfig({
-  theme: nhsTheme,
+  sidebar: {
+    renderLabel: ({ name, type }) =>
+      sentenceCase(name),
+  },
+  theme: nhsTheme
 });

CHANGELOG.md

@@ -0,0 +1,42 @@
+# NHS.UK React components
+
+## Unreleased
+
+:wrench: **Fixes**
+
+* Add js shims for buttons. PR #231, Fixes #218
+* Fix errors not being linked to inputs. PR #230, Fixes #227
+* Fix inputs incorrectly using `aria-labelledby`. PR #230, Fixes #212
+* Update Storybook docs for several components.
+
+:new: **New features**
+
+* Added a CHANGELOG to keep track of changes between releases. [Keep a changelog](https://keepachangelog.com)
+* Added support for `preventDoubleClick` debouncing on buttons. PR #231
+* Error summaries now automatically set role, tabindex, and aria-labelledby. PR #229, Fixes #228
+* Storybook link in readme now points to latest version. PR #226
+
+## 4.0.2 - 21 May 2024
+
+:wrench: **Fixes**
+
+*-* Fix error message role by @edwardhorsford in #219
+
+## 4.0.1 - 20 May 2024
+
+:wrench: **Fixes**
+
+* Fix issue with the footer copyright not being rendered in the correct location if there are multiple link columns by @jakeb-nhs in #223
+
+## 4.0.0 - 15 May 2024
+
+This version updates nhsuk-frontend to version 8.
+
+For a full list of changes in this release please refer to the [migration doc](https://github.com/NHSDigital/nhsuk-react-components/blob/feature/nhsuk-frontend-v8/docs/upgrade-to-4.0.md).
+
+* Migrate enzyme to react-testing-library by @JoshuaBates-NHS in #198
+* Allow support for module directives in build process by @JoshuaBates-NHS in #199
+* Update modified components since NHS UK frontend v5 by @jakeb-nhs in #197
+* Add new components since NHS UK frontend v5 by @jakeb-nhs in #202
+* Migrate some patterns to components, rework removed components from frontend v8 by @jakeb-nhs in #203
+* Improve unit test coverage by @jakeb-nhs in #204

stories/Content Presentation/SummaryList.stories.tsx

@@ -3,6 +3,25 @@ import React from 'react';
 import { SummaryList, BodyText } from '../../src';
 import { Meta, StoryObj } from '@storybook/react';
 
+
+/**
+ * ## Implementation notes
+ *
+ * When providing action links, you must include visually hidden text. This means a screen reader user will hear a meaningful action, like "Change name" or "Change date of birth".'
+ * 
+ * Example of an action link:
+ * 
+ * ```jsx
+ *  <a href="#">
+ *   Change
+ *   <span className="nhsuk-u-visually-hidden">
+ *     {' '}name
+ *   </span>
+ * </a>
+ * ```
+ */
+
+
 const meta: Meta<typeof SummaryList> = {
   title: 'Content Presentation/SummaryList',
   component: SummaryList,
@@ -15,6 +34,8 @@ SummaryList.Key.displayName = 'SummaryList.Key';
 SummaryList.Value.displayName = 'SummaryList.Value';
 SummaryList.Actions.displayName = 'SummaryList.Actions';
 
+
+
 export const Standard: Story = {
   argTypes: {
     noBorder: {
@@ -29,14 +50,18 @@ export const Standard: Story = {
         <SummaryList.Key>Name</SummaryList.Key>
         <SummaryList.Value>Sarah Philips</SummaryList.Value>
         <SummaryList.Actions>
-          <a href="stories#">Change</a>
+          <a href="#">
+            Change<span className="nhsuk-u-visually-hidden"> name</span>
+          </a>
         </SummaryList.Actions>
       </SummaryList.Row>
       <SummaryList.Row>
         <SummaryList.Key>Date of birth</SummaryList.Key>
         <SummaryList.Value>5 January 1978</SummaryList.Value>
         <SummaryList.Actions>
-          <a href="stories#">Change</a>
+          <a href="#">
+            Change<span className="nhsuk-u-visually-hidden"> date of birth</span>
+          </a>
         </SummaryList.Actions>
       </SummaryList.Row>
       <SummaryList.Row>
@@ -49,7 +74,9 @@ export const Standard: Story = {
           SE23 6FH
         </SummaryList.Value>
         <SummaryList.Actions>
-          <a href="stories#">Change</a>
+          <a href="#">
+            Change<span className="nhsuk-u-visually-hidden"> contact information</span>
+          </a>
         </SummaryList.Actions>
       </SummaryList.Row>
       <SummaryList.Row>
@@ -59,13 +86,24 @@ export const Standard: Story = {
           <BodyText>[email protected]</BodyText>
         </SummaryList.Value>
         <SummaryList.Actions>
-          <a href="stories#">Change</a>
+          <a href="#">
+            Change<span className="nhsuk-u-visually-hidden"> contact details</span>
+          </a>
         </SummaryList.Actions>
       </SummaryList.Row>
     </SummaryList>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Change links must include visually hidden text. This means a screen reader user will hear a meaningful action, like "Change name" or "Change date of birth".'
+      }
+    }
+  }
 };
 
+
+
 export const SummaryListWithoutActions: Story = {
   args: { noBorder: false },
   render: ({ noBorder }) => (

stories/Form Elements/Select.stories.tsx

@@ -77,3 +77,21 @@ export const SelectWithErrorString: Story = {
 
   name: 'Select With Error (String)',
 };
+
+export const SelectWithErrorAndHintString: Story = {
+  render: function SelectWithErrorAndHintStringRender() {
+    const [error, setError] = useState<string>('Error message goes here');
+    return (
+      <>
+        <Select error={error} label="Label text goes here" hint="Hint text goes here">
+          <Select.Option value="1">NHS.UK frontend option 1</Select.Option>
+          <Select.Option value="2">NHS.UK frontend option 2</Select.Option>
+          <Select.Option value="3">NHS.UK frontend option 3</Select.Option>
+        </Select>
+        <TextInput onChange={(e) => setError(e.currentTarget.value)} value={error} />
+      </>
+    );
+  },
+
+  name: 'Select With Error and Hint (String)',
+};

stories/Navigation/BackLink.stories.tsx

@@ -4,15 +4,16 @@ import { Meta, StoryObj } from '@storybook/react';
 const meta: Meta<typeof BackLink> = {
   title: 'Navigation/BackLink',
   component: BackLink,
-  args: { children: 'Link', href: '/', asElement: 'a' },
+  args: { children: 'Go back', href: '/', asElement: 'a' },
 };
 export default meta;
 type Story = StoryObj<typeof BackLink>;
 
 export const StandardLink: Story = {};
-export const OpenInNewTabLink: Story = {
+
+export const BackLinkAsAButton: Story = {
   args: {
-    target: '_blank',
-    rel: 'noopener noreferrer',
+    asElement: 'button',
+    href: false
   },
-};
+};