add panel component (#204)

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.

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"
+}) }}

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<br><strong>HDJ2123F</strong>"
+}) }}

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";

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;
+}

src/components/panel/macro.njk

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

src/components/panel/panel.njk

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