From e2d99c82ef0f566c01a1b33164e8c8c039f04bf8 Mon Sep 17 00:00:00 2001 From: trevorsaint Date: Tue, 26 Jan 2021 09:28:10 +0000 Subject: [PATCH] Added flexibility to override default icon text for accessibility. Code consistency tweaks --- src/components/panel/_macro-options.md | 1 + src/components/panel/_macro.njk | 2 +- src/components/panel/examples/bare/index.njk | 4 ++-- .../panel/examples/branded/index.njk | 2 +- .../panel/examples/error-header/index.njk | 20 +++++++++---------- src/components/panel/examples/error/index.njk | 10 +++++----- .../panel/examples/information/index.njk | 2 +- .../panel/examples/success/index.njk | 8 ++++---- src/components/panel/examples/warn/index.njk | 2 +- 9 files changed, 26 insertions(+), 25 deletions(-) diff --git a/src/components/panel/_macro-options.md b/src/components/panel/_macro-options.md index 63b5133bb6..39d11124f2 100644 --- a/src/components/panel/_macro-options.md +++ b/src/components/panel/_macro-options.md @@ -9,6 +9,7 @@ | id | string | false | Custom id to add to the panel | | attributes | object | false | HTML attributes to apply to the panel (e.g. data attributes) | | icon | string | false | Set this to the name of the icon you want to be included before the contents of the panel | +| iconText | string | false | Overrides the accessible text for `warn` and `warn-branded` panel icons | | iconSize | string | false | Set this to the size of the icon you want can be set to "m", "l" "xl" to match heading size. Defaults to the size of regualar text | | iconsPath | string | false | Set this to the path to the icon you want to be included before the contents of the panel | | dsExample | boolean | false | Defaulted to `true` in Design System examples but wont be set when used outside of the Design System. This will stop the page focusing on the panel on load - _only for use in DS examples_ | diff --git a/src/components/panel/_macro.njk b/src/components/panel/_macro.njk index 6215d0b45a..e0d5cdcd43 100644 --- a/src/components/panel/_macro.njk +++ b/src/components/panel/_macro.njk @@ -31,7 +31,7 @@ {% if params is defined and params and params.type == "warn" or params.type == "warn-branded" %} - Warning + {{ params.iconText | default("Warning: ") }} {% endif %} {% if params is defined and params and params.title is defined and params.title %} diff --git a/src/components/panel/examples/bare/index.njk b/src/components/panel/examples/bare/index.njk index defec0e69d..5c431d4634 100644 --- a/src/components/panel/examples/bare/index.njk +++ b/src/components/panel/examples/bare/index.njk @@ -1,8 +1,8 @@ {% from "components/panel/_macro.njk" import onsPanel %} {% call onsPanel({ - type: "bare", - icon: "lock" + type: 'bare', + icon: 'lock' }) %} Here is some text with an icon. diff --git a/src/components/panel/examples/branded/index.njk b/src/components/panel/examples/branded/index.njk index 112ebe9d02..e0b93f829b 100644 --- a/src/components/panel/examples/branded/index.njk +++ b/src/components/panel/examples/branded/index.njk @@ -3,7 +3,7 @@ --- {% from "components/panel/_macro.njk" import onsPanel %} {% call onsPanel({ - "type": "branded" + "type": 'branded' }) %} This guidance is for the paper questionnaire.
View the question guidance for completing the census online. diff --git a/src/components/panel/examples/error-header/index.njk b/src/components/panel/examples/error-header/index.njk index af98089fdf..3b3ec995b5 100644 --- a/src/components/panel/examples/error-header/index.njk +++ b/src/components/panel/examples/error-header/index.njk @@ -2,24 +2,24 @@ {% from "components/lists/_macro.njk" import onsList %} {% call onsPanel({ - "title": "There are 2 problems with your answer", - "titleTag": "h1", - "type": "error", + "title": 'There are 2 problems with your answer', + "titleTag": 'h1', + "type": 'error', "dsExample": isPatternLib }) %} {{ onsList({ - "element": "ol", + "element": 'ol', "itemsList": [ { - "text": "Enter a number", - "url": "#container-test-number", - "classes": "js-inpagelink" + "text": 'Enter a number', + "url": '#container-test-number', + "classes": 'js-inpagelink' }, { - "text": "Enter a number less than or equal to 100", - "url": "#container-test-percent", - "classes": "js-inpagelink" + "text": 'Enter a number less than or equal to 100', + "url": '#container-test-percent', + "classes": 'js-inpagelink' } ] }) diff --git a/src/components/panel/examples/error/index.njk b/src/components/panel/examples/error/index.njk index a47b40c177..c2b41d9f4f 100644 --- a/src/components/panel/examples/error/index.njk +++ b/src/components/panel/examples/error/index.njk @@ -2,18 +2,18 @@ {{ onsInput({ - "id": "number", - "type": "number", - "classes": "input--w-5", + "id": 'number', + "type": 'number', + "classes": 'input--w-5', "attributes": { "min": 0, "required": true }, "label": { - "text": "Number of employees paid monthly" + "text": 'Number of employees paid monthly' }, "error": { - "text": "Enter a number", + "text": 'Enter a number', "dsExample": isPatternLib } }) diff --git a/src/components/panel/examples/information/index.njk b/src/components/panel/examples/information/index.njk index b78b3bfdc2..07220628ce 100644 --- a/src/components/panel/examples/information/index.njk +++ b/src/components/panel/examples/information/index.njk @@ -1,6 +1,6 @@ {% from "components/panel/_macro.njk" import onsPanel %} {{ onsPanel({ - "body": "

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + "body": '

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

' }) }} diff --git a/src/components/panel/examples/success/index.njk b/src/components/panel/examples/success/index.njk index 11e2c8c127..e84d9d99ce 100644 --- a/src/components/panel/examples/success/index.njk +++ b/src/components/panel/examples/success/index.njk @@ -1,9 +1,9 @@ {% from "components/panel/_macro.njk" import onsPanel %} {{ onsPanel({ - "type": "success", - "id": "success-id", - "icon": "check", - "body": "Information has been successfully submitted." + "type": 'success', + "id": 'success-id', + "icon": 'check', + "body": 'Information has been successfully submitted.' }) }} diff --git a/src/components/panel/examples/warn/index.njk b/src/components/panel/examples/warn/index.njk index c5872ea863..58867c8a6b 100644 --- a/src/components/panel/examples/warn/index.njk +++ b/src/components/panel/examples/warn/index.njk @@ -1,7 +1,7 @@ {% from "components/panel/_macro.njk" import onsPanel %} {% call onsPanel({ - "type": "warn" + "type": 'warn' }) %} All of the information about this person will be deleted