@graupl/graupl 1.0.0-alpha.14 → 1.0.0-alpha.16

package/src/js/carousel/Carousel.js

@@ -5,6 +5,7 @@
 
 import { addClass, removeClass } from "../domHelpers.js";
 import { preventEvent, keyPress } from "../eventHandlers.js";
+import storage from "../storage.js";
 import {
   isQuerySelector,
   isTag,
@@ -200,6 +201,15 @@ class Carousel {
    */
   _prefix = "graupl-";
 
+  /**
+   * The key used to generate IDs throughout the carousel.
+   *
+   * @protected
+   *
+   * @type {string}
+   */
+  _key = "";
+
   /**
    * An array of error messages generated by the carousel.
    *
@@ -233,7 +243,8 @@ class Carousel {
    * @param {number}             [options.transitionDuration = 500]                                       - The duration time (in milliseconds) for the transition between carousel items.
    * @param {?string}            [options.playText = Play]                                                - The text to use for the play button.
    * @param {?string}            [options.pauseText = Pause]                                              - The text to use for the pause button.
-   * @param {?string}             [options.prefix = graupl-]                                              - The prefix to use for CSS custom properties.
+   * @param {?string}            [options.prefix = graupl-]                                               - The prefix to use for CSS custom properties.
+   * @param {?string}            [options.key = null]                                                     - The key used to generate IDs throughout the carousel.
    * @param {boolean}            [options.initialize = false]                                             - A flag to initialize the carousel immediately upon creation.
    */
   constructor({
@@ -258,6 +269,7 @@ class Carousel {
     playText = "Play",
     pauseText = "Pause",
     prefix = "graupl-",
+    key = null,
     initialize = false,
   }) {
     // Set DOM elements.
@@ -295,6 +307,9 @@ class Carousel {
     // Set prefix.
     this._prefix = prefix || "";
 
+    // Set the key.
+    this._key = key || "";
+
     if (initialize) {
       this.initialize();
     }
@@ -313,21 +328,15 @@ class Carousel {
         );
       }
 
-      // Set DOM elements.
+      // Set up the DOM.
+      this._generateKey();
       this._setDOMElements();
-
-      // Set ids.
       this._setIds();
-
-      // Set aria attributes.
       this._setAriaAttributes();
 
       // Activate the first item.
       this.activateFirstItem();
 
-      // Set the custom props.
-      this._setTransitionDuration();
-
       // Handle events.
       this._handleAutoplay();
       this._handleFocus();
@@ -335,6 +344,13 @@ class Carousel {
       this._handleHover();
       this._handleKeydown();
       this._handleKeyup();
+
+      // Set the custom props.
+      this._setTransitionDuration();
+
+      // Set up the storage.
+      storage.initializeStorage("carousels");
+      storage.pushToStorage("carousels", this.dom.carousel.id, this);
     } catch (error) {
       console.error(error);
     }
@@ -520,6 +536,17 @@ class Carousel {
     return this._prefix;
   }
 
+  /**
+   * The key used to generate IDs throughout the accordion.
+   *
+   * @type {string}
+   *
+   * @see _key
+   */
+  get key() {
+    return this._key;
+  }
+
   /**
    * The current action being performed by the carousel.
    *
@@ -659,6 +686,14 @@ class Carousel {
     }
   }
 
+  set key(value) {
+    isValidType("string", { value });
+
+    if (this._key !== value) {
+      this._key = value;
+    }
+  }
+
   /**
    * Validates all aspects of the carousel to ensure proper functionality.
    *
@@ -941,20 +976,36 @@ class Carousel {
   }
 
   /**
-   * Sets the ids for the carousel items and tabs.
+   * Generates a key for the carousel.
+   *
+   * @param {boolean} [regenerate = false] - A flag to determine if the key should be regenerated.
+   */
+  _generateKey(regenerate = false) {
+    if (this.key === "" || regenerate) {
+      this.key = Math.random()
+        .toString(36)
+        .replace(/[^a-z]+/g, "")
+        .substring(0, 10);
+    }
+  }
+
+  /**
+   * Sets the IDs of the carousel and it's children if they do not already exist.
+   *
+   * The generated IDs use the key and follow the format:
+   *  - carousel: `carousel-${key}`
+   *  - carousel items: `carousel-item-${key}-${index}`
+   *  - carousel tabs: `carousel-tab-${key}-${index}`
    */
   _setIds() {
-    const randomString = Math.random()
-      .toString(36)
-      .replace(/[^a-z]+/g, "")
-      .substring(0, 10);
+    this.dom.carousel.id = this.dom.carousel.id || `carousel-${this.key}`;
 
     this.dom.carouselItems.forEach((item, index) => {
-      item.id = item.id || `carousel-item-${randomString}-${index}`;
+      item.id = item.id || `carousel-item-${this.key}-${index}`;
     });
 
     this.dom.carouselTabs.forEach((tab, index) => {
-      tab.id = tab.id || `carousel-tab-${randomString}-${index}`;
+      tab.id = tab.id || `carousel-tab-${this.key}-${index}`;
     });
   }
 

package/src/js/carousel/index.js

@@ -1,20 +1,10 @@
 import Carousel from "./Carousel.js";
 
 document.addEventListener("DOMContentLoaded", () => {
-  const carousels = [];
-
   document.querySelectorAll(".carousel").forEach((carouselElement) => {
-    const carousel = new Carousel({
+    new Carousel({
       carouselElement,
       initialize: true,
     });
-
-    carousels.push(carousel);
   });
-
-  const graupl = window.Graupl || {};
-
-  graupl.carousels = carousels;
-
-  window.Graupl = graupl;
 });

package/src/js/eventHandlers.js

@@ -12,6 +12,13 @@ export function keyPress(event) {
       Enter: key === "Enter" || key === 13,
       Space: key === " " || key === "Spacebar" || key === 32,
       Escape: key === "Escape" || key === "Esc" || key === 27,
+      ArrowUp: key === "ArrowUp" || key === "Up" || key === 38,
+      ArrowRight: key === "ArrowRight" || key === "Right" || key === 39,
+      ArrowDown: key === "ArrowDown" || key === "Down" || key === 40,
+      ArrowLeft: key === "ArrowLeft" || key === "Left" || key === 37,
+      Home: key === "Home" || key === 36,
+      End: key === "End" || key === 35,
+      Tab: key === "Tab" || key === 9,
     };
 
     return Object.keys(keys).find((key) => keys[key] === true) || "";

package/src/js/storage.js

@@ -0,0 +1,106 @@
+/**
+ * @file
+ * Provides a system to get and store Graupl data in the browser.
+ */
+
+import { isValidType } from "./validate.js";
+
+/**
+ * Initializes the storage system.
+ *
+ * @param {?string} [type = null] - The type of storage to initialize.
+ */
+export function initializeStorage(type = null) {
+  window.Graupl = window.Graupl || {};
+
+  if (isValidType("string", { type })) {
+    window.Graupl[type] = window.Graupl[type] || {};
+  }
+}
+
+/**
+ * Get the storage object.
+ *
+ * @param  {?string} type - The type of storage to get.
+ * @return {object}       - The storage object.
+ */
+export function getStorage(type = null) {
+  if (isValidType("string", { type })) {
+    return window.Graupl[type];
+  }
+
+  return window.Graupl;
+}
+
+/**
+ * Set the storage object of a given type.
+ *
+ * @param {string} type - The type of storage to set.
+ * @param {object} data - The data to set.
+ */
+export function setStorage(type, data = {}) {
+  if (isValidType("string", { type }) && isValidType("object", { data })) {
+    window.Graupl[type] = data;
+  }
+}
+
+/**
+ * Clear the storage object of a given type.
+ *
+ * @param {string} type - The type of storage to clear.
+ */
+export function clearStorage(type) {
+  if (isValidType("string", { type })) {
+    window.Graupl[type] = {};
+  }
+}
+
+/**
+ * Push a value to the storage object.
+ *
+ * @param {string} type  - The type of storage to push to.
+ * @param {string} key   - The key to use for the value.
+ * @param {*}      value - The value to store.
+ */
+export function pushToStorage(type, key, value) {
+  if (isValidType("string", { type, key })) {
+    window.Graupl[type][key] = value;
+  }
+}
+
+/**
+ * Get a value from the storage object.
+ *
+ * @param  {string }type - The type of storage to get from.
+ * @param  {string }key  - The key to get the value from.
+ * @return {*}           - The value from the storage object.
+ */
+export function getFromStorage(type, key) {
+  if (isValidType("string", { type, key })) {
+    return window.Graupl[type][key];
+  }
+
+  return null;
+}
+
+/**
+ * Remove a value from the storage object.
+ *
+ * @param {string} type - The type of storage to remove from.
+ * @param {string} key  - The key to remove the value from.
+ */
+export function removeFromStorage(type, key) {
+  if (isValidType("string", { type, key })) {
+    delete window.Graupl[type][key];
+  }
+}
+
+export default {
+  initializeStorage,
+  getStorage,
+  setStorage,
+  clearStorage,
+  pushToStorage,
+  getFromStorage,
+  removeFromStorage,
+};

package/src/scss/_defaults.scss

@@ -31,6 +31,7 @@ $base-screen-size-triggers: (
   navigation-collapse: "(width <= 72ch)",
   navigation-expand: "(72ch < width)",
   force-vertical-card: "(width <= 72ch)",
+  force-single-column: "(width <= 48ch)",
 );
 $custom-screen-size-triggers: () !default;
 $screen-size-triggers: map.merge(
@@ -81,3 +82,31 @@ $transition-durations: map.merge(
   $base-transition-durations,
   $custom-transition-durations
 );
+
+// State selectors.
+$base-state-selectors: (
+  visited: (
+    ".visited",
+    ":visited",
+  ),
+  focus: (
+    ".focus",
+    ":focus-visible",
+  ),
+  hover: (
+    ".hover",
+    ":hover",
+  ),
+  active: (
+    ".active",
+    ":active",
+  ),
+  disabled: (
+    ".disabled",
+    ":disabled",
+    "[disabled]",
+    "[aria-disabled=true]",
+  ),
+);
+$custom-state-selectors: () !default;
+$state-selectors: map.merge($base-state-selectors, $custom-state-selectors);

package/src/scss/base/button/_mixins.scss

@@ -56,41 +56,42 @@
     font-size: $font-size;
     cursor: pointer;
 
-    &:visited,
-    &#{defaults.$button-visited-selector} {
-      --#{root-defaults.$prefix}-button-transform: #{$visited-transform};
+    @each $selector in map.get(root-defaults.$state-selectors, visited) {
+      &#{$selector} {
+        --#{root-defaults.$prefix}-button-transform: #{$visited-transform};
+      }
     }
 
-    &:focus-visible,
-    &#{defaults.$button-focus-selector} {
-      --#{root-defaults.$prefix}-button-transform: #{$focus-transform};
+    @each $selector in map.get(root-defaults.$state-selectors, focus) {
+      &#{$selector} {
+        --#{root-defaults.$prefix}-button-transform: #{$focus-transform};
+      }
     }
 
-    &:hover,
-    &#{defaults.$button-hover-selector} {
-      --#{root-defaults.$prefix}-button-transform: #{$hover-transform};
+    @each $selector in map.get(root-defaults.$state-selectors, hover) {
+      &#{$selector} {
+        --#{root-defaults.$prefix}-button-transform: #{$hover-transform};
+      }
     }
 
-    &:active,
-    &#{defaults.$button-active-selector} {
-      --#{root-defaults.$prefix}-button-transform: #{$active-transform};
+    @each $selector in map.get(root-defaults.$state-selectors, active) {
+      &#{$selector} {
+        --#{root-defaults.$prefix}-button-transform: #{$active-transform};
+      }
     }
 
-    &:disabled,
-    &[disabled],
-    &#{defaults.$button-disabled-selector} {
-      cursor: not-allowed;
-
-      &,
-      &:visited,
-      &#{defaults.$button-visited-selector},
-      &:focus-visible,
-      &#{defaults.$button-focus-selector},
-      &:hover,
-      &#{defaults.$button-hover-selector},
-      &:active,
-      &#{defaults.$button-active-selector} {
-        --#{root-defaults.$prefix}-button-transform: #{$disabled-transform};
+    @each $selector in map.get(root-defaults.$state-selectors, disabled) {
+      &#{$selector} {
+        @each $state, $selectors in root-defaults.$state-selectors {
+          @each $selector in $selectors {
+            &,
+            &#{$selector} {
+              --#{root-defaults.$prefix}-button-transform: #{$disabled-transform};
+
+              cursor: not-allowed;
+            }
+          }
+        }
       }
     }
 
@@ -115,49 +116,50 @@
       }
     }
 
-    &:visited,
-    &#{defaults.$button-visited-selector} {
-      --#{root-defaults.$prefix}-button-border-color: #{$visited-border-color};
-      --#{root-defaults.$prefix}-button-background: #{$visited-background};
-      --#{root-defaults.$prefix}-button-color: #{$visited-color};
+    @each $selector in map.get(root-defaults.$state-selectors, visited) {
+      &#{$selector} {
+        --#{root-defaults.$prefix}-button-border-color: #{$visited-border-color};
+        --#{root-defaults.$prefix}-button-background: #{$visited-background};
+        --#{root-defaults.$prefix}-button-color: #{$visited-color};
+      }
     }
 
-    &:focus-visible,
-    &#{defaults.$button-focus-selector} {
-      --#{root-defaults.$prefix}-button-border-color: #{$focus-border-color};
-      --#{root-defaults.$prefix}-button-background: #{$focus-background};
-      --#{root-defaults.$prefix}-button-color: #{$focus-color};
+    @each $selector in map.get(root-defaults.$state-selectors, focus) {
+      &#{$selector} {
+        --#{root-defaults.$prefix}-button-border-color: #{$focus-border-color};
+        --#{root-defaults.$prefix}-button-background: #{$focus-background};
+        --#{root-defaults.$prefix}-button-color: #{$focus-color};
+      }
     }
 
-    &:hover,
-    &#{defaults.$button-hover-selector} {
-      --#{root-defaults.$prefix}-button-border-color: #{$hover-border-color};
-      --#{root-defaults.$prefix}-button-background: #{$hover-background};
-      --#{root-defaults.$prefix}-button-color: #{$hover-color};
+    @each $selector in map.get(root-defaults.$state-selectors, hover) {
+      &#{$selector} {
+        --#{root-defaults.$prefix}-button-border-color: #{$hover-border-color};
+        --#{root-defaults.$prefix}-button-background: #{$hover-background};
+        --#{root-defaults.$prefix}-button-color: #{$hover-color};
+      }
     }
 
-    &:active,
-    &#{defaults.$button-active-selector} {
-      --#{root-defaults.$prefix}-button-border-color: #{$active-border-color};
-      --#{root-defaults.$prefix}-button-background: #{$active-background};
-      --#{root-defaults.$prefix}-button-color: #{$active-color};
+    @each $selector in map.get(root-defaults.$state-selectors, active) {
+      &#{$selector} {
+        --#{root-defaults.$prefix}-button-border-color: #{$active-border-color};
+        --#{root-defaults.$prefix}-button-background: #{$active-background};
+        --#{root-defaults.$prefix}-button-color: #{$active-color};
+      }
     }
 
-    &:disabled,
-    &[disabled],
-    &#{defaults.$button-disabled-selector} {
-      &,
-      &:visited,
-      &#{defaults.$button-visited-selector},
-      &:focus-visible,
-      &#{defaults.$button-focus-selector},
-      &:hover,
-      &#{defaults.$button-hover-selector},
-      &:active,
-      &#{defaults.$button-active-selector} {
-        --#{root-defaults.$prefix}-button-border-color: #{$disabled-border-color};
-        --#{root-defaults.$prefix}-button-background: #{$disabled-background};
-        --#{root-defaults.$prefix}-button-color: #{$disabled-color};
+    @each $selector in map.get(root-defaults.$state-selectors, disabled) {
+      &#{$selector} {
+        @each $state, $selectors in root-defaults.$state-selectors {
+          @each $selector in $selectors {
+            &,
+            &#{$selector} {
+              --#{root-defaults.$prefix}-button-border-color: #{$disabled-border-color};
+              --#{root-defaults.$prefix}-button-background: #{$disabled-background};
+              --#{root-defaults.$prefix}-button-color: #{$disabled-color};
+            }
+          }
+        }
       }
     }
   }

package/src/scss/component/_index.scss

@@ -1,6 +1,7 @@
 // @graupl/graupl component styles.
 
 @forward "alert";
+@forward "accordion";
 @forward "card";
 @forward "carousel";
 @forward "input-group";

package/src/scss/component/accordion/_defaults.scss

@@ -0,0 +1,40 @@
+// @graupl/graupl accordion component default values.
+//
+// Generally, these should not be used directly when styling components unless a static value is needed.
+// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
+//
+// They should not be used to define direct property values (i.e. font-size, color, etc.).
+// Those should be defined as custom properties in the `_variables.scss` file.
+
+@use "sass:map";
+
+// Accordion selectors.
+$accordion-selector: ".accordion" !default;
+$accordion-item-selector: ".accordion-item" !default;
+$accordion-item-header-selector: ".accordion-item-header" !default;
+$accordion-item-title-selector: ".accordion-item-title" !default;
+$accordion-item-toggle-selector: ".accordion-item-toggle" !default;
+$accordion-item-content-selector: ".accordion-item-content" !default;
+$accordion-item-body-selector: ".accordion-item-body" !default;
+$accordion-item-footer-selector: ".accordion-item-footer" !default;
+$accordion-item-open-selector: ".show" !default;
+$accordion-item-close-selector: ".hide" !default;
+$accordion-item-transition-selector: ".transitioning" !default;
+$accordion-item-toggle-pseudo-selector: "::after" !default;
+
+// Toggle transform properties.
+$accordion-item-toggle-transform: none !default;
+$accordion-item-toggle-visited-transform: $accordion-item-toggle-transform !default;
+$accordion-item-toggle-focus-transform: $accordion-item-toggle-transform !default;
+$accordion-item-toggle-hover-transform: $accordion-item-toggle-transform !default;
+$accordion-item-toggle-active-transform: $accordion-item-toggle-transform !default;
+$accordion-item-toggle-disabled-transform: $accordion-item-toggle-transform !default;
+$accordion-item-toggle-pseudo-transform: none !default;
+$accordion-item-toggle-pseudo-open-transform: rotate(-180deg) !default;
+
+// Toggle properties.
+$accordion-item-toggle-pseudo-content: "▼" !default;
+
+// Accordion transform properties.
+$accordion-item-content-transform: translateY(-100%) !default;
+$accordion-item-content-open-transform: translateY(0) !default;