govuk_publishing_components 9.5.1 → 9.5.2

data/node_modules/govuk-frontend/components/header/_header.scss

@@ -34,6 +34,7 @@
   }
 
   .govuk-header__container {
+    @include govuk-clearfix;
     position: relative;
     margin-bottom: -$govuk-header-border-width;
     padding-top: govuk-spacing(2);
@@ -122,17 +123,17 @@
     padding-right: govuk-spacing(8);
 
     @include mq ($from: desktop) {
-      display: inline-block;
       width: 33.33%;
       padding-right: 0;
+      float: left;
       vertical-align: top;
     }
   }
 
   .govuk-header__content {
     @include mq ($from: desktop) {
-      display: inline-block;
       width: 66.66%;
+      float: left;
     }
   }
 

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

@@ -52,9 +52,11 @@
         </span>
         {% endif %}
       </a>
-    </div><div class="govuk-header__content">
+    </div>
+    {% if params.serviceName or params.navigation  %}
+    <div class="govuk-header__content">
 
-    {% if (params.serviceName) %}
+    {% if params.serviceName %}
     <a href="{{ params.serviceUrl }}" class="govuk-header__link govuk-header__link--service-name">
       {{ params.serviceName }}
     </a>
@@ -76,7 +78,7 @@
       </ul>
     </nav>
     {% endif %}
-
     </div>
+    {% endif %}
   </div>
 </header>

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

@@ -6,40 +6,44 @@ Use hint text for supporting contextual help
 
 ## Quick start examples
 
-### Component default
+### Hint
 
-[Preview the hint component](http://govuk-frontend-review.herokuapp.com/components/hint/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/hint/preview)
 
 #### Markup
 
     <span class="govuk-hint">
-      It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
+      It’s on your National Insurance card, benefit letter, payslip or P60.
+    For example, ‘QQ 12 34 56 C’.
+
     </span>
 
 #### Macro
 
-    {% from 'hint/macro.njk' import govukHint %}
+    {% from "hint/macro.njk" import govukHint %}
 
     {{ govukHint({
-      "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
+      "text": "It’s on your National Insurance card, benefit letter, payslip or P60.\nFor example, ‘QQ 12 34 56 C’.\n"
     }) }}
 
-### Hint--with html
+### Hint with html
 
-[Preview the hint--with html example](http://govuk-frontend-review.herokuapp.com/components/hint/with html/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/hint/with-html/preview)
 
 #### Markup
 
     <span class="govuk-hint">
-      It’s on your National Insurance card, benefit letter, payslip or <a class="govuk-link" href="#">P60</a>. For example, ‘QQ 12 34 56 C’.
+      It’s on your National Insurance card, benefit letter, payslip or <a class="govuk-link" href="#">P60</a>.
+    For example, ‘QQ 12 34 56 C’.
+
     </span>
 
 #### Macro
 
-    {% from 'hint/macro.njk' import govukHint %}
+    {% from "hint/macro.njk" import govukHint %}
 
     {{ govukHint({
-      "html": "It’s on your National Insurance card, benefit letter, payslip or <a class=\"govuk-link\" href=\"#\">P60</a>. For example, ‘QQ 12 34 56 C’."
+      "html": "It’s on your National Insurance card, benefit letter, payslip or <a class=\"govuk-link\" href=\"#\">P60</a>.\nFor example, ‘QQ 12 34 56 C’.\n"
     }) }}
 
 ## Requirements

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

@@ -6,13 +6,13 @@ A single-line text field.
 
 ## Guidance
 
-Find out when to use the Input component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/text-input).
+Find out when to use the input component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/text-input).
 
 ## Quick start examples
 
-### Component default
+### Input
 
-[Preview the input component](http://govuk-frontend-review.herokuapp.com/components/input/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/preview)
 
 #### Markup
 
@@ -26,7 +26,7 @@ Find out when to use the Input component in your service in the [GOV.UK Design S
 
 #### Macro
 
-    {% from 'input/macro.njk' import govukInput %}
+    {% from "input/macro.njk" import govukInput %}
 
     {{ govukInput({
       "label": {
@@ -36,9 +36,9 @@ Find out when to use the Input component in your service in the [GOV.UK Design S
       "name": "test-name"
     }) }}
 
-### Input--with-hint-text
+### Input with hint text
 
-[Preview the input--with-hint-text example](http://govuk-frontend-review.herokuapp.com/components/input/with-hint-text/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-hint-text/preview)
 
 #### Markup
 
@@ -56,7 +56,7 @@ Find out when to use the Input component in your service in the [GOV.UK Design S
 
 #### Macro
 
-    {% from 'input/macro.njk' import govukInput %}
+    {% from "input/macro.njk" import govukInput %}
 
     {{ govukInput({
       "label": {
@@ -69,9 +69,9 @@ Find out when to use the Input component in your service in the [GOV.UK Design S
       "name": "test-name-2"
     }) }}
 
-### Input--with-error-message
+### Input with error message
 
-[Preview the input--with-error-message example](http://govuk-frontend-review.herokuapp.com/components/input/with-error-message/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-error-message/preview)
 
 #### Markup
 
@@ -81,7 +81,7 @@ Find out when to use the Input component in your service in the [GOV.UK Design S
       </label>
 
       <span id="input-with-error-message-hint" class="govuk-hint">
-        It’s on your <i>National Insurance card</i>, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
+        It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
       </span>
 
       <span id="input-with-error-message-error" class="govuk-error-message">
@@ -93,14 +93,14 @@ Find out when to use the Input component in your service in the [GOV.UK Design S
 
 #### Macro
 
-    {% from 'input/macro.njk' import govukInput %}
+    {% from "input/macro.njk" import govukInput %}
 
     {{ govukInput({
       "label": {
         "text": "National Insurance number"
       },
       "hint": {
-        "html": "It’s on your <i>National Insurance card</i>, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
+        "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
       },
       "id": "input-with-error-message",
       "name": "test-name-3",
@@ -109,9 +109,145 @@ Find out when to use the Input component in your service in the [GOV.UK Design S
       }
     }) }}
 
-### Input--width-10
+### Input with width-2 class
+
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-2-class/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+      <label class="govuk-label" for="input-width-2">
+        National insurance number
+      </label>
+
+      <span id="input-width-2-hint" class="govuk-hint">
+        It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
+      </span>
+
+      <input class="govuk-input govuk-input--width-2" id="input-width-2" name="test-width-2" type="text" aria-describedby="input-width-2-hint">
+    </div>
+
+#### Macro
+
+    {% from "input/macro.njk" import govukInput %}
+
+    {{ govukInput({
+      "label": {
+        "text": "National insurance number"
+      },
+      "hint": {
+        "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
+      },
+      "id": "input-width-2",
+      "name": "test-width-2",
+      "classes": "govuk-input--width-2"
+    }) }}
+
+### Input with width-3 class
+
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-3-class/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+      <label class="govuk-label" for="input-width-3">
+        National insurance number
+      </label>
+
+      <span id="input-width-3-hint" class="govuk-hint">
+        It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
+      </span>
+
+      <input class="govuk-input govuk-input--width-3" id="input-width-3" name="test-width-3" type="text" aria-describedby="input-width-3-hint">
+    </div>
+
+#### Macro
+
+    {% from "input/macro.njk" import govukInput %}
+
+    {{ govukInput({
+      "label": {
+        "text": "National insurance number"
+      },
+      "hint": {
+        "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
+      },
+      "id": "input-width-3",
+      "name": "test-width-3",
+      "classes": "govuk-input--width-3"
+    }) }}
+
+### Input with width-4 class
+
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-4-class/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+      <label class="govuk-label" for="input-width-4">
+        National insurance number
+      </label>
+
+      <span id="input-width-4-hint" class="govuk-hint">
+        It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
+      </span>
+
+      <input class="govuk-input govuk-input--width-4" id="input-width-4" name="test-width-4" type="text" aria-describedby="input-width-4-hint">
+    </div>
+
+#### Macro
+
+    {% from "input/macro.njk" import govukInput %}
+
+    {{ govukInput({
+      "label": {
+        "text": "National insurance number"
+      },
+      "hint": {
+        "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
+      },
+      "id": "input-width-4",
+      "name": "test-width-4",
+      "classes": "govuk-input--width-4"
+    }) }}
+
+### Input with width-5 class
+
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-5-class/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+      <label class="govuk-label" for="input-width-5">
+        National insurance number
+      </label>
+
+      <span id="input-width-5-hint" class="govuk-hint">
+        It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
+      </span>
+
+      <input class="govuk-input govuk-input--width-5" id="input-width-5" name="test-width-5" type="text" aria-describedby="input-width-5-hint">
+    </div>
+
+#### Macro
+
+    {% from "input/macro.njk" import govukInput %}
+
+    {{ govukInput({
+      "label": {
+        "text": "National insurance number"
+      },
+      "hint": {
+        "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
+      },
+      "id": "input-width-5",
+      "name": "test-width-5",
+      "classes": "govuk-input--width-5"
+    }) }}
+
+### Input with width-10 class
 
-[Preview the input--width-10 example](http://govuk-frontend-review.herokuapp.com/components/input/width-10/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-10-class/preview)
 
 #### Markup
 
@@ -124,12 +260,12 @@ Find out when to use the Input component in your service in the [GOV.UK Design S
         It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
       </span>
 
-      <input class="govuk-input govuk-input--width-10" id="input-width-10" name="test-name-4" type="text" aria-describedby="input-width-10-hint">
+      <input class="govuk-input govuk-input--width-10" id="input-width-10" name="test-width-10" type="text" aria-describedby="input-width-10-hint">
     </div>
 
 #### Macro
 
-    {% from 'input/macro.njk' import govukInput %}
+    {% from "input/macro.njk" import govukInput %}
 
     {{ govukInput({
       "label": {
@@ -139,13 +275,13 @@ Find out when to use the Input component in your service in the [GOV.UK Design S
         "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
       },
       "id": "input-width-10",
-      "name": "test-name-4",
+      "name": "test-width-10",
       "classes": "govuk-input--width-10"
     }) }}
 
-### Input--width-20
+### Input with width-20 class
 
-[Preview the input--width-20 example](http://govuk-frontend-review.herokuapp.com/components/input/width-20/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-20-class/preview)
 
 #### Markup
 
@@ -158,12 +294,12 @@ Find out when to use the Input component in your service in the [GOV.UK Design S
         It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
       </span>
 
-      <input class="govuk-input govuk-input--width-20" id="input-width-20" name="test-name-5" type="text" aria-describedby="input-width-20-hint">
+      <input class="govuk-input govuk-input--width-20" id="input-width-20" name="test-width-20" type="text" aria-describedby="input-width-20-hint">
     </div>
 
 #### Macro
 
-    {% from 'input/macro.njk' import govukInput %}
+    {% from "input/macro.njk" import govukInput %}
 
     {{ govukInput({
       "label": {
@@ -173,13 +309,13 @@ Find out when to use the Input component in your service in the [GOV.UK Design S
         "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
       },
       "id": "input-width-20",
-      "name": "test-name-5",
+      "name": "test-width-20",
       "classes": "govuk-input--width-20"
     }) }}
 
-### Input--width-30
+### Input with width-30 class
 
-[Preview the input--width-30 example](http://govuk-frontend-review.herokuapp.com/components/input/width-30/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-30-class/preview)
 
 #### Markup
 
@@ -192,12 +328,12 @@ Find out when to use the Input component in your service in the [GOV.UK Design S
         It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
       </span>
 
-      <input class="govuk-input govuk-input--width-30" id="input-width-30" name="test-name-6" type="text" aria-describedby="input-width-30-hint">
+      <input class="govuk-input govuk-input--width-30" id="input-width-30" name="test-width-30" type="text" aria-describedby="input-width-30-hint">
     </div>
 
 #### Macro
 
-    {% from 'input/macro.njk' import govukInput %}
+    {% from "input/macro.njk" import govukInput %}
 
     {{ govukInput({
       "label": {
@@ -207,13 +343,13 @@ Find out when to use the Input component in your service in the [GOV.UK Design S
         "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
       },
       "id": "input-width-30",
-      "name": "test-name-6",
+      "name": "test-width-30",
       "classes": "govuk-input--width-30"
     }) }}
 
-### Input--with-label-as-page-heading
+### Input with label as page heading
 
-[Preview the input--with-label-as-page-heading example](http://govuk-frontend-review.herokuapp.com/components/input/with-label-as-page-heading/preview)
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-label-as-page-heading/preview)
 
 #### Markup
 
@@ -230,7 +366,7 @@ Find out when to use the Input component in your service in the [GOV.UK Design S
 
 #### Macro
 
-    {% from 'input/macro.njk' import govukInput %}
+    {% from "input/macro.njk" import govukInput %}
 
     {{ govukInput({
       "label": {

data/node_modules/govuk-frontend/components/input/_input.scss

@@ -46,17 +46,34 @@
 
   // The ex measurements are based on the number of W's that can fit inside the input
   // Extra space is left on the right hand side to allow for the Safari prefill icon
+  // Linear regression estimation based on visual tests: y = 1.76 + 1.81x
 
   .govuk-input--width-30 {
-    max-width: 60ex;
+    max-width: 56ex + 3ex;
   }
 
   .govuk-input--width-20 {
-    max-width: 41ex;
+    max-width: 38ex + 3ex;
   }
 
   .govuk-input--width-10 {
-    max-width: 23ex;
+    max-width: 20ex + 3ex;
+  }
+
+  .govuk-input--width-5 {
+    max-width: 10.8ex;
+  }
+
+  .govuk-input--width-4 {
+    max-width: 9ex;
+  }
+
+  .govuk-input--width-3 {
+    max-width: 7.2ex;
+  }
+
+  .govuk-input--width-2 {
+    max-width: 5.4ex;
   }
 
 }