govuk_publishing_components 9.5.1 → 9.5.2

data/node_modules/govuk-frontend/components/inset-text/README.md

@@ -6,9 +6,9 @@ Use bordered inset text to draw attention to important content on the page.
 
 ## Quick start examples
 
-### Component default
+### Inset text
 
-[Preview the inset-text component](http://govuk-frontend-review.herokuapp.com/components/inset-text/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/inset-text/preview)
 
 #### Markup
 
@@ -18,15 +18,15 @@ Use bordered inset text to draw attention to important content on the page.
 
 #### Macro
 
-    {% from 'inset-text/macro.njk' import govukInsetText %}
+    {% from "inset-text/macro.njk" import govukInsetText %}
 
     {{ govukInsetText({
       "text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
     }) }}
 
-### Inset-text--with html
+### Inset text with html
 
-[Preview the inset-text--with html example](http://govuk-frontend-review.herokuapp.com/components/inset-text/with html/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/inset-text/with-html/preview)
 
 #### Markup
 
@@ -36,7 +36,7 @@ Use bordered inset text to draw attention to important content on the page.
 
 #### Macro
 
-    {% from 'inset-text/macro.njk' import govukInsetText %}
+    {% from "inset-text/macro.njk" import govukInsetText %}
 
     {{ govukInsetText({
       "html": "It can take up to 8 weeks to register a <a class=\"govuk-link\" href=\"#\">lasting power of attorney</a> if there are no mistakes in the application."

data/node_modules/govuk-frontend/components/label/README.md

@@ -6,9 +6,9 @@ Use labels for all form fields.
 
 ## Quick start examples
 
-### Component default
+### Label
 
-[Preview the label component](http://govuk-frontend-review.herokuapp.com/components/label/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/label/preview)
 
 #### Markup
 
@@ -18,15 +18,15 @@ Use labels for all form fields.
 
 #### Macro
 
-    {% from 'label/macro.njk' import govukLabel %}
+    {% from "label/macro.njk" import govukLabel %}
 
     {{ govukLabel({
       "text": "National Insurance number"
     }) }}
 
-### Label--with bold text
+### Label with bold text
 
-[Preview the label--with bold text example](http://govuk-frontend-review.herokuapp.com/components/label/with bold text/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/label/with-bold-text/preview)
 
 #### Markup
 
@@ -36,16 +36,16 @@ Use labels for all form fields.
 
 #### Macro
 
-    {% from 'label/macro.njk' import govukLabel %}
+    {% from "label/macro.njk" import govukLabel %}
 
     {{ govukLabel({
       "classes": "govuk-label--s",
       "text": "National Insurance number"
     }) }}
 
-### Label--as page heading
+### Label as page heading
 
-[Preview the label--as page heading example](http://govuk-frontend-review.herokuapp.com/components/label/as page heading/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/label/as-page-heading/preview)
 
 #### Markup
 
@@ -58,7 +58,7 @@ Use labels for all form fields.
 
 #### Macro
 
-    {% from 'label/macro.njk' import govukLabel %}
+    {% from "label/macro.njk" import govukLabel %}
 
     {{ govukLabel({
       "text": "National Insurance number",

data/node_modules/govuk-frontend/components/panel/README.md

@@ -6,13 +6,13 @@ The confirmation panel has a turquoise background and white text. Used for trans
 
 ## Guidance
 
-Find out when to use the Panel component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/panel).
+Find out when to use the panel component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/panel).
 
 ## Quick start examples
 
-### Component default
+### Panel
 
-[Preview the panel component](http://govuk-frontend-review.herokuapp.com/components/panel/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/panel/preview)
 
 #### Markup
 
@@ -29,10 +29,37 @@ Find out when to use the Panel component in your service in the [GOV.UK Design S
 
 #### Macro
 
-    {% from 'panel/macro.njk' import govukPanel %}
+    {% from "panel/macro.njk" import govukPanel %}
+
+    {{ govukPanel({
+      "titleHtml": "Application complete",
+      "text": "Your reference number: HDJ2123F"
+    }) }}
+
+### Panel custom heading level
+
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/panel/custom-heading-level/preview)
+
+#### Markup
+
+    <div class="govuk-panel govuk-panel--confirmation">
+      <h1 class="govuk-panel__title">
+        Application complete
+      </h1>
+
+      <div class="govuk-panel__body">
+        Your reference number: HDJ2123F
+      </div>
+
+    </div>
+
+#### Macro
+
+    {% from "panel/macro.njk" import govukPanel %}
 
     {{ govukPanel({
       "titleText": "Application complete",
+      "headingLevel": 1,
       "text": "Your reference number: HDJ2123F"
     }) }}
 
@@ -92,6 +119,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">headingLevel</th>
+
+<td class="govuk-table__cell ">number</td>
+
+<td class="govuk-table__cell ">no</td>
+
+<td class="govuk-table__cell ">Optional heading level, from 1 to 6\. Default is 2.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">text (or) html</th>
 
 <td class="govuk-table__cell ">string</td>

data/node_modules/govuk-frontend/components/panel/template.njk

@@ -1,9 +1,11 @@
+{#- TODO: Change default title heading level to 1 - https://github.com/alphagov/govuk-frontend/issues/864 -#}
+{% set headingLevel = params.headingLevel if params.headingLevel else 2 %}
 <div class="govuk-panel govuk-panel--confirmation
   {%- if params.classes %} {{ params.classes }}{% endif %}"
   {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  <h2 class="govuk-panel__title">
+  <h{{ headingLevel }} class="govuk-panel__title">
     {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
-  </h2>
+  </h{{ headingLevel }}>
   {% if params.html or params.text %}
   <div class="govuk-panel__body">
     {{ params.html | safe if params.html else params.text }}

data/node_modules/govuk-frontend/components/phase-banner/README.md

@@ -6,13 +6,13 @@ A banner that indicates content is in alpha or beta phase with a description.
 
 ## Guidance
 
-Find out when to use the Phase banner component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/phase-banner).
+Find out when to use the phase banner component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/phase-banner).
 
 ## Quick start examples
 
-### Component default
+### Phase banner
 
-[Preview the phase-banner component](http://govuk-frontend-review.herokuapp.com/components/phase-banner/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/phase-banner/preview)
 
 #### Markup
 
@@ -28,7 +28,7 @@ Find out when to use the Phase banner component in your service in the [GOV.UK D
 
 #### Macro
 
-    {% from 'phase-banner/macro.njk' import govukPhaseBanner %}
+    {% from "phase-banner/macro.njk" import govukPhaseBanner %}
 
     {{ govukPhaseBanner({
       "tag": {

data/node_modules/govuk-frontend/components/phase-banner/_phase-banner.scss

@@ -6,9 +6,6 @@
 
 @include govuk-exports("govuk/component/phase-banner") {
   .govuk-phase-banner {
-    @include govuk-font($size: 16);
-    @include govuk-text-colour;
-
     padding-top: govuk-spacing(2);
     padding-bottom: govuk-spacing(2);
 
@@ -16,6 +13,9 @@
   }
 
   .govuk-phase-banner__content {
+    @include govuk-font($size: 16);
+    @include govuk-text-colour;
+
     display: table;
     margin: 0;
   }

data/node_modules/govuk-frontend/components/radios/README.md

@@ -6,13 +6,13 @@ Let users select a single option from a list.
 
 ## Guidance
 
-Find out when to use the Radios component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/radios).
+Find out when to use the radios component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/radios).
 
 ## Quick start examples
 
-### Component default
+### Radios
 
-[Preview the radios component](http://govuk-frontend-review.herokuapp.com/components/radios/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/preview)
 
 #### Markup
 
@@ -51,7 +51,7 @@ Find out when to use the Radios component in your service in the [GOV.UK Design
 
 #### Macro
 
-    {% from 'radios/macro.njk' import govukRadios %}
+    {% from "radios/macro.njk" import govukRadios %}
 
     {{ govukRadios({
       "idPrefix": "example",
@@ -77,36 +77,36 @@ Find out when to use the Radios component in your service in the [GOV.UK Design
       ]
     }) }}
 
-### Radios--inline
+### Radios inline
 
-[Preview the radios--inline example](http://govuk-frontend-review.herokuapp.com/components/radios/inline/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/inline/preview)
 
 #### Markup
 
     <div class="govuk-form-group">
 
-      <fieldset class="govuk-fieldset" aria-describedby="example-hint">
+      <fieldset class="govuk-fieldset" aria-describedby="example&#39;-hint">
 
       <legend class="govuk-fieldset__legend">
         Have you changed your name?
       </legend>
 
-      <span id="example-hint" class="govuk-hint">
+      <span id="example&#39;-hint" class="govuk-hint">
         This includes changing your last name or spelling your name differently.
       </span>
 
       <div class="govuk-radios govuk-radios--inline">
 
         <div class="govuk-radios__item">
-          <input class="govuk-radios__input" id="example-1" name="example" type="radio" value="yes">
-          <label class="govuk-label govuk-radios__label" for="example-1">
+          <input class="govuk-radios__input" id="example&#39;-1" name="example" type="radio" value="yes">
+          <label class="govuk-label govuk-radios__label" for="example&#39;-1">
             Yes
           </label>
         </div>
 
         <div class="govuk-radios__item">
-          <input class="govuk-radios__input" id="example-2" name="example" type="radio" value="no" checked>
-          <label class="govuk-label govuk-radios__label" for="example-2">
+          <input class="govuk-radios__input" id="example&#39;-2" name="example" type="radio" value="no" checked>
+          <label class="govuk-label govuk-radios__label" for="example&#39;-2">
             No
           </label>
         </div>
@@ -118,10 +118,10 @@ Find out when to use the Radios component in your service in the [GOV.UK Design
 
 #### Macro
 
-    {% from 'radios/macro.njk' import govukRadios %}
+    {% from "radios/macro.njk" import govukRadios %}
 
     {{ govukRadios({
-      "idPrefix": "example",
+      "idPrefix": "example'",
       "classes": "govuk-radios--inline",
       "name": "example",
       "fieldset": {
@@ -145,9 +145,9 @@ Find out when to use the Radios component in your service in the [GOV.UK Design
       ]
     }) }}
 
-### Radios--with-disabled
+### Radios with disabled
 
-[Preview the radios--with-disabled example](http://govuk-frontend-review.herokuapp.com/components/radios/with-disabled/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/with-disabled/preview)
 
 #### Markup
 
@@ -186,7 +186,7 @@ Find out when to use the Radios component in your service in the [GOV.UK Design
 
 #### Macro
 
-    {% from 'radios/macro.njk' import govukRadios %}
+    {% from "radios/macro.njk" import govukRadios %}
 
     {{ govukRadios({
       "idPrefix": "example-disabled",
@@ -213,9 +213,9 @@ Find out when to use the Radios component in your service in the [GOV.UK Design
       ]
     }) }}
 
-### Radios--with-html
+### Radios with legend as page heading
 
-[Preview the radios--with-html example](http://govuk-frontend-review.herokuapp.com/components/radios/with-html/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/with-legend-as-page-heading/preview)
 
 #### Markup
 
@@ -223,8 +223,78 @@ Find out when to use the Radios component in your service in the [GOV.UK Design
 
       <fieldset class="govuk-fieldset" aria-describedby="housing-act-hint">
 
-      <legend class="govuk-fieldset__legend">
-        <h1 class="govuk-heading-l">Which part of the Housing Act was your licence issued under?</h1>
+      <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+        <h1 class="govuk-fieldset__heading">
+          Which part of the Housing Act was your licence issued under?
+        </h1>
+      </legend>
+
+      <span id="housing-act-hint" class="govuk-hint">
+        Select one of the options below.
+      </span>
+
+      <div class="govuk-radios">
+
+        <div class="govuk-radios__item">
+          <input class="govuk-radios__input" id="housing-act-1" name="housing-act" type="radio" value="part-2">
+          <label class="govuk-label govuk-radios__label" for="housing-act-1">
+            <span class="govuk-heading-s govuk-!-margin-bottom-1">Part 2 of the Housing Act 2004</span> For properties that are 3 or more stories high and occupied by 5 or more people
+          </label>
+        </div>
+
+        <div class="govuk-radios__item">
+          <input class="govuk-radios__input" id="housing-act-2" name="housing-act" type="radio" value="part-3">
+          <label class="govuk-label govuk-radios__label" for="housing-act-2">
+            <span class="govuk-heading-s govuk-!-margin-bottom-1">Part 3 of the Housing Act 2004</span> For properties that are within a geographical area defined by a local council
+          </label>
+        </div>
+
+      </div>
+      </fieldset>
+
+    </div>
+
+#### Macro
+
+    {% from "radios/macro.njk" import govukRadios %}
+
+    {{ govukRadios({
+      "idPrefix": "housing-act",
+      "name": "housing-act",
+      "fieldset": {
+        "legend": {
+          "text": "Which part of the Housing Act was your licence issued under?",
+          "classes": "govuk-fieldset__legend--l",
+          "isPageHeading": true
+        }
+      },
+      "hint": {
+        "text": "Select one of the options below."
+      },
+      "items": [
+        {
+          "value": "part-2",
+          "html": "<span class=\"govuk-heading-s govuk-!-margin-bottom-1\">Part 2 of the Housing Act 2004</span> For properties that are 3 or more stories high and occupied by 5 or more people"
+        },
+        {
+          "value": "part-3",
+          "html": "<span class=\"govuk-heading-s govuk-!-margin-bottom-1\">Part 3 of the Housing Act 2004</span> For properties that are within a geographical area defined by a local council"
+        }
+      ]
+    }) }}
+
+### Radios with a medium legend
+
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/with-a-medium-legend/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+
+      <fieldset class="govuk-fieldset" aria-describedby="housing-act-hint">
+
+      <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
+        Which part of the Housing Act was your licence issued under?
       </legend>
 
       <span id="housing-act-hint" class="govuk-hint">
@@ -254,14 +324,15 @@ Find out when to use the Radios component in your service in the [GOV.UK Design
 
 #### Macro
 
-    {% from 'radios/macro.njk' import govukRadios %}
+    {% from "radios/macro.njk" import govukRadios %}
 
     {{ govukRadios({
       "idPrefix": "housing-act",
       "name": "housing-act",
       "fieldset": {
         "legend": {
-          "html": "<h1 class=\"govuk-heading-l\">Which part of the Housing Act was your licence issued under?</h1>"
+          "text": "Which part of the Housing Act was your licence issued under?",
+          "classes": "govuk-fieldset__legend--m"
         }
       },
       "hint": {
@@ -279,9 +350,9 @@ Find out when to use the Radios component in your service in the [GOV.UK Design
       ]
     }) }}
 
-### Radios--without-fieldset
+### Radios without fieldset
 
-[Preview the radios--without-fieldset example](http://govuk-frontend-review.herokuapp.com/components/radios/without-fieldset/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/without-fieldset/preview)
 
 #### Markup
 
@@ -316,7 +387,7 @@ Find out when to use the Radios component in your service in the [GOV.UK Design
 
 #### Macro
 
-    {% from 'radios/macro.njk' import govukRadios %}
+    {% from "radios/macro.njk" import govukRadios %}
 
     {{ govukRadios({
       "name": "colours",
@@ -336,9 +407,9 @@ Find out when to use the Radios component in your service in the [GOV.UK Design
       ]
     }) }}
 
-### Radios--with-extreme-fieldset
+### Radios with all fieldset attributes
 
-[Preview the radios--with-extreme-fieldset example](http://govuk-frontend-review.herokuapp.com/components/radios/with-extreme-fieldset/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/with-all-fieldset-attributes/preview)
 
 #### Markup
 
@@ -381,7 +452,7 @@ Find out when to use the Radios component in your service in the [GOV.UK Design
 
 #### Macro
 
-    {% from 'radios/macro.njk' import govukRadios %}
+    {% from "radios/macro.njk" import govukRadios %}
 
     {{ govukRadios({
       "idPrefix": "example",