govuk_fe_assets 0.1.0.pre.alpha

data/node_modules/govuk-frontend/components/date-input/_date-input.scss

@@ -0,0 +1,35 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@import "../error-message/error-message";
+@import "../input/input";
+@import "../hint/hint";
+@import "../label/label";
+
+@include govuk-exports("govuk/component/date-input") {
+  .govuk-date-input {
+    @include govuk-clearfix;
+  }
+
+  .govuk-date-input__item {
+    width: 50px;
+    margin-right: govuk-spacing(4);
+    margin-bottom: 0;
+    float: left;
+    clear: none;
+  }
+
+  .govuk-date-input__label {
+    display: block;
+    padding-bottom: 2px;
+  }
+
+  .govuk-date-input__input {
+    margin-bottom: 0;
+  }
+
+  .govuk-date-input__item--year {
+    width: 70px;
+  }
+}

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

@@ -0,0 +1,23 @@
+{% from "date-input/macro.njk" import govukDateInput %}
+
+{{- govukDateInput({
+  fieldset: {
+    legend: {
+      text: 'What is your date of birth?'
+    }
+  },
+  id: 'dob',
+  name: 'dob',
+  items:[
+    {
+      name: 'day'
+    },
+    {
+      name: 'month'
+    },
+    {
+      name: 'year'
+    }
+  ]
+  })
+-}}

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

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

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

@@ -0,0 +1,76 @@
+{% from "../error-message/macro.njk" import govukErrorMessage -%}
+{% from "../fieldset/macro.njk" import govukFieldset %}
+{% from "../hint/macro.njk" import govukHint %}
+{% from "../input/macro.njk" import govukInput %}
+
+{#- a record of other elements that we need to associate with the input using
+   aria-describedby – for example hints or error messages -#}
+{% set describedBy = "" %}
+
+{#- Capture the HTML so we can optionally nest it in a fieldset -#}
+{% set innerHtml %}
+{% 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 %}
+  <div class="govuk-date-input {%- if params.classes %} {{ params.classes }}{% endif %}"
+    {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
+    {%- if params.id %} id="{{ params.id }}"{% endif %}>
+    {% for item in params.items %}
+    <div class="govuk-date-input__item govuk-date-input__item--{{ item.name }}">
+      {{ govukInput({
+        "label":{
+          "text": item.name | capitalize,
+          "classes": 'govuk-date-input__label'
+        },
+        "id": params.id + "-" + item.name,
+        "classes": "govuk-date-input__input" + (" " + item.classes if item.classes),
+        "name": params.name + "-" + item.name,
+        "value": item.value,
+        "type": "number",
+        "attributes": {
+          "pattern": "[0-9]*"
+        }
+      }) | indent(6) | trim }}
+    </div>
+  {% endfor %}
+  </div>
+{% endset %}
+
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %}">
+{% if params.fieldset %}
+{#- We override the fieldset's role to 'group' because otherwise JAWS does not
+    announce the description for a fieldset comprised of text inputs, but
+    adding the role to the fieldset always makes the output overly verbose for
+    radio buttons or checkboxes. -#}
+  {% call govukFieldset({
+    describedBy: describedBy,
+    classes: params.fieldset.classes,
+    attributes: {
+      role: 'group'
+    },
+    legend: params.fieldset.legend
+  }) %}
+  {{ innerHtml | trim | safe }}
+  {% endcall %}
+{% else %}
+  {{ innerHtml | trim | safe }}
+{% endif %}
+</div>

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

@@ -0,0 +1,237 @@
+# Details
+
+## Introduction
+
+Component for conditionally revealing content, using the details HTML element.
+
+## Guidance
+
+Find out when to use the Details component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/details).
+
+## Quick start examples
+
+### Component default
+
+[Preview the details component](http://govuk-frontend-review.herokuapp.com/components/details/preview)
+
+#### Markup
+
+    <details class="govuk-details">
+      <summary class="govuk-details__summary">
+        <span class="govuk-details__summary-text">
+          Help with nationality
+        </span>
+      </summary>
+      <div class="govuk-details__text">
+        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
+      </div>
+    </details>
+
+#### Macro
+
+    {% from 'details/macro.njk' import govukDetails %}
+
+    {{ govukDetails({
+      "summaryText": "Help with nationality",
+      "text": "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post."
+    }) }}
+
+### Details--expanded
+
+[Preview the details--expanded example](http://govuk-frontend-review.herokuapp.com/components/details/expanded/preview)
+
+#### Markup
+
+    <details id="help-with-nationality" class="govuk-details" open>
+      <summary class="govuk-details__summary">
+        <span class="govuk-details__summary-text">
+          Help with nationality
+        </span>
+      </summary>
+      <div class="govuk-details__text">
+        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
+      </div>
+    </details>
+
+#### Macro
+
+    {% from 'details/macro.njk' import govukDetails %}
+
+    {{ govukDetails({
+      "id": "help-with-nationality",
+      "summaryText": "Help with nationality",
+      "text": "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.",
+      "open": true
+    }) }}
+
+### Details--with-html
+
+[Preview the details--with-html example](http://govuk-frontend-review.herokuapp.com/components/details/with-html/preview)
+
+#### Markup
+
+    <details class="govuk-details">
+      <summary class="govuk-details__summary">
+        <span class="govuk-details__summary-text">
+          Where to find your National Insurance Number
+        </span>
+      </summary>
+      <div class="govuk-details__text">
+        Your National Insurance number can be found on
+    <ul>
+      <li>your National Insurance card</li>
+      <li>your payslip</li>
+      <li>P60</li>
+      <li>benefits information</li>
+      <li>tax return</li>
+    </ul>
+
+      </div>
+    </details>
+
+#### Macro
+
+    {% from 'details/macro.njk' import govukDetails %}
+
+    {{ govukDetails({
+      "summaryText": "Where to find your National Insurance Number",
+      "html": "Your National Insurance number can be found on\n<ul>\n  <li>your National Insurance card</li>\n  <li>your payslip</li>\n  <li>P60</li>\n  <li>benefits information</li>\n  <li>tax return</li>\n</ul>\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">summaryText (or) summaryHtml</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 summary element (the visible part of the details element). If `summaryHtml` is provided, the `summaryText` argument will be ignored.</td>
+
+</tr>
+
+<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 disclosed part of the details element. 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 to add to the details element.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">open</th>
+
+<td class="govuk-table__cell ">boolean</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">If true, details element will be expanded.</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 details element.</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>
+
+</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/details/_details.scss

@@ -0,0 +1,86 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/details") {
+
+  .govuk-details {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    @include govuk-responsive-margin(6, "bottom");
+
+    display: block;
+  }
+
+  .govuk-details__summary {
+    // Make the focus outline shrink-wrap the text content of the summary
+    display: inline-block;
+
+    // Absolutely position the marker against this element
+    position: relative;
+
+    margin-bottom: govuk-spacing(1);
+
+    // Allow for absolutely positioned marker and align with disclosed text
+    padding-left: govuk-spacing(4) + $govuk-border-width;
+
+    // Style the summary to look like a link...
+    color: $govuk-link-colour;
+    cursor: pointer;
+  }
+
+  // ...but only underline the text, not the arrow
+  .govuk-details__summary-text {
+    text-decoration: underline;
+  }
+
+  .govuk-details__summary:hover {
+    color: $govuk-link-hover-colour;
+  }
+
+  .govuk-details__summary:focus {
+    // -1px offset fixes gap between background and outline in Firefox
+    outline: ($govuk-focus-width + 1px) solid $govuk-focus-colour;
+    outline-offset: -1px;
+    background: $govuk-focus-colour;
+  }
+
+  // Remove the default details marker so we can style our own consistently and
+  // ensure it displays in Firefox (see implementation.md for details)
+  .govuk-details__summary::-webkit-details-marker {
+    display: none;
+  }
+
+  // Append our own open / closed marker using a pseudo-element
+  .govuk-details__summary:before {
+    content: "";
+    position: absolute;
+
+    top: 0;
+    bottom: 0;
+    left: 0;
+
+    margin: auto;
+
+    @include govuk-shape-arrow($direction: right, $base: 14px);
+
+    .govuk-details[open] > & {
+      @include govuk-shape-arrow($direction: down, $base: 14px);
+    }
+  }
+
+  .govuk-details__text {
+    padding: govuk-spacing(3);
+    padding-left: govuk-spacing(4);
+    border-left: $govuk-border-width solid $govuk-border-colour;
+  }
+
+  .govuk-details__text p {
+    margin-top: 0;
+    margin-bottom: govuk-spacing(4);
+  }
+
+  .govuk-details__text p:last-child {
+    margin-bottom: 0;
+  }
+}