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..6d878d4c --- /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..c6766584 --- /dev/null +++ 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 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 - -| Name | - -Type | - -Required | - -Description | - -
|---|---|---|---|
| element | - -string | - -No | - -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`. | - -
| text (or) html | - -string | - -Yes | - -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`. | - -
| name | - -string | - -Yes | - -Name for the `input` or `button`. This has no effect on `a` elements. | - -
| type | - -string | - -Yes | - -Type of `input` or `button` – `button`, `submit` or `reset`. Defaults to `submit`. This has no effect on `a` elements. | - -
| value | - -string | - -Yes | - -Value for the `button` tag. This has no effect on `a` or `input` elements. | - -
| disabled | - -boolean | - -No | - -Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically. | - -
| href | - -string | - -No | - -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. | - -
| classes | - -string | - -No | - -Optional additional classes | - -
| attributes | - -object | - -No | - -Any extra HTML attributes (for example data attributes) to add to the button component. | - -