feat: page contents (#116)

* 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

* new - page contents component

* add page contents to menu

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>

src/wmcads/components/_components.scss

@@ -17,6 +17,7 @@
 @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/hub-header/_hub-header.scss

@@ -35,7 +35,7 @@
 
   .text-pane {
     position: absolute;
-    left: calc((100% - 960px) / 2);
+    left: calc((100% - 927px) / 2);
     max-width: 468px;
     overflow: auto;
   }

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

@@ -0,0 +1,10 @@
+{% macro wmcadsPageContents(params) %}
+  <div class="wmcads-page-contents">
+      <h3>Page contents</h3>
+      <div>Page title</div>
+      <a>link 1</a>
+      <a>link 2</a>
+      <a>link 3</a>
+      <a>link 4</a>
+  </div>
+{% endmacro %}

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

@@ -0,0 +1,31 @@
+.wmcads-page-contents {
+  width: 288px;
+  min-height: 57px;
+  margin-bottom: 30px;
+  padding: 10px;
+  border-bottom: 3px solid $black;
+  background: $white;
+
+  h3 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    color: get-color(cta);
+    font-size: 23px;
+    font-weight: bold;
+    line-height: 24px;
+  }
+
+  div {
+    margin-bottom: 10px;
+    padding-left: 10px;
+    border-left: 3px solid get-color(primary);
+  }
+
+  a {
+    display: block;
+    margin-bottom: 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

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

@@ -77,6 +77,9 @@
 				{
 					"name": "Message"
 				},
+				{
+					"name": "Page contents"
+				},
 				{
 					"name": "Page header"
 				},

src/www/data.njk.json

@@ -77,6 +77,9 @@
           {
             "name": "Message"
           },
+          {
+            "name": "Page contents"
+          },
           {
             "name": "Page header"
           },

src/www/pages/components/page-contents/index.njk

@@ -0,0 +1,12 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Page contents" %}
+{% from "wmcads/components/page-contents/_page-contents.njk" import wmcadsPageContents %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+{{
+  compExample([
+    wmcadsPageContents()
+  ])  
+}}
+{% endblock %}