Add accordion component (collapsible section)

website/_includes/_mixins.jade

@@ -11,6 +11,23 @@ mixin section(id)
         block
 
 
+//- Accordion (collapsible sections)
+    title - [string] Section title.
+    id    - [string] Optional section ID for permalinks.
+    level - [integer] Headline level for section title.
+
+mixin accordion(title, id, level)
+    section.o-accordion.o-block
+        +h(level || 4).o-no-block(id=id)
+            button.o-accordion__button.o-grid.o-grid--vcenter.o-grid--space.js-accordion(aria-expanded="false")=title
+                svg.o-accordion__icon(width="20" height="20" viewBox="0 0 10 10" aria-hidden="true" focusable="false")
+                    rect.o-accordion__hide(height="8" width="2" y="1" x="4")
+                    rect(height="2" width="8" y="4" x="1")
+
+        .o-accordion__content(hidden="")
+            block
+
+
 //- Headlines Helper Mixin
     level - [integer] 1, 2, 3, 4, or 5
 

website/_includes/_scripts.jade

@@ -41,6 +41,7 @@ if IS_PAGE
     https://medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7
 
 - ProgressBar = "new ProgressBar('.js-progress');"
+- Accordion = "new Accordion('.js-accordion');"
 - Changelog = "new Changelog('" + SOCIAL.github + "', 'spacy');"
 - NavHighlighter = "new NavHighlighter('data-section', 'data-nav');"
 - GitHubEmbed = "new GitHubEmbed('" + SOCIAL.github + "', 'data-gh-embed');"
@@ -57,6 +58,7 @@ if environment == "deploy"
         if IS_PAGE
             !=NavHighlighter
             !=GitHubEmbed
+            !=Accordion
         if HAS_MODELS
             !=ModelLoader
         if compare_models
@@ -74,6 +76,8 @@ else
             !=NavHighlighter
             | import GitHubEmbed from '/assets/js/github-embed.js';
             !=GitHubEmbed
+            | import Accordion from '/assets/js/accordion.js';
+            !=Accordion
         if HAS_MODELS
             | import { ModelLoader } from '/assets/js/models.js';
             !=ModelLoader

website/assets/css/_base/_objects.sass

@@ -74,6 +74,42 @@
     border-radius: $border-radius
     box-shadow: $box-shadow
 
+
+//- Accordion
+
+.o-accordion
+    &:not(:last-child)
+        margin-bottom: 2rem
+
+.o-accordion__content
+    margin-top: 3rem
+
+.o-accordion__button
+    font: inherit
+    border-radius: $border-radius
+    width: 100%
+    padding: 1.5rem 2rem
+    background: $color-subtle-light
+
+    &[aria-expanded="true"]
+        border-bottom: 3px solid $color-subtle
+        border-bottom-left-radius: 0
+        border-bottom-right-radius: 0
+
+        .o-accordion__hide
+            display: none
+
+    &:focus:not([aria-expanded="true"])
+        background: $color-subtle
+
+.o-accordion__icon
+    @include size(2.5rem)
+    background: $color-theme
+    color: $color-back
+    border-radius: 50%
+    padding: 0.35rem
+    pointer-events: none
+
 //- Box
 
 .o-box

website/assets/js/accordion.js

@@ -0,0 +1,25 @@
+'use strict';
+
+import { $$ } from './util.js';
+
+export default class Accordion {
+    /**
+     * Simple, collapsible accordion sections.
+     * Inspired by: https://inclusive-components.design/collapsible-sections/
+     * @param {string} selector - Query selector of button element.
+     */
+    constructor(selector) {
+        [...$$(selector)].forEach(btn =>
+            btn.addEventListener('click', this.onClick.bind(this)))
+    }
+
+    /**
+     * Toggle aria-expanded attribute on button and visibility of section.
+     * @param {node} Event.target - The accordion button.
+     */
+    onClick({ target }) {
+        const exp = target.getAttribute('aria-expanded') === 'true' || false;
+        target.setAttribute('aria-expanded', !exp);
+        target.parentElement.nextElementSibling.hidden = exp;
+    }
+}

website/assets/js/rollup.js

@@ -12,6 +12,7 @@ import ProgressBar from './progress.js';
 import NavHighlighter from './nav-highlighter.js';
 import Changelog from './changelog.js';
 import GitHubEmbed from './github-embed.js';
+import Accordion from './accordion.js';
 import { ModelLoader, ModelComparer } from './models.js';
 
 // Assign to window so they are bundled by rollup
@@ -19,5 +20,6 @@ window.ProgressBar = ProgressBar;
 window.NavHighlighter = NavHighlighter;
 window.Changelog = Changelog;
 window.GitHubEmbed = GitHubEmbed;
+window.Accordion = Accordion;
 window.ModelLoader = ModelLoader;
 window.ModelComparer = ModelComparer;