new: divider style (#135)

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

src/wmcads/components/_components.scss

@@ -6,6 +6,7 @@
 @import "content-card/content-card"; // content cards
 @import "content-tiles/content-tiles"; // Content tiles for major works pages
 @import "details/details"; // details
+@import "divider/divider"; // divider
 @import "document/document"; // document
 @import "file-download/file-download"; // File download
 @import "form-elements/form-elements"; // Form elements

src/wmcads/components/divider/_divider.njk

@@ -0,0 +1,6 @@
+{% macro wmcadsDivider(params) %} 
+{% set class = " " + params.class if params.class else "wmcads-divider-primary" %}
+
+<hr{% if(params.class) %} class="wmcads-divider-{{params.class}}"{% endif %} aria-hidden="true">
+
+{% endmacro %}

src/wmcads/components/divider/_divider.scss

@@ -0,0 +1,29 @@
+hr,
+.wmcads-divider {
+  border: 3px solid get-color(primary);
+
+  &-primary {
+    border-color: get-color(primary);
+  }
+
+  &-grey {
+    border-color: get-color(brandCoolGrey);
+  }
+
+  &-wmgreen {
+    border-color: get-color(brandWmGreen);
+  }
+
+  &-wmred {
+    border-color: get-color(brandWmRed);
+  }
+
+  &-wmpurple {
+    border-color: get-color(brandWmPurple);
+  }
+
+  &-wmblue {
+    border-color: get-color(brandWmBlue);
+  }
+
+}

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

@@ -44,12 +44,15 @@
 				{
 					"name": "Content card"
 				},
-				{
-					"name": "Document"
-				},				
 				{
 					"name": "Details"
 				},
+				{
+					"name": "Document"
+				},
+				{
+					"name": "Divider"
+				},				
 				{
 					"name": "File download"
 				},

src/www/pages/components/divider/index.njk

@@ -0,0 +1,67 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Divider" %}
+{% from "wmcads/components/divider/_divider.njk" import wmcadsDivider %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+<h2>Default divider</h2>
+{{
+  compExample([
+    wmcadsDivider()
+  ])
+}}
+
+<h2>Primary divider</h2>
+{{
+  compExample([
+    wmcadsDivider({
+      class: 'primary'
+    })
+  ])
+}}
+
+<h2>Cool Grey divider</h2>
+{{
+  compExample([
+    wmcadsDivider({
+      class: 'grey'
+    })
+  ])
+}}
+
+<h2>WM Green divider</h2>
+{{
+  compExample([
+    wmcadsDivider({
+      class: 'wmgreen'
+    })
+  ])
+}}
+
+<h2>WM Red divider</h2>
+{{
+  compExample([
+    wmcadsDivider({
+      class: 'wmred'
+    })
+  ])
+}}
+
+<h2>WM Purple divider</h2>
+{{
+  compExample([
+    wmcadsDivider({
+      class: 'wmpurple'
+    })
+  ])
+}}
+
+<h2>WM Blue divider</h2>
+{{
+  compExample([
+    wmcadsDivider({
+      class: 'wmblue'
+    })
+  ])
+}}
+{% endblock %}