govuk_publishing_components 23.3.0 → 23.7.0

data/node_modules/govuk-frontend/govuk/components/input/macro-options.json

@@ -56,6 +56,70 @@
         "description": "Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.",
         "isComponent": true
     },
+    {
+        "name": "prefix",
+        "type": "object",
+        "required": false,
+        "description": "Options for the prefix element.",
+        "params": [
+            {
+                "name": "text",
+                "type": "string",
+                "required": true,
+                "description": "Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored."
+            },
+            {
+                "name": "html",
+                "type": "string",
+                "required": true,
+                "description": "Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored."
+            },
+            {
+                "name": "classes",
+                "type": "string",
+                "required": false,
+                "description": "Classes to add to the prefix."
+            },
+            {
+                "name": "attributes",
+                "type": "object",
+                "required": false,
+                "description": "HTML attributes (for example data attributes) to add to the prefix element."
+            }
+        ]
+    },
+    {
+        "name": "suffix",
+        "type": "object",
+        "required": false,
+        "description": "Options for the suffix element.",
+        "params": [
+            {
+                "name": "text",
+                "type": "string",
+                "required": true,
+                "description": "Required. If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored."
+            },
+            {
+                "name": "html",
+                "type": "string",
+                "required": true,
+                "description": "Required. If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored."
+            },
+            {
+                "name": "classes",
+                "type": "string",
+                "required": false,
+                "description": "Classes to add to the suffix element."
+            },
+            {
+                "name": "attributes",
+                "type": "object",
+                "required": false,
+                "description": "HTML attributes (for example data attributes) to add to the suffix element."
+            }
+        ]
+    },
     {
         "name": "formGroup",
         "type": "object",

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

@@ -37,6 +37,15 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | indent(2) | trim }}
 {% endif %}
+
+{%- if params.prefix or params.suffix %}<div class="govuk-input__wrapper">{% endif -%}
+
+  {%- if params.prefix.text or params.prefix.html %}
+    <div class="govuk-input__prefix {{- ' ' + params.prefix.classes if params.prefix.classes }}" aria-hidden="true" {%- for attribute, value in params.prefix.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      {{- params.prefix.html | safe if params.prefix.html else params.prefix.text -}}
+    </div>
+  {% endif -%}
+
   <input class="govuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
   {%- if (params.spellcheck === false) or (params.spellcheck === true) %} spellcheck="{{ params.spellcheck }}"{% endif %}
   {%- if params.value %} value="{{ params.value}}"{% endif %}
@@ -45,4 +54,12 @@
   {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
   {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+
+  {%- if params.suffix.text or params.suffix.html %}
+    <div class="govuk-input__suffix {{- ' ' + params.suffix.classes if params.suffix.classes }}" aria-hidden="true" {%- for attribute, value in params.suffix.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      {{- params.suffix.html | safe if params.suffix.html else params.suffix.text -}}
+    </div>
+  {% endif -%}
+
+{%- if params.prefix or params.suffix %}</div>{% endif %}
 </div>

data/node_modules/govuk-frontend/govuk/components/inset-text/fixtures.json

@@ -0,0 +1,49 @@
+{
+    "component": "inset-text",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
+            },
+            "html": "<div class=\"govuk-inset-text\">\n  It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.\n</div>"
+        },
+        {
+            "name": "with html",
+            "options": {
+                "html": "<p class=\"govuk-body\">It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.</p>\n<div class=\"govuk-warning-text\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-warning-text__assistive\">Warning</span>\n    You can be fined up to £5,000 if you don’t register.\n  </strong>\n</div>\n<p class=\"govuk-body\">It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.</p>\n"
+            },
+            "html": "<div class=\"govuk-inset-text\">\n  <p class=\"govuk-body\">It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.</p>\n<div class=\"govuk-warning-text\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-warning-text__assistive\">Warning</span>\n    You can be fined up to £5,000 if you don’t register.\n  </strong>\n</div>\n<p class=\"govuk-body\">It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.</p>\n\n</div>"
+        },
+        {
+            "name": "classes",
+            "options": {
+                "classes": "app-inset-text--custom-modifier"
+            },
+            "html": "<div class=\"govuk-inset-text app-inset-text--custom-modifier\">\n  \n</div>"
+        },
+        {
+            "name": "id",
+            "options": {
+                "id": "my-inset-text"
+            },
+            "html": "<div id=\"my-inset-text\" class=\"govuk-inset-text\">\n  \n</div>"
+        },
+        {
+            "name": "html as text",
+            "options": {
+                "text": "It can take <b>up to 8 weeks</b> to register a lasting power of attorney if there are no mistakes in the application."
+            },
+            "html": "<div class=\"govuk-inset-text\">\n  It can take &lt;b&gt;up to 8 weeks&lt;/b&gt; to register a lasting power of attorney if there are no mistakes in the application.\n</div>"
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "attributes": {
+                    "data-attribute": "my data value"
+                }
+            },
+            "html": "<div class=\"govuk-inset-text\" data-attribute=\"my data value\">\n  \n</div>"
+        }
+    ]
+}

data/node_modules/govuk-frontend/govuk/components/label/fixtures.json

@@ -0,0 +1,75 @@
+{
+    "component": "label",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "text": "National Insurance number"
+            },
+            "html": "<label class=\"govuk-label\">\n  National Insurance number\n</label>"
+        },
+        {
+            "name": "with bold text",
+            "options": {
+                "classes": "govuk-label--s",
+                "text": "National Insurance number"
+            },
+            "html": "<label class=\"govuk-label govuk-label--s\">\n  National Insurance number\n</label>"
+        },
+        {
+            "name": "as page heading",
+            "options": {
+                "text": "National Insurance number",
+                "classes": "govuk-label--xl",
+                "isPageHeading": true
+            },
+            "html": "<h1 class=\"govuk-label-wrapper\">\n  <label class=\"govuk-label govuk-label--xl\">\n    National Insurance number\n  </label>\n  </h1>"
+        },
+        {
+            "name": "empty",
+            "options": {},
+            "html": ""
+        },
+        {
+            "name": "classes",
+            "options": {
+                "text": "National Insurance number",
+                "classes": "extra-class one-more-class"
+            },
+            "html": "<label class=\"govuk-label extra-class one-more-class\">\n  National Insurance number\n</label>"
+        },
+        {
+            "name": "html as text",
+            "options": {
+                "text": "National Insurance number, <em>NINO</em>"
+            },
+            "html": "<label class=\"govuk-label\">\n  National Insurance number, &lt;em&gt;NINO&lt;/em&gt;\n</label>"
+        },
+        {
+            "name": "html",
+            "options": {
+                "html": "National Insurance number <em>NINO</em>"
+            },
+            "html": "<label class=\"govuk-label\">\n  National Insurance number <em>NINO</em>\n</label>"
+        },
+        {
+            "name": "for",
+            "options": {
+                "for": "#dummy-input",
+                "text": "National Insurance number"
+            },
+            "html": "<label class=\"govuk-label\" for=\"#dummy-input\">\n  National Insurance number\n</label>"
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "text": "National Insurance number",
+                "attributes": {
+                    "first-attribute": "true",
+                    "second-attribute": "false"
+                }
+            },
+            "html": "<label class=\"govuk-label\" first-attribute=\"true\" second-attribute=\"false\">\n  National Insurance number\n</label>"
+        }
+    ]
+}

data/node_modules/govuk-frontend/govuk/components/panel/_index.scss

@@ -1,5 +1,4 @@
 @include govuk-exports("govuk/component/panel") {
-
   .govuk-panel {
     @include govuk-font($size: 19);
 
@@ -20,6 +19,12 @@
   .govuk-panel--confirmation {
     color: govuk-colour("white");
     background: govuk-colour("green", $legacy: "turquoise");
+
+    @include govuk-media-query($media-type: print) {
+      border-color: currentColor;
+      color: $govuk-print-text-colour;
+      background: none;
+    }
   }
 
   .govuk-panel__title {
@@ -36,5 +41,4 @@
   .govuk-panel__body {
     @include govuk-font($size: 36);
   }
-
 }

data/node_modules/govuk-frontend/govuk/components/panel/fixtures.json

@@ -0,0 +1,74 @@
+{
+    "component": "panel",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "titleHtml": "Application complete",
+                "text": "Your reference number: HDJ2123F"
+            },
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  \n  <div class=\"govuk-panel__body\">\n    Your reference number: HDJ2123F\n  </div>\n  \n</div>"
+        },
+        {
+            "name": "custom heading level",
+            "options": {
+                "titleText": "Application complete",
+                "headingLevel": 2,
+                "text": "Your reference number: HDJ2123F"
+            },
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h2 class=\"govuk-panel__title\">\n    Application complete\n  </h2>\n  \n  <div class=\"govuk-panel__body\">\n    Your reference number: HDJ2123F\n  </div>\n  \n</div>"
+        },
+        {
+            "name": "title html as text",
+            "options": {
+                "titleText": "Application <strong>not</strong> complete"
+            },
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application &lt;strong&gt;not&lt;/strong&gt; complete\n  </h1>\n  \n</div>"
+        },
+        {
+            "name": "title html",
+            "options": {
+                "titleHtml": "Application <strong>not</strong> complete"
+            },
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application <strong>not</strong> complete\n  </h1>\n  \n</div>"
+        },
+        {
+            "name": "body html as text",
+            "options": {
+                "text": "Your reference number<br><strong>HDJ2123F</strong>"
+            },
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    \n  </h1>\n  \n  <div class=\"govuk-panel__body\">\n    Your reference number&lt;br&gt;&lt;strong&gt;HDJ2123F&lt;/strong&gt;\n  </div>\n  \n</div>"
+        },
+        {
+            "name": "body html",
+            "options": {
+                "html": "Your reference number<br><strong>HDJ2123F</strong>"
+            },
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    \n  </h1>\n  \n  <div class=\"govuk-panel__body\">\n    Your reference number<br><strong>HDJ2123F</strong>\n  </div>\n  \n</div>"
+        },
+        {
+            "name": "classes",
+            "options": {
+                "classes": "extra-class one-more-class"
+            },
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation extra-class one-more-class\">\n  <h1 class=\"govuk-panel__title\">\n    \n  </h1>\n  \n</div>"
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "attributes": {
+                    "first-attribute": true,
+                    "second-attribute": false
+                }
+            },
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation\" first-attribute=\"true\" second-attribute=\"false\">\n  <h1 class=\"govuk-panel__title\">\n    \n  </h1>\n  \n</div>"
+        },
+        {
+            "name": "title with no body text",
+            "options": {
+                "titleText": "Application complete"
+            },
+            "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n  <h1 class=\"govuk-panel__title\">\n    Application complete\n  </h1>\n  \n</div>"
+        }
+    ]
+}

data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json

@@ -0,0 +1,65 @@
+{
+    "component": "phase-banner",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "tag": {
+                    "text": "alpha"
+                },
+                "html": "This is a new service - your <a href=\"#\" class=\"govuk-link\">feedback</a> will help us to improve it."
+            },
+            "html": "<div class=\"govuk-phase-banner\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n      alpha\n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      This is a new service - your <a href=\"#\" class=\"govuk-link\">feedback</a> will help us to improve it.\n    </span>\n  </p>\n</div>"
+        },
+        {
+            "name": "classes",
+            "options": {
+                "classes": "extra-class one-more-class"
+            },
+            "html": "<div class=\"govuk-phase-banner extra-class one-more-class\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n      \n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      \n    </span>\n  </p>\n</div>"
+        },
+        {
+            "name": "text",
+            "options": {
+                "text": "This is a new service – your feedback will help us to improve it"
+            },
+            "html": "<div class=\"govuk-phase-banner\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n      \n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      This is a new service – your feedback will help us to improve it\n    </span>\n  </p>\n</div>"
+        },
+        {
+            "name": "html as text",
+            "options": {
+                "text": "This is a new service - your <a href=\"#\" class=\"govuk-link\">feedback</a> will help us to improve it."
+            },
+            "html": "<div class=\"govuk-phase-banner\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n      \n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      This is a new service - your &lt;a href=&quot;#&quot; class=&quot;govuk-link&quot;&gt;feedback&lt;/a&gt; will help us to improve it.\n    </span>\n  </p>\n</div>"
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "attributes": {
+                    "first-attribute": true,
+                    "second-attribute": false
+                }
+            },
+            "html": "<div class=\"govuk-phase-banner\" first-attribute=\"true\" second-attribute=\"false\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n      \n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      \n    </span>\n  </p>\n</div>"
+        },
+        {
+            "name": "tag html",
+            "options": {
+                "tag": {
+                    "html": "<em>alpha</em>"
+                }
+            },
+            "html": "<div class=\"govuk-phase-banner\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n      <em>alpha</em>\n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      \n    </span>\n  </p>\n</div>"
+        },
+        {
+            "name": "tag classes",
+            "options": {
+                "tag": {
+                    "classes": "govuk-tag--inactive",
+                    "text": "alpha"
+                }
+            },
+            "html": "<div class=\"govuk-phase-banner\">\n  <p class=\"govuk-phase-banner__content\">\n    <strong class=\"govuk-tag govuk-phase-banner__content__tag govuk-tag--inactive\">\n      alpha\n    </strong>\n    <span class=\"govuk-phase-banner__text\">\n      \n    </span>\n  </p>\n</div>"
+        }
+    ]
+}

data/node_modules/govuk-frontend/govuk/components/radios/_index.scss

@@ -77,7 +77,7 @@
   }
 
   // ( ) Radio ring
-  .govuk-radios__label::before {
+  .govuk-radios__label:before {
     content: "";
     box-sizing: border-box;
     position: absolute;
@@ -96,7 +96,7 @@
   //
   // We create the 'button' entirely out of 'border' so that they remain
   // 'filled' even when colours are overridden in the browser.
-  .govuk-radios__label::after {
+  .govuk-radios__label:after {
     content: "";
 
     position: absolute;
@@ -119,13 +119,13 @@
   }
 
   // Focused state
-  .govuk-radios__input:focus + .govuk-radios__label::before {
+  .govuk-radios__input:focus + .govuk-radios__label:before {
     border-width: 4px;
     box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
   }
 
   // Selected state
-  .govuk-radios__input:checked + .govuk-radios__label::after {
+  .govuk-radios__input:checked + .govuk-radios__label:after {
     opacity: 1;
   }
 
@@ -260,7 +260,7 @@
     //
     // Reduce the size of the control [1], vertically centering it within the
     // touch target [2]
-    .govuk-radios__label::before {
+    .govuk-radios__label:before {
       top: $input-offset - $govuk-border-width-form-element; // 2
       width: $govuk-small-radios-size; // 1
       height: $govuk-small-radios-size; // 1
@@ -269,7 +269,7 @@
     //  •  Radio button
     //
     // Reduce the size of the 'button' and center it within the ring
-    .govuk-radios__label::after {
+    .govuk-radios__label:after {
       top: 15px;
       left: 7px;
       border-width: 5px;
@@ -308,7 +308,7 @@
     // is so much larger than their visible size, and so we need to provide
     // feedback to the user as to which radio they will select when their
     // cursor is outside of the visible area.
-    .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
+    .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label:before {
       box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
     }
 
@@ -317,10 +317,10 @@
     //
     // We use two box shadows, one that restores the original focus state [1]
     // and another that then applies the hover state [2].
-    .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
-      // sass-lint:disable indentation
-      box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour, // 1
-                  0 0 0 $govuk-hover-width        $govuk-hover-colour; // 2
+    .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label:before {
+      box-shadow:
+        0 0 0 $govuk-radios-focus-width $govuk-focus-colour, // 1
+        0 0 0 $govuk-hover-width        $govuk-hover-colour; // 2
     }
 
     // For devices that explicitly don't support hover, don't provide a hover
@@ -330,11 +330,11 @@
     // state in browsers that don't support `@media (hover)` (like Internet
     // Explorer) – so we have to 'undo' the hover state instead.
     @media (hover: none), (pointer: coarse) {
-      .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
+      .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label:before {
         box-shadow: initial;
       }
 
-      .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
+      .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label:before {
         box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
       }
     }