From c8979628724ed3c47863537d8cee56dfdedda1d2 Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Fri, 10 May 2024 10:47:59 +0100 Subject: [PATCH 1/9] add tags draft guidance --- docs/components/tags.md | 55 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 docs/components/tags.md diff --git a/docs/components/tags.md b/docs/components/tags.md new file mode 100644 index 0000000..51787d4 --- /dev/null +++ b/docs/components/tags.md @@ -0,0 +1,55 @@ +--- +layout: layouts/component.njk +title: Tags +description: Use tags to show a status. Tags only display information and are not interactive. +tags: + - component +--- + +[add example] + +## When to use + +Use tags to help users: + +- understand the status of an activity or a process +- keep track of progress +- understand when they need to take an action + +For example, tags can help users to: + +- track prescription requests +- understand when they need to take an action regarding a hospital referral + +## When not to use + +Too many tags, and lots of variation in tag colours, may clutter a page and overwhelm users. Tags can also affect the visual hierarchy of a page. This means tags should be used sparingly. + +## How to use + +Tags can be placed within a card or outside of one. Inside a card, tags should always be left-aligned. Outside a card, tags can be aligned to the left or the right. + +Tag text should: + +- be in sentence case +- describe status in as few words as possible + +## How not to use + +Do not use tags: + +- as a header or grouping-class for elements or information +- as a selectable element + +Tag text should not: + +- be in bold +- start with a verb – users may think they can select the tag + +## Accessibility + +Tag colours meet [WCAG 2.2 Success Criterion 1.4.3 Contrast (Minimum)](https://www.w3.org/TR/WCAG22/#contrast-minimum) AAA. + +## Research + +In our research, we found that red tags could cause some participants to feel concerned. Red was associated with something having gone wrong. From 7f332764b362add2e7c6122a863f8ea6a7a65c47 Mon Sep 17 00:00:00 2001 From: EdwardScull Date: Tue, 28 May 2024 11:26:56 +0100 Subject: [PATCH 2/9] Tag macro and example updated --- docs/components/tags.md | 2 +- docs/examples/tags/tag.njk | 129 +++++++++++++++++++++++++++++++++++ docs/index.njk | 1 + src/all.scss | 1 + src/components/tag/_tag.scss | 111 ++++++++++++++++++++++++++++++ src/components/tag/macro.njk | 3 + src/components/tag/tag.njk | 1 + 7 files changed, 247 insertions(+), 1 deletion(-) create mode 100644 docs/examples/tags/tag.njk create mode 100644 src/components/tag/_tag.scss create mode 100644 src/components/tag/macro.njk create mode 100644 src/components/tag/tag.njk diff --git a/docs/components/tags.md b/docs/components/tags.md index 51787d4..b8e7494 100644 --- a/docs/components/tags.md +++ b/docs/components/tags.md @@ -6,7 +6,7 @@ tags: - component --- -[add example] +{% example "tags/tag.njk" %} ## When to use diff --git a/docs/examples/tags/tag.njk b/docs/examples/tags/tag.njk new file mode 100644 index 0000000..4a58207 --- /dev/null +++ b/docs/examples/tags/tag.njk @@ -0,0 +1,129 @@ +--- +layout: layouts/example.njk +title: Tags +figmaLink: https://www.figma.com/design/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?node-id=4717-12197&t=YvsL72MynPbHVYr2-0 +vueLink: https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?path=/docs/components-nhstag--docs +--- + +{% from 'tag/macro.njk' import tag %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Class name Tag
+ nhsapp-tag--white + + {{ tag({ + text: "Started", + classes: "nhsapp-tag--white" + })}} +
+ nhsapp-tag--grey + + {{ tag({ + text: "Not started", + classes: "nhsapp-tag--grey" + })}} +
+ nhsapp-tag--green + + {{ tag({ + text: "New", + classes: "nhsapp-tag--green" + })}} +
+ nhsapp-tag--aqua-green + + {{ tag({ + text: "Active", + classes: "nhsapp-tag--aqua-green" + })}} +
+ nhsapp-tag--blue + + {{ tag({ + text: "Pending", + classes: "nhsapp-tag--blue" + })}} +
+ nhsapp-tag--purple + + {{ tag({ + text: "Received", + classes: "nhsapp-tag--purple" + })}} +
+ nhsapp-tag--pink + + {{ tag({ + text: "Sent", + classes: "nhsapp-tag--pink" + })}} +
+ nhsapp-tag--red + + {{ tag({ + text: "Rejected", + classes: "nhsapp-tag--red" + })}} +
+ nhsapp-tag--orange + + {{ tag({ + text: "Declined", + classes: "nhsapp-tag--orange" + })}} +
+ nhsapp-tag--yellow + + {{ tag({ + text: "Delayed", + classes: "nhsapp-tag--yellow" + })}} +
\ No newline at end of file diff --git a/docs/index.njk b/docs/index.njk index 00537af..013e6f0 100644 --- a/docs/index.njk +++ b/docs/index.njk @@ -4,6 +4,7 @@ {%- from 'hero/macro.njk' import hero -%} {%- from 'card/macro.njk' import card -%} +{%- from 'tag/macro.njk' import tag -%} {% block header %} {{ super() }} diff --git a/src/all.scss b/src/all.scss index 2b8643e..79f58a5 100644 --- a/src/all.scss +++ b/src/all.scss @@ -2,3 +2,4 @@ @import "node_modules/nhsuk-frontend/packages/core/settings/all.scss"; @import "./components/card/card.scss"; +@import "./components/tag/tag.scss"; diff --git a/src/components/tag/_tag.scss b/src/components/tag/_tag.scss new file mode 100644 index 0000000..18c8488 --- /dev/null +++ b/src/components/tag/_tag.scss @@ -0,0 +1,111 @@ +/* ========================================================================== + #TAG + ========================================================================== */ + + $color_tag-aqua-green-background: #cce7e6; + $color_tag-aqua-green-text: #004642; + $color_tag-blue-background: #d2e1ef; + $color_tag-blue-text: #01407d; + $color_tag-green-text: #03501d; + $color_tag-green-background: #c9e6d8; + $color_tag-grey-background: #e6e2e2; + $color_tag-grey-text: #303e4f; + $color_tag-purple-background: #d9d7eb; + $color_tag-purple-text: #532d8b; + $color_tag-orange-background: #fae1bc; + $color_tag-orange-text: #533c00; + $color_tag-pink-background: #efd3e3; + $color_tag-pink-text: #57133a; + $color_tag-red-background: #f8d9d9; + $color_tag-red-text: #7e0d04; + $color_tag-yellow-background: #eee8a7; + $color_tag-yellow-text: #5b4701; + + .nhsapp-tag { + @include nhsuk-font($size: 16, $weight: normal, $line-height: 1.25); + background-color: $color_tag-blue-background; + border-radius: 2px; + color: $color_tag-blue-text; + padding: 4px 10px; + display: inline-block; + + @include mq($from: tablet) { + line-height: 1.4285em; + } + } + + /* Colour variants + ========================================================================== */ + + .nhsapp-tag--white { + background-color: $color_nhsuk-white; + border-color: $color_nhsuk-black; + color: $color_nhsuk-black; + } + + .nhsapp-tag--grey { + background-color: $color_tag-grey-background; + border-color: $color_tag-grey-text; + color: $color_tag-grey-text; + } + + .nhsapp-tag--green { + background-color: $color_tag-green-background; + border-color: $color_tag-green-text; + color: $color_tag-green-text; + } + + .nhsapp-tag--aqua-green { + background-color: $color_tag-aqua-green-background; + border-color: $color_tag-aqua-green-text; + color: $color_tag-aqua-green-text; + } + + .nhsapp-tag--blue { + background-color: $color_tag-blue-background; + border-color: $color_tag-blue-text; + color: $color_tag-blue-text; + } + + .nhsapp-tag--purple { + background-color: $color_tag-purple-background; + border-color: $color_tag-purple-text; + color: $color_tag-purple-text; + } + + .nhsapp-tag--pink { + background-color: $color_tag-pink-background; + border-color: $color_tag-pink-text; + color: $color_tag-pink-text; + } + + .nhsapp-tag--red { + background-color: $color_tag-red-background; + border-color: $color_tag-red-text; + color: $color_tag-red-text; + } + + .nhsapp-tag--orange { + background-color: $color_tag-orange-background; + border-color: $color_tag-orange-text; + color: $color_tag-orange-text; + } + + .nhsapp-tag--yellow { + background-color: $color_tag-yellow-background; + border-color: $color_tag-yellow-text; + color: $color_tag-yellow-text; + } + + .nhsapp-tag--text-color { + background-color: transparent; + border-color: transparent; + color: $nhsuk-text-color; + } + + .nhsapp-tag--secondary-text-color { + background-color: transparent; + border-color: transparent; + color: $nhsuk-secondary-text-color; + } + \ No newline at end of file diff --git a/src/components/tag/macro.njk b/src/components/tag/macro.njk new file mode 100644 index 0000000..fd2f4c1 --- /dev/null +++ b/src/components/tag/macro.njk @@ -0,0 +1,3 @@ +{% macro tag(params) %} + {%- include "./tag.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/src/components/tag/tag.njk b/src/components/tag/tag.njk new file mode 100644 index 0000000..e591d99 --- /dev/null +++ b/src/components/tag/tag.njk @@ -0,0 +1 @@ +{{ params.text }} \ No newline at end of file From c8372b23213f38132084295dab0940ebd309fbdf Mon Sep 17 00:00:00 2001 From: EdwardScull Date: Tue, 28 May 2024 11:33:27 +0100 Subject: [PATCH 3/9] lint fix --- src/components/tag/_tag.scss | 209 +++++++++++++++++------------------ 1 file changed, 104 insertions(+), 105 deletions(-) diff --git a/src/components/tag/_tag.scss b/src/components/tag/_tag.scss index 18c8488..8dc37be 100644 --- a/src/components/tag/_tag.scss +++ b/src/components/tag/_tag.scss @@ -2,110 +2,109 @@ #TAG ========================================================================== */ - $color_tag-aqua-green-background: #cce7e6; - $color_tag-aqua-green-text: #004642; - $color_tag-blue-background: #d2e1ef; - $color_tag-blue-text: #01407d; - $color_tag-green-text: #03501d; - $color_tag-green-background: #c9e6d8; - $color_tag-grey-background: #e6e2e2; - $color_tag-grey-text: #303e4f; - $color_tag-purple-background: #d9d7eb; - $color_tag-purple-text: #532d8b; - $color_tag-orange-background: #fae1bc; - $color_tag-orange-text: #533c00; - $color_tag-pink-background: #efd3e3; - $color_tag-pink-text: #57133a; - $color_tag-red-background: #f8d9d9; - $color_tag-red-text: #7e0d04; - $color_tag-yellow-background: #eee8a7; - $color_tag-yellow-text: #5b4701; - - .nhsapp-tag { - @include nhsuk-font($size: 16, $weight: normal, $line-height: 1.25); - background-color: $color_tag-blue-background; - border-radius: 2px; - color: $color_tag-blue-text; - padding: 4px 10px; - display: inline-block; - - @include mq($from: tablet) { - line-height: 1.4285em; - } +$color_tag-aqua-green-background: #cce7e6; +$color_tag-aqua-green-text: #004642; +$color_tag-blue-background: #d2e1ef; +$color_tag-blue-text: #01407d; +$color_tag-green-text: #03501d; +$color_tag-green-background: #c9e6d8; +$color_tag-grey-background: #e6e2e2; +$color_tag-grey-text: #303e4f; +$color_tag-purple-background: #d9d7eb; +$color_tag-purple-text: #532d8b; +$color_tag-orange-background: #fae1bc; +$color_tag-orange-text: #533c00; +$color_tag-pink-background: #efd3e3; +$color_tag-pink-text: #57133a; +$color_tag-red-background: #f8d9d9; +$color_tag-red-text: #7e0d04; +$color_tag-yellow-background: #eee8a7; +$color_tag-yellow-text: #5b4701; + +.nhsapp-tag { + @include nhsuk-font($size: 16, $weight: normal, $line-height: 1.25); + background-color: $color_tag-blue-background; + border-radius: 2px; + color: $color_tag-blue-text; + padding: 4px 10px; + display: inline-block; + + @include mq($from: tablet) { + line-height: 1.4285em; } - - /* Colour variants +} + +/* Colour variants ========================================================================== */ - - .nhsapp-tag--white { - background-color: $color_nhsuk-white; - border-color: $color_nhsuk-black; - color: $color_nhsuk-black; - } - - .nhsapp-tag--grey { - background-color: $color_tag-grey-background; - border-color: $color_tag-grey-text; - color: $color_tag-grey-text; - } - - .nhsapp-tag--green { - background-color: $color_tag-green-background; - border-color: $color_tag-green-text; - color: $color_tag-green-text; - } - - .nhsapp-tag--aqua-green { - background-color: $color_tag-aqua-green-background; - border-color: $color_tag-aqua-green-text; - color: $color_tag-aqua-green-text; - } - - .nhsapp-tag--blue { - background-color: $color_tag-blue-background; - border-color: $color_tag-blue-text; - color: $color_tag-blue-text; - } - - .nhsapp-tag--purple { - background-color: $color_tag-purple-background; - border-color: $color_tag-purple-text; - color: $color_tag-purple-text; - } - - .nhsapp-tag--pink { - background-color: $color_tag-pink-background; - border-color: $color_tag-pink-text; - color: $color_tag-pink-text; - } - - .nhsapp-tag--red { - background-color: $color_tag-red-background; - border-color: $color_tag-red-text; - color: $color_tag-red-text; - } - - .nhsapp-tag--orange { - background-color: $color_tag-orange-background; - border-color: $color_tag-orange-text; - color: $color_tag-orange-text; - } - - .nhsapp-tag--yellow { - background-color: $color_tag-yellow-background; - border-color: $color_tag-yellow-text; - color: $color_tag-yellow-text; - } - - .nhsapp-tag--text-color { - background-color: transparent; - border-color: transparent; - color: $nhsuk-text-color; - } - - .nhsapp-tag--secondary-text-color { - background-color: transparent; - border-color: transparent; - color: $nhsuk-secondary-text-color; - } - \ No newline at end of file + +.nhsapp-tag--white { + background-color: $color_nhsuk-white; + border-color: $color_nhsuk-black; + color: $color_nhsuk-black; +} + +.nhsapp-tag--grey { + background-color: $color_tag-grey-background; + border-color: $color_tag-grey-text; + color: $color_tag-grey-text; +} + +.nhsapp-tag--green { + background-color: $color_tag-green-background; + border-color: $color_tag-green-text; + color: $color_tag-green-text; +} + +.nhsapp-tag--aqua-green { + background-color: $color_tag-aqua-green-background; + border-color: $color_tag-aqua-green-text; + color: $color_tag-aqua-green-text; +} + +.nhsapp-tag--blue { + background-color: $color_tag-blue-background; + border-color: $color_tag-blue-text; + color: $color_tag-blue-text; +} + +.nhsapp-tag--purple { + background-color: $color_tag-purple-background; + border-color: $color_tag-purple-text; + color: $color_tag-purple-text; +} + +.nhsapp-tag--pink { + background-color: $color_tag-pink-background; + border-color: $color_tag-pink-text; + color: $color_tag-pink-text; +} + +.nhsapp-tag--red { + background-color: $color_tag-red-background; + border-color: $color_tag-red-text; + color: $color_tag-red-text; +} + +.nhsapp-tag--orange { + background-color: $color_tag-orange-background; + border-color: $color_tag-orange-text; + color: $color_tag-orange-text; +} + +.nhsapp-tag--yellow { + background-color: $color_tag-yellow-background; + border-color: $color_tag-yellow-text; + color: $color_tag-yellow-text; +} + +.nhsapp-tag--text-color { + background-color: transparent; + border-color: transparent; + color: $nhsuk-text-color; +} + +.nhsapp-tag--secondary-text-color { + background-color: transparent; + border-color: transparent; + color: $nhsuk-secondary-text-color; +} From 6a8970f89e9b858d12fb03c4fc009420f7f1b155 Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Wed, 5 Jun 2024 11:41:26 +0100 Subject: [PATCH 4/9] add backlog id --- docs/components/tags.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/components/tags.md b/docs/components/tags.md index b8e7494..b41bcfb 100644 --- a/docs/components/tags.md +++ b/docs/components/tags.md @@ -2,6 +2,7 @@ layout: layouts/component.njk title: Tags description: Use tags to show a status. Tags only display information and are not interactive. +backlogID: 174 tags: - component --- From 8f8607f22e27f9fd0609b37115d806eff0247925 Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Mon, 10 Jun 2024 15:27:57 +0100 Subject: [PATCH 5/9] remove border colors --- src/components/tag/_tag.scss | 22 ---------------------- 1 file changed, 22 deletions(-) diff --git a/src/components/tag/_tag.scss b/src/components/tag/_tag.scss index 8dc37be..106cd38 100644 --- a/src/components/tag/_tag.scss +++ b/src/components/tag/_tag.scss @@ -39,72 +39,50 @@ $color_tag-yellow-text: #5b4701; .nhsapp-tag--white { background-color: $color_nhsuk-white; - border-color: $color_nhsuk-black; color: $color_nhsuk-black; } .nhsapp-tag--grey { background-color: $color_tag-grey-background; - border-color: $color_tag-grey-text; color: $color_tag-grey-text; } .nhsapp-tag--green { background-color: $color_tag-green-background; - border-color: $color_tag-green-text; color: $color_tag-green-text; } .nhsapp-tag--aqua-green { background-color: $color_tag-aqua-green-background; - border-color: $color_tag-aqua-green-text; color: $color_tag-aqua-green-text; } .nhsapp-tag--blue { background-color: $color_tag-blue-background; - border-color: $color_tag-blue-text; color: $color_tag-blue-text; } .nhsapp-tag--purple { background-color: $color_tag-purple-background; - border-color: $color_tag-purple-text; color: $color_tag-purple-text; } .nhsapp-tag--pink { background-color: $color_tag-pink-background; - border-color: $color_tag-pink-text; color: $color_tag-pink-text; } .nhsapp-tag--red { background-color: $color_tag-red-background; - border-color: $color_tag-red-text; color: $color_tag-red-text; } .nhsapp-tag--orange { background-color: $color_tag-orange-background; - border-color: $color_tag-orange-text; color: $color_tag-orange-text; } .nhsapp-tag--yellow { background-color: $color_tag-yellow-background; - border-color: $color_tag-yellow-text; color: $color_tag-yellow-text; } - -.nhsapp-tag--text-color { - background-color: transparent; - border-color: transparent; - color: $nhsuk-text-color; -} - -.nhsapp-tag--secondary-text-color { - background-color: transparent; - border-color: transparent; - color: $nhsuk-secondary-text-color; -} From 6e49a1f0bf95e1836e845a7370d515cd77018d03 Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Mon, 10 Jun 2024 16:41:35 +0100 Subject: [PATCH 6/9] rename page to tag --- docs/components/{tags.md => tag.md} | 2 +- docs/examples/tags/tag.njk | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename docs/components/{tags.md => tag.md} (99%) diff --git a/docs/components/tags.md b/docs/components/tag.md similarity index 99% rename from docs/components/tags.md rename to docs/components/tag.md index b41bcfb..8e2147d 100644 --- a/docs/components/tags.md +++ b/docs/components/tag.md @@ -1,6 +1,6 @@ --- layout: layouts/component.njk -title: Tags +title: Tag description: Use tags to show a status. Tags only display information and are not interactive. backlogID: 174 tags: diff --git a/docs/examples/tags/tag.njk b/docs/examples/tags/tag.njk index 4a58207..ca8a28f 100644 --- a/docs/examples/tags/tag.njk +++ b/docs/examples/tags/tag.njk @@ -1,6 +1,6 @@ --- layout: layouts/example.njk -title: Tags +title: Tag figmaLink: https://www.figma.com/design/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?node-id=4717-12197&t=YvsL72MynPbHVYr2-0 vueLink: https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?path=/docs/components-nhstag--docs --- From cb4dc2d0903109559c5dd0fdf558454f31841cf1 Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Tue, 11 Jun 2024 09:18:51 +0100 Subject: [PATCH 7/9] add border to white tag and adjust padding --- src/components/tag/_tag.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/tag/_tag.scss b/src/components/tag/_tag.scss index 106cd38..04df469 100644 --- a/src/components/tag/_tag.scss +++ b/src/components/tag/_tag.scss @@ -24,9 +24,10 @@ $color_tag-yellow-text: #5b4701; .nhsapp-tag { @include nhsuk-font($size: 16, $weight: normal, $line-height: 1.25); background-color: $color_tag-blue-background; + border: 1px solid transparent; border-radius: 2px; color: $color_tag-blue-text; - padding: 4px 10px; + padding: 3px 9px; // Minus the border width display: inline-block; @include mq($from: tablet) { @@ -39,6 +40,7 @@ $color_tag-yellow-text: #5b4701; .nhsapp-tag--white { background-color: $color_nhsuk-white; + border-color: $color_nhsuk-grey-4; color: $color_nhsuk-black; } From 707f9d0cb93b80c1a257a49b3d467af71ac9b046 Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Wed, 12 Jun 2024 14:50:09 +0100 Subject: [PATCH 8/9] remove macro from index page --- docs/index.njk | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/index.njk b/docs/index.njk index 013e6f0..00537af 100644 --- a/docs/index.njk +++ b/docs/index.njk @@ -4,7 +4,6 @@ {%- from 'hero/macro.njk' import hero -%} {%- from 'card/macro.njk' import card -%} -{%- from 'tag/macro.njk' import tag -%} {% block header %} {{ super() }} From 9f3991418b36bca23e3434a94a302548bf94e0b4 Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Wed, 12 Jun 2024 15:41:58 +0100 Subject: [PATCH 9/9] reorder css properties --- src/components/tag/_tag.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tag/_tag.scss b/src/components/tag/_tag.scss index 04df469..8ff002b 100644 --- a/src/components/tag/_tag.scss +++ b/src/components/tag/_tag.scss @@ -27,8 +27,8 @@ $color_tag-yellow-text: #5b4701; border: 1px solid transparent; border-radius: 2px; color: $color_tag-blue-text; - padding: 3px 9px; // Minus the border width display: inline-block; + padding: 3px 9px; // Minus the border width @include mq($from: tablet) { line-height: 1.4285em;