feat: component and template updates

.sass-lint.yml

@@ -135,7 +135,7 @@ rules:
   # https://github.com/sasstools/sass-lint/blob/master/docs/rules/nesting-depth.md
   nesting-depth:
     - 2
-    - max-depth: 3
+    - max-depth: 4
 
   # TODO: no-attribute-selectors
   # Rule no-attribute-selectors will warn against the use of attribute selectors.

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'
   },

package.json

@@ -59,24 +59,24 @@
     "build:netlify": "npm run build:all --build=netlify"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@babel/preset-env": "^7.12.7",
-    "@babel/standalone": "^7.12.9",
+    "@babel/core": "^7.13.10",
+    "@babel/preset-env": "^7.13.10",
+    "@babel/standalone": "^7.13.11",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/git": "^9.0.0",
-    "@zeplin/cli": "^1.0.4",
-    "autoprefixer": "^10.0.4",
+    "@zeplin/cli": "^1.1.6",
+    "autoprefixer": "^10.2.5",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
-    "browser-sync": "^2.26.13",
+    "browser-sync": "^2.26.14",
     "del": "^6.0.0",
-    "dompurify": "^2.2.2",
-    "eslint": "^7.14.0",
+    "dompurify": "^2.2.7",
+    "eslint": "^7.22.0",
     "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-html": "^6.1.1",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-html": "^6.1.2",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-prettier": "^3.2.0",
+    "eslint-plugin-prettier": "^3.3.1",
     "glob": "^7.1.6",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^7.0.1",
@@ -88,7 +88,7 @@
     "gulp-eslint": "^6.0.0",
     "gulp-flatten": "^0.4.0",
     "gulp-format-html": "^1.2.5",
-    "gulp-htmlhint": "^3.0.1",
+    "gulp-htmlhint": "^4.0.0",
     "gulp-htmlmin": "^5.0.1",
     "gulp-imagemin": "^7.1.0",
     "gulp-load-plugins": "^2.0.6",
@@ -104,18 +104,18 @@
     "gulp-svgmin": "^3.0.0",
     "gulp-svgstore": "^7.0.1",
     "gulp-uglify-es": "^2.0.0",
-    "marked": "^1.2.5",
+    "marked": "^2.0.1",
     "node-sass": "^5.0.0",
-    "npm-check-updates": "^10.2.2",
-    "nunjucks": "^3.2.2",
+    "npm-check-updates": "^11.3.0",
+    "nunjucks": "^3.2.3",
     "nunjucks-markdown": "^2.0.1",
     "prettier": "^2.2.1",
-    "sass": "^1.29.0",
-    "semantic-release": "^17.3.0",
-    "webpack-stream": "^6.1.1"
+    "sass": "^1.32.8",
+    "semantic-release": "^17.4.2",
+    "webpack-stream": "^6.1.2"
   },
   "dependencies": {
-    "iframe-resizer": "^4.2.11",
+    "iframe-resizer": "^4.3.1",
     "path": "^0.12.7"
   }
 }

src/wmcads/assets/sass/_typography.scss

@@ -59,7 +59,8 @@ h2,
 }
 
 h3,
-.h3 {
+.h3,
+h3 a {
   @include type-setting(3);
 }
 

src/wmcads/assets/sass/_utilities.scss

@@ -42,7 +42,6 @@
   }
 
   &--main {
-    margin-top: $size-md;
     margin-bottom: $size-lg;
     flex-grow: 1;
   }

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 {

src/wmcads/assets/sass/wmcads-grid/_wmcads-grid.scss

@@ -14,7 +14,6 @@ textarea,
 .wmcads-grid {
   display: flex;
   width: 100%;
-  letter-spacing: -0.31em;
   text-rendering: optimizespeed;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;

src/wmcads/components/_components.scss

@@ -9,13 +9,16 @@
 @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
+@import "lists/bare-list/bare-list"; // Bare list elements
 @import "lists/ordered-list/ordered-list"; // Ordered list elements
 @import "lists/unordered-list/unordered-list"; // Unordered list elements
 @import "loader/loader"; // Loader
 @import "message/message"; // Messages
+@import "page-contents/page-contents"; // Page contents
 @import "page-header/page-header"; // Page header
 @import "phase-indicator/phase-indicator"; // Phase indicator
 @import "portfolio-dashboard/portfolio-dashboard"; // Portfolio dashboard

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 %}

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 %}

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

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 %}

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% - 927px) / 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%;
+    }
+  }
+}

src/wmcads/components/link/link/_link.njk

@@ -3,6 +3,8 @@
 {% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
 {# Set vars #}
 {% set text = params.text if params.text else "link text" %} {# set link text #}
+{% set copy = params.copy if params.copy else "<p>Reveal some hidden content</p>" %} {# set link copy #}
+{% set copyName = params.copyName if params.copyName else "example" %} {# set link copy id #}
 {% set link = params.link if params.link else "#" %} {# set link url #}
 {% set linkTitle = params.linkTitle if params.linkTitle else "link title" %} {# set link title #}
 {% set linkTarget = params.linkTarget if params.linkTarget else "_self" %} {# set link target #}
@@ -12,11 +14,20 @@
 {% set class = ' ' + params.classModifiers if params.classModifiers %}
 {% set class = class + " wmcads-link--with-chevron" if params.withChevronLeft or params.withChevronRight else class %}
 
-<a href="{{ link }}" title="{{ linkTitle }}" target="{{ linkTarget }}" class="wmcads-link{{class}}" {% if linkRel %}rel="{{linkRel}}"{% endif %}>
+{% if params.withReadMore -%}
+<div class="collapse {{params.copyName}}">
+  {{copy | safe}}
+</div>
+{%- endif %}
+
+<a href="{{ link }}" title="{{ linkTitle }}" target="{{ linkTarget }}" class="wmcads-link{{class}} {% if params.withReadMore %}hvr-icon-hang{% endif %}" {% if linkRel %}rel="{{linkRel}}"{% endif %} {% if params.withReadMore %}data-toggle="collapse" data-target=".collapse.{{params.copyName}}" data-text="collapse" aria-expanded="false" data-html-text="View more" {% endif %}>
   {% if params.withChevronLeft -%}
   {{ wmcadsIcon({ icon: "general-chevron-right", class: "wmcads-link__chevron wmcads-link__chevron--left" }) | indent(4) | trim }}
   {%- endif %}
-  {{- prefix -}}{{- text -}}
+  {% if params.withReadMore -%}
+  {{ wmcadsIcon({ icon: "general-chevron-right", class: "wmcads-link__chevron wmcads-link__chevron--down hvr-icon" }) | indent(4) | trim }}
+  {%- endif %}
+  {{- prefix -}}{% if not params.withReadMore %}{{- text -}}{% endif %}
   {% if params.withChevronRight -%}
   {{ wmcadsIcon({ icon: "general-chevron-right", class: "wmcads-link__chevron wmcads-link__chevron--right" }) | indent(4) | trim }}
   {%- endif %}