govuk_fe_assets 0.1.0.pre.alpha

data/node_modules/govuk-frontend/components/input/_input.scss

@@ -0,0 +1,62 @@
+@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/input") {
+  .govuk-input {
+    @include govuk-font($size: 19);
+    @include govuk-focusable;
+
+    -webkit-box-sizing: border-box;
+
+            box-sizing: border-box;
+    width: 100%;
+    height: 40px;
+    margin-top: 0;
+
+    padding: govuk-spacing(1);
+    // setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476)
+    // as background-color and color need to always be set together, color should not be set either
+    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
+    border-radius: 0;
+
+    // Disable inner shadow and remove rounded corners
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+  }
+
+  .govuk-input::-webkit-outer-spin-button,
+  .govuk-input::-webkit-inner-spin-button {
+    margin: 0;
+    -webkit-appearance: none;
+  }
+
+  .govuk-input[type="number"] {
+    -moz-appearance: textfield;
+  }
+
+  .govuk-input--error {
+    border: $govuk-border-width-form-element-error solid $govuk-error-colour;
+  }
+
+  // The ex measurements are based on the number of W's that can fit inside the input
+  // Extra space is left on the right hand side to allow for the Safari prefill icon
+
+  .govuk-input--width-30 {
+    max-width: 60ex;
+  }
+
+  .govuk-input--width-20 {
+    max-width: 41ex;
+  }
+
+  .govuk-input--width-10 {
+    max-width: 23ex;
+  }
+
+}

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

@@ -0,0 +1,9 @@
+{% from "input/macro.njk" import govukInput %}
+
+{{ govukInput({
+  label: {
+    "text": "National Insurance Number"
+  },
+  id: "input-1",
+  name: "test-name"
+}) }}

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

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

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

@@ -0,0 +1,42 @@
+{% 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 %}
+  <input class="govuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
+  {%- if params.value %} value="{{ params.value}}"{% endif %}
+  {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+</div>

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

@@ -0,0 +1,157 @@
+# Inset text
+
+## Introduction
+
+Use bordered inset text to draw attention to important content on the page.
+
+## Quick start examples
+
+### Component default
+
+[Preview the inset-text component](http://govuk-frontend-review.herokuapp.com/components/inset-text/preview)
+
+#### Markup
+
+    <div class="govuk-inset-text">
+      It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
+    </div>
+
+#### Macro
+
+    {% from 'inset-text/macro.njk' import govukInsetText %}
+
+    {{ govukInsetText({
+      "text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
+    }) }}
+
+### Inset-text--with html
+
+[Preview the inset-text--with html example](http://govuk-frontend-review.herokuapp.com/components/inset-text/with html/preview)
+
+#### Markup
+
+    <div class="govuk-inset-text">
+      It can take up to 8 weeks to register a <a class="govuk-link" href="#">lasting power of attorney</a> if there are no mistakes in the application.
+    </div>
+
+#### Macro
+
+    {% from 'inset-text/macro.njk' import govukInsetText %}
+
+    {{ govukInsetText({
+      "html": "It can take up to 8 weeks to register a <a class=\"govuk-link\" href=\"#\">lasting power of attorney</a> if there are no mistakes in the application."
+    }) }}
+
+## 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 to use within the inset text. If `html` is provided, the `text` argument will be ignored.</td>
+
+</tr>
+
+<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 attribute to add to the inset text container.</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 inset 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 inset 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/inset-text/_inset-text.scss

@@ -0,0 +1,28 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/inset-text") {
+  .govuk-inset-text {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    padding: govuk-spacing(3);
+    // Margin top intended to collapse
+    // This adds an additional 10px to the paragraph above
+    @include govuk-responsive-margin(6, "top");
+    @include govuk-responsive-margin(6, "bottom");
+
+    clear: both;
+
+    border-left: $govuk-border-width-wide solid $govuk-border-colour;
+
+    :first-child {
+      margin-top: 0;
+    }
+
+    :only-child,
+    :last-child {
+      margin-bottom: 0;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+{% from "inset-text/macro.njk" import govukInsetText %}
+
+{{ govukInsetText({
+  classes: '',
+  html: 'It can take up to 8 weeks <a href="#">to register</a> a lasting power of attorney if there are no mistakes in the application.'
+  })
+}}

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

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

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

@@ -0,0 +1,4 @@
+<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-inset-text {%- if params.classes %} {{ params.classes }}{% endif %}"
+{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  {{ params.html | safe if params.html else params.text }}
+</div>

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

@@ -0,0 +1,193 @@
+# Label
+
+## Introduction
+
+Use labels for all form fields.
+
+## Quick start examples
+
+### Component default
+
+[Preview the label component](http://govuk-frontend-review.herokuapp.com/components/label/preview)
+
+#### Markup
+
+    <label class="govuk-label">
+      National Insurance number
+    </label>
+
+#### Macro
+
+    {% from 'label/macro.njk' import govukLabel %}
+
+    {{ govukLabel({
+      "text": "National Insurance number"
+    }) }}
+
+### Label--with bold text
+
+[Preview the label--with bold text example](http://govuk-frontend-review.herokuapp.com/components/label/with bold text/preview)
+
+#### Markup
+
+    <label class="govuk-label govuk-label--s">
+      National Insurance number
+    </label>
+
+#### Macro
+
+    {% from 'label/macro.njk' import govukLabel %}
+
+    {{ govukLabel({
+      "classes": "govuk-label--s",
+      "text": "National Insurance number"
+    }) }}
+
+### Label--as page heading
+
+[Preview the label--as page heading example](http://govuk-frontend-review.herokuapp.com/components/label/as page heading/preview)
+
+#### Markup
+
+    <h1 class="govuk-label-wrapper">
+      <label class="govuk-label govuk-label--xl">
+        National Insurance number
+      </label>
+
+    </h1>
+
+#### Macro
+
+    {% from 'label/macro.njk' import govukLabel %}
+
+    {{ govukLabel({
+      "text": "National Insurance number",
+      "classes": "govuk-label--xl",
+      "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 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 to use within the label. If `html` is provided, the `text` argument will be ignored.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">for</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">Yes</td>
+
+<td class="govuk-table__cell ">The value of the for attribute, the id of the input the label is associated with.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">isPageHeading</th>
+
+<td class="govuk-table__cell ">boolean</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Whether the label also acts as the heading for the page.</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 label tag.</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 label tag.</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