defra_ruby_template 3.13.0

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

@@ -0,0 +1,116 @@
+{% from "../error-message/macro.njk" import govukErrorMessage -%}
+{% from "../fieldset/macro.njk" import govukFieldset %}
+{% from "../hint/macro.njk" import govukHint %}
+{% from "../label/macro.njk" import govukLabel %}
+
+{#- If an id 'prefix' is not passed, fall back to using the name attribute
+   instead. We need this for error messages and hints as well -#}
+{% set idPrefix = params.idPrefix if params.idPrefix else params.name %}
+
+{#- a record of other elements that we need to associate with the input using
+   aria-describedby – for example hints or error messages -#}
+{% set describedBy = params.fieldset.describedBy if params.fieldset.describedBy else "" %}
+
+{% set isConditional = false %}
+{% for item in params.items %}
+  {% if item.conditional.html %}
+    {% set isConditional = true %}
+  {% endif %}
+{% endfor %}
+
+{#- Capture the HTML so we can optionally nest it in a fieldset -#}
+{% set innerHtml %}
+{% if params.hint %}
+  {% set hintId = idPrefix + '-hint' %}
+  {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
+  {{ govukHint({
+    id: hintId,
+    classes: params.hint.classes,
+    attributes: params.hint.attributes,
+    html: params.hint.html,
+    text: params.hint.text
+  }) | indent(2) | trim }}
+{% endif %}
+{% if params.errorMessage %}
+  {% set errorId = idPrefix + '-error' %}
+  {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
+  {{ govukErrorMessage({
+    id: errorId,
+    classes: params.errorMessage.classes,
+    attributes: params.errorMessage.attributes,
+    html: params.errorMessage.html,
+    text: params.errorMessage.text,
+    visuallyHiddenText: params.errorMessage.visuallyHiddenText
+  }) | indent(2) | trim }}
+{% endif %}
+  <div class="govuk-radios {%- if params.classes %} {{ params.classes }}{% endif %}{%- if isConditional %} govuk-radios--conditional{% endif -%}"
+    {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
+    {%- if isConditional %} data-module="govuk-radios"{% endif -%}>
+    {% for item in params.items %}
+      {% if item %}
+        {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
+        {%- if item.id -%}
+          {%- set id = item.id -%}
+        {%- else -%}
+          {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
+          {%- if loop.first -%}
+            {%- set id = idPrefix %}
+          {% else %}
+            {%- set id = idPrefix + "-" + loop.index -%}
+          {%- endif -%}
+        {%- endif -%}
+        {% set conditionalId = "conditional-" + id %}
+        {%- if item.divider %}
+        <div class="govuk-radios__divider">{{ item.divider }}</div>
+        {%- else %}
+        {% set hasHint = true if item.hint.text or item.hint.html %}
+        {% set itemHintId = id + '-item-hint' %}
+        <div class="govuk-radios__item">
+          <input class="govuk-radios__input" id="{{ id }}" name="{{ params.name }}" type="radio" value="{{ item.value }}"
+          {{-" checked" if item.checked }}
+          {{-" disabled" if item.disabled }}
+          {%- if item.conditional.html %} data-aria-controls="{{ conditionalId }}"{% endif -%}
+          {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
+          {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+          {{ govukLabel({
+            html: item.html,
+            text: item.text,
+            classes: 'govuk-radios__label' + (' ' + item.label.classes if item.label.classes),
+            attributes: item.label.attributes,
+            for: id
+          }) | indent(6) | trim }}
+          {% if hasHint %}
+          {{ govukHint({
+            id: itemHintId,
+            classes: 'govuk-radios__hint' + (' ' + item.hint.classes if item.hint.classes),
+            attributes: item.hint.attributes,
+            html: item.hint.html,
+            text: item.hint.text
+          }) | indent(6) | trim }}
+          {% endif %}
+        </div>
+        {% if item.conditional.html %}
+          <div class="govuk-radios__conditional{% if not item.checked %} govuk-radios__conditional--hidden{% endif %}" id="{{ conditionalId }}">
+            {{ item.conditional.html | safe }}
+          </div>
+        {% endif %}
+        {% endif %}
+      {% endif %}
+    {% endfor %}
+  </div>
+{% endset -%}
+
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+{% if params.fieldset %}
+  {% call govukFieldset({
+    describedBy: describedBy,
+    classes: params.fieldset.classes,
+    attributes: params.fieldset.attributes,
+    legend: params.fieldset.legend
+  }) %}
+  {{ innerHtml | trim | safe }}
+  {% endcall %}
+{% else %}
+  {{ innerHtml | trim | safe }}
+{% endif %}
+</div>

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

@@ -0,0 +1,15 @@
+# Select
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the select component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/select).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/select/#options-select-example) for details.

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

@@ -0,0 +1,49 @@
+@import "../error-message/index";
+@import "../hint/index";
+@import "../label/index";
+
+@include govuk-exports("govuk/component/select") {
+  .govuk-select {
+    @include govuk-font($size: 19, $line-height: 1.25);
+
+    box-sizing: border-box; // should this be global?
+    max-width: 100%;
+    height: 40px;
+    @if $govuk-typography-use-rem {
+      height: govuk-px-to-rem(40px);
+    }
+    padding: govuk-spacing(1); // was 5px 4px 4px - size of it should be adjusted to match other form elements
+    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+
+    &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      // Ensure outline appears outside of the element
+      outline-offset: 0;
+      // Double the border by adding its width again. Use `box-shadow` to do
+      // this instead of changing `border-width` (which changes element size) and
+      // since `outline` is already used for the yellow focus state.
+      box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+
+      @include govuk-if-ie8 {
+        // IE8 doesn't support `box-shadow` so double the border with
+        // `border-width`.
+        border-width: $govuk-border-width-form-element * 2;
+      }
+    }
+  }
+
+  .govuk-select option:active,
+  .govuk-select option:checked,
+  .govuk-select:focus::-ms-value {
+    color: govuk-colour("white");
+    background-color: govuk-colour("blue");
+  }
+
+  .govuk-select--error {
+    border: $govuk-border-width-form-element-error solid $govuk-error-colour;
+
+    &:focus {
+      border-color: $govuk-input-border-colour;
+    }
+  }
+}

data/node_modules/govuk-frontend/govuk/components/select/_select.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";

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

@@ -0,0 +1,327 @@
+{
+    "component": "select",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "id": "select-1",
+                "name": "select-1",
+                "label": {
+                    "text": "Label text goes here"
+                },
+                "items": [
+                    {
+                        "value": 1,
+                        "text": "GOV.UK frontend option 1"
+                    },
+                    {
+                        "value": 2,
+                        "text": "GOV.UK frontend option 2",
+                        "selected": true
+                    },
+                    {
+                        "value": 3,
+                        "text": "GOV.UK frontend option 3",
+                        "disabled": true
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-1\">\n    Label text goes here\n  </label>\n\n\n  <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\" selected>GOV.UK frontend option 2</option>\n    \n  \n    \n      <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n    \n  \n  </select>\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with hint text and error message",
+            "options": {
+                "id": "select-2",
+                "name": "select-2",
+                "label": {
+                    "text": "Label text goes here"
+                },
+                "hint": {
+                    "text": "Hint text goes here"
+                },
+                "errorMessage": {
+                    "text": "Error message goes here"
+                },
+                "items": [
+                    {
+                        "value": 1,
+                        "text": "GOV.UK frontend option 1"
+                    },
+                    {
+                        "value": 2,
+                        "text": "GOV.UK frontend option 2"
+                    },
+                    {
+                        "value": 3,
+                        "text": "GOV.UK frontend option 3"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"select-2\">\n    Label text goes here\n  </label>\n\n  \n  \n  <div id=\"select-2-hint\" class=\"govuk-hint\">\n    Hint text goes here\n  </div>\n\n\n  \n  \n  <span id=\"select-2-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </span>\n\n  <select class=\"govuk-select govuk-select--error\" id=\"select-2\" name=\"select-2\" aria-describedby=\"select-2-hint select-2-error\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\">GOV.UK frontend option 2</option>\n    \n  \n    \n      <option value=\"3\">GOV.UK frontend option 3</option>\n    \n  \n  </select>\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with label as page heading",
+            "options": {
+                "id": "select-3",
+                "name": "select-3",
+                "label": {
+                    "text": "Label text goes here",
+                    "isPageHeading": true
+                },
+                "items": [
+                    {
+                        "value": 1,
+                        "text": "GOV.UK frontend option 1"
+                    },
+                    {
+                        "value": 2,
+                        "text": "GOV.UK frontend option 2",
+                        "selected": true
+                    },
+                    {
+                        "value": 3,
+                        "text": "GOV.UK frontend option 3",
+                        "disabled": true
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\">\n    <label class=\"govuk-label\" for=\"select-3\">\n      Label text goes here\n    </label>\n    </h1>\n\n\n  <select class=\"govuk-select\" id=\"select-3\" name=\"select-3\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\" selected>GOV.UK frontend option 2</option>\n    \n  \n    \n      <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n    \n  \n  </select>\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with full width override",
+            "options": {
+                "id": "select-1",
+                "name": "select-1",
+                "classes": "govuk-!-width-full",
+                "label": {
+                    "text": "Label text goes here"
+                },
+                "items": [
+                    {
+                        "value": 1,
+                        "text": "GOV.UK frontend option 1"
+                    },
+                    {
+                        "value": 2,
+                        "text": "GOV.UK frontend option 2",
+                        "selected": true
+                    },
+                    {
+                        "value": 3,
+                        "text": "GOV.UK frontend option 3",
+                        "disabled": true
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"select-1\">\n    Label text goes here\n  </label>\n\n\n  <select class=\"govuk-select govuk-!-width-full\" id=\"select-1\" name=\"select-1\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\" selected>GOV.UK frontend option 2</option>\n    \n  \n    \n      <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n    \n  \n  </select>\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with optional form-group classes",
+            "options": {
+                "id": "select-1",
+                "name": "select-1",
+                "classes": "govuk-!-width-full",
+                "label": {
+                    "text": "Label text goes here"
+                },
+                "formGroup": {
+                    "classes": "extra-class"
+                },
+                "items": [
+                    {
+                        "value": 1,
+                        "text": "GOV.UK frontend option 1"
+                    },
+                    {
+                        "value": 2,
+                        "text": "GOV.UK frontend option 2",
+                        "selected": true
+                    },
+                    {
+                        "value": 3,
+                        "text": "GOV.UK frontend option 3",
+                        "disabled": true
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group extra-class\">\n  <label class=\"govuk-label\" for=\"select-1\">\n    Label text goes here\n  </label>\n\n\n  <select class=\"govuk-select govuk-!-width-full\" id=\"select-1\" name=\"select-1\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\" selected>GOV.UK frontend option 2</option>\n    \n  \n    \n      <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n    \n  \n  </select>\n</div>",
+            "hidden": false
+        },
+        {
+            "name": "with describedBy",
+            "options": {
+                "id": "with-describedby",
+                "name": "with-describedby",
+                "items": [
+                    {
+                        "value": 1,
+                        "text": "GOV.UK frontend option 1"
+                    },
+                    {
+                        "value": 2,
+                        "text": "GOV.UK frontend option 2"
+                    }
+                ],
+                "describedBy": "some-id"
+            },
+            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <select class=\"govuk-select\" id=\"with-describedby\" name=\"with-describedby\" aria-describedby=\"some-id\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\">GOV.UK frontend option 2</option>\n    \n  \n  </select>\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "id": "with-attributes",
+                "name": "with-attributes",
+                "items": [
+                    {
+                        "value": 1,
+                        "text": "GOV.UK frontend option 1"
+                    },
+                    {
+                        "value": 2,
+                        "text": "GOV.UK frontend option 2"
+                    }
+                ],
+                "attributes": {
+                    "data-attribute": "my data value"
+                }
+            },
+            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <select class=\"govuk-select\" id=\"with-attributes\" name=\"with-attributes\" data-attribute=\"my data value\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\">GOV.UK frontend option 2</option>\n    \n  \n  </select>\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "attributes on items",
+            "options": {
+                "id": "with-item-attributes",
+                "name": "with-item-attributes",
+                "value": 2,
+                "items": [
+                    {
+                        "text": "Option 1",
+                        "value": 1,
+                        "attributes": {
+                            "data-attribute": "ABC",
+                            "data-second-attribute": "DEF"
+                        }
+                    },
+                    {
+                        "text": "Option 2",
+                        "value": 2,
+                        "attributes": {
+                            "data-attribute": "GHI",
+                            "data-second-attribute": "JKL"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <select class=\"govuk-select\" id=\"with-item-attributes\" name=\"with-item-attributes\">\n  \n    \n      <option value=\"1\" data-attribute=\"ABC\" data-second-attribute=\"DEF\">Option 1</option>\n    \n  \n    \n      <option value=\"2\" data-attribute=\"GHI\" data-second-attribute=\"JKL\">Option 2</option>\n    \n  \n  </select>\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "with falsey values",
+            "options": {
+                "id": "with-falsey-values",
+                "name": "with-falsey-values",
+                "items": [
+                    {
+                        "text": "Option 1",
+                        "value": 1
+                    },
+                    null,
+                    false,
+                    "",
+                    {
+                        "text": "Options 2",
+                        "value": 2
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group\">\n  \n\n\n  <select class=\"govuk-select\" id=\"with-falsey-values\" name=\"with-falsey-values\">\n  \n    \n      <option value=\"1\">Option 1</option>\n    \n  \n    \n  \n    \n  \n    \n  \n    \n      <option value=\"2\">Options 2</option>\n    \n  \n  </select>\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "hint",
+            "options": {
+                "id": "select-with-hint",
+                "name": "select-with-hint",
+                "hint": {
+                    "text": "Hint text goes here"
+                }
+            },
+            "html": "<div class=\"govuk-form-group\">\n  \n\n  \n  \n  <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n    Hint text goes here\n  </div>\n\n\n  <select class=\"govuk-select\" id=\"select-with-hint\" name=\"select-with-hint\" aria-describedby=\"select-with-hint-hint\">\n  \n  </select>\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "hint and describedBy",
+            "options": {
+                "id": "select-with-hint",
+                "name": "select-with-hint",
+                "describedBy": "some-id",
+                "hint": {
+                    "text": "Hint text goes here"
+                },
+                "items": [
+                    {
+                        "value": 1,
+                        "text": "GOV.UK frontend option 1"
+                    },
+                    {
+                        "value": 2,
+                        "text": "GOV.UK frontend option 2"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group\">\n  \n\n  \n  \n  <div id=\"select-with-hint-hint\" class=\"govuk-hint\">\n    Hint text goes here\n  </div>\n\n\n  <select class=\"govuk-select\" id=\"select-with-hint\" name=\"select-with-hint\" aria-describedby=\"some-id select-with-hint-hint\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\">GOV.UK frontend option 2</option>\n    \n  \n  </select>\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "error",
+            "options": {
+                "id": "select-with-error",
+                "name": "select-with-error",
+                "errorMessage": {
+                    "text": "Error message"
+                },
+                "items": [
+                    {
+                        "value": 1,
+                        "text": "GOV.UK frontend option 1"
+                    },
+                    {
+                        "value": 2,
+                        "text": "GOV.UK frontend option 2"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n\n  \n  \n  <span id=\"select-with-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"select-with-error-error\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\">GOV.UK frontend option 2</option>\n    \n  \n  </select>\n</div>",
+            "hidden": true
+        },
+        {
+            "name": "error and describedBy",
+            "options": {
+                "id": "select-with-error",
+                "name": "select-with-error",
+                "describedBy": "some-id",
+                "errorMessage": {
+                    "text": "Error message"
+                },
+                "items": [
+                    {
+                        "value": 1,
+                        "text": "GOV.UK frontend option 1"
+                    },
+                    {
+                        "value": 2,
+                        "text": "GOV.UK frontend option 2"
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  \n\n\n  \n  \n  <span id=\"select-with-error-error\" class=\"govuk-error-message\">\n    <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </span>\n\n  <select class=\"govuk-select govuk-select--error\" id=\"select-with-error\" name=\"select-with-error\" aria-describedby=\"some-id select-with-error-error\">\n  \n    \n      <option value=\"1\">GOV.UK frontend option 1</option>\n    \n  \n    \n      <option value=\"2\">GOV.UK frontend option 2</option>\n    \n  \n  </select>\n</div>",
+            "hidden": true
+        }
+    ]
+}