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 --- diff --git a/README.md b/README.md index f7333a8..f5e2f57 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.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) @@ -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..e78c8ce 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.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 295fcf4..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.0.1", + "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 6e5a8e0..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.0.1", + "govuk-frontend": "4.2.0", "react-router-dom": ">=5", "react-router": ">=5", "react": ">=16", 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'} 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} /> ); diff --git a/src/govuk/components/header/index.js b/src/govuk/components/header/index.js index 97b55a5..1db5866 100644 --- a/src/govuk/components/header/index.js +++ b/src/govuk/components/header/index.js @@ -53,13 +53,17 @@ function Header(props) { navigationComponent = (
{serviceName ? ( - - {serviceName} - + serviceUrlTo || serviceUrlHref ? ( + + {serviceName} + + ) : ( + {serviceName} + ) ) : null} {navigation ? ( 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} />