feat: indicate when a subscription is required (resolves #218) (#223)

* feat: indicate when a subscription is required (resolves #218) * fix: add screen reader text * fix: use aria-hidden
platform-coop-toolkit · Mar 12, 2020 · bb8315f · bb8315f
1 parent 4d3c100
commit bb8315f
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 1 deletion.
diff --git a/app/Controllers/Partials/Resource.php b/app/Controllers/Partials/Resource.php
@@ -330,4 +330,15 @@ public static function isFavorited()
         }
         return false;
     }
+
+    public static function requiresSubscription()
+    {
+        global $post;
+
+        if ($post->post_type == 'lc_resource') {
+            return (get_post_meta($post->ID, 'lc_resource_has_paywall', true) === 'on');
+        }
+
+        return false;
+    }
 }
diff --git a/resources/assets/images/lock.svg b/resources/assets/images/lock.svg
diff --git a/resources/assets/styles/layouts/_resources.scss b/resources/assets/styles/layouts/_resources.scss
@@ -32,3 +32,12 @@
   list-style: none;
   padding-left: 0;
 }
+
+.card__meta.card__subscription,
+.resource__meta.resource__subscription {
+  color: var(--red-500);
+
+  svg {
+    color: inherit;
+  }
+}
diff --git a/resources/views/partials/content-lc_resource.blade.php b/resources/views/partials/content-lc_resource.blade.php
@@ -1,6 +1,9 @@
 <article @php post_class('card card--resource') @endphp>
   <header>
     <h3 class="card__title"><a class="card__link" href="{{ get_permalink() }}">{!! Archive::getShortTitle() !!}</a></h3>
+    @if(Archive::requiresSubscription())
+    <p class="card__meta card__subscription">@svg('lock', 'icon--lock', ['focusable' => 'false', 'aria-hidden' => 'true']) <span aria-hidden="true">{{ __('Subscription required', 'coop-library') }}</span><span class="screen-reader-text">{{ __('Subscription required to access this resource', 'coop-library') }}</span></p>
+    @endif
     @if(Archive::getAuthors())
     <p class="card__byline">
       @svg('author', 'icon--author', ['focusable' => 'false', 'aria-hidden' => 'true'])

diff --git a/resources/views/partials/content-single-lc_resource.blade.php b/resources/views/partials/content-single-lc_resource.blade.php
@@ -1,6 +1,9 @@
 <article @php post_class() @endphp>
   <div class="page-header resource__header">
     <h1 class="resource__title">{!! get_the_title() !!}</h1>
+    @if(Single::requiresSubscription())
+    <p class="resource__meta resource__subscription">@svg('lock', 'icon--lock', ['focusable' => 'false', 'aria-hidden' => 'true']) <span aria-hidden="true">{{ __('Subscription required', 'coop-library') }}</span><span class="screen-reader-text">{{ __('Subscription required to access this resource', 'coop-library') }}</span></p>
+    @endif
     @if(Single::getAuthors())
     <div class="resource__meta resource__byline">@svg('author', 'icon--author', ['focusable' => 'false', 'aria-hidden' => 'true']) {{ sprintf(__('By %s', 'coop-library'), Single::getAuthors()) }}</div>
     @endif
@@ -20,6 +23,8 @@
         @svg('info', 'icon--info', ['focusable' => 'false', 'aria-hidden' => 'true'])
         @if($current_language !== Single::getLanguage())
         <span class="resource__language"><span class="screen-reader-text">{{ __('language', 'coop-library') }}: </span>{{ $languages[Single::getLanguage()] }}</span>
+        @endif
+        @if($current_language !== Single::getLanguage() && Single::getPublicationDate())
         <span class="separator">.</span>
         @endif
         @if(Single::getPublicationDate())
@@ -47,7 +52,7 @@
   </div>
   @endif
   <div class="resource__cta">
-    <p><a rel="external" class="cta" href="{{ Single::getPermanentLink() }}">{{ __('Visit full resource', 'coop-library') }} @svg('external', 'icon--external', ['focusable' => 'false', 'aria-hidden' => 'true'])</a></p>
+    <p><a rel="external" class="cta" href="{{ Single::getPermanentLink() }}">@if(Single::requiresSubscription()){{ __('Visit full resource (subscription required)', 'coop-library') }}@else{{ __('Visit full resource', 'coop-library') }}@endif @svg('external', 'icon--external', ['focusable' => 'false', 'aria-hidden' => 'true'])</a></p>
   </div>
   <div class="resource__actions">
     <button id="favorite" type="button" class="button button--borderless" data-id="{{ get_the_id() }}" data-favorite="false">