govuk_publishing_components 13.6.0 → 13.6.1

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

@@ -0,0 +1,70 @@
+[
+    {
+        "name": "id",
+        "type": "string",
+        "required": true,
+        "description": "Must be **unique** across the domain of your service (as the expanded state of individual instances of the component persists across page loads using [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)). Used as an `id` in the HTML for the accordion as a whole, and also as a prefix for the `id`s of the section contents and the buttons that open them, so that those `id`s can be the target of `aria-labelledby` and `aria-control` attributes."
+    },
+    {
+        "name": "headingLevel",
+        "type": "integer",
+        "required": false,
+        "description": "Heading level, from 1 to 6. Default is `2`."
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the accordion."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the accordion."
+    },
+    {
+        "name": "items",
+        "type": "array",
+        "required": true,
+        "description": "An array of sections within the accordion.",
+        "params": [
+            {
+                "name": "heading.text",
+                "type": "string",
+                "required": false,
+                "description": "The title of each section. If `heading.html` is supplied, this is ignored. This is used both as the title for each section, and as the button to open or close each section."
+            },
+            {
+                "name": "heading.html",
+                "type": "string",
+                "required": false,
+                "description": "The HTML content of the header for each section which is used both as the title for each section, and as the button to open or close each section."
+            },
+            {
+                "name": "summary.text",
+                "type": "string",
+                "required": false,
+                "description": "Text content for summary line. If `summary.html` is supplied, this is ignored."
+            },
+            {
+                "name": "summary.html",
+                "type": "string",
+                "required": false,
+                "description": "HTML content for summary line."
+            },
+            {
+                "name": "content.html",
+                "type": "string",
+                "required": true,
+                "description": "The HTML content of each section, which is hidden when the section is closed."
+            },
+            {
+                "name": "expanded",
+                "type": "boolean",
+                "required": false,
+                "description": "Whether the section should be expanded upon initial load or not. Defaults to `false`."
+            }
+        ]
+    }
+]

data/node_modules/govuk-frontend/components/accordion/macro.njk

@@ -0,0 +1,3 @@
+{% macro govukAccordion(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

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

@@ -0,0 +1,27 @@
+{% set id = params.id %}
+{% set headingLevel = params.headingLevel if params.headingLevel else 2 %}
+
+<div class="govuk-accordion {%- if params.classes %} {{ params.classes }}{% endif -%}"  data-module="accordion" id="{{ id }}"
+{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+
+  {% for item in params.items %}
+    <div class="govuk-accordion__section {% if item.expanded %}govuk-accordion__section--expanded{% endif %}">
+      <div class="govuk-accordion__section-header">
+        <h{{ headingLevel }} class="govuk-accordion__section-heading">
+          <span class="govuk-accordion__section-button" id="{{ id }}-heading-{{ loop.index }}">
+            {{ item.heading.html | safe if item.heading.html else item.heading.text }}
+          </span>
+        </h{{ headingLevel }}>
+        {% if item.summary.html or item.summary.text %}
+          <div class="govuk-accordion__section-summary govuk-body" id="{{ id }}-summary-{{ loop.index }}">
+            {{ item.summary.html | safe if item.summary.html else item.summary.text }}
+          </div>
+        {% endif %}
+      </div>
+      <div id="{{ id }}-content-{{ loop.index }}" class="govuk-accordion__section-content" aria-labelledby="{{ id }}-heading-{{ loop.index }}">
+        {{ item.content.html | safe if item.content.html else item.content.text }}
+      </div>
+    </div>
+  {% endfor %}
+
+</div>

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

@@ -23,6 +23,13 @@
         "required": false,
         "description": "Optional initial value of the input."
     },
+    {
+        "name": "label",
+        "type": "object",
+        "required": true,
+        "description": "Options for the label component.",
+        "isComponent": true
+    },
     {
         "name": "hint",
         "type": "object",

data/node_modules/govuk-frontend/components/summary-list/README.md

@@ -0,0 +1,15 @@
+# Summary list
+
+## 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 details component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/summary-list).
+
+## 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/summary-list/#options-example-default) for details.

data/node_modules/govuk-frontend/components/summary-list/_summary-list.scss

@@ -0,0 +1,112 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/summary-list") {
+
+  .govuk-summary-list {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    @include govuk-media-query($from: tablet) {
+      display: table;
+      width: 100%;
+    }
+    margin: 0; // Reset default user agent styles
+    @include govuk-responsive-margin(6, "bottom");
+  }
+
+  .govuk-summary-list__row {
+    @include govuk-media-query($until: tablet) {
+      margin-bottom: govuk-spacing(3);
+      border-bottom: 1px solid $govuk-border-colour;
+    }
+    @include govuk-media-query($from: tablet) {
+      display: table-row;
+    }
+  }
+
+  .govuk-summary-list__key,
+  .govuk-summary-list__value,
+  .govuk-summary-list__actions {
+    margin: 0; // Reset default user agent styles
+
+    @include govuk-media-query($from: tablet) {
+      display: table-cell;
+      padding-right: govuk-spacing(4);
+    }
+  }
+
+  .govuk-summary-list__key,
+  .govuk-summary-list__value,
+  .govuk-summary-list__actions {
+    @include govuk-media-query($from: tablet) {
+      padding-top: govuk-spacing(2);
+      padding-bottom: govuk-spacing(2);
+      border-bottom: 1px solid $govuk-border-colour;
+    }
+  }
+
+  .govuk-summary-list__actions {
+    margin-bottom: govuk-spacing(3);
+    @include govuk-media-query($from: tablet) {
+      padding-right: 0;
+      text-align: right;
+    }
+  }
+
+  .govuk-summary-list__key {
+    margin-bottom: govuk-spacing(1);
+    @include govuk-typography-weight-bold;
+    word-break: break-word;
+    @include govuk-media-query($from: tablet) {
+      width: 30%;
+    }
+  }
+
+  .govuk-summary-list__value {
+    @include govuk-media-query($until: tablet) {
+      margin-bottom: govuk-spacing(3);
+    }
+  }
+
+  .govuk-summary-list__value > p {
+    margin-bottom: govuk-spacing(2);
+  }
+
+  .govuk-summary-list__value > :last-child {
+    margin-bottom: 0;
+  }
+
+  .govuk-summary-list__actions-list {
+    width: 100%;
+    margin: 0; // Reset default user agent styles
+    padding: 0; // Reset default user agent styles
+  }
+
+  .govuk-summary-list__actions-list-item {
+    display: inline;
+    margin-right:  govuk-spacing(2);
+    padding-right: govuk-spacing(2);
+  }
+
+  // In older browsers such as IE8, :last-child is not available,
+  // so only show the border divider where it is available.
+  .govuk-summary-list__actions-list-item:not(:last-child) {
+    border-right: 1px solid $govuk-border-colour;
+  }
+
+  .govuk-summary-list__actions-list-item:last-child {
+    margin-right: 0;
+    padding-right: 0;
+    border: 0;
+  }
+
+  .govuk-summary-list--no-border {
+    .govuk-summary-list__key,
+    .govuk-summary-list__value,
+    .govuk-summary-list__actions,
+    .govuk-summary-list__row {
+      border: 0;
+    }
+  }
+}

data/node_modules/govuk-frontend/components/summary-list/macro-options.json

@@ -0,0 +1,95 @@
+[
+    {
+        "name": "rows",
+        "type": "array",
+        "required": true,
+        "description": "Array of row item objects",
+        "params": [
+            {
+                "name": "key.text",
+                "type": "string",
+                "required": true,
+                "description": "If `html` is set, this is not required. Text to use within the each key. If `html` is provided, the `text` argument will be ignored."
+            },
+            {
+                "name": "key.html",
+                "type": "string",
+                "required": true
+            },
+            {
+                "name": "key.classes",
+                "type": "string",
+                "required": false,
+                "description": "Classes to add to the key wrapper"
+            },
+            {
+                "name": "value.text",
+                "type": "string",
+                "required": true,
+                "description": "If `html` is set, this is not required. Text to use within the each value. If `html` is provided, the `text` argument will be ignored."
+            },
+            {
+                "name": "value.html",
+                "type": "string",
+                "required": true,
+                "description": "If `text` is set, this is not required. HTML to use within the each value. If `html` is provided, the `text` argument will be ignored."
+            },
+            {
+                "name": "value.classes",
+                "type": "string",
+                "required": false,
+                "description": "Classes to add to the value wrapper"
+            },
+            {
+                "name": "actions.items",
+                "type": "array",
+                "required": false,
+                "description": "Array of action item objects",
+                "params": [
+                    {
+                        "name": "classes",
+                        "type": "string",
+                        "required": false,
+                        "description": "Classes to add to the actions wrapper"
+                    },
+                    {
+                        "name": "href",
+                        "type": "string",
+                        "required": true,
+                        "description": "The value of the link href attribute for an action item"
+                    },
+                    {
+                        "name": "text",
+                        "type": "string",
+                        "required": true,
+                        "description": "If `html` is set, this is not required. Text to use within each action item. If `html` is provided, the `text` argument will be ignored."
+                    },
+                    {
+                        "name": "html",
+                        "type": "string",
+                        "required": true,
+                        "description": "If `text` is set, this is not required. HTML to use within the each action item. If `html` is provided, the `text` argument will be ignored."
+                    },
+                    {
+                        "name": "visuallyHiddenText",
+                        "type": "string",
+                        "required": false,
+                        "description": "Actions rely on context from the surrounding content so may require additional accessible text, text supplied to this option is appended to the end, use `html` for more complicated scenarios."
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the container."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the container."
+    }
+]

data/node_modules/govuk-frontend/components/summary-list/macro.njk

@@ -0,0 +1,3 @@
+{% macro govukSummaryList(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

data/node_modules/govuk-frontend/components/summary-list/template.njk

@@ -0,0 +1,35 @@
+{%- macro _actionLink(action) %}
+  <a class="govuk-link" href="{{ action.href }}">
+    {{ action.html | safe if action.html else action.text }}
+    {%- if action.visuallyHiddenText -%}
+      <span class="govuk-visually-hidden"> {{ action.visuallyHiddenText }}</span>
+    {% endif -%}
+  </a>
+{% endmacro -%}
+<dl class="govuk-summary-list {%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  {% for row in params.rows %}
+    <div class="govuk-summary-list__row">
+      <dt class="govuk-summary-list__key {%- if row.key.classes %} {{ row.key.classes }}{% endif %}">
+        {{ row.key.html | safe if row.key.html else row.key.text }}
+      </dt>
+      <dd class="govuk-summary-list__value {%- if row.value.classes %} {{ row.value.classes }}{% endif %}">
+        {{ row.value.html | indent(8) | trim | safe if row.value.html else row.value.text }}
+      </dd>
+      {% if row.actions.items %}
+        <dd class="govuk-summary-list__actions {%- if row.actions.classes %} {{ row.actions.classes }}{% endif %}">
+          {% if row.actions.items.length == 1 %}
+            {{ _actionLink(row.actions.items[0]) | indent(12) | trim }}
+          {% else %}
+            <ul class="govuk-summary-list__actions-list">
+              {% for action in row.actions.items %}
+                <li class="govuk-summary-list__actions-list-item">
+                  {{ _actionLink(action) | indent(18) | trim }}
+                </li>
+              {% endfor %}
+            </ul>
+          {% endif %}
+        </dd>
+      {% endif %}
+    </div>
+  {% endfor %}
+</dl>

data/node_modules/govuk-frontend/helpers/_grid.scss

@@ -2,20 +2,6 @@
 /// @group helpers
 ////
 
-/// Map of grid column widths
-///
-/// @type Map
-/// @access private
-
-$_govuk-grid-widths: (
-  one-quarter: 25%,
-  one-third: 33.3333%,
-  one-half: 50%,
-  two-thirds: 66.6666%,
-  three-quarters: 75%,
-  full: 100%
-) !default;
-
 /// Grid width percentage
 ///
 /// @param {String} $key - Name of grid width (e.g. two-thirds)
@@ -23,14 +9,22 @@ $_govuk-grid-widths: (
 /// @throw if `$key` is not a valid grid width
 /// @access public
 
-@function grid-width($key) {
-  @if map-has-key($_govuk-grid-widths, $key) {
-    @return map-get($_govuk-grid-widths, $key);
+@function govuk-grid-width($key) {
+  @if map-has-key($govuk-grid-widths, $key) {
+    @return map-get($govuk-grid-widths, $key);
   }
 
   @error "Unknown grid width `#{$key}`";
 }
 
+/// Grid width percentage (alias)
+///
+/// @alias govuk-grid-width
+/// @deprecated To be removed in v3.0, replaced by govuk-grid-width
+@function grid-width($key) {
+  @return govuk-grid-width($key);
+}
+
 /// Generate grid row styles
 ///
 /// Creates a grid row class with a standardised margin.
@@ -44,6 +38,7 @@ $_govuk-grid-widths: (
 ///   @include govuk-grid-row("app-grid");
 ///
 /// @access public
+/// @deprecated To be removed in v3.0, replaced by the govuk-grid-row class
 
 @mixin govuk-grid-row($class: "govuk-grid-row") {
   .#{$class} {
@@ -55,44 +50,57 @@ $_govuk-grid-widths: (
 
 /// Generate grid column styles
 ///
-/// Creates a cross browser grid column with a class of '.govuk-grid-column' by
-/// default, and a standardised gutter between the columns.
+/// Creates a grid column with standard gutter between the columns.
 ///
-/// Common widths are predefined above as keywords in the `$grid-widths` map.
+/// If a `$class` is provided (which is the default, but deprecated behaviour),
+/// the generated rules will be wrapped in a predefined selector in the format
+/// `$class-$width` (e.g. `govuk-grid-column-full`). This behaviour is
+/// deprecated and will be removed in v3.0
 ///
-/// By default their width changes from 100% to specified width at the 'tablet'
-/// breakpoint, but that can be configured to be any other breakpoint by using
-/// the `$at` parameter.
+/// Grid widths are defined in the `$govuk-grid-widths` map.
 ///
-/// @param {String} $class [govuk-grid-column] CSS class name
-/// @param {String} $width [full] one-quarter | one-third | one-half | two-third | three-quarters | full
+/// By default the column width changes from 100% to specified width at the
+/// 'tablet' breakpoint, but other breakpoints can be specified using the `$at`
+/// parameter.
+///
+/// @param {String} $width [full] name of a grid width from $govuk-grid-widths
 /// @param {String} $float [left] left | right
-/// @param {String} $at [tablet] - mobile | tablet | desktop | any custom breakpoint in px or em
+/// @param {String} $at [tablet] - mobile | tablet | desktop | any custom breakpoint
+/// @param {String} $class [govuk-grid-column] CSS class name (deprecated)
 ///
 /// @example scss - Default
-///   @include govuk-grid-column(two-thirds)
-///
-/// @example scss - Customising the class name
-///   @include govuk-grid-column(one-half, $class: "test-column");
+///   .govuk-grid-column-two-thirds {
+///     @include govuk-grid-column(two-thirds, $class: false)
+///   }
 ///
 /// @example scss - Customising the breakpoint where width percentage is applied
-///   @include govuk-grid-column(one-half, $at: desktop);
+///   .govuk-grid-column-one-half-at-desktop {
+///     @include govuk-grid-column(one-half, $at: desktop);
+///   }
 ///
 /// @example scss - Customising the float direction
-///   @include govuk-grid-column(one-half, $float: right);
+///   .govuk-grid-column-one-half-right {
+///     @include govuk-grid-column(two-thirds, $float: right, $class: false);
+///   }
+///
+/// @example scss - Customising the class name (deprecated)
+///   @include govuk-grid-column(one-half, $class: "test-column");
 ///
 /// @access public
 
 @mixin govuk-grid-column($width: full, $float: left, $at: tablet, $class: "govuk-grid-column") {
-
-  .#{$class}-#{$width} {
+  @if ($class) {
+    .#{$class}-#{$width} {
+      @include govuk-grid-column($width, $float, $at, $class: false);
+    }
+  } @else {
     box-sizing: border-box;
     @if $at != desktop {
       width: 100%;
     }
     padding: 0 $govuk-gutter-half;
     @include govuk-media-query($from: $at) {
-      width: grid-width($width);
+      width: govuk-grid-width($width);
       float: $float;
     }
   }