feat: add subscription indicator to resources (resolves #268) (#289)

platform-coop-toolkit · Mar 25, 2020 · f39f099 · f39f099
1 parent 15cbd9c
commit f39f099
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -28,7 +28,8 @@ module.exports = {
 				href: 'resource',
 				favorite: true,
 				language: 'English',
-				showRemoveButton: false
+				showRemoveButton: false,
+				requiresSubscription: true
 			}
 		},
 		{