From db9d633eb64d88e8e944309656df736cbbe3bced Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Tue, 10 Dec 2024 13:51:35 +0000 Subject: [PATCH] add panel component (#204) --- docs/components/panel.md | 32 +++++++++++++ docs/examples/panel/panel-heading-only.njk | 12 +++++ docs/examples/panel/panel-with-ref.njk | 13 +++++ src/all.scss | 1 + src/components/panel/_panel.scss | 55 ++++++++++++++++++++++ src/components/panel/macro.njk | 3 ++ src/components/panel/panel.njk | 13 +++++ 7 files changed, 129 insertions(+) create mode 100644 docs/components/panel.md create mode 100644 docs/examples/panel/panel-heading-only.njk create mode 100644 docs/examples/panel/panel-with-ref.njk create mode 100644 src/components/panel/_panel.scss create mode 100644 src/components/panel/macro.njk create mode 100644 src/components/panel/panel.njk diff --git a/docs/components/panel.md b/docs/components/panel.md new file mode 100644 index 0000000..05d8d48 --- /dev/null +++ b/docs/components/panel.md @@ -0,0 +1,32 @@ +--- +layout: layouts/component.njk +title: Panel +description: The panel component is a visible container used on confirmation or results pages to highlight important content. +backlogID: 32 +tags: + - component +--- + +{% example "panel/panel-with-ref.njk" %} + +## When to use + +Use the panel component to display important information when a transaction has been completed. + +In most cases, the panel component is used on confirmation pages, to tell the user they have successfully completed the transaction. + +## When not to use + +Never use the panel component to highlight important information within body content. + +## How to use + +{% example "panel/panel-heading-only.njk" %} + +### How to write panel text + +Keep your panel text brief, as it's only meant for a high-level explanation of what has happened. For example, 'Application complete'. + +Aim to use short words and phrases to make sure highlighted information is easy to read at different screen sizes. For example, shorter amounts of information is less likely to wrap around the panel, which can happen when using the zoom function on mobiles. + +If you need to give detailed information, or more context, use the description text under the heading text. diff --git a/docs/examples/panel/panel-heading-only.njk b/docs/examples/panel/panel-heading-only.njk new file mode 100644 index 0000000..27d24d1 --- /dev/null +++ b/docs/examples/panel/panel-heading-only.njk @@ -0,0 +1,12 @@ +--- +layout: layouts/example.njk +title: Panel +figmaLink: +vueLink: +--- + +{% from "nhsapp/components/panel/macro.njk" import nhsappPanel %} + +{{ nhsappPanel({ + titleText: "Appointment confirmed" +}) }} \ No newline at end of file diff --git a/docs/examples/panel/panel-with-ref.njk b/docs/examples/panel/panel-with-ref.njk new file mode 100644 index 0000000..0a73148 --- /dev/null +++ b/docs/examples/panel/panel-with-ref.njk @@ -0,0 +1,13 @@ +--- +layout: layouts/example.njk +title: Panel +figmaLink: +vueLink: +--- + +{% from "nhsapp/components/panel/macro.njk" import nhsappPanel %} + +{{ nhsappPanel({ + titleText: "Application complete", + html: "Your reference number
HDJ2123F" +}) }} \ No newline at end of file diff --git a/src/all.scss b/src/all.scss index c0cb3a2..7a4d8af 100644 --- a/src/all.scss +++ b/src/all.scss @@ -9,6 +9,7 @@ @import "components/badge/badge"; @import "components/button"; @import "components/card/card"; +@import "components/panel/panel"; @import "components/tag/tag"; @import "components/timeline/timeline"; @import "components/summary-list"; diff --git a/src/components/panel/_panel.scss b/src/components/panel/_panel.scss new file mode 100644 index 0000000..81929c5 --- /dev/null +++ b/src/components/panel/_panel.scss @@ -0,0 +1,55 @@ +// ========================================================================== +// COMPONENTS / #PANEL +// ========================================================================== + +/** + * Original code taken from GDS (Government Digital Service) + * https://github.com/alphagov/govuk-frontend + * + * 1. This is an if-all-else-fails attempt to stop long words from overflowing the container + on very narrow viewports by forcing them to break and wrap instead. This + overflowing is more likely to happen when user increases text size on a mobile eg. using + iOS Safari text resize controls. + + The overflowing is a particular problem with the panel component since it uses white + text: when the text overflows the container, it is invisible on the white (page) + background. When the text in our other components overflow, the user might have to scroll + horizontally to view it but the the text remains legible. + * 2. Support IE (autoprefixer doesn't add this as it's not a prefix) + */ + +$nhsapp-border-width-panel: nhsuk-spacing(1); + +.nhsapp-panel { + @include nhsuk-typography-responsive(24); + @include nhsuk-responsive-margin(4, "bottom"); + + background: $color_nhsuk-green; + border: $nhsapp-border-width-panel solid transparent; + box-sizing: border-box; + color: $color_nhsuk-white; + padding: nhsuk-spacing(6) - $nhsapp-border-width-panel; + + @include mq($until: tablet) { + padding: nhsuk-spacing(4) - $nhsapp-border-width-panel; + overflow-wrap: break-word; /* [1] */ + word-wrap: break-word; /* [2] */ + } + + @include mq($media-type: print) { + border-color: currentcolor; + color: $nhsuk-print-text-color; + background: none; + } +} + +.nhsapp-panel__title { + @include nhsuk-typography-responsive(48); + @include nhsuk-responsive-margin(5, "bottom"); + + margin-top: 0; +} + +.nhsapp-panel__title:last-child { + margin-bottom: 0; +} diff --git a/src/components/panel/macro.njk b/src/components/panel/macro.njk new file mode 100644 index 0000000..b9fb4b6 --- /dev/null +++ b/src/components/panel/macro.njk @@ -0,0 +1,3 @@ +{% macro nhsappPanel(params) %} + {%- include "./panel.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/src/components/panel/panel.njk b/src/components/panel/panel.njk new file mode 100644 index 0000000..e2cc0cb --- /dev/null +++ b/src/components/panel/panel.njk @@ -0,0 +1,13 @@ +{% set headingLevel = params.headingLevel if params.headingLevel else 1 -%} + +
+ + {{ params.titleHtml | safe if params.titleHtml else params.titleText }} + + {% if caller or params.html or params.text %} +
+ {{ caller() if caller else (params.html | safe | trim | indent(4) if params.html else params.text) }} +
+ {% endif %} +
\ No newline at end of file