Added Nunjucks macros for colorBlock, colorCard

colorBlock shows a block of color for display in playbook
colorCard shows a shows a block of color alongside various color properties such as Hex, RGB, CMYK
Uses colorConvert dependency
Fixes minor SonarQube issues

Author: yantantether

.eleventy.js

@@ -29,7 +29,7 @@ module.exports = function (eleventyConfig) {
   });
   eleventyConfig.addPlugin(require('eleventy-plugin-external-links'), {
     name: 'external-links',
-    regex: /^((http[s]?:)|(\/\/))/i, // Regex that test if href is external
+    regex: /^((https?:)|(\/\/))/i, // Regex that test if href is external
     target: '_blank',
     rel: 'noopener',
     extensions: ['.html'],
@@ -38,6 +38,10 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(require('eleventy-auto-cache-buster'));
 
   // filters
+  eleventyConfig.addFilter(
+    'convertColor',
+    require('./lib/_filters/convertColor'),
+  );
   eleventyConfig.addFilter('date', require('./lib/_filters/date'));
   eleventyConfig.addFilter('fixed', require('./lib/_filters/fixed'));
   eleventyConfig.addFilter('markdown', require('./lib/_filters/markdown'));

lib/_components/_all.scss

@@ -2,4 +2,6 @@
 @import "appCard/card";
 @import "appFooter/footer";
 @import "appPagination/pagination";
-@import "related/related";
+@import "related/related";
+@import "colorBlock/colorBlock";
+@import "colorCard/colorCard";

lib/_components/colorBlock/_colorBlock.scss

@@ -0,0 +1,27 @@
+.colorblock {
+  display: inline-block;
+  border: 1px solid black;
+}
+  
+// mixin used here for creating size variations
+@mixin colorblock-size($size) {
+  width: $size;
+  height: $size;
+  max-width: $size;
+  max-height: $size;
+}
+
+$sizes: (
+  'xs': 10px,
+  's': 20px,
+  'm': 50px,
+  'l': 100px,
+  'xl': 200px
+);
+  
+@each $key, $size in $sizes {
+  .colorblock_#{$key} {
+    @extend .colorblock;
+    @include colorblock-size($size);
+  }
+}

lib/_components/colorBlock/macro.njk

@@ -0,0 +1,3 @@
+{% macro colorBlock(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

lib/_components/colorBlock/template.njk

@@ -0,0 +1 @@
+<span style="background-color: {{params.color}}" class="colorblock colorblock_{{params.blockSize if params.blockSize else 'm'}}"></span>

lib/_components/colorCard/_colorCard.scss

@@ -0,0 +1,27 @@
+.colorCard > dl {
+    padding: 0;
+    margin: 0;
+}
+.colorCard > dl > dd {
+    padding: 0;
+    margin-left: 100px;
+}
+@media (max-width: 640px) {
+    .colorCard > dl > dd {
+        padding: 0;
+        margin: 0;
+    }
+}
+@media (min-width: 641px) {
+    .colorCard > dl > dt {
+        padding: 0;
+        margin: 0 10px 0 0;
+        width: 100px;
+    }
+}
+@media (max-width: 640px) {
+    .colorCard > dl > dt {
+        padding: 0;
+        margin: 0 10px 0 0;
+    }
+}

lib/_components/colorCard/macro.njk

@@ -0,0 +1,3 @@
+{% macro colorCard(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

lib/_components/colorCard/template.njk

@@ -0,0 +1,28 @@
+{% from "colorBlock/macro.njk" import colorBlock %}
+{% set headingLevel %}
+{{ params.headingLevel if params.headingLevel else 'h2' }}
+{% endset %}
+<div class="card colorCard">
+	{% if params.heading %}
+	<{{headingLevel}} class="nhsuk-card__heading nhsuk-heading-m">
+	{{ params.heading }}
+	</{{headingLevel}}>
+	{% endif %}
+	<div>{{ colorBlock(params) }}</div>
+	<dl>
+		<dt>Hex</dt>
+		<dd>{{params.color}}</dd>
+		<dt>RGB</dt>
+		<dd>{{params.color | convertColor('RGB') }}</dd>
+		<dt>CMYK</dt>
+		<dd>{{params.color | convertColor('CMYK') }}</dd>
+		{% if params.pantone %}
+		<dt>Pantone</dt>
+		<dd>{{params.pantone}}</dd>
+		{% endif %}
+		{% if params.ral %}
+		<dt>RAL</dt>
+		<dd>{{params.ral}}</dd>
+		{% endif %}
+	</dl>
+</div>

lib/_filters/convertColor.js

@@ -0,0 +1,24 @@
+let convert = require('color-convert');
+
+function hexToRgb(hex) {
+  return convert.hex.rgb(hex);
+}
+function hexToCmyk(hex) {
+  return convert.hex.cmyk(hex);
+}
+function stringify(values) {
+  return values ? values.join(',') : values;
+}
+let convertColor = (value, format) => {
+  if (value) {
+    if ('CMYK' === format) {
+      return stringify(hexToCmyk(value));
+    }
+    if ('RGB' === format) {
+      return stringify(hexToRgb(value));
+    }
+  }
+  return value;
+};
+
+module.exports = convertColor;

lib/tests/filters/convertColor.test.js

@@ -0,0 +1,30 @@
+const convertColor = require('../../_filters/convertColor');
+
+describe('blank', () => {
+  test('should export module as a function', () => {
+    expect(typeof convertColor).toBe('function');
+  });
+
+  test.each([
+    { value: '#000000', format: 'RGB', expected: '0,0,0' },
+    { value: '#FFFFFF', format: 'RGB', expected: '255,255,255' },
+    { value: '#FF0000', format: 'RGB', expected: '255,0,0' },
+    { value: '#00FF00', format: 'RGB', expected: '0,255,0' },
+    { value: '#0000FF', format: 'RGB', expected: '0,0,255' },
+  ])('should return RGB when input is: %s', ({ value, format, expected }) => {
+    expect(convertColor(value, format)).toBe(expected);
+  });
+
+  test.each([
+    { value: '#000000', format: 'CMYK', expected: '0,0,0,100' },
+    { value: '#FFFFFF', format: 'CMYK', expected: '0,0,0,0' },
+    { value: '#FF0000', format: 'CMYK', expected: '0,100,100,0' },
+    { value: '#00FF00', format: 'CMYK', expected: '100,0,100,0' },
+    { value: '#0000FF', format: 'CMYK', expected: '100,100,0,0' },
+    { value: '#00FFFF', format: 'CMYK', expected: '100,0,0,0' },
+    { value: '#FF00FF', format: 'CMYK', expected: '0,100,0,0' },
+    { value: '#FFFF00', format: 'CMYK', expected: '0,0,100,0' },
+  ])('should return CMYK when input is: %s', ({ value, format, expected }) => {
+    expect(convertColor(value, format)).toBe(expected);
+  });
+});