Read only card (#113)

* add read only card * add heading level params to section title
nhsuk · Sep 12, 2024 · b255d22 · b255d22
1 parent 2034532
commit b255d22
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
@@ -15,6 +15,12 @@ $card-border-hover-color: $color_nhsuk-grey-3;
 
   padding: 0;
 
+  &__title {
+    @include nhsuk-typography-responsive(22);
+    font-weight: bold;
+    margin-bottom: 0;
+  }
+
   .nhsapp-icon {
     height: 24px;
     width: 24px;

diff --git a/src/components/card/card-group.njk b/src/components/card/card-group.njk
@@ -14,6 +14,7 @@
       description: cardItem.description,
       badgeLarge: cardItem.badgeLarge,
       prefixIcon: cardItem.prefixIcon,
+      readOnly: cardItem.readOnly,
       isListItem: true
     }) }}
   {% endfor %}

diff --git a/src/components/card/card.njk b/src/components/card/card.njk
@@ -20,10 +20,14 @@
           {{ params.aboveContent.html | safe }}
         </div>
       {%- endif -%}
-      <a href="{{ params.href }}" class="nhsapp-card__link nhsuk-link--no-visited-state" 
+      {%- if params.readOnly -%}
+        <p class="nhsapp-card__title">{{ params.title }}</p>
+      {%- else -%}
+        <a href="{{ params.href }}" class="nhsapp-card__link nhsuk-link--no-visited-state" 
       {%- if params.linkAriaLabel %} aria-label="{{ params.linkAriaLabel }}" {% endif %}>
-        {{ params.title }}
-      </a>
+          {{ params.title }}
+        </a>
+      {%- endif -%}
       {% if params.description %}
         <div class="nhsapp-card__below">
           <p class="nhsuk-u-margin-top-1">{{ params.description }}</p>
@@ -40,7 +44,9 @@
         ariaHidden: params.badgeLarge.ariaHidden
       }) }}
     {% endif %}
-    {{ nhsappIcon('chevronRight') }}
+    {%- if not params.readOnly -%}
+      {{ nhsappIcon('chevronRight') }}
+    {%- endif -%}
   </div>
 {%- if params.isListItem -%}
   </li>

diff --git a/src/styles/section-heading/section-heading.njk b/src/styles/section-heading/section-heading.njk
@@ -1,10 +1,11 @@
 {% set subheadingClass = 'nhsuk-u-margin-bottom-3' if params.subheadingText else '' %}
+{% set headingLevel = params.headingLevel if params.headingLevel else 2 %}
 
 <div class="nhsapp-section-heading 
 {{ params.classes if params.classes }}">
-  <h2 class="nhsuk-heading-s {{ subheadingClass }}">
+  <h{{ headingLevel }} class="nhsuk-heading-s {{ subheadingClass }}">
     {{ params.headingText }}
-  </h2>
+  </h{{ headingLevel }}>
   {% if params.linkText and params.linkUrl %}
     <a 
       class="nhsuk-link nhsuk-link--no-visited-state nhsuk-u-nowrap"