feat: content template sidebar (#180)

* make img height auto on mobile

* fix card spacing

* rename one col content template

* styling updates

* misc styling updates

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

src/wmcads/assets/sass/_typography.scss

@@ -9,10 +9,7 @@ body {
 
 // Get rid of margin for the first header item in main content
 * {
-  h1:first-child,
-  h2:first-child,
-  h3:first-child,
-  h4:first-child {
+  h1:first-child {
     margin-top: 0;
   }
 }

src/wmcads/assets/sass/_utilities.scss

@@ -81,7 +81,7 @@
 }
 
 // MARGINS AND PADDINGS
-// Helper mixin used to generate various sizes of margin/padding
+// Helper mixin used to generate various sizes of margin/padding -  wmcads-m-b-sm - wmcads-grid--spacing-lg-4-lg
 @mixin x-mar-pad($side, $type: "margin") {
   &-xs {
     #{$type}#{$side}: $size-xs;
@@ -93,6 +93,10 @@
 
   &-sm {
     #{$type}#{$side}: $size-sm;
+
+    &-sm-none {
+      #{$type}#{$side}: $breakpoint-xs;
+    }
   }
 
   &-md {
@@ -161,13 +165,13 @@ body {
 // Show/hide on desktop devices only
 .wmcads-hide-mobile {
   @media screen and (max-width: $breakpoint-md) {
-    display: none;
+    display: none !important;
   }
 }
 
 .wmcads-hide-desktop {
   @media screen and (min-width: $breakpoint-md) {
-    display: none;
+    display: none !important;
   }
 }
 
@@ -229,3 +233,21 @@ body {
     background-color: transparent;
   }
 }
+
+//Hide visually apart from screen readers
+.visible-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap;
+
+  &:focus {
+    position: absolute;
+    width: auto;
+    height: auto;
+    overflow: auto;
+    clip: auto;
+  }
+}

src/wmcads/assets/sass/split/typography.scss

@@ -5,9 +5,7 @@
 // Mixins
 @import "../mixins";
 
-
 // Typography Styles
-#umb-grid {
+.umb-grid {
   @import "../typography";
 }
-

src/wmcads/components/accordion/_accordion.scss

@@ -27,6 +27,10 @@
     width: calc(100% - 32px);
     padding-right: $size-md;
     vertical-align: middle;
+
+    h4 {
+      margin-top: 0;
+    }
   }
 
   &__icon {

src/wmcads/components/breadcrumb/_breadcrumb.njk

@@ -18,7 +18,7 @@ And we show the current page breadcrumb at all times.
     {#- Link back to homepage #}
     <li class="wmcads-breadcrumb__list-item">
       <a href="/" class="wmcads-breadcrumb__link">
-        Home
+        <i class="fal fa-home-alt" aria-hidden="true"></i>
       </a>
     </li>
     {#- If pageTitle != same as section, then we can show section breadcrumb #}

src/wmcads/components/content-card/_content-card.njk

@@ -12,10 +12,10 @@
 
 {# 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 "" }} {{"wmcads-content-card--event" if params.isEvent else "" }} {{"wmcads-content-card--news" if params.isNews 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 "" }} {{"wmcads-css-grid-block--double" if params.isDoubleCard else "" }} ">
     {% if(params.src) %}
         <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 "" }}{{"?anchor=center&mode=crop&width=700&height=334&rnd=132122595620000000" if params.isDefault else "" }}" alt="content image">
+        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=1316&height=345&rnd=132122595620000000" if params.isDoubleCard else "" }}{{"?anchor=center&mode=crop&width=600&height=334&rnd=132122595620000000" if params.isThirdCard else "" }}{{"?anchor=center&mode=crop&width=700&height=334&rnd=132122595620000000" if params.isDefault else "" }}" alt="content image">
     {% endif %}
     {% if(params.isCta) %}
         <div class="wmcads-p-sm">

src/wmcads/components/content-card/_content-card.scss

@@ -1,6 +1,7 @@
 //accessibility styles
 @mixin accessibility-hover {
-  h2 {
+  h2,
+  h3 {
     text-decoration: underline;
   }
 
@@ -75,5 +76,13 @@
     height: 180px;
     padding: 1px;
     object-fit: cover;
+
+    @media screen and (max-width: $breakpoint-md) {
+      height: auto;
+    }
+  }
+
+  h3 {
+    margin-top: 0;
   }
 }

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

@@ -38,6 +38,10 @@
     left: calc((100% - 927px) / 2);
     max-width: 468px;
     overflow: auto;
+
+    @media (max-width: $breakpoint-lg) {
+      margin: $size-md;
+    }
   }
 
   h1 {

src/wmcads/patterns/header/_header.scss

@@ -75,7 +75,7 @@ $header-height-mobile: 4rem;
   // Logo styles
   &__logo-link {
     display: inline-block;
-    width: 34px;
+    width: 37px;
     height: 34px;
     margin-right: $size-sm;
     overflow: hidden;
@@ -217,6 +217,10 @@ $header-height-mobile: 4rem;
       background: transparent;
     }
   }
+
+  button {
+    font: caption;
+  }
 }
 
 // mobile only mega menu styles

src/www/_partials/_template_head.njk

@@ -30,4 +30,6 @@
   <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" />
   <link rel="stylesheet" href="$*cdn/css/templates.min.css" />
+
+  <script src="https://kit.fontawesome.com/32be3e4082.js" crossorigin="anonymous"></script>
 </head>

src/www/assets/json/merged.njk.json

@@ -154,7 +154,10 @@
 					"name": "Campaign Two Columns"
 				},
 				{
-					"name": "Content Template"
+					"name": "Content One Column"
+				},
+				{
+					"name": "Content Two Columns"
 				}
 			]
 		}

src/www/pages/patterns/header-and-footer/index.njk

@@ -52,16 +52,16 @@
 
 {{
   compExample([
-    wmcadsHeader({
-      navItems: navItems,
-      banner: true,
-      breadcrumbs: {
-        section: section,
-        pageTitle: pageTitle
-      },
-      exampleAria: "Full header",
-      id: "full"
-    })
+    wmcadsHeader ({
+        id: "mega-menu",
+        navItems: navItems,
+        banner: true,
+        linkTopLevel: true,
+        breadcrumbs: {
+          section: section,
+          pageTitle: pageTitle
+        }
+      })
   ])
 }}
 

src/www/pages/templates/_general.scss

@@ -0,0 +1,55 @@
+.wmcads-html {
+  .wmcads-grid--justify-between {
+    .wmcads-p-r-sm {
+      @media screen and (max-width: $breakpoint-sm) {
+        padding: 0 !important;
+      }
+    }
+
+    .wmcads-p-l-sm {
+      @media screen and (max-width: $breakpoint-sm) {
+        padding: 0 !important;
+      }
+    }
+  }
+
+  .wmcads-page-contents {
+    @media screen and (max-width: $breakpoint-md) {
+      margin: 0 !important;
+    }
+  }
+}
+
+// Creates a css-grid layout for content cards
+.wmcads-css-grid {
+  display: inline;
+
+  &-3-col {
+    @media screen and (min-width: $breakpoint-sm) {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-gap: $size-lg;
+      grid-auto-flow: row dense;
+    }
+
+    @media (min-width: $breakpoint-md) {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+  }
+
+  &-2-col {
+    @media screen and (min-width: $breakpoint-sm) {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-gap: $size-lg;
+      grid-auto-flow: row dense;
+    }
+  }
+
+  &-block {
+    &--double {
+      grid-column: auto / span 2;
+    }
+  }
+
+}

src/www/pages/templates/campaign-one-column/campaign-template.scss

@@ -1,4 +1,4 @@
-.template-campaign-1-col {
+.template-campaign {
   .partner {
     display: flex !important;
     align-items: center;
@@ -8,18 +8,4 @@
       padding: 0 !important;
     }
   }
-
-  .wmcads-grid--justify-between {
-    .wmcads-p-r-sm {
-      @media screen and (max-width: $breakpoint-sm) {
-        padding: 0 !important;
-      }
-    }
-
-    .wmcads-p-l-sm {
-      @media screen and (max-width: $breakpoint-sm) {
-        padding: 0 !important;
-      }
-    }
-  }
 }

src/www/pages/templates/campaign-one-column/index.njk

@@ -11,7 +11,7 @@
 {# Set array of tiles #} 
 {% block content %} 
 
-<div class="template-campaign-1-col">
+<div class="template-campaign">
 
 <div class="wmcads-container wmcads-hide-desktop">
     <h1 id="wmcads-main-content">Roll &amp; Stroll</h1>
@@ -188,6 +188,11 @@
               <img src="/img/examples/active-travel-fund.png" alt="Active Travel fund">
             </a>
           </div>
+          <div class="wmcads-col-2-3 wmcads-col-sm-1-2 wmcads-m-b-md partner">
+            <a href="/">
+              <img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg" alt="Active Travel fund">
+            </a>
+          </div>
         </div>
       </div>
     </div>