hmrc · stevenaproctor · Nov 5, 2018 · Oct 29, 2018 · Oct 31, 2018 · Nov 5, 2018
diff --git a/src/components/account-menu/README.md b/src/components/account-menu/README.md
@@ -10,3 +10,5 @@
 - if a sub-nav is open, add `is-open` to nav
 - if showNavLinkMobile is open, close it when triggered
 - if a menu link with sub-nav (showSubnavLink) is open, close it when triggered
+
+This code is open source software licensed under the [Apache 2.0 License]("http://www.apache.org/licenses/LICENSE-2.0.html").
diff --git a/src/components/new-tab-link/README.md b/src/components/new-tab-link/README.md
@@ -0,0 +1,7 @@
+# Open a link in a new window or tab
+
+A link that opens a new tab or window.
+
+### License
+
+This code is open source software licensed under the [Apache 2.0 License]("http://www.apache.org/licenses/LICENSE-2.0.html").
diff --git a/src/components/new-tab-link/macro.njk b/src/components/new-tab-link/macro.njk
@@ -0,0 +1,3 @@
+{% macro hmrcNewTabLink(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}
diff --git a/src/components/new-tab-link/new-tab-link.njk b/src/components/new-tab-link/new-tab-link.njk
@@ -0,0 +1,7 @@
+{% from "new-tab-link/macro.njk" import hmrcNewTabLink %}
+
+<p>You can also {{ hmrcNewTabLink({
+    text: "find out if you qualify for tax credits",
+    href: "https://www.gov.uk/working-tax-credit/eligibility",
+    language: "en"
+  }) }}.</p>
diff --git a/src/components/new-tab-link/new-tab-link.yaml b/src/components/new-tab-link/new-tab-link.yaml
@@ -0,0 +1,17 @@
+examples:
+- name: default
+  data:
+    text: "find out if you qualify for tax credits"
+    href: "https://www.gov.uk/working-tax-credit/eligibility"
+    language: "en"
+- name: welsh
+  data:
+    text: "dod i wybod a ydych yn gymwys ar gyfer credydau treth"
+    href: "https://www.gov.uk/guidance/ffurflenni-cthem#4"
+    language: "cy"
+- name: with-classes
+  data:
+    text: "an example link"
+    href: "http://example.com"
+    classList: "govuk-!-font-weight-bold my-custom-class"
+    language: "en"
diff --git a/src/components/new-tab-link/template.njk b/src/components/new-tab-link/template.njk
@@ -0,0 +1,3 @@
+{% if params.text %}
+<a class="govuk-link {{ params.classList }}" target="_blank" rel="noopener noreferrer" href="{{ params.href }}">{{ params.text }} {%  if params.language == 'en' %}(opens in a new window or tab){% endif %}{%  if params.language == 'cy' %}(yn agor ffenestr neu dab newydd){% endif %}</a>
+{% endif %}
diff --git a/src/components/new-tab-link/template.test.js b/src/components/new-tab-link/template.test.js
@@ -0,0 +1,64 @@
+/* eslint-env jest */
+
+const axe = require('../../../lib/axe-helper')
+
+const { render, getExamples } = require('../../../lib/jest-helpers')
+
+const examples = getExamples('new-tab-link')
+
+describe('New Tab Link', () => {
+  describe('by default', () => {
+    it('passes accessibility tests', async () => {
+      const $ = render('new-tab-link', examples.default)
+
+      const results = await axe($.html())
+      expect(results).toHaveNoViolations()
+    })
+
+    it('renders a link element', () => {
+      const $ = render('new-tab-link', examples.default)
+
+      const $component = $('.govuk-link')
+      expect($component.get(0).tagName).toEqual('a')
+      expect($component.attr('target')).toEqual('_blank')
+      expect($component.attr('rel')).toEqual('noopener noreferrer')
+      expect($component.attr('href')).toEqual('https://www.gov.uk/working-tax-credit/eligibility')
+    })
+
+    it('renders link text with english explanation', () => {
+      const text = 'my link TEXT'
+
+      const $ = render('new-tab-link', { text, language: 'en', href: 'about:blank' })
+
+      const labelText = $('.govuk-link').text().trim()
+
+      expect(labelText).toEqual('my link TEXT (opens in a new window or tab)')
+    })
+
+    it('renders link text with english explanation', () => {
+      const text = 'my link TEXT'
+
+      const $ = render('new-tab-link', { text, language: 'cy', href: 'about:blank' })
+
+      const labelText = $('.govuk-link').text().trim()
+
+      expect(labelText).toEqual('my link TEXT (yn agor ffenestr neu dab newydd)')
+    })
+
+    it('renders link with custom classes', () => {
+      const $ = render('new-tab-link', examples['with-classes'])
+
+      const $component = $('.govuk-link')
+
+      expect($component.attr('class')).toEqual('govuk-link govuk-!-font-weight-bold my-custom-class')
+    })
+
+    it('uses the provided URL', () => {
+      const $ = render('new-tab-link', examples.welsh)
+
+      const $component = $('.govuk-link')
+
+      expect($component.attr('href')).toEqual('https://www.gov.uk/guidance/ffurflenni-cthem#4')
+    })
+  })
+})
diff --git a/src/components/notification-badge/README.md b/src/components/notification-badge/README.md
@@ -2,214 +2,8 @@
 
 ## Introduction
 
-A button is an element that allows users to carry out an action on a GOV.UK page. Common use cases include allowing a user to **Start** an application or **Save and continue** their progress. A button should have a short text snippet that describes what it will do.
-
-## Guidance
-
-Find out when to use the Notification badge component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/notification-badge).
-
-## Quick start examples
-
-Buttons are configured to perform an action and they can have a different look. For example, they can be disabled until a valid action has been performed by the user.
-
-### Component default
-
-[Preview the notification-badge component](http://govuk-frontend-review.herokuapp.com/components/notification-badge/preview)
-
-#### Markup
-
-    <span class="hmrc-notification-badge">3</span>
-
-#### Macro
-
-    {% from 'notification-badge/macro.njk' import govukNotificationBadge %}
-
-    {{ govukNotificationBadge({
-      "badgeText": 3
-    }) }}
-
-### Notification-badge--with-text
-
-[Preview the notification-badge--with-text example](http://govuk-frontend-review.herokuapp.com/components/notification-badge/with-text/preview)
-
-#### Markup
-
-    <span class="hmrc-notification-badge">New</span>
-
-#### Macro
-
-    {% from 'notification-badge/macro.njk' import govukNotificationBadge %}
-
-    {{ govukNotificationBadge({
-      "badgeText": "New"
-    }) }}
-
-## 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
-
-<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">element</th>
-
-<td class="govuk-table__cell ">string</td>
-
-<td class="govuk-table__cell ">No</td>
-
-<td class="govuk-table__cell ">Whether to use an `input`, `button` or `a` element to create the button. In most cases you will not need to set this as it will be configured automatically if you use `href` or `html`.</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 for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`.</td>
-
-</tr>
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">name</th>
-
-<td class="govuk-table__cell ">string</td>
-
-<td class="govuk-table__cell ">Yes</td>
-
-<td class="govuk-table__cell ">Name for the `input` or `button`. This has no effect on `a` elements.</td>
-
-</tr>
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">type</th>
-
-<td class="govuk-table__cell ">string</td>
-
-<td class="govuk-table__cell ">Yes</td>
-
-<td class="govuk-table__cell ">Type of `input` or `button` – `button`, `submit` or `reset`. Defaults to `submit`. This has no effect on `a` elements.</td>
-
-</tr>
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">value</th>
-
-<td class="govuk-table__cell ">string</td>
-
-<td class="govuk-table__cell ">Yes</td>
-
-<td class="govuk-table__cell ">Value for the `button` tag. This has no effect on `a` or `input` elements.</td>
-
-</tr>
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">disabled</th>
-
-<td class="govuk-table__cell ">boolean</td>
-
-<td class="govuk-table__cell ">No</td>
-
-<td class="govuk-table__cell ">Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically.</td>
-
-</tr>
-
-<tr class="govuk-table__row">
-
-<th class="govuk-table__header" scope="row">href</th>
-
-<td class="govuk-table__cell ">string</td>
-
-<td class="govuk-table__cell ">No</td>
-
-<td class="govuk-table__cell ">The URL that the button should link to. If this is set, `element` will be automatically set to `a` if it has not already been defined.</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</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 button component.</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/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")
+A notification badge shows a number.
 
 ## License
 
-MIT
+This code is open source software licensed under the [Apache 2.0 License]("http://www.apache.org/licenses/LICENSE-2.0.html").