add params classes to all components

nhsuk · Sep 10, 2024 · 4130f1d · 4130f1d
1 parent 7101942
commit 4130f1d
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/src/components/card/card-group.njk b/src/components/card/card-group.njk
@@ -2,12 +2,14 @@
 
 {% from "./macro.njk" import nhsappCard %}
 
-<ol class="nhsapp-cards {{ stackedClass }}">
+<ol class="nhsapp-cards {{ stackedClass }}
+{{ params.classes if params.classes }}">
   {% for cardItem in params.cards %}
     {{ nhsappCard({
       title: cardItem.title,
       href: cardItem.href,
       html: cardItem.html,
+      classes: cardItem.classes,
       aboveContent: cardItem.aboveContent,
       description: cardItem.description,
       badgeLarge: cardItem.badgeLarge,

diff --git a/src/components/card/card.njk b/src/components/card/card.njk
@@ -4,9 +4,11 @@
 {% set hasBadgeLarge = true if params.badgeLarge.count > 1 %}
 
 {%- if params.isListItem -%}
-  <li class="nhsapp-card">
+  <li class="nhsapp-card 
+  {{ params.classes if params.classes }}">
 {%- else -%}
-  <div class="nhsapp-card">
+  <div class="nhsapp-card 
+  {{ params.classes if params.classes }}">
 {%- endif -%}
   <div class="nhsapp-card__container">
     {%- if params.prefixIcon -%}

diff --git a/src/components/timeline/timeline.njk b/src/components/timeline/timeline.njk
@@ -24,7 +24,8 @@
   </li>
 {% endmacro %}
 
-<ol class="nhsapp-timeline">
+<ol class="nhsapp-timeline 
+{{ params.classes if params.classes }}">
   {% for item in params.items %}
     {% if item %}{{ _timelineItem(params, item) }}{% endif %}
   {% endfor %}

diff --git a/src/styles/section-heading/section-heading.njk b/src/styles/section-heading/section-heading.njk
@@ -1,6 +1,7 @@
 {% set subheadingClass = 'nhsuk-u-margin-bottom-3' if params.subheadingText else '' %}
 
-<div class="nhsapp-section-heading">
+<div class="nhsapp-section-heading 
+{{ params.classes if params.classes }}">
   <h2 class="nhsuk-heading-s {{ subheadingClass }}">
     {{ params.headingText }}
   </h2>