From 7334b0c6617d707f0e6d22f9e34ccf6a8e339609 Mon Sep 17 00:00:00 2001 From: Andy Mantell <134642+andymantell@users.noreply.github.com> Date: Thu, 14 Jul 2022 11:21:51 +0100 Subject: [PATCH 1/9] Update to govuk-frontend@4.1.0 --- README.md | 5 +++-- package-lock.json | 6 +++--- package.json | 2 +- scripts/package.json | 2 +- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index f7333a8..e9b2c90 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # GOV.UK React components (govuk-react-jsx) -[![govuk-frontend 4.0.1](https://img.shields.io/badge/govuk--frontend%20version-4.0.1-005EA5?logo=gov.uk&style=flat-square)](https://github.com/alphagov/govuk-frontend/releases/tag/v4.0.1) +[![govuk-frontend 4.1.0](https://img.shields.io/badge/govuk--frontend%20version-4.1.0-005EA5?logo=gov.uk&style=flat-square)](https://github.com/alphagov/govuk-frontend/releases/tag/v4.1.0) [![version](https://img.shields.io/npm/v/govuk-react-jsx.svg?style=flat-square)](https://www.npmjs.com/package/govuk-react-jsx) ![(Pipeline)](https://github.com/surevine/govuk-react-jsx/workflows/Pipeline/badge.svg) [![MIT License](https://img.shields.io/npm/l/govuk-react-jsx.svg?style=flat-square)](https://github.com/surevine/govuk-react-jsx/blob/main/LICENSE) @@ -12,8 +12,9 @@ View demo at https://govuk-react-jsx.netlify.app/ View example app at https://surevine.github.io/govuk-react-jsx-examples/ (for which the source code is at https://github.com/surevine/govuk-react-jsx-examples) ## WARNING + > **If you do not need the characteristics of a Single Page App framework like React, please consider using something else**. [Government services should be progressively enhanced](https://www.gov.uk/service-manual/technology/using-progressive-enhancement), and [should function without JavaScript enabled](https://kryogenix.org/code/browser/everyonehasjs.html). -> +> > If you have an explicit requirement that cannot be delivered effectively in a progressively enhanced manner then you might have a case for using React. If you have plans to build your React app in a progressively enhanced way, you might be fine. Whatever you do, be prepared to defend it at a service assessment. ## Quick install diff --git a/package-lock.json b/package-lock.json index 5f071a0..ec78169 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10710,9 +10710,9 @@ } }, "govuk-frontend": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-4.0.1.tgz", - "integrity": "sha512-X+B88mqYHoxAz0ID87Uxo3oHqdKBRnNHd3Cz8+u8nvQUAsrEzROFLK+t7sAu7e+fKqCCrJyIgx6Cmr6dIGnohQ==" + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-4.1.0.tgz", + "integrity": "sha512-xBUUarxinGWSccmXPmwa7ovg3xabEQ0+Dcv7pdq9X3F69892OFMqP2g8jvlDUrVsDVdasXLk4Jq4w8dPiaEVqQ==" }, "graceful-fs": { "version": "4.2.9", diff --git a/package.json b/package.json index 295fcf4..f74e2ec 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ }, "homepage": "https://github.com/surevine/govuk-react-jsx#readme", "dependencies": { - "govuk-frontend": "4.0.1", + "govuk-frontend": "4.1.0", "react": "^18.1.0", "react-dom": "^18.1.0", "react-helmet": "^6.1.0", diff --git a/scripts/package.json b/scripts/package.json index 6e5a8e0..dcbc6f6 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -22,7 +22,7 @@ }, "homepage": "https://github.com/surevine/govuk-react-jsx#readme", "peerDependencies": { - "govuk-frontend": "4.0.1", + "govuk-frontend": "4.1.0", "react-router-dom": ">=5", "react-router": ">=5", "react": ">=16", From f24775e6515ef0444f07252be5321fe35c104865 Mon Sep 17 00:00:00 2001 From: Andy Mantell <134642+andymantell@users.noreply.github.com> Date: Thu, 14 Jul 2022 11:22:35 +0100 Subject: [PATCH 2/9] Changelog entry --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 98f6012..8a4e125 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,9 @@ #### Features +- Update to govuk-frontend@4.2.0 (https://github.com/surevine/govuk-react-jsx/pull/149) + - See https://github.com/alphagov/govuk-frontend/releases/tag/v4.2.0 for full release notes + #### Breaking changes --- From 92283de0f19d8a37a30ed2c9e3e55fb7c14abdc1 Mon Sep 17 00:00:00 2001 From: Andy Mantell <134642+andymantell@users.noreply.github.com> Date: Thu, 14 Jul 2022 11:24:09 +0100 Subject: [PATCH 3/9] Remove aria-live from the character count component --- src/govuk/components/character-count/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/govuk/components/character-count/index.js b/src/govuk/components/character-count/index.js index 7c50c9d..cc66b80 100644 --- a/src/govuk/components/character-count/index.js +++ b/src/govuk/components/character-count/index.js @@ -57,7 +57,6 @@ const CharacterCount = React.forwardRef((props, ref) => { className={`govuk-hint govuk-character-count__message ${ countMessage?.className || '' }`} - aria-live="polite" > You can enter up to {maxlength || maxwords}{' '} {maxwords ? 'words' : 'characters'} From c3e07ca9fff7e9d1a8df288a42983c3c8b577b12 Mon Sep 17 00:00:00 2001 From: Andy Mantell <134642+andymantell@users.noreply.github.com> Date: Thu, 14 Jul 2022 11:26:43 +0100 Subject: [PATCH 4/9] Remove pattern attribute from date input component --- src/govuk/components/date-input/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/govuk/components/date-input/index.js b/src/govuk/components/date-input/index.js index be669e9..4917596 100644 --- a/src/govuk/components/date-input/index.js +++ b/src/govuk/components/date-input/index.js @@ -87,7 +87,7 @@ function DateInput(props) { name={namePrefix ? `${namePrefix}-${itemName}` : itemName} type="text" inputMode={itemInputMode || 'numeric'} - pattern={itemPattern || '[0-9]*'} + pattern={itemPattern} /> ); From b7bb880a172c68f2aaf11da3462307fda000201a Mon Sep 17 00:00:00 2001 From: Andy Mantell <134642+andymantell@users.noreply.github.com> Date: Thu, 14 Jul 2022 11:33:32 +0100 Subject: [PATCH 5/9] Ignore test for character count max length removal --- tests/govuk-frontend-diff.test.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/tests/govuk-frontend-diff.test.js b/tests/govuk-frontend-diff.test.js index 288aa12..a48172b 100644 --- a/tests/govuk-frontend-diff.test.js +++ b/tests/govuk-frontend-diff.test.js @@ -86,6 +86,10 @@ describe('govuk-react-jsx output matches govuk-frontend', () => { // Therefore these tests which enable the data-behaviour="exclusive" attribute are disabled return; + case 'character-count:with textarea maxlength attribute': + // This fixture contains the maxlength attribute in the html but our tests run with JS enabled, so the test fails + return; + default: } // END overrides From 56c12c1228188ff376517c5c3ee580c1a0b33e53 Mon Sep 17 00:00:00 2001 From: Andy Mantell <134642+andymantell@users.noreply.github.com> Date: Thu, 14 Jul 2022 11:35:09 +0100 Subject: [PATCH 6/9] Update to govuk-frontend@4.2.0 --- README.md | 2 +- package-lock.json | 6 +++--- package.json | 2 +- scripts/package.json | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index e9b2c90..f5e2f57 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # GOV.UK React components (govuk-react-jsx) -[![govuk-frontend 4.1.0](https://img.shields.io/badge/govuk--frontend%20version-4.1.0-005EA5?logo=gov.uk&style=flat-square)](https://github.com/alphagov/govuk-frontend/releases/tag/v4.1.0) +[![govuk-frontend 4.2.0](https://img.shields.io/badge/govuk--frontend%20version-4.2.0-005EA5?logo=gov.uk&style=flat-square)](https://github.com/alphagov/govuk-frontend/releases/tag/v4.2.0) [![version](https://img.shields.io/npm/v/govuk-react-jsx.svg?style=flat-square)](https://www.npmjs.com/package/govuk-react-jsx) ![(Pipeline)](https://github.com/surevine/govuk-react-jsx/workflows/Pipeline/badge.svg) [![MIT License](https://img.shields.io/npm/l/govuk-react-jsx.svg?style=flat-square)](https://github.com/surevine/govuk-react-jsx/blob/main/LICENSE) diff --git a/package-lock.json b/package-lock.json index ec78169..e78c8ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10710,9 +10710,9 @@ } }, "govuk-frontend": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-4.1.0.tgz", - "integrity": "sha512-xBUUarxinGWSccmXPmwa7ovg3xabEQ0+Dcv7pdq9X3F69892OFMqP2g8jvlDUrVsDVdasXLk4Jq4w8dPiaEVqQ==" + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/govuk-frontend/-/govuk-frontend-4.2.0.tgz", + "integrity": "sha512-IHbnz5DbnPjuCv4lQvtJGoCNAKAN6byKqmaej8hjd6Y/KTaAuw10npijeqfRJNO4WdDX9a34+n+SC/UmWdjfGQ==" }, "graceful-fs": { "version": "4.2.9", diff --git a/package.json b/package.json index f74e2ec..8535251 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ }, "homepage": "https://github.com/surevine/govuk-react-jsx#readme", "dependencies": { - "govuk-frontend": "4.1.0", + "govuk-frontend": "4.2.0", "react": "^18.1.0", "react-dom": "^18.1.0", "react-helmet": "^6.1.0", diff --git a/scripts/package.json b/scripts/package.json index dcbc6f6..ce39cda 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -22,7 +22,7 @@ }, "homepage": "https://github.com/surevine/govuk-react-jsx#readme", "peerDependencies": { - "govuk-frontend": "4.1.0", + "govuk-frontend": "4.2.0", "react-router-dom": ">=5", "react-router": ">=5", "react": ">=16", From 92d425878de8bd0f008f3f2d1fdc167841f5163f Mon Sep 17 00:00:00 2001 From: Andy Mantell <134642+andymantell@users.noreply.github.com> Date: Thu, 14 Jul 2022 12:05:51 +0100 Subject: [PATCH 7/9] Allow checkboxes to receive a values prop --- src/utils/Boolean.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/utils/Boolean.js b/src/utils/Boolean.js index e89bce3..6c47c14 100644 --- a/src/utils/Boolean.js +++ b/src/utils/Boolean.js @@ -15,6 +15,7 @@ function Boolean(props) { name, onChange, onBlur, + values, 'aria-describedby': describedByProp, ...attributes } = props; @@ -113,6 +114,7 @@ function Boolean(props) { behaviour, label, reactListKey, + checked, ...itemAttributes } = item; @@ -125,6 +127,8 @@ function Boolean(props) { : null; const itemHintId = `${idValue}-item-hint`; + const isChecked = checked | (values && values.includes(item.value)); + let itemDescribedBy = ''; if (controlType === 'checkboxes' && !hasFieldset) { @@ -159,6 +163,7 @@ function Boolean(props) { onChange={onChange} onBlur={onBlur} data-behaviour={behaviour} + checked={isChecked} {...itemAttributes} />