RubyGems - govuk_publishing_components - Versions diffs - 12.20.0 → 12.21.0 - Mend

govuk_publishing_components 12.20.0 → 12.21.0

Files changed (62) hide show

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

@@ -1,253 +1,15 @@
 # Tabs
-## Introduction
+## Installation
-Component for conditionally revealing content, using tabs and tabs panels.
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
-## Guidance
+## Guidance and Examples
 Find out when to use the tabs component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/tabs).
-## Quick start examples
-### Tabs
-[Preview this example in the Frontend review app](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 govuk-tabs__tab--selected" 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 govuk-tabs__panel--hidden" 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 govuk-tabs__panel--hidden" 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 govuk-tabs__panel--hidden" 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 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/tabs/#options-example-default) for details.
-### 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
+See [options table](https://design-system.service.gov.uk/components/tabs/#options-example-default) for details.

data/node_modules/govuk-frontend/components/tag/README.md CHANGED Viewed

@@ -1,88 +1,15 @@
 # Tag
-## Introduction
+## Installation
-Phase tags are mostly used inside phase banners as an indication of the state of a project. It’s possible to use them outside phase banners, for example as part of a service header.
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
-## Guidance
+## Guidance and Examples
 Find out when to use the tag component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/tag).
-## Quick start examples
-### Tag
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/tag/preview)
-#### Markup
-    <strong class="govuk-tag">
-      alpha
-    </strong>
-#### Macro
-    {% from "tag/macro.njk" import govukTag %}
-    {{ govukTag({
-      "text": "alpha"
-    }) }}
-### Tag inactive
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/tag/inactive/preview)
-#### Markup
-    <strong class="govuk-tag govuk-tag--inactive">
-      alpha
-    </strong>
-#### Macro
-    {% from "tag/macro.njk" import govukTag %}
-    {{ govukTag({
-      "text": "alpha",
-      "classes": "govuk-tag--inactive"
-    }) }}
-## 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 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/tag/#options-example-default) for details.
-### 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
+See [options table](https://design-system.service.gov.uk/components/tag/#options-example-default) for details.

data/node_modules/govuk-frontend/components/textarea/README.md CHANGED Viewed

@@ -1,204 +1,15 @@
 # Textarea
-## Introduction
+## Installation
-A multi-line text field.
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
-## Guidance
+## Guidance and Examples
 Find out when to use the textarea component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/textarea).
-## Quick start examples
-### Textarea
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/textarea/preview)
-#### Markup
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="more-detail">
-        Can you provide more detail?
-      </label>
-      <span id="more-detail-hint" class="govuk-hint">
-        Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.
-      </span>
-      <textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="5" aria-describedby="more-detail-hint"></textarea>
-    </div>
-#### Macro
-    {% from "textarea/macro.njk" import govukTextarea %}
-    {{ govukTextarea({
-      "name": "more-detail",
-      "id": "more-detail",
-      "label": {
-        "text": "Can you provide more detail?"
-      },
-      "hint": {
-        "text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
-      }
-    }) }}
-### Textarea with error message
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/textarea/with-error-message/preview)
-#### Markup
-    <div class="govuk-form-group govuk-form-group--error">
-      <label class="govuk-label" for="no-ni-reason">
-        Why can&#39;t you provide a National Insurance number?
-      </label>
-      <span id="no-ni-reason-error" class="govuk-error-message">
-        You must provide an explanation
-      </span>
-      <textarea class="govuk-textarea govuk-textarea--error" id="no-ni-reason" name="no-ni-reason" rows="5" aria-describedby="no-ni-reason-error"></textarea>
-    </div>
-#### Macro
-    {% from "textarea/macro.njk" import govukTextarea %}
-    {{ govukTextarea({
-      "name": "no-ni-reason",
-      "id": "no-ni-reason",
-      "label": {
-        "text": "Why can't you provide a National Insurance number?"
-      },
-      "errorMessage": {
-        "text": "You must provide an explanation"
-      }
-    }) }}
-### Textarea with default value
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/textarea/with-default-value/preview)
-#### Markup
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="full-address">
-        Full address
-      </label>
-      <textarea class="govuk-textarea" id="full-address" name="address" rows="5">221B Baker Street
-    London
-    NW1 6XE
-    </textarea>
-    </div>
-#### Macro
-    {% from "textarea/macro.njk" import govukTextarea %}
-    {{ govukTextarea({
-      "id": "full-address",
-      "name": "address",
-      "value": "221B Baker Street\nLondon\nNW1 6XE\n",
-      "label": {
-        "text": "Full address"
-      }
-    }) }}
-### Textarea with custom rows
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/textarea/with-custom-rows/preview)
-#### Markup
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="full-address">
-        Full address
-      </label>
-      <textarea class="govuk-textarea" id="full-address" name="address" rows="8"></textarea>
-    </div>
-#### Macro
-    {% from "textarea/macro.njk" import govukTextarea %}
-    {{ govukTextarea({
-      "id": "full-address",
-      "name": "address",
-      "label": {
-        "text": "Full address"
-      },
-      "rows": 8
-    }) }}
-### Textarea with label as page heading
-[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/textarea/with-label-as-page-heading/preview)
-#### Markup
-    <div class="govuk-form-group">
-      <h1 class="govuk-label-wrapper">
-        <label class="govuk-label" for="textarea-with-page-heading">
-          Full address
-        </label>
-      </h1>
-      <textarea class="govuk-textarea" id="textarea-with-page-heading" name="address" rows="5"></textarea>
-    </div>
-#### Macro
-    {% from "textarea/macro.njk" import govukTextarea %}
-    {{ govukTextarea({
-      "id": "textarea-with-page-heading",
-      "name": "address",
-      "label": {
-        "text": "Full address",
-        "isPageHeading": true
-      }
-    }) }}
-## 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 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/textarea/#options-example-default) for details.
-### 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
+See [options table](https://design-system.service.gov.uk/components/textarea/#options-example-default) for details.