Merge pull request #117 from surevine/govuk-frontend-3-12-0

Govuk frontend 3.12.0

.storybook/styles.scss

@@ -1,3 +1,4 @@
-$govuk-assets-path: "../node_modules/govuk-frontend/govuk/assets/";
-$govuk-font-family: "Helvetica", "Arial", sans-serif;
-@import "node_modules/govuk-frontend/govuk/all";
+$govuk-assets-path: '../node_modules/govuk-frontend/govuk/assets/';
+$govuk-font-family: 'Helvetica', 'Arial', sans-serif;
+$govuk-new-link-styles: true;
+@import 'node_modules/govuk-frontend/govuk/all';

CHANGELOG.md

@@ -4,9 +4,6 @@
 
 #### Fixes
 
-- Fix Template not passing text correctly to SkipLink component (https://github.com/surevine/govuk-react-jsx/pull/116)
-  - Fixes https://github.com/surevine/govuk-react-jsx/issues/115
-
 #### Features
 
 #### Breaking changes
@@ -21,14 +18,24 @@
 
 - Fix badly destructured react list keys on some components (https://github.com/surevine/govuk-react-jsx/pull/114)
   - Fixes https://github.com/surevine/govuk-react-jsx/issues/113
+- Fix Template not passing text correctly to SkipLink component (https://github.com/surevine/govuk-react-jsx/pull/116)
+  - Fixes https://github.com/surevine/govuk-react-jsx/issues/115
 
 #### Breaking changes
 
-- Table data structure changed in order to accomodate react list keys. Each row in the `rows` array now has a `cells` key instead of simply being a nested array of rows / cells.
+- Table data structure changed in order to accomodate react list keys. Each row in the `rows` array now has a `cells` key instead of simply being a nested array of rows / cells.  
+  See the updated demos on the storybook.  
+  This breaking change was necessary in order to accomodate react list keys on table rows.
 
-  See the updated demos on the storybook.
+#### Features
 
-  This breaking change was necessary in order to accomodate react list keys on table rows.
+- Updated to govuk-frontend@3.12.0  
+  Markup changes:
+
+  - Add links styled as buttons to cookie banners
+  - Add data-nosnippet to prevent cookie banner text appearing in Google Search snippets
+
+- See https://github.com/alphagov/govuk-frontend/releases/tag/v3.12.0 for full release notes
 
 ### v5.1.0
 

README.md

@@ -1,6 +1,6 @@
 # GOV.UK React components (govuk-react-jsx)
 
-[![govuk-frontend 3.11.0](https://img.shields.io/badge/govuk--frontend%20version-3.11.0-005EA5?logo=gov.uk&style=flat-square)](https://github.com/alphagov/govuk-frontend/releases/tag/v3.11.0)
+[![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)
 [![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)

package.json

@@ -49,7 +49,7 @@
   },
   "homepage": "https://github.com/surevine/govuk-react-jsx#readme",
   "dependencies": {
-    "govuk-frontend": "3.11.0",
+    "govuk-frontend": "3.12.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.11.0",
+    "govuk-frontend": "3.12.0",
     "react-router-dom": "5",
     "react-router": "5",
     "react": ">=16 <=17",

src/govuk/components/cookie-banner/index.js

@@ -9,6 +9,7 @@ function CookieBanner(props) {
     <div
       className={`govuk-cookie-banner ${className || ''}`}
       role="region"
+      data-nosnippet
       {...attributes}
     >
       {messages.map((message) => {
@@ -56,10 +57,14 @@ function CookieBanner(props) {
                   } = action;
 
                   return action.href || action.to ? (
-                    <Link
-                      {...actionAttributes}
-                      className={`govuk-link ${actionClassName || ''}`}
-                    />
+                    action.type === 'button' ? (
+                      <Button {...action} />
+                    ) : (
+                      <Link
+                        {...actionAttributes}
+                        className={`govuk-link ${actionClassName || ''}`}
+                      />
+                    )
                   ) : (
                     <Button {...action} />
                   );

tests/govuk-frontend-diff.test.js

@@ -28,7 +28,12 @@ function hyphenatedToCamel(string) {
 }
 
 const htmlDiffer = new HtmlDiffer({
-  ignoreAttributes: ['style', 'src', 'disabled'],
+  ignoreAttributes: [
+    'style',
+    'src',
+    'disabled', // Ignored because react adds ="true" to the end, making the comparison fail
+    'data-nosnippet', // Ignored because react adds ="true" to the end, making the comparison fail
+  ],
   ignoreSelfClosingSlash: true,
 });
 
@@ -65,7 +70,7 @@ 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 'cookie-banner:link with button options':
+        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
           // end up on the element as attributes due to some imagined future mistake in the nunjucks code.