Revert "Release (#75)" (#76)

This reverts commit 675c1f8.

README.md

@@ -1,9 +1,7 @@
 # 1. WMCA Design System
 
-![Netlify](https://img.shields.io/netlify/04471bb6-9621-4c59-abe8-b4fdf74a3860)
-![David](https://img.shields.io/david/wmcadigital/wmca-design-system?style=flat-square)
-![GitHub last commit](https://img.shields.io/github/last-commit/wmcadigital/wmca-design-system?style=flat-square)
-![GitHub issues](https://img.shields.io/github/issues-raw/wmcadigital/wmca-design-system?style=flat-square)
+[![Last commit](https://img.shields.io/github/last-commit/wmcadigital/wmcads-design-system?style=flat-square)](https://github.com/wmcadigital/wmca-design-system/commits/master)
+[![Open Github issues](https://img.shields.io/github/issues-raw/wmcadigital/wmcads-design-system?style=flat-square)](https://github.com/wmcadigital/wmca-design-system/issues)
 
 ## 1.1. Table of contents
 

docs/json/merged.njk.json

@@ -45,7 +45,7 @@
 					"name": "Content card"
 				},
 				{
-					"name": "Document"
+					"name": "Content Tiles"
 				},
 				{
 					"name": "Details"
@@ -74,27 +74,12 @@
 				{
 					"name": "Message"
 				},
-				{
-					"name": "Page header"
-				},
 				{
 					"name": "Phase indicator"
 				},
-				{
-					"name": "Portfolio dashboard"
-				},
-				{
-					"name": "Portfolio leads"
-				},
-				{
-					"name": "Share"
-				},
 				{
 					"name": "Table"
 				},
-				{
-					"name": "Tag"
-				},
 				{
 					"name": "Warning text"
 				}
@@ -124,9 +109,6 @@
 				{
 					"name": "Header and footer"
 				},
-				{
-					"name": "Header v2"
-				},
 				{
 					"name": "Question Form"
 				},
@@ -142,39 +124,41 @@
 	"colors": {
 		"brand": [
 			{
-				"varName": "brandFurnaceOrange",
-				"name": "Furnace Orange"
+				"varName": "primary",
+				"name": "Primary Orange"
 			},
 			{
-				"varName": "brandCoolGrey",
-				"name": "Cool Grey"
+				"varName": "secondary",
+				"name": "Secondary Grey"
+			}
+		],
+		"modal": [
+			{
+				"varName": "bus",
+				"name": "Bus"
+			},
+			{
+				"varName": "metro",
+				"name": "Metro"
 			},
 			{
-				"varName": "brandWmGreen",
-				"name": "WM Green"
+				"varName": "railway",
+				"name": "WM Railway"
 			},
 			{
-				"varName": "brandWmRed",
-				"name": "WM Red"
+				"varName": "susTravel",
+				"name": "Sustainable Travel"
 			},
 			{
-				"varName": "brandWmPurple",
-				"name": "WM Purple"
+				"varName": "roads",
+				"name": "Roads"
 			},
 			{
-				"varName": "brandWmBlue",
-				"name": "WM Blue"
+				"varName": "taxi",
+				"name": "Taxi"
 			}
 		],
 		"web": [
-			{
-				"varName": "primary",
-				"name": "Primary Orange"
-			},
-			{
-				"varName": "secondary",
-				"name": "Secondary Grey"
-			},
 			{
 				"varName": "text",
 				"name": "Text"
@@ -194,9 +178,21 @@
 			{
 				"varName": "success",
 				"name": "Success"
+			},
+			{
+				"varName": "information",
+				"name": "Information"
 			}
 		],
 		"backgroundOnly": [
+			{
+				"varName": "plannedDisruption",
+				"name": "Planned Disruption"
+			},
+			{
+				"varName": "disable",
+				"name": "Disabled Elements"
+			},
 			{
 				"varName": "background",
 				"name": "Background"

docs/njk/components/accordion/_accordion.njk

@@ -0,0 +1,60 @@
+{% macro wmcadsAccordion(params) %}
+{# Imports #}
+{% from "components/icon/_icon.njk" import wmcadsIcon %}
+{% from "components/disruption-indicator/small/_small.njk" import wmcadsDisruptionIndicatorSmall %}
+{% from "components/disruption-indicator/medium/_medium.njk" import wmcadsDisruptionIndicatorMedium as wmcadsDisruptionIndicatorNarrow %}
+{% from "components/icon/_icon.njk" import wmcadsIcon %}
+{# Params #}
+{% set isOpen = " wmcads-is--open" if params.isOpen %}
+{% set isExpanded = "true" if params.isOpen else "false" %}
+{% set id = params.id if params.id else "accordion-01" %}
+
+<div class="wmcads-accordion{{isOpen}}">
+  <button aria-controls="{{id}}" class="wmcads-accordion__summary-wrapper" aria-expanded="{{isExpanded}}">
+    <!-- accordion summary -->
+    <div class="wmcads-accordion__summary">
+      {% if params.customSummary -%}
+      <!-- custom summary using grid -->
+      <div class="wmcads-grid wmcads-grid--align-center">
+        {{
+          wmcadsDisruptionIndicatorSmall({
+            classModifiers: 'wmcads-col-auto wmcads-m-r-md',
+            mode: 'bus'
+          }) | indent(10) | trim
+        }}
+        <div class="wmcads-col-auto">
+          Resurfacing Works at <strong>Abbey Street, Lower Gornal</strong>
+        </div>
+      </div>
+      {%- else -%}
+        <h4 class="wmcads-m-b-none">Accordion</h4>
+      {%- endif %}
+    </div>
+    <!-- plus icon -->
+    {{
+      wmcadsIcon({
+        icon: 'general-expand',
+        class: 'wmcads-accordion__icon'
+      }) | indent(4) | trim
+    }}
+    <!-- minus icon -->
+    {{
+      wmcadsIcon({
+        icon: 'general-minimise',
+        class: 'wmcads-accordion__icon wmcads-accordion__icon--minimise'
+      }) | indent(4) | trim
+    }}
+  </button>
+
+  <!-- accordion content -->
+  <div class="wmcads-accordion__content" id="{{id}}">
+    <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>
+
+{% endmacro %}

docs/njk/components/breadcrumb/_breadcrumb.njk

@@ -0,0 +1,40 @@
+{% macro wmcadsBreadcrumb(params) %}
+{# This breadcrumb  is dynamic to a point...
+As the design system only uses a 2 deep navigation we just show/hide the 'section' breadcrumb based on an if statement. If the user is only 1 level deep then they must be on a section page, so we hide the section breadcrumb as the current page breadcrumb will show the page/section the user is on.
+And we show the current page breadcrumb at all times.
+#}
+
+{% set section = params.section if params.section else "Components" %} {# default to Components section if one isn't available #}
+
+{# Set sectionUrl and pageUrl #}
+{% set sectionUrl =  '/' + section | lower | replace(" ", "-") if params.pageTitle != section %}
+{% set pageUrl =  '/' + params.pageTitle | lower | replace(" ", "-") + '/' %}
+{% set class = ' ' + params.classModifiers if params.classModifiers %}
+{% set ariaLabel = params.exampleAria + " example breadcrumbs" if params.exampleAria else "Breadcrumbs" %}
+
+<nav aria-label="{{ariaLabel}}" class="wmcads-breadcrumb{{class}}">
+  <ol class="wmcads-breadcrumb__list">
+    {#- Link back to homepage #}
+    <li class="wmcads-breadcrumb__list-item">
+      <a href="/" class="wmcads-breadcrumb__link">
+        Home
+      </a>
+    </li>
+    {#- If pageTitle != same as section, then we can show section breadcrumb #}
+    {% if params.pageTitle != section -%}
+    <li class="wmcads-breadcrumb__list-item">
+      <a href="{{ sectionUrl + '/' }}" class="wmcads-breadcrumb__link">
+        {{ section }}
+      </a>
+    </li>
+    {%- endif %}
+    {#- Show the curent page in the breadcrumb #}
+    <li class="wmcads-breadcrumb__list-item">
+      <a href="{{ sectionUrl + pageUrl }}" class="wmcads-breadcrumb__link wmcads-breadcrumb__link--current" aria-current="page">
+        {{params.pageTitle}}
+      </a>
+    </li>
+  </ol>
+</nav>
+
+{% endmacro %}

docs/njk/components/button/_button.njk

@@ -0,0 +1,53 @@
+{% macro wmcadsButton(params) %}
+{# Imports #}
+{% from "components/icon/_icon.njk" import wmcadsIcon %}
+{% from "components/loader/_loader.njk" import wmcadsLoader %}
+{# Set #}
+{% set text = params.text if params.text else "Button text" %} {# set button text #}
+{% set iconRight = params.iconRight if params.iconRight %} {# set icon right classes #}
+{% set iconLeft = params.iconLeft if params.iconLeft %} {# set svg left reference #}
+{% set paramClass = " " + params.classNames if params.classNames %} {# set paramClass to params.classNames if any #}
+{# if button disabled is true #}
+{% if params.disabled %}
+  {% set classNames = paramClass + " wmcads-btn--disabled" %}
+{% else %}
+  {% set classNames = paramClass if paramClass %}
+{% endif %}
+
+<button class="wmcads-btn{{ classNames }}" {% if params.disabled %}disabled="disabled"{% endif %} {% if params.type %}type="{{params.type}}"{% endif %}>
+    {#- iconLeft -#}
+    {%- if iconLeft %}
+    {{
+      wmcadsIcon({
+        icon: iconLeft,
+        class: 'wmcads-btn__icon'
+      }) | indent | trim
+    }}
+    {{text}}
+
+    {#- iconRight -#}
+    {%- elseif iconRight %}
+    {{ text }}
+    {{
+      wmcadsIcon({
+        icon: iconRight,
+        class: 'wmcads-btn__icon wmcads-btn__icon--right'
+      }) | indent | trim
+    }}
+
+    {#- Loading spinner -#}
+    {%- elseif params.loading %}
+    {{ text -}}
+    {{
+      wmcadsLoader({
+        customClass: 'wmcads-btn__icon wmcads-btn__icon--right',
+        size: 'btn'
+      }) | indent | trim
+    }}
+
+    {#- noIcon -#}
+    {%- else %}
+    {{ text -}}
+    {% endif %}
+</button>
+{% endmacro %}

docs/njk/components/button/_example.njk

@@ -0,0 +1,13 @@
+{% filter trim %}
+{% raw %}
+{% from "components/button/_button.njk" import wmcadsButton %}
+
+{{
+   wmcadsButton({
+      classNames: "wmcads-btn--mode",
+      text: "Metro",
+      iconLeft: "modes-isolated-metro"
+    })
+}}
+{% endraw %}
+{% endfilter %}

docs/njk/components/content-card/_content-card.njk

@@ -0,0 +1,25 @@
+{% macro wmcadsContentCard(params) %}
+{# Set #}
+{% set variantModifier = " " + params.variant if params.variant else "" %}
+{% set yellowModifier = " wmcads-content-card--yellow" if params.yellow else "" %}
+{# 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>Where the adventure starts</h2>
+        <p>Whatever your plans this holiday, get there with our great range of family tickets and discount vouchers.</p>
+    </div>
+" %}
+
+{# 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{{variantModifier + yellowModifier}}">
+{%- if caller -%}
+    {{ caller() }}
+    {%- else -%}
+    {{ html | safe }}
+{%- endif -%}
+</{{tag}}>
+{% endmacro %}

docs/njk/components/content-tiles/advice-moving/advice-moving.njk

@@ -0,0 +1,52 @@
+{% macro wmcadsContentTileAdviceMoving(params) %}
+{%- from "components/button/_button.njk" import wmcadsButton as primary -%}
+
+<div class="wmcads-content-tile">
+  <h2 class="wmcads-content-tile__title">Advice to keep moving</h2>
+  <div class="wmcads-content-tile__buttons">
+
+    {{
+      primary({
+        classNames: "wmcads-btn--primary wmcads-content-tile__button",
+        text: "I drive",
+        iconRight: "general-chevron-right"
+      }) | trim | indent(4)
+    }}
+    {{
+      primary({
+        classNames: "wmcads-btn--primary wmcads-content-tile__button",
+        text: "I use the bus",
+        iconRight: "general-chevron-right"
+      }) | trim | indent(4)
+    }}
+    {{
+      primary({
+        classNames: "wmcads-btn--primary wmcads-content-tile__button",
+        text: "I use the train",
+        iconRight: "general-chevron-right"
+      }) | trim | indent(4)
+    }}
+    {{
+      primary({
+        classNames: "wmcads-btn--primary wmcads-content-tile__button",
+        text: "I use the tram",
+        iconRight: "general-chevron-right"
+      }) | trim | indent(4)
+    }}
+    {{
+      primary({
+        classNames: "wmcads-btn--primary wmcads-content-tile__button",
+        text: "I walk or cycle",
+        iconRight: "general-chevron-right"
+      }) | trim | indent(4)
+    }}
+    {{
+      primary({
+        classNames: "wmcads-btn--primary wmcads-content-tile__button",
+        text: "I want to visit an attraction or venue",
+        iconRight: "general-chevron-right"
+      }) | trim | indent(4)
+    }}
+  </div>
+</div>
+{% endmacro %}