govuk_publishing_components 11.0.0 → 11.1.0

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

@@ -24,7 +24,7 @@ Find out when to use the tabs component in your service in the [GOV.UK Design Sy
       <ul class="govuk-tabs__list">
 
           <li class="govuk-tabs__list-item">
-            <a class="govuk-tabs__tab" href="#past-day">
+            <a class="govuk-tabs__tab govuk-tabs__tab--selected" href="#past-day">
               Past day
             </a>
           </li>
@@ -80,7 +80,7 @@ Find out when to use the tabs component in your service in the [GOV.UK Design Sy
 
       </section>
 
-      <section class="govuk-tabs__panel" id="past-week">
+      <section class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-week">
         <h2 class="govuk-heading-l">Past week</h2>
     <table class="govuk-table">
       <thead class="govuk-table__head">
@@ -111,7 +111,7 @@ Find out when to use the tabs component in your service in the [GOV.UK Design Sy
 
       </section>
 
-      <section class="govuk-tabs__panel" id="past-month">
+      <section class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-month">
         <h2 class="govuk-heading-l">Past month</h2>
     <table class="govuk-table">
       <thead class="govuk-table__head">
@@ -142,7 +142,7 @@ Find out when to use the tabs component in your service in the [GOV.UK Design Sy
 
       </section>
 
-      <section class="govuk-tabs__panel" id="past-year">
+      <section class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-year">
         <h2 class="govuk-heading-l">Past year</h2>
     <table class="govuk-table">
       <thead class="govuk-table__head">
@@ -286,7 +286,7 @@ If you are using Nunjucks,then macros take the following arguments
 
 <td class="govuk-table__cell ">No</td>
 
-<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the details element</td>
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the tabs container</td>
 
 </tr>
 
@@ -340,6 +340,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">items.{}.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 add to the tab item anchor.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">items.{}.panel.text (or) items.{}.panel.html</th>
 
 <td class="govuk-table__cell ">string</td>
@@ -350,6 +362,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 </tr>
 
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">items.{}.panel.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 add to the tab panel.</td>
+
+</tr>
+
 </tbody>
 
 </table>

data/node_modules/govuk-frontend/components/tabs/_tabs.scss

@@ -86,7 +86,7 @@
         text-align: center;
         text-decoration: none;
 
-        &[aria-selected= "true"] {
+        &--selected {
           margin-top: - govuk-spacing(1);
           margin-bottom: -1px;
 

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

@@ -0,0 +1,58 @@
+[
+    {
+        "name": "id",
+        "type": "string",
+        "required": false,
+        "description": "This is used for the main component and to compose id attribute for each item."
+    },
+    {
+        "name": "idPrefix",
+        "type": "string",
+        "required": false,
+        "description": "String to prefix id for each tab item if no id is specified on each item"
+    },
+    {
+        "name": "items",
+        "type": "array",
+        "required": true,
+        "description": "Array of tab items.",
+        "params": [
+            {
+                "name": "id",
+                "type": "string",
+                "required": true,
+                "description": "Specific id attribute for the tab item. If omitted, then `idPrefix` string will be applied."
+            },
+            {
+                "name": "label",
+                "type": "string",
+                "required": true,
+                "description": "The text label of a tab item."
+            },
+            {
+                "name": "panel.text",
+                "type": "string",
+                "required": true,
+                "description": "If `html` is set, this is not required. Text to use within each tab panel. If `html` is provided, the `text` argument will be ignored."
+            },
+            {
+                "name": "panel.html",
+                "type": "string",
+                "required": true,
+                "description": "If `text` is set, this is not required. HTML to use within the each tab panel. If `html` is provided, the `text` argument will be ignored."
+            }
+        ]
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the tabs component."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the tabs component."
+    }
+]

data/node_modules/govuk-frontend/components/tabs/tabs.js

@@ -1276,16 +1276,18 @@ Tabs.prototype.hidePanel = function (tab) {
 
 Tabs.prototype.unhighlightTab = function ($tab) {
   $tab.setAttribute('aria-selected', 'false');
+  $tab.classList.remove('govuk-tabs__tab--selected');
   $tab.setAttribute('tabindex', '-1');
 };
 
 Tabs.prototype.highlightTab = function ($tab) {
   $tab.setAttribute('aria-selected', 'true');
+  $tab.classList.add('govuk-tabs__tab--selected');
   $tab.setAttribute('tabindex', '0');
 };
 
 Tabs.prototype.getCurrentTab = function () {
-  return this.$module.querySelector('[role=tab][aria-selected=true]')
+  return this.$module.querySelector('.govuk-tabs__tab--selected')
 };
 
 // this is because IE doesn't always return the actual value but a relative full path

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

@@ -12,7 +12,8 @@
     {% for item in params.items %}
     {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
       <li class="govuk-tabs__list-item">
-        <a class="govuk-tabs__tab" href="#{{ id }}">
+        <a class="govuk-tabs__tab{% if loop.index == 1 %} govuk-tabs__tab--selected{% endif %}" href="#{{ id }}"
+           {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
           {{ item.label }}
         </a>
       </li>
@@ -22,7 +23,7 @@
 
   {% for item in params.items %}
   {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
-  <section class="govuk-tabs__panel" id="{{ id }}">
+  <section class="govuk-tabs__panel{% if loop.index > 1 %} govuk-tabs__panel--hidden{% endif %}" id="{{ id }}"{% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>
     {{ item.panel.html | safe if item.panel.html else item.panel.text }}
   </section>
   {% endfor %}

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

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

data/node_modules/govuk-frontend/components/textarea/_textarea.scss

@@ -11,14 +11,15 @@
     @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?
+    box-sizing: border-box; // should this be global?
     display: block;
     width: 100%;
+    min-height: 40px;
     @include govuk-responsive-margin(6, "bottom");
     padding: govuk-spacing(1);
 
+    resize: vertical;
+
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;
     border-radius: 0;
 

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

@@ -0,0 +1,65 @@
+[
+    {
+        "name": "id",
+        "type": "string",
+        "required": true,
+        "description": "The id of the textarea."
+    },
+    {
+        "name": "describedBy",
+        "type": "string",
+        "required": false,
+        "description": "Text or element id to add to the `aria-describedby` attribute to provide description for screenreader users."
+    },
+    {
+        "name": "name",
+        "type": "string",
+        "required": true,
+        "description": "The name of the textarea, which is submitted with the form data."
+    },
+    {
+        "name": "rows",
+        "type": "string",
+        "required": false,
+        "description": "Optional number of textarea rows (default is 5 rows)."
+    },
+    {
+        "name": "value",
+        "type": "string",
+        "required": false,
+        "description": "Optional initial value of the textarea."
+    },
+    {
+        "name": "label",
+        "type": "object",
+        "required": true,
+        "description": "Options for the label component.",
+        "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 textarea."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the textarea."
+    }
+]

data/node_modules/govuk-frontend/components/warning-text/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 warning text 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 warning text component. If `html` is provided, the `text` argument will be ignored."
+    },
+    {
+        "name": "iconFallbackText",
+        "type": "string",
+        "required": true,
+        "description": "The fallback text for the icon."
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the warning text."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the warning text."
+    }
+]

data/node_modules/govuk-frontend/core/_links.scss

@@ -21,20 +21,7 @@
     @include govuk-link-style-text;
   }
 
-  // 'No visited state' link mixin
-  //
-  // Used in cases where it is not helpful to distinguish between visited and
-  // non-visited links.
-  //
-  // For example, navigation links to pages with dynamic content like admin
-  // dashboards. The content on the page is changing all the time, so the fact
-  // that you’ve visited it before is not important.
-  //
-  // This is not abstracted as a mixin because it does not provide states for
-  // all pseudo-selectors so it does not make sense to use it in composition.
   .govuk-link--no-visited-state {
-    &:visited {
-      color: $govuk-link-colour;
-    }
+    @include govuk-link-style-no-visited-state;
   }
 }

data/node_modules/govuk-frontend/core/_lists.scss

@@ -20,24 +20,6 @@
     }
   }
 
-  %govuk-list a {
-    &:link {
-      color: $govuk-link-colour;
-    }
-
-    &:visited {
-      color: $govuk-link-visited-colour;
-    }
-
-    &:hover {
-      color: $govuk-link-hover-colour;
-    }
-
-    &:active {
-      color: $govuk-link-active-colour;
-    }
-  }
-
   .govuk-list {
     @extend %govuk-list;
   }

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

@@ -86,8 +86,7 @@ $_govuk-grid-widths: (
 @mixin govuk-grid-column($width: full, $float: left, $at: tablet, $class: "govuk-grid-column") {
 
   .#{$class}-#{$width} {
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
+    box-sizing: border-box;
     @if $at != desktop {
       width: 100%;
     }

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

@@ -44,6 +44,12 @@
   &:active {
     color: $govuk-link-active-colour;
   }
+
+  // When focussed, the text colour needs to be darker to ensure that colour
+  // contrast is still acceptable
+  &:focus {
+    color: $govuk-focus-text-colour;
+  }
 }
 
 /// Muted style link mixin
@@ -73,7 +79,7 @@
   // When focussed, the text colour needs to be darker to ensure that colour
   // contrast is still acceptable
   &:focus {
-    color: $govuk-text-colour;
+    color: $govuk-focus-text-colour;
   }
 
   // alphagov/govuk_template includes a specific a:link:focus selector designed
@@ -122,6 +128,51 @@
   }
 }
 
+
+/// No visited state link mixin
+///
+/// Used in cases where it is not helpful to distinguish between visited and
+/// non-visited links.
+///
+/// For example, navigation links to pages with dynamic content like admin
+/// dashboards. The content on the page is changing all the time, so the fact
+/// that you’ve visited it before is not important.
+///
+/// If you use this mixin in a component you must also include the
+/// govuk-link-common mixin in order to get the focus state.
+///
+/// @example scss
+///   .govuk-component__link {
+///     @include govuk-link-common;
+///     @include govuk-link-style-no-visited-state;
+///   }
+///
+/// @access public
+
+@mixin govuk-link-style-no-visited-state {
+  &:link {
+    color: $govuk-link-colour;
+  }
+
+  &:visited {
+    color: $govuk-link-colour;
+  }
+
+  &:hover {
+    color: $govuk-link-hover-colour;
+  }
+
+  &:active {
+    color: $govuk-link-active-colour;
+  }
+
+  // When focussed, the text colour needs to be darker to ensure that colour
+  // contrast is still acceptable
+  &:focus {
+    color: $govuk-focus-text-colour;
+  }
+}
+
 /// Print friendly link mixin
 ///
 /// When printing, append the the destination URL to the link text, as long