[refs #160] Rename and updates to care cards

Emergnecy care card now called immediate care card Update Nunjucks template and parameters Add correct hidden text Amend visually hidden style to fix VoiceOver issue
nhsuk · Nov 27, 2018 · 85e110d · 85e110d
1 parent 2c79955
commit 85e110d
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 44 deletions.
diff --git a/docs/components/care-card-emergency.njk → docs/components/care-card-immediate.njk b/docs/components/care-card-emergency.njk → docs/components/care-card-immediate.njk
@@ -1,5 +1,5 @@
 {% set html_style = 'background-color: #f0f4f5;' %}
-{% set title = 'Care card emergency (red and black)' %}
+{% set title = 'Care card immediate (red and black)' %}
 {% from 'components/care-card/macro.njk' import careCard %}
 {% extends 'layout.njk' %}
 
@@ -11,7 +11,7 @@
     <div class="nhsuk-grid-row">
       <div class="nhsuk-grid-column-two-thirds">
         {{ careCard({
-          "type": "emergency",
+          "type": "immediate",
           "heading": "Call 999 if you have sudden chest pain that:",
           "HTML": "
           <ul>

diff --git a/docs/components/care-card-non-urgent.njk b/docs/components/care-card-non-urgent.njk
@@ -11,7 +11,7 @@
     <div class="nhsuk-grid-row">
       <div class="nhsuk-grid-column-two-thirds">
         {{ careCard({
-          "type": "primary",
+          "type": "non-urgent",
           "heading": "Speak to a GP if:",
           "HTML": "
           <ul>

diff --git a/docs/pages/examples.njk b/docs/pages/examples.njk
@@ -28,7 +28,7 @@
     <li><a href="../components/breadcrumb.html">Breadcrumb</a></li>
     <li><a href="../components/care-card-non-urgent.html">Care card non-urgent (blue)</a></li>
     <li><a href="../components/care-card-urgent.html">Care card urgent (red)</a></li>
-    <li><a href="../components/care-card-emergency.html">Care card emergency (red and black)</a></li>
+    <li><a href="../components/care-card-immediate.html">Care card immediate (red and black)</a></li>
     <li><a href="../components/contents-list.html">Contents list</a></li>
     <li><a href="../components/details.html">Details</a></li>
     <li><a href="../components/do-dont-list.html">Do and Don't list</a></li>

diff --git a/packages/components/care-card/README.md b/packages/components/care-card/README.md
@@ -15,7 +15,7 @@ To discuss or contribute to this component, visit the [GitHub issue for this com
 ```html
 <div class="nhsuk-care-card">
   <div class="nhsuk-care-card__heading-container">
-    <h3 class="nhsuk-care-card__heading"><span class="nhsuk-u-visually-hidden">Non-urgent care: </span>Speak to a GP if:</h3>
+    <h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Non-urgent advice: </span>Speak to a GP if:</span></h3>
   </div>
   <div class="nhsuk-care-card__content">
     <ul>
@@ -37,7 +37,7 @@ If you’re using Nunjucks macros in production be aware that using `html` argum
 {% from 'components/care-card/macro.njk' import careCard %}
 
 {{ careCard({
-  "type": "primary",
+  "type": "non-urgent",
   "heading": "Speak to a GP if:",
   "HTML": "
   <ul>
@@ -53,15 +53,16 @@ If you’re using Nunjucks macros in production be aware that using `html` argum
 
 #### Nunjucks arguments
 
-If you are using Nunjucks, then macros take the following arguments: 
+The non-urgent care card Nunjucks macro takes the following arguments:
 
-| Name                | Type     | Required  | Description  |
-| --------------------|----------|-----------|--------------|
-| type                | string   | Yes       | Care card component variant types: "primary", "emergency", "urgent" |
-| heading             | string   | Yes       | Heading to be used within the care card component |
-| HTML                | string   | Yes       | Content to be used within the care card component |
-| classes             | string   | No        | Optional additional classes to add to the anchor tag. Separate each class with a space. |
-| attributes          | object   | No        | Any extra HTML attributes (for example data attributes) to add to the care card. |
+| Name                    | Type     | Required  | Description  |
+| ------------------------|----------|-----------|--------------|
+| **type**                | string   | Yes       | Care card component variant type - "non-urgent" |
+| **heading**             | string   | Yes       | Heading to be used within the care card component |
+| **HTML**                | string   | Yes       | Content to be used within the care card component |
+| **headingLevel**        | integer  | No        | Optional heading level for the  heading. Default: 3 |
+| **classes**             | string   | No        | Optional additional classes to add to the care card. Separate each class with a space. |
+| **attributes**          | object   | No        | Any extra HTML attributes (for example data attributes) to add to the care card. |
 
 ### Care card urgent (red)
 
@@ -72,7 +73,7 @@ If you are using Nunjucks, then macros take the following arguments:
 ```html
 <div class="nhsuk-care-card nhsuk-care-card--urgent">
   <div class="nhsuk-care-card__heading-container">
-    <h3 class="nhsuk-care-card__heading"><span class="nhsuk-u-visually-hidden">Urgent care low: </span>Ask for an urgent GP appointment if:</h3>
+    <h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Urgent advice: </span>Ask for an urgent GP appointment if:</span></h3>
   </div>
   <div class="nhsuk-care-card__content">
     <ul>
@@ -109,26 +110,28 @@ If you’re using Nunjucks macros in production be aware that using `html` argum
 
 #### Nunjucks arguments
 
-If you are using Nunjucks, then macros take the following arguments: 
+The urgent care card Nunjucks macro takes the following arguments:
 
-| Name                | Type     | Required  | Description  |
-| --------------------|----------|-----------|--------------|
-| type                | string   | Yes       | Care card component variant types: "primary", "emergency", "urgent" |
-| heading             | string   | Yes       | Heading to be used within the care card component |
-| HTML                | string   | Yes       | Content to be used within the care card component |
-| classes             | string   | No        | Optional additional classes to add to the anchor tag. Separate each class with a space. |
-| attributes          | object   | No        | Any extra HTML attributes (for example data attributes) to add to the care card. |
+| Name                    | Type     | Required  | Description  |
+| ------------------------|----------|-----------|--------------|
+| **type**                | string   | Yes       | Care card component variant type - "urgent" |
+| **heading**             | string   | Yes       | Heading to be used within the care card component |
+| **HTML**                | string   | Yes       | Content to be used within the care card component |
+| **headingLevel**        | integer  | No        | Optional heading level for the  heading. Default: 3 |
+| **classes**             | string   | No        | Optional additional classes to add to the care card. Separate each class with a space. |
+| **attributes**          | object   | No        | Any extra HTML attributes (for example data attributes) to add to the care card. |
 
-### Care card emergency (red and black)
 
-[Preview care card emergency (red and black) component](https://nhsuk.github.io/nhsuk-frontend/components/care-card-urgent.html)
+### Care card immediate (red and black)
+
+[Preview care card immediate (red and black) component](https://nhsuk.github.io/nhsuk-frontend/components/care-card-immediate.html)
 
 ### HTML markup
 
 ```html
-<div class="nhsuk-care-card nhsuk-care-card--emergency">
+<div class="nhsuk-care-card nhsuk-care-card--immediate">
   <div class="nhsuk-care-card__heading-container">
-    <h3 class="nhsuk-care-card__heading"><span class="nhsuk-u-visually-hidden">Urgent care high: </span>Call 999 if you have sudden chest pain that:</h3>
+    <h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Immediate action required: </span>Call 999 if you have sudden chest pain that:</span></h3>
   </div>
   <div class="nhsuk-care-card__content">
     <ul>
@@ -149,7 +152,7 @@ If you’re using Nunjucks macros in production be aware that using `html` argum
 {% from 'components/care-card/macro.njk' import careCard %}
 
 {{ careCard({
-  "type": "emergency",
+  "type": "immediate",
   "heading": "Call 999 if you have sudden chest pain that:",
   "HTML": "
   <ul>
@@ -163,12 +166,13 @@ If you’re using Nunjucks macros in production be aware that using `html` argum
 ```
 #### Nunjucks arguments
 
-If you are using Nunjucks, then macros take the following arguments: 
+The immediate care card Nunjucks macro takes the following arguments:
 
-| Name                | Type     | Required  | Description  |
-| --------------------|----------|-----------|--------------|
-| type                | string   | Yes       | Care card component variant types: "primary", "emergency", "urgent" |
-| heading             | string   | Yes       | Heading to be used within the care card component |
-| HTML                | string   | Yes       | Content to be used within the care card component |
-| classes             | string   | No        | Optional additional classes to add to the anchor tag. Separate each class with a space. |
-| attributes          | object   | No        | Any extra HTML attributes (for example data attributes) to add to the care card. |
+| Name                    | Type     | Required  | Description  |
+| ------------------------|----------|-----------|--------------|
+| **type**                | string   | Yes       | Care card component variant type - "immediate" |
+| **heading**             | string   | Yes       | Heading to be used within the care card component |
+| **HTML**                | string   | Yes       | Content to be used within the care card component |
+| **headingLevel**        | integer  | No        | Optional heading level for the  heading. Default: 3 |
+| **classes**             | string   | No        | Optional additional classes to add to the care card. Separate each class with a space. |
+| **attributes**          | object   | No        | Any extra HTML attributes (for example data attributes) to add to the care card. |
diff --git a/packages/components/care-card/_care-card.scss b/packages/components/care-card/_care-card.scss
@@ -78,7 +78,7 @@
   @include care-card($color_nhsuk-red, $color_nhsuk-white, 6px);
 }
 
-.nhsuk-care-card--emergency {
+.nhsuk-care-card--immediate {
   @include care-card($color_nhsuk-red, $color_nhsuk-white, 8px);
 
   .nhsuk-care-card__content {

diff --git a/packages/components/care-card/template.html b/packages/components/care-card/template.html
@@ -1,24 +1,24 @@
 <div class="nhsuk-care-card">
   <div class="nhsuk-care-card__heading-container">
-    <h3 class="nhsuk-care-card__heading"><span class="nhsuk-u-visually-hidden">Non-urgent care: </span>Speak to a GP if:</h3>
+    <h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Non-urgent advice: </span>Speak to a GP if:</span></h3>
   </div>
   <div class="nhsuk-care-card__content">
     <p>Test content with <a href="#">link</a>.</p>
   </div>
 </div>
 
-<div class="nhsuk-care-card nhsuk-care-card--emergency">
+<div class="nhsuk-care-card nhsuk-care-card--urgent">
   <div class="nhsuk-care-card__heading-container">
-    <h3 class="nhsuk-care-card__heading"><span class="nhsuk-u-visually-hidden">Urgent care low: </span>Ask for an urgent GP appointment if:</h3>
+    <h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Urgent advice: </span>Ask for an urgent GP appointment if:</span></h3>
   </div>
   <div class="nhsuk-care-card__content">
     <p>Test content with <a href="#">link</a>.</p>
   </div>
 </div>
 
-<div class="nhsuk-care-card nhsuk-care-card--urgent">
+<div class="nhsuk-care-card nhsuk-care-card--immediate">
   <div class="nhsuk-care-card__heading-container">
-    <h3 class="nhsuk-care-card__heading"><span class="nhsuk-u-visually-hidden">Urgent care high: </span>Call 999 if you have sudden chest pain that:</h3>
+    <h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Immediate action required: </span>Call 999 if you have sudden chest pain that:</span></h3>
   </div>
   <div class="nhsuk-care-card__content">
     <p>Test content with <a href="#">link</a>.</p>

diff --git a/packages/components/care-card/template.njk b/packages/components/care-card/template.njk
@@ -1,7 +1,7 @@
 {% set headingLevel = params.headingLevel if params.headingLevel else 3 %}
-<div class="nhsuk-care-card {% if params.type %}nhsuk-care-card--{{ params.type }}{% endif %}" {% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+<div class="nhsuk-care-card {% if params.type %}nhsuk-care-card--{{ params.type }}{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}" {% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div class="nhsuk-care-card__heading-container">
-    <h{{ headingLevel }} class="nhsuk-care-card__heading"><span class="nhsuk-u-visually-hidden">{% if type == 'grey' %}Non-urgent advice: {% elseif type == 'red' %}Urgent care low: {% elseif type == 'black' %}Urgent care high: {% else %}Non-urgent advice: {% endif %}</span>{{ params.heading }}</h{{ headingLevel }}>
+    <h{{ headingLevel }} class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">{% if params.type === 'non-urgent' %}Non-urgent advice: {% elseif params.type === 'urgent' %}Urgent advice: {% elseif params.type === 'immediate' %}Immediate action required: {% else %}Non-urgent advice: {% endif %}</span>{{ params.heading }}</span></h{{ headingLevel }}>
   </div>
   <div class="nhsuk-care-card__content">
   {{ params.HTML | safe }}

diff --git a/packages/core/tools/_mixins.scss b/packages/core/tools/_mixins.scss
@@ -46,6 +46,7 @@
   padding: 0;
   position: absolute;
   width: 1px;
+  white-space: nowrap;
 }
 
 //