Card component (#878)

* update the card component to have three variables --------- Co-authored-by: Paul Flynn <[email protected]>
nhsuk · Aug 21, 2023 · b6c3f82 · b6c3f82
1 parent 6bd72dc
commit b6c3f82
Show file tree

Hide file tree

Showing 9 changed files with 185 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,11 @@
 # NHS.UK frontend Changelog
 
-## 7.0.1 - TBA
+## 7.1.0 - 21 August 2023
+
+:new: **New features**
+🆕 New features
+
+- Added three new card variants, primary card(with chevron), secondary card and top task ([PR 878](https://github.com/nhsuk/nhsuk-frontend/pull/878))
 
 :wrench: **Fixes**
 

diff --git a/app/components/card/card-group.njk b/app/components/card/card-group.njk
@@ -17,6 +17,7 @@
           <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
             {{ card({
               "href": "#",
+              "primary": "true",
               "clickable": "true",
               "heading": "Introduction to care and support",
               "headingClasses": "nhsuk-heading-m",
@@ -26,28 +27,31 @@
           <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
             {{ card({
               "href": "#",
+              "primary": "true",
               "clickable": "true",
               "heading": "Help from social services and charities",
               "headingClasses": "nhsuk-heading-m",
-              "description": "Includes helplines, needs assessments, advocacy and reporting abuse"
+              "description": "Includes helplines, needs assessments, advocacy and reporting abuse."
             }) }}
           </li>
           <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
             {{ card({
               "href": "#",
+              "primary": "true",
               "clickable": "true",
-              "heading": "Money, work and benefits",
+              "heading": "Care services, equipment and care homes",
               "headingClasses": "nhsuk-heading-m",
-              "description": "How to pay for care and support, and where you can get help with costs"
+              "description": "Includes home adaptations, help at home from a carer, social care you can get for free and housing."
             }) }}
           </li>
           <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
             {{ card({
               "href": "#",
+              "primary": "true",
               "clickable": "true",
-              "heading": "Care after a hospital stay",
+              "heading": "Money, work and benefits",
               "headingClasses": "nhsuk-heading-m",
-              "description": "Includes hospital discharge and care and support afterwards"
+              "description": "How to pay for care and support, and where you can get help with costs"
             }) }}
           </li>
         </ul>

diff --git a/app/components/card/card-primary.njk b/app/components/card/card-primary.njk
@@ -0,0 +1,25 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Card - primary card (with chevron)' %}
+{% from 'components/card/macro.njk' import card %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+<div class="nhsuk-width-container">
+  <main class="nhsuk-main-wrapper" id="maincontent">
+    <div class="nhsuk-grid-row">
+      <div class="nhsuk-grid-column-two-thirds">
+        {{ card({
+          "href": "#",
+          "primary": "true",
+          "clickable": "true",
+          "heading": "Introduction to care and support",
+          "headingClasses": "nhsuk-heading-m",
+          "description": "A quick guide for people who have care and support needs and their carers"
+        }) }}
+      </div>
+    </div>
+  </main>
+</div>
+
+{% endblock %}
diff --git a/app/components/card/card-secondary.njk b/app/components/card/card-secondary.njk
@@ -0,0 +1,29 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Card - secondary' %}
+{% from 'components/card/macro.njk' import card %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+<div class="nhsuk-width-container">
+  <main class="nhsuk-main-wrapper" id="maincontent">
+
+    <div class="nhsuk-grid-row">
+      <div class="nhsuk-grid-column-two-thirds">
+
+        {{ card({
+          "href": "#",
+          "clickable": "true",
+          "secondary": "true",
+          "heading": "Urgent and emergency care services",
+          "headingClasses": "nhsuk-heading-m",
+          "description": "Services the NHS provides if you need urgent or emergency medical help"
+        }) }}
+
+      </div>
+    </div>
+
+  </main>
+</div>
+
+{% endblock %}
diff --git a/app/components/card/top-task-card.njk b/app/components/card/top-task-card.njk
@@ -0,0 +1,28 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Card - Clickable card' %}
+{% from 'components/card/macro.njk' import card %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+<div class="nhsuk-width-container">
+  <main class="nhsuk-main-wrapper" id="maincontent">
+
+    <div class="nhsuk-grid-row">
+      <div class="nhsuk-grid-column-one-third">
+
+        {{ card({
+          "href": "#",
+          "clickable": "true",
+          "headingLevel": 5,
+          "heading": "Order a repeat prescription",
+          "headingClasses": "nhsuk-heading-xs"
+        }) }}
+
+      </div>
+    </div>
+
+  </main>
+</div>
+
+{% endblock %}
diff --git a/app/pages/examples.njk b/app/pages/examples.njk
@@ -35,10 +35,12 @@
     <li><a href="../components/button/secondary.html">Button secondary</a></li>
     <li><a href="../components/button/reverse.html">Button reverse</a></li>
     <li><a href="../components/card/basic-card.html">Card - Basic card</a></li>
-    <li><a href="../components/card/clickable-card.html">Card - Clickable card</a></li>
     <li><a href="../components/card/card-with-image.html">Card - Card with an image</a></li>
     <li><a href="../components/card/card-group.html">Card - Card group</a></li>
     <li><a href="../components/card/feature-card.html">Card - Feature card</a></li>
+    <li><a href="../components/card/card-primary.html">Card - Primary card (with chevron)</a></li>
+    <li><a href="../components/card/card-secondary.html">Card - Secondary card</a></li>
+    <li><a href="../components/card/top-task-card.html">Card - Top task card</a></li>
     <li><a href="../components/card/care-card-non-urgent.html">Card - Care card non-urgent (blue)</a></li>
     <li><a href="../components/card/care-card-urgent.html">Card - Care card urgent (red)</a></li>
     <li><a href="../components/card/care-card-emergency.html">Card - Care card emergency (red and black)</a></li>

diff --git a/packages/components/card/README.md b/packages/components/card/README.md
@@ -33,21 +33,20 @@ Find out more about the card component and when to use it in the [NHS digital se
 }) }}
 ```
 
-### Clickable card
+### Primary card (with chevron)
 
-[Preview the clickable card component](https://nhsuk.github.io/nhsuk-frontend/components/card/clickable-card.html)
+[Preview the primary card component](https://nhsuk.github.io/nhsuk-frontend/components/card/card-primary.html)
 
 #### HTML markup
 
 ```
-<div class="nhsuk-card nhsuk-card--clickable ">
-  <div class="nhsuk-card__content">
+<div class="nhsuk-card nhsuk-card--clickable">
+  <div class="nhsuk-card__content nhsuk-card__content--primary">
     <h2 class="nhsuk-card__heading nhsuk-heading-m">
-      <a class="nhsuk-card__link" href="#">
-        Introduction to care and support
-      </a>
+      <a class="nhsuk-card__link" href="#">Introduction to care and support</a>
     </h2>
     <p class="nhsuk-card__description">A quick guide for people who have care and support needs and their carers</p>
+    <svg class="nhsuk-icon nhsuk-icon nhsuk-icon__chevron-right-circle" xmlns="http://www.w3.org/2000/svg" width="27" height="27" aria-hidden="true" focusable="false"><circle cx="13.333" cy="13.333" r="13.333" fill=""></circle><g data-name="Group 1" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.667"><path d="M15.438 13l-3.771 3.771"></path><path data-name="Path" d="M11.667 9.229L15.438 13"></path></g></svg>
   </div>
 </div>
 ```
@@ -59,13 +58,46 @@ Find out more about the card component and when to use it in the [NHS digital se
 
 {{ card({
   "href": "#",
+  "primary": "true",
   "clickable": "true",
   "heading": "Introduction to care and support",
   "headingClasses": "nhsuk-heading-m",
   "description": "A quick guide for people who have care and support needs and their carers"
 }) }}
 ```
 
+### Secondary card
+
+[Preview the secondary card component](https://nhsuk.github.io/nhsuk-frontend/components/card/card-secondary.html)
+
+#### HTML markup
+
+```
+<div class="nhsuk-card nhsuk-card--clickable nhsuk-card--secondary">
+  <div class="nhsuk-card__content nhsuk-card__content--secondary">
+    <h2 class="nhsuk-card__heading nhsuk-heading-m">
+        <a class="nhsuk-card__link" href="#">Urgent and emergency care services</a>
+    </h2>
+  <p class="nhsuk-card__description">Services the NHS provides if you need urgent or emergency medical help</p>
+  </div>
+</div>
+```
+
+#### Nunjucks macro
+
+```
+{% from 'components/card/macro.njk' import card %}
+
+    {{ card({
+      "href": "#",
+      "clickable": "true",
+      "secondary": "true",
+      "heading": "Urgent and emergency care services",
+      "headingClasses": "nhsuk-heading-m",
+      "description": "Services the NHS provides if you need urgent or emergency medical help"
+    }) }}
+```
+
 ### Card with an image
 
 [Preview the card with an image component](https://nhsuk.github.io/nhsuk-frontend/components/card/card-with-image.html)
@@ -535,6 +567,8 @@ The card Nunjucks macro takes the following arguments:
 | **href**            | string  | No       | The value of the card href attribute                                                                                |
 | **clickable**       | boolean | No       | If set to true, then the class `nhsuk-card--clickable` will be applied.                                             |
 | **feature**         | boolean | No       | If set to true, then the class `nhsuk-card__heading--feature` and `nhsuk-card__content--feature` will be applied.   |
+| **primary**         | boolean | No       | If set to true, then the class `nhsuk-card__content--primary` will be applied.                                      |
+| **secondary**       | boolean | No       | If set to true, then the class `nhsuk-card--secondary` and `nhsuk-card__content--secondary` will be applied.        |
 | **type**            | string  | No       | Care card component variant type - non-urgent, urgent or emergency                                                  |
 | **imgURL**          | string  | No       | The URL of the image in the card                                                                                    |
 | **imgALT**          | string  | No       | The alternative text of the image in the card                                                                       |

diff --git a/packages/components/card/card.scss b/packages/components/card/card.scss
@@ -272,3 +272,40 @@ $card-border-hover-color: $color_nhsuk-grey-3;
     }
   }
 }
+
+/* Card primary
+  ========================================================================== */
+
+.nhsuk-card__content--primary {
+  padding-right: 75px;
+
+  @include mq($from: desktop) {
+    height: 100%;
+  }
+
+  .nhsuk-icon {
+    display: block;
+    fill: $color_nhsuk-blue;
+    margin-top: -nhsuk-spacing(2);
+    position: absolute;
+    right: nhsuk-spacing(4);
+    top: 50%;
+  }
+}
+
+/* Card secondary
+  ========================================================================== */
+
+.nhsuk-card--secondary {
+  background: transparent;
+  border-bottom: $card-border-bottom-width solid $card-border-color;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+}
+
+.nhsuk-card__content--secondary {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+}
diff --git a/packages/components/card/template.njk b/packages/components/card/template.njk
@@ -2,15 +2,19 @@
 
 <div class="nhsuk-card
 {%- if params.clickable %} nhsuk-card--clickable{% endif %}
+{%- if params.secondary %} nhsuk-card--secondary{% endif %}
 {%- if params.type %} nhsuk-card--care nhsuk-card--care--{{ params.type }}{% endif %}
 {%- if params.feature %} nhsuk-card--feature{% endif %}
+{%- if params.topTask %} nhsuk-card--top-task{% endif %}
 {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
 {%- if params.imgURL %}
   <img class="nhsuk-card__img" src="{{ params.imgURL }}" alt="{{ params.imgALT }}">
 {%- endif %}
   <div class="{%- if not params.type %}nhsuk-card__content
               {%- if params.feature %} nhsuk-card__content--feature{% endif %}
+              {%- if params.primary %} nhsuk-card__content--primary{% endif %}
+              {%- if params.secondary %} nhsuk-card__content--secondary{% endif %}
               {%- else %}nhsuk-card--care__heading-container{% endif %}">
     {%- if params.headingHtml %}
       {{ params.headingHtml | safe }}
@@ -46,5 +50,8 @@
   <p class="nhsuk-card__description">{{ params.description | safe }}</p>
 {%- else %}
 {%- endif %}
+  {% if params.primary %} 
+    <svg class="nhsuk-icon nhsuk-icon nhsuk-icon__chevron-right-circle" xmlns="http://www.w3.org/2000/svg" width="27" height="27" aria-hidden="true" focusable="false"><circle cx="13.333" cy="13.333" r="13.333" fill=""/><g data-name="Group 1" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.667"><path d="M15.438 13l-3.771 3.771"/><path data-name="Path" d="M11.667 9.229L15.438 13"/></g></svg>
+  {% endif %}
   </div>
 </div>