Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove error notification banner type #2030

Merged
merged 2 commits into from
Nov 20, 2020
Merged

Remove error notification banner type #2030

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ecfe5e9
Remove error notification banner type
Nov 20, 2020
2c2cd4b
Adjust the full page example
Nov 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions app/views/full-page-examples/upload-your-photo-error/index.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
scenario: >-
As part of an online service, you are asked to upload your photo.

The upload will always fail with an error that uses the notification banner.
The upload will always result in a success (alert) message that uses the notification banner.
---

{# This example is based of the live "Passport" service: https://www.passport.service.gov.uk/photo/upload #}
Expand Down Expand Up @@ -44,8 +44,8 @@ scenario: >-
<form method="post" novalidate>
{% if isError %}
{{ govukNotificationBanner({
"type": "error",
"html": "<p class=\"govuk-notification-banner__heading\">There was a problem uploading your file. <a href=\"#\" class=\"govuk-notification-banner__link\">Please try again.</a></p>\n"
"type": "success",
"html": "<p class=\"govuk-notification-banner__heading\">Success, your photo has been uploaded</p>\n"
}) }}
{% endif %}

Expand Down
12 changes: 0 additions & 12 deletions src/govuk/components/notification-banner/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,16 +65,4 @@
@include govuk-link-style-success;
}
}

.govuk-notification-banner--error {
border-color: $govuk-error-colour;

.govuk-notification-banner__header {
background-color: $govuk-error-colour;
}

.govuk-notification-banner__link {
@include govuk-link-style-error;
}
}
}
24 changes: 4 additions & 20 deletions src/govuk/components/notification-banner/notification-banner.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,9 @@ params:
type: string
required: false
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', 'Error', and null:
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:
- if you do not set `type`, `titleText` defaults to 'Important'
- if you set `type` to `success`, `titleText` defaults to 'Success'
- if you set `type` to `error`, `titleText` defaults to 'Error'
- if you set `titleHtml`, this option is ignored
- name: titleHtml
type: string
Expand All @@ -27,19 +26,19 @@ params:
- name: type
type: string
required: false
description: The type of notification to render. You can use only the `success`, `error`, or null values with this option. If you set `type` to `success` or `error`, 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`.
description: The type of notification to render. You can use only the `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`.
- name: role
type: string
required: false
description: Overrides the value of the `role` attribute for the notification banner. Defaults to `region`. If you set `type` to `success` or `error`, `role` defaults to `alert`.
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`.
- name: titleId
type: string
required: false
description: The `id` for the banner title, and the `aria-labelledby` attribute in the banner. Defaults to `govuk-notification-banner-title`.
- name: disableAutoFocus
type: boolean
required: false
description: If you set `type` to `success` or `error`, 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`.
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`.
- name: classes
type: string
required: false
Expand Down Expand Up @@ -69,15 +68,6 @@ examples:
type: success
html: |
<h3 class="govuk-notification-banner__heading">4 files uploaded</h3><ul class="govuk-!-margin-0 govuk-list"><li><a href="link-1" class="govuk-notification-banner__link">government-strategy.pdf</a></li><li><a href="link-2" class="govuk-notification-banner__link">government-strategy-v1.pdf</a></li></ul>
- name: with type as error
data:
type: error
text: There was a problem uploading your file. Please try again.
- name: error with custom html
data:
type: error
html: |
<p class="govuk-notification-banner__heading">There was a problem uploading your file. <a href="#" class="govuk-notification-banner__link">Please try again.</a></p>
- name: with a list
data:
html: |
Expand Down Expand Up @@ -138,12 +128,6 @@ examples:
type: success
titleId: my-id
text: Email sent to example@email.com
- name: custom title id with type as error
hidden: true
data:
type: error
titleId: my-id
text: There was a problem uploading your file. Please try again.

- name: custom text
hidden: true
Expand Down
14 changes: 6 additions & 8 deletions src/govuk/components/notification-banner/template.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
{%- if params.type == "success" or params.type == "error" %}
{% set successOrError = true %}
{%- if params.type == "success" %}
{% set successBanner = true %}
{% endif %}

{%- if successOrError %}
{%- if successBanner %}
{% set typeClass = "govuk-notification-banner--" + params.type %}
{% endif %}

{% if params.role %}
{% set role = params.role %}
{% elif successOrError %}
{# If type is success or error, add `role="alert"` to prioritise the information in the notification banner to users of assistive technologies #}
{% elif successBanner %}
{# If type is success, add `role="alert"` to prioritise the information in the notification banner to users of assistive technologies #}
{% set role = "alert" %}
{% else %}
{# Otherwise add `role="region"` to make the notification banner a landmark to help users of assistive technologies to navigate to the banner #}
Expand All @@ -20,10 +20,8 @@
{% set title = params.titleHtml | safe %}
{%- elif params.titleText %}
{% set title = params.titleText %}
{%- elif params.type == "success" %}
{%- elif successBanner %}
{% set title = "Success" %}
{%- elif params.type == "error" %}
{% set title = "Error" %}
{%- else %}
{% set title = "Important" %}
{%- endif -%}
Expand Down
53 changes: 0 additions & 53 deletions src/govuk/components/notification-banner/template.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,59 +218,6 @@ describe('Notification-banner', () => {
})
})

describe('when error type is passed', () => {
it('renders with appropriate class', () => {
const $ = render('notification-banner', examples['with type as error'])

const $component = $('.govuk-notification-banner')
expect($component.hasClass('govuk-notification-banner--error')).toBeTruthy()
})

it('has role=alert attribute', () => {
const $ = render('notification-banner', examples['with type as error'])

const $component = $('.govuk-notification-banner')
expect($component.attr('role')).toEqual('alert')
})

it('does render aria-labelledby', () => {
const $ = render('notification-banner', examples['with type as error'])
const $component = $('.govuk-notification-banner')

expect($component.attr('aria-labelledby')).toEqual('govuk-notification-banner-title')
})

it('does render a title id for aria-labelledby', () => {
const $ = render('notification-banner', examples['with type as error'])
const $component = $('.govuk-notification-banner__title')

expect($component.attr('id')).toEqual('govuk-notification-banner-title')
})

it('renders custom title id', () => {
const $ = render('notification-banner', examples['custom title id with type as error'])
const $title = $('.govuk-notification-banner__title')

expect($title.attr('id')).toEqual('my-id')
})

it('renders default error title text', () => {
const $ = render('notification-banner', examples['with type as error'])
const $title = $('.govuk-notification-banner__title')

expect($title.html().trim()).toEqual('Error')
})

it('renders custom title id and aria-labelledby', () => {
const $ = render('notification-banner', examples['custom title id with type as error'])
const $component = $('.govuk-notification-banner')
const $title = $('.govuk-notification-banner__title')

expect($component.attr('aria-labelledby')).toEqual('my-id')
expect($title.attr('id')).toEqual('my-id')
})
})

describe('when type that is invalid is passed', () => {
it('has role=region attribute', () => {
const $ = render('notification-banner', examples['with invalid type'])
Expand Down