Add tag component

docs/components/tag.md

@@ -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.

docs/examples/tags/tag.njk

@@ -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>

src/all.scss

@@ -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";

src/components/tag/_tag.scss

@@ -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;
+}

src/components/tag/macro.njk

@@ -0,0 +1,3 @@
+{% macro tag(params) %}
+  {%- include "./tag.njk" -%}
+{% endmacro %}

src/components/tag/tag.njk

@@ -0,0 +1 @@
+<span class="nhsapp-tag {{ params.classes }}">{{ params.text }}</span>