From 9d9edb7008650a76329c23c1cb4d283da6fa99e6 Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Fri, 19 Feb 2021 09:20:37 +0000 Subject: [PATCH 01/21] initial setup for templates --- .../_layouts/template-layout-fullwidth.njk | 10 +++ .../content-template/content-template.scss | 0 .../templates/content-template/index.njk | 86 +++++++++++++++++++ src/www/pages/templates/index.njk | 14 +++ 4 files changed, 110 insertions(+) create mode 100755 src/www/_layouts/template-layout-fullwidth.njk create mode 100644 src/www/pages/templates/content-template/content-template.scss create mode 100644 src/www/pages/templates/content-template/index.njk create mode 100644 src/www/pages/templates/index.njk diff --git a/src/www/_layouts/template-layout-fullwidth.njk b/src/www/_layouts/template-layout-fullwidth.njk new file mode 100755 index 00000000..9badaab2 --- /dev/null +++ b/src/www/_layouts/template-layout-fullwidth.njk @@ -0,0 +1,10 @@ +{% extends "www/_layouts/_master-layout.njk" %} + +{% block body %} +

{{ pageTitle | safe}}

+
+
+ {% block content %}{% endblock content %} +
+
+{% endblock body%} \ No newline at end of file diff --git a/src/www/pages/templates/content-template/content-template.scss b/src/www/pages/templates/content-template/content-template.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/www/pages/templates/content-template/index.njk b/src/www/pages/templates/content-template/index.njk new file mode 100644 index 00000000..e7c92c8a --- /dev/null +++ b/src/www/pages/templates/content-template/index.njk @@ -0,0 +1,86 @@ +{% extends "www/_layouts/template-layout-fullwidth.njk" %} +{% set pageTitle="Content Page Template" %} {% 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 %} +{# Set array of tiles #} +{% block content %} + +{# About the style guide #} +
+
+

From 2018, we’re responsible for the region's Adult Education Budget (AEB).

+

We target priority growth sectors from the Local Industrial Strategy. This improves skills and secure jobs in communities. It also helps to improve productivity in the region.

+

What the budget is

+

The budget helps residents and employers get the skills needed in the region. This helps people to get the jobs they need and increases the skills of current employees. It unlocks specialist training as well.

+

It also allows for more flexible and tailored learning programmes in the region. This helps people to take part in learning, build confidence and their wellbeing. It unlocks opportunities for more people.

+

Our challenges

+

We set out the challenges for the labour market in our Regional Skills Plan:

+

High levels of unemployment in some parts of the region + Poverty is growing for people who are working because of low wages + Low skill levels with less people qualified to skill level 4, or no qualifications at all + Employers struggle to find people with the skills they need

+

We use the budget to help improve confidence and opportunities for residents. It helps business find staff with the skills they need too.

+

Priorities for the budget

+

We will fund adult education through a range of delivery partners. Through commissioning, the budget will focus on:

+

Innovation

+

Looking at new ways of delivering learning. These will align with our priorities in the construction and digital sectors.

+

Talent & Progression

+

We'll develop new job schemes, and help build the skills of people in employment.

+

Collaboration

+

Working with our provider partners, we'll create an agile skills system. It will align to the needs of businesses and residents.

+

Sustainability

+

We're developing agreements with providers. These will check delivery against our key priorities. It will also track the impact of this approach.

+
+
+
+
+ + content image +
+

Who we've funded

+

See which councils and providers we've funded, and what for.

+
+ +
+
+ + content image +
+

Find training schemes

+

You can find training and education providers we've funded online.

+
+ +
+
+ + content image +
+

Contact us

+

Get in touch if you want to know more about the budget.

+
+ +
+
+ + content image +
+

Pharetra Sollicitudin

+

Donec sed odio dui. Nullam quis risus eget urna mollis ornareleo.

+
+ +
+
+ + content image +
+

Pharetra Sollicitudin Bibendum

+

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.

+
+ +
+
+
+{% endblock %} diff --git a/src/www/pages/templates/index.njk b/src/www/pages/templates/index.njk new file mode 100644 index 00000000..e3b56ea0 --- /dev/null +++ b/src/www/pages/templates/index.njk @@ -0,0 +1,14 @@ +{% extends "www/_layouts/layout-left-pane.njk" %} +{% set pageTitle = "Templates" %} +{% set section = "Templates" %} + +{% block content %} +

Make your service look and feel like WMCA Design System.

+

If you are using the WMCA Design System Prototype Kit or have WMCA Design System Frontend included in your build, the + coded examples in the + Design System will not need any additional styling.

+

If you need to apply styles manually, you should still follow existing WMCA Design System conventions. For + example, do not assign + new meanings to colours, do not change the style of buttons or adjust the thickness of borders on + form inputs.

+{% endblock %} \ No newline at end of file From 80c4bab11f116594d2c6c8c581a59623937b0b8e Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Thu, 25 Feb 2021 11:41:12 +0000 Subject: [PATCH 02/21] update: basic hero banner --- .../components/page-header/_page-header.njk | 2 ++ .../components/page-header/_page-header.scss | 5 ++-- .../pages/components/page-header/index.njk | 23 +++++++++++++++++-- 3 files changed, 25 insertions(+), 5 deletions(-) diff --git a/src/wmcads/components/page-header/_page-header.njk b/src/wmcads/components/page-header/_page-header.njk index de48a21a..a712a874 100644 --- a/src/wmcads/components/page-header/_page-header.njk +++ b/src/wmcads/components/page-header/_page-header.njk @@ -5,6 +5,7 @@
header image + {% if(params.title) %}
{% if iconName !== "" %} {{ wmcadsIcon({ @@ -15,5 +16,6 @@ {% endif %}

{{text}}

+ {% endif %}
{% endmacro %} \ No newline at end of file diff --git a/src/wmcads/components/page-header/_page-header.scss b/src/wmcads/components/page-header/_page-header.scss index 6fa6166d..d6c42071 100644 --- a/src/wmcads/components/page-header/_page-header.scss +++ b/src/wmcads/components/page-header/_page-header.scss @@ -1,7 +1,7 @@ .wmcads-page-header { display: block; position: relative; - height: 150px; + height: 300px; color: $white; background: $black; @@ -34,7 +34,6 @@ h1 { margin: 0; color: $black; - font-size: 28px; } } @@ -47,7 +46,7 @@ &-box { position: absolute; - top: 41px; + top: 35%; left: 8%; height: auto; } diff --git a/src/www/pages/components/page-header/index.njk b/src/www/pages/components/page-header/index.njk index 28dbc9b1..5b81da65 100644 --- a/src/www/pages/components/page-header/index.njk +++ b/src/www/pages/components/page-header/index.njk @@ -4,10 +4,29 @@ {% from "www/_partials/component-example/component-example.njk" import compExample %} {% block content %} +

Header with page name

{{ compExample([ - wmcadsPageHeader(), - wmcadsPageHeader({icon:'general-info'}) + wmcadsPageHeader({ + title: true + }) + ]) +}} +

Header with page name and icon

+{{ + compExample([ + wmcadsPageHeader({ + title: true, + icon:'general-info' + }) + ]) +}} +

Plain Header

+{{ + compExample([ + wmcadsPageHeader({ + title: false + }) ]) }} {% endblock %} \ No newline at end of file From 88136a72de89bddd2dde577b2e8dbf87f050015f Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Thu, 25 Feb 2021 17:17:03 +0000 Subject: [PATCH 03/21] new: teamplate area --- gulp-tasks/paths.js | 2 +- .../templates/content-template/index.njk | 6 ++ .../pages/templates/homepage/homepage.scss | 19 +++++ src/www/pages/templates/homepage/index.njk | 84 +++++++++++++++++++ src/www/pages/templates/templates.scss | 9 ++ 5 files changed, 119 insertions(+), 1 deletion(-) create mode 100644 src/www/pages/templates/homepage/homepage.scss create mode 100644 src/www/pages/templates/homepage/index.njk create mode 100644 src/www/pages/templates/templates.scss diff --git a/gulp-tasks/paths.js b/gulp-tasks/paths.js index 751e25fa..7ab9f27a 100755 --- a/gulp-tasks/paths.js +++ b/gulp-tasks/paths.js @@ -7,7 +7,7 @@ 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/www/pages/templates/content-template/index.njk b/src/www/pages/templates/content-template/index.njk index e7c92c8a..a4880296 100644 --- a/src/www/pages/templates/content-template/index.njk +++ b/src/www/pages/templates/content-template/index.njk @@ -9,8 +9,13 @@ {% block content %} {# About the style guide #} +
+ header image +
+
+

{{ pageTitle | safe}}

From 2018, we’re responsible for the region's Adult Education Budget (AEB).

We target priority growth sectors from the Local Industrial Strategy. This improves skills and secure jobs in communities. It also helps to improve productivity in the region.

What the budget is

@@ -83,4 +88,5 @@

+
{% endblock %} diff --git a/src/www/pages/templates/homepage/homepage.scss b/src/www/pages/templates/homepage/homepage.scss new file mode 100644 index 00000000..30005c36 --- /dev/null +++ b/src/www/pages/templates/homepage/homepage.scss @@ -0,0 +1,19 @@ +.homepage { + .what-we-do { + svg { + display: block; + width: 50px; + height: 50px; + fill: get-color(primary); + } + + a { + display: block; + width: 90%; + } + + div { + margin: 0 0 20px 0; + } + } +} diff --git a/src/www/pages/templates/homepage/index.njk b/src/www/pages/templates/homepage/index.njk new file mode 100644 index 00000000..d58ee912 --- /dev/null +++ b/src/www/pages/templates/homepage/index.njk @@ -0,0 +1,84 @@ +{% extends "www/_layouts/template-layout-fullwidth.njk" %} +{% set pageTitle="Homepage Template" %} {% set section = "Templates" %} +{# Imports #} +{% from "wmcads/components/page-header/_page-header.njk" import wmcadsPageHeader %} +{% 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 %} +{# Set array of tiles #} +{% block content %} + +{# About the style guide #} +{{ + wmcadsPageHeader({ + title: true, + text: "Building a healthier, happier, better connected and more prosperous West Midlands", + home: true + }) +}} +
+
+
+

What is the Combined Authority?

 +

Combined Authorites are set up to improve their region’s economies. We invest in the region through collaboration with our partners, but we don’t replace local councils.

+
+
+

The Mayor

 +

We’re led by the Mayor of the West Midlands. The current mayor is Andy Street, who is in office until May 2021.

+

The Mayor chairs the WMCA Board and acts as a voice for the region, nationally and globally.

+
+
+

What we do

+
+
+ + + + Culture and Digital +
+
+ + + + Economy and Innovation +
+
+ + + + Environment +
+
+ + + + Housing and Land +
+
+ + + + Inclusive Communities +
+
+ + + + Productivity and Skills +
+
+ + + + Transport +
+
+ + + + Wellbeing +
+
+ +
+{% endblock %} diff --git a/src/www/pages/templates/templates.scss b/src/www/pages/templates/templates.scss new file mode 100644 index 00000000..d5844ff0 --- /dev/null +++ b/src/www/pages/templates/templates.scss @@ -0,0 +1,9 @@ +// Vars +@import "../../../wmcads/assets/sass/vars"; + +// Mixins +@import "../../../wmcads/assets/sass/mixins"; + +// Template specific styles +@import "homepage/homepage"; // Homepage + From 09f95a0536913d907329a0f068ef8a302f5018d9 Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Thu, 25 Feb 2021 17:17:28 +0000 Subject: [PATCH 04/21] remove main top margin --- src/wmcads/assets/sass/_utilities.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/wmcads/assets/sass/_utilities.scss b/src/wmcads/assets/sass/_utilities.scss index 0e93c37b..d3588258 100755 --- 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; } From a456e7a5b96f2aa1ddadadcf31fc4c59ddf68d93 Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Thu, 25 Feb 2021 17:18:34 +0000 Subject: [PATCH 05/21] update colour and ensure headings are correct --- src/wmcads/components/link/link/_link.scss | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/wmcads/components/link/link/_link.scss b/src/wmcads/components/link/link/_link.scss index dbea8c1c..c8176a9f 100755 --- a/src/wmcads/components/link/link/_link.scss +++ b/src/wmcads/components/link/link/_link.scss @@ -4,7 +4,7 @@ .wmcads-link { @at-root a:not([class*="wmcads-"]), & { - color: get-color(cta, 10, dark); + color: get-color(cta); font-weight: bold; text-decoration: underline; cursor: pointer; @@ -18,6 +18,12 @@ } } + h1, + h2, + h3 { + color: get-color(cta, 10, dark); + } + &--with-chevron { display: inline-flex; @@ -42,3 +48,11 @@ } } } + +a { + h1, + h2, + h3 { + color: get-color(cta); + } +} From b89a594d337663d5ec68d7412867a16145b56d89 Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Thu, 25 Feb 2021 17:19:09 +0000 Subject: [PATCH 06/21] new layouts from templates --- src/www/_layouts/_template-master-layout.njk | 56 +++++++++++++++++++ .../_layouts/template-layout-fullwidth.njk | 7 +-- src/www/_partials/_template_head.njk | 33 +++++++++++ 3 files changed, 90 insertions(+), 6 deletions(-) create mode 100755 src/www/_layouts/_template-master-layout.njk create mode 100755 src/www/_partials/_template_head.njk diff --git a/src/www/_layouts/_template-master-layout.njk b/src/www/_layouts/_template-master-layout.njk new file mode 100755 index 00000000..8a7b772b --- /dev/null +++ b/src/www/_layouts/_template-master-layout.njk @@ -0,0 +1,56 @@ + + + + {% include "www/_partials/_template_head.njk" %} + + + + + + {# header #} + {% from "wmcads/patterns/header/_header.njk" import wmcadsHeader %} + {{ + wmcadsHeader ({ + id: "mega-menu", + navItems: navItems, + banner: true, + linkTopLevel: true, + breadcrumbs: { + section: section, + pageTitle: pageTitle + } + }) + }} + {# header #} + + {# main #} +
+ {% block body %}{% endblock %} +
+ {# main #} + + + {% from "wmcads/patterns/footer/_footer.njk" import wmcadsFooter %} + {{ + wmcadsFooter({ + feedback: true, + bottomMenu: [{ + name: "Privacy & Cookies Policy", + link: "https://www.wmca.org.uk/policies" + }] + }) + }} + + + + {% include "www/_partials/_scripts.njk" %} + + + + diff --git a/src/www/_layouts/template-layout-fullwidth.njk b/src/www/_layouts/template-layout-fullwidth.njk index 9badaab2..705f898e 100755 --- a/src/www/_layouts/template-layout-fullwidth.njk +++ b/src/www/_layouts/template-layout-fullwidth.njk @@ -1,10 +1,5 @@ -{% extends "www/_layouts/_master-layout.njk" %} +{% extends "www/_layouts/_template-master-layout.njk" %} {% block body %} -

{{ pageTitle | safe}}

-
-
{% block content %}{% endblock content %} -
-
{% endblock body%} \ No newline at end of file diff --git a/src/www/_partials/_template_head.njk b/src/www/_partials/_template_head.njk new file mode 100755 index 00000000..ba02b4be --- /dev/null +++ b/src/www/_partials/_template_head.njk @@ -0,0 +1,33 @@ + + + + {# If homepage #} + {% if section == "Home" %} + Home - West Midlands Combined Authority Design System + {% else %} + {# Else any other pages #} + {{ pageTitle | striptags}} - West Midlands Combined Authority Design System + {% endif %} + + + + + {# Favicons #} + + + + + + + + + + + + + + + + + + \ No newline at end of file From c60b70e500cf31e914991a1e312f98ae0acd0c2a Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Thu, 25 Feb 2021 17:21:09 +0000 Subject: [PATCH 07/21] updates to header component --- .../components/page-header/_page-header.njk | 11 +-- .../components/page-header/_page-header.scss | 77 +++++++++++++++---- .../pages/components/page-header/index.njk | 10 +++ 3 files changed, 76 insertions(+), 22 deletions(-) diff --git a/src/wmcads/components/page-header/_page-header.njk b/src/wmcads/components/page-header/_page-header.njk index a712a874..66128014 100644 --- a/src/wmcads/components/page-header/_page-header.njk +++ b/src/wmcads/components/page-header/_page-header.njk @@ -3,18 +3,19 @@ {% set text = params.text if params.text else "Page header" %} {% set iconName = params.icon if params.icon else "" %} -
- header image +
{% if(params.title) %} -
- {% if iconName !== "" %} +
+
+ {% if iconName !== "" %} {{ wmcadsIcon({ icon: iconName, class: 'wmcads-page-header__icon' }) | trim }} {% endif %} -

{{text}}

+

{{text}}

+
{% endif %}
diff --git a/src/wmcads/components/page-header/_page-header.scss b/src/wmcads/components/page-header/_page-header.scss index d6c42071..353e5561 100644 --- a/src/wmcads/components/page-header/_page-header.scss +++ b/src/wmcads/components/page-header/_page-header.scss @@ -1,9 +1,39 @@ .wmcads-page-header { display: block; - position: relative; height: 300px; color: $white; background: $black; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + &__home { + height: 420px; + + .wmcads-page-header { + &-box { + width: 75%; + background-color: get-color(primary); + + @media all and (max-width: 400px) { + width: 90%; + } + + h1 { + padding: 20px 20px 20px 30px; + color: $white; + + @media all and (max-width: 400px) { + font-size: 2rem; + } + } + } + + &-container { + height: 420px; + } + } + } img { display: block; @@ -12,29 +42,39 @@ object-fit: cover; } + &-container { + display: flex; + min-height: 300px; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-content: flex-start; + align-items: flex-start; + } + &-box { - position: relative; - height: calc(100% - 105px); - padding: 6px 10px; - color: $black; + height: fit-content; + padding: 5px 10px; background: $white; + align-self: center; + + h1 { + margin: 0; + padding: 15px; + } + } &__icon { display: block; position: absolute; - top: -35px; - left: 0; - width: 35px; - height: 35px; - padding: 5px; + width: 46px; + height: 46px; + margin: 8px 0 0 8px; background: $white; + fill: get-color(primary); } - h1 { - margin: 0; - color: $black; - } } @media (min-width: 400px) { @@ -45,10 +85,13 @@ } &-box { - position: absolute; - top: 35%; - left: 8%; + top: 120px; + left: 0; height: auto; + + &__home { + top: 110px; + } } &__icon { diff --git a/src/www/pages/components/page-header/index.njk b/src/www/pages/components/page-header/index.njk index 5b81da65..74c861f7 100644 --- a/src/www/pages/components/page-header/index.njk +++ b/src/www/pages/components/page-header/index.njk @@ -29,4 +29,14 @@ }) ]) }} +

Homepage Header

+{{ + compExample([ + wmcadsPageHeader({ + title: true, + text: "Building a healthier, happier, better connected and more prosperous West Midlands", + home: true + }) + ]) +}} {% endblock %} \ No newline at end of file From d57276d908f21f7c2420b65395872634106e1d9d Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Wed, 3 Mar 2021 10:46:49 +0000 Subject: [PATCH 08/21] hide breadcrumb on homepage template --- .../components/breadcrumb/_breadcrumb.njk | 2 ++ .../components/page-header/_page-header.njk | 2 +- src/www/pages/templates/homepage/index.njk | 34 +++++++++++++------ 3 files changed, 27 insertions(+), 11 deletions(-) diff --git a/src/wmcads/components/breadcrumb/_breadcrumb.njk b/src/wmcads/components/breadcrumb/_breadcrumb.njk index 50e1e809..752fb3fe 100755 --- 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" -%} +{%- endif %} {% endmacro %} \ No newline at end of file diff --git a/src/wmcads/components/page-header/_page-header.njk b/src/wmcads/components/page-header/_page-header.njk index 66128014..b2c6be59 100644 --- a/src/wmcads/components/page-header/_page-header.njk +++ b/src/wmcads/components/page-header/_page-header.njk @@ -3,7 +3,7 @@ {% set text = params.text if params.text else "Page header" %} {% set iconName = params.icon if params.icon else "" %} -
+
{% if(params.title) %}
diff --git a/src/www/pages/templates/homepage/index.njk b/src/www/pages/templates/homepage/index.njk index d58ee912..94d1bf2e 100644 --- a/src/www/pages/templates/homepage/index.njk +++ b/src/www/pages/templates/homepage/index.njk @@ -13,7 +13,8 @@ wmcadsPageHeader({ title: true, text: "Building a healthier, happier, better connected and more prosperous West Midlands", - home: true + home: true, + topm: true }) }}
@@ -28,51 +29,51 @@

The Mayor chairs the WMCA Board and acts as a voice for the region, nationally and globally.

-

What we do

+

What we do
-
+
Culture and Digital
-
+
Economy and Innovation
-
+
Environment
-
+
Housing and Land
-
+
Inclusive Communities
-
+
Productivity and Skills
-
+
Transport
-
+
@@ -80,5 +81,18 @@
+

Latest News

+
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+
{% endblock %} From bac828a53e3f3c8cedc449346162d0a6b3cd61f4 Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Wed, 3 Mar 2021 11:59:13 +0000 Subject: [PATCH 09/21] new: event content card --- .../components/content-card/_content-card.njk | 10 +++- .../content-card/_content-card.scss | 6 ++ .../pages/components/content-card/index.njk | 58 +++++++++++++++++-- 3 files changed, 67 insertions(+), 7 deletions(-) diff --git a/src/wmcads/components/content-card/_content-card.njk b/src/wmcads/components/content-card/_content-card.njk index 848bfb33..f04352b4 100755 --- a/src/wmcads/components/content-card/_content-card.njk +++ b/src/wmcads/components/content-card/_content-card.njk @@ -14,7 +14,7 @@ {# 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 "" }}"> {% if(params.src) %} content image {% endif %} @@ -25,12 +25,20 @@

Lorem ipsum dolor sit amet

+ {% else %} + {% if(params.isEvent) %} +
+

Event

+

24 January 2021

+

A short sentence explaining what this is, it can be 2 lines.

+
{% else %} {%- if caller -%} {{ caller() }} {%- else -%} {{ html | safe }} {%- endif -%} + {%- endif -%} {% endif %} {% endmacro %} diff --git a/src/wmcads/components/content-card/_content-card.scss b/src/wmcads/components/content-card/_content-card.scss index 9b8ecca7..0c483d81 100755 --- a/src/wmcads/components/content-card/_content-card.scss +++ b/src/wmcads/components/content-card/_content-card.scss @@ -43,4 +43,10 @@ } } + &--event { + h2 { + margin: 0; + } + + } } diff --git a/src/www/pages/components/content-card/index.njk b/src/www/pages/components/content-card/index.njk index b0158780..fc5efc30 100755 --- a/src/www/pages/components/content-card/index.njk +++ b/src/www/pages/components/content-card/index.njk @@ -26,14 +26,14 @@
  • When it is used in a set of cards for navigation purposes. Instead, use a Navigation card.
    • +

    Regular Card

    + {{ compExample([ - wmcadsContentCard({src: true}), - wmcadsContentCard(), wmcadsContentCard({ html: '
    -

    Headline

    +

    Headline

    A short sentence explaining what this is, it can be 2 lines.

    ' @@ -42,6 +42,25 @@ ]) }} +

    With Image

    + +{{ + compExample([ + wmcadsContentCard({src: true}) + + ]) +}} + +

    Without Image

    + +{{ + compExample([ + wmcadsContentCard() + ]) +}} + + +

    {# Navigation card #}

    Navigation card

    @@ -62,12 +81,28 @@
  • When multiple interactive components within the card are used. Instead, use a Content card.
    • +

    Navigation Card

    + {{ - compExample([ - wmcadsContentCard({clickable: true, src: true}), + compExample([ wmcadsContentCard({ clickable: true - }), + }) + ]) +}} + +

    With Image

    + +{{ + compExample([ + wmcadsContentCard({clickable: true, src: true}) + ]) +}} + +

    Call To Action Card

    + +{{ + compExample([ wmcadsContentCard({ clickable: true, isCta: true @@ -75,4 +110,15 @@ ]) }} +

    Event Card

    + +{{ + compExample([ + wmcadsContentCard({ + clickable: true, + isEvent: true + }) + ]) +}} + {% endblock %} From 76ab44745bcfb4bf8f07e84bc6e62b6f15bd9061 Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Wed, 3 Mar 2021 17:05:57 +0000 Subject: [PATCH 10/21] fix link heading size --- src/wmcads/assets/sass/_typography.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/wmcads/assets/sass/_typography.scss b/src/wmcads/assets/sass/_typography.scss index 9619df6b..644fe6a4 100755 --- 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); } From 7e16e0854ddae1eb0da89a4f22433f5e83474fa2 Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Wed, 3 Mar 2021 17:06:17 +0000 Subject: [PATCH 11/21] fix padding issue in grid spacing --- src/wmcads/assets/sass/wmcads-grid/_grid-spacing.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wmcads/assets/sass/wmcads-grid/_grid-spacing.scss b/src/wmcads/assets/sass/wmcads-grid/_grid-spacing.scss index 847628d5..1d0e0830 100755 --- 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 { From d2fa842e51e3baec8dfa7a055d39f272fbcadf54 Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Wed, 3 Mar 2021 17:06:52 +0000 Subject: [PATCH 12/21] add a display to links --- src/wmcads/components/link/link/_link.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/wmcads/components/link/link/_link.scss b/src/wmcads/components/link/link/_link.scss index c8176a9f..5d276a27 100755 --- a/src/wmcads/components/link/link/_link.scss +++ b/src/wmcads/components/link/link/_link.scss @@ -4,6 +4,7 @@ .wmcads-link { @at-root a:not([class*="wmcads-"]), & { + display: inline-block; color: get-color(cta); font-weight: bold; text-decoration: underline; From 595267a55f9a4c652d6691c1d34892157bcd0e86 Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Wed, 3 Mar 2021 17:07:26 +0000 Subject: [PATCH 13/21] content card updates --- .../components/content-card/_content-card.njk | 35 +++++++++++-------- .../content-card/_content-card.scss | 27 ++++++++++++-- .../pages/components/content-card/index.njk | 30 +++++++++++----- 3 files changed, 66 insertions(+), 26 deletions(-) diff --git a/src/wmcads/components/content-card/_content-card.njk b/src/wmcads/components/content-card/_content-card.njk index f04352b4..6afe7dea 100755 --- a/src/wmcads/components/content-card/_content-card.njk +++ b/src/wmcads/components/content-card/_content-card.njk @@ -4,19 +4,17 @@ {# 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 " -
    -

    Lorem ipsum dolor sit amet

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    -
    -" %} +{% 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 "" }} {{"wmcads-content-card--event" if params.isEvent 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) %} - content image + content image {% endif %} {% if(params.isCta) %}
    @@ -28,17 +26,26 @@ {% else %} {% if(params.isEvent) %}
    -

    Event

    +

    {{eventTitle}}

    24 January 2021

    -

    A short sentence explaining what this is, it can be 2 lines.

    +

    {{eventCopy}}

    + {% else %} + {% if(params.isNews) %} +

    24 January 2021

    +

    {{title}}

    +

    {{copy}}

    {% else %} {%- if caller -%} {{ caller() }} {%- else -%} - {{ html | safe }} - {%- endif -%} - {%- endif -%} +
    +

    {{title}}

    +

    {{copy}}

    +
    + {%- endif -%} + {%- endif -%} + {%- endif -%} {% endif %} {% endmacro %} diff --git a/src/wmcads/components/content-card/_content-card.scss b/src/wmcads/components/content-card/_content-card.scss index 0c483d81..4b7a9f12 100755 --- 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); @@ -44,9 +47,27 @@ } &--event { - h2 { + 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; } } diff --git a/src/www/pages/components/content-card/index.njk b/src/www/pages/components/content-card/index.njk index fc5efc30..63eb523e 100755 --- a/src/www/pages/components/content-card/index.njk +++ b/src/www/pages/components/content-card/index.njk @@ -31,12 +31,6 @@ {{ compExample([ wmcadsContentCard({ - html: ' -
    -

    Headline

    -

    A short sentence explaining what this is, it can be 2 lines.

    -
    - ' }) ]) @@ -46,8 +40,10 @@ {{ compExample([ - wmcadsContentCard({src: true}) - + wmcadsContentCard({ + src: true, + isSrcDefault: true + }) ]) }} @@ -95,7 +91,11 @@ {{ compExample([ - wmcadsContentCard({clickable: true, src: true}) + wmcadsContentCard({ + clickable: true, + src: true, + isSrcDefault: true + }) ]) }} @@ -121,4 +121,16 @@ ]) }} +

    News Card

    + +{{ + compExample([ + wmcadsContentCard({ + src: true, + clickable: true, + isNews: true + }) + ]) +}} + {% endblock %} From 07b96371cc384db720d05ac11077a5612e88a721 Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Wed, 3 Mar 2021 17:07:46 +0000 Subject: [PATCH 14/21] homepage template updates --- .../pages/templates/homepage/homepage.scss | 16 +++ src/www/pages/templates/homepage/index.njk | 131 ++++++++++++++++-- 2 files changed, 139 insertions(+), 8 deletions(-) diff --git a/src/www/pages/templates/homepage/homepage.scss b/src/www/pages/templates/homepage/homepage.scss index 30005c36..1932721b 100644 --- a/src/www/pages/templates/homepage/homepage.scss +++ b/src/www/pages/templates/homepage/homepage.scss @@ -16,4 +16,20 @@ margin: 0 0 20px 0; } } + + h2, + h3, + p, + .what-we-do, + .wmcads-link { + @media screen and (max-width: $breakpoint-sm) { + padding: 0 $size-sm; + } + } +} + +.wmcads-container.homepage { + @media screen and (max-width: $breakpoint-sm) { + padding: 0; + } } diff --git a/src/www/pages/templates/homepage/index.njk b/src/www/pages/templates/homepage/index.njk index 94d1bf2e..1204d44e 100644 --- a/src/www/pages/templates/homepage/index.njk +++ b/src/www/pages/templates/homepage/index.njk @@ -5,6 +5,7 @@ {% 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 %} {# Set array of tiles #} {% block content %} @@ -20,7 +21,7 @@
    -

    What is the Combined Authority?

     +

    What is the Combined Authority?

    Combined Authorites are set up to improve their region’s economies. We invest in the region through collaboration with our partners, but we don’t replace local councils.

    @@ -82,17 +83,131 @@

    Latest News

    -
    -
    - 1 +
    +
    + {{ + wmcadsContentCard({ + src: true, + title: 'Wednesbury to Brierley Hill tram extension opens', + copy: 'The new line opens today, linking passengers to Dudley and Merry Hill. The extension was originally proposed in 1990, and was funded through the historic Devolution Deal in 2016.', + isNews: true, + isNewsFirst: true + }) + }} +
    +
    + {{ + wmcadsContentCard({ + src: true, + title: 'WMCA donates computers to school children to tackle digital divide', + copy: '150 old staff laptops will be donated to Wowdot', + isNews: true, + isNewsSub: true + }) + }} +
    +
    + {{ + wmcadsContentCard({ + src: true, + title: 'Historic devolution agreement reached', + copy: 'The Government will contribute 40 million over the next 30 years', + isNews: true, + isNewsSub: true + }) + }} +
    +
    +See all news stories + +
    +
    + {{ + wmcadsContentCard({ + src: true, + isSrcDefault: true, + title: 'Coronavirus support', + copy: 'Get advice and support during the pandemic such as finding a new job and applying for business grants.', + clickable: true + }) + }} +
    +
    + {{ + wmcadsContentCard({ + src: true, + isSrcDefault: true, + title: '2021 Mayoral election', + copy: 'Find out what the Mayor is reponsible for and how to vote.', + clickable: true + }) + }} +
    +
    +
    +
    + {{ + wmcadsContentCard({ + title: 'Upskill yourself in lockdown', + copy: 'Find out what the Mayor is reponsible for and how to vote.', + clickable: true + }) + }}
    -
    - 2 +
    + {{ + wmcadsContentCard({ + title: 'Thrive at Work', + copy: 'Join our free workplace wellbeing scheme to keep staff healthy, motivated and productive.', + clickable: true + }) + }}
    -
    - 3 +
    + {{ + wmcadsContentCard({ + title: 'Annual Plan 2021 - 2022', + copy: 'We’ve set our ambitions for each of our priorities over the next year.', + clickable: true + }) + }} +
    +
    + +

    Upcoming events

    +
    +
    + {{ + wmcadsContentCard({ + eventTitle: 'Mayors Mentors', + eventCopy: 'Find out about the Mayor’s Mentors scheme and how it can help you grow.', + clickable: true, + isEvent: true + }) + }} +
    +
    + {{ + wmcadsContentCard({ + eventTitle: 'Greater Birmingham LEP Skills Day', + eventCopy: 'Hear from employers and training providers on upskilling opportunities available.', + clickable: true, + isEvent: true + }) + }} +
    +
    + {{ + wmcadsContentCard({ + eventTitle: 'Sprint exhibition - Walsall', + eventCopy: 'Learn and ask questions about the upcoming Sprint works in the region.', + clickable: true, + isEvent: true + }) + }}
    +See all WMCA events
    {% endblock %} From 1cc7390501460ec63ce17cf33d9b4c3d789c931f Mon Sep 17 00:00:00 2001 From: "restyled-io[bot]" <32688539+restyled-io[bot]@users.noreply.github.com> Date: Thu, 4 Mar 2021 09:58:39 +0000 Subject: [PATCH 15/21] Restyled by prettier (#105) Co-authored-by: Restyled.io --- gulp-tasks/paths.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/gulp-tasks/paths.js b/gulp-tasks/paths.js index 7ab9f27a..bcb0b6e2 100755 --- 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', 'src/www/pages/templates/templates.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' }, From d21a86c0611b178f78ebfa4a8fce2fcaf2fd3335 Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Thu, 4 Mar 2021 11:06:36 +0000 Subject: [PATCH 16/21] replace user research with templates --- src/www/assets/json/merged.njk.json | 10 +++++++- src/www/data.njk.json | 2 +- src/www/pages/index.njk | 30 +++++++++++----------- src/www/pages/templates/homepage/index.njk | 5 ++-- src/www/pages/templates/index.njk | 9 +------ 5 files changed, 29 insertions(+), 27 deletions(-) diff --git a/src/www/assets/json/merged.njk.json b/src/www/assets/json/merged.njk.json index 2888e835..351c8d8d 100755 --- a/src/www/assets/json/merged.njk.json +++ b/src/www/assets/json/merged.njk.json @@ -130,7 +130,15 @@ ] }, { - "name": "User research" + "name": "Templates", + "subnavItems": [ + { + "name": "Homepage" + }, + { + "name": "Content Template" + } + ] } ], "colors": { diff --git a/src/www/data.njk.json b/src/www/data.njk.json index ebeb4b6a..3f45f3e1 100644 --- a/src/www/data.njk.json +++ b/src/www/data.njk.json @@ -130,7 +130,7 @@ ] }, { - "name": "User research" + "name": "Templates" } ], "colors": { diff --git a/src/www/pages/index.njk b/src/www/pages/index.njk index d7a8980f..fc7652bc 100755 --- a/src/www/pages/index.njk +++ b/src/www/pages/index.njk @@ -54,21 +54,6 @@ {# Internal navigation #}

    Design System

    - {# User research #} -
    - {{ - wmcadsContentTilesNormal({ - classModifiers: 'wmcads-content-tile--with-one-link', - title: "User research", - copy: "

    Start with user needs to make sure you're building the right thing

    ", - smallTitle: true, - readMore: true, - link: '/user-research/', - linkText: 'Read more about user research', - linkTitle: 'User research' - }) - }} -
    {# Styles #}
    {{ @@ -114,6 +99,21 @@ }) }}
    + {# Templates #} +
    + {{ + wmcadsContentTilesNormal({ + classModifiers: 'wmcads-content-tile--with-one-link', + title: "Templates", + copy: "

    Example template layouts

    ", + smallTitle: true, + readMore: true, + link: '/templates/', + linkText: 'Read more about templates', + linkTitle: 'Templates' + }) + }} +

    diff --git a/src/www/pages/templates/homepage/index.njk b/src/www/pages/templates/homepage/index.njk index 1204d44e..ec699af1 100644 --- a/src/www/pages/templates/homepage/index.njk +++ b/src/www/pages/templates/homepage/index.njk @@ -1,5 +1,6 @@ -{% extends "www/_layouts/template-layout-fullwidth.njk" %} -{% set pageTitle="Homepage Template" %} {% set section = "Templates" %} +{% extends "www/_layouts/template-layout-fullwidth.njk" %} +{% set pageTitle="Homepage Template" %} {% set section = "Templates" %} +{% set section="Templates" %} {# Imports #} {% from "wmcads/components/page-header/_page-header.njk" import wmcadsPageHeader %} {% from "wmcads/components/link/link/_link.njk" import wmcadsLink %} diff --git a/src/www/pages/templates/index.njk b/src/www/pages/templates/index.njk index e3b56ea0..4994e699 100644 --- a/src/www/pages/templates/index.njk +++ b/src/www/pages/templates/index.njk @@ -3,12 +3,5 @@ {% set section = "Templates" %} {% block content %} -

    Make your service look and feel like WMCA Design System.

    -

    If you are using the WMCA Design System Prototype Kit or have WMCA Design System Frontend included in your build, the - coded examples in the - Design System will not need any additional styling.

    -

    If you need to apply styles manually, you should still follow existing WMCA Design System conventions. For - example, do not assign - new meanings to colours, do not change the style of buttons or adjust the thickness of borders on - form inputs.

    +

    Example templates that make up the main West Midlands Combined Authority Website

    {% endblock %} \ No newline at end of file From 353f54afb3c266c4e8b31c6a95ecd601f6c31744 Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Thu, 4 Mar 2021 11:13:53 +0000 Subject: [PATCH 17/21] add padding to card img --- src/wmcads/components/content-card/_content-card.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/wmcads/components/content-card/_content-card.scss b/src/wmcads/components/content-card/_content-card.scss index 4b7a9f12..e9ae05cb 100755 --- a/src/wmcads/components/content-card/_content-card.scss +++ b/src/wmcads/components/content-card/_content-card.scss @@ -70,4 +70,8 @@ h3 { margin: $size-sm 0; } + + img { + padding: 1px; + } } From 5ac37834bec09052bfcff4493c036e40a6fa650a Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Wed, 10 Mar 2021 10:12:03 +0000 Subject: [PATCH 18/21] content card updates --- .../components/content-card/_content-card.njk | 3 +- .../templates/content-template/index.njk | 78 ++++++++++--------- 2 files changed, 44 insertions(+), 37 deletions(-) diff --git a/src/wmcads/components/content-card/_content-card.njk b/src/wmcads/components/content-card/_content-card.njk index 6afe7dea..d2cbe3e5 100755 --- a/src/wmcads/components/content-card/_content-card.njk +++ b/src/wmcads/components/content-card/_content-card.njk @@ -14,7 +14,8 @@ {# 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 "" }} "> {% if(params.src) %} - content image + content image {% endif %} {% if(params.isCta) %}
    diff --git a/src/www/pages/templates/content-template/index.njk b/src/www/pages/templates/content-template/index.njk index a4880296..7e904b6a 100644 --- a/src/www/pages/templates/content-template/index.njk +++ b/src/www/pages/templates/content-template/index.njk @@ -5,6 +5,7 @@ {% 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 %} {# Set array of tiles #} {% block content %} @@ -41,50 +42,55 @@
    -
    - - content image -
    -

    Who we've funded

    -

    See which councils and providers we've funded, and what for.

    -
    -     +
    + {{ + wmcadsContentCard({ + src: true, + isThirdCard: true, + title: 'Who weve funded', + copy: 'See which councils and providers weve funded, and what for.' + }) + }}
    - - content image -
    -

    Find training schemes

    -

    You can find training and education providers we've funded online.

    -
    -     + {{ + wmcadsContentCard({ + src: true, + isThirdCard: true, + title: 'Find training schemes', + copy: 'You can find training and education providers weve funded online.' + }) + }}
    - - content image -
    -

    Contact us

    -

    Get in touch if you want to know more about the budget.

    -
    -     + {{ + wmcadsContentCard({ + src: true, + isThirdCard: true, + title: 'Contact us', + copy: 'Get in touch if you want to know more about the budget.' + }) + }}
    - - content image -
    -

    Pharetra Sollicitudin

    -

    Donec sed odio dui. Nullam quis risus eget urna mollis ornareleo.

    -
    -     + {{ + wmcadsContentCard({ + src: true, + isThirdCard: true, + title: 'Pharetra Sollicitudin', + copy: 'Donec sed odio dui. Nullam quis risus eget urna mollis ornareleo.' + }) + }}
    - - content image -
    -

    Pharetra Sollicitudin Bibendum

    -

    Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.

    -
    -     + {{ + wmcadsContentCard({ + src: true, + isDoubleCard: true, + title: 'Pharetra Sollicitudin Bibendum', + copy: 'Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo.' + }) + }}

    From 72562a956a1eb3ac64d9b02cc3b883020ad925eb Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Wed, 10 Mar 2021 10:59:47 +0000 Subject: [PATCH 19/21] new: hub header --- src/wmcads/components/_components.scss | 1 + .../components/hub-header/_hub-header.njk | 10 +++ .../components/hub-header/_hub-header.scss | 73 +++++++++++++++++++ src/www/assets/json/merged.njk.json | 3 + src/www/data.njk.json | 3 + src/www/pages/components/hub-header/index.njk | 12 +++ 6 files changed, 102 insertions(+) create mode 100644 src/wmcads/components/hub-header/_hub-header.njk create mode 100644 src/wmcads/components/hub-header/_hub-header.scss create mode 100644 src/www/pages/components/hub-header/index.njk diff --git a/src/wmcads/components/_components.scss b/src/wmcads/components/_components.scss index d2db40b3..e6e086f0 100755 --- 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/hub-header/_hub-header.njk b/src/wmcads/components/hub-header/_hub-header.njk new file mode 100644 index 00000000..550694a7 --- /dev/null +++ b/src/wmcads/components/hub-header/_hub-header.njk @@ -0,0 +1,10 @@ +{% macro wmcadsHubHeader(params) %} +
    +
    + +
    +

    Page title

    +
    Subtext
    +
    +
    +{% endmacro %} \ No newline at end of file diff --git a/src/wmcads/components/hub-header/_hub-header.scss b/src/wmcads/components/hub-header/_hub-header.scss new file mode 100644 index 00000000..34c0b553 --- /dev/null +++ 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/www/assets/json/merged.njk.json b/src/www/assets/json/merged.njk.json index 351c8d8d..ae6d97b6 100755 --- a/src/www/assets/json/merged.njk.json +++ b/src/www/assets/json/merged.njk.json @@ -56,6 +56,9 @@ { "name": "Form elements" }, + { + "name": "Hub header" + }, { "name": "Inset text" }, diff --git a/src/www/data.njk.json b/src/www/data.njk.json index 3f45f3e1..f2c096b7 100644 --- a/src/www/data.njk.json +++ b/src/www/data.njk.json @@ -56,6 +56,9 @@ { "name": "Form elements" }, + { + "name": "Hub header" + }, { "name": "Inset text" }, diff --git a/src/www/pages/components/hub-header/index.njk b/src/www/pages/components/hub-header/index.njk new file mode 100644 index 00000000..4be008f6 --- /dev/null +++ b/src/www/pages/components/hub-header/index.njk @@ -0,0 +1,12 @@ +{% extends "www/_layouts/layout-left-pane.njk" %} +{% set pageTitle="Hub header" %} +{% from "wmcads/components/hub-header/_hub-header.njk" import wmcadsHubHeader %} +{% from "www/_partials/component-example/component-example.njk" import compExample %} + +{% block content %} +{{ + compExample([ + wmcadsHubHeader() + ],{iframe:true}) +}} +{% endblock %} \ No newline at end of file From 62b9bed3c2ab79ed3558bcd1ea56ca5661c8922e Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Wed, 10 Mar 2021 11:18:06 +0000 Subject: [PATCH 20/21] new - page contents component --- src/wmcads/components/_components.scss | 1 + .../components/hub-header/_hub-header.scss | 2 +- .../page-contents/_page-contents.njk | 10 ++++++ .../page-contents/_page-contents.scss | 31 +++++++++++++++++++ src/www/assets/json/merged.njk.json | 3 ++ src/www/data.njk.json | 3 ++ .../pages/components/page-contents/index.njk | 12 +++++++ 7 files changed, 61 insertions(+), 1 deletion(-) create mode 100644 src/wmcads/components/page-contents/_page-contents.njk create mode 100644 src/wmcads/components/page-contents/_page-contents.scss create mode 100644 src/www/pages/components/page-contents/index.njk diff --git a/src/wmcads/components/_components.scss b/src/wmcads/components/_components.scss index e6e086f0..eb0fb1c4 100755 --- a/src/wmcads/components/_components.scss +++ b/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 diff --git a/src/wmcads/components/hub-header/_hub-header.scss b/src/wmcads/components/hub-header/_hub-header.scss index 34c0b553..4f171d1a 100644 --- a/src/wmcads/components/hub-header/_hub-header.scss +++ b/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; } diff --git a/src/wmcads/components/page-contents/_page-contents.njk b/src/wmcads/components/page-contents/_page-contents.njk new file mode 100644 index 00000000..5a476c74 --- /dev/null +++ b/src/wmcads/components/page-contents/_page-contents.njk @@ -0,0 +1,10 @@ +{% macro wmcadsPageContents(params) %} +
    +

    Page contents

    +
    Page title
    + link 1 + link 2 + link 3 + link 4 +
    +{% endmacro %} \ No newline at end of file diff --git a/src/wmcads/components/page-contents/_page-contents.scss b/src/wmcads/components/page-contents/_page-contents.scss new file mode 100644 index 00000000..ed201aa9 --- /dev/null +++ b/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; + } +} diff --git a/src/www/assets/json/merged.njk.json b/src/www/assets/json/merged.njk.json index ae6d97b6..a12e25b6 100755 --- a/src/www/assets/json/merged.njk.json +++ b/src/www/assets/json/merged.njk.json @@ -56,6 +56,9 @@ { "name": "Form elements" }, + { + "name": "Page contents" + }, { "name": "Hub header" }, diff --git a/src/www/data.njk.json b/src/www/data.njk.json index f2c096b7..2fa6f283 100644 --- a/src/www/data.njk.json +++ b/src/www/data.njk.json @@ -56,6 +56,9 @@ { "name": "Form elements" }, + { + "name": "Page contents" + }, { "name": "Hub header" }, diff --git a/src/www/pages/components/page-contents/index.njk b/src/www/pages/components/page-contents/index.njk new file mode 100644 index 00000000..e6a5dcf8 --- /dev/null +++ b/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 %} \ No newline at end of file From 83b15fc743978cee0364a31cb9d2d7fa909f2d11 Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Wed, 10 Mar 2021 14:27:27 +0000 Subject: [PATCH 21/21] add page contents to menu --- src/www/assets/json/merged.njk.json | 3 +++ src/www/data.njk.json | 3 +++ 2 files changed, 6 insertions(+) diff --git a/src/www/assets/json/merged.njk.json b/src/www/assets/json/merged.njk.json index ae6d97b6..6cc6d8f3 100755 --- a/src/www/assets/json/merged.njk.json +++ b/src/www/assets/json/merged.njk.json @@ -77,6 +77,9 @@ { "name": "Message" }, + { + "name": "Page contents" + }, { "name": "Page header" }, diff --git a/src/www/data.njk.json b/src/www/data.njk.json index f2c096b7..c096ad75 100644 --- a/src/www/data.njk.json +++ b/src/www/data.njk.json @@ -77,6 +77,9 @@ { "name": "Message" }, + { + "name": "Page contents" + }, { "name": "Page header" },