From 8a137529e207044cdfe2c367f567a00ffe0c2791 Mon Sep 17 00:00:00 2001
From: Nathan Rogan <nathan.rogan@wmca.org.uk>
Date: Thu, 29 Apr 2021 15:39:01 +0100
Subject: [PATCH] new: divider style

---
 src/wmcads/components/_components.scss      |  1 +
 src/wmcads/components/divider/_divider.njk  |  6 ++
 src/wmcads/components/divider/_divider.scss | 29 +++++++++
 src/www/assets/json/merged.njk.json         |  9 ++-
 src/www/pages/components/divider/index.njk  | 67 +++++++++++++++++++++
 5 files changed, 109 insertions(+), 3 deletions(-)
 create mode 100644 src/wmcads/components/divider/_divider.njk
 create mode 100644 src/wmcads/components/divider/_divider.scss
 create mode 100644 src/www/pages/components/divider/index.njk

diff --git a/src/wmcads/components/_components.scss b/src/wmcads/components/_components.scss
index 0d193363..cc1ef689 100755
--- a/src/wmcads/components/_components.scss
+++ b/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
diff --git a/src/wmcads/components/divider/_divider.njk b/src/wmcads/components/divider/_divider.njk
new file mode 100644
index 00000000..29e57d96
--- /dev/null
+++ b/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 %}
\ No newline at end of file
diff --git a/src/wmcads/components/divider/_divider.scss b/src/wmcads/components/divider/_divider.scss
new file mode 100644
index 00000000..9a72af1e
--- /dev/null
+++ b/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);
+  }
+
+}
diff --git a/src/www/assets/json/merged.njk.json b/src/www/assets/json/merged.njk.json
index a3bd5e7e..bacffa2c 100755
--- a/src/www/assets/json/merged.njk.json
+++ b/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"
 				},
diff --git a/src/www/pages/components/divider/index.njk b/src/www/pages/components/divider/index.njk
new file mode 100644
index 00000000..b12d0e69
--- /dev/null
+++ b/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 %}
\ No newline at end of file