From 72b7eaacdf16043686b9f9d4179a1499164bed1b Mon Sep 17 00:00:00 2001 From: Paul Date: Thu, 13 Jul 2023 07:20:03 +0100 Subject: [PATCH 01/20] add the card with arrow example --- app/components/card/card-with-arrow.njk | 29 +++++++++++++++++++++++++ app/pages/examples.njk | 1 + packages/components/card/card.scss | 17 +++++++++++++++ packages/components/card/template.njk | 4 ++++ 4 files changed, 51 insertions(+) create mode 100644 app/components/card/card-with-arrow.njk diff --git a/app/components/card/card-with-arrow.njk b/app/components/card/card-with-arrow.njk new file mode 100644 index 000000000..e64b644e6 --- /dev/null +++ b/app/components/card/card-with-arrow.njk @@ -0,0 +1,29 @@ +{% set html_style = 'background-color: #f0f4f5;' %} +{% set title = 'Card - card with an arrow' %} +{% from 'components/card/macro.njk' import card %} +{% extends 'layout.njk' %} + +{% block body %} + +
+
+ +
+
+ + {{ card({ + "href": "#", + "arrow": "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/pages/examples.njk b/app/pages/examples.njk index 36c2d6f6f..793a8f278 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -36,6 +36,7 @@
  • Button reverse
  • Card - Basic card
  • Card - Clickable card
    • +
  • Card - Card with an arrow
  • Card - Card with an image
  • Card - Card group
  • Card - Feature card
    • diff --git a/packages/components/card/card.scss b/packages/components/card/card.scss index a56958e90..7bf66da4e 100644 --- a/packages/components/card/card.scss +++ b/packages/components/card/card.scss @@ -272,3 +272,20 @@ $card-border-hover-color: $color_nhsuk-grey-3; } } } + +/* Card arrow + ========================================================================== */ + +.nhsuk-card__content--arrow { + padding-right: 75px; + + .nhsuk-icon { + display: block; + fill: $color_nhsuk-blue; + margin-top: - nhsuk-spacing(2); + position: absolute; + right: nhsuk-spacing(4); + top: 50%; + } + +} diff --git a/packages/components/card/template.njk b/packages/components/card/template.njk index 34d225259..d28f07537 100644 --- a/packages/components/card/template.njk +++ b/packages/components/card/template.njk @@ -11,6 +11,7 @@ {%- endif %}
    {%- if params.headingHtml %} {{ params.headingHtml | safe }} @@ -46,5 +47,8 @@

    {{ params.description | safe }}

    {%- else %} {%- endif %} + {% if params.arrow %} + + {% endif %}
    From 80835695fb1e9fe68bb824ab963350bdee08f40b Mon Sep 17 00:00:00 2001 From: Paul Date: Wed, 19 Jul 2023 13:05:17 +0100 Subject: [PATCH 02/20] added transparent card --- app/components/card/card-transparent.njk | 29 ++++++++++++++++++++++++ app/pages/examples.njk | 1 + packages/components/card/card.scss | 18 ++++++++++++++- packages/components/card/template.njk | 1 + 4 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 app/components/card/card-transparent.njk diff --git a/app/components/card/card-transparent.njk b/app/components/card/card-transparent.njk new file mode 100644 index 000000000..61f573b6a --- /dev/null +++ b/app/components/card/card-transparent.njk @@ -0,0 +1,29 @@ +{% set html_style = 'background-color: #f0f4f5;' %} +{% set title = 'Card - transparent' %} +{% from 'components/card/macro.njk' import card %} +{% extends 'layout.njk' %} + +{% block body %} + +
    +
    + +
    +
    + + {{ card({ + "href": "#", + "clickable": "true", + "transparent": "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/pages/examples.njk b/app/pages/examples.njk index 793a8f278..4a6e35ed0 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -40,6 +40,7 @@
  • Card - Card with an image
  • Card - Card group
  • Card - Feature card
    • +
  • Card - transparent
  • Card - Care card non-urgent (blue)
  • Card - Care card urgent (red)
  • Card - Care card emergency (red and black)
    • diff --git a/packages/components/card/card.scss b/packages/components/card/card.scss index 7bf66da4e..cbec175e8 100644 --- a/packages/components/card/card.scss +++ b/packages/components/card/card.scss @@ -273,7 +273,7 @@ $card-border-hover-color: $color_nhsuk-grey-3; } } -/* Card arrow +/* Card with an arrow ========================================================================== */ .nhsuk-card__content--arrow { @@ -289,3 +289,19 @@ $card-border-hover-color: $color_nhsuk-grey-3; } } + + +/* Card transparent + ========================================================================== */ + +.nhsuk-card--transparent { + background: transparent; + border-bottom: $card-border-bottom-width solid $card-border-color; + border-left: 0; + border-right: 0; + border-top: 0; +} + +.nhsuk-card--transparent__content { + +} \ No newline at end of file diff --git a/packages/components/card/template.njk b/packages/components/card/template.njk index d28f07537..399ce74d0 100644 --- a/packages/components/card/template.njk +++ b/packages/components/card/template.njk @@ -2,6 +2,7 @@
    Date: Tue, 25 Jul 2023 10:18:46 +0100 Subject: [PATCH 03/20] updating top task card --- app/components/card/top-task-card.njk | 28 +++++++++++++++++++++++++++ app/pages/examples.njk | 3 ++- packages/components/card/README.md | 2 ++ packages/components/card/card.scss | 10 ++++++++-- packages/components/card/template.njk | 4 +++- 5 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 app/components/card/top-task-card.njk diff --git a/app/components/card/top-task-card.njk b/app/components/card/top-task-card.njk new file mode 100644 index 000000000..f23cd38a5 --- /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": 3, + "heading": "Order a repeat prescription", + "headingClasses": "nhsuk-heading-m" + }) }} + +
    +
    + +
    +
    + +{% endblock %} \ No newline at end of file diff --git a/app/pages/examples.njk b/app/pages/examples.njk index 4a6e35ed0..500f529f0 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -40,7 +40,8 @@
  • Card - Card with an image
  • Card - Card group
  • Card - Feature card
    • -
  • Card - transparent
    • +
  • Card - Transparent 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..28b6b19ad 100644 --- a/packages/components/card/README.md +++ b/packages/components/card/README.md @@ -534,7 +534,9 @@ The card Nunjucks macro takes the following arguments: | **headingLevel** | integer | No | Optional heading level for the card heading. Default: 2 | | **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. | +| **arrow** | boolean | No | If set to true, then the class `nhsuk-card__content--arrow` 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. | +| **tranparent** | boolean | No | If set to true, then the class `nhsuk-card--transparent` and `nhsuk-card__content--transparent` 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 cbec175e8..d9cd32eb6 100644 --- a/packages/components/card/card.scss +++ b/packages/components/card/card.scss @@ -279,6 +279,10 @@ $card-border-hover-color: $color_nhsuk-grey-3; .nhsuk-card__content--arrow { padding-right: 75px; + @include mq($from: desktop) { + height: 100%; + } + .nhsuk-icon { display: block; fill: $color_nhsuk-blue; @@ -302,6 +306,8 @@ $card-border-hover-color: $color_nhsuk-grey-3; border-top: 0; } -.nhsuk-card--transparent__content { - +.nhsuk-card__content--transparent { + padding-left: 0; + padding-right: 0; + padding-top: 0; } \ No newline at end of file diff --git a/packages/components/card/template.njk b/packages/components/card/template.njk index 399ce74d0..1eb162d89 100644 --- a/packages/components/card/template.njk +++ b/packages/components/card/template.njk @@ -5,6 +5,7 @@ {%- if params.transparent %} nhsuk-card--transparent{% 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 %} @@ -13,6 +14,7 @@
    {%- if params.headingHtml %} {{ params.headingHtml | safe }} @@ -49,7 +51,7 @@ {%- else %} {%- endif %} {% if params.arrow %} - + {% endif %}
    From 93c6291746377966bf5e3a833351273cc36e1775 Mon Sep 17 00:00:00 2001 From: Paul Date: Wed, 2 Aug 2023 15:30:25 +0100 Subject: [PATCH 04/20] Prettier FTW --- app/components/card/card-with-arrow.njk | 4 ---- packages/components/card/README.md | 4 ++-- packages/components/card/card.scss | 6 ++---- 3 files changed, 4 insertions(+), 10 deletions(-) diff --git a/app/components/card/card-with-arrow.njk b/app/components/card/card-with-arrow.njk index e64b644e6..969711c7c 100644 --- a/app/components/card/card-with-arrow.njk +++ b/app/components/card/card-with-arrow.njk @@ -7,10 +7,8 @@
    -
    - {{ card({ "href": "#", "arrow": "true", @@ -19,10 +17,8 @@ "headingClasses": "nhsuk-heading-m", "description": "A quick guide for people who have care and support needs and their carers" }) }} -
    -
    diff --git a/packages/components/card/README.md b/packages/components/card/README.md index 28b6b19ad..a4573251d 100644 --- a/packages/components/card/README.md +++ b/packages/components/card/README.md @@ -534,9 +534,9 @@ The card Nunjucks macro takes the following arguments: | **headingLevel** | integer | No | Optional heading level for the card heading. Default: 2 | | **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. | -| **arrow** | boolean | No | If set to true, then the class `nhsuk-card__content--arrow` will be applied. | +| **arrow** | boolean | No | If set to true, then the class `nhsuk-card__content--arrow` 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. | -| **tranparent** | boolean | No | If set to true, then the class `nhsuk-card--transparent` and `nhsuk-card__content--transparent` will be applied. | +| **tranparent** | boolean | No | If set to true, then the class `nhsuk-card--transparent` and `nhsuk-card__content--transparent` 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 d9cd32eb6..ade516ba0 100644 --- a/packages/components/card/card.scss +++ b/packages/components/card/card.scss @@ -286,15 +286,13 @@ $card-border-hover-color: $color_nhsuk-grey-3; .nhsuk-icon { display: block; fill: $color_nhsuk-blue; - margin-top: - nhsuk-spacing(2); + margin-top: -nhsuk-spacing(2); position: absolute; right: nhsuk-spacing(4); top: 50%; } - } - /* Card transparent ========================================================================== */ @@ -310,4 +308,4 @@ $card-border-hover-color: $color_nhsuk-grey-3; padding-left: 0; padding-right: 0; padding-top: 0; -} \ No newline at end of file +} From 41c4fc0a020d9f2d41ef86d9d667b2385f9eab5e Mon Sep 17 00:00:00 2001 From: Paul Date: Thu, 3 Aug 2023 12:20:27 +0100 Subject: [PATCH 05/20] updating card naming convention --- .../card/{card-transparent.njk => card-secondary.njk} | 8 ++++---- app/pages/examples.njk | 1 - packages/components/card/README.md | 11 +++++------ packages/components/card/card.scss | 6 +++--- packages/components/card/template.njk | 4 ++-- 5 files changed, 14 insertions(+), 16 deletions(-) rename app/components/card/{card-transparent.njk => card-secondary.njk} (69%) diff --git a/app/components/card/card-transparent.njk b/app/components/card/card-secondary.njk similarity index 69% rename from app/components/card/card-transparent.njk rename to app/components/card/card-secondary.njk index 61f573b6a..be3ccd2c6 100644 --- a/app/components/card/card-transparent.njk +++ b/app/components/card/card-secondary.njk @@ -1,5 +1,5 @@ {% set html_style = 'background-color: #f0f4f5;' %} -{% set title = 'Card - transparent' %} +{% set title = 'Card - secondary' %} {% from 'components/card/macro.njk' import card %} {% extends 'layout.njk' %} @@ -14,10 +14,10 @@ {{ card({ "href": "#", "clickable": "true", - "transparent": "true", - "heading": "Introduction to care and support", + "secondary": "true", + "heading": "Urgent and emergency care services", "headingClasses": "nhsuk-heading-m", - "description": "A quick guide for people who have care and support needs and their carers" + "description": "Services the NHS provides if you need urgent or emergency medical help" }) }} diff --git a/app/pages/examples.njk b/app/pages/examples.njk index 500f529f0..e26e9ded3 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -35,7 +35,6 @@
  • Button secondary
  • Button reverse
  • Card - Basic card
    • -
  • Card - Clickable card
  • Card - Card with an arrow
  • Card - Card with an image
  • Card - Card group
    • diff --git a/packages/components/card/README.md b/packages/components/card/README.md index a4573251d..847bd333d 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 +### Card with an arrow card [Preview the clickable card component](https://nhsuk.github.io/nhsuk-frontend/components/card/clickable-card.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

    +
    ``` diff --git a/packages/components/card/card.scss b/packages/components/card/card.scss index ade516ba0..5ef243cdb 100644 --- a/packages/components/card/card.scss +++ b/packages/components/card/card.scss @@ -293,10 +293,10 @@ $card-border-hover-color: $color_nhsuk-grey-3; } } -/* Card transparent +/* Card secondary ========================================================================== */ -.nhsuk-card--transparent { +.nhsuk-card--secondary { background: transparent; border-bottom: $card-border-bottom-width solid $card-border-color; border-left: 0; @@ -304,7 +304,7 @@ $card-border-hover-color: $color_nhsuk-grey-3; border-top: 0; } -.nhsuk-card__content--transparent { +.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 1eb162d89..02ecb1d2d 100644 --- a/packages/components/card/template.njk +++ b/packages/components/card/template.njk @@ -2,7 +2,7 @@
    {%- if params.headingHtml %} {{ params.headingHtml | safe }} From 1aa746f59a33e13876766330b958986d88d25329 Mon Sep 17 00:00:00 2001 From: Paul Date: Thu, 3 Aug 2023 12:20:48 +0100 Subject: [PATCH 06/20] updating card group example --- app/components/card/card-group.njk | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/app/components/card/card-group.njk b/app/components/card/card-group.njk index 95d813bdf..c3812aeb1 100644 --- a/app/components/card/card-group.njk +++ b/app/components/card/card-group.njk @@ -17,6 +17,7 @@
  • {{ card({ "href": "#", + "arrow": "true", "clickable": "true", "heading": "Introduction to care and support", "headingClasses": "nhsuk-heading-m", @@ -26,6 +27,7 @@
  • {{ card({ "href": "#", + "arrow": "true", "clickable": "true", "heading": "Help from social services and charities", "headingClasses": "nhsuk-heading-m", @@ -35,19 +37,21 @@
  • {{ card({ "href": "#", + "arrow": "true", "clickable": "true", - "heading": "Money, work and benefits", + "heading": "Care after a hospital stay", "headingClasses": "nhsuk-heading-m", - "description": "How to pay for care and support, and where you can get help with costs" + "description": "Includes hospital discharge and care and support afterwards" }) }}
  • {{ card({ "href": "#", + "arrow": "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" }) }}
    • From f974279682f15885aa627dce3de95693020a0096 Mon Sep 17 00:00:00 2001 From: Paul Date: Thu, 3 Aug 2023 12:25:55 +0100 Subject: [PATCH 07/20] fixing broken reference --- app/pages/examples.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/pages/examples.njk b/app/pages/examples.njk index e26e9ded3..dbe8fcee7 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -39,7 +39,7 @@
  • Card - Card with an image
  • Card - Card group
  • Card - Feature card
    • -
  • Card - Transparent card
    • +
  • Card - Secondary card
  • Card - Top task card
  • Card - Care card non-urgent (blue)
  • Card - Care card urgent (red)
    • From d8d071bb992857bbea3d3076b6ddf2e5d29307b9 Mon Sep 17 00:00:00 2001 From: Paul Date: Thu, 3 Aug 2023 16:09:50 +0100 Subject: [PATCH 08/20] updating class name for primary card --- .../card/{card-with-arrow.njk => card-primary.njk} | 4 ++-- packages/components/card/card.scss | 4 ++-- packages/components/card/template.njk | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) rename app/components/card/{card-with-arrow.njk => card-primary.njk} (88%) diff --git a/app/components/card/card-with-arrow.njk b/app/components/card/card-primary.njk similarity index 88% rename from app/components/card/card-with-arrow.njk rename to app/components/card/card-primary.njk index 969711c7c..02617d995 100644 --- a/app/components/card/card-with-arrow.njk +++ b/app/components/card/card-primary.njk @@ -1,5 +1,5 @@ {% set html_style = 'background-color: #f0f4f5;' %} -{% set title = 'Card - card with an arrow' %} +{% set title = 'Card - primary card (with chevron)' %} {% from 'components/card/macro.njk' import card %} {% extends 'layout.njk' %} @@ -11,7 +11,7 @@
    {{ card({ "href": "#", - "arrow": "true", + "primary": "true", "clickable": "true", "heading": "Introduction to care and support", "headingClasses": "nhsuk-heading-m", diff --git a/packages/components/card/card.scss b/packages/components/card/card.scss index 5ef243cdb..dcded513e 100644 --- a/packages/components/card/card.scss +++ b/packages/components/card/card.scss @@ -273,10 +273,10 @@ $card-border-hover-color: $color_nhsuk-grey-3; } } -/* Card with an arrow +/* Card primary ========================================================================== */ -.nhsuk-card__content--arrow { +.nhsuk-card__content--primary { padding-right: 75px; @include mq($from: desktop) { diff --git a/packages/components/card/template.njk b/packages/components/card/template.njk index 02ecb1d2d..bfabdb4c5 100644 --- a/packages/components/card/template.njk +++ b/packages/components/card/template.njk @@ -13,7 +13,7 @@ {%- endif %}
    {%- if params.headingHtml %} @@ -35,7 +35,7 @@ {%- endif %} {%- if params.type %} - +
    {% endif %} {%- endif %} @@ -50,7 +50,7 @@

    {{ params.description | safe }}

    {%- else %} {%- endif %} - {% if params.arrow %} + {% if params.primary %} {% endif %}
    From e4ebb0f2cc9c878c949391b1574f302fe7551255 Mon Sep 17 00:00:00 2001 From: Paul Date: Thu, 3 Aug 2023 16:10:23 +0100 Subject: [PATCH 09/20] update references to primary card --- app/components/card/card-group.njk | 14 +++++++------- app/pages/examples.njk | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/components/card/card-group.njk b/app/components/card/card-group.njk index c3812aeb1..aba6cd026 100644 --- a/app/components/card/card-group.njk +++ b/app/components/card/card-group.njk @@ -17,7 +17,7 @@
  • {{ card({ "href": "#", - "arrow": "true", + "primary": "true", "clickable": "true", "heading": "Introduction to care and support", "headingClasses": "nhsuk-heading-m", @@ -27,27 +27,27 @@
  • {{ card({ "href": "#", - "arrow": "true", + "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": "#", - "arrow": "true", + "primary": "true", "clickable": "true", - "heading": "Care after a hospital stay", + "heading": "Care services, equipment and care homes", "headingClasses": "nhsuk-heading-m", - "description": "Includes hospital discharge and care and support afterwards" + "description": "Includes home adaptations, help at home from a carer, social care you can get for free and housing." }) }}
  • {{ card({ "href": "#", - "arrow": "true", + "primary": "true", "clickable": "true", "heading": "Money, work and benefits", "headingClasses": "nhsuk-heading-m", diff --git a/app/pages/examples.njk b/app/pages/examples.njk index dbe8fcee7..fd7b532e3 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -35,10 +35,10 @@
  • Button secondary
  • Button reverse
  • Card - Basic card
    • -
  • Card - Card with an arrow
  • 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)
    • From abc559bb3eb109e52f105eb0ed8d8abef8e99dc5 Mon Sep 17 00:00:00 2001 From: Paul Date: Thu, 3 Aug 2023 16:10:43 +0100 Subject: [PATCH 10/20] update top task card --- app/components/card/top-task-card.njk | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/card/top-task-card.njk b/app/components/card/top-task-card.njk index f23cd38a5..702cb0b44 100644 --- a/app/components/card/top-task-card.njk +++ b/app/components/card/top-task-card.njk @@ -9,14 +9,14 @@
    -
    +
    {{ card({ "href": "#", "clickable": "true", - "headingLevel": 3, + "headingLevel": 5, "heading": "Order a repeat prescription", - "headingClasses": "nhsuk-heading-m" + "headingClasses": "nhsuk-heading-xs" }) }}
    From 97ed51c391a0366b4c4a17a5fd6cf6cbd13eaec4 Mon Sep 17 00:00:00 2001 From: Paul Date: Thu, 3 Aug 2023 16:31:38 +0100 Subject: [PATCH 11/20] fixed broken link --- app/pages/examples.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/pages/examples.njk b/app/pages/examples.njk index fd7b532e3..f4683e0e5 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -38,7 +38,7 @@
  • Card - Card with an image
  • Card - Card group
  • Card - Feature card
    • -
  • Card - Primary card (with chevron)
    • +
  • Card - Primary card (with chevron)
  • Card - Secondary card
  • Card - Top task card
  • Card - Care card non-urgent (blue)
    • From 39943d01395510e84793c82035c65682126c1636 Mon Sep 17 00:00:00 2001 From: Paul Date: Mon, 14 Aug 2023 15:55:21 +0100 Subject: [PATCH 12/20] update documentation to reflect css naming convention --- packages/components/card/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/card/README.md b/packages/components/card/README.md index 847bd333d..a59f5640f 100644 --- a/packages/components/card/README.md +++ b/packages/components/card/README.md @@ -535,7 +535,7 @@ The card Nunjucks macro takes the following arguments: | **clickable** | boolean | No | If set to true, then the class `nhsuk-card--clickable` will be applied. | | **arrow** | boolean | No | If set to true, then the class `nhsuk-card__content--arrow` 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. | -| **tranparent** | boolean | No | If set to true, then the class `nhsuk-card--transparent` and `nhsuk-card__content--transparent` 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 | From 2994975a51a726255914f49d82217aea4df4cfa2 Mon Sep 17 00:00:00 2001 From: Paul Date: Mon, 14 Aug 2023 16:05:40 +0100 Subject: [PATCH 13/20] update example for primary card --- packages/components/card/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/card/README.md b/packages/components/card/README.md index a59f5640f..7166ddf90 100644 --- a/packages/components/card/README.md +++ b/packages/components/card/README.md @@ -33,17 +33,17 @@ Find out more about the card component and when to use it in the [NHS digital se }) }} ``` -### Card with an arrow card +### Primary card (with chevron) -[Preview the clickable card component](https://nhsuk.github.io/nhsuk-frontend/components/card/clickable-card.html) +[Preview the clickable card component](https://nhsuk.github.io/nhsuk-frontend/components/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

    From 65c55fec1dd1b8dba2a90e8791fefdb260805ec9 Mon Sep 17 00:00:00 2001 From: Paul Date: Mon, 14 Aug 2023 16:27:49 +0100 Subject: [PATCH 14/20] update card example --- packages/components/card/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/card/README.md b/packages/components/card/README.md index 7166ddf90..4f2944b3c 100644 --- a/packages/components/card/README.md +++ b/packages/components/card/README.md @@ -535,7 +535,7 @@ The card Nunjucks macro takes the following arguments: | **clickable** | boolean | No | If set to true, then the class `nhsuk-card--clickable` will be applied. | | **arrow** | boolean | No | If set to true, then the class `nhsuk-card__content--arrow` 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. | -| **secondary** | boolean | No | If set to true, then the class `nhsuk-card--secondary` and `nhsuk-card__content--secondary` 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 | From 0eb9b7df4dc9d6420742b784ff9125cd9cd448f8 Mon Sep 17 00:00:00 2001 From: Paul Date: Tue, 15 Aug 2023 14:00:14 +0100 Subject: [PATCH 15/20] Update care card arrow --- packages/components/card/template.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/card/template.njk b/packages/components/card/template.njk index bfabdb4c5..0473be7e3 100644 --- a/packages/components/card/template.njk +++ b/packages/components/card/template.njk @@ -35,7 +35,7 @@ {%- endif %} {%- if params.type %} - +
    {% endif %} {%- endif %} From 635637a9bdbedecc0a3a4b5a83f36d141cc171f3 Mon Sep 17 00:00:00 2001 From: Paul Date: Thu, 17 Aug 2023 14:00:33 +0100 Subject: [PATCH 16/20] update readme to match new naming --- packages/components/card/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/card/README.md b/packages/components/card/README.md index 4f2944b3c..987957040 100644 --- a/packages/components/card/README.md +++ b/packages/components/card/README.md @@ -533,8 +533,8 @@ The card Nunjucks macro takes the following arguments: | **headingLevel** | integer | No | Optional heading level for the card heading. Default: 2 | | **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. | -| **arrow** | boolean | No | If set to true, then the class `nhsuk-card__content--arrow` 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 | From ed639f34e7530d9b92e6e6deed6bfefb688fe274 Mon Sep 17 00:00:00 2001 From: Paul Date: Thu, 17 Aug 2023 14:12:28 +0100 Subject: [PATCH 17/20] fix formatting --- packages/components/card/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/card/README.md b/packages/components/card/README.md index 987957040..f00ba7a58 100644 --- a/packages/components/card/README.md +++ b/packages/components/card/README.md @@ -534,7 +534,7 @@ 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. | +| **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 | From eec9f1abe61a3f3367bb680e199b141976cf7ecb Mon Sep 17 00:00:00 2001 From: Paul Date: Thu, 17 Aug 2023 15:23:45 +0100 Subject: [PATCH 18/20] add secondary card example --- packages/components/card/README.md | 34 +++++++++++++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/packages/components/card/README.md b/packages/components/card/README.md index f00ba7a58..55721f48f 100644 --- a/packages/components/card/README.md +++ b/packages/components/card/README.md @@ -35,7 +35,7 @@ Find out more about the card component and when to use it in the [NHS digital se ### Primary card (with chevron) -[Preview the clickable card component](https://nhsuk.github.io/nhsuk-frontend/components/card/primary.html) +[Preview the primary card component](https://nhsuk.github.io/nhsuk-frontend/components/card/card-primary.html) #### HTML markup @@ -65,6 +65,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) From e9511f316dd83ef817e8a579a8ec7196e29430ec Mon Sep 17 00:00:00 2001 From: Paul Date: Thu, 17 Aug 2023 15:42:53 +0100 Subject: [PATCH 19/20] update macro for primary card --- packages/components/card/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/card/README.md b/packages/components/card/README.md index 55721f48f..8cb4a7f1c 100644 --- a/packages/components/card/README.md +++ b/packages/components/card/README.md @@ -58,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", From 95b436a783f0137dfdb8c0926958ff4236a5a0f4 Mon Sep 17 00:00:00 2001 From: Paul Date: Mon, 21 Aug 2023 15:01:52 +0100 Subject: [PATCH 20/20] update changelog --- CHANGELOG.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) 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**