feat(alert): initial build of new alert component

docs/components/banner-new.md → docs/components/alert.md

@@ -1,12 +1,12 @@
 ---
 layout: layouts/component.njk
-title: Banner (updated)
+title: Alert
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/835
 eleventyNavigation:
-  key: Banner (updated)
+  key: Alert
   parent: Components
-  excerpt: "Use the banner component to display a prominent message and related actions to take."
+  excerpt: "Use the alert component to display a prominent message and related actions to take."
 ---
 
 <span class="govuk-caption-xl">[content]</span>
@@ -15,7 +15,7 @@ eleventyNavigation:
 
 {% tab "Overview" %}
 
-{% example "/examples/banner-new" %}
+{% example "/examples/alert" %}
 
 ## Overview
 
@@ -90,4 +90,4 @@ eleventyNavigation:
 
 {% endtabs %}
 
-<hr />
+<hr />

docs/examples/banner-new/index.njk → docs/examples/alert/index.njk

@@ -1,16 +1,17 @@
 ---
 layout: layouts/example.njk
-title: Banner (example)
+title: Alert (example)
 figma_link: https://www.figma.com/file/N2xqOFkyehXwcD9DxU1gEq/MoJ-Figma-Kit?type=design&node-id=66-5802&mode=design
 ---
-{%- from "moj/components/banner/macro.njk" import mojBanner -%}
+{%- from "moj/components/alert/macro.njk" import mojAlert -%}
 
 {% set bannerHtml %}
   <h2 class="govuk-heading-m">This is a placeholder banner</h2>
   <p>Waiting for the new banner build</p>
 {% endset %}
 
-{{ mojBanner({
-  type: 'information',
-  html: bannerHtml
+{{ mojAlert({
+  type: "information",
+  heading: "This is some information",
+  text: "Content that informs you of a thing"
 }) }}

docs/examples/alerts/index.njk

@@ -0,0 +1,117 @@
+---
+layout: layouts/example.njk
+title: Alert (example)
+figma_link: https://www.figma.com/file/N2xqOFkyehXwcD9DxU1gEq/MoJ-Figma-Kit?type=design&node-id=66-5802&mode=design
+---
+{%- from "moj/components/alert/macro.njk" import mojAlert -%}
+
+{{ mojAlert({
+  type: "information",
+  text: "Content that informs you of a thing."
+  }) }}
+
+{{ mojAlert({
+  type: "success",
+  text: "That thing just successfully occurred."
+}) }}
+
+{{ mojAlert({
+  type: "warning",
+  text: "You should be aware of this thing."
+}) }}
+
+{{ mojAlert({
+  type: "error",
+  text: "Bad things happened."
+}) }}
+
+{{ mojAlert({
+  type: "information",
+  text: "Content that informs you of a thing. It really is so very informative, that's why it needs so much content and is really, exceedingly verbose."
+  })
+}}
+
+<h2>with headings</h2>
+
+{{ mojAlert({
+ type: "information",
+  heading: "You might like to know",
+  text: "Content that informs you of a thing."
+}) }}
+
+{{ mojAlert({
+ type: "succcess",
+  heading: "Woohoo!",
+  text: "That thing just successfully occurred."
+}) }}
+
+
+{{ mojAlert({
+  type: "warning",
+  heading: "Something's not quite right",
+  text: "You should be aware of this thing."
+}) }}
+
+{{ mojAlert({
+type: "error",
+heading: "Woah, hold up!",
+text: "Bad things happened."
+}) }}
+
+<h2>with headings level</h2>
+
+{{ mojAlert({
+ type: "information",
+ heading: "You might like to know",
+ headingLevel: 3,
+  text: "Content that informs you of a thing."
+}) }}
+
+<h2>Dismissible</h2>
+
+{{ mojAlert({
+  type: "information",
+  dismissible: true,
+  text: "Content that informs you of a thing."
+  }) }}
+
+{{ mojAlert({
+type: "success",
+dismissible: "yes",
+  text: "That thing just successfully occurred."
+}) }}
+
+{{ mojAlert({
+  type: "warning",
+  dismissible: "false",
+  text: "You should be aware of this thing."
+}) }}
+
+{{ mojAlert({
+  type: "error",
+  dismissible: false,
+  text: "Bad things happened."
+}) }}
+
+{{ mojAlert({
+  type: "information",
+  dismissible: true,
+  text: "Content that informs you of a thing. It really is so very informative, that's why it needs so much content and is really, exceedingly verbose."
+  })
+}}
+
+{{ mojAlert({
+  type: "information",
+  heading: "This contains information",
+  dismissible: true,
+  text: "Content that informs you of a thing. It really is so very informative, that's why it needs so much content and is really, exceedingly verbose."
+  })
+}}
+
+{{ mojAlert({
+  type: "information",
+  heading: "This contains information",
+  dismissible: true
+  })
+}}
+

src/moj/components/_all.scss

@@ -1,5 +1,6 @@
 @import "action-bar/action-bar";
 @import "add-another/add-another";
+@import "alert/alert";
 @import "badge/badge";
 @import "banner/banner";
 @import "button-menu/button-menu";

src/moj/components/alert/_alert.scss

@@ -0,0 +1,91 @@
+$moj-colour-orange: #eb611c;
+
+.moj-alert {
+  display: grid;
+  margin-bottom: govuk-spacing(6);
+  padding: govuk-spacing(3);
+  border: 5px solid transparent;
+  background: govuk-colour("white");
+  grid-template-columns: min-content fit-content(960px);
+  grid-template-areas: "icon content";
+  gap: govuk-spacing(2);
+}
+
+.moj-alert--dismissible {
+  grid-template-areas:
+    "icon content"
+    ". action";
+
+  @include govuk-media-query($from: tablet) {
+    grid-template-columns: min-content fit-content(920px) auto;
+    grid-template-areas: "icon content action";
+  }
+}
+
+.moj-alert__icon {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  fill: currentcolor;
+}
+
+.moj-alert__content {
+  @include govuk-font($size: 19);
+  display: block;
+  overflow: hidden;
+  color: govuk-colour("black");
+}
+
+.moj-alert__action {
+  @include govuk-font($size: 19);
+  grid-area: action;
+  margin-bottom: 0;
+
+  @include govuk-media-query($from: tablet) {
+    justify-self: right;
+    padding-left: govuk-spacing(7);
+  }
+}
+
+.moj-alert__content h2,
+.moj-alert__content h3,
+.moj-alert__content h4 {
+  margin-bottom: 2px;
+  line-height: 30px;
+}
+
+.moj-alert__content:not(:has(:is(h2, h3, h4))) {
+  padding-top: 5px;
+
+  @include govuk-media-query($from: tablet) {
+    padding-top: 2px;
+  }
+}
+
+/* .moj-alert__content h2:last-child, */
+
+.moj-alert__content *:last-child {
+  margin-bottom: 0;
+}
+
+/* Style variants
+   ========================================================================== */
+.moj-alert--information {
+  border-color: $govuk-brand-colour;
+  color: $govuk-brand-colour;
+}
+
+.moj-alert--success {
+  border-color: govuk-colour("green");
+  color: govuk-colour("green");
+}
+
+.moj-alert--warning {
+  border-color: $moj-colour-orange;
+  color: $moj-colour-orange;
+}
+
+.moj-alert--error {
+  border-color: govuk-colour("red");
+  color: govuk-colour("red");
+}

src/moj/components/alert/macro.njk

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

src/moj/components/alert/template.njk

@@ -0,0 +1,63 @@
+{% from "govuk/macros/attributes.njk" import govukAttributes %}
+
+{#- Set classes for this component #}
+{%- set classNames = ["moj-alert"] -%}
+
+{%- if params.dismissible %}
+  {%- set classNames = classNames.concat("moj-alert--dismissible") %}
+{%- endif %}
+
+{%- if params.type == 'success' %}
+  {%- set classNames = classNames.concat("moj-alert--success") %}
+  {%- set iconPath = '<path d="M11.2869 24.6726L2.00415 15.3899L4.62189 12.7722L11.2869 19.4186L25.3781 5.32739L27.9958 7.96369L11.2869 24.6726Z" fill="currentColor"/>' %}
+{%- elif params.type == 'warning' %}
+  {%- set classNames = classNames.concat("moj-alert--warning") %}
+  {%- set iconPath = '<path d="M1.25 26.1992H28.75L15 2.44922L1.25 26.1992Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M16.4697 9.49585H13.5107L13.7461 17.7678H16.2431L16.4697 9.49585ZM13.2764 21.1072C13.1787 21.3285 13.1299 21.5662 13.1299 21.8201C13.1299 22.0805 13.1787 22.3246 13.2764 22.5525C13.374 22.7804 13.5075 22.9789 13.6768 23.1482C13.8525 23.3175 14.0544 23.4509 14.2822 23.5486C14.5101 23.6462 14.7542 23.6951 15.0146 23.6951C15.2686 23.6951 15.5062 23.6462 15.7275 23.5486C15.9554 23.4509 16.154 23.3175 16.3232 23.1482C16.4925 22.9789 16.626 22.7804 16.7236 22.5525C16.8213 22.3246 16.8701 22.0805 16.8701 21.8201C16.8701 21.5662 16.8213 21.3285 16.7236 21.1072C16.626 20.8793 16.4925 20.6807 16.3232 20.5115C16.154 20.3422 15.9554 20.2087 15.7275 20.1111C15.5062 20.0134 15.2686 19.9646 15.0146 19.9646C14.7542 19.9646 14.5101 20.0134 14.2822 20.1111C14.0544 20.2087 13.8525 20.3422 13.6768 20.5115C13.5075 20.6807 13.374 20.8793 13.2764 21.1072Z" fill="white" />' %}
+{%- elif params.type == 'error' %}
+  {%- set classNames = classNames.concat("moj-alert--error") %}
+  {%- set iconPath = '<path d="M20.1777 2.5L9.82232 2.5L2.49999 9.82233L2.49999 20.1777L9.82232 27.5L20.1777 27.5L27.5 20.1777L27.5 9.82233L20.1777 2.5Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M16.4697 7.90039L13.5107 7.90039L13.7461 16.1724L16.2431 16.1724L16.4697 7.90039ZM13.2764 19.5117C13.1787 19.7331 13.1299 19.9707 13.1299 20.2246C13.1299 20.485 13.1787 20.7292 13.2764 20.957C13.374 21.1849 13.5075 21.3835 13.6768 21.5527C13.8525 21.722 14.0544 21.8555 14.2822 21.9531C14.5101 22.0508 14.7542 22.0996 15.0146 22.0996C15.2686 22.0996 15.5062 22.0508 15.7275 21.9531C15.9554 21.8555 16.154 21.722 16.3232 21.5527C16.4925 21.3835 16.626 21.1849 16.7236 20.957C16.8213 20.7292 16.8701 20.485 16.8701 20.2246C16.8701 19.9707 16.8213 19.7331 16.7236 19.5117C16.626 19.2839 16.4925 19.0853 16.3232 18.916C16.154 18.7467 15.9554 18.6133 15.7275 18.5156C15.5062 18.418 15.2686 18.3691 15.0146 18.3691C14.7542 18.3691 14.5101 18.418 14.2822 18.5156C14.0544 18.6133 13.8525 18.7467 13.6768 18.916C13.5075 19.0853 13.374 19.2839 13.2764 19.5117Z" fill="white"/>' %}
+{%- else %}
+  {%- set classNames = classNames.concat("moj-alert--information") %}
+  {%- set iconPath = '<path d="M15 2.5C13.3585 2.5 11.733 2.82332 10.2165 3.45151C8.69989 4.07969 7.3219 5.00043 6.16117 6.16117C3.81696 8.50537 2.5 11.6848 2.5 15C2.5 18.3152 3.81696 21.4946 6.16117 23.8388C7.3219 24.9996 8.69989 25.9203 10.2165 26.5485C11.733 27.1767 13.3585 27.5 15 27.5C18.3152 27.5 21.4946 26.183 23.8388 23.8388C26.183 21.4946 27.5 18.3152 27.5 15C27.5 13.3585 27.1767 11.733 26.5485 10.2165C25.9203 8.69989 24.9996 7.3219 23.8388 6.16117C22.6781 5.00043 21.3001 4.07969 19.7835 3.45151C18.267 2.82332 16.6415 2.5 15 2.5Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M13.6621 22.4121H16.3574V12.95H13.6621V22.4121ZM13.5059 8.58398C13.4212 8.7793 13.3789 8.98763 13.3789 9.20898C13.3789 9.43685 13.4212 9.64844 13.5059 9.84375C13.5905 10.0391 13.7044 10.2116 13.8477 10.3613C13.9974 10.5046 14.1699 10.6185 14.3652 10.7031C14.5605 10.7878 14.7721 10.8301 15 10.8301C15.2214 10.8301 15.4297 10.7878 15.625 10.7031C15.8268 10.6185 15.9993 10.5046 16.1426 10.3613C16.2923 10.2116 16.4095 10.0391 16.4941 9.84375C16.5788 9.64844 16.6211 9.43685 16.6211 9.20898C16.6211 8.98763 16.5788 8.7793 16.4941 8.58398C16.4095 8.38216 16.2923 8.20964 16.1426 8.06641C15.9993 7.91667 15.8268 7.79948 15.625 7.71484C15.4297 7.63021 15.2214 7.58789 15 7.58789C14.7721 7.58789 14.5605 7.63021 14.3652 7.71484C14.1699 7.79948 13.9974 7.91667 13.8477 8.06641C13.7044 8.20964 13.5905 8.38216 13.5059 8.58398Z" fill="white"/>' %}
+{%- endif %}
+
+{%- if params.classes %}
+  {%- set classNames = classNames.concat(params.classes) %}
+{%- endif %}
+
+{%- set classNames = classNames | join(' ') -%}
+{%- set headingLevel = params.headingLevel | default(2) %}
+{%- set content = params.html | safe if params.html else params.text %}
+
+<div
+  class="{{ classNames }}"
+  {{- govukAttributes(params.attributes) -}}
+  role="region"
+  aria-label="{{ params.iconFallbackText | default(params.type) | default("banner") }}"
+>
+
+<div class="moj-alert__icon">
+  <svg role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" height="30" width="30">
+    {{- iconPath | safe }}
+  </svg>
+</div>
+
+  <div class="moj-alert__content">
+    {%- if params.heading and content %}
+      <h{{-headingLevel }} class="govuk-heading-m">
+        {{-params.heading }}
+      </h{{-headingLevel}}>
+    {%- endif %}
+
+    {%- if params.heading and not (content) %}
+      {{- params.heading }}
+    {%- endif %}
+
+    {{- content -}}
+  </div>
+
+  {%- if params.dismissible %}
+    <a href="#" class="moj-alert__action govuk-body govuk-link">Dismiss</a>
+  {%- endif %}
+
+</div>