feat: hub header (#115)

* initial setup for templates * update: basic hero banner * new: teamplate area * remove main top margin * update colour and ensure headings are correct * new layouts from templates * updates to header component * hide breadcrumb on homepage template * new: event content card * fix link heading size * fix padding issue in grid spacing * add a display to links * content card updates * homepage template updates * Restyled by prettier (#105) Co-authored-by: Restyled.io <commits@restyled.io> * replace user research with templates * add padding to card img * content card updates * new: hub header Co-authored-by: Nathan Rogan <nathanroagn@centro.org.uk> Co-authored-by: restyled-io[bot] <32688539+restyled-io[bot]@users.noreply.github.com> Co-authored-by: Restyled.io <commits@restyled.io>
wmcadigital · Mar 10, 2021 · 09298b1 · 09298b1
1 parent 9f8d06e
commit 09298b1
Show file tree

Hide file tree

Showing 28 changed files with 839 additions and 72 deletions.
diff --git a/gulp-tasks/paths.js b/gulp-tasks/paths.js
@@ -7,7 +7,11 @@ module.exports = {
   },
   styles: {
     src: ['src/**/*.scss'], // src of styles to watch
-    minifySrc: ['src/wmcads/assets/sass/wmcads.scss', 'src/www/wmcads-website.scss'], // List of scss file(s) which should be processed, linted & minified
+    minifySrc: [
+      'src/wmcads/assets/sass/wmcads.scss',
+      'src/www/wmcads-website.scss',
+      'src/www/pages/templates/templates.scss'
+    ], // List of scss file(s) which should be processed, linted & minified
     output: 'build/css/', // output location of minified styles
     reactNativeSrc: 'src/wmcads/assets/sass/wmcads.scss'
   },

diff --git a/src/wmcads/assets/sass/_typography.scss b/src/wmcads/assets/sass/_typography.scss
@@ -59,7 +59,8 @@ h2,
 }
 
 h3,
-.h3 {
+.h3,
+h3 a {
   @include type-setting(3);
 }
 

diff --git a/src/wmcads/assets/sass/_utilities.scss b/src/wmcads/assets/sass/_utilities.scss
@@ -42,7 +42,6 @@
   }
 
   &--main {
-    margin-top: $size-md;
     margin-bottom: $size-lg;
     flex-grow: 1;
   }

diff --git a/src/wmcads/assets/sass/wmcads-grid/_grid-spacing.scss b/src/wmcads/assets/sass/wmcads-grid/_grid-spacing.scss
@@ -57,7 +57,7 @@
       @if $breakpoint-name == "" or $breakpoint-value == "" {
         &.wmcads-col-1,
         &.wmcads-col-1-1 {
-          padding-right: 0;
+          // padding-right: 0;
           padding-left: 0;
         }
       } @else {

diff --git a/src/wmcads/components/_components.scss b/src/wmcads/components/_components.scss
@@ -9,6 +9,7 @@
 @import "document/document"; // document
 @import "file-download/file-download"; // File download
 @import "form-elements/form-elements"; // Form elements
+@import "hub-header/hub-header"; // Hub header
 @import "inset-text/inset-text"; // Inset text
 @import "in-text-step/in-text-step"; // In-text step
 @import "link/link"; // Link elements

diff --git a/src/wmcads/components/breadcrumb/_breadcrumb.njk b/src/wmcads/components/breadcrumb/_breadcrumb.njk
@@ -12,6 +12,7 @@ And we show the current page breadcrumb at all times.
 {% set class = ' ' + params.classModifiers if params.classModifiers %}
 {% set ariaLabel = params.exampleAria + " example breadcrumbs" if params.exampleAria else "Breadcrumbs" %}
 
+{% if params.pageTitle != "Homepage Template" -%}
 <nav aria-label="{{ariaLabel}}" class="wmcads-breadcrumb{{class}}">
   <ol class="wmcads-breadcrumb__list">
     {#- Link back to homepage #}
@@ -36,5 +37,6 @@ And we show the current page breadcrumb at all times.
     </li>
   </ol>
 </nav>
+{%- endif %}
 
 {% endmacro %}
diff --git a/src/wmcads/components/content-card/_content-card.njk b/src/wmcads/components/content-card/_content-card.njk
@@ -4,19 +4,18 @@
 {# Opening & closing tags #}
 {% set tag = "a" if params.clickable else "div" %}
 {% set attributes = " href=\"#\" target=\"_self\"" if params.clickable else "" %}
-{# HTML content #}
-{% set html = params.html if params.html else "
-    <div class=\"wmcads-p-sm\">
-    <h2>Lorem ipsum dolor sit amet</h2>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-    </div>
-" %}
+{% set title = params.title if params.title else "Lorem ipsum dolor sit amet" %} {# set title text #}
+{% set eventTitle = params.eventTitle if params.eventTitle else "Event" %} {# set eventTitle text #}
+{% set copy = 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 #}
+{% set eventCopy = params.eventCopy if params.eventCopy else "A short sentence explaining what this is, it can be 2 lines." %} {# set copy text #}
+
 
 {# This macro checks if it's being called inside a {% call %} tag #}
 {# It's an easier way to pass in larger html content  #}
-<{{tag}}{{attributes | safe}} class="wmcads-content-card{{"--blue" if params.isCta else "" }}">
+<{{tag}}{{attributes | safe}} class="wmcads-content-card{{"--blue" if params.isCta else "" }} {{"wmcads-content-card--event" if params.isEvent else "" }} {{"wmcads-content-card--news" if params.isNews else "" }} ">
     {% if(params.src) %}
-        <img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=1180&height=300&rnd=132122595620000000" alt="content image">
+        <img 
+        src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg{{"?anchor=center&mode=crop&width=920&height=300&rnd=132122595620000000" if params.isNewsFirst else "" }}{{"?anchor=center&mode=crop&width=480&height=357&rnd=132122595620000000" if params.isNewsSub else "" }}{{"?anchor=center&mode=crop&width=896&height=334&rnd=132122595620000000" if params.isSrcDefault else "" }}{{"?anchor=center&mode=crop&width=1216&height=345&rnd=132122595620000000" if params.isDoubleCard else "" }}{{"?anchor=center&mode=crop&width=576&height=334&rnd=132122595620000000" if params.isThirdCard else "" }}" alt="content image">
     {% endif %}
     {% if(params.isCta) %}
         <div class="wmcads-p-sm">
@@ -25,12 +24,29 @@
             </svg>
             <h2>Lorem ipsum dolor sit amet</h2>
         </div>
+    {% else %}
+    {% if(params.isEvent) %}
+        <div class="wmcads-p-sm">
+            <h3>{{eventTitle}}</h3>
+            <p>24 January 2021<p>
+            <p>{{eventCopy}}</p>
+        </div>
+    {% else %}
+    {% if(params.isNews) %}
+        <p>24 January 2021<p>
+        <h3><a href="#">{{title}}</a></h3>
+        <p>{{copy}}</p>
     {% else %}
         {%- if caller -%}
             {{ caller() }}
             {%- else -%}
-            {{ html | safe }}
-        {%- endif -%}
+            <div class="wmcads-p-sm">
+                <h3>{{title}}</h3>
+                <p>{{copy}}</p>
+            </div>
+    {%- endif -%}
+    {%- endif -%}
+    {%- endif -%}
     {% endif %}
 </{{tag}}>
 {% endmacro %}
diff --git a/src/wmcads/components/content-card/_content-card.scss b/src/wmcads/components/content-card/_content-card.scss
@@ -12,12 +12,15 @@
 
 .wmcads-content-card {
   display: block;
-  min-height: 150px;
+  height: 100%;
   border-bottom: 5px solid get-color(primary);
   color: get-color(text);
-  background-color: $white;
   text-decoration: none;
 
+  @media screen and (max-width: $breakpoint-sm) {
+    margin: 0 0 $size-lg 0;
+  }
+
   @at-root a#{&} {
     display: block;
     color: get-color(text);
@@ -43,4 +46,32 @@
     }
   }
 
+  &--event {
+    h2,
+    h3 {
+      margin: 0 0 $size-sm 0;
+    }
+  }
+
+  &--news {
+    border: 0;
+
+    p {
+      margin: 0;
+    }
+
+    h3 {
+      a {
+        margin: $size-sm 0;
+      }
+    }
+  }
+
+  h3 {
+    margin: $size-sm 0;
+  }
+
+  img {
+    padding: 1px;
+  }
 }
diff --git a/src/wmcads/components/hub-header/_hub-header.njk b/src/wmcads/components/hub-header/_hub-header.njk
@@ -0,0 +1,10 @@
+{% macro wmcadsHubHeader(params) %}
+  <div class="wmcads-hub-header">
+      <div class="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>        
+  </div>
+{% endmacro %}
diff --git a/src/wmcads/components/hub-header/_hub-header.scss b/src/wmcads/components/hub-header/_hub-header.scss
@@ -0,0 +1,73 @@
+.wmcads-hub-header {
+  display: flex;
+  position: relative;
+  height: 230px;
+  color: $white;
+  background: get-color(primary);
+
+  .left-pane {
+    display: inline-block;
+    position: relative;
+    width: 50%;
+    height: 100%;
+  }
+
+  .left-pane: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);
+  }
+
+  img {
+    display: inline-block;
+    width: 50%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .text-pane {
+    position: absolute;
+    left: calc((100% - 960px) / 2);
+    max-width: 468px;
+    overflow: auto;
+  }
+
+  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%;
+    }
+
+    .left-pane:after {
+      display: none;
+    }
+
+    img {
+      display: none;
+    }
+
+    .text-pane {
+      left: 0;
+      max-width: 100%;
+    }
+  }
+}
diff --git a/src/wmcads/components/link/link/_link.scss b/src/wmcads/components/link/link/_link.scss
@@ -4,7 +4,8 @@
 .wmcads-link {
   @at-root a:not([class*="wmcads-"]),
   & {
-    color: get-color(cta, 10, dark);
+    display: inline-block;
+    color: get-color(cta);
     font-weight: bold;
     text-decoration: underline;
     cursor: pointer;
@@ -18,6 +19,12 @@
     }
   }
 
+  h1,
+  h2,
+  h3 {
+    color: get-color(cta, 10, dark);
+  }
+
   &--with-chevron {
     display: inline-flex;
 
@@ -42,3 +49,11 @@
     }
   }
 }
+
+a {
+  h1,
+  h2,
+  h3 {
+    color: get-color(cta);
+  }
+}
diff --git a/src/wmcads/components/page-header/_page-header.njk b/src/wmcads/components/page-header/_page-header.njk
@@ -3,17 +3,20 @@
 {% set text = params.text if params.text else "Page header" %}
 {% set iconName = params.icon if params.icon else "" %}
 
-<div class="wmcads-page-header">
-  <img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=2500&height=800&rnd=132122595620000000" alt="header image"/>
-  <div class="wmcads-page-header-box">
-      {% if iconName !== "" %}
+<div class="wmcads-page-header {% if(params.home) %} wmcads-page-header__home {% endif %} {% if(params.topm) %} wmcads-m-t-md {% endif %}" style="background-image:url('https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=2500&height=800&rnd=132122595620000000')">
+  {% if(params.title) %}
+  <div class="wmcads-container wmcads-page-header-container">
+        <div class="wmcads-page-header-box">
+              {% if iconName !== "" %}
         {{ wmcadsIcon({
             icon: iconName,
             class: 'wmcads-page-header__icon'
           }) | trim
         }}
       {% endif %}
-    <h1>{{text}}</h1>
+         <h1>{{text}}</h1>
+    </div>
   </div>
+  {% endif %}
 </div>
 {% endmacro %}
-Original file line number
+Diff line change
@@ Expand Up / @@ -59,7 +59,8 @@ h2, @@
     }
     h3,
-    .h3 {
+    .h3,
+    h3 a {
       @include type-setting(3);
     }
@@ Expand Down @@