feat: implement single barrier (resolves #361) (#370)

Author: chosww

src/_includes/layouts/barrier.njk

@@ -1,3 +1,46 @@
 {% extends "layouts/base.njk" %}
 
 {% set pageType = 'barrier' %}
+
+{% block banner %}
+<div class="banner bg-indigo-800">
+    <div class="wrapper">
+        <div class="banner__content flow">
+        	{% set breadcrumb = collections['pages_' + lang] | find('data.translationKey', 'barriers') %}
+            <a href="{{ breadcrumb.url }}" >{{ breadcrumb.data.shortTitle if breadcrumb.data.shortTitle else breadcrumb.data.title }} {% include 'svg/arrowRight.svg' %}</a>
+            <h1>{{ title }}</h1>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block content %}
+<nav aria-labelledby="barrier-menu" class="flow">
+    <inclusive-disclosure>
+        <button aria-controls="{{ title | slugify }}-menu">
+            <h2 id="barrier-menu">{% __ 'toc' %}</h2>
+        </button>
+        <div content id="{{ title | slugify }}-menu">
+            <ul role="list" class="flow">
+                <li class="flow" id="toc">
+                        <h3>{% __ 'toc' %}</h3>
+                    <ul role="list" class="flow"></ul>
+                </li>
+            </ul>
+        </div>
+    </inclusive-disclosure>
+</nav>
+<article class="flow">
+<h2>{% __ 'barriers-problem' %}</h2>
+{{ problem | renderContent('md') | safe }}
+{% if collections['strategies-and-tips_' + lang] | find('data.barriers', uuid) %}
+<h2>{%  __ 'barriers-fix' %}</h2>
+{% for strategy in collections['strategies-and-tips_' + lang] %}
+    {% if uuid in strategy.data.barriers %}
+        {% set strategyOrTip = strategy %}
+        {% include "partials/components/card--strategies-and-tips.njk" %}
+    {% endif %}
+{% endfor %}
+{% endif %}
+</article>
+{% endblock %}

src/_includes/partials/components/card--strategies-and-tips.njk

@@ -1,7 +1,7 @@
 <div class="card strategies-and-tips bg-indigo-700">
     <div class="card__content">
         <h3>
-            <a class="card__title" href="">
+            <a class="card__title" href="{{ strategyOrTip.url }}">
                 {{ strategyOrTip.data.title }}
             </a>
         </h3>

src/assets/styles/collections/_guidelines.css

@@ -1,35 +1,50 @@
 .guidelines .banner,
 .processes .banner,
+.barrier .banner,
 .barriers .banner {
     background-color: var(--fl-bgColor, var(--color-indigo-200));
     color: var(--fl-fgColor, var(--color-black));
 }
 
+.barrier nav,
+.barrier article,
 .guidelines nav,
 .guidelines article {
     box-shadow: inset 0 -0.1875rem 0 0 var(--fl-fgColor, transparent);
 }
 
+.barrier nav,
 .guidelines nav {
     background-color: var(--fl-bgColor, var(--color-indigo-100));
 }
 
+.barrier nav > h2,
 .guidelines nav > h2 {
     display: none;
 }
 
+.barrier inclusive-disclosure h3 {
+    font-size: var(--step-2);
+    font-weight: var(--font-weight-semibold);
+    margin-block-end: var(--flow-space, 1em);
+}
+
+.barrier nav inclusive-disclosure,
 .guidelines nav inclusive-disclosure {
     padding-inline: 0;
 }
 
+.barrier nav inclusive-disclosure > *,
 .guidelines nav inclusive-disclosure > * {
     padding-inline: var(--common-inline-padding);
 }
 
+.barrier nav inclusive-disclosure [aria-expanded],
 .guidelines nav inclusive-disclosure [aria-expanded] {
     box-shadow: none;
 }
 
+.barrier nav inclusive-disclosure [aria-expanded]::after,
 .guidelines nav inclusive-disclosure [aria-expanded]::after {
     right: var(--common-inline-padding);
 }
@@ -78,18 +93,22 @@
 }
 
 @media (width >= 70.875rem) {
+    .barrier nav > h2,
     .guidelines nav > h2 {
         display: block;
     }
 
+    .barrier nav inclusive-disclosure > *,
     .guidelines nav inclusive-disclosure > * {
         padding-inline: 0;
     }
 
+    .barrier nav inclusive-disclosure [aria-expanded],
     .guidelines nav inclusive-disclosure [aria-expanded] {
         display: none;
     }
 
+    .barrier nav inclusive-disclosure [aria-expanded] + *,
     .guidelines nav inclusive-disclosure [aria-expanded] + * {
         display: block;
     }
@@ -101,15 +120,18 @@
     }
 }
 
+.barrier article,
 .guidelines article {
     padding-block: 2.125rem 5rem;
     padding-inline: var(--common-inline-padding);
 }
 
+.barrier article > *,
 .guidelines article > * {
     max-width: 41.875rem;
 }
 
+.barrier article > h2,
 .guidelines article > h2 {
     max-width: 100%;
 }
@@ -153,6 +175,7 @@
 }
 
 @media (width >= 70.875rem) {
+    .barrier .content,
     .guidelines .content {
         display: grid;
         grid-template-columns: 35% 65%;
@@ -161,11 +184,14 @@
         width: 100%;
     }
 
+    .barrier nav,
+    .barrier article,
     .guidelines nav,
     .guidelines article {
         padding-block: 8.4375rem;
     }
 
+    .barrier nav,
     .guidelines nav {
         padding-inline: 8.4375rem 5rem;
         position: relative;
@@ -183,6 +209,7 @@
         }
     }
 
+    .barrier article,
     .guidelines article {
         padding-inline: 8.4375rem;
     }