feat: hub header amends (#184)

* remove transport icons

* amend hub header

* fix responsive styles

Co-authored-by: Nathan Rogan <nathan.rogan@wmca.org.uk>

src/wmcads/components/hub-header/_hub-header.njk

@@ -1,10 +1,19 @@
 {% macro wmcadsHubHeader(params) %}
+{% set title = params.title if params.title else "Lorem ipsum dolor" %} {# set title text #}
+{% set subtitle = params.copy if params.copy else "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." %} {# set copy text #}
+
   <div class="wmcads-hub-header">
-      <div class="left-pane"></div>
+      <div class="wmcads-hub-header-left-pane"></div>
       <img class="banner" src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=2500&height=800&rnd=132122595620000000" alt="page title"/>
-      <div class="text-pane">
-          <h1>Page title</h1>
-          <div class="text">Subtext</div>
+      <div class="wmcads-hub-header-text-pane">
+      {% if(params.icon) %}
+          <i class="fal fa-home-alt fa-3x" aria-hidden="true"></i>
+      {% endif %}
+      {% if(params.image) %}
+          <img class="icon" src="/img/examples/logos-mayor-of-the-west-midlands.png">
+      {% endif %}
+          <h1>{{title}}</h1>
+          <div class="text">{{subtitle}}</div>
       </div>        
   </div>
 {% endmacro %}

src/wmcads/components/hub-header/_hub-header.scss

@@ -5,73 +5,88 @@
   color: $white;
   background: get-color(primary);
 
-  .left-pane {
-    display: inline-block;
-    position: relative;
-    width: 50%;
+  @media (max-width: $breakpoint-md) {
+    display: block;
     height: 100%;
   }
 
-  .left-pane:after {
-    content: "";
+  img:not(.icon) {
     display: inline-block;
-    position: absolute;
-    top: 33px;
-    right: -92px;
-    width: 164px;
-    height: 164px;
-    margin-right: 10px;
-    transform: rotate(45deg);
-    border-radius: 0 120px 0 0;
-    background-color: get-color(primary);
+    width: 50%;
+    height: 100%;
+    object-fit: cover;
+
+    @media (max-width: $breakpoint-md) {
+      display: none;
+    }
   }
 
-  img {
+  &-left-pane {
     display: inline-block;
+    position: relative;
     width: 50%;
     height: 100%;
-    object-fit: cover;
+
+    @media (max-width: $breakpoint-md) {
+      display: none;
+    }
+
+    &:after {
+      content: "";
+      display: inline-block;
+      position: absolute;
+      top: 33px;
+      right: -92px;
+      width: 164px;
+      height: 164px;
+      margin-right: 10px;
+      transform: rotate(45deg);
+      border-radius: 0 120px 0 0;
+      background-color: get-color(primary);
+
+      @media (max-width: $breakpoint-md) {
+        display: none;
+      }
+    }
   }
 
-  .text-pane {
+  &-text-pane {
     position: absolute;
     left: calc((100% - 927px) / 2);
     max-width: 468px;
     overflow: auto;
+    align-self: center;
 
     @media (max-width: $breakpoint-lg) {
+      left: $size-sm;
       margin: $size-md;
+      padding: $size-md $size-xs;
     }
-  }
-
-  h1 {
-    margin: 56px 0 0;
-    color: $white;
-  }
-
-  .text {
-    max-width: 448px;
-    margin-top: 10px;
-  }
-}
 
-@media (max-width: 927px) {
-  .wmcads-hub-header {
-    .left-pane {
-      width: 100%;
+    @media (max-width: $breakpoint-md) {
+      position: relative;
     }
 
-    .left-pane:after {
-      display: none;
+    .icon {
+      margin-bottom: 10px;
     }
 
     img {
-      display: none;
+      height: 34px;
+
+      @media (max-width: $breakpoint-sm) {
+        max-height: 34px;
+      }
+    }
+
+    h1 {
+      margin: 0;
+      color: $white;
     }
 
-    .text-pane {
-      left: 0;
-      max-width: 100%;
+    .text {
+      max-width: 400px;
+      margin-top: 10px;
     }
   }
 }

src/www/_partials/_head.njk

@@ -29,4 +29,5 @@
   <!-- Highlight JS - display HTML blocks as coloured text -->
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/styles/a11y-dark.min.css"/>
   <link rel="stylesheet" href="$*cdn/css/wmcads-website.min.css" />
+  <script src="https://kit.fontawesome.com/32be3e4082.js" crossorigin="anonymous"></script>
 </head>

src/www/pages/components/hub-header/index.njk

@@ -4,9 +4,35 @@
 {% from "www/_partials/component-example/component-example.njk" import compExample %}
 
 {% block content %}
+
+{# primary hub header #}
+<h2>Primary hub header</h2>
+
 {{
   compExample([
     wmcadsHubHeader()
-  ],{iframe:true})
+  ],{iframe:false})
+}}
+
+{# primary hub header with icon #}
+<h2>Primary hub header with Icon</h2>
+
+{{
+  compExample([
+    wmcadsHubHeader({
+      icon: true
+    })
+  ],{iframe:false})
+}}
+
+{# primary hub header with image #}
+<h2>Primary hub header with Image</h2>
+
+{{
+  compExample([
+    wmcadsHubHeader({
+      image: true
+    })
+  ],{iframe:false})
 }}
 {% endblock %}