govuk_publishing_components 9.3.6 → 9.4.0

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

@@ -0,0 +1,31 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@import "../error-message/error-message";
+@import "../hint/hint";
+@import "../label/label";
+
+@include govuk-exports("govuk/component/textarea") {
+  .govuk-textarea {
+    @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?
+    display: block;
+    width: 100%;
+    @include govuk-responsive-margin(6, "bottom");
+    padding: govuk-spacing(1);
+
+    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+    border-radius: 0;
+
+    -webkit-appearance: none;
+  }
+
+  .govuk-textarea--error {
+    border: $govuk-border-width-form-element-error solid $govuk-error-colour;
+  }
+}

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

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

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

@@ -0,0 +1,41 @@
+{% from "../error-message/macro.njk" import govukErrorMessage -%}
+{% from "../hint/macro.njk" import govukHint %}
+{% from "../label/macro.njk" import govukLabel %}
+
+{#- a record of other elements that we need to associate with the input using
+   aria-describedby – for example hints or error messages -#}
+{% set describedBy = "" %}
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %}">
+  {{ govukLabel({
+    html: params.label.html,
+    text: params.label.text,
+    classes: params.label.classes,
+    isPageHeading: params.label.isPageHeading,
+    attributes: params.label.attributes,
+    for: params.id
+  }) | indent(2) | trim }}
+{% if params.hint %}
+  {% set hintId = params.id + '-hint' %}
+  {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
+  {{ govukHint({
+    id: hintId,
+    classes: params.hint.classes,
+    attributes: params.hint.attributes,
+    html: params.hint.html,
+    text: params.hint.text
+  }) | indent(2) | trim }}
+{% endif %}
+{% if params.errorMessage %}
+  {% set errorId = params.id + '-error' %}
+  {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
+  {{ govukErrorMessage({
+    id: errorId,
+    classes: params.errorMessage.classes,
+    html: params.errorMessage.html,
+    text: params.errorMessage.text
+  }) | indent(2) | trim }}
+{% endif %}
+  <textarea class="govuk-textarea {{- ' govuk-textarea--error' if params.errorMessage }} {{- ' ' + params.classes if params.classes}}" id="{{ params.id }}" name="{{ params.name }}" rows="{%if params.rows %} {{- params.rows -}} {% else %}5{%endif %}"
+  {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
+  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.value }}</textarea>
+</div>

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

@@ -0,0 +1,11 @@
+{% from "textarea/macro.njk" import govukTextarea %}
+
+{{ govukTextarea({
+  id: "more-detail",
+  name: "more-detail",
+  label: {
+    text: "Can you provide more detail?",
+    hintText: "Don't include personal or financial information, eg your National Insurance number or credit card details."
+  }
+})
+}}

data/node_modules/govuk-frontend/components/warning-text/README.md

@@ -0,0 +1,148 @@
+# Warning text
+
+## Introduction
+
+Use bold text with an exclamation icon if there are consequences - for example, a fine or prison sentence.
+
+## Guidance
+
+Find out when to use the Warning text component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/warning-text).
+
+## Quick start examples
+
+### Component default
+
+[Preview the warning-text component](http://govuk-frontend-review.herokuapp.com/components/warning-text/preview)
+
+#### Markup
+
+    <div class="govuk-warning-text">
+      <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
+      <strong class="govuk-warning-text__text">
+        <span class="govuk-warning-text__assistive">Warning</span>
+        You can be fined up to £5,000 if you don’t register.
+      </strong>
+    </div>
+
+#### Macro
+
+    {% from 'warning-text/macro.njk' import govukWarningText %}
+
+    {{ govukWarningText({
+      "text": "You can be fined up to £5,000 if you don’t register.",
+      "iconFallbackText": "Warning"
+    }) }}
+
+## 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">text (or) html</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">Yes</td>
+
+<td class="govuk-table__cell ">Text or HTML for the warning text content. If `html` is provided, the `text` argument is ignored.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">iconFallbackText</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">Yes</td>
+
+<td class="govuk-table__cell ">The fallback text for the icon</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 to add to the warning-text container.</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 warning-text container.</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

data/node_modules/govuk-frontend/components/warning-text/_warning-text.scss

@@ -0,0 +1,50 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/warning-text") {
+
+  .govuk-warning-text {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+
+    position: relative;
+    @include govuk-responsive-margin(6, "bottom");
+    padding: govuk-spacing(2) 0;
+  }
+
+  .govuk-warning-text__assistive {
+    @include govuk-visually-hidden;
+  }
+
+  .govuk-warning-text__icon {
+    @include govuk-font($size: false, $weight: bold);
+
+    display: inline-block;
+
+    position: absolute;
+    top: 50%;
+    left: 0;
+
+    min-width: 38px;
+    min-height: 35px;
+    margin-top: -20px; // Half the height of the 38px circle (adjusted for NTA)
+    padding-top: 3px;
+
+    border-radius: 50%;
+
+    color: govuk-colour("white");
+    background: govuk-colour("black");
+
+    font-size: 1.6em;
+    line-height: 35px;
+
+    text-align: center;
+  }
+
+  .govuk-warning-text__text {
+    display: block;
+    margin-left: -$govuk-gutter-half;
+    padding-left: 65px;
+  }
+}

data/node_modules/govuk-frontend/components/warning-text/macro.njk

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

data/node_modules/govuk-frontend/components/warning-text/template.njk

@@ -0,0 +1,9 @@
+<div class="govuk-warning-text {{- ' ' + params.classes if params.classes}}"
+  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor -%}
+  >
+  <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
+  <strong class="govuk-warning-text__text">
+    <span class="govuk-warning-text__assistive">{{ params.iconFallbackText }}</span>
+    {{ params.html | safe if params.html else params.text }}
+  </strong>
+</div>

data/node_modules/govuk-frontend/components/warning-text/warning-text.njk

@@ -0,0 +1,9 @@
+{% from "warning-text/macro.njk" import govukWarningText %}
+
+{{- govukWarningText(
+  {
+    "classes": "",
+    "text": "You can be fined up to £5,000 if you don’t register.",
+    "iconFallbackText": "Warning"
+  })
+-}}

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

@@ -0,0 +1,6 @@
+@import "links";
+@import "lists";
+@import "template";
+@import "typography";
+@import "section-break";
+@import "global-styles";

data/node_modules/govuk-frontend/core/_global-styles.scss

@@ -0,0 +1,19 @@
+@import "links";
+@import "typography";
+
+@mixin govuk-global-styles {
+  a {
+    @extend %govuk-link;
+  }
+
+  p {
+    @extend %govuk-body-m;
+  }
+}
+
+@include govuk-exports("govuk/core/global-styles") {
+
+  @if $govuk-global-styles == true {
+    @include govuk-global-styles;
+  }
+}

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

@@ -0,0 +1,40 @@
+@include govuk-exports("govuk/core/links") {
+
+  %govuk-link {
+    @include govuk-link-common;
+    @include govuk-link-style-default;
+    @include govuk-link-print-friendly;
+  }
+
+  .govuk-link {
+    @extend %govuk-link;
+  }
+
+  // Variant classes should always be used in conjunction with the .govuk-link
+  // class, so we do not need the common link styles as they will be inherited.
+
+  .govuk-link--muted {
+    @include govuk-link-style-muted;
+  }
+
+  .govuk-link--text-colour {
+    @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;
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+@include govuk-exports("govuk/core/lists") {
+
+  %govuk-list {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    margin-top: 0;
+    @include govuk-responsive-margin(4, "bottom");
+    padding-left: 0;
+    list-style-type: none;
+
+    // Add a top margin for nested lists
+    %govuk-list {
+      margin-top: govuk-spacing(2);
+    }
+  }
+
+  %govuk-list > li {
+    @include govuk-media-query($from: tablet) {
+      margin-bottom: govuk-spacing(1);
+    }
+  }
+
+  %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;
+  }
+
+  %govuk-list--bullet {
+    padding-left: govuk-spacing(4);
+
+    list-style-type: disc;
+  }
+
+  .govuk-list--bullet {
+    @extend %govuk-list--bullet;
+  }
+
+  %govuk-list--number {
+    padding-left: govuk-spacing(4);
+    list-style-type: decimal;
+  }
+
+  .govuk-list--number {
+    @extend %govuk-list--number;
+  }
+}