Add panel component

app/components/panel/index.njk

@@ -0,0 +1,23 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Panel' %}
+{% from 'components/panel/macro.njk' import panel %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  <div class="nhsuk-width-container">
+    <main class="nhsuk-main-wrapper">
+
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-two-thirds">
+          {{ panel({
+            titleText: "Application complete",
+            html: "Your reference number<br><strong>HDJ2123F</strong>"
+          }) }}
+        </div>
+      </div>
+
+    </main>
+  </div>
+
+{% endblock %}

app/pages/examples.njk

@@ -105,6 +105,7 @@
     <li><a href="../components/label/bold.html">Label with bold text</a></li>
     <li><a href="../components/label/page-heading.html">Label as page heading</a></li>
     <li><a href="../components/pagination/index.html">Pagination</a></li>
+    <li><a href="../components/panel/index.html">Panel</a></li>
     <li><a href="../components/radios/index.html">Radios</a></li>
     <li><a href="../components/radios/inline.html">Radios inline</a></li>
     <li><a href="../components/radios/disabled.html">Radios disabled</a></li>

packages/components/panel/README.md

@@ -0,0 +1,54 @@
+# Panel
+
+## Guidance
+
+Find out more about the panel component and when to use it in the [NHS digital service manual](https://service-manual.nhs.uk/design-system/components/panel).
+
+## Quick start example
+
+[Preview the panel component](https://nhsuk.github.io/nhsuk-frontend/components/panel/index.html)
+
+### HTML markup
+
+```html
+<div class="nhsuk-panel">
+  <h1 class="nhsuk-panel__title">
+    Application complete
+  </h1>
+  <div class="nhsuk-panel__body">
+    Your reference number<br><strong>HDJ2123F</strong>
+  </div>
+</div>
+```
+
+### Nunjucks macro
+
+```
+{% from 'components/panel/macro.njk' import panel %}
+
+{{ panel({
+  titleText: "Application complete",
+  html: "Your reference number<br><strong>HDJ2123F</strong>"
+}) }}
+```
+
+### Nunjucks arguments
+
+The panel Nunjucks macro takes the following arguments:
+
+| Name             | Type           | Required | Description                                                                                                                                                                                                                                                                                                                                            |
+| ---------------- | -------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **titleText**    | string         | Yes      | If `titleHtml` is set, this is not required. Text to use within the panel. If `titleHtml` is provided, the `titleText` option will be ignored.                                                                                                                                                                                                         |
+| **titleHtml**    | string         | Yes      | If `titleText` is set, this is not required. HTML to use within the panel. If `titleHtml` is provided, the `titleText` option will be ignored.                                                                                                                                                                                                         |
+| **headingLevel** | integer        | No       | Heading level, from `1` to `6`. Default is `1`.                                                                                                                                                                                                                                                                                                        |
+| **text**         | string         | No       | If `html` is set, this is not required. Text to use within the panel content. If `html` is provided, the `text` option will be ignored.                                                                                                                                                                                                                |
+| **html**         | string         | No       | If `text` is set, this is not required. Text to use within the panel content. If `text` is provided, the `html` option will be ignored.                                                                                                                                                                                                                |
+| **caller**       | nunjucks-block | No       | Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire panel component in a `call` block. |
+| **classes**      | string         | No       | Optional additional classes to add to the hint div tag. Separate each class with a space.                                                                                                                                                                                                                                                              |
+| **attributes**   | object         | No       | Any extra HTML attributes (for example data attributes) to add to the input component.                                                                                                                                                                                                                                                                 |
+
+If you are using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `html` can be a [security risk](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting). Read more about this in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).
+
+## Thanks to the Government Digital Service (GDS)
+
+This component and documentation has been taken from [GOV.UK Frontend - Panel component](https://github.com/alphagov/govuk-frontend/tree/main/packages/govuk-frontend/src/govuk/components/panel) with a few minor adaptations.

packages/components/panel/_panel.scss

@@ -0,0 +1,58 @@
+// ==========================================================================
+// COMPONENTS / #PANEL
+// ==========================================================================
+
+/**
+ * Original code taken from GDS (Government Digital Service)
+ * https://github.com/alphagov/govuk-frontend
+ *
+ * 1. Adds a transparent border for high contrast modes 
+ * 2. This subtracts the transparent border width from the padding (because the border 
+ *    visually adds to the total padding)
+ * 3. 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.
+ * 4. Support IE (autoprefixer doesn't add this as it's not a prefix)
+ */
+
+$nhsuk-border-width-panel: nhsuk-spacing(1);
+
+.nhsuk-panel {
+  @include nhsuk-typography-responsive(24);
+  @include nhsuk-responsive-margin(4, "bottom");
+
+  background: $color_nhsuk-green;
+  border: $nhsuk-border-width-panel solid transparent; /* [1] */
+  box-sizing: border-box;
+  color: $color_nhsuk-white;
+  padding: nhsuk-spacing(5) - $nhsuk-border-width-panel; /* [2] */
+
+  @include mq($until: tablet) {
+    padding: nhsuk-spacing(4) - $nhsuk-border-width-panel; /* [2] */
+    overflow-wrap: break-word; /* [3] */
+    word-wrap: break-word; /* [4] */
+  }
+
+  @include mq($media-type: print) {
+    border-color: currentcolor;
+    color: $nhsuk-print-text-color;
+    background: none;
+  }
+}
+
+.nhsuk-panel__title {
+  @include nhsuk-typography-responsive(48);
+  @include nhsuk-responsive-margin(5, "bottom");
+
+  margin-top: 0;
+}
+
+.nhsuk-panel__title:last-child {
+  margin-bottom: 0;
+}

packages/components/panel/macro.njk

@@ -0,0 +1,3 @@
+{% macro panel(params) %}
+  {%- include './template.njk' -%}
+{% endmacro %}

packages/components/panel/template.njk

@@ -0,0 +1,16 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
+{% set headingLevel = params.headingLevel if params.headingLevel else 1 -%}
+
+<div class="nhsuk-panel
+  {%- if params.classes %} {{ params.classes }}{% endif %}"
+  {{- nhsukAttributes(params.attributes) }}>
+  <h{{ headingLevel }} class="nhsuk-panel__title">
+    {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
+  </h{{ headingLevel }}>
+  {% if caller or params.html or params.text %}
+  <div class="nhsuk-panel__body">
+    {{ caller() if caller else (params.html | safe | trim | indent(4) if params.html else params.text) }}
+  </div>
+  {% endif %}
+</div>

packages/nhsuk.scss

@@ -27,6 +27,7 @@
 @import "components/inset-text/inset-text";
 @import "components/label/label";
 @import "components/pagination/pagination";
+@import "components/panel/panel";
 @import "components/checkboxes/checkboxes";
 @import "components/radios/radios";
 @import "components/select/select";

tests/backstop/backstop.js

@@ -368,6 +368,10 @@ module.exports = {
       label: 'Pagination',
       url: `${TEST_URL}/pagination/index.html`,
     },
+    {
+      label: 'Panel',
+      url: `${TEST_URL}/panel/index.html`,
+    },
     {
       label: 'Radios',
       url: `${TEST_URL}/radios/index.html`,