Merge pull request #118 from surevine/feature/govuk-frontend-3-13-0

Update to govuk-frontend@3.13.0

CHANGELOG.md

@@ -12,6 +12,13 @@
 
 ## Releases
 
+### v6.1.0
+
+- Update to govuk-frontend@3.13.0 (https://github.com/surevine/govuk-react-jsx/pull/118)
+ - Add a 'none' option and 'or' divider to checkboxes (See [known issues in readme](https://github.com/surevine/govuk-react-jsx#known-issues) - this is somewhat of a non functional "stub" at the moment)
+ - Change approach to fallback PNG in the header to fix blank data URI from triggering CSP error
+ - See https://github.com/alphagov/govuk-frontend/releases/tag/v3.13.0 for full release notes
+
 ### v6.0.0
 
 #### Fixes

README.md

@@ -1,6 +1,6 @@
 # GOV.UK React components (govuk-react-jsx)
 
-[![govuk-frontend 3.12.0](https://img.shields.io/badge/govuk--frontend%20version-3.12.0-005EA5?logo=gov.uk&style=flat-square)](https://github.com/alphagov/govuk-frontend/releases/tag/v3.12.0)
+[![govuk-frontend 3.13.0](https://img.shields.io/badge/govuk--frontend%20version-3.13.0-005EA5?logo=gov.uk&style=flat-square)](https://github.com/alphagov/govuk-frontend/releases/tag/v3.13.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)
@@ -53,6 +53,10 @@ These components assume you:
 - Are using react-router
 - **Have read the exceptions below**
 
+## Known issues
+
+- The "None of these" JavaScript initialised as part of govuk-frontend does not currently function with these components. Because external JS cannot influence the checked state of controlled components in React, the govuk-frontend approach does not work here. If you need this functionality in your service it would be best to implement it within the form framework you are using (E.g. Formik and the like).
+
 ## Exceptions
 
 Exceptions to the conformance with govuk-frontend nunjucks params are as follows:

package.json

@@ -49,7 +49,7 @@
  },
  "homepage": "https://github.com/surevine/govuk-react-jsx#readme",
  "dependencies": {
- "govuk-frontend": "3.12.0",
+ "govuk-frontend": "3.13.0",
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  "react-helmet": "^6.1.0",

scripts/package.json

@@ -22,7 +22,7 @@
  },
  "homepage": "https://github.com/surevine/govuk-react-jsx#readme",
  "peerDependencies": {
- "govuk-frontend": "3.12.0",
+ "govuk-frontend": "3.13.0",
  "react-router-dom": "5",
  "react-router": "5",
  "react": ">=16 <=17",

src/govuk/components/header/index.js

@@ -136,32 +136,35 @@ function Header(props) {
  href={homepageUrlHref}
  className="govuk-header__link govuk-header__link--homepage"
  >
- <span className="govuk-header__logotype">
- <svg
- aria-hidden="true"
- focusable="false"
- className="govuk-header__logotype-crown"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 132 97"
- height="30"
- width="36"
- >
- <path
- fill="currentColor"
- fillRule="evenodd"
- d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
- />
- <image
- src={logo}
- className="govuk-header__logotype-crown-fallback-image"
- xlinkHref="data:,"
- display="none"
- height="32"
- width="36"
- />
- </svg>{' '}
- <span className="govuk-header__logotype-text">GOV.UK</span>
- </span>
+ <span
+ className="govuk-header__logotype"
+ // dangerouslySetInnerHTML required in order to set the conditional comments appropriately
+ dangerouslySetInnerHTML={{
+ __html: `
+ <!--[if gt IE 8]><!-->
+ <svg
+ aria-hidden="true"
+ focusable="false"
+ className="govuk-header__logotype-crown"
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 132 97"
+ height="30"
+ width="36"
+ >
+ <path
+ fill="currentColor"
+ fillRule="evenodd"
+ d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
+ />
+ </svg>
+ <!--<![endif]-->
+ <!--[if IE 8]>
+ <img src="${logo}" class="govuk-header__logotype-crown-fallback-image" width="36" height="32" />
+ <![endif]-->
+ <span className="govuk-header__logotype-text">GOV.UK</span>
+ `,
+ }}
+ />
  {productNameComponent}
  </Link>
  </div>

src/utils/Boolean.js

@@ -71,7 +71,8 @@ function Boolean(props) {
 
  // Find out if we have any conditional items
  const isConditional =
- items && items.find((item) => item?.conditional?.children);
+ controlType === 'checkboxes' || // Short circuit this for checkboxes - isConditional has been removed for this component and the JS is always initialised via the data-module attribute
+ (items && items.find((item) => item?.conditional?.children));
  const hasFieldset = !!fieldset;
 
  if (errorMessage) {
@@ -101,11 +102,19 @@ function Boolean(props) {
  return null;
  }
 
+ if (item.behaviour === 'exclusive') {
+ // Forcibly disable the "exclusive" behaviour introduced in https://github.com/alphagov/govuk-frontend/pull/2151 since it cannot work in React
+ // The upstream JS cannot manipulate the checked state of controls without it causing problems
+ // At the moment, if a service needs this behaviour they should implement it themselves in the application code
+ delete item.behaviour;
+ }
+
  const {
  id,
  children,
  hint: itemHint,
  conditional: itemConditional,
+ behaviour,
  label,
  reactListKey,
  ...itemAttributes
@@ -153,6 +162,7 @@ function Boolean(props) {
  aria-describedby={itemDescribedBy || null}
  onChange={onChange}
  onBlur={onBlur}
+ data-behaviour={behaviour}
  {...itemAttributes}
  />
  <Label

tests/govuk-frontend-diff.test.js

@@ -78,6 +78,14 @@ describe('govuk-react-jsx output matches govuk-frontend', () => {
  // will end up as an attribute on the underlying element. In govuk-react-jsx this is by design and it would
  // simply be up to the developer using the component to only pass the appropriate props.
  return;
+
+ case 'checkboxes:with divider and None':
+ case 'checkboxes:with divider, None and conditional items':
+ // The "None of these" JavaScript initialised as part of govuk-frontend does not currently function with these components.
+ // Because external JS cannot influence the checked state of controlled components in React, the govuk-frontend approach does not work here.
+ // Therefore these tests which enable the data-behaviour="exclusive" attribute are disabled
+ return;
+
  default:
  }
  // END overrides