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

package/src/js/carousel/index.js

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

package/src/js/domHelpers.js

@@ -0,0 +1,37 @@
+/**
+ * Add a class or array of classes to an element.
+ *
+ * @param {string|string[]} className - The class or classes to add.
+ * @param {HTMLElement} element - The element to add the class to.
+ */
+export function addClass(className, element) {
+  // Gracefully handle empty strings or arrays.
+  if (className === "" || className.length === 0) {
+    return;
+  }
+
+  if (typeof className === "string") {
+    element.classList.add(className);
+  } else {
+    element.classList.add(...className);
+  }
+}
+
+/**
+ * Remove a class or array of classes from an element.
+ *
+ * @param {string|string[]} className - The class or classes to remove.
+ * @param {HTMLElement} element - The element to remove the class from.
+ */
+export function removeClass(className, element) {
+  // Gracefully handle empty strings or arrays.
+  if (className === "" || className.length === 0) {
+    return;
+  }
+
+  if (typeof className === "string") {
+    element.classList.remove(className);
+  } else {
+    element.classList.remove(...className);
+  }
+}

package/src/js/eventHandlers.js

@@ -0,0 +1,32 @@
+/**
+ * Retrieves the pressed key from an event.
+ *
+ * @param   {KeyboardEvent} event - The keyboard event.
+ * @return  {string}              - The name of the key or an empty string.
+ */
+export function keyPress(event) {
+  try {
+    // Use event.key or event.keyCode to support older browsers.
+    const key = event.key || event.keyCode;
+    const keys = {
+      Enter: key === "Enter" || key === 13,
+      Space: key === " " || key === "Spacebar" || key === 32,
+      Escape: key === "Escape" || key === "Esc" || key === 27,
+    };
+
+    return Object.keys(keys).find((key) => keys[key] === true) || "";
+  } catch {
+    // Return an empty string if something goes wrong.
+    return "";
+  }
+}
+
+/**
+ * Stops an event from taking action.
+ *
+ * @param {Event} event - The event.
+ */
+export function preventEvent(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}

package/src/js/navigation.js

@@ -0,0 +1,34 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const navs = document.querySelectorAll(".navigation");
+  const menus = [];
+
+  navs.forEach((nav) => {
+    const MenuConstructor = nav.dataset.grauplMenuType || DisclosureMenu;
+
+    if (window[MenuConstructor] === undefined) {
+      console.warn(
+        `Graupl navigation requires accessible-menu's ${MenuConstructor}. Please make sure to include it on this page.`
+      );
+
+      return;
+    }
+
+    const menuOptions =
+      JSON.parse(nav.dataset.grauplMenuOptions.replace(/'/g, '"')) || {};
+    const menuElement = nav.querySelector(".menu");
+    const controllerElement = nav.querySelector(".navigation-toggle");
+    const containerElement = nav;
+    const menu = new window[MenuConstructor]({
+      menuElement,
+      menuItemSelector: ".menu-item",
+      menuLinkSelector: ".menu-link",
+      submenuItemSelector: ".submenu-item",
+      submenuToggleSelector: ".submenu-toggle",
+      controllerElement,
+      containerElement,
+      ...menuOptions,
+    });
+
+    menus.push(menu);
+  });
+});

package/src/js/validate.js

@@ -0,0 +1,225 @@
+/**
+ * Check to see if the provided elements have a specific contructor.
+ *
+ * The values must be provided inside of an object
+ * so the variable name can be retrieved in case of errors.
+ *
+ * This is essentially just a wrapper function around checking instanceof with
+ * more descriptive error message to help debugging.
+ *
+ * Will return `{ status: true }` if the check is successful.
+ *
+ * @param  {object}                  contructor - The constructor to check for.
+ * @param  {object}                  elements   - The element(s) to check.
+ * @return {Object<boolean, string>}            - The result of the check.
+ */
+export function isValidInstance(contructor, elements) {
+  try {
+    if (typeof elements !== "object") {
+      const elementsType = typeof elements;
+
+      throw new TypeError(
+        `Elements given to isValidInstance() must be inside of an object. "${elementsType}" given.`
+      );
+    }
+
+    for (const key in elements) {
+      if (!(elements[key] instanceof contructor)) {
+        const elementType = typeof elements[key];
+        throw new TypeError(
+          `${key} must be an instance of ${contructor.name}. "${elementType}" given.`
+        );
+      }
+    }
+
+    return {
+      status: true,
+      error: null,
+    };
+  } catch (error) {
+    return {
+      status: false,
+      error,
+    };
+  }
+}
+
+/**
+ * Check to see if the provided values are of a specific type.
+ *
+ * The values must be provided inside of an object
+ * so the variable name can be retrieved in case of errors.
+ *
+ * This is essentially just a wrapper function around checking typeof with
+ * more descriptive error message to help debugging.
+ *
+ * Will return `{ status: true }` if the check is successful.
+ *
+ * @param  {string}                  type   - The type to check for.
+ * @param  {object}                  values - The value(s) to check.
+ * @return {Object<boolean, string>}        - The result of the check.
+ */
+export function isValidType(type, values) {
+  try {
+    if (typeof values !== "object") {
+      const valuesType = typeof values;
+
+      throw new TypeError(
+        `Values given to isValidType() must be inside of an object. "${valuesType}" given.`
+      );
+    }
+
+    for (const key in values) {
+      const valueType = typeof values[key];
+
+      if (valueType !== type) {
+        throw new TypeError(`${key} must be a ${type}. "${valueType}" given.`);
+      }
+    }
+
+    return {
+      status: true,
+      error: null,
+    };
+  } catch (error) {
+    return {
+      status: false,
+      error,
+    };
+  }
+}
+
+/**
+ * Checks to see if the provided values are valid query selectors.
+ *
+ * The values must be provided inside of an object
+ * so the variable name can be retrieved in case of errors.
+ *
+ * Will return `{ status: true }` if the check is successful.
+ *
+ * @param  {Object<string>}          values - The value(s) to check.
+ * @return {Object<boolean, string>}        - The result of the check.
+ */
+export function isQuerySelector(values) {
+  try {
+    if (typeof values !== "object") {
+      const type = typeof values;
+
+      throw new TypeError(
+        `Values given to isQuerySelector() must be inside of an object. "${type}" given.`
+      );
+    }
+
+    for (const key in values) {
+      try {
+        if (values[key] === null) {
+          throw new Error();
+        }
+
+        document.querySelector(values[key]);
+      } catch {
+        throw new TypeError(
+          `${key} must be a valid query selector. "${values[key]}" given.`
+        );
+      }
+    }
+
+    return {
+      status: true,
+      error: null,
+    };
+  } catch (error) {
+    return {
+      status: false,
+      error,
+    };
+  }
+}
+
+/**
+ * Checks to see if the provided value is either a string or an array of strings.
+ *
+ * The values must be provided inside of an object
+ * so the variable name can be retrieved in case of errors.
+ *
+ * Will return `{ status: true }` if the check is successful.
+ *
+ * @param  {Object<string, string[]>} values - The value(s) to check.
+ * @return {Object<boolean, string>}         - The result of the check.
+ */
+export function isValidClassList(values) {
+  try {
+    if (typeof values !== "object" || Array.isArray(values)) {
+      const type = typeof values;
+
+      throw new TypeError(
+        `Values given to isValidClassList() must be inside of an object. "${type}" given.`
+      );
+    }
+
+    for (const key in values) {
+      const type = typeof values[key];
+
+      if (type !== "string") {
+        if (Array.isArray(values[key])) {
+          values[key].forEach((value) => {
+            if (typeof value !== "string") {
+              throw new TypeError(
+                `${key} must be a string or an array of strings. An array containing non-strings given.`
+              );
+            }
+          });
+        } else {
+          throw new TypeError(
+            `${key} must be a string or an array of strings. "${type}" given.`
+          );
+        }
+      } else {
+        const obj = {};
+        obj[key] = values[key];
+
+        isQuerySelector(obj);
+      }
+    }
+
+    return {
+      status: true,
+      error: null,
+    };
+  } catch (error) {
+    return {
+      status: false,
+      error,
+    };
+  }
+}
+
+/**
+ * Checks to see if the provided elements are using a specific tag.
+ *
+ * The elements must be provided inside of an object
+ * so the variable name can be retrieved in case of errors.
+ *
+ * Will return `true` if the check is successful.
+ *
+ * @param  {string}               tagName - The name of the tag.
+ * @param  {Object<HTMLElement>} elements - The element(s) to check.
+ * @return {boolean}                      - The result of the check.
+ */
+export function isTag(tagName, elements) {
+  if (
+    isValidType("string", { tagName }).status &&
+    isValidInstance(HTMLElement, elements).status
+  ) {
+    const tag = tagName.toLowerCase();
+    let check = true;
+
+    for (const key in elements) {
+      if (elements[key].tagName.toLowerCase() !== tag) check = false;
+    }
+
+    return check;
+  } else {
+    return false;
+  }
+}

package/src/scss/_defaults.scss

@@ -19,10 +19,24 @@ $content-max-width: 96ch !default;
 
 // Screen sizes.
 $base-screen-sizes: (
-  xs: "(0 <= width <= 48ch)",
+  xs: "(width <= 48ch)",
+  sm: "(48ch < width)",
+  md: "(72ch < width)",
+  lg: "(108ch < width)",
+  xl: "(156ch < width)",
 );
 $custom-screen-sizes: () !default;
 $screen-sizes: map.merge($base-screen-sizes, $custom-screen-sizes);
+$base-screen-size-triggers: (
+  navigation-collapse: "(width <= 72ch)",
+  navigation-expand: "(72ch < width)",
+  force-vertical-card: "(width <= 72ch)",
+);
+$custom-screen-size-triggers: () !default;
+$screen-size-triggers: map.merge(
+  $base-screen-size-triggers,
+  $custom-screen-size-triggers
+);
 
 // Spacing properties.
 $spacer: 1rem !default;

package/src/scss/base/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl base styles.
+// @graupl/graupl base styles.
 
 @forward "button";
 @forward "form";

package/src/scss/base/button/_defaults.scss

@@ -13,12 +13,20 @@ $button-selector: ".button" !default;
 $button-link-selector: ".link" !default;
 $button-theme-selector-prefix: "." !default;
 
+// State selectors.
+$button-active-selector: ".active" !default;
+$button-disabled-selector: ".disabled" !default;
+$button-focus-selector: ".focus" !default;
+$button-hover-selector: ".hover" !default;
+$button-visited-selector: ".visited" !default;
+
 // Button properties.
 $button-transform: none !default;
-$button-hover-transform: none !default;
-$button-hover-transform-reduced-motion: none !default;
+$button-visited-transform: $button-transform !default;
+$button-focus-transform: $button-transform !default;
+$button-hover-transform: $button-transform !default;
 $button-active-transform: scale(0.95) !default;
-$button-active-transform-reduced-motion: scale(0.98) !default;
+$button-disabled-transform: $button-transform !default;
 
 // Button state theme defaults.
 // This map is used to define the default colour shades for the
@@ -32,6 +40,10 @@ $button-active-transform-reduced-motion: scale(0.98) !default;
 $base-button-state-theme-map: (
   color: 900,
   border-color: 700,
+  visited-color: 900,
+  visited-border-color: 700,
+  focus-color: 900,
+  focus-border-color: 700,
   hover-color: 100,
   hover-background: 700,
   hover-border-color: 700,

package/src/scss/base/button/_index.scss

@@ -1,147 +1,107 @@
-// @gruapl/graupl button base styles.
+// @graupl/graupl button base styles.
 
 @use "defaults";
 @use "../../defaults" as root-defaults;
-@use "../../theme/color/variables" as color;
+@use "../link/defaults" as link-defaults;
 @use "../../base/link/variables" as link;
 @use "variables" as *;
+@use "mixins" as *;
 @use "../../mixins/layer" as *;
-@use "../../mixins/media-queries" as *;
-@use "sass:map";
 
-@include layer(base) {
-  #{defaults.$button-selector} {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: $button-min-width;
-    min-height: $button-min-height;
-    padding: $button-padding;
-    transform: $button-transform;
-    transition: $button-transition;
-    border-width: $button-border-width;
-    border-style: $button-border-style;
-    border-radius: $button-border-radius;
-    font-size: $button-font-size;
-    cursor: pointer;
-
-    &:hover {
-      --#{root-defaults.$prefix}-button-transform: #{$button-hover-transform};
-    }
+#{defaults.$button-selector} {
+  @include apply-button;
+
+  &#{defaults.$button-link-selector} {
+    --#{root-defaults.$prefix}-button-padding: #{link.$link-padding};
+    --#{root-defaults.$prefix}-button-transition: #{link.$link-transition};
+    --#{root-defaults.$prefix}-button-transition-reduced-motion: #{link.$link-transition-reduced-motion};
+    --#{root-defaults.$prefix}-button-transform: #{link.$link-transform};
+    --#{root-defaults.$prefix}-button-visited-transform: #{link.$link-visited-transform};
+    --#{root-defaults.$prefix}-button-focus-transform: #{link.$link-transform};
+    --#{root-defaults.$prefix}-button-hover-transform: #{link.$link-hover-transform};
+    --#{root-defaults.$prefix}-button-active-transform: #{link.$link-active-transform};
+    --#{root-defaults.$prefix}-button-border-width: #{link.$link-border-width};
+    --#{root-defaults.$prefix}-button-border-style: #{link.$link-border-style};
+    --#{root-defaults.$prefix}-button-border-radius: #{link.$link-border-radius};
+    --#{root-defaults.$prefix}-button-min-width: #{link.$link-min-width};
+    --#{root-defaults.$prefix}-button-min-height: #{link.$link-min-height};
+    --#{root-defaults.$prefix}-button-font-size: inherit;
+
+    text-decoration: link.$link-text-decoration;
+    text-decoration-thickness: link.$link-text-decoration-thickness;
+    text-decoration-style: link.$link-text-decoration-style;
+  }
+}
 
-    &:active {
-      --#{root-defaults.$prefix}-button-transform: #{$button-active-transform};
-    }
+@include layer(base) {
+  #{defaults.$button-selector}#{defaults.$button-link-selector} {
+    --#{root-defaults.$prefix}-button-color: #{link.$link-color};
+    --#{root-defaults.$prefix}-button-visited-color: #{link.$link-visited-color};
+    --#{root-defaults.$prefix}-button-focus-color: #{link.$link-focus-color};
+    --#{root-defaults.$prefix}-button-hover-color: #{link.$link-hover-color};
+    --#{root-defaults.$prefix}-button-active-color: #{link.$link-active-color};
+    --#{root-defaults.$prefix}-button-disabled-color: #{link.$link-disabled-color};
+    --#{root-defaults.$prefix}-button-background: #{link.$link-background};
+    --#{root-defaults.$prefix}-button-visited-background: #{link.$link-visited-background};
+    --#{root-defaults.$prefix}-button-focus-background: #{link.$link-focus-background};
+    --#{root-defaults.$prefix}-button-hover-background: #{link.$link-hover-background};
+    --#{root-defaults.$prefix}-button-active-background: #{link.$link-active-background};
+    --#{root-defaults.$prefix}-button-disabled-background: #{link.$link-disabled-background};
+    --#{root-defaults.$prefix}-button-border-color: #{link.$link-border-color};
+    --#{root-defaults.$prefix}-button-visited-border-color: #{link.$link-visited-border-color};
+    --#{root-defaults.$prefix}-button-focus-border-color: #{link.$link-focus-border-color};
+    --#{root-defaults.$prefix}-button-hover-border-color: #{link.$link-hover-border-color};
+    --#{root-defaults.$prefix}-button-active-border-color: #{link.$link-active-border-color};
+    --#{root-defaults.$prefix}-button-disabled-border-color: #{link.$link-disabled-border-color};
+  }
 
-    &:not(#{defaults.$button-link-selector}) {
-      --#{root-defaults.$prefix}-link-text-decoration: none;
+  #{link-defaults.$link-selector} {
+    &#{defaults.$button-selector}:not(#{defaults.$button-link-selector}) {
       --#{root-defaults.$prefix}-link-padding: #{$button-padding};
       --#{root-defaults.$prefix}-link-transition: #{$button-transition};
       --#{root-defaults.$prefix}-link-transition-reduced-motion: #{$button-transition-reduced-motion};
       --#{root-defaults.$prefix}-link-transform: #{$button-transform};
+      --#{root-defaults.$prefix}-link-visited-transform: #{$button-visited-transform};
+      --#{root-defaults.$prefix}-link-focus-transform: #{$button-focus-transform};
       --#{root-defaults.$prefix}-link-hover-transform: #{$button-hover-transform};
       --#{root-defaults.$prefix}-link-active-transform: #{$button-active-transform};
-    }
-
-    &:disabled,
-    &[disabled] {
-      cursor: not-allowed;
-
-      &:hover,
-      &:active {
-        transform: none;
-      }
-    }
-
-    &#{defaults.$button-link-selector} {
-      --#{root-defaults.$prefix}-button-padding: #{link.$link-padding};
-      --#{root-defaults.$prefix}-button-transition: #{link.$link-transition};
-      --#{root-defaults.$prefix}-button-transition-reduced-motion: #{link.$link-transition-reduced-motion};
-      --#{root-defaults.$prefix}-button-transform: #{link.$link-transform};
-      --#{root-defaults.$prefix}-button-hover-transform: #{link.$link-hover-transform};
-      --#{root-defaults.$prefix}-button-active-transform: #{link.$link-active-transform};
-
-      min-width: auto;
-      min-height: auto;
-      border: 0;
-      font-size: inherit;
-      text-decoration: link.$link-text-decoration;
-      text-decoration-thickness: link.$link-text-decoration-thickness;
-    }
-  }
-
-  @include animation-off {
-    #{defaults.$button-selector} {
-      --#{root-defaults.$prefix}-button-transition: #{$button-transition-reduced-motion};
-      --#{root-defaults.$prefix}-button-hover-transform: #{$button-hover-transform-reduced-motion};
-      --#{root-defaults.$prefix}-button-active-transform: #{$button-active-transform-reduced-motion};
+      --#{root-defaults.$prefix}-link-disabled-transform: #{$button-disabled-transform};
+      --#{root-defaults.$prefix}-link-border-width: #{$button-border-width};
+      --#{root-defaults.$prefix}-link-border-style: #{$button-border-style};
+      --#{root-defaults.$prefix}-link-border-radius: #{$button-border-radius};
+      --#{root-defaults.$prefix}-link-min-width: #{$button-min-width};
+      --#{root-defaults.$prefix}-link-min-height: #{$button-min-height};
+      --#{root-defaults.$prefix}-link-text-decoration: none;
+      --#{root-defaults.$prefix}-link-visited-text-decoration: none;
+      --#{root-defaults.$prefix}-link-focus-text-decoration: none;
+      --#{root-defaults.$prefix}-link-hover-text-decoration: none;
+      --#{root-defaults.$prefix}-link-active-text-decoration: none;
+      --#{root-defaults.$prefix}-link-disabled-text-decoration: none;
     }
   }
 }
 
 @include layer(theme) {
-  #{defaults.$button-selector} {
-    border-color: $button-border-color;
-    background: $button-background;
-    color: $button-color;
-
-    @each $color, $map in color.$theme-active {
-      &#{defaults.$button-theme-selector-prefix}#{$color} {
-        @each $prop, $shade in defaults.$button-state-theme-map {
-          --#{root-defaults.$prefix}-button-#{$prop}: #{map.get($map, $shade)};
-        }
-      }
-    }
-
-    &#{defaults.$button-link-selector} {
-      --#{root-defaults.$prefix}-button-color: #{link.$link-color};
-      --#{root-defaults.$prefix}-button-hover-color: #{link.$link-hover-color};
-      --#{root-defaults.$prefix}-button-active-color: #{link.$link-active-color};
-      --#{root-defaults.$prefix}-button-disabled-color: #{link.$link-disabled-color};
-      --#{root-defaults.$prefix}-button-background: #{link.$link-background};
-      --#{root-defaults.$prefix}-button-hover-background: #{link.$link-hover-background};
-      --#{root-defaults.$prefix}-button-active-background: #{link.$link-active-background};
-      --#{root-defaults.$prefix}-button-disabled-background: #{link.$link-disabled-background};
-      --#{root-defaults.$prefix}-button-border-color: none;
-      --#{root-defaults.$prefix}-button-hover-border-color: none;
-      --#{root-defaults.$prefix}-button-active-border-color: none;
-      --#{root-defaults.$prefix}-button-disabled-border-color: none;
-      --#{root-defaults.$prefix}-button-hover-transform: none;
-      --#{root-defaults.$prefix}-button-active-transform: none;
-    }
-
-    &:not(#{defaults.$button-link-selector}) {
+  #{link-defaults.$link-selector} {
+    &#{defaults.$button-selector}:not(#{defaults.$button-link-selector}) {
       --#{root-defaults.$prefix}-link-color: #{$button-color};
+      --#{root-defaults.$prefix}-link-visited-color: #{$button-visited-color};
+      --#{root-defaults.$prefix}-link-focus-color: #{$button-focus-color};
       --#{root-defaults.$prefix}-link-hover-color: #{$button-hover-color};
       --#{root-defaults.$prefix}-link-active-color: #{$button-active-color};
-      --#{root-defaults.$prefix}-link-visited-color: #{$button-hover-color};
       --#{root-defaults.$prefix}-link-disabled-color: #{$button-disabled-color};
-    }
-
-    &:hover {
-      --#{root-defaults.$prefix}-button-border-color: #{$button-hover-border-color};
-      --#{root-defaults.$prefix}-button-background: #{$button-hover-background};
-      --#{root-defaults.$prefix}-button-color: #{$button-hover-color};
-    }
-
-    &:active {
-      --#{root-defaults.$prefix}-button-border-color: #{$button-active-border-color};
-      --#{root-defaults.$prefix}-button-background: #{$button-active-background};
-      --#{root-defaults.$prefix}-button-color: #{$button-active-color};
-    }
-
-    &:disabled,
-    &[disabled] {
-      --#{root-defaults.$prefix}-button-border-color: #{$button-disabled-border-color};
-      --#{root-defaults.$prefix}-button-background: #{$button-disabled-background};
-      --#{root-defaults.$prefix}-button-color: #{$button-disabled-color};
-
-      &:hover,
-      &:active {
-        --#{root-defaults.$prefix}-button-border-color: #{$button-disabled-border-color};
-        --#{root-defaults.$prefix}-button-background: #{$button-disabled-background};
-        --#{root-defaults.$prefix}-button-color: #{$button-disabled-color};
-      }
+      --#{root-defaults.$prefix}-link-background: #{$button-background};
+      --#{root-defaults.$prefix}-link-visited-background: #{$button-visited-background};
+      --#{root-defaults.$prefix}-link-focus-background: #{$button-focus-background};
+      --#{root-defaults.$prefix}-link-hover-background: #{$button-hover-background};
+      --#{root-defaults.$prefix}-link-active-background: #{$button-active-background};
+      --#{root-defaults.$prefix}-link-disabled-background: #{$button-disabled-background};
+      --#{root-defaults.$prefix}-link-border-color: #{$button-border-color};
+      --#{root-defaults.$prefix}-link-visited-border-color: #{$button-visited-border-color};
+      --#{root-defaults.$prefix}-link-focus-border-color: #{$button-focus-border-color};
+      --#{root-defaults.$prefix}-link-hover-border-color: #{$button-hover-border-color};
+      --#{root-defaults.$prefix}-link-active-border-color: #{$button-active-border-color};
+      --#{root-defaults.$prefix}-link-disabled-border-color: #{$button-disabled-border-color};
     }
   }
 }