From 2c2ffc62fc2fe50401682502f0ace4980072c67a Mon Sep 17 00:00:00 2001
From: Dave Hunter <thebeakking@gmail.com>
Date: Wed, 5 Jun 2024 11:31:44 +0100
Subject: [PATCH] add params text to small badge macro and create card link
 with badge macro

---
 docs/components/card-links.md                |  2 +-
 docs/examples/badges/badge-large.njk         |  2 +-
 docs/examples/badges/badge-small-red.njk     |  6 +++---
 docs/examples/badges/badge-small.njk         |  4 ++--
 docs/examples/cards/card-link-with-badge.njk | 17 +++++++++++++++++
 src/components/badge/small/badge-small.njk   |  1 +
 src/components/card/card.njk                 | 10 ++++++++++
 7 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 docs/examples/cards/card-link-with-badge.njk

diff --git a/docs/components/card-links.md b/docs/components/card-links.md
index 364f811..5d48c4c 100644
--- a/docs/components/card-links.md
+++ b/docs/components/card-links.md
@@ -52,7 +52,7 @@ If you are using icons, they should have [aria labels/hidden text?] so that scre
 
 Use badges to alert users to new, important information that sits beyond a card link. This could include unread messages or new appointment details.
 
-[embed badge example]
+{% example "cards/card-link-with-badge.njk" %}
 
 ## Content guidance
 
diff --git a/docs/examples/badges/badge-large.njk b/docs/examples/badges/badge-large.njk
index 7ff1fd0..86c5eaa 100644
--- a/docs/examples/badges/badge-large.njk
+++ b/docs/examples/badges/badge-large.njk
@@ -9,5 +9,5 @@ vueLink: "https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?pat
 
 {{ badgeLarge({
   count: 3,
-  label: 'Something'
+  label: 'notifications'
 }) }}
diff --git a/docs/examples/badges/badge-small-red.njk b/docs/examples/badges/badge-small-red.njk
index 9a2837b..49647a4 100644
--- a/docs/examples/badges/badge-small-red.njk
+++ b/docs/examples/badges/badge-small-red.njk
@@ -9,8 +9,8 @@ vueLink: "https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?pat
 
 <p>
     {{ badgeSmall({
-    label: 'Documents',
-    color: 'red'
+    label: 'New',
+    color: 'red',
+    text: 'Document attached'
     }) }}
-    Document attached
 </p>
\ No newline at end of file
diff --git a/docs/examples/badges/badge-small.njk b/docs/examples/badges/badge-small.njk
index 147ace6..58e5b8b 100644
--- a/docs/examples/badges/badge-small.njk
+++ b/docs/examples/badges/badge-small.njk
@@ -9,7 +9,7 @@ vueLink: "https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?pat
 
 <p>
     {{ badgeSmall({
-    label: 'Something'
+    label: 'New',
+    text: 'Document attached'
     }) }}
-    Document attached
 </p>
diff --git a/docs/examples/cards/card-link-with-badge.njk b/docs/examples/cards/card-link-with-badge.njk
new file mode 100644
index 0000000..9fbb9f9
--- /dev/null
+++ b/docs/examples/cards/card-link-with-badge.njk
@@ -0,0 +1,17 @@
+---
+layout: layouts/example.njk
+title: Card link with description
+figmaLink: "https://www.figma.com/file/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?type=design&node-id=128%3A7303&mode=design&t=DLiyCHcTTAYkEDa0-1"
+vueLink: "https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?path=/docs/components-nhscardlink--docs"
+---
+
+{% from "card/macro.njk" import card %}
+
+{{ card({
+  title: 'Messages',
+  href: '#',
+  badgeLarge: {
+    count: 3,
+    label: 'unread messages'
+  }
+}) }}
diff --git a/src/components/badge/small/badge-small.njk b/src/components/badge/small/badge-small.njk
index a86ad66..6a29deb 100644
--- a/src/components/badge/small/badge-small.njk
+++ b/src/components/badge/small/badge-small.njk
@@ -4,4 +4,5 @@
     {{ '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>{{ params.text }}</span>
 </span>
\ No newline at end of file
diff --git a/src/components/card/card.njk b/src/components/card/card.njk
index 80a92e7..596bb06 100644
--- a/src/components/card/card.njk
+++ b/src/components/card/card.njk
@@ -1,3 +1,7 @@
+{% from "badge/large/macro.njk" import badgeLarge %}
+
+{% set hasBadgeLarge = true if item.badgeLarge.count %}
+
 <div class="nhsapp-card">
   <div class="nhsapp-card__container">
     <div class="nhsapp-card__content">
@@ -10,6 +14,12 @@
         </div>
       {%- endif -%}
     </div>
+    {% if hasBadgeLarge %}
+      {{ badgeLarge({
+        count: item.badgeLarge.count,
+        label: item.badgeLarge.label
+      }) }}
+    {% endif %}
     <svg class="nhsapp-icon app-icon--chevron" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
       <path d="M8.82264 19.11C8.56264 19.11 8.29264 19.01 8.10264 18.8C7.72264 18.4 7.73264 17.77 8.13264 17.39L13.7426 12.01L8.14264 6.75999C7.74264 6.37999 7.72264 5.74999 8.09264 5.34999C8.47264 4.94999 9.10264 4.92999 9.50264 5.29999L15.8726 11.27C16.0726 11.46 16.1826 11.72 16.1926 11.99C16.2026 12.26 16.0826 12.53 15.8826 12.72L9.51264 18.83C9.32264 19.02 9.07264 19.11 8.82264 19.11Z"></path>
     </svg>