From 2e89f54ac72111bc862ec0ea8c23afd723bbc36d Mon Sep 17 00:00:00 2001
From: Ned Zimmerman <ned@bight.ca>
Date: Thu, 26 Mar 2020 12:31:42 -0600
Subject: [PATCH] feat: add image atom, blur images with missing alt tags
 (#281)

Resolves #230.
---
 src/assets/styles/components/_image.scss     | 11 ++++++++
 src/assets/styles/pinecone.scss              |  1 +
 src/components/atoms/image/image.config.js   | 27 ++++++++++++++++++++
 src/components/atoms/image/image.njk         | 10 ++++++++
 src/components/molecules/card/card.config.js | 21 ++++++++++++---
 src/components/molecules/card/card.njk       |  2 +-
 6 files changed, 68 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/styles/components/_image.scss
 create mode 100644 src/components/atoms/image/image.config.js
 create mode 100644 src/components/atoms/image/image.njk

diff --git a/src/assets/styles/components/_image.scss b/src/assets/styles/components/_image.scss
new file mode 100644
index 00000000..ac2df6bc
--- /dev/null
+++ b/src/assets/styles/components/_image.scss
@@ -0,0 +1,11 @@
+img {
+	border-style: none;
+	display: block;
+	height: auto;
+	max-width: 100%;
+	vertical-align: middle;
+}
+
+img:not([alt]) {
+	filter: blur(rem(10));
+}
diff --git a/src/assets/styles/pinecone.scss b/src/assets/styles/pinecone.scss
index f78eca99..3617443f 100644
--- a/src/assets/styles/pinecone.scss
+++ b/src/assets/styles/pinecone.scss
@@ -17,6 +17,7 @@
 @import "components/divider";
 @import "components/button";
 @import "components/icons";
+@import "components/image";
 @import "components/input";
 @import "components/link";
 @import "components/link-list";
diff --git a/src/components/atoms/image/image.config.js b/src/components/atoms/image/image.config.js
new file mode 100644
index 00000000..08bf14b9
--- /dev/null
+++ b/src/components/atoms/image/image.config.js
@@ -0,0 +1,27 @@
+module.exports = {
+	title: 'Image',
+	status: 'wip',
+	order: 11,
+	context: {
+		src: '/images/person.jpg',
+		width: 367,
+		height: 250,
+		alt: 'Photograph of Trebor Scholz',
+		role: false
+	},
+	variants: [
+		{
+			name: 'Decorative',
+			context: {
+				alt: '',
+				role: 'presentation'
+			}
+		},
+		{
+			name: 'Missing Alternative Text',
+			context: {
+				alt: false
+			}
+		}
+	]
+};
diff --git a/src/components/atoms/image/image.njk b/src/components/atoms/image/image.njk
new file mode 100644
index 00000000..34474435
--- /dev/null
+++ b/src/components/atoms/image/image.njk
@@ -0,0 +1,10 @@
+{% set altAttribute = false %}
+{% if alt !== false %}
+	{% set altAttribute = 'alt="' + alt + '"' %}
+{% endif %}
+{% set roleAttribute = false %}
+{% if role !== false %}
+	{% set roleAttribute = 'role="' + role + '"' %}
+{% endif %}
+
+<img {{ roleAttribute | safe if roleAttribute else '' }} src="{{ src }}" width="{{ width }}" height="{{ height }}" {{ altAttribute | safe if altAttribute else '' }} />
diff --git a/src/components/molecules/card/card.config.js b/src/components/molecules/card/card.config.js
index dc0523bf..f9504f88 100644
--- a/src/components/molecules/card/card.config.js
+++ b/src/components/molecules/card/card.config.js
@@ -79,7 +79,12 @@ module.exports = {
 				title: 'Who Owns the World?',
 				date: 'Nov 12, 2019',
 				href: 'blog',
-				image: '/images/blog.jpg'
+				image: {
+					src: '/images/blog.jpg',
+					width: 367,
+					height: 165,
+					alt: 'Photograph of Cataki workers'
+				}
 			}
 		},
 		{
@@ -92,7 +97,12 @@ module.exports = {
 				title: 'SEWA Federation',
 				locality: 'Gujarat, India',
 				href: 'story',
-				image: '/images/story.jpg'
+				image: {
+					src: '/images/story.jpg',
+					width: 367,
+					height: 165,
+					alt: 'Photograph of SEWA workers'
+				}
 			}
 		},
 		{
@@ -104,7 +114,12 @@ module.exports = {
 				title: 'Trebor Scholz',
 				description: 'Founding Director, Institute for the Cooperative Digital Economy',
 				href: 'person',
-				image: '/images/person.jpg'
+				image: {
+					src: '/images/person.jpg',
+					width: '',
+					height: '',
+					alt: 'Photograph of Trebor Scholz',
+				}
 			}
 		},
 		{
diff --git a/src/components/molecules/card/card.njk b/src/components/molecules/card/card.njk
index 497c072e..c261e10a 100644
--- a/src/components/molecules/card/card.njk
+++ b/src/components/molecules/card/card.njk
@@ -5,7 +5,7 @@
 		<article class="card{% if modifier %} card--{{ modifier }}{% endif %}">
 			{% if image %}
 			<figure class="card__image">
-				<img src="{{ image }}" alt="Image for this {{ modifier }}."/>
+				{% render '@image', image, true %}
 			</figure>
 			{% endif %}
 			<header>