Update to [email protected]

CHANGELOG.md

@@ -6,6 +6,9 @@
 
 #### Features
 
+- Update to [email protected] (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
 
 ---

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

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",

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",

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'}

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}
           />
         </div>
       );

src/govuk/components/header/index.js

@@ -53,13 +53,17 @@ function Header(props) {
     navigationComponent = (
       <div className="govuk-header__content">
         {serviceName ? (
-          <Link
-            href={serviceUrlHref}
-            to={serviceUrlTo}
-            className="govuk-header__link govuk-header__link--service-name"
-          >
-            {serviceName}
-          </Link>
+          serviceUrlTo || serviceUrlHref ? (
+            <Link
+              href={serviceUrlHref}
+              to={serviceUrlTo}
+              className="govuk-header__link govuk-header__service-name"
+            >
+              {serviceName}
+            </Link>
+          ) : (
+            <span className="govuk-header__service-name">{serviceName}</span>
+          )
         ) : null}
 
         {navigation ? (

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}
                   />
                   <Label

tests/govuk-frontend-diff.test.js

@@ -70,6 +70,12 @@ describe('govuk-react-jsx output matches govuk-frontend', () => {
           // Value is set, but nothing is selected - is a little bit broken - need to PR and fix but ignoring for now
           return;
 
+        case 'select:item selected overrides value':
+        case 'select:with selected value':
+        case 'radios:item checked overrides value':
+          // Ignoring - don't need react based forms to replicate this behaviour
+          return;
+
         case 'cookie-banner:link with false button options':
           // Ignore this test entirely. In the nunjucks implementation and attributes key is used to house all attributes.
           // The govuk-frontend test is here to assert that button-like value and name params do not accidentally
@@ -86,6 +92,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