govuk_publishing_components 28.9.2 → 29.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c6a4c2646d8ee1669ae9211306d03382e424c905c6de355bb5f81b5251da6e10
-  data.tar.gz: 13453d8a1226005ff9535eb9dce3927f450ce1a6ec6acf6daf8170ad9ffeb2e0
+  metadata.gz: d2a6d452bad04acba831509df0a7ed9a45222ec20c745985beb49af0f9e7fd7a
+  data.tar.gz: 73e0d20cac3a9214e0c3c9dc052e419e52c41580578e87f1fdbf768b82d22e71
 SHA512:
-  metadata.gz: 8fcda8c161715befc29844b659249668e5d2ba375f3d398f994e1e3c2348a78635516704e655f95df96aa21a9438d1079cfdb9977944020a3cfe9e7c96611a05
-  data.tar.gz: 7d838cc5bd1295ba3faeab424a0a6d10a5af087601e90d859eaee2a0ecc0222ee41330672800739308d34f7bb662a341f470cb8f74915cc7eb6a328555360a0a
+  metadata.gz: 88203478b10e3b75f0c6b3aecf161c72102cf27978c9ee67ff129bc7b1e0c9798792165ec637855f2057458b2e5bae49fb6b6ac62e17cdd96466c755b06f9b33
+  data.tar.gz: 76d93abedcb28c9cea6983364fe0410067c895364c50d51b672e8a40df4d4fb42d8793502e8c9dd9719b205a94b0e668c45c3a5d992a21a95785eced6d389693

data/README.md

@@ -1,6 +1,6 @@
 # GOV.UK Publishing Components
 
-[![status](https://badgen.net/github/status/alphagov/govuk_publishing_components/master)](https://ci.integration.publishing.service.gov.uk/job/govuk_publishing_components/job/master/)
+[![status](https://badgen.net/github/status/alphagov/govuk_publishing_components/main)](https://github.com/alphagov/govuk_publishing_components/actions?query=branch%3Amain)
 [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 [![Stylelint Style Guide](https://img.shields.io/badge/code_style-stylelint-brightgreen.svg)](https://github.com/alphagov/stylelint-config-gds/)
 

data/app/assets/config/govuk_publishing_components_manifest.js

@@ -1,3 +1,15 @@
-// JS and CSS bundles for the gem
-//= link_directory ../javascripts/govuk_publishing_components .js
-//= link_directory ../stylesheets/govuk_publishing_components .css
+// Pre-compile image and font assets from here and govuk-frontend
+//= link_tree ../images
+//= link_tree ../../../node_modules/govuk-frontend/govuk/assets/images
+//= link_tree ../../../node_modules/govuk-frontend/govuk/assets/fonts
+
+// Create asset files of each of the files in these directory
+//= link_directory ../javascripts/component_guide
+//= link_directory ../javascripts/govuk_publishing_components
+
+// Pre-compile these specific files
+//= link govuk_publishing_components/vendor/modernizr.js
+//= link govuk_publishing_components/vendor/lux/lux-reporter.js
+//= link govuk_publishing_components/vendor/lux/lux-measurer.js
+//= link component_guide/application.css
+//= link component_guide/print.css

data/app/assets/javascripts/govuk_publishing_components/dependencies.js

@@ -1,12 +1,9 @@
-/* eslint-env jquery */
+/* eslint-env */
 
 // This adds in javascript that initialises components and dependencies
 // that are provided by Slimmer in public frontend applications.
-// = require jquery/dist/jquery
 // = require ./modules.js
 
-$(document).ready(function () {
-  'use strict'
-
+document.addEventListener('DOMContentLoaded', function () {
   window.GOVUK.modules.start()
 })

data/app/assets/javascripts/govuk_publishing_components/modules.js

@@ -1,49 +1,46 @@
 ;(function (global) {
   'use strict'
 
-  var $ = global.jQuery
   var GOVUK = global.GOVUK || {}
   GOVUK.Modules = GOVUK.Modules || {}
 
   GOVUK.modules = {
     find: function (container) {
-      container = $(container || document)
+      container = container || document
 
       var modules
       var moduleSelector = '[data-module]'
 
-      modules = container.find(moduleSelector)
+      modules = container.querySelectorAll(moduleSelector)
+      var modulesArray = []
+      // convert nodelist of modules to array
+      for (var i = 0; i < modules.length; i++) {
+        modulesArray.push(modules[i])
+      }
 
       // Container could be a module too
-      if (container.is(moduleSelector)) {
-        modules = modules.add(container)
+      if (container !== document && container.getAttribute('data-module')) {
+        modulesArray.push(container)
       }
-
-      return modules
+      return modulesArray
     },
 
     start: function (container) {
       var modules = this.find(container)
 
       for (var i = 0, l = modules.length; i < l; i++) {
-        var element = $(modules[i])
-        var moduleNames = element.data('module').split(' ')
+        var element = modules[i]
+        var moduleNames = element.getAttribute('data-module').split(' ')
 
         for (var j = 0, k = moduleNames.length; j < k; j++) {
           var moduleName = camelCaseAndCapitalise(moduleNames[j])
-          var started = element.data(moduleNames[j] + '-module-started')
+          var started = element.getAttribute('data-' + moduleNames[j] + '-module-started')
 
           if (typeof GOVUK.Modules[moduleName] === 'function' && !started) {
-            // GOV.UK Legacy Modules using jQuery
-            if (!GOVUK.Modules[moduleName].prototype.init) {
-              new GOVUK.Modules[moduleName]().start(element)
-              element.data(moduleNames[j] + '-module-started', true)
-            }
-
             // Vanilla JavaScript GOV.UK Modules and GOV.UK Frontend Modules
             if (GOVUK.Modules[moduleName].prototype.init) {
-              new GOVUK.Modules[moduleName](element[0]).init()
-              element.data(moduleNames[j] + '-module-started', true)
+              new GOVUK.Modules[moduleName](element).init()
+              element.setAttribute('data-' + moduleNames[j] + '-module-started', true)
             }
           }
         }

data/app/assets/javascripts/govuk_publishing_components/{rum-loader.js.erb → rum-loader.js}

@@ -1,7 +1,5 @@
-(function() {
-  var scriptSrc = '<%= path_to_javascript("govuk_publishing_components/vendor/lux/lux-reporter") %>'
-
-  var parsedCookie = (function() {
+(function () {
+  var parsedCookie = (function () {
     try {
       var cookies = document.cookie.split(';')
 
@@ -20,11 +18,16 @@
     return {}
   })()
 
-  var insertScript = function(source) {
-    var marker = document.getElementsByTagName('script')[0]
+  var insertScript = function () {
+    var marker = document.querySelector('script[data-lux-reporter-script]')
+
+    if (!marker) {
+      console.error("Failed to configure real-user-monitoring because couldn't the lux-reporter script path wasn't available")
+      return
+    }
 
     var script = document.createElement('script')
-    script.src = source
+    script.src = marker.getAttribute('data-lux-reporter-script')
     script.async = true
     script.defer = true
 
@@ -32,10 +35,10 @@
   }
 
   if (parsedCookie.usage === true) {
-    insertScript(scriptSrc)
+    insertScript()
   } else {
-    window.addEventListener('cookie-consent', function() {
-      insertScript(scriptSrc)
+    window.addEventListener('cookie-consent', function () {
+      insertScript()
     })
   }
 })()

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -474,6 +474,7 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
   &:visited {
     @include govuk-media-query($from: "desktop") {
       background: $govuk-brand-colour;
+      border-bottom: 1px solid govuk-colour("dark-blue");
 
       &:hover {
         background: govuk-colour("black");

data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb

@@ -51,7 +51,13 @@
     <title><%= title %></title>
 
     <%= javascript_include_tag "govuk_publishing_components/vendor/lux/lux-measurer", { async: true } %>
-    <%= javascript_include_tag "govuk_publishing_components/rum-loader", { async: true } %>
+    <%= javascript_include_tag "govuk_publishing_components/rum-loader",
+      {
+        async: true,
+        data: {
+          "lux-reporter-script": path_to_javascript("govuk_publishing_components/vendor/lux/lux-reporter")
+        }
+      } %>
 
     <%= csrf_meta_tags %>
 

data/app/views/govuk_publishing_components/components/docs/big_number.yml

@@ -19,7 +19,7 @@ examples:
       number: 119
       label: Open consultations
   passing_extra_symbols:
-    description: "In some cases, we want to communicate more than just the flat numeric value eg: 400+, 90%, -20, 1M etc. This is why we allow values to be passed as flat strings."
+    description: "In some cases, we want to communicate more than just the flat numeric value eg: `400+`, `90%`, `-20`, `1M` etc. This is why we allow values to be passed as flat strings."
     data:
       number: "400+"
       label: Other agencies and public bodies
@@ -35,7 +35,7 @@ examples:
       href: "/government/organisations#ministerial_departments"
   with_data_attributes:
     description: |
-      If a `href` attribute is present, data attributes will apply to the `span` containing the number value (see below).
+      If a `href` attribute is present, `data_attributes` will apply to the `span` containing the number value (see below).
       
       This will also not automatically apply a `gem-track-click` module attribute if the data attributes pertain to click tracking. Remember to apply this outside the component call in a surrounding element, if using.
     data:
@@ -62,7 +62,7 @@ examples:
       aria:
         hidden: true
   with_bottom_margin:
-    description: The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). The default big number margin bottom is 15px (govuk spacing 3).
+    description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). The default big number margin bottom is `15px` (`govuk-spacing(3)`).
     data:
       number: 119
       label: Open consultations

data/app/views/govuk_publishing_components/components/docs/breadcrumbs.yml

@@ -2,9 +2,9 @@ name: "Breadcrumbs"
 description: "Navigational breadcrumbs, showing page hierarchy"
 body: |
   Accepts an array of breadcrumb objects. Each crumb must have a title and a URL.
-  Links have tracking data but links to the homepage (any link with a url of "/") will be tracked separately as `homeLinkClicked`
+  Links have tracking data but links to the homepage (any link with a url of `/`) will be tracked separately as `homeLinkClicked`
 
-   We recommend that if using the breadcrumbs for navigation purposes, you set collapse_on_mobile to true to make things more readable for mobile users. However, you can specify `collapse_on_mobile`:`false` or remove the flag completely to stop this behaviour.
+   We recommend that if using the breadcrumbs for navigation purposes, you set `collapse_on_mobile` to `true` to make things more readable for mobile users. However, you can specify `collapse_on_mobile:``false` or remove the flag completely to stop this behaviour.
 shared_accessibility_criteria:
   - link
 accessibility_criteria:
@@ -87,7 +87,7 @@ examples:
       - title: 'Education of disadvantaged children appended with some extra long content to make this a very very very very long taxon'
         url: '/education'
   stop_collapsing_on_mobile:
-    description: We recommend that if using the breadcrumbs for navigation purposes, you set collapse_on_mobile to true to make things more readable for mobile users. However, you can specify `collapse_on_mobile`:`false` or remove the flag completely to stop this behaviour.
+    description: We recommend that if using the breadcrumbs for navigation purposes, you set `collapse_on_mobile` to `true` to make things more readable for mobile users. However, you can specify `collapse_on_mobile:``false` or remove the flag completely to stop this behaviour.
     data:
       collapse_on_mobile: false
       breadcrumbs:

data/app/views/govuk_publishing_components/components/docs/button.yml

@@ -67,12 +67,12 @@ examples:
       start: true
       info_text: "Sometimes you want to explain where a user is going to."
   with_margin_bottom:
-    description: "The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having no margin bottom."
+    description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having no margin bottom.
     data:
       text: "Submit"
       margin_bottom: 6
   start_now_button_with_info_text_and_margin_bottom:
-    description: "When the component requires margin bottom and has info text, the margin is applied to the info text."
+    description: When the component requires margin bottom and has info text, the margin is applied to the info text.
     data:
       text: "Start now"
       href: "#"

data/app/views/govuk_publishing_components/components/docs/checkboxes.yml

@@ -124,7 +124,7 @@ examples:
         - label: "Blue"
           value: "blue"
   without_hint_text:
-    description: Hint text can be removed entirely with this option. Note that this option can be combined with the visually_hide_heading option.
+    description: Hint text can be removed entirely with this option. Note that this option can be combined with the `visually_hide_heading` option.
     data:
       name: "favourite_skittle[]"
       heading: "What is your favourite skittle?"
@@ -148,7 +148,7 @@ examples:
         - label: "Blue"
           value: "blue"
   with_a_custom_id_attribute:
-    description: Note that if an id is not given one is generated automatically. In either case, the id is applied to the parent element of the checkboxes, and each checkbox is given the same id with an incremented number at the end, e.g. the checkboxes below have ids of potatoes-0 and potatoes-1.
+    description: Note that if an `id` is not given one is generated automatically. In either case, the `id` is applied to the parent element of the checkboxes, and each checkbox is given the same `id` with an incremented number at the end, e.g. the checkboxes below have ids of `potatoes-0` and `potatoes-1`.
     data:
       name: "potatoes[]"
       id: "potatoes"
@@ -185,9 +185,9 @@ examples:
           value: "blue"
   with_custom_heading_size:
     description: |
-      This allows the size of the legend to be changed. Valid options are s, m, l, xl, defaulting to m if no option is passed.
+      This allows the size of the legend to be changed. Valid options are `s`, `m`, `l`, `xl`, defaulting to m if no option is passed.
 
-      If the is_page_heading option is true and heading_size is not set, the text size will be xl.
+      If the `is_page_heading` option is `true` and `heading_size` is not set, the text size will be `xl`.
     data:
       name: "favourite_colour[]"
       heading: "What is your favourite colour?"
@@ -233,7 +233,7 @@ examples:
             }
           }
   with_aria_controls_attributes:
-    description: Aria controls attributes are applied to the checkboxes only if Javascript is enabled.
+    description: Aria controls attributes are applied to the checkboxes only if JavaScript is enabled.
     data:
       name: "aria_controls[]"
       heading: "What areas are you interested in?"

data/app/views/govuk_publishing_components/components/docs/contents_list.yml

@@ -66,7 +66,7 @@ examples:
         - href: "#third-thing"
           text: Third thing
   with_custom_aria_label:
-    description: 'An aria-label string should be used to contextualise the navigation for assistive technology. Defaults to "Contents" if aria-label is not passed.'
+    description: 'An `aria-label` string should be used to contextualise the navigation for assistive technology. Defaults to `Contents` if `aria-label` is not passed.'
     data:
       aria_label: "Pages in this guide"
       contents:

data/app/views/govuk_publishing_components/components/docs/contextual_breadcrumbs.yml

@@ -25,7 +25,7 @@ examples:
       content_item:
         title: "A content item"
   inverse:
-    description: Passes the 'inverse' option to the breadcrumbs, if shown.
+    description: Passes the `inverse` option to the breadcrumbs, if shown.
     data:
       content_item:
         title: "Another content item"

data/app/views/govuk_publishing_components/components/docs/contextual_guidance.yml

@@ -15,7 +15,7 @@ shared_accessibility_criteria:
   - link
 examples:
   default:
-    description: Reveals a contextul guidance on the side overflowing the container
+    description: Reveals a contextual guidance on the side overflowing the container
     data:
       html_for: news-title
       title: Writing a news title

data/app/views/govuk_publishing_components/components/docs/cookie_banner.yml

@@ -1,7 +1,7 @@
 name: Cookie banner
 description: Help users manage their personal data by telling them when you store cookies on their device.
 body: |
-  By default the cookie banner is shown to all users with just a link to the settings page. If JS is on this is enhanced to show accept/reject buttons if preferences aren't set, or to hide the banner if they are.
+  By default the cookie banner is shown to all users with just a link to the settings page. If JavaScript is on this is enhanced to show accept/reject buttons if preferences aren't set, or to hide the banner if they are.
 
   Setting `data-hide-cookie-banner="true"` on any link inside the banner will overwrite the default action and when clicked will dismiss the cookie banner for a period of 365 days (approx. 1 year).
 
@@ -35,7 +35,7 @@ examples:
     data:
       title: Can we store analytics cookies on your device?
       text: Analytics cookies help us understand how our website is being used.
-      confirmation_message: You’ve accepted all cookies. You can <a class='govuk-link' href='/cookies'>change your cookie settings</a> at any time.
+      confirmation_message: You’ve accepted all cookies. You can `<a class='govuk-link' href='/cookies'>change your cookie settings</a>` at any time.
       services_cookies:
         "yes":
           text: "Yes"

data/app/views/govuk_publishing_components/components/docs/date_input.yml

@@ -14,7 +14,7 @@ accessibility_criteria: |
 
   Labels use the [label component](/component-guide/label).
 
-  Avoid using autofocus and tabindex unless you have user research to support this behaviour.
+  Avoid using [`autofocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) and `tabindex` unless you have user research to support this behaviour.
 govuk_frontend_components:
   - date-input
 examples:

data/app/views/govuk_publishing_components/components/docs/details.yml

@@ -22,7 +22,7 @@ examples:
       block: |
         We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
   with_data_attributes:
-    description: Can be used for tracking. Tracking is applied to the summary element when the details element is opened and closed. By default, `track-label` is set to the status ("open" or "closed") unless a track_label is passed into the component.
+    description: Can be used for tracking. Tracking is applied to the summary element when the details element is opened and closed. By default, `track-label` is set to the status (`open` or `closed`) unless a `track_label` is passed into the component.
     data:
       title: Help with nationality
       data_attributes:

data/app/views/govuk_publishing_components/components/docs/devolved_nations.yml

@@ -83,7 +83,7 @@ examples:
           alternative_url: /
       type: detailed_guide
   specific_heading level:
-    description: Use a different heading level for the main link title. Defaults to `H2` if not passed.
+    description: Use a different heading level for the main link title. Defaults to `h2` if not passed.
     data:
       heading_level: 3
       national_applicability:

data/app/views/govuk_publishing_components/components/docs/document_list.yml

@@ -254,7 +254,7 @@ examples:
     context:
       right_to_left: true
   with_parts:
-    description: Display child items, such as parts of guides or travel advice. Child items accept the same paramaters as parent items.
+    description: Display child items, such as parts of guides or travel advice. Child items accept the same parameters as parent items.
     data:
       items:
       - link:
@@ -285,7 +285,7 @@ examples:
 
       Locales can be set separately for the document link text and individual metadata items. To set link text locale, pass a locale attribute along with the link object. To set metadata locale, pass a locale attribute containing a parallel object to your metadata (depending on which metadata have translations and which need a lang attribute to specify that they are in a different language).
 
-      The lang attribute must be set to a [valid BCP47 string](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#Language_tag_syntax). A valid code can be the two or three letter language code - for example, English is en or eng, Korean is ko or kor - but if in doubt please check.
+      The lang attribute must be set to a [valid BCP47 string](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#Language_tag_syntax). A valid code can be the two or three letter language code - for example, English is `en` or `eng`, Korean is `ko` or `kor` - but if in doubt please check.
     data:
       items:
       - link:

data/app/views/govuk_publishing_components/components/docs/error_alert.yml

@@ -3,7 +3,7 @@ description: Used at the top of the page, to summarise a unsuccessful user actio
 accessibility_criteria: |
   - should be focused on page load, to ensure the message is noticed by
     assistive tech
-  - Should have a role of ‘alert’ to communicate that is a important and
+  - Should have a role of `alert` to communicate that is a important and
     time sensitive message
 examples:
   default:

data/app/views/govuk_publishing_components/components/docs/error_summary.yml

@@ -45,9 +45,9 @@ examples:
       title: Message to alert the user to a problem goes here
       description: Optional description of the errors and how to correct them
       items:
-      - text: Descriptive link to the question with an error oppening in a new window
+      - text: Descriptive link to the question with an error opening in a new window
         href: '#example-error-1'
         target: '_blank'
-      - text: Descriptive link to the question with an error oppening in the same window
+      - text: Descriptive link to the question with an error opening in the same window
         href: '#example-error-2'
         target: '_self'

data/app/views/govuk_publishing_components/components/docs/feedback.yml

@@ -19,7 +19,7 @@ accessibility_criteria: |
   * indicate when they have focus
   * be recognisable as form input elements
   * have correctly associated labels
-  * be of the appropriate type for their use, e.g. password inputs should be of type 'password'
+  * be of the appropriate type for their use, e.g. password inputs should be of type `password`
 shared_accessibility_criteria:
   - link
 examples:

data/app/views/govuk_publishing_components/components/docs/fieldset.yml

@@ -3,7 +3,7 @@ description: The fieldset element is used to group several controls within a web
 body: |
   [Using the fieldset and legend elements](https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/)
 
-  You can use the 'text' property or pass 'text' as a block.
+  You can use the `text` property or pass `text` as a block.
 accessibility_criteria: |
   - must give inputs within the fieldset context with legend text
 examples:
@@ -29,7 +29,7 @@ examples:
           <input type="radio" id="passport-no" name="default">
           <label for="passport-no">No</label>
   with_heading:
-    description: Make the legend different sizes. Valid options are 's', 'm', 'l' and 'xl'.
+    description: Make the legend different sizes. Valid options are `s`, `m`, `l` and `xl`.
     data:
       legend_text: 'Do you have a driving license?'
       heading_level: 2
@@ -42,7 +42,7 @@ examples:
           <input type="radio" id="level-no" name="default">
           <label for="level-no">No</label>
   with_custom_legend_size:
-    description: Make the legend different sizes. Valid options are 's', 'm', 'l' and 'xl'.
+    description: Make the legend different sizes. Valid options are `s`, `m`, `l` and `xl`.
     data:
       legend_text: 'Do you have a driving license?'
       heading_size: 'l'
@@ -54,7 +54,7 @@ examples:
           <input type="radio" id="size-no" name="default">
           <label for="size-no">No</label>
   with_error_message:
-    description: The component also accepts an error_id, or generates one automatically.
+    description: The component also accepts an `error_id`, or generates one automatically.
     data:
       legend_text: 'Do you have a passport?'
       error_message: 'Please choose an option'

data/app/views/govuk_publishing_components/components/docs/heading.yml

@@ -27,7 +27,7 @@ examples:
     description: |
       Set a different font size for the heading. Uses the [GOV.UK Frontend heading sizes](https://design-system.service.gov.uk/styles/typography/#headings) but defaults to 27px for legacy reasons. Valid options are `xl`, `l`, `m` and `s`.
 
-      This option is not tied to the heading_level option in order to give flexibility.
+      This option is not tied to the `heading_level` option in order to give flexibility.
     data:
       text: 'One big heading'
       font_size: "xl"
@@ -46,7 +46,7 @@ examples:
       text: 'Padded'
       padding: true
   with_margin:
-    description: The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having no margin bottom.
+    description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having no margin bottom.
     data:
       text: 'Really big bottom margin'
       margin_bottom: 9
@@ -59,7 +59,7 @@ examples:
       text: 'Consultation description'
       mobile_top_margin: true
   with_border:
-    description: A top border can be applied to the component of different thicknesses. Accepted values are 1 (1px), 2 (2px) and 5 (5px). Note that this works best with padding applied.
+    description: A top border can be applied to the component of different thicknesses. Accepted values are `1` (`1px`), `2` (`2px`) and `5` (`5px`). Note that this works best with padding applied.
     data:
       text: 'With a border'
       padding: true
@@ -81,7 +81,7 @@ examples:
     description: |
       The component is used on translated pages that don’t have a translation for the text strings. This means that it could display the fallback English string if the translate method can’t find an appropriate translation. This makes sure that the lang can be set to ensure that browsers understand which parts of the page are in each language.
 
-      The lang attribute must be set to a [valid BCP47 string](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#Language_tag_syntax). A valid code can be the two or three letter language code - for example, English is en or eng, Korean is ko or kor - but if in doubt please check.
+      The lang attribute must be set to a [valid BCP47 string](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#Language_tag_syntax). A valid code can be the two or three letter language code - for example, English is `en` or `eng`, Korean is `ko` or `kor` - but if in doubt please check.
     data:
       text: "Ein gweinidogion"
       lang: "cy"

data/app/views/govuk_publishing_components/components/docs/hint.yml

@@ -15,7 +15,7 @@ examples:
     data:
       text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
   with_margin_bottom:
-    description: The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to a margin bottom of 3 (15px).
+    description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to a margin bottom of `3` (`15px`).
     data:
       text: "You qualify if you were born in the UK before June 1960."
       margin_bottom: 9

data/app/views/govuk_publishing_components/components/docs/input.yml

@@ -14,7 +14,7 @@ accessibility_criteria: |
 
   Labels use the [label component](/component-guide/label).
 
-  Avoid using autofocus and tabindex unless you have user research to support this behaviour.
+  Avoid using `autofocus` and `tabindex` unless you have user research to support this behaviour.
 govuk_frontend_components:
   - text-input
 examples:
@@ -45,7 +45,7 @@ examples:
       name: "account-number"
       type: "number"
   with_an_identifier:
-    description: Give the input a specific ID.
+    description: Give the input a specific `ID`.
     data:
       label:
         text: "Has an id"
@@ -120,7 +120,7 @@ examples:
       width: 10
   with_search_icon:
     description: |
-        Adds a search icon, [spellcheck](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck) can also be added to indicate that the element should be, if possible, checked for spelling errors.
+        Adds a search icon, [`spellcheck`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck) can also be added to indicate that the element should be, if possible, checked for spelling errors.
     data:
       label:
         text: "Search the internet"

data/app/views/govuk_publishing_components/components/docs/inset_text.yml

@@ -19,7 +19,7 @@ examples:
           <a class="govuk-link" href='/foo'>Check for broken links</a>
         </div>
   with_custom_margins:
-    description: The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having margin of 6 (30px) top and bottom.
+    description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having margin of `6` (`30px`) top and bottom.
     data:
       text: "When a failure occurs, you must submit logbook, landing and transhipment data manually to the UK Fisheries Call Centre each day and by no later than 23.59 UTC"
       margin_top: 0

data/app/views/govuk_publishing_components/components/docs/label.yml

@@ -13,7 +13,7 @@ accessibility_criteria: |
 
   - be associated with an input. The `hint_id` must match the `aria-describedby` property on the input your label is associated with.
 
-  If hint text is within a label it will be announced in its entirity by screen readers. By putting the hint alongside labels and associating hints with inputs using `aria-describedby`, then screen readers will read the label, describe the type of input (eg radio) and then read additional text. It means users of screen readers can scan and skip options as easy as people making choices with sight. [A discussion of this approach](https://github.com/alphagov/govuk_elements/issues/574).
+  If hint text is within a label it will be announced in its entirety by screen readers. By putting the hint alongside labels and associating hints with inputs using `aria-describedby`, then screen readers will read the label, describe the type of input (eg radio) and then read additional text. It means users of screen readers can scan and skip options as easy as people making choices with sight. [A discussion of this approach](https://github.com/alphagov/govuk_elements/issues/574).
 govuk_frontend_components:
   - label
 examples:

data/app/views/govuk_publishing_components/components/docs/layout_footer.yml

@@ -15,12 +15,12 @@ accessibility_criteria: |
 
   - avoid navigation landmarks or roles
 
-    The footer element alone is sufficient for such cases; while a [nav element](https://www.w3.org/TR/html52/sections.html#the-nav-element) can be used, it is usually unnecessary.
+    The footer element alone is sufficient for such cases; while a [`nav` element](https://www.w3.org/TR/html52/sections.html#the-nav-element) can be used, it is usually unnecessary.
 
     Note: This decision has been made based on prior experience seeing removal of overuse of `<nav>` elements from www.GOV.UK, which made it confusing for users of assistive technologies to know what were the most important navigation aspects of GOV.UK.
     Should be challenged if user research indicates this is an issue.
 
-  - have a role of [`contentinfo`](https://www.w3.org/TR/wai-aria-1.1/#contentinfo) at the root of the component (<footer>)
+  - have a role of [`contentinfo`](https://www.w3.org/TR/wai-aria-1.1/#contentinfo) at the root of the component (`<footer>`)
 
     Note: This decision has been made given that most uses of this role tend to be used directly on a `<footer>` element.
     Assumption made is that is most predictable for users of assistive technologies.

data/app/views/govuk_publishing_components/components/docs/lead_paragraph.yml

@@ -21,7 +21,7 @@ examples:
     context:
       dark_background: true
   custom_margin_bottom:
-    description: The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom of 45px.
+    description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom of `45px`.
     data:
       text: This is some example text for a lead paragraph
       margin_bottom: 6

data/app/views/govuk_publishing_components/components/docs/metadata.yml

@@ -359,7 +359,7 @@ examples:
       dark_background: true
   with_custom_margin_bottom:
     description: |
-      The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to the `margin-bottom` values defined in the [responsive-bottom-margin mixin](https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/mixins/_margins.scss#L1)
+      The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to the `margin-bottom` values defined in the [responsive-bottom-margin mixin](https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/mixins/_margins.scss#L1)
     data:
       first_published: 14 June 2014
       last_updated: 10 September 2015