From 557d0d9e12a87af92d5ccc6bdc678439edb1205b Mon Sep 17 00:00:00 2001
From: BlueSlug <mossmonkey@gmail.com>
Date: Thu, 23 Jun 2022 18:28:57 -0400
Subject: [PATCH] feat: improve audio-tactile card page styling

---
 src/_includes/layouts/audio-tactile-cards.njk |  2 +
 src/_includes/layouts/sections.njk            |  5 +-
 .../partials/components/sections-control.njk  |  4 +
 src/assets/styles/abstracts/_variables.scss   |  4 +
 .../components/_audio-tactile-card.scss       | 44 ++++++++++
 .../components/_audio-tactile-section.scss    | 24 ++++++
 .../components/_audio-tactile-subsection.scss | 85 +++++++++++++++++++
 src/assets/styles/components/_components.scss |  4 +
 .../styles/components/_sections-control.scss  | 36 ++++++++
 src/assets/styles/pages/_audio-tactile.scss   | 64 +++++++-------
 src/assets/styles/pages/_sections.scss        | 37 --------
 11 files changed, 235 insertions(+), 74 deletions(-)
 create mode 100644 src/_includes/partials/components/sections-control.njk
 create mode 100644 src/assets/styles/components/_audio-tactile-card.scss
 create mode 100644 src/assets/styles/components/_audio-tactile-section.scss
 create mode 100644 src/assets/styles/components/_audio-tactile-subsection.scss
 create mode 100644 src/assets/styles/components/_sections-control.scss

diff --git a/src/_includes/layouts/audio-tactile-cards.njk b/src/_includes/layouts/audio-tactile-cards.njk
index be61d97d..da47a8f2 100644
--- a/src/_includes/layouts/audio-tactile-cards.njk
+++ b/src/_includes/layouts/audio-tactile-cards.njk
@@ -15,6 +15,8 @@
             {{ content | safe }}
         {% endblock %}
 
+        {%- include "partials/components/sections-control.njk" -%}
+
         <ul class="audio-tactile__sections">
         {%- for section in collections.cards | eleventyNavigation("Audio Tactile Design Recommendations") -%}
             {%- include "partials/components/audio-tactile-section.njk" -%}
diff --git a/src/_includes/layouts/sections.njk b/src/_includes/layouts/sections.njk
index ec083f23..ea7b4557 100644
--- a/src/_includes/layouts/sections.njk
+++ b/src/_includes/layouts/sections.njk
@@ -5,10 +5,7 @@
         {{ content | safe }}
     </div>
 
-    <div class="sections-control">
-        <button class="sections-control__expand-all">{{ translations[lang].expandAll }}</button>
-        <button class="sections-control__collapse-all">{{ translations[lang].collapseAll }}</button>
-    </div>
+    {%- include "partials/components/sections-control.njk" -%}
 
     {% set sections = collections.all | eleventyNavigation(eleventyNavigation.key) %}
 
diff --git a/src/_includes/partials/components/sections-control.njk b/src/_includes/partials/components/sections-control.njk
new file mode 100644
index 00000000..67b93a81
--- /dev/null
+++ b/src/_includes/partials/components/sections-control.njk
@@ -0,0 +1,4 @@
+<div class="sections-control">
+    <button class="sections-control__expand-all">{{ translations[lang].expandAll }}</button>
+    <button class="sections-control__collapse-all">{{ translations[lang].collapseAll }}</button>
+</div>
diff --git a/src/assets/styles/abstracts/_variables.scss b/src/assets/styles/abstracts/_variables.scss
index 80952104..f729edf2 100644
--- a/src/assets/styles/abstracts/_variables.scss
+++ b/src/assets/styles/abstracts/_variables.scss
@@ -9,6 +9,8 @@ $font-weight-bold: 700;
 /** Colors **/
 $darkRed: var(--fl-fgColor, #8d2a2d); // this colour has several uses
 $darkGrey: var(--fl-bgColor, #e5eaeb);
+$darkTeal: var(--fl-fgColor, #134d5f);
+$teal: var(--fl-fgColor, #1e97bd);
 
 $mainColour: var(--fl-fgColor, #000);
 $linkColour: var(--fl-linkColor, #0645ad);
@@ -31,6 +33,8 @@ $menuExpandedSelectedBGColour: $darkRed;
 $menuButtonStrokeColour: $darkRed;
 $sectionBGColour: var(--fl-bgColor, #fff);
 $sectionBorderColour: $darkRed;
+$sectionBorderColourAltOne: $darkTeal;
+$sectionBorderColourAltTwo: $teal;
 $articleContentsBorderColour: var(--fl-bgColor, #bedee4);
 $articleContentsIconColour: var(--fl-fgColor, #12699a);
 $toolkitsBorderColour: var(--fl-bgColor, #0b719e);
diff --git a/src/assets/styles/components/_audio-tactile-card.scss b/src/assets/styles/components/_audio-tactile-card.scss
new file mode 100644
index 00000000..835f87e3
--- /dev/null
+++ b/src/assets/styles/components/_audio-tactile-card.scss
@@ -0,0 +1,44 @@
+.audio-tactile {
+    .card__content {
+        display: none;
+    }
+
+    .card__content--show .card__content {
+        display: block;
+    }
+
+    .card__toggle {
+        background: $sectionBGColour;
+        border: solid $darkRed 2px;
+        display: block;
+        padding: 0;
+        width: 100%;
+    }
+
+    .card__title {
+        background-color: var(--fl-buttonFgColor, $sectionBorderColour);
+        color: $sectionBGColour;
+        margin: 0;
+        width: 100%;
+    }
+
+    .card__icon {
+        align-items: center;
+        display: block;
+        min-width: 3.75rem;
+
+        svg {
+            --icon-arrowColour: #{$darkRed};
+
+            color: var(--fl-bgColor, $mainColour);
+            fill: none;
+            height: 2rem;
+            transform: rotate(90deg);
+            width: 1.75rem;
+        }
+    }
+
+    .card__toggle--expanded .card__icon svg {
+        transform: rotate(-90deg);
+    }
+}
diff --git a/src/assets/styles/components/_audio-tactile-section.scss b/src/assets/styles/components/_audio-tactile-section.scss
new file mode 100644
index 00000000..6bc7ad61
--- /dev/null
+++ b/src/assets/styles/components/_audio-tactile-section.scss
@@ -0,0 +1,24 @@
+.audio-tactile {
+    .section__subsections {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .section:not(:last-child) {
+        margin-block-end: 3rem;
+    }
+
+    .section__toggle {
+        margin-block-end: 0;
+    }
+
+    .section__content {
+        background: $sectionBGColour;
+        padding: 1rem;
+    }
+
+    .section__description {
+        padding: 1rem 2.75rem;
+    }
+}
diff --git a/src/assets/styles/components/_audio-tactile-subsection.scss b/src/assets/styles/components/_audio-tactile-subsection.scss
new file mode 100644
index 00000000..30436c95
--- /dev/null
+++ b/src/assets/styles/components/_audio-tactile-subsection.scss
@@ -0,0 +1,85 @@
+.audio-tactile {
+    .subsection__heading {
+        line-height: calc(var(--fl-lineSpace-factor, 1) * 0.8);
+        margin: 0;
+    }
+
+    .subsection__toggle {
+        align-items: stretch;
+        background-color: var(--fl-buttonBgColor, $sectionBGColour);
+        border: none;
+        color: var(--fl-buttonFgColor, $mainColour);
+        cursor: pointer;
+        display: flex;
+        font-size: var(--fl-enhance-font-size, 1.8125rem);
+        font-weight: var(--fl-enhance-font-weight, 700);
+        justify-content: space-between;
+        line-height: calc(var(--fl-lineSpace-factor, 1) * 1.45);
+        margin-block-end: 1.25rem;
+        padding: 0;
+        width: 100%;
+
+        &:focus,
+        &:hover {
+            outline-color: var(--fl-buttonFgColor);
+        }
+
+        &--expanded .subsection__title,
+        &:focus .subsection__title,
+        &:hover .subsection__title {
+            border: 0.35rem solid var(--fl-buttonFgColor, $sectionBorderColour);
+            border-inline-start: none;
+            padding: 0.7125rem 1rem 0.7125rem 1.25rem;
+        }
+    }
+
+    .subsection__title {
+        border: 0.0625rem dashed var(--fl-buttonBgColor, $sectionBorderColour);
+        border-inline-start: none;
+        line-height: 1.875rem;
+        padding: 1rem 1rem 1rem 1.25rem;
+        text-align: start;
+        width: 100%;
+    }
+
+    .subsection__icon {
+        align-items: center;
+        background-color: var(--fl-buttonFgColor, $sectionBorderColour);
+        display: flex;
+        font-size: var(--fl-enhance-font-size, 1.125rem);
+        font-weight: var(--fl-enhance-font-weight, 800);
+        justify-content: center;
+        min-width: 3.75rem;
+
+        svg {
+            --icon-arrowColour: var(--fl-buttonBgColor, #fff);
+
+            color: var(--fl-bgColor, $mainColour);
+            fill: none;
+            height: 2rem;
+            width: 1.75rem;
+        }
+    }
+
+    .subsection__toggle--expanded .subsection__icon svg {
+        transform: rotate(90deg);
+    }
+
+    .subsection__content {
+        display: none;
+    }
+
+    .subsection__content--show .subsection__content {
+        display: block;
+    }
+
+    .subsection__cards {
+        display: grid;
+        gap: 3rem;
+        grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
+        list-style: none;
+        margin: 0;
+        margin-block-end: 2.5rem;
+        padding: 0;
+    }
+}
diff --git a/src/assets/styles/components/_components.scss b/src/assets/styles/components/_components.scss
index 364864b0..1bb7b334 100644
--- a/src/assets/styles/components/_components.scss
+++ b/src/assets/styles/components/_components.scss
@@ -1,6 +1,9 @@
 // Component styles
 
 @import "article-contents";
+@import "audio-tactile-card";
+@import "audio-tactile-section";
+@import "audio-tactile-subsection";
 @import "banner";
 @import "brand";
 @import "breadcrumb";
@@ -9,5 +12,6 @@
 @import "menu";
 @import "perspective-thumbnail";
 @import "section-accordion";
+@import "sections-control";
 @import "side-content-item";
 @import "tagline";
diff --git a/src/assets/styles/components/_sections-control.scss b/src/assets/styles/components/_sections-control.scss
new file mode 100644
index 00000000..f77db970
--- /dev/null
+++ b/src/assets/styles/components/_sections-control.scss
@@ -0,0 +1,36 @@
+.sections-control {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.25rem;
+    margin-block-end: 1.5rem;
+    margin-block-start: 2rem;
+}
+
+.sections-control__collapse-all,
+.sections-control__expand-all {
+    background: var(--fl-buttonBgColor, $rootContentBackgroundColour);
+    border: 1px solid $mainColour;
+    color: var(--fl-buttonFgColor, $mainColour);
+    cursor: pointer;
+    flex-basis: 0;
+    flex-grow: 1;
+    font-size: 1.125rem;
+    font-weight: var(--fl-enhance-font-weight, 600);
+    line-height: calc(var(--fl-lineSpace-factor, 1) * 1.875);
+    padding: 0.375rem 1.5rem;
+
+    &:focus,
+    &:hover {
+        border: 0.1875rem solid var(--fl-buttonFgColor, $mainColour);
+        box-sizing: border-box;
+        padding: 0.25rem 1.375rem;
+    }
+}
+
+@include breakpoint-up(md) {
+    .sections-control__collapse-all,
+    .sections-control__expand-all {
+        flex-basis: unset;
+        flex-grow: unset;
+    }
+}
diff --git a/src/assets/styles/pages/_audio-tactile.scss b/src/assets/styles/pages/_audio-tactile.scss
index 95cd8422..dad150c9 100644
--- a/src/assets/styles/pages/_audio-tactile.scss
+++ b/src/assets/styles/pages/_audio-tactile.scss
@@ -1,39 +1,37 @@
-.audio-tactile main {
-    background: $darkGrey;
-    grid-template-columns: unset;
-    max-width: unset;
-    padding: 2rem;
-}
+.audio-tactile {
+    main {
+        background: $darkGrey;
+        grid-template-columns: unset;
+        max-width: unset;
+        padding: 2rem;
+    }
 
-.audio-tactile .footer {
-    margin-block-start: 0;
-}
+    .footer {
+        margin-block-start: 0;
+    }
 
-.audio-tactile__title {
-    font-size: 3rem;
-    font-weight: 700;
-    hyphens: auto;
-    line-height: 3.5rem;
-    word-break: break-word;
-}
+    .audio-tactile__title {
+        font-size: 3rem;
+        font-weight: 700;
+        hyphens: auto;
+        line-height: 3.5rem;
+        word-break: break-word;
+    }
 
-.audio-tactile__intro {
-    font-size: 1.25rem;
-}
+    .audio-tactile__intro {
+        font-size: 1.25rem;
+    }
 
-.audio-tactile__credits {
-    font-size: 1.25rem;
-    grid-row: 8; /* show the credits after all other page content */
-    margin-inline: auto;
-    max-width: $narrow-content-width;
-}
-
-.audio-tactile__sections {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
+    .audio-tactile__credits {
+        font-size: 1.25rem;
+        grid-row: 8; /* show the credits after all other page content */
+        margin-inline: auto;
+        max-width: $narrow-content-width;
+    }
 
-.audio-tactile .section__toggle {
-    margin-block-end: 0;
+    .audio-tactile__sections {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
 }
diff --git a/src/assets/styles/pages/_sections.scss b/src/assets/styles/pages/_sections.scss
index c5a4fd7b..52b4fbbf 100644
--- a/src/assets/styles/pages/_sections.scss
+++ b/src/assets/styles/pages/_sections.scss
@@ -3,40 +3,3 @@
     margin: 0;
     padding: 0;
 }
-
-.sections-control {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1.25rem;
-    margin-block-end: 1.5rem;
-    margin-block-start: 2rem;
-}
-
-.sections-control__collapse-all,
-.sections-control__expand-all {
-    background: var(--fl-buttonBgColor, $rootContentBackgroundColour);
-    border: 1px solid $mainColour;
-    color: var(--fl-buttonFgColor, $mainColour);
-    cursor: pointer;
-    flex-basis: 0;
-    flex-grow: 1;
-    font-size: 1.125rem;
-    font-weight: var(--fl-enhance-font-weight, 600);
-    line-height: calc(var(--fl-lineSpace-factor, 1) * 1.875);
-    padding: 0.375rem 1.5rem;
-
-    &:focus,
-    &:hover {
-        border: 0.1875rem solid var(--fl-buttonFgColor, $mainColour);
-        box-sizing: border-box;
-        padding: 0.25rem 1.375rem;
-    }
-}
-
-@include breakpoint-up(md) {
-    .sections-control__collapse-all,
-    .sections-control__expand-all {
-        flex-basis: unset;
-        flex-grow: unset;
-    }
-}