INTR-400: Build accordion dwds component (#800)

Co-authored-by: Suresh Manga <[email protected]>
Co-authored-by: Cameron Lamb <[email protected]>

src/core/templates/dwds_content.html

@@ -55,5 +55,6 @@ <h1>{% firstof page_title page.title %}</h1>
 
     {% block scripts %}
         {{ block.super }}
+        <script src='{% static "dwds/components/accordion.js" %}'></script>
         <script src='{% static "dwds/elements/ribbon.js" %}'></script>
     {% endblock scripts %}

src/dw_design_system/dwds/components/accordion.html

@@ -0,0 +1,30 @@
+{% load static %}
+<div class="dwds-accordions content-stack">
+    <div class="show-all-header">
+        <button class="dwds-button dwds-button--clear">
+            <span class="show-all-chevron"></span>
+            <span class="show-all-text">Show all sections</span>
+        </button>
+    </div>
+
+    {% for item in items %}
+        <div class="dwds-accordion-section content-stack">
+            <div class="section-header">
+                <button class="dwds-button dwds-button--clear">
+                    <span class="text-large">{{ item.heading }}</span>
+                    <p class="text-small">{{ item.summary }}</p>
+                    <span class="section-toggle">
+                        <span class="section-chevron"></span>
+                        <span class="section-text">Show</span>
+                    </span>
+                </button>
+            </div>
+
+            <div class="section-content content-stack">
+                <p>{{ item.content }}</p>
+            </div>
+
+        </div>
+    {% endfor %}
+
+</div>

src/dw_design_system/dwds/components/accordion.js

@@ -0,0 +1,67 @@
+function showSection(accordion) {
+    const [content, text, sectionChevron] = getCommonElements(accordion);
+    content.style.display = "block";
+    text.innerText = "Hide";
+    sectionChevron.classList.add("section-chevron-up");
+}
+
+function hideSection(accordion) {
+    const [content, text, sectionChevron] = getCommonElements(accordion);
+    content.style.display = "none";
+    text.innerText = "Show";
+    sectionChevron.classList.remove("section-chevron-up");
+}
+
+function getCommonElements(accordion) {
+    const content = accordion.getElementsByClassName("section-content")[0];
+    const text = accordion.getElementsByClassName("section-text")[0];
+    const sectionChevron = accordion.getElementsByClassName("section-chevron")[0];
+    return [content, text, sectionChevron];
+}
+
+function toggleSpecificSection(accordion) {
+    const sectionText = accordion.getElementsByClassName("section-text")[0];
+    if (sectionText.innerText === "Show") {
+        showSection(accordion);
+    } else {
+        hideSection(accordion);
+    }
+}
+
+function toggleAll(accordions, accordionsInGroup) {
+    const allText = accordions.getElementsByClassName("show-all-text")[0];
+    const allChevron = accordions.querySelector(".show-all-chevron");
+    if (allText.innerText === "Hide all sections") {
+        accordionsInGroup.forEach(function (accordion) {
+            hideSection(accordion);
+        });
+        allText.innerText = "Show all sections";
+        allChevron.classList.remove("show-all-chevron-up");
+    } else {
+        accordionsInGroup.forEach(function (accordion) {
+            showSection(accordion);
+        });
+        allText.innerText = "Hide all sections";
+        allChevron.classList.add("show-all-chevron-up");
+    }
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+
+    document.querySelectorAll('.dwds-accordions').forEach(function (accordions) {
+
+        const accordionsInGroup = accordions.querySelectorAll('.dwds-accordion-section');
+        accordionsInGroup.forEach(function (accordion) {
+            const accordionHeader = accordion.getElementsByClassName("section-header")[0];
+            accordionHeader.addEventListener("click", function (e) {
+                toggleSpecificSection(accordion);
+            });
+        });
+
+        const allHeader = accordions.getElementsByClassName("show-all-header")[0];
+        allHeader.addEventListener("click", function (e) {
+            toggleAll(accordions, accordionsInGroup);
+        });
+
+    });
+});

src/dw_design_system/dwds/components/accordion.scss

@@ -0,0 +1,76 @@
+.dwds-accordions {
+    background-color: var(--color-background);
+
+    .show-all-header {
+        border-bottom: var(--border-bottom-width) solid var(--color-border);
+    }
+
+    .dwds-accordion-section {
+        border-bottom: var(--border-bottom-width) solid var(--color-border);
+
+        .section-header {
+
+            &:hover {
+                background-color: var(--color-accordion-hover);
+
+                .section-chevron {
+                    color: var(--color-text);
+                    background: var(--color-text);
+
+                    &::after {
+                        color: var(--color-background-highlight);
+                    }
+                }
+            }
+        }
+
+        .section-toggle {
+            font-size: var(--text-small);
+            font-weight: var(--font-weight-normal);
+            color: var(--color-button-primary);
+            margin-bottom: var(--s-1);
+        }
+
+        .section-content {
+            display: none;
+            padding-bottom: var(--s1);
+        }
+
+    }
+
+    .section-chevron,
+    .show-all-chevron {
+        box-sizing: border-box;
+        display: inline-block;
+        position: relative;
+        width: var(--s1);
+        height: var(--s1);
+        border: .0625rem solid;
+        border-radius: 50%;
+        vertical-align: middle;
+
+        &::after {
+            content: "";
+            box-sizing: border-box;
+            display: block;
+            position: absolute;
+            top: .3125rem;
+            left: .375rem;
+            width: .375rem;
+            height: .375rem;
+            transform: rotate(135deg);
+            border-top: .125rem solid;
+            border-right: .125rem solid;
+        }
+    }
+
+    .section-chevron-up,
+    .show-all-chevron-up {
+        transform: rotate(180deg);
+    }
+
+    .show-all-text {
+        margin-left: var(--s-5);
+        vertical-align: middle;
+    }
+}

src/dw_design_system/dwds/elements/button.scss

@@ -25,6 +25,25 @@ a.dwds-button,
         position: relative;
         background-color: var(--color-button-hover);
         border-bottom: solid var(--border-width);
+        background-color: var(--color-button-primary);
+    }
+
+    &--clear {
+        // Unset the default button styling
+        border: none;
+        background: none;
+        // Reset styling
+        padding-left: unset;
+        padding-right: unset;
+        color: unset;
+        background-color: unset;
+        font-weight: unset;
+        text-align: left;
+
+        &:hover {
+            background-color: unset;
+            border-bottom-color: unset;
+        }
     }
 
     &--warning {
@@ -165,4 +184,4 @@ a.dwds-button:focus-visible {
     justify-content: flex-start;
     align-items: center;
     gap: var(--s0);
-}
+}

src/dw_design_system/dwds/styles/typography.scss

@@ -27,6 +27,10 @@
   font-style: italic;
 }
 
+.text-small {
+    font-size: var(--text-small);
+}
+
 .text-medium {
   font-size: var(--text-medium) !important;
 }

src/dw_design_system/dwds/styles/variables.scss

@@ -67,7 +67,8 @@
   --color-hr: var(--gds-mid-grey);
   --color-selected-radio: var(--color-button-text-focus);
   --color-menu-active-border: var(--dbt-light-blue);
-
+  --color-button-text-accordion: var(--gds-black);
+  --color-accordion-hover: var(--gds-light-grey);
 
   // Size
   --ratio: 1.25;
@@ -95,8 +96,12 @@
 
   // Borders and element widths
   --border-width: 3px;
+  --border-bottom-width: 1px;
+  --border-top-width: 1px;
   --button-border-width: 2px;
   --button-border-width-bottom: 4px;
+  --border-width-small: 1px;
+  --border-no-width: 0px;
   --text-underline-hover: 3px;
 
   // Typography

src/dw_design_system/dwds/stylesheet.scss

@@ -27,6 +27,7 @@
 @forward "components/pagination";
 @forward "components/promo";
 @forward "components/profile_info";
+@forward "components/accordion";
 
 // Elements
 @forward "elements/button";

src/dw_design_system/templates/dw_design_system/dwds_components.html

@@ -16,10 +16,11 @@ <h1>DW Design System {{ template_type }}</h1>
 {% endblock primary_content %}
 
 {% block scripts %}
+    {{ block.super }}
     {% comment %} TODO: Move to a separate CSS file {% endcomment %}
     <style type="text/css">
         .component-wrapper {
-            button {
+            > button {
                 padding: 5px 10px;
             }
         }

src/dw_design_system/templates/dw_design_system/styles.html

@@ -106,13 +106,15 @@ <h2>Buttons</h2>
             <button class="dwds-button dwds-button--secondary-dark">Secondary-dark button</button>
             <button class="dwds-button dwds-button--warning">Warning button</button>
             <button class="dwds-button dwds-button--transactional">Transactional button</button>
+            <button class="dwds-button dwds-button--clear">A clear button</button>
         </div>
         <div class="dwds-button-group">
             <button class="dwds-button dwds-button--inline">PB (inline)</button>
             <button class="dwds-button dwds-button--secondary dwds-button--inline">SB (inline)</button>
             <button class="dwds-button dwds-button--secondary-dark dwds-button--inline">SDB (inline)</button>
             <button class="dwds-button dwds-button--warning dwds-button--inline">WB (inline)</button>
             <button class="dwds-button dwds-button--transactional dwds-button--inline">TB (inline)</button>
+            <button class="dwds-button dwds-button--clear dwds-button--inline">CB (inline)</button>
         </div>
 
         <h2>Links as buttons</h2>
@@ -123,6 +125,7 @@ <h2>Links as buttons</h2>
             <a class="dwds-button dwds-button--secondary-dark" href="#">Secondary-dark button</a>
             <a class="dwds-button dwds-button--warning" href="#">Warning button</a>
             <a class="dwds-button dwds-button--transactional" href="#">Transactional button</a>
+            <a class="dwds-button dwds-button--clear" href="#">Clear button</a>
         </div>
         <div class="dwds-button-group">
             <a class="dwds-button dwds-button--inline" href="#">PB (inline)</a>
@@ -133,6 +136,7 @@ <h2>Links as buttons</h2>
             <a class="dwds-button dwds-button--warning dwds-button--inline" href="#">WB (inline)</a>
             <a class="dwds-button dwds-button--transactional dwds-button--inline"
                href="#">TB (inline)</a>
+            <a class="dwds-button dwds-button--clear dwds-button--inline" href="#">CB (inline)</a>
         </div>
 
         <h2>Navigation buttons</h2>

src/dw_design_system/utils.py

@@ -194,6 +194,34 @@ def get_dwds_templates(template_type, request: HttpRequest):
                     "phone_number": "0123456789",
                 },
             },
+            {
+                "name": "Accordion",
+                "template": "dwds/components/accordion.html",
+                "context": {
+                    "items": [
+                        {
+                            "heading": "Understanding agile project management",
+                            "summary": "Introductions, methods, core features.",
+                            "content": "This is the content for agile project management.",
+                        },
+                        {
+                            "heading": "Working with agile methods",
+                            "summary": "Workspaces, tools and techniques, user stories, planning.",
+                            "content": "This is the content for agile methods.",
+                        },
+                        {
+                            "heading": "Governing agile services",
+                            "summary": "Principles, measuring progress, spending money.",
+                            "content": "This is the content for agile services.",
+                        },
+                        {
+                            "heading": "Phases of an agile project",
+                            "summary": "Discovery, alpha, beta, live and retirement.",
+                            "content": "This is the content for agile project.",
+                        },
+                    ]
+                },
+            },
         ],
         "layouts": [],
     }