-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #81 from nhsuk/tags
Add tag component
- Loading branch information
Showing
6 changed files
with
281 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| --- | ||
| layout: layouts/component.njk | ||
| title: Tag | ||
| description: Use tags to show a status. Tags only display information and are not interactive. | ||
| backlogID: 174 | ||
| tags: | ||
| - component | ||
| --- | ||
|
|
||
| {% example "tags/tag.njk" %} | ||
|
|
||
| ## 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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| --- | ||
| layout: layouts/example.njk | ||
| 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 'tag/macro.njk' import tag %} | ||
|
|
||
| <table class="nhsuk-table"> | ||
| <thead class="nhsuk-table__head"> | ||
| <tr class="nhsuk-table__row"> | ||
| <th class="nhsuk-table__header" scope="col"> Class name </th> | ||
| <th class="nhsuk-table__header" scope="col"> Tag </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody class="nhsuk-table__body"> | ||
| <tr class="nhsuk-table__row"> | ||
| <td class="nhsuk-table__cell"> | ||
| <code> nhsapp-tag--white </code> | ||
| </td> | ||
| <td class="nhsuk-table__cell"> | ||
| {{ tag({ | ||
| text: "Started", | ||
| classes: "nhsapp-tag--white" | ||
| })}} | ||
| </td> | ||
| </tr> | ||
| <tr class="nhsuk-table__row"> | ||
| <td class="nhsuk-table__cell"> | ||
| <code> nhsapp-tag--grey </code> | ||
| </td> | ||
| <td class="nhsuk-table__cell"> | ||
| {{ tag({ | ||
| text: "Not started", | ||
| classes: "nhsapp-tag--grey" | ||
| })}} | ||
| </td> | ||
| </tr> | ||
| <tr class="nhsuk-table__row"> | ||
| <td class="nhsuk-table__cell"> | ||
| <code> nhsapp-tag--green </code> | ||
| </td> | ||
| <td class="nhsuk-table__cell"> | ||
| {{ tag({ | ||
| text: "New", | ||
| classes: "nhsapp-tag--green" | ||
| })}} | ||
| </td> | ||
| </tr> | ||
| <tr class="nhsuk-table__row"> | ||
| <td class="nhsuk-table__cell"> | ||
| <code> nhsapp-tag--aqua-green </code> | ||
| </td> | ||
| <td class="nhsuk-table__cell"> | ||
| {{ tag({ | ||
| text: "Active", | ||
| classes: "nhsapp-tag--aqua-green" | ||
| })}} | ||
| </td> | ||
| </tr> | ||
| <tr class="nhsuk-table__row"> | ||
| <td class="nhsuk-table__cell"> | ||
| <code> nhsapp-tag--blue </code> | ||
| </td> | ||
| <td class="nhsuk-table__cell"> | ||
| {{ tag({ | ||
| text: "Pending", | ||
| classes: "nhsapp-tag--blue" | ||
| })}} | ||
| </td> | ||
| </tr> | ||
| <tr class="nhsuk-table__row"> | ||
| <td class="nhsuk-table__cell"> | ||
| <code> nhsapp-tag--purple </code> | ||
| </td> | ||
| <td class="nhsuk-table__cell"> | ||
| {{ tag({ | ||
| text: "Received", | ||
| classes: "nhsapp-tag--purple" | ||
| })}} | ||
| </td> | ||
| </tr> | ||
| <tr class="nhsuk-table__row"> | ||
| <td class="nhsuk-table__cell"> | ||
| <code> nhsapp-tag--pink </code> | ||
| </td> | ||
| <td class="nhsuk-table__cell"> | ||
| {{ tag({ | ||
| text: "Sent", | ||
| classes: "nhsapp-tag--pink" | ||
| })}} | ||
| </td> | ||
| </tr> | ||
| <tr class="nhsuk-table__row"> | ||
| <td class="nhsuk-table__cell"> | ||
| <code> nhsapp-tag--red </code> | ||
| </td> | ||
| <td class="nhsuk-table__cell"> | ||
| {{ tag({ | ||
| text: "Rejected", | ||
| classes: "nhsapp-tag--red" | ||
| })}} | ||
| </td> | ||
| </tr> | ||
| <tr class="nhsuk-table__row"> | ||
| <td class="nhsuk-table__cell"> | ||
| <code> nhsapp-tag--orange </code> | ||
| </td> | ||
| <td class="nhsuk-table__cell"> | ||
| {{ tag({ | ||
| text: "Declined", | ||
| classes: "nhsapp-tag--orange" | ||
| })}} | ||
| </td> | ||
| </tr> | ||
| <tr class="nhsuk-table__row"> | ||
| <td class="nhsuk-table__cell"> | ||
| <code> nhsapp-tag--yellow </code> | ||
| </td> | ||
| <td class="nhsuk-table__cell"> | ||
| {{ tag({ | ||
| text: "Delayed", | ||
| classes: "nhsapp-tag--yellow" | ||
| })}} | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,6 @@ | ||
| @import "node_modules/nhsuk-frontend/packages/core/tools/all.scss"; | ||
| @import "node_modules/nhsuk-frontend/packages/core/settings/all.scss"; | ||
|
|
||
| @import "./components/card/card"; | ||
| @import "./components/card/card.scss"; | ||
| @import "./components/tag/tag.scss"; | ||
| @import "./components/badge/badge"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| /* ========================================================================== | ||
| #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: 1px solid transparent; | ||
| border-radius: 2px; | ||
| color: $color_tag-blue-text; | ||
| display: inline-block; | ||
| padding: 3px 9px; // Minus the border width | ||
|
|
||
| @include mq($from: tablet) { | ||
| line-height: 1.4285em; | ||
| } | ||
| } | ||
|
|
||
| /* Colour variants | ||
| ========================================================================== */ | ||
|
|
||
| .nhsapp-tag--white { | ||
| background-color: $color_nhsuk-white; | ||
| border-color: $color_nhsuk-grey-4; | ||
| color: $color_nhsuk-black; | ||
| } | ||
|
|
||
| .nhsapp-tag--grey { | ||
| background-color: $color_tag-grey-background; | ||
| color: $color_tag-grey-text; | ||
| } | ||
|
|
||
| .nhsapp-tag--green { | ||
| background-color: $color_tag-green-background; | ||
| color: $color_tag-green-text; | ||
| } | ||
|
|
||
| .nhsapp-tag--aqua-green { | ||
| background-color: $color_tag-aqua-green-background; | ||
| color: $color_tag-aqua-green-text; | ||
| } | ||
|
|
||
| .nhsapp-tag--blue { | ||
| background-color: $color_tag-blue-background; | ||
| color: $color_tag-blue-text; | ||
| } | ||
|
|
||
| .nhsapp-tag--purple { | ||
| background-color: $color_tag-purple-background; | ||
| color: $color_tag-purple-text; | ||
| } | ||
|
|
||
| .nhsapp-tag--pink { | ||
| background-color: $color_tag-pink-background; | ||
| color: $color_tag-pink-text; | ||
| } | ||
|
|
||
| .nhsapp-tag--red { | ||
| background-color: $color_tag-red-background; | ||
| color: $color_tag-red-text; | ||
| } | ||
|
|
||
| .nhsapp-tag--orange { | ||
| background-color: $color_tag-orange-background; | ||
| color: $color_tag-orange-text; | ||
| } | ||
|
|
||
| .nhsapp-tag--yellow { | ||
| background-color: $color_tag-yellow-background; | ||
| color: $color_tag-yellow-text; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| {% macro tag(params) %} | ||
| {%- include "./tag.njk" -%} | ||
| {% endmacro %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <span class="nhsapp-tag {{ params.classes }}">{{ params.text }}</span> |