govuk_publishing_components 9.3.6 → 9.4.0

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

@@ -0,0 +1,50 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/table") {
+  .govuk-table {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    width: 100%;
+    @include govuk-responsive-margin(6, "bottom");
+
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+
+  .govuk-table__header {
+    @include govuk-typography-weight-bold;
+
+    padding: govuk-em(govuk-spacing(2), 19px) govuk-em(govuk-spacing(4), 19px) govuk-em(govuk-spacing(2), 19px) 0;
+    border-bottom: 1px solid $govuk-border-colour;
+    text-align: left;
+  }
+
+  .govuk-table__cell {
+    padding: govuk-em(govuk-spacing(2), 19px) govuk-em(govuk-spacing(4), 19px) govuk-em(govuk-spacing(2), 19px) 0;
+    border-bottom: 1px solid $govuk-border-colour;
+    text-align: left;
+  }
+
+  .govuk-table__cell--numeric {
+    @include govuk-font($size: false, $tabular: true);
+  }
+
+  .govuk-table__header--numeric,
+  .govuk-table__cell--numeric {
+    text-align: right;
+  }
+
+  .govuk-table__header:last-child,
+  .govuk-table__cell:last-child {
+    padding-right: 0;
+  }
+
+  .govuk-table__caption {
+    @include govuk-typography-weight-bold;
+
+    display: table-caption;
+    text-align: left;
+  }
+}

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

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

data/node_modules/govuk-frontend/components/table/table.njk

@@ -0,0 +1,45 @@
+{% from 'table/macro.njk' import govukTable %}
+
+{{ govukTable({
+  "rows": [
+    [
+      {
+        "text": "January"
+      },
+      {
+        "text": "£85",
+        "format": "numeric"
+      },
+      {
+        "text": "£95",
+        "format": "numeric"
+      }
+    ],
+    [
+      {
+        "text": "February"
+      },
+      {
+        "text": "£75",
+        "format": "numeric"
+      },
+      {
+        "text": "£55",
+        "format": "numeric"
+      }
+    ],
+    [
+      {
+        "text": "March"
+      },
+      {
+        "text": "£165",
+        "format": "numeric"
+      },
+      {
+        "text": "£125",
+        "format": "numeric"
+      }
+    ]
+  ]
+}) }}

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

@@ -0,0 +1,39 @@
+<table class="govuk-table
+  {%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {% if params.caption %}
+  <caption class="govuk-table__caption
+  {%- if params.captionClasses %} {{ params.captionClasses }}{% endif %}">{{ params.caption }}</caption>
+  {% endif %}
+  {% if params.head %}
+  <thead class="govuk-table__head">
+    <tr class="govuk-table__row">
+    {% for item in params.head %}
+      <th class="govuk-table__header
+      {%- if item.format %} govuk-table__header--{{ item.format }}{% endif %}"
+      {%- if item.colspan %} colspan="{{ item.colspan }}"{% endif %}
+      {%- if item.rowspan %} rowspan="{{ item.rowspan }}"{% endif %} scope="col">{{ item.html |safe if item.html else item.text }}</th>
+    {% endfor %}
+    </tr>
+  </thead>
+  {% endif %}
+  <tbody class="govuk-table__body">
+    {% for row in params.rows %}
+    <tr class="govuk-table__row">
+    {% for cell in row %}
+      {% if loop.first and params.firstCellIsHeader %}
+      <th class="govuk-table__header" scope="row">{{ cell.html | safe if cell.html else cell.text }}</th>
+      {% elseif loop.first %}
+      <td class="govuk-table__cell
+      {%- if cell.format %} govuk-table__cell--{{ cell.format }}{% endif %}"
+      {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
+      {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}>{{ cell.html | safe if cell.html else cell.text }}</td>
+      {% else %}
+      <td class="govuk-table__cell {% if cell.format %}govuk-table__cell--{{ cell.format }}{% endif %}"
+      {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
+      {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}>{{ cell.html | safe if cell.html else cell.text }}</td>
+      {% endif %}
+    {% endfor %}
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>

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

@@ -0,0 +1,375 @@
+# Tabs
+
+## Introduction
+
+Component for conditionally revealing content, using tabs and tabs panels.
+
+## Guidance
+
+Find out when to use the Tabs component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/tabs).
+
+## Quick start examples
+
+### Component default
+
+[Preview the tabs component](http://govuk-frontend-review.herokuapp.com/components/tabs/preview)
+
+#### Markup
+
+    <div class="govuk-tabs" data-module="tabs">
+      <h2 class="govuk-tabs__title">
+        Contents
+      </h2>
+
+      <ul class="govuk-tabs__list">
+
+          <li class="govuk-tabs__list-item">
+            <a class="govuk-tabs__tab" href="#past-day">
+              Past day
+            </a>
+          </li>
+
+          <li class="govuk-tabs__list-item">
+            <a class="govuk-tabs__tab" href="#past-week">
+              Past week
+            </a>
+          </li>
+
+          <li class="govuk-tabs__list-item">
+            <a class="govuk-tabs__tab" href="#past-month">
+              Past month
+            </a>
+          </li>
+
+          <li class="govuk-tabs__list-item">
+            <a class="govuk-tabs__tab" href="#past-year">
+              Past year
+            </a>
+          </li>
+
+      </ul>
+
+      <section class="govuk-tabs__panel" id="past-day">
+        <h2 class="govuk-heading-l">Past day</h2>
+    <table class="govuk-table">
+      <thead class="govuk-table__head">
+        <tr class="govuk-table__row">
+          <th class="govuk-table__header" scope="col">Case manager</th>
+          <th class="govuk-table__header" scope="col">Cases opened</th>
+          <th class="govuk-table__header" scope="col">Cases closed</th>
+        </tr>
+      </thead>
+      <tbody class="govuk-table__body">
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">David Francis</td>
+          <td class="govuk-table__cell">3</td>
+          <td class="govuk-table__cell">0</td>
+        </tr>
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">Paul Farmer</td>
+          <td class="govuk-table__cell">1</td>
+          <td class="govuk-table__cell">0</td>
+        </tr>
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">Rita Patel</td>
+          <td class="govuk-table__cell">2</td>
+          <td class="govuk-table__cell">0</td>
+        </tr>
+      </tbody>
+    </table>
+
+      </section>
+
+      <section class="govuk-tabs__panel" id="past-week">
+        <h2 class="govuk-heading-l">Past week</h2>
+    <table class="govuk-table">
+      <thead class="govuk-table__head">
+        <tr class="govuk-table__row">
+          <th class="govuk-table__header" scope="col">Case manager</th>
+          <th class="govuk-table__header" scope="col">Cases opened</th>
+          <th class="govuk-table__header" scope="col">Cases closed</th>
+        </tr>
+      </thead>
+      <tbody class="govuk-table__body">
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">David Francis</td>
+          <td class="govuk-table__cell">24</td>
+          <td class="govuk-table__cell">18</td>
+        </tr>
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">Paul Farmer</td>
+          <td class="govuk-table__cell">16</td>
+          <td class="govuk-table__cell">20</td>
+        </tr>
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">Rita Patel</td>
+          <td class="govuk-table__cell">24</td>
+          <td class="govuk-table__cell">27</td>
+        </tr>
+      </tbody>
+    </table>
+
+      </section>
+
+      <section class="govuk-tabs__panel" id="past-month">
+        <h2 class="govuk-heading-l">Past month</h2>
+    <table class="govuk-table">
+      <thead class="govuk-table__head">
+        <tr class="govuk-table__row">
+          <th class="govuk-table__header" scope="col">Case manager</th>
+          <th class="govuk-table__header" scope="col">Cases opened</th>
+          <th class="govuk-table__header" scope="col">Cases closed</th>
+        </tr>
+      </thead>
+      <tbody class="govuk-table__body">
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">David Francis</td>
+          <td class="govuk-table__cell">98</td>
+          <td class="govuk-table__cell">95</td>
+        </tr>
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">Paul Farmer</td>
+          <td class="govuk-table__cell">122</td>
+          <td class="govuk-table__cell">131</td>
+        </tr>
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">Rita Patel</td>
+          <td class="govuk-table__cell">126</td>
+          <td class="govuk-table__cell">142</td>
+        </tr>
+      </tbody>
+    </table>
+
+      </section>
+
+      <section class="govuk-tabs__panel" id="past-year">
+        <h2 class="govuk-heading-l">Past year</h2>
+    <table class="govuk-table">
+      <thead class="govuk-table__head">
+        <tr class="govuk-table__row">
+          <th class="govuk-table__header" scope="col">Case manager</th>
+          <th class="govuk-table__header" scope="col">Cases opened</th>
+          <th class="govuk-table__header" scope="col">Cases closed</th>
+        </tr>
+      </thead>
+      <tbody class="govuk-table__body">
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">David Francis</td>
+          <td class="govuk-table__cell">1380</td>
+          <td class="govuk-table__cell">1472</td>
+        </tr>
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">Paul Farmer</td>
+          <td class="govuk-table__cell">1129</td>
+          <td class="govuk-table__cell">1083</td>
+        </tr>
+        <tr class="govuk-table__row">
+          <td class="govuk-table__cell">Rita Patel</td>
+          <td class="govuk-table__cell">1539</td>
+          <td class="govuk-table__cell">1265</td>
+        </tr>
+      </tbody>
+    </table>
+
+      </section>
+
+    </div>
+
+#### Macro
+
+    {% from 'tabs/macro.njk' import govukTabs %}
+
+    {{ govukTabs({
+      "items": [
+        {
+          "label": "Past day",
+          "id": "past-day",
+          "panel": {
+            "html": "<h2 class=\"govuk-heading-l\">Past day</h2>\n<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">David Francis</td>\n      <td class=\"govuk-table__cell\">3</td>\n      <td class=\"govuk-table__cell\">0</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Paul Farmer</td>\n      <td class=\"govuk-table__cell\">1</td>\n      <td class=\"govuk-table__cell\">0</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Rita Patel</td>\n      <td class=\"govuk-table__cell\">2</td>\n      <td class=\"govuk-table__cell\">0</td>\n    </tr>\n  </tbody>\n</table>\n"
+          }
+        },
+        {
+          "label": "Past week",
+          "id": "past-week",
+          "panel": {
+            "html": "<h2 class=\"govuk-heading-l\">Past week</h2>\n<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">David Francis</td>\n      <td class=\"govuk-table__cell\">24</td>\n      <td class=\"govuk-table__cell\">18</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Paul Farmer</td>\n      <td class=\"govuk-table__cell\">16</td>\n      <td class=\"govuk-table__cell\">20</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Rita Patel</td>\n      <td class=\"govuk-table__cell\">24</td>\n      <td class=\"govuk-table__cell\">27</td>\n    </tr>\n  </tbody>\n</table>\n"
+          }
+        },
+        {
+          "label": "Past month",
+          "id": "past-month",
+          "panel": {
+            "html": "<h2 class=\"govuk-heading-l\">Past month</h2>\n<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">David Francis</td>\n      <td class=\"govuk-table__cell\">98</td>\n      <td class=\"govuk-table__cell\">95</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Paul Farmer</td>\n      <td class=\"govuk-table__cell\">122</td>\n      <td class=\"govuk-table__cell\">131</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Rita Patel</td>\n      <td class=\"govuk-table__cell\">126</td>\n      <td class=\"govuk-table__cell\">142</td>\n    </tr>\n  </tbody>\n</table>\n"
+          }
+        },
+        {
+          "label": "Past year",
+          "id": "past-year",
+          "panel": {
+            "html": "<h2 class=\"govuk-heading-l\">Past year</h2>\n<table class=\"govuk-table\">\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n      <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">David Francis</td>\n      <td class=\"govuk-table__cell\">1380</td>\n      <td class=\"govuk-table__cell\">1472</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Paul Farmer</td>\n      <td class=\"govuk-table__cell\">1129</td>\n      <td class=\"govuk-table__cell\">1083</td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__cell\">Rita Patel</td>\n      <td class=\"govuk-table__cell\">1539</td>\n      <td class=\"govuk-table__cell\">1265</td>\n    </tr>\n  </tbody>\n</table>\n"
+          }
+        }
+      ]
+    }) }}
+
+## Requirements
+
+### Build tool configuration
+
+When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
+
+    .pipe(sass({
+      includePaths: 'node_modules/'
+    }))
+
+### Static asset path configuration
+
+In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
+
+    app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
+
+## Component arguments
+
+If you are using Nunjucks,then macros take the following arguments
+
+**If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).**
+
+<table class="govuk-table">
+
+<thead class="govuk-table__head">
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="col">Name</th>
+
+<th class="govuk-table__header" scope="col">Type</th>
+
+<th class="govuk-table__header" scope="col">Required</th>
+
+<th class="govuk-table__header" scope="col">Description</th>
+
+</tr>
+
+</thead>
+
+<tbody class="govuk-table__body">
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">id</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Optional id</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">classes</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Optional additional classes</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">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 details element</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">idPrefix</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">String to prefix id for each tab item if no id is specified on each item</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">items</th>
+
+<td class="govuk-table__cell ">array</td>
+
+<td class="govuk-table__cell ">Yes</td>
+
+<td class="govuk-table__cell ">Array of tab items</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">items.{}.id</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">Yes</td>
+
+<td class="govuk-table__cell ">Specific id attribute for the tab item. If ommited, then `idPrefix` string will be applied.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">items.{}.label</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">Yes</td>
+
+<td class="govuk-table__cell ">The text label of a tab item</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>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Text or HTML to use within each tab panel. If `html` is provided, the `text` argument will be ignored.</td>
+
+</tr>
+
+</tbody>
+
+</table>
+
+**If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).**
+
+### Setting up Nunjucks views and paths
+
+Below is an example setup using express configure views:
+
+    nunjucks.configure('node_modules/govuk-frontend/components', {
+      autoescape: true,
+      cache: false,
+      express: app
+    })
+
+## Contribution
+
+Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
+
+## License
+
+MIT