feat: add image atom, blur images with missing alt tags (#281)

Resolves #230.

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));
+}

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";

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
+			}
+		}
+	]
+};

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 '' }} />

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',
+				}
 			}
 		},
 		{

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>