Tag macro and example updated

nhsuk · May 28, 2024 · 7f33276 · 7f33276
1 parent c897962
commit 7f33276
Show file tree

Hide file tree

Showing 7 changed files with 247 additions and 1 deletion.
diff --git 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
@@ -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 %}
+
+<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>
diff --git 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
@@ -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
@@ -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;
+  }
+
diff --git a/src/components/tag/macro.njk b/src/components/tag/macro.njk
@@ -0,0 +1,3 @@
+{% macro tag(params) %}
+  {%- include "./tag.njk" -%}
+{% endmacro %}
diff --git a/src/components/tag/tag.njk b/src/components/tag/tag.njk
@@ -0,0 +1 @@
+<span class="nhsapp-tag {{ params.classes }}">{{ params.text }}</span>