Skip to content

Commit 7401993

Browse files
edwardhorsfordedwardhorsford
committed
Add macro options and mjs
1 parent 6c67c92 commit 7401993

5 files changed

Lines changed: 146 additions & 15 deletions

File tree

‎packages/nhsuk-frontend/src/nhsuk/components/index.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export * from './checkboxes/checkboxes.mjs'
44
export * from './details/details.mjs'
55
export * from './error-summary/error-summary.mjs'
66
export * from './header/header.mjs'
7+
export * from './notification-banner/notification-banner.mjs'
78
export * from './radios/radios.mjs'
89
export * from './skip-link/skip-link.mjs'
910
export * from './tabs/tabs.mjs'

‎packages/nhsuk-frontend/src/nhsuk/components/notification-banner/README.md‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,8 @@
22

33
## Installation
44

5-
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
5+
See the [main README quick start guide](https://github.com/nhsuk/nhsuk-frontend#quick-start) for how to install this component.
66

7-
## Guidance and Examples
7+
## Guidance and examples
88

9-
Find out when to use the notification banner component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/notification-banner).
10-
11-
## Component options
12-
13-
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
14-
15-
See [options table](https://design-system.service.gov.uk/components/notification-banner/#options-notification-banner-example) for details.
9+
To learn more about the notification banner component and when to use it, visit the [design system in the NHS digital service manual](https://service-manual.nhs.uk/design-system/components/notification-banner) for guidance, examples and options.

‎packages/nhsuk-frontend/src/nhsuk/components/notification-banner/_index.scss‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,10 @@
2929
margin: 0;
3030
padding: 0;
3131
color: $color_nhsuk-white;
32-
font-weight: $nhsuk-font-bold;
3332

3433
// Set the size again because this element is a heading and the user agent
3534
// font size overrides the inherited font size
36-
@include nhsuk-font-size($size: 19);
37-
// @include nhsuk-typography-weight-bold;
38-
35+
@include nhsuk-font($size: 19, $weight: bold);
3936
}
4037

4138
.nhsuk-notification-banner__content {
@@ -72,8 +69,7 @@
7269
margin: 0 0 nhsuk-spacing(3);
7370
padding: 0;
7471

75-
@include nhsuk-font-size($size: 26);
76-
@include nhsuk-typography-weight-bold;
72+
@include nhsuk-font($size: 26, $weight: bold);
7773
}
7874

7975
.nhsuk-notification-banner__link {

‎packages/nhsuk-frontend/src/nhsuk/components/notification-banner/macro-options.json‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
[
2+
{
3+
"name": "text",
4+
"type": "string",
5+
"required": true,
6+
"description": "The text that displays in the notification banner. You can use any string with this option. If you set `html`, this option is not required and is ignored."
7+
},
8+
{
9+
"name": "html",
10+
"type": "string",
11+
"required": true,
12+
"description": "The HTML to use within the notification banner. You can use any string with this option. If you set `html`, `text` is not required and is ignored."
13+
},
14+
{
15+
"name": "caller",
16+
"type": "nunjucks-block",
17+
"required": false,
18+
"description": "Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire notification banner component in a `call` block."
19+
},
20+
{
21+
"name": "titleText",
22+
"type": "string",
23+
"required": false,
24+
"description": "The title text that displays in the notification banner. You can use any string with this option. Use this option to set text that does not contain HTML. The available default values are 'Important', 'Success', and null:\n- if you do not set `type`, `titleText` defaults to `\"Important\"`\n- if you set `type` to `success`, `titleText` defaults to `\"Success\"`\n- if you set `titleHtml`, this option is ignored"
25+
},
26+
{
27+
"name": "titleHtml",
28+
"type": "string",
29+
"required": false,
30+
"description": "The title HTML to use within the notification banner. You can use any string with this option. Use this option to set text that contains HTML. If you set `titleHtml`, the `titleText` option is ignored."
31+
},
32+
{
33+
"name": "titleHeadingLevel",
34+
"type": "string",
35+
"required": false,
36+
"description": "Sets heading level for the title only. You can only use values between `1` and `6` with this option. The default is `2`."
37+
},
38+
{
39+
"name": "type",
40+
"type": "string",
41+
"required": false,
42+
"description": "The type of notification to render. You can use only `\"success\"` or `null` values with this option. If you set `type` to `\"success\"`, the notification banner sets `role` to `\"alert\"`. JavaScript then moves the keyboard focus to the notification banner when the page loads. If you do not set `type`, the notification banner sets `role` to `\"region\"`."
43+
},
44+
{
45+
"name": "role",
46+
"type": "string",
47+
"required": false,
48+
"description": "Overrides the value of the `role` attribute for the notification banner. Defaults to `\"region\"`. If you set `type` to `\"success\"`, `role` defaults to `\"alert\"`."
49+
},
50+
{
51+
"name": "titleId",
52+
"type": "string",
53+
"required": false,
54+
"description": "The `id` for the banner title, and the `aria-labelledby` attribute in the banner. Defaults to `\"nhsuk-notification-banner-title\"`."
55+
},
56+
{
57+
"name": "disableAutoFocus",
58+
"type": "boolean",
59+
"required": false,
60+
"description": "If you set `type` to `\"success\"`, or `role` to `\"alert\"`, JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set `disableAutoFocus` to `true`."
61+
},
62+
{
63+
"name": "classes",
64+
"type": "string",
65+
"required": false,
66+
"description": "The classes that you want to add to the notification banner."
67+
},
68+
{
69+
"name": "attributes",
70+
"type": "object",
71+
"required": false,
72+
"description": "The HTML attributes that you want to add to the notification banner, for example, data attributes."
73+
}
74+
]

‎packages/nhsuk-frontend/src/nhsuk/components/notification-banner/notification-banner.mjs‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/**
2+
* Notification banner component
3+
*
4+
* Adapted from https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs
5+
*/
6+
export class NotificationBanner {
7+
/**
8+
* @param {Element | null} [$root] - HTML element to use for notification banner
9+
* @param {NotificationBannerConfig} [config] - Notification banner config
10+
*/
11+
constructor($root, config = {}) {
12+
if (!$root || !($root instanceof HTMLElement)) {
13+
return this
14+
}
15+
16+
this.$root = $root
17+
18+
/**
19+
* Focus the notification banner
20+
*
21+
* If `role="alert"` is set, focus the element to help some assistive
22+
* technologies prioritise announcing it.
23+
*
24+
* You can turn off the auto-focus functionality by setting
25+
* `data-disable-auto-focus="true"` in the component HTML. You might wish to
26+
* do this based on user research findings, or to avoid a clash with another
27+
* element which should be focused when the page loads.
28+
*/
29+
if (
30+
this.$root.getAttribute('role') === 'alert' &&
31+
!config.disableAutoFocus
32+
) {
33+
console.log("Javascript running")
34+
this.$root.focus()
35+
}
36+
}
37+
}
38+
39+
/**
40+
* Initialise notification banner component
41+
*
42+
* @param {object} [options]
43+
* @param {Element | Document | null} [options.scope] - Scope of the document to search within
44+
* @param {boolean} [options.disableAutoFocus] - If set to `true` the notification
45+
* banner will not be focussed when the page loads.
46+
*/
47+
export function initNotificationBanner(options = {}) {
48+
const $scope = options.scope || document
49+
const $notificationBanners = $scope.querySelectorAll('.nhsuk-notification-banner')
50+
51+
$notificationBanners.forEach($notificationBanner => {
52+
new NotificationBanner($notificationBanner, {
53+
disableAutoFocus: options.disableAutoFocus || false
54+
})
55+
})
56+
}
57+
58+
/**
59+
* Notification banner config
60+
*
61+
* @typedef {object} NotificationBannerConfig
62+
* @property {boolean} [disableAutoFocus=false] - If set to `true` the
63+
* notification banner will not be focussed when the page loads. This only
64+
* applies if the component has a `role` of `alert` – in other cases the
65+
* component will not be focused on page load, regardless of this option.
66+
*/

0 commit comments

Comments
 (0)