feat: campaign templates

src/wmcads/assets/sass/_mixins.scss

@@ -12,7 +12,7 @@
   // Heading 1 (46px)
   @if $level == 1 {
     margin-top: 1.5rem * $multiplier;
-    margin-bottom: 3rem * $multiplier;
+    margin-bottom: 2rem * $multiplier;
     font-size: 2.875rem * $multiplier;
     line-height: 3rem * $multiplier;
   }

src/wmcads/assets/sass/_utilities.scss

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

src/wmcads/components/page-contents/_page-contents.njk

@@ -1,7 +1,9 @@
 {% macro wmcadsPageContents(params) %}
-  <div class="wmcads-page-contents">
+{% set title = params.title if params.title else "Page title" %}
+
+  <div class="wmcads-page-contents {% if(params.rightMargin) %} wmcads-m-r-lg {% endif %}">
       <h3>Page contents</h3>
-      <div>Page title</div>
+      <div>{{title}}</div>
       <a>link 1</a>
       <a>link 2</a>
       <a>link 3</a>

src/wmcads/components/page-contents/_page-contents.scss

@@ -1,6 +1,4 @@
 .wmcads-page-contents {
-  width: 288px;
-  min-height: 57px;
   margin-bottom: 30px;
   padding: 10px;
   border-bottom: 3px solid $black;

src/wmcads/patterns/feedback-loop/_feedback-loop.scss

@@ -10,6 +10,12 @@
 
   // Override container defaults
   .wmcads-container {
+    position: absolute;
+    right: 0;
+    left: 0;
+    margin-top: -$size-lg;
+    margin-right: auto;
+    margin-left: auto;
     padding: $size-xs $size-md;
     overflow: hidden;
     color: $white;
@@ -33,6 +39,7 @@
       border-left: 1px solid get-color(cta);
       color: initial;
       background-color: $white;
+      text-align: center;
     }
 
     .wmcads-link {

src/www/_layouts/_template-master-layout.njk

@@ -30,8 +30,9 @@
     {# header #}
 
     {# main #}
-    <main class="wmcads-container--main">
+    <main class="wmcads-container--main {% if(params.tempCampaign) %} wmcads-m-r-lg {% endif %}">
       {% block body %}{% endblock %}
+      {{params}}
     </main>
     {# main #}
 

src/www/_layouts/layout-left-pane.njk

@@ -5,7 +5,7 @@
   <div class="wmcads-col-1 wmcads-col-lg-1-3 wmcads-p-b-lg">
     {% include "www/_partials/nav/subnav.njk" %}
   </div>
-  <div class="wmcads-col-1 wmcads-col-lg-2-3" id="wmcads-main-content">
+  <div class="wmcads-col-1 wmcads-col-lg-2-3 wmcads-m-b-xl" id="wmcads-main-content">
     <h1>{{ pageTitle }}</h1>
     <hr>
     {% block content %}{% endblock content %}

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

@@ -147,6 +147,12 @@
 				{
 					"name": "Homepage"
 				},
+				{
+					"name": "Campaign One Column"
+				},
+				{
+					"name": "Campaign Two Columns"
+				},
 				{
 					"name": "Content Template"
 				}

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

@@ -0,0 +1,25 @@
+.template-campaign-1-col {
+  .partner {
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+
+    @media screen and (max-width: $breakpoint-sm) {
+      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

@@ -0,0 +1,195 @@
+{% extends "www/_layouts/template-layout-fullwidth.njk" %} 
+{% set pageTitle="Campaign Template - One Column" %} {% set section = "Templates" %} 
+{# Imports #} 
+{%- from "wmcads/components/content-tiles/normal/_normal.njk" import wmcadsContentTilesNormal -%}
+{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %}
+{% from "wmcads/components/inset-text/_inset-text.njk" import wmcadsInsetText %} 
+{% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %}
+{% from "wmcads/components/content-card/_content-card.njk" import wmcadsContentCard %}
+{% from "wmcads/components/page-header/_page-header.njk" import wmcadsPageHeader %}
+{%- from "wmcads/components/button/_button.njk" import wmcadsButton as start -%}
+{# Set array of tiles #} 
+{% block content %} 
+
+<div class="template-campaign-1-col">
+
+<div class="wmcads-container wmcads-hide-desktop">
+    <h1 id="wmcads-main-content">Roll &amp; Stroll</h1>
+</div>
+
+{{
+ wmcadsPageHeader({
+      title: false,
+      large: true
+    })
+}}
+<div class="wmcads-container">
+  <div class="wmcads-grid">
+    <div class="wmcads-col-1 wmcads-col-md-3-4 wmcads-p-t-lg">
+      <h1 id="wmcads-main-content" class="wmcads-hide-mobile">Roll &amp; Stroll</h1>
+      <h2>Have your say on cycling &amp; walking changes in your local area.</h2>
+      <p>Lockdown has been quite a journey but cycling and walking is more popular than ever.</p>
+      <p>After marking this year the Big Summer of Cycling &amp; Walking, let’s not stop now. We're continuing to invest in creating a region that supports healthy, greener and safer travelling. We want to help you get started or keep going.</p>
+      <p>Whatever your travel plans - whether it's a cycle around your local streets or a winter walkie - we're here to help you start the adventure before you get there. There’s never been a better time to stay fit and healthy than right now - so, get your roll &amp; stroll on!</p>
+      {{
+        start({
+          classNames: "wmcads-btn--start",
+          text: "Have your say",
+          iconRight: "general-chevron-right"
+        })
+      }}
+
+      <hr class="wmcads-divider-wmgreen wmcads-m-t-lg" aria-hidden="true">
+      <h2>Cycling &amp; walking in your area</h2>
+      <div class="wmcads-grid wmcads-grid--justify-between">
+        <div class="wmcads-col-1 wmcads-col-sm-1-2 wmcads-p-r-sm wmcads-m-b-sm"">
+        {{
+          wmcadsContentCard({
+            clickable: true,
+            src: true,
+            isThirdCard: false,
+            title: 'Get Going Continue Rolling',
+            copy: 'Whether youre rolling to work or school, or catching some fresh air, theres always safe and new ways to get there.'
+          })
+        }}
+        </div>
+        <div class="wmcads-col-1 wmcads-col-sm-1-2 wmcads-p-l-sm wmcads-m-b-sm">
+        {{
+          wmcadsContentCard({
+            clickable: true,
+            src: true,
+            isThirdCard: false,
+            title: 'All things strolling',
+            copy: 'Wherever youre heading, theres always new and safe ways to get there on foot. '
+          })
+        }}
+        </div>
+        <div class="wmcads-col-1 wmcads-col-sm-1-2 wmcads-p-r-sm wmcads-m-b-sm">
+        {{
+          wmcadsContentCard({
+            clickable: true,
+            src: true,
+            isThirdCard: false,
+            title: 'Changes in your area',
+            copy: 'Understand what changes are being made in your area to help you travel safely'
+          })
+        }}
+        </div>
+        <div class="wmcads-col-1 wmcads-col-sm-1-2 wmcads-p-l-sm wmcads-m-b-sm">
+        {{
+          wmcadsContentCard({
+            clickable: true,
+            src: true,
+            isThirdCard: false,
+            title: 'Get active and travel safely',
+            copy: 'Enjoy being physically active and travelling outdoors responsibly and safely. '
+          })
+        }}
+        </div>
+      </div>
+
+      <hr class="wmcads-divider-wmgreen  wmcads-m-t-xl" aria-hidden="true">
+      <h2>Get the best from your bike</h2>
+      <div class="wmcads-accordion wmcads-m-b-sm">
+        <button aria-controls="accordion-01" class="wmcads-accordion__summary-wrapper" aria-expanded="false">
+          <!-- accordion summary -->
+          <div class="wmcads-accordion__summary">
+            <h4 class="wmcads-m-b-none">Love to Ride</h4>
+          </div>
+          <!-- plus icon -->
+          <svg class="wmcads-accordion__icon">
+            <use xlink:href="#wmcads-general-expand" href="#wmcads-general-expand"></use>
+          </svg>
+          <!-- minus icon -->
+          <svg class="wmcads-accordion__icon wmcads-accordion__icon--minimise">
+              <use xlink:href="#wmcads-general-minimise" href="#wmcads-general-minimise"></use>
+          </svg>
+        </button>
+
+        <!-- accordion content -->
+        <div class="wmcads-accordion__content" id="accordion-01">
+          <p>
+            <strong>Some random subtitle</strong>
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt consectetur, eius repellat dolor vel corporis eos fugiat. Ut totam, incidunt sequi iusto nesciunt illum natus, dolores velit cumque, excepturi labore!
+          </p>
+        </div>
+      </div>
+
+      <div class="wmcads-accordion wmcads-m-b-sm">
+          <button aria-controls="accordion-01" class="wmcads-accordion__summary-wrapper" aria-expanded="false">
+            <!-- accordion summary -->
+            <div class="wmcads-accordion__summary">
+              <h4 class="wmcads-m-b-none">Love your bike</h4>
+            </div>
+            <!-- plus icon -->
+            <svg class="wmcads-accordion__icon">
+              <use xlink:href="#wmcads-general-expand" href="#wmcads-general-expand"></use>
+            </svg>
+            <!-- minus icon -->
+            <svg class="wmcads-accordion__icon wmcads-accordion__icon--minimise">
+              <use xlink:href="#wmcads-general-minimise" href="#wmcads-general-minimise"></use>
+            </svg>
+          </button>
+
+          <!-- accordion content -->
+          <div class="wmcads-accordion__content" id="accordion-01">
+            <p>
+              <strong>Some random subtitle</strong>
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt consectetur, eius repellat dolor vel corporis eos fugiat. Ut totam, incidunt sequi iusto nesciunt illum natus, dolores velit cumque, excepturi labore!
+            </p>
+          </div>
+        </div>
+
+        <hr class="wmcads-divider-wmgreen wmcads-m-t-xl" aria-hidden="true">
+
+        <h2>Additional Information</h2>
+        <div class="wmcads-grid wmcads-grid--justify-between">
+          <div class="wmcads-col-1 wmcads-col-sm-1-2 wmcads-p-r-sm wmcads-m-b-sm"">
+          {{
+            wmcadsContentCard({
+              clickable: true,
+              src: true,
+              isThirdCard: false,
+              title: 'Support for businesses',
+              copy: 'We have a wide range of options to support your business and employees at work and at home'
+            })
+          }}
+          </div>
+          <div class="wmcads-col-1 wmcads-col-sm-1-2 wmcads-p-l-sm wmcads-m-b-sm">
+          {{
+            wmcadsContentCard({
+              clickable: true,
+              src: true,
+              isThirdCard: false,
+              title: 'Be Aware and Share',
+              copy: 'If you drive in the West Midlands be prepared to share the road space with more Rollers and Strollers.'
+            })
+          }}
+          </div>
+        </div>
+
+        <hr class="wmcads-divider-wmgreen wmcads-m-t-xl" aria-hidden="true">
+
+        <h3>Campaign Funding Partners</h3>
+
+        <div class="wmcads-grid wmcads-grid--spacing-2-md">
+          <div class="wmcads-col-2-3 wmcads-col-sm-1-2 wmcads-m-b-md partner">
+            <a href="/">
+              <img src="/img/examples/active-travel-fund.png" alt="Active Travel fund">
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+</div>
+
+<div class="wmcads-grid wmcads-grid--justify-center">
+    <img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=1280&height=400&rnd=132122595620000000" alt="campaign bottom image" />
+</div>
+
+</div>
+{% endblock %}

src/www/pages/templates/campaign-two-columns/campaign-template.scss

@@ -0,0 +1,27 @@
+.template-campaign-2-col {
+  .wmcads-page-contents {
+    @media screen and (max-width: $breakpoint-md) {
+      margin: 0 !important;
+    }
+  }
+
+  h1 {
+    @media screen and (max-width: $breakpoint-md) {
+      margin-top: $size-md !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;
+      }
+    }
+  }
+}