Add assets to support the Cdocs stepper (not in use yet)

assets/scripts/components/stepper.js

@@ -0,0 +1,209 @@
+const STORAGE_PREFIX = 'stepper-progress-';
+const MAX_STORED_STEPPERS = 10;
+
+function getStorageKey(stepperId) {
+    return `${STORAGE_PREFIX}${location.pathname}:${stepperId}`;
+}
+
+function loadProgress(stepperId) {
+    try {
+        const data = localStorage.getItem(getStorageKey(stepperId));
+        return data ? JSON.parse(data) : null;
+    } catch {
+        return null;
+    }
+}
+
+function saveProgress(stepperId, state) {
+    try {
+        const key = getStorageKey(stepperId);
+        if (!localStorage.getItem(key)) {
+            pruneOldEntries();
+        }
+        localStorage.setItem(key, JSON.stringify({ ...state, timestamp: Date.now() }));
+    } catch {
+        // Ignore storage errors, the stepper will still work without localStorage persistence
+    }
+}
+
+function pruneOldEntries() {
+    try {
+        const entries = [];
+        for (let i = 0; i < localStorage.length; i++) {
+            const key = localStorage.key(i);
+            if (key && key.startsWith(STORAGE_PREFIX)) {
+                const data = JSON.parse(localStorage.getItem(key));
+                entries.push({ key, timestamp: data.timestamp || 0 });
+            }
+        }
+        // If at the cap, remove the oldest entry to make room
+        if (entries.length >= MAX_STORED_STEPPERS) {
+            entries.sort((a, b) => a.timestamp - b.timestamp);
+            const toRemove = entries.length - MAX_STORED_STEPPERS + 1;
+            for (let i = 0; i < toRemove; i++) {
+                localStorage.removeItem(entries[i].key);
+            }
+        }
+    } catch {
+        // Ignore storage errors, the stepper will still work without localStorage persistence
+    }
+}
+
+function setHidden(el, hidden) {
+    if (!el) return;
+    if (hidden) {
+        el.setAttribute('data-hidden', 'true');
+    } else {
+        el.removeAttribute('data-hidden');
+    }
+}
+
+function initStepper(stepper) {
+    const stepperId = stepper.id;
+    const steps = stepper.querySelectorAll('.stepper__step');
+    const finishedEl = stepper.querySelector('.stepper__finished');
+    const resetEl = stepper.querySelector('.stepper__reset');
+    const showAllBtn = stepper.querySelector('.stepper__show-all-btn');
+    const collapseBtn = stepper.querySelector('.stepper__collapse-btn');
+
+    if (!steps.length) return;
+
+    // Set step numbers as data attributes for CSS
+    // (CSS counters don't work reliably when steps use display:none)
+    steps.forEach((step, i) => {
+        step.dataset.stepNumber = String(i + 1);
+    });
+
+    // Mark first/last steps for CSS line endpoints
+    steps[0].classList.add('stepper__step--first');
+    steps[steps.length - 1].classList.add('stepper__step--last');
+
+    let currentIndex = 0;
+    let finished = false;
+    let isAllExpanded = stepper.classList.contains('stepper--open');
+
+    // Restore saved progress
+    const saved = loadProgress(stepperId);
+    if (saved) {
+        if (saved.finished) {
+            finished = true;
+        } else if (typeof saved.stepIndex === 'number' && saved.stepIndex >= 0 && saved.stepIndex < steps.length) {
+            currentIndex = saved.stepIndex;
+        }
+        if (typeof saved.isAllExpanded === 'boolean') {
+            isAllExpanded = saved.isAllExpanded;
+        }
+    }
+
+    function persist() {
+        saveProgress(stepperId, {
+            stepIndex: currentIndex,
+            finished,
+            isAllExpanded
+        });
+    }
+
+    function render() {
+        stepper.classList.toggle('stepper--all-expanded', isAllExpanded);
+
+        // Toggle viz control buttons
+        setHidden(showAllBtn, isAllExpanded);
+        setHidden(collapseBtn, !isAllExpanded);
+
+        steps.forEach((step, i) => {
+            const isActive = !finished && i === currentIndex;
+            const isCompleted = finished || i < currentIndex;
+
+            step.classList.toggle('stepper__step--active', isActive);
+            step.classList.toggle('stepper__step--completed', isCompleted);
+
+            // The step title, number, etc. should always be visible,
+            // even if the step body itself is not visible
+            setHidden(step, false);
+
+            // Nav: hidden when expanded or finished, visible only for active step
+            const nav = step.querySelector('.stepper__nav');
+            if (nav) {
+                setHidden(nav, isAllExpanded || !isActive || finished);
+            }
+        });
+
+        // Finished message
+        setHidden(finishedEl, !finished);
+
+        // Start over: visible only when finished
+        setHidden(resetEl, !finished);
+    }
+
+    function goToStep(index) {
+        finished = false;
+        currentIndex = Math.max(0, Math.min(index, steps.length - 1));
+        persist();
+        render();
+    }
+
+    function handleFinish() {
+        finished = true;
+        persist();
+        render();
+    }
+
+    function handleReset() {
+        finished = false;
+        currentIndex = 0;
+        persist();
+        render();
+    }
+
+    // Clicking a step title in accordion (collapsed) mode makes it the active step
+    steps.forEach((step, i) => {
+        const title = step.querySelector('.stepper__step-title');
+        if (title) {
+            title.addEventListener('click', (e) => {
+                e.preventDefault();
+                if (isAllExpanded) return;
+                goToStep(i);
+            });
+        }
+    });
+
+    stepper.addEventListener('click', (e) => {
+        const btn = e.target.closest('.stepper__btn');
+        if (!btn) return;
+
+        if (btn.classList.contains('stepper__next-btn')) {
+            goToStep(currentIndex + 1);
+        } else if (btn.classList.contains('stepper__prev-btn')) {
+            goToStep(currentIndex - 1);
+        } else if (btn.classList.contains('stepper__finish-btn')) {
+            handleFinish();
+        } else if (btn.classList.contains('stepper__reset-btn')) {
+            handleReset();
+        } else if (btn.classList.contains('stepper__show-all-btn')) {
+            isAllExpanded = true;
+            persist();
+            render();
+        } else if (btn.classList.contains('stepper__collapse-btn')) {
+            isAllExpanded = false;
+            persist();
+            render();
+        }
+    });
+
+    // Initial render
+    render();
+    stepper.classList.add('stepper--initialized');
+}
+
+function initAllSteppers() {
+    const steppers = document.querySelectorAll('.stepper');
+    steppers.forEach(initStepper);
+}
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initAllSteppers);
+} else {
+    initAllSteppers();
+}
+
+export { initAllSteppers, initStepper };

assets/scripts/main-dd-js.js

@@ -19,6 +19,7 @@ import './components/mobile-nav'; // should move this to websites-modules
 import './components/accordion-auto-open';
 import './components/signup';
 import './components/conversational-search';
+import './components/stepper';
 
 // Add Bootstrap Tooltip across docs
 const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')

assets/styles/_bootstrap-custom.scss

@@ -255,10 +255,14 @@ button.list-group-item-white:hover {
     }
 }
 
-// remove outlines
-button:focus {
+// Hide focus outlines for mouse/touch only; keep for keyboard
+button:focus:not(:focus-visible) {
     outline: none;
 }
+button:focus-visible {
+    outline: 2px solid $ddpurple;
+    outline-offset: 2px;
+}
 .form-control:focus {
     box-shadow: none;
 }

assets/styles/components/_collapsible-section.scss

@@ -11,7 +11,6 @@
     align-items: center;
     padding: 8px;
     cursor: pointer;
-    outline: none;
     background-color: #ffffff00;
     border-radius: 7px 7px 7px 7px;
     transition: background-color 0.3s,
@@ -22,6 +21,15 @@
   display: none;
 }
 
+.collapsible-header:focus:not(:focus-visible) {
+    outline: none;
+}
+
+.collapsible-header:focus-visible {
+    outline: 2px solid $ddpurple;
+    outline-offset: -2px;
+}
+
 .collapsible-header:hover {
     background-color: #eae2f8;
 }