govuk_publishing_components 11.0.0 → 11.1.0

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

@@ -78,8 +78,7 @@
 
   .govuk-radios__input + .govuk-radios__label::before {
     content: "";
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
+    box-sizing: border-box;
     position: absolute;
     top: 0;
     left: 0;
@@ -115,8 +114,7 @@
     // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
     outline: $govuk-focus-width solid transparent;
     outline-offset: $govuk-focus-width;
-    -webkit-box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
-            box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
+    box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
   }
 
   // Selected state
@@ -145,6 +143,14 @@
         clear: none;
       }
     }
+
+    // Prevent inline modifier being used with conditional reveals
+    &.govuk-radios--conditional {
+      .govuk-radios__item {
+        margin-right: 0;
+        float: none;
+      }
+    }
   }
 
   .govuk-radios__divider {

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

@@ -0,0 +1,135 @@
+[
+    {
+        "name": "fieldset",
+        "type": "object",
+        "required": false,
+        "description": "Options for the fieldset component (e.g. legend).",
+        "isComponent": true
+    },
+    {
+        "name": "hint",
+        "type": "object",
+        "required": false,
+        "description": "Options for the hint component (e.g. text).",
+        "isComponent": true
+    },
+    {
+        "name": "errorMessage",
+        "type": "object",
+        "required": false,
+        "description": "Options for the errorMessage component (e.g. text).",
+        "isComponent": true
+    },
+    {
+        "name": "idPrefix",
+        "type": "string",
+        "required": false,
+        "description": "String to prefix id for each checkbox item if no id is specified on each item. If `idPrefix` is not passed, fallback to using the name attribute instead."
+    },
+    {
+        "name": "name",
+        "type": "string",
+        "required": true,
+        "description": "Name attribute for each radio item."
+    },
+    {
+        "name": "items",
+        "type": "array",
+        "required": true,
+        "description": "Array of radio items objects.",
+        "params": [
+            {
+                "name": "text",
+                "type": "string",
+                "required": true,
+                "description": "If `html` is set, this is not required. Text to use within each radio item label. 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 each radio item label. If `html` is provided, the `text` argument will be ignored."
+            },
+            {
+                "name": "id",
+                "type": "string",
+                "required": false,
+                "description": "Specific id attribute for the radio item. If omitted, then `idPrefix` string will be applied."
+            },
+            {
+                "name": "name",
+                "type": "string",
+                "required": true,
+                "description": "Specific name for the radio item. If omitted, then component global `name` string will be applied."
+            },
+            {
+                "name": "value",
+                "type": "string",
+                "required": true,
+                "description": "Value for the radio input."
+            },
+            {
+                "name": "label",
+                "type": "object",
+                "required": false,
+                "description": "Provide attributes and classes to each radio item label.",
+                "isComponent": true
+            },
+            {
+                "name": "hint",
+                "type": "object",
+                "required": false,
+                "description": "Provide hint to each checkbox item.",
+                "isComponent": true
+            },
+            {
+                "name": "divider",
+                "type": "string",
+                "required": false,
+                "description": "Divider text to separate radio items, for example the text \"or\"."
+            },
+            {
+                "name": "checked",
+                "type": "boolean",
+                "required": false,
+                "description": "If true, radio will be checked."
+            },
+            {
+                "name": "conditional",
+                "type": "string",
+                "required": false,
+                "description": "If true, content provided will be revealed when the item is checked."
+            },
+            {
+                "name": "conditional.html",
+                "type": "html",
+                "required": false,
+                "description": "Provide content for the conditional reveal."
+            },
+            {
+                "name": "disabled",
+                "type": "boolean",
+                "required": false,
+                "description": "If true, radio will be disabled."
+            },
+            {
+                "name": "attributes",
+                "type": "object",
+                "required": false,
+                "description": "HTML attributes (for example data attributes) to add to the radio input tag."
+            }
+        ]
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the radio container."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the radio input tag."
+    }
+]

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

@@ -41,7 +41,7 @@
     text: params.errorMessage.text
   }) | indent(2) | trim }}
 {% endif %}
-  <div class="govuk-radios {%- if params.classes %} {{ params.classes }}{% 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="radios"{% endif -%}>
     {% for item in params.items %}

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

@@ -176,6 +176,57 @@ Find out when to use the select component in your service in the [GOV.UK Design
       ]
     }) }}
 
+### Select with full width override
+
+[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/select/with-full-width-override/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+      <label class="govuk-label" for="select-1">
+        Label text goes here
+      </label>
+
+      <select class="govuk-select govuk-!-width-full" id="select-1" name="select-1">
+
+        <option value="1">GOV.UK frontend option 1</option>
+
+        <option value="2" selected>GOV.UK frontend option 2</option>
+
+        <option value="3" disabled>GOV.UK frontend option 3</option>
+
+      </select>
+    </div>
+
+#### Macro
+
+    {% from "select/macro.njk" import govukSelect %}
+
+    {{ govukSelect({
+      "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
+        }
+      ]
+    }) }}
+
 ## Requirements
 
 ### Build tool configuration
@@ -304,6 +355,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">item.attributes</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to the select option tag.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">label</th>
 
 <td class="govuk-table__cell ">object</td>

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

@@ -11,10 +11,7 @@
     @include govuk-font($size: 19, $line-height: 1.25);
     @include govuk-focusable;
 
-    -webkit-box-sizing: border-box;
-
-            box-sizing: border-box; // should this be global?
-    width: 100%;
+    box-sizing: border-box; // should this be global?
     height: 40px;
 
     padding: govuk-spacing(1); // was 5px 4px 4px - size of it should be adjusted to match other form elements

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

@@ -0,0 +1,79 @@
+[
+    {
+        "name": "id",
+        "type": "string",
+        "required": true,
+        "description": "Id for each select box."
+    },
+    {
+        "name": "name",
+        "type": "string",
+        "required": true,
+        "description": "Name property for the select."
+    },
+    {
+        "name": "items",
+        "type": "array",
+        "required": true,
+        "description": "Array of option items for the select.",
+        "params": [
+            {
+                "name": "value",
+                "type": "string",
+                "required": false,
+                "description": "Value for the option item."
+            },
+            {
+                "name": "text",
+                "type": "string",
+                "required": true,
+                "description": "Text for the option item."
+            },
+            {
+                "name": "selected",
+                "type": "boolean",
+                "required": false,
+                "description": "Sets the option as the selected."
+            },
+            {
+                "name": "disabled",
+                "type": "boolean",
+                "required": false,
+                "description": "Sets the option item as disabled."
+            }
+        ]
+    },
+    {
+        "name": "label",
+        "type": "object",
+        "required": false,
+        "description": "Label text or HTML by specifying value for either text or html keys.",
+        "isComponent": true
+    },
+    {
+        "name": "hint",
+        "type": "object",
+        "required": false,
+        "description": "Options for the hint component.",
+        "isComponent": true
+    },
+    {
+        "name": "errorMessage",
+        "type": "object",
+        "required": false,
+        "description": "Options for the errorMessage component (e.g. text).",
+        "isComponent": true
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the anchor tag."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the anchor tag."
+    }
+]

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

@@ -38,7 +38,10 @@
   <select class="govuk-select
     {%- if params.classes %} {{ params.classes }}{% endif %}{%- if params.errorMessage %} govuk-select--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {% for item in params.items %}
-    <option value="{{ item.value }}"{{" selected" if item.selected}}{{" disabled" if item.disabled}}>{{ item.text }}</option>
+    <option value="{{ item.value }}"
+      {{-" selected" if item.selected }}
+      {{-" disabled" if item.disabled }}
+      {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{{ item.text }}</option>
   {% endfor %}
   </select>
 </div>

data/node_modules/govuk-frontend/components/skip-link/macro-options.json

@@ -0,0 +1,32 @@
+[
+    {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": "If `html` is set, this is not required. Text to use within the skip link component. 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 skip link component. If `html` is provided, the `text` argument will be ignored."
+    },
+    {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": "The value of the skip link href attribute. Defaults to"
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the skip link."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the skip link."
+    }
+]

data/node_modules/govuk-frontend/components/table/_table.scss

@@ -15,16 +15,19 @@
 
   .govuk-table__header {
     @include govuk-typography-weight-bold;
-
-    padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0;
-    border-bottom: 1px solid $govuk-border-colour;
-    text-align: left;
   }
 
+  .govuk-table__header,
   .govuk-table__cell {
     padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0;
     border-bottom: 1px solid $govuk-border-colour;
     text-align: left;
+    // GOV.UK Elements sets the font-size and line-height for all headers and cells
+    // in tables.
+    @include govuk-compatibility(govuk_elements) {
+      font-size: inherit;
+      line-height: inherit;
+    }
   }
 
   .govuk-table__cell--numeric {

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

@@ -0,0 +1,108 @@
+[
+    {
+        "name": "rows",
+        "type": "array",
+        "required": true,
+        "description": "Array of table rows and cells.",
+        "params": [
+            {
+                "name": "text",
+                "type": "string",
+                "required": true,
+                "description": "If `html` is set, this is not required. Text for cells in table rows. 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 for cells in table rows. If `html` is provided, the `text` argument will be ignore"
+            },
+            {
+                "name": "format",
+                "type": "string",
+                "required": false,
+                "description": "Specify format of a cell. Currently we only use \"numeric\"."
+            },
+            {
+                "name": "colspan",
+                "type": "integer",
+                "required": false,
+                "description": "Specify how many columns a cell extends."
+            },
+            {
+                "name": "rowspan",
+                "type": "integer",
+                "required": false,
+                "description": "Specify how many rows a cell extends."
+            }
+        ]
+    },
+    {
+        "name": "head",
+        "type": "array",
+        "required": false,
+        "description": "Array of table head cells.",
+        "params": [
+            {
+                "name": "text",
+                "type": "string",
+                "required": false,
+                "description": "If `html` is set, this is not required. Text for table head cells. If `html` is provided, the `text` argument will be ignored."
+            },
+            {
+                "name": "html",
+                "type": "string",
+                "required": false,
+                "description": "If `text` is set, this is not required. HTML for table head cells. If `html` is provided, the `text` argument will be ignore"
+            },
+            {
+                "name": "format",
+                "type": "string",
+                "required": false,
+                "description": "Specify format of a cell. Currently we only use \"numeric\"."
+            },
+            {
+                "name": "colspan",
+                "type": "integer",
+                "required": false,
+                "description": "Specify how many columns a cell extends."
+            },
+            {
+                "name": "rowspan",
+                "type": "integer",
+                "required": false,
+                "description": "Specify how many rows a cell extends."
+            }
+        ]
+    },
+    {
+        "name": "caption",
+        "type": "string",
+        "required": false,
+        "description": "Caption text"
+    },
+    {
+        "name": "captionClasses",
+        "type": "string",
+        "required": false,
+        "description": "Classes for caption text size. Classes should correspond to the available typography heading classes."
+    },
+    {
+        "name": "firstCellIsHeader",
+        "type": "boolean",
+        "required": false,
+        "description": "If set to true, first cell in table row will be a TH instead of a TD."
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the table container."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the table container."
+    }
+]