feat: add Homepage banner pattern (#784)

* add homepage banner image

* add homepage banner styles

* add homepage banner component and documentation

* update comment

src/wmnds/patterns/_patterns.scss

@@ -1,7 +1,7 @@
 // This file is imported from ./assets/sass/wmnds-components.scss
 
 @import "autocomplete/autocomplete"; // Autocomplete
-@import "banner/banner"; // Header styles
+@import "banner/banner"; // Banner styles
 @import "buy-a-ticket/buy-a-ticket"; // Buy a ticket styles
 @import "cookies/cookies"; // Cookies styles
 @import "contact-details/contact-details"; // contact-details styles

src/wmnds/patterns/banner/_banner.scss

@@ -1,3 +1,5 @@
+@import "./homepage-banner/homepage-banner";
+
 .wmnds-banner-container {
   $self: &;
   padding: $size-md 0;

src/wmnds/patterns/banner/homepage-banner/_example.njk

@@ -0,0 +1,10 @@
+{% raw %}
+{% from "wmnds/patterns/banner/homepage-banner/_homepage-banner.njk" import wmndsHomepageBanner %}
+
+{{
+  wmndsHomepageBanner({
+    titleHTML: "Bringing transport <br>together",
+    image: "/img/component-images/banner/homepage-banner-img.png",
+  })
+}}
+{% endraw %}

src/wmnds/patterns/banner/homepage-banner/_homepage-banner.njk

@@ -0,0 +1,17 @@
+{% macro wmndsHomepageBanner(params) %}
+{# Vars #}
+{% set image = params.image if params.image else "/img/component-images/banner/homepage-banner-img.png" %}
+{# Title #}
+{% set titleText = params.titleText if params.titleText else null %}
+{% set titleHTML = params.titleHTML if params.titleHTML else 'Bringing transport <br>together' %}
+{% set _title = titleText if titleText else titleHTML | safe %}
+
+<div class="wmnds-homepage-banner" style="background-image: url({{image}});">
+    <div class="wmnds-container">
+        <h1 class="wmnds-homepage-banner__title">
+            <span class="wmnds-homepage-banner__title-content">{{_title}}</span>
+        </h1>
+    </div>
+</div>
+
+{% endmacro %}

src/wmnds/patterns/banner/homepage-banner/_homepage-banner.scss

@@ -0,0 +1,21 @@
+.wmnds-homepage-banner {
+  min-height: 325px;
+  padding: $size-lg 0;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: cover;
+
+  &__title {
+    @include type-setting(2);
+    display: inline;
+    color: $white;
+    background-color: get-color(primary);
+    box-shadow: 5px 0 0 5px get-color(primary), -5px 0 0 5px get-color(primary);
+  }
+
+  &__title-content {
+    position: relative; // Fix background-color overlapping rows
+    font-size: inherit;
+    line-height: inherit;
+  }
+}

src/wmnds/patterns/banner/homepage-banner/_properties.njk.json

@@ -0,0 +1,19 @@
+{
+  "wmndsHomepageBannerProps": [
+    {
+      "name": "titleText",
+      "type": "string",
+      "description": "Title text to use in the banner."
+    },
+    {
+      "name": "titleHTML",
+      "type": "string",
+      "description": "HTML title content to use in the banner. If <code class='wmnds-website-inline-code'>titleText</code> is provided, the <code class='wmnds-website-inline-code'>titleHTML</code>  argument will be ignored."
+    },
+    {
+      "name": "image",
+      "type": "string",
+      "description": "Url for the image to be displayed in the banner."
+    }
+  ]
+}

src/www/pages/patterns/banner/index.njk.md

@@ -127,7 +127,7 @@
 }}
 {% markdown %}
 
-{# About #}
+{# Travel mode page banner #}
 
 ## Travel Mode Page Banner
 
@@ -173,4 +173,46 @@
   })
 }}
 
+{% markdown %}
+
+{# Homepage banner #}
+
+## Homepage
+
+{# What #}
+
+<h3>What does it do?</h3>
+
+- Provides a visual illustration of our most popular transport modes
+- Highlights a welcome message for visitors of the West Midlands Network site
+
+{# When #}
+
+<h3>When to use it?</h3>
+
+- On the homepage
+
+<h3>When not to use it?</h3>
+
+- On pages where the mode of travel is not operated by Transport for West Midlands, such as E-scooters
+
+<h3>How it works</h3>
+
+- The banner image will change on each page refresh. There are three images that will be shown in the banner, one for bus, train and tram
+- The welcome message requires a Primary Purple highlight to provide sufficient colour contrast against the banner image
+
+{% endmarkdown %}
+
+{% from "wmnds/patterns/banner/homepage-banner/_homepage-banner.njk" import wmndsHomepageBanner %}
+
+{{
+  compExample([
+    wmndsHomepageBanner()
+  ], {
+    componentPath: "wmnds/patterns/banner/homepage-banner/",
+    njk: true,
+    njkProps: wmndsHomepageBannerProps
+  })
+}}
+
 {% endblock %}