Merge pull request #3525 from alphagov/dependabot/npm_and_yarn/govuk-…

…frontend-5.1.0

Bump govuk-frontend from 5.0.0 to 5.1.0

lib/get-macro-options/index.js

@@ -237,7 +237,7 @@ function getMacroOptions(componentName) {
           name:
             option.type === 'array' && option.params
               ? `Options for ${names.join(' ')} ${option.type} objects`
-              : `Options for ${names.join(' ')} ${option.type}`,
+              : `Options for ${names.join(' ')} ${option.isComponent ? 'component' : option.type}`,
 
           options: option.params
         }

lib/metalsmith.js

@@ -134,14 +134,16 @@ module.exports = metalsmith
     }
 
     await Promise.all([
-      copyAssets('{fonts,images}/*', {
+      // GOV.UK Frontend `/assets/images` use new crown
+      copyAssets('{fonts/*,images/*,manifest.json}', {
         cwd: join(dirname(require.resolve('govuk-frontend')), 'assets'),
         dest: 'assets'
       }),
 
-      copyAssets('manifest.json', {
+      // GOV.UK Frontend `/assets/v5.0.0/images` use old crown via `src/assets`
+      copyAssets('{fonts/*,manifest.json}', {
         cwd: join(dirname(require.resolve('govuk-frontend')), 'assets'),
-        dest: 'assets'
+        dest: 'assets/v5.0.0'
       }),
 
       copyAssets('govuk-frontend.min.css?(.map)', {

package.json

@@ -35,7 +35,7 @@
   "dependencies": {
     "accessible-autocomplete": "^2.0.4",
     "clipboard": "^2.0.11",
-    "govuk-frontend": "^5.0.0",
+    "govuk-frontend": "^5.1.0",
     "iframe-resizer": "^4.3.9",
     "lunr": "^2.3.9"
   },

src/stylesheets/main.scss

@@ -245,7 +245,7 @@ p code {
   padding: 1px 3px;
   color: $app-code-color;
   background-color: govuk-colour("light-grey");
-  @include govuk-typography-responsive($size: 16);
+  @include govuk-font-size($size: 16);
   @include govuk-media-query($from: tablet) {
     padding: 2px 4px;
   }
@@ -269,7 +269,7 @@ pre code {
   border: $govuk-focus-width solid transparent;
   outline: 1px solid $govuk-border-colour;
   background-color: $app-light-grey;
-  @include govuk-typography-responsive($size: 19);
+  @include govuk-font-size($size: 19);
   @include govuk-responsive-margin(4, "bottom");
 
   &:focus {

views/layouts/_generic.njk

@@ -1,6 +1,7 @@
 {% extends "govuk/template.njk" %}
 
-{% set assetUrl = 'https://design-system.service.gov.uk/assets' %}
+{% set assetPath = "/assets/v5.0.0" %}
+{% set assetUrl = "https://design-system.service.gov.uk/assets/v5.0.0" %}
 
 {% block pageTitle %}{{ title | smartypants }} – GOV.UK Design System{% endblock %}
 

views/partials/_example.njk

@@ -114,8 +114,8 @@
                       <strong>Required.</strong>
                     {% endif %}
                       {{ option.description | safe }}
-                    {% if (option.params) or ["hint", "label"].includes(option.slug) %}
-                      {% if option.isComponent and not ["hint", "label"].includes(option.slug) %}
+                    {% if (option.params) or (option.isComponent and ["hint", "label"].includes(option.id)) %}
+                      {% if option.isComponent and not ["hint", "label"].includes(option.id) %}
                         {# Link to subset of Nunjucks macro options table and Design System component page -#}
                         See supported <a href="#options-{{ exampleId }}--{{ option.slug }}">{{ option.name | safe }}</a> options for <a href="/components/{{ option.slug }}/#options-{{ option.slug }}-example">{{ optionName | safe }}</a>.
                       {% else %}