From 6bdb7a3fc40b923cc4e078076a99fd0ee6667506 Mon Sep 17 00:00:00 2001 From: Ed Horsford Date: Tue, 11 Jun 2024 13:33:38 +0100 Subject: [PATCH 1/5] Add a changelog (#237) --- CHANGELOG.md | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..fdb0559 --- /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 From 657d3cad00e1f6241d9417caafd7fac3e777995f Mon Sep 17 00:00:00 2001 From: Ed Horsford Date: Tue, 11 Jun 2024 13:34:34 +0100 Subject: [PATCH 2/5] Use sentence case for sidebar (#236) --- .storybook/manager.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/.storybook/manager.ts b/.storybook/manager.ts index 97deaff..44bea63 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 }); From 0c2c115f57f1a0ca185ae315f19def5f41e95273 Mon Sep 17 00:00:00 2001 From: Ed Horsford Date: Tue, 11 Jun 2024 13:36:40 +0100 Subject: [PATCH 3/5] Update BackLink docs (#234) --- stories/Navigation/BackLink.stories.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/stories/Navigation/BackLink.stories.tsx b/stories/Navigation/BackLink.stories.tsx index c51a002..d49e46d 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 +}; From 4cdd2f5874035928a1e5bf6f1ca32b91e0912f00 Mon Sep 17 00:00:00 2001 From: Ed Horsford Date: Tue, 11 Jun 2024 13:37:19 +0100 Subject: [PATCH 4/5] Add visually hidden text to summary list examples (#233) * Add visually hidden text to summary list examples * Add implimentation notes * Fix className --- .../SummaryList.stories.tsx | 46 +++++++++++++++++-- 1 file changed, 42 insertions(+), 4 deletions(-) diff --git a/stories/Content Presentation/SummaryList.stories.tsx b/stories/Content Presentation/SummaryList.stories.tsx index 6758b19..c519dc5 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 }) => ( From 8c569664437b3671aa3b6aa30144e562d57952ae Mon Sep 17 00:00:00 2001 From: Ed Horsford Date: Tue, 11 Jun 2024 13:37:58 +0100 Subject: [PATCH 5/5] Add an example of a select with a hint (#232) --- stories/Form Elements/Select.stories.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/stories/Form Elements/Select.stories.tsx b/stories/Form Elements/Select.stories.tsx index c2dff84..25bbb40 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)', +};