@qhealth-design-system/core 1.18.4 → 1.19.0

package/.storybook/assets/accordion-js.js

@@ -0,0 +1,344 @@
+// This file is temporarily added to Storybook to allow testing of the accordion component in isolation, while the main global.js file is being refactored into modules.
+
+/**
+ * @module accordion
+ */
+
+export default function initAccordion(document = document, element) {
+    let accordion = {};
+
+    if (element == "overflow") {
+        const overflowMenuButtons = document.querySelectorAll(".qld__overflow_menu__btn");
+        overflowMenuButtons.forEach(function (button) {
+            button.addEventListener("click", function () {
+                accordion.Toggle(button);
+            });
+        });
+    } else {
+        const accordionButtons = document.querySelectorAll(".qld__accordion__title");
+        accordionButtons.forEach(function (button) {
+            button.addEventListener("click", function () {
+                accordion.Toggle(button);
+            });
+        });
+
+        const accordionAllButtton = document.querySelectorAll(".qld__accordion__toggle-btn");
+        accordionAllButtton.forEach(function (button) {
+            button.addEventListener("click", function () {
+                accordion.ToggleAll(button);
+            });
+        });
+    }
+
+    function setAriaRoles(element, state) {
+        if (state === "closing") {
+            element.setAttribute("aria-expanded", false);
+        } else {
+            element.setAttribute("aria-expanded", true);
+        }
+    }
+
+    function toggleClasses(element, state, openingClass, closingClass) {
+        if (state === "opening" || state === "open") {
+            var oldClass = openingClass || "qld__accordion--closed";
+            var newClass = closingClass || "qld__accordion--open";
+        } else {
+            var oldClass = closingClass || "qld__accordion--open";
+            var newClass = openingClass || "qld__accordion--closed";
+        }
+
+        removeClass(element, oldClass);
+        addClass(element, newClass);
+    }
+
+    function removeClass(element, className) {
+        if (element.classList) {
+            element.classList.remove(className);
+        } else {
+            element.className = element.className.replace(new RegExp("(^|\\b)" + className.split(" ").join("|") + "(\\b|$)", "gi"), " ");
+        }
+    }
+
+    function addClass(element, className) {
+        if (element.classList) {
+            element.classList.add(className);
+        } else {
+            element.className = element.className + " " + className;
+        }
+    }
+
+    accordion.Toggle = function (elements, speed, callbacks) {
+        // stop event propagation
+        try {
+            window.event.cancelBubble = true;
+            event.stopPropagation();
+        } catch (error) {
+            console.error(error);
+        }
+
+        // making sure we can iterate over just one DOM element
+        if (elements.length === undefined) {
+            elements = [elements];
+        }
+
+        // check this once
+        if (typeof callbacks != "object") {
+            callbacks = {};
+        }
+
+        for (var i = 0; i < elements.length; i++) {
+            var element = elements[i];
+            var targetId = element.getAttribute("aria-controls");
+            var target = document.getElementById(targetId);
+
+            if (target == null) {
+                throw new Error(
+                    "accordion.Toggle cannot find the target to be toggled from inside aria-controls.\n" +
+                        "Make sure the first argument you give accordion.Toggle is the DOM element (a button or a link) that has an aria-controls attribute that points " +
+                        "to a div that you want to toggle.",
+                );
+            }
+
+            target.style.display = "block";
+
+            QLD.animate.Toggle({
+                element: target,
+                property: "height",
+                speed: speed || 250,
+                prefunction: function (target, state) {
+                    if (state === "opening") {
+                        target.style.display = "block";
+
+                        // run when opening
+                        if (typeof callbacks.onOpen === "function") {
+                            callbacks.onOpen();
+                        }
+                    } else {
+                        // run when closing
+                        if (typeof callbacks.onClose === "function") {
+                            callbacks.onClose();
+                        }
+                    }
+
+                    setAriaRoles(element, target, state);
+                    toggleClasses(element, state);
+                },
+                postfunction: function (target, state) {
+                    if (state === "closed") {
+                        // run after closing
+                        target.style.display = "";
+                        target.style.height = "";
+
+                        // GTM event
+                        if (typeof window.dataLayer !== "undefined") {
+                            window.dataLayer.push({
+                                event: "accordion closed",
+                                category: "accordion",
+                                action: "close",
+                                label: targetId,
+                            });
+                        }
+
+                        if (typeof callbacks.afterClose === "function") {
+                            callbacks.afterClose();
+                        }
+                    } else {
+                        // run after opening
+                        target.style.display = "";
+                        target.style.height = "";
+
+                        // GTM event
+                        if (typeof window.dataLayer !== "undefined") {
+                            window.dataLayer.push({
+                                event: "accordion open",
+                                category: "accordion",
+                                action: "open",
+                                label: targetId,
+                            });
+                        }
+
+                        if (typeof callbacks.afterOpen === "function") {
+                            callbacks.afterOpen();
+                        }
+
+                        if (target.classList.contains("qld__overflow_menu")) {
+                            var overFlowLinks = [];
+                            overFlowLinks = target.querySelectorAll("a.qld__overflow_menu_list-item-link");
+
+                            if (overFlowLinks[0]) {
+                                setTimeout(function () {
+                                    overFlowLinks[0].focus();
+                                }, 10);
+                            }
+                        }
+                    }
+
+                    toggleClasses(target, state);
+                },
+                callback: function (target, state) {
+                    const controller = new AbortController();
+
+                    function toggleNavOnDocumentClick(event) {
+                        if (!event.target.closest(".qld__main-nav__menu-sub.qld__accordion__body.qld__accordion--open")) {
+                            controller.abort();
+                            if (elements[0].classList.contains("qld__accordion--open")) {
+                                accordion.Toggle(elements, speed, callbacks);
+                            }
+                        }
+                    }
+
+                    if (state === "open" || state === "opening") {
+                        //if it is a mega nav add an event listener to close it when document is clicked
+                        if (this.element.classList.contains("qld__main-nav__menu-sub") || this.element.classList.contains("qld__overflow_menu")) {
+                            document.addEventListener("click", toggleNavOnDocumentClick, { signal: controller.signal });
+                        }
+                    } else {
+                        if (this.element.classList.contains("qld__main-nav__menu-sub") || this.element.classList.contains("qld__overflow_menu")) {
+                            document.removeEventListener("click", toggleNavOnDocumentClick, { signal: controller.signal });
+                            controller.abort();
+                        }
+                    }
+                },
+            });
+        }
+
+        return false;
+    };
+
+    accordion.ToggleAll = function (elements, speed, callbacks) {
+        // stop event propagation
+        try {
+            window.event.cancelBubble = true;
+            event.stopPropagation();
+        } catch (error) {
+            console.error(error);
+        }
+
+        var toogleAllButton = elements;
+        // find the accordion wrapper
+        var wrapper = toogleAllButton.closest(".qld__accordion-group");
+        // get all the accordion buttons
+        var accordionButtons = wrapper.querySelectorAll(".qld__accordion__title");
+
+        // check this once
+        if (typeof callbacks != "object") {
+            callbacks = {};
+        }
+
+        // Check if opened or closed
+        if (toogleAllButton.classList.contains("qld__accordion__toggle-btn--closed")) {
+            toogleAllButton.classList.remove("qld__accordion__toggle-btn--closed");
+            toogleAllButton.setAttribute("aria-expanded", "true");
+            toogleAllButton.classList.add("qld__accordion__toggle-btn--open");
+            toogleAllButton.textContent = "Close all";
+            accordion.Open(accordionButtons);
+        } else if (toogleAllButton.classList.contains("qld__accordion__toggle-btn--open")) {
+            toogleAllButton.classList.remove("qld__accordion__toggle-btn--open");
+            toogleAllButton.setAttribute("aria-expanded", "false");
+            toogleAllButton.classList.add("qld__accordion__toggle-btn--closed");
+            toogleAllButton.textContent = "Open all";
+            accordion.Close(accordionButtons);
+        }
+
+        return false;
+    };
+
+    accordion.Open = function (elements, speed) {
+        // stop event propagation
+        try {
+            window.event.cancelBubble = true;
+            event.stopPropagation();
+        } catch (error) {
+            console.error(error);
+        }
+
+        if (elements.length === undefined) {
+            elements = [elements];
+        }
+
+        for (var i = 0; i < elements.length; i++) {
+            var element = elements[i];
+            var targetId = element.getAttribute("aria-controls");
+            var target = document.getElementById(targetId);
+
+            // let’s find out if this accordion is still closed
+            var height = 0;
+            if (typeof getComputedStyle !== "undefined") {
+                height = window.getComputedStyle(target).height;
+            } else {
+                height = target.currentStyle.height;
+            }
+
+            if (parseInt(height) === 0) {
+                target.style.height = "0px";
+            }
+
+            target.style.display = "";
+            toggleClasses(target, "opening");
+            toggleClasses(element, "opening");
+            setAriaRoles(element, target, "opening");
+
+            if (typeof window.dataLayer !== "undefined") {
+                window.dataLayer.push({
+                    event: "accordion open",
+                    category: "accordion",
+                    action: "close",
+                    label: targetId,
+                });
+            }
+
+            QLD.animate.Run({
+                element: target,
+                property: "height",
+                endSize: "auto",
+                speed: speed || 250,
+                callback: function () {
+                    toggleClasses(element, "opening");
+                },
+            });
+        }
+    };
+
+    accordion.Close = function (elements, speed) {
+        // stop event propagation
+        try {
+            window.event.cancelBubble = true;
+            event.stopPropagation();
+        } catch (error) {
+            console.error(error);
+        }
+
+        if (elements.length === undefined) {
+            elements = [elements];
+        }
+
+        for (var i = 0; i < elements.length; i++) {
+            var element = elements[i];
+            var targetId = element.getAttribute("aria-controls");
+            var target = document.getElementById(targetId);
+
+            toggleClasses(element, "closing");
+            setAriaRoles(element, target, "closing");
+
+            if (typeof window.dataLayer !== "undefined") {
+                window.dataLayer.push({
+                    event: "accordion close",
+                    category: "accordion",
+                    action: "close",
+                    label: targetId,
+                });
+            }
+
+            QLD.animate.Run({
+                element: target,
+                property: "height",
+                endSize: 0,
+                speed: speed || 250,
+                callback: function () {
+                    target.style.display = "";
+                    toggleClasses(target, "close");
+                },
+            });
+        }
+    };
+}

package/.storybook/assets/animate-js.js

@@ -0,0 +1,247 @@
+// This file is temporarily added to Storybook to allow testing of the animate component in isolation, while the main global.js file is being refactored into modules.
+
+/**
+ * @module animate
+ */
+
+export default function initAnimate(document = document) {
+    let animate = {};
+
+    function CalculateAnimationSpecs(initialSize, endSize, speed) {
+        if (initialSize === endSize) {
+            return {
+                stepSize: 0,
+                steps: 0,
+                intervalTime: 0,
+            };
+        }
+
+        var distance = endSize - initialSize; // the overall distance the animation needs to travel
+        var intervalTime = speed / distance; // the time each setInterval iteration will take
+        var stepSize = distance < 0 ? -1 : 1; // if distance is negative then we set stepSize to -1
+        var steps = Math.abs(distance / stepSize); // the amount of steps required to get to endSize
+        intervalTime = speed / steps;
+
+        // we need to adjust our animation specs if interval time exceeds 60FPS eg intervalTime < 16.67ms
+        if (Math.abs(intervalTime) < 1000 / 60) {
+            intervalTime = 1000 / 60; // let’s not get lower that 60FPS
+            steps = Math.ceil(Math.abs(speed / intervalTime)); // we now need the steps and make sure we ceil them so -1 won't make them negative
+            stepSize = distance / steps; // last thing is step sizes which are derived from all of the above
+        }
+
+        return {
+            stepSize: stepSize,
+            steps: steps - 1,
+            intervalTime: intervalTime,
+        };
+    }
+
+    // export for node and babel environments
+    if (typeof module !== "undefined") {
+        animate.CalculateAnimationSpecs = CalculateAnimationSpecs;
+    }
+
+    animate.GetCSSPropertyBecauseIE = function (element, property) {
+        if (typeof getComputedStyle !== "undefined") {
+            return window.getComputedStyle(element)[property];
+        } else {
+            var space = element.currentStyle[property];
+
+            if (space === "auto") {
+                space = QLD.animate.CalculateAuto(element, property);
+            }
+
+            return space;
+        }
+    };
+
+    animate.CalculateAuto = function (element, dimension) {
+        var initialSize;
+        var endSize;
+
+        if (dimension === "height") {
+            initialSize = element.clientHeight; // get current height
+            element.style[dimension] = "auto"; // set height to auto
+            endSize = element.clientHeight; // get height again
+            element.style[dimension] = initialSize + "px"; // set back to initial height
+        } else {
+            initialSize = element.clientWidth;
+            element.style[dimension] = "auto";
+            endSize = element.clientWidth;
+            element.style[dimension] = initialSize + "px";
+        }
+
+        return parseInt(endSize);
+    };
+
+    animate.Stop = function (element) {
+        clearInterval(element.QLDanimation);
+    };
+
+    animate.Run = function (options) {
+        // defaults
+        var elements = options.element;
+        var speed = options.speed || 250;
+
+        // making a single DOM element iteratable
+        if (elements.length === undefined) {
+            elements = [elements];
+        }
+
+        // making a callback if none was provided
+        if (typeof options.callback !== "function") {
+            options.callback = function () {};
+        }
+
+        // adding iteration counts
+        elements[0].QLDinteration = 0;
+        elements[0].QLDinterations = elements.length;
+
+        // iterate over all DOM nodes
+        for (var i = 0; i < elements.length; i++) {
+            var element = elements[i]; // this element
+            QLD.animate.Stop(element); // stop any previous animations
+            var initialSize = parseInt(QLD.animate.GetCSSPropertyBecauseIE(element, options.property)); // the elements current size
+            var endSize = options.endSize; // the element end size
+
+            if (options.endSize === "auto") {
+                // calculate what 'auto' means in pixel
+                endSize = QLD.animate.CalculateAuto(element, options.property);
+            }
+
+            // calculate our animation specs
+            var animationSpecs = CalculateAnimationSpecs(initialSize, endSize, speed);
+            var iterateCounter = initialSize;
+
+            // set state
+            if (animationSpecs.stepSize < 0) {
+                element.QLDtoggleState = "closing";
+            } else if (animationSpecs.stepSize > 0) {
+                element.QLDtoggleState = "opening";
+            }
+
+            // scoping variable
+            (function (element, initialSize, iterateCounter, animationSpecs, endSize) {
+                // keep track of animation by adding it to the DOM element
+                element.QLDanimation = setInterval(function () {
+                    // when we are at the end
+                    if (initialSize === endSize || animationSpecs.steps === 0) {
+                        QLD.animate.Stop(element);
+
+                        element.style[options.property] = endSize + "px"; // set to endSize
+                        element.QLDtoggleState = "";
+
+                        elements[0].QLDinteration++;
+
+                        // removing auto so CSS can take over
+                        if (options.endSize === "auto") {
+                            element.style[options.property] = "";
+                        }
+
+                        // when all iterations have finished, run the callback
+                        if (elements[0].QLDinteration >= elements[0].QLDinterations) {
+                            return options.callback();
+                        }
+                    }
+
+                    // if we are still animating
+                    else {
+                        iterateCounter += animationSpecs.stepSize;
+                        element.style[options.property] = iterateCounter + "px";
+
+                        animationSpecs.steps--;
+                    }
+                }, Math.abs(animationSpecs.intervalTime));
+            })(element, initialSize, iterateCounter, animationSpecs, endSize);
+        }
+    };
+
+    animate.Toggle = function (options) {
+        var elements = options.element;
+        var property = options.property || "height";
+        var speed = options.speed || 250;
+        var closeSize = options.closeSize === undefined ? 0 : options.closeSize;
+        var openSize = options.openSize === undefined ? "auto" : options.openSize;
+
+        // making a single DOM element iteratable
+        if (elements.length === undefined) {
+            elements = [elements];
+        }
+
+        // making a prefunction if none was provided
+        if (typeof options.prefunction !== "function") {
+            options.prefunction = function () {};
+        }
+
+        // making a postfunction if none was provided
+        if (typeof options.postfunction !== "function") {
+            options.postfunction = function () {};
+        }
+
+        // making a callback if none was provided
+        if (typeof options.callback !== "function") {
+            options.callback = function () {};
+        }
+
+        // adding iteration counts
+        elements[0].QLDtoggleInteration = 0;
+        elements[0].QLDtoggleInterations = elements.length;
+
+        // iterate over all DOM nodes
+        for (var i = 0; i < elements.length; i++) {
+            var element = elements[i];
+
+            QLD.animate.Stop(element);
+
+            var targetSize; // the size the element should open/close to after toggle is clicked
+            var preState = ""; // the state we animate to for the prefunction and callback functions
+            var postState = ""; // the state we animate to for the prefunction and callback functions
+            var currentSize = parseInt(QLD.animate.GetCSSPropertyBecauseIE(element, options.property)); // the current size of the element
+
+            if (currentSize === closeSize || element.QLDtoggleState === "closing") {
+                targetSize = openSize;
+                preState = "opening";
+                postState = "open";
+            } else if (currentSize !== closeSize || element.QLDtoggleState === "opening") {
+                targetSize = closeSize;
+                preState = "closing";
+                postState = "closed";
+            } else {
+                throw new Error("QLD.animate.Toggle cannot determine state of element");
+            }
+
+            // run prefunction once per element
+            options.prefunction(element, preState);
+
+            // shoot off animation
+            QLD.animate.Run({
+                element: element,
+                endSize: targetSize,
+                property: property,
+                speed: speed,
+                callback: function () {
+                    // making sure we fire the callback only once
+                    elements[0].QLDtoggleInteration++;
+
+                    if (elements[0].QLDtoggleInteration === elements[0].QLDinterations) {
+                        var returnParam = options.callback(element, postState);
+
+                        // run postfunction once per element
+                        options.postfunction(element, postState);
+
+                        return returnParam;
+                    }
+
+                    // run postfunction once per element
+                    options.postfunction(element, postState);
+                },
+            });
+        }
+    };
+
+    if (!window.QLD) {
+        window.QLD = {};
+    }
+
+    window.QLD.animate = animate;
+}

package/.storybook/assets/index.js

@@ -0,0 +1,15 @@
+// Storybook index file to import storybook related assets
+import "../core-assets/handlebar-helpers.js";
+import "../core-assets/main.js";
+import initAnimate from "./animate-js.js";
+import initAccordion from "./accordion-js.js";
+import initComponents from "../../src/component-loader.js";
+
+// ES module initialisation for Core components
+initComponents();
+
+// ES module initialisation for Storybook specific components
+document.addEventListener("DOMContentLoaded", () => {
+    initAnimate(document);
+    initAccordion(document);
+});