add params text to small badge macro and create card link with badge …

…macro
nhsuk · Jun 5, 2024 · 2c2ffc6 · 2c2ffc6
1 parent eb2a9d8
commit 2c2ffc6
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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>
diff --git 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
@@ -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
@@ -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>
diff --git 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>