Badge macro and examples updated

docs/components/badge.md

@@ -7,8 +7,6 @@ tags:
   - component
 ---
 
-[add example]
-
 ## When to use
 
 Badges can be placed:
@@ -29,29 +27,27 @@ There are different size and colour variations of badges.
 
 ### Large badges
 
-[add example]
+{% example "badges/badge-large.njk" %}
 
 Large badges always include a number count. This tells users how many items need their attention.
 
 Above the count of 9, large badges always display 9+. This allows the width of the badge to be restricted to two characters.
 
 ### Small badges
 
-[add example]
-
 Small badges are simple circles. They can be placed:
 
 - on the edge of icons, such as on the bottom navigation
 - on cards, alongside text, such as “Document attached” on appointment cards
 
-[add example]
+{% example "badges/badge-small.njk" %}
 
 The colour of small badges can be:
 
 - red for important notifications that needs to stand out on a page
 - blue for secondary notifications that can afford to be less prominent
 
-[add example]
+{% example "badges/badge-small-red.njk" %}
 
 For example, users will see a red badge on the bottom navigation to indicate unread messages. When they then navigate to their messages inbox to view those messages, unread message headings are indicated by blue badges.
 

docs/examples/badges/badge-large.njk

@@ -0,0 +1,13 @@
+---
+layout: layouts/example.njk
+title: Badge Large
+figmaLink: "https://www.figma.com/design/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?node-id=128-7303&t=UdzCaY5YPtBypveQ-0"
+vueLink: "https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?path=/docs/components-nhsbadge-large--docs"
+---
+
+{% from "badge/large/macro.njk" import badgeLarge %}
+
+{{ badgeLarge({
+  count: 3,
+  label: 'Something'
+}) }}

docs/examples/badges/badge-small-red.njk

@@ -0,0 +1,16 @@
+---
+layout: layouts/example.njk
+title: Badge Small
+figmaLink: "https://www.figma.com/design/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?node-id=128-7303&t=UdzCaY5YPtBypveQ-0"
+vueLink: "https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?path=/docs/components-nhsbadge-small--docs"
+---
+
+{% from "badge/small/macro.njk" import badgeSmall %}
+
+<p>
+    {{ badgeSmall({
+    label: 'Documents',
+    color: 'red'
+    }) }}
+    Document attached
+</p>

docs/examples/badges/badge-small.njk

@@ -0,0 +1,15 @@
+---
+layout: layouts/example.njk
+title: Badge Small
+figmaLink: "https://www.figma.com/design/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?node-id=128-7303&t=UdzCaY5YPtBypveQ-0"
+vueLink: "https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?path=/docs/components-nhsbadge-small--docs"
+---
+
+{% from "badge/small/macro.njk" import badgeSmall %}
+
+<p>
+    {{ badgeSmall({
+    label: 'Something'
+    }) }}
+    Document attached
+</p>

docs/index.njk

@@ -4,6 +4,7 @@
 
 {%- from 'hero/macro.njk' import hero -%}
 {%- from 'card/macro.njk' import card -%}
+{%- from 'badge/large/macro.njk' import badgeLarge -%}
 
 {% block header %}
   {{ super() }}

src/all.scss

@@ -1,4 +1,5 @@
 @import "node_modules/nhsuk-frontend/packages/core/tools/all.scss";
 @import "node_modules/nhsuk-frontend/packages/core/settings/all.scss";
 
-@import "./components/card/card.scss";
+@import "./components/card/card";
+@import "./components/badge/badge";

src/components/badge/_badge.scss

@@ -0,0 +1,73 @@
+// ==========================================================================
+// COMPONENTS / #BADGE
+// ==========================================================================
+
+@use "sass:math";
+
+.nhsapp-badge {
+  @include nhsuk-typography-responsive(19);
+
+  display: inline-block;
+
+  background-color: $nhsuk-error-color;
+  border-radius: nhsuk-spacing(1);
+  color: $color_nhsuk-white;
+  font-weight: bold;
+  padding: 0 nhsuk-spacing(2);
+
+  @include mq($from: tablet) {
+    padding: 0 12px;
+  }
+}
+
+.nhsapp-badge-small {
+  position: relative;
+
+  display: inline-flex;
+  align-items: baseline;
+}
+
+/**
+  * Mixin to position the small badge
+  * @param {number} $size - The size of the badge
+  */
+@mixin small-badge-position($size: 8px) {
+  position: relative;
+  width: $size;
+  height: $size;
+  margin-right: $size;
+  border-radius: math.div($size, 2);
+
+  $font-height: 0.7em; // The height of a capital letter in the specific font we use (Frutiger)
+  bottom: calc(0.5 * ($font-height - $size));
+}
+
+$nhsapp-badge-size-mobile: 8px;
+$nhsapp-badge-size-tablet: 12px;
+
+.nhsapp-badge-small__indicator {
+  @include small-badge-position($nhsapp-badge-size-mobile);
+
+  @include mq($from: tablet) {
+    @include small-badge-position($nhsapp-badge-size-tablet);
+  }
+
+  background-color: $color_nhsuk-blue;
+}
+
+.nhsapp-badge-small--red {
+  .nhsapp-badge-small__indicator {
+    background-color: $nhsuk-error-color;
+  }
+}
+
+.nhsapp-badge-small--absolute {
+  .nhsapp-badge-small__indicator {
+    position: absolute;
+
+    left: -2 * $nhsapp-badge-size-mobile;
+    @include mq($from: tablet) {
+      left: -2 * $nhsapp-badge-size-tablet;
+    }
+  }
+}

src/components/badge/large/badge-large.njk

@@ -0,0 +1,11 @@
+{%- if params.count -%}
+<span class="nhsapp-badge">
+    <span class="nhsuk-u-visually-hidden">You have</span>
+    {% if params.count > 9 %}
+        +9
+    {% else %}
+        {{ params.count }}
+    {% endif %}
+    <span class="nhsuk-u-visually-hidden">{{ params.label }}</span>
+</span>
+{%- endif -%}

src/components/badge/large/macro.njk

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

src/components/badge/small/badge-small.njk

@@ -0,0 +1,7 @@
+<span class="
+    nhsapp-badge-small 
+    {{ 'nhsapp-badge-small--red' if params.color === 'red' }}
+    {{ 'nhsapp-badge-small--absolute' if params.positionAbsolute }}">
+    <span class="nhsapp-badge-small__indicator" aria-hidden="true"></span>
+    <span class="nhsuk-u-visually-hidden">{{ params.label }}</span>
+</span>

src/components/badge/small/macro.njk

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