From 85e110dd4df94df41ad374fbd7d8cd2e48a60768 Mon Sep 17 00:00:00 2001 From: Michael Cheung Date: Mon, 26 Nov 2018 13:21:13 +0000 Subject: [PATCH] [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 --- ...-emergency.njk => care-card-immediate.njk} | 4 +- docs/components/care-card-non-urgent.njk | 2 +- docs/pages/examples.njk | 2 +- packages/components/care-card/README.md | 68 ++++++++++--------- packages/components/care-card/_care-card.scss | 2 +- packages/components/care-card/template.html | 10 +-- packages/components/care-card/template.njk | 4 +- packages/core/tools/_mixins.scss | 1 + 8 files changed, 49 insertions(+), 44 deletions(-) rename docs/components/{care-card-emergency.njk => care-card-immediate.njk} (91%) diff --git a/docs/components/care-card-emergency.njk b/docs/components/care-card-immediate.njk similarity index 91% rename from docs/components/care-card-emergency.njk rename to docs/components/care-card-immediate.njk index 19936b58b..5dcee03b9 100644 --- a/docs/components/care-card-emergency.njk +++ b/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 @@
{{ careCard({ - "type": "emergency", + "type": "immediate", "heading": "Call 999 if you have sudden chest pain that:", "HTML": "
    diff --git a/docs/components/care-card-non-urgent.njk b/docs/components/care-card-non-urgent.njk index b84477817..6e6a4abb9 100644 --- a/docs/components/care-card-non-urgent.njk +++ b/docs/components/care-card-non-urgent.njk @@ -11,7 +11,7 @@
    {{ careCard({ - "type": "primary", + "type": "non-urgent", "heading": "Speak to a GP if:", "HTML": "
      diff --git a/docs/pages/examples.njk b/docs/pages/examples.njk index f3456e8d5..976045649 100644 --- a/docs/pages/examples.njk +++ b/docs/pages/examples.njk @@ -28,7 +28,7 @@
    • Breadcrumb
    • Care card non-urgent (blue)
    • Care card urgent (red)
      • -
    • Care card emergency (red and black)
      • +
    • Care card immediate (red and black)
    • Contents list
    • Details
    • Do and Don't list
      • diff --git a/packages/components/care-card/README.md b/packages/components/care-card/README.md index cdef51b16..2f6f19414 100644 --- 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
      -

      Non-urgent care: Speak to a GP if:

      +

      Non-urgent advice: Speak to a GP if:

        @@ -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": "
          @@ -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
          -

          Urgent care low: Ask for an urgent GP appointment if:

          +

          Urgent advice: Ask for an urgent GP appointment if:

            @@ -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 -
            +
            -

            Urgent care high: Call 999 if you have sudden chest pain that:

            +

            Immediate action required: Call 999 if you have sudden chest pain that:

              @@ -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": "
                @@ -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 index 738ec54fa..da5a53127 100644 --- 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 index 35e5aaf73..5341477b4 100644 --- a/packages/components/care-card/template.html +++ b/packages/components/care-card/template.html @@ -1,24 +1,24 @@
                -

                Non-urgent care: Speak to a GP if:

                +

                Non-urgent advice: Speak to a GP if:

                Test content with link.

                -
                +
                -

                Urgent care low: Ask for an urgent GP appointment if:

                +

                Urgent advice: Ask for an urgent GP appointment if:

                Test content with link.

                -
                +
                -

                Urgent care high: Call 999 if you have sudden chest pain that:

                +

                Immediate action required: Call 999 if you have sudden chest pain that:

                Test content with link.

                diff --git a/packages/components/care-card/template.njk b/packages/components/care-card/template.njk index be3e8f443..8512ef303 100644 --- 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 %} -
                +
                - {% if type == 'grey' %}Non-urgent advice: {% elseif type == 'red' %}Urgent care low: {% elseif type == 'black' %}Urgent care high: {% else %}Non-urgent advice: {% endif %}{{ params.heading }} + {% 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 %}{{ params.heading }}
                {{ params.HTML | safe }} diff --git a/packages/core/tools/_mixins.scss b/packages/core/tools/_mixins.scss index df44e5b04..f87c15ee7 100644 --- 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; } //