From b6c3f82662c2f75073c901faa0069c2afe2b1b09 Mon Sep 17 00:00:00 2001 From: Paul Date: Mon, 21 Aug 2023 15:21:07 +0100 Subject: [PATCH] Card component (#878) * update the card component to have three variables --------- Co-authored-by: Paul Flynn --- CHANGELOG.md | 7 +++- app/components/card/card-group.njk | 14 +++++--- app/components/card/card-primary.njk | 25 ++++++++++++++ app/components/card/card-secondary.njk | 29 ++++++++++++++++ app/components/card/top-task-card.njk | 28 +++++++++++++++ app/pages/examples.njk | 4 ++- packages/components/card/README.md | 48 ++++++++++++++++++++++---- packages/components/card/card.scss | 37 ++++++++++++++++++++ packages/components/card/template.njk | 7 ++++ 9 files changed, 185 insertions(+), 14 deletions(-) create mode 100644 app/components/card/card-primary.njk create mode 100644 app/components/card/card-secondary.njk create mode 100644 app/components/card/top-task-card.njk diff --git a/CHANGELOG.md b/CHANGELOG.md index 07f1ea996..15cc29e83 100644 --- 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 index 95d813bdf..aba6cd026 100644 --- a/app/components/card/card-group.njk +++ b/app/components/card/card-group.njk @@ -17,6 +17,7 @@
  • {{ card({ "href": "#", + "primary": "true", "clickable": "true", "heading": "Introduction to care and support", "headingClasses": "nhsuk-heading-m", @@ -26,28 +27,31 @@
  • {{ 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." }) }}
  • {{ 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." }) }}
  • {{ 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" }) }}
    • diff --git a/app/components/card/card-primary.njk b/app/components/card/card-primary.njk new file mode 100644 index 000000000..02617d995 --- /dev/null +++ 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 %} + +
    +
    +
    +
    + {{ 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" + }) }} +
    +
    +
    +
    + +{% endblock %} diff --git a/app/components/card/card-secondary.njk b/app/components/card/card-secondary.njk new file mode 100644 index 000000000..be3ccd2c6 --- /dev/null +++ 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 %} + +
    +
    + +
    +
    + + {{ 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" + }) }} + +
    +
    + +
    +
    + +{% endblock %} diff --git a/app/components/card/top-task-card.njk b/app/components/card/top-task-card.njk new file mode 100644 index 000000000..702cb0b44 --- /dev/null +++ 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 %} + +
    +
    + +
    +
    + + {{ card({ + "href": "#", + "clickable": "true", + "headingLevel": 5, + "heading": "Order a repeat prescription", + "headingClasses": "nhsuk-heading-xs" + }) }} + +
    +
    + +
    +
    + +{% endblock %} \ No newline at end of file diff --git a/app/pages/examples.njk b/app/pages/examples.njk index 36c2d6f6f..f4683e0e5 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -35,10 +35,12 @@
  • Button secondary
  • Button reverse
  • Card - Basic card
    • -
  • Card - Clickable card
  • Card - Card with an image
  • Card - Card group
  • Card - Feature card
    • +
  • Card - Primary card (with chevron)
    • +
  • Card - Secondary card
    • +
  • Card - Top task card
  • Card - Care card non-urgent (blue)
  • Card - Care card urgent (red)
  • Card - Care card emergency (red and black)
    • diff --git a/packages/components/card/README.md b/packages/components/card/README.md index c50a3362f..8cb4a7f1c 100644 --- 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 ``` -
    -
    +
    +

    - - Introduction to care and support - + Introduction to care and support

    A quick guide for people who have care and support needs and their carers

    +
    ``` @@ -59,6 +58,7 @@ 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", @@ -66,6 +66,38 @@ Find out more about the card component and when to use it in the [NHS digital se }) }} ``` +### Secondary card + +[Preview the secondary card component](https://nhsuk.github.io/nhsuk-frontend/components/card/card-secondary.html) + +#### HTML markup + +``` +
    +
    +

    + Urgent and emergency care services +

    +

    Services the NHS provides if you need urgent or emergency medical help

    +
    +
    +``` + +#### 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 index a56958e90..dcded513e 100644 --- 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 index 34d225259..0473be7e3 100644 --- a/packages/components/card/template.njk +++ b/packages/components/card/template.njk @@ -2,8 +2,10 @@
    {%- if params.imgURL %} @@ -11,6 +13,8 @@ {%- endif %}
    {%- if params.headingHtml %} {{ params.headingHtml | safe }} @@ -46,5 +50,8 @@

    {{ params.description | safe }}

    {%- else %} {%- endif %} + {% if params.primary %} + + {% endif %}