From caadaf1b1280cd24c892945f2d35458320a94614 Mon Sep 17 00:00:00 2001 From: Mat Carey Date: Mon, 29 Oct 2018 15:11:49 +0000 Subject: [PATCH 1/3] Created macro for opening links in a new tab. --- src/components/new-tab-link/README.md | 35 ++++++++++++ src/components/new-tab-link/macro.njk | 3 + src/components/new-tab-link/new-tab-link.njk | 7 +++ src/components/new-tab-link/new-tab-link.yaml | 17 ++++++ src/components/new-tab-link/template.njk | 3 + src/components/new-tab-link/template.test.js | 56 +++++++++++++++++++ 6 files changed, 121 insertions(+) create mode 100644 src/components/new-tab-link/README.md create mode 100644 src/components/new-tab-link/macro.njk create mode 100644 src/components/new-tab-link/new-tab-link.njk create mode 100644 src/components/new-tab-link/new-tab-link.yaml create mode 100644 src/components/new-tab-link/template.njk create mode 100644 src/components/new-tab-link/template.test.js diff --git a/src/components/new-tab-link/README.md b/src/components/new-tab-link/README.md new file mode 100644 index 00000000..90476c55 --- /dev/null +++ b/src/components/new-tab-link/README.md @@ -0,0 +1,35 @@ +# New Tab Link + +## Introduction + +## Guidance + +## Quick start examples + +### Component default + +#### Markup + +#### Macro + +### Notification-badge--with-text + +#### Markup + +#### Macro + +## Requirements + +### Build tool configuration + +### Static asset path configuration + +## Component arguments + +### Setting up Nunjucks views and paths + +## Contribution + +## License + +MIT diff --git a/src/components/new-tab-link/macro.njk b/src/components/new-tab-link/macro.njk new file mode 100644 index 00000000..83427e27 --- /dev/null +++ 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 new file mode 100644 index 00000000..79cfbb92 --- /dev/null +++ b/src/components/new-tab-link/new-tab-link.njk @@ -0,0 +1,7 @@ +{% from "new-tab-link/macro.njk" import hmrcNewTabLink %} + +

You can also {{ hmrcNewTabLink({ + text: "find out if you qualify for tax credits", + href: "https://www.gov.uk/working-tax-credit/eligibility", + language: "en" + }) }}.

diff --git a/src/components/new-tab-link/new-tab-link.yaml b/src/components/new-tab-link/new-tab-link.yaml new file mode 100644 index 00000000..b8c1af5d --- /dev/null +++ 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 new file mode 100644 index 00000000..37744e5b --- /dev/null +++ b/src/components/new-tab-link/template.njk @@ -0,0 +1,3 @@ +{% if params.text %} +{{ 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 %} +{% endif %} diff --git a/src/components/new-tab-link/template.test.js b/src/components/new-tab-link/template.test.js new file mode 100644 index 00000000..08f11a81 --- /dev/null +++ b/src/components/new-tab-link/template.test.js @@ -0,0 +1,56 @@ +/* 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') + }) + }) +}) From cb71ff632b42c1b62e5a93e55e538cc4928397c6 Mon Sep 17 00:00:00 2001 From: Mat Carey Date: Wed, 31 Oct 2018 12:01:36 +0000 Subject: [PATCH 2/3] Fixed href and readme. --- src/components/new-tab-link/README.md | 34 ++------------------ src/components/new-tab-link/template.njk | 2 +- src/components/new-tab-link/template.test.js | 8 +++++ 3 files changed, 12 insertions(+), 32 deletions(-) diff --git a/src/components/new-tab-link/README.md b/src/components/new-tab-link/README.md index 90476c55..428c3a23 100644 --- a/src/components/new-tab-link/README.md +++ b/src/components/new-tab-link/README.md @@ -1,35 +1,7 @@ # New Tab Link -## Introduction +A link which opens a new tab or window. -## Guidance +### License -## Quick start examples - -### Component default - -#### Markup - -#### Macro - -### Notification-badge--with-text - -#### Markup - -#### Macro - -## Requirements - -### Build tool configuration - -### Static asset path configuration - -## Component arguments - -### Setting up Nunjucks views and paths - -## Contribution - -## License - -MIT +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/template.njk b/src/components/new-tab-link/template.njk index 37744e5b..6d878d4c 100644 --- a/src/components/new-tab-link/template.njk +++ b/src/components/new-tab-link/template.njk @@ -1,3 +1,3 @@ {% if params.text %} -{{ 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 %} +{{ 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 %} {% endif %} diff --git a/src/components/new-tab-link/template.test.js b/src/components/new-tab-link/template.test.js index 08f11a81..c6766584 100644 --- a/src/components/new-tab-link/template.test.js +++ b/src/components/new-tab-link/template.test.js @@ -52,5 +52,13 @@ describe('New Tab 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') + }) }) }) From be4600047e142b568b076a600733367828c543d8 Mon Sep 17 00:00:00 2001 From: Steven Proctor Date: Mon, 5 Nov 2018 11:01:44 +0000 Subject: [PATCH 3/3] Updated READMEs --- src/components/account-menu/README.md | 2 + src/components/new-tab-link/README.md | 4 +- src/components/notification-badge/README.md | 210 +------------------- 3 files changed, 6 insertions(+), 210 deletions(-) diff --git a/src/components/account-menu/README.md b/src/components/account-menu/README.md index ab95d277..c578e030 100644 --- 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 index 428c3a23..1e5afd6c 100644 --- a/src/components/new-tab-link/README.md +++ b/src/components/new-tab-link/README.md @@ -1,6 +1,6 @@ -# New Tab Link +# Open a link in a new window or tab -A link which opens a new tab or window. +A link that opens a new tab or window. ### License diff --git a/src/components/notification-badge/README.md b/src/components/notification-badge/README.md index 8556e31d..9bcb9a48 100644 --- 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 - - 3 - -#### 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 - - New - -#### 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 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeRequiredDescription
elementstringNoWhether 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`.
text (or) htmlstringYesText 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`.
namestringYesName for the `input` or `button`. This has no effect on `a` elements.
typestringYesType of `input` or `button` – `button`, `submit` or `reset`. Defaults to `submit`. This has no effect on `a` elements.
valuestringYesValue for the `button` tag. This has no effect on `a` or `input` elements.
disabledbooleanNoWhether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically.
hrefstringNoThe 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.
classesstringNoOptional additional classes
attributesobjectNoAny extra HTML attributes (for example data attributes) to add to the button component.
- -### 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").