From f366c9c4c045fef1f1bba8c627e089fd30bd1374 Mon Sep 17 00:00:00 2001
From: Ned Zimmerman <ned@bight.dev>
Date: Wed, 25 Mar 2020 14:34:50 -0600
Subject: [PATCH] feat: add subscription indicator to resources (resolves #268)

---
 src/assets/styles/components/_card.scss                   | 8 ++++++++
 src/assets/styles/layouts/_resource.scss                  | 8 ++++++++
 src/components/layouts/archive/archive.config.js          | 1 +
 src/components/layouts/favorites/favorites.config.js      | 3 ++-
 src/components/layouts/resource/resource.config.js        | 3 ++-
 src/components/layouts/resource/resource.njk              | 3 +++
 .../layouts/search-results/search-results.config.js       | 1 +
 src/components/molecules/card/card--resource.njk          | 3 +++
 src/components/molecules/card/card.config.js              | 3 ++-
 9 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/assets/styles/components/_card.scss b/src/assets/styles/components/_card.scss
index 11d24b4b..51c6b6a1 100644
--- a/src/assets/styles/components/_card.scss
+++ b/src/assets/styles/components/_card.scss
@@ -181,6 +181,14 @@
 	}
 }
 
+.card__meta.card__subscription {
+	color: var(--red-500);
+
+	svg {
+		color: inherit;
+	}
+}
+
 .card--resource {
 	@include card($red-400, var(--dark-mint-500), false);
 
diff --git a/src/assets/styles/layouts/_resource.scss b/src/assets/styles/layouts/_resource.scss
index e7341074..10431cc2 100644
--- a/src/assets/styles/layouts/_resource.scss
+++ b/src/assets/styles/layouts/_resource.scss
@@ -10,6 +10,14 @@
 	color: var(--grey-500);
 }
 
+.resource__meta.resource__subscription {
+	color: var(--red-500);
+
+	svg {
+		color: inherit;
+	}
+}
+
 h1 + .resource__meta {
 	margin-top: rem(24);
 }
diff --git a/src/components/layouts/archive/archive.config.js b/src/components/layouts/archive/archive.config.js
index 530a19f3..b0b42577 100644
--- a/src/components/layouts/archive/archive.config.js
+++ b/src/components/layouts/archive/archive.config.js
@@ -79,6 +79,7 @@ for ( let i = 0; i < resourceCount; i++ ) {
 		topicCount: faker.random.number( { min: 3, max: 7 } ),
 		href: 'resource',
 		standAlone: true,
+		requiresSubscription: i % 2 ? true : false
 	} );
 }
 
diff --git a/src/components/layouts/favorites/favorites.config.js b/src/components/layouts/favorites/favorites.config.js
index cab6dca6..a63ab34f 100644
--- a/src/components/layouts/favorites/favorites.config.js
+++ b/src/components/layouts/favorites/favorites.config.js
@@ -67,7 +67,8 @@ for ( let i = 0; i < resourceCount; i++ ) {
 		topicCount: faker.random.number( { min: 3, max: 7 } ),
 		href: 'resource',
 		standAlone: true,
-		showRemoveButton: true
+		showRemoveButton: true,
+		requiresSubscription: i % 2 ? true : false
 	} );
 }
 
diff --git a/src/components/layouts/resource/resource.config.js b/src/components/layouts/resource/resource.config.js
index 2cd0a3b3..8132ef21 100644
--- a/src/components/layouts/resource/resource.config.js
+++ b/src/components/layouts/resource/resource.config.js
@@ -14,6 +14,7 @@ module.exports = {
 		locality: 'Canada',
 		language: 'English',
 		date: 2019,
-		byline: 'Some Co-operator'
+		byline: 'Some Co-operator',
+		requiresSubscription: true
 	}
 };
diff --git a/src/components/layouts/resource/resource.njk b/src/components/layouts/resource/resource.njk
index 99042fdf..601190d3 100644
--- a/src/components/layouts/resource/resource.njk
+++ b/src/components/layouts/resource/resource.njk
@@ -1,6 +1,9 @@
 <article class="resource">
 	<div class="page-header resource__header">
 		<h1>{{ title }}</h1>
+		{% if requiresSubscription %}
+		<p class="resource__meta resource__subscription">{% render '@svg', {svg:'lock'}, true %} <span aria-hidden="true">Subscription required</span><span class="screen-reader-text">Subscription required to access this resource</span></p>
+		{% endif %}
 		{% if byline %}
 		<div class="resource__meta resource__byline">{% render '@svg', {svg:'author'}, true %} By {{ byline | safe }}</div>
 		{% endif %}
diff --git a/src/components/layouts/search-results/search-results.config.js b/src/components/layouts/search-results/search-results.config.js
index 0efc9773..48d08e2d 100644
--- a/src/components/layouts/search-results/search-results.config.js
+++ b/src/components/layouts/search-results/search-results.config.js
@@ -79,6 +79,7 @@ for ( let i = 0; i < resourceCount; i++ ) {
 		topicCount: faker.random.number( { min: 3, max: 7 } ),
 		href: 'resource',
 		standAlone: true,
+		requiresSubscription: i % 2 ? true : false
 	} );
 }
 
diff --git a/src/components/molecules/card/card--resource.njk b/src/components/molecules/card/card--resource.njk
index 353e1a33..7098edf1 100644
--- a/src/components/molecules/card/card--resource.njk
+++ b/src/components/molecules/card/card--resource.njk
@@ -7,6 +7,9 @@
 				<h3 class="card__title" >
 					<a class="card__link" href="{{ href }}">{{ title | safe }}</a>
 				</h3>
+				{% if requiresSubscription %}
+				<p class="card__meta card__subscription">{% render '@svg', {svg:'lock'}, true %} <span aria-hidden="true">Subscription required</span><span class="screen-reader-text">Subscription required to access this resource</span></p>
+				{% endif %}
 				{% if byline %}
 					<p class="card__byline">{% render '@svg', {svg:'author'}, true %} By {{ byline | safe }}</p>
 				{% endif %}
diff --git a/src/components/molecules/card/card.config.js b/src/components/molecules/card/card.config.js
index 9375e697..dc0523bf 100644
--- a/src/components/molecules/card/card.config.js
+++ b/src/components/molecules/card/card.config.js
@@ -28,7 +28,8 @@ module.exports = {
 				href: 'resource',
 				favorite: true,
 				language: 'English',
-				showRemoveButton: false
+				showRemoveButton: false,
+				requiresSubscription: true
 			}
 		},
 		{