diff --git a/.storybook/manager.ts b/.storybook/manager.ts
index 97deaffc..44bea631 100644
--- a/.storybook/manager.ts
+++ b/.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
});
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 00000000..fdb05594
--- /dev/null
+++ b/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
diff --git a/stories/Content Presentation/SummaryList.stories.tsx b/stories/Content Presentation/SummaryList.stories.tsx
index 6758b19a..c519dc50 100644
--- a/stories/Content Presentation/SummaryList.stories.tsx
+++ b/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
+ *
+ * Change
+ *
+ * {' '}name
+ *
+ *
+ * ```
+ */
+
+
const meta: Meta = {
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 = {
Name
Sarah Philips
- Change
+
+ Change name
+
Date of birth
5 January 1978
- Change
+
+ Change date of birth
+
@@ -49,7 +74,9 @@ export const Standard: Story = {
SE23 6FH
- Change
+
+ Change contact information
+
@@ -59,13 +86,24 @@ export const Standard: Story = {
sarah.phillips@example.com
- Change
+
+ Change contact details
+
),
+ 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 }) => (
diff --git a/stories/Form Elements/Select.stories.tsx b/stories/Form Elements/Select.stories.tsx
index c2dff84e..25bbb403 100644
--- a/stories/Form Elements/Select.stories.tsx
+++ b/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('Error message goes here');
+ return (
+ <>
+
+ setError(e.currentTarget.value)} value={error} />
+
+ );
+ },
+
+ name: 'Select With Error and Hint (String)',
+};
diff --git a/stories/Navigation/BackLink.stories.tsx b/stories/Navigation/BackLink.stories.tsx
index c51a002f..d49e46d6 100644
--- a/stories/Navigation/BackLink.stories.tsx
+++ b/stories/Navigation/BackLink.stories.tsx
@@ -4,15 +4,16 @@ import { Meta, StoryObj } from '@storybook/react';
const meta: Meta = {
title: 'Navigation/BackLink',
component: BackLink,
- args: { children: 'Link', href: '/', asElement: 'a' },
+ args: { children: 'Go back', href: '/', asElement: 'a' },
};
export default meta;
type Story = StoryObj;
export const StandardLink: Story = {};
-export const OpenInNewTabLink: Story = {
+
+export const BackLinkAsAButton: Story = {
args: {
- target: '_blank',
- rel: 'noopener noreferrer',
+ asElement: 'button',
+ href: false
},
-};
\ No newline at end of file
+};