Merge pull request #709 from alphagov/add-inset-text-component

Add inset text component

CHANGELOG.md

@@ -21,6 +21,8 @@ New features:
 
 - Add header component (PR [#695](https://github.com/alphagov/govuk-frontend/pull/695))
 
+- Add inset text component (PR [#709](https://github.com/alphagov/govuk-frontend/pull/709))
+
 Internal:
 
 - Run tests in pre-release

src/components/_all.scss

@@ -12,6 +12,7 @@
 @import "hint/hint";
 @import "header/header";
 @import "input/input";
+@import "inset-text/inset-text";
 @import "label/label";
 @import "panel/panel";
 @import "phase-banner/phase-banner";

src/components/inset-text/README.md

@@ -0,0 +1,165 @@
+# 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/frontend/assets')))
+
+## Component arguments
+
+If you are using Nunjucks,then macros take the following arguments
+
+<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">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">id</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">Yes</td>
+
+<td class="govuk-table__cell ">The id of the inset text</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">text</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Text to use within the inset text</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">html</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">HTML to use within the inset text. If this is provided, the text argument will be ignored.</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 div tag.</td>
+
+</tr>
+
+</tbody>
+
+</table>
+
+### Setting up Nunjucks views and paths
+
+Below is an example setup using express configure views:
+
+    nunjucks.configure('node_modules/@govuk-frontend/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

src/components/inset-text/_inset-text.scss

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

src/components/inset-text/index.njk

@@ -0,0 +1,112 @@
+{% if isReadme %}
+  {% set parentTemplate = "readme.njk"  %}
+{% else %}
+  {% set parentTemplate = "component.njk"  %}
+{% endif %}
+
+{% extends parentTemplate %}
+
+{# Commented out blocks below inherit from views/component.njk #}
+
+{# componentName #}
+
+{% block componentDescription %}
+  Use bordered inset text to draw attention to important content on the page.
+{% endblock %}
+
+{# examples #}
+
+{# override link to design system here if it's different to base url + componentName #}
+{% set componentGuidanceLink = false %}
+
+{% block componentArguments %}
+{{ govukTable({
+  'firstCellIsHeader': true,
+  'head' : [
+    {
+      text: 'Name'
+    },
+    {
+      text: 'Type'
+    },
+    {
+      text: 'Required'
+    },
+    {
+      text: 'Description'
+    }
+  ],
+  'rows' : [
+    [
+      {
+        text: 'classes'
+      },
+      {
+        text: 'string'
+      },
+      {
+        text: 'No'
+      },
+      {
+        text: 'Optional additional classes'
+      }
+    ],
+    [
+      {
+        text: 'id'
+      },
+      {
+        text: 'string'
+      },
+      {
+        text: 'Yes'
+      },
+      {
+        text: 'The id of the inset text'
+      }
+    ],
+    [
+      {
+        text: 'text'
+      },
+      {
+        text: 'string'
+      },
+      {
+        text: 'No'
+      },
+      {
+        text: 'Text to use within the inset text'
+      }
+    ],
+    [
+      {
+        text: 'html'
+      },
+      {
+        text: 'string'
+      },
+      {
+        text: 'No'
+      },
+      {
+        text: 'HTML to use within the inset text. If this is provided, the text argument will be ignored.'
+      }
+    ],
+    [
+      {
+        text: 'attributes'
+      },
+      {
+        text: 'object'
+      },
+      {
+        text: 'No'
+      },
+      {
+        text: 'Any extra HTML attributes (for example data attributes) to add to the inset text div tag.'
+      }
+    ]
+  ]
+} )}}
+{% endblock %}

src/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.'
+  })
+}}

src/components/inset-text/inset-text.yaml

@@ -0,0 +1,9 @@
+examples:
+  - name: default
+    data:
+      text:
+        It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
+  - name: with html
+    data:
+      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.

src/components/inset-text/macro.njk

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

src/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>