@graupl/core 1.0.0-beta.19 → 1.0.0-beta.21

package/src/js/disclosure/generator.js

@@ -0,0 +1,47 @@
+import Disclosure from "./Disclosure.js";
+import once from "@drupal/once";
+
+const generate = ({
+  options = {},
+  context = document,
+  disclosureSelector = ".disclosure",
+  controllerSelector = ".disclosure-toggle",
+} = {}) => {
+  once("graupl-disclosure-generator", disclosureSelector, context).forEach(
+    (disclosureElement) => {
+      const disclosureOptions = disclosureElement.dataset
+        .grauplDisclosureOptions
+        ? JSON.parse(
+            disclosureElement.dataset.grauplDisclosureOptions.replace(/'/g, '"')
+          ) || {}
+        : {};
+
+      const targettedControllerSelector = `${controllerSelector}[data-graupl-disclosure-target="${disclosureElement.id}"]`;
+      const [controllerElement] = once(
+        "graupl-disclosure-generator",
+        targettedControllerSelector,
+        context
+      );
+
+      if (!controllerElement) {
+        console.warn(
+          `No controller found for disclosure with ID "${disclosureElement.id}". Please ensure there is an element with the selector "${targettedControllerSelector}".`
+        );
+
+        once.remove("graupl-disclosure-generator", disclosureElement);
+
+        return;
+      }
+
+      new Disclosure({
+        disclosureElement,
+        controllerElement,
+        initialize: true,
+        ...options,
+        ...disclosureOptions,
+      });
+    }
+  );
+};
+
+export default generate;

package/src/js/disclosure/index.js

@@ -0,0 +1,5 @@
+import generate from "./generator.js";
+
+document.addEventListener("DOMContentLoaded", () => {
+  generate();
+});

package/src/js/main.js

@@ -2,10 +2,12 @@ import accordionGenerator from "./accordion/generator.js";
 import alertGenerator from "./alert/generator.js";
 import carouselGenerator from "./carousel/generator.js";
 import navigationGenerator from "./navigation/generator.js";
+import disclosureGenerator from "./disclosure/generator.js";
 
 document.addEventListener("DOMContentLoaded", () => {
   accordionGenerator();
   alertGenerator();
   carouselGenerator();
   navigationGenerator();
+  disclosureGenerator();
 });

package/src/js/validate.js

@@ -1,5 +1,5 @@
 /**
- * Check to see if the provided elements have a specific contructor.
+ * Check to see if the provided elements have a specific constructor.
  *
  * The values must be provided inside of an object
  * so the variable name can be retrieved in case of errors.
@@ -9,11 +9,11 @@
  *
  * 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.
+ * @param  {object}                  constructor - 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) {
+export function isValidInstance(constructor, elements) {
   try {
     if (typeof elements !== "object") {
       const elementsType = typeof elements;
@@ -24,10 +24,10 @@ export function isValidInstance(contructor, elements) {
     }
 
     for (const key in elements) {
-      if (!(elements[key] instanceof contructor)) {
+      if (!(elements[key] instanceof constructor)) {
         const elementType = typeof elements[key];
         throw new TypeError(
-          `${key} must be an instance of ${contructor.name}. "${elementType}" given.`
+          `${key} must be an instance of ${constructor.name}. "${elementType}" given.`
         );
       }
     }

package/src/scss/_index.scss

@@ -1,15 +1,15 @@
 // @graupl/core styles.
 
 // Forward the layer initialization.
-@forward "init";
+@use "init";
 
 // Forward normalize.
-@forward "normalize";
+@use "normalize";
 
 // Forward all layers.
-@forward "base";
-@forward "layout";
-@forward "component";
-@forward "state";
-@forward "theme";
-@forward "utilities";
+@use "base";
+@use "layout";
+@use "component";
+@use "state";
+@use "theme";
+@use "utilities";

package/src/scss/base/_index.scss

@@ -1,6 +1,6 @@
 // @graupl/core base styles.
 
-@forward "button";
-@forward "form";
-@forward "link";
-@forward "table";
+@use "button";
+@use "form";
+@use "link";
+@use "table";

package/src/scss/component/_index.scss

@@ -1,10 +1,12 @@
 // @graupl/core component styles.
 
-@forward "alert";
-@forward "accordion";
-@forward "card";
-@forward "carousel";
-@forward "input-group";
-@forward "list";
-@forward "menu";
-@forward "navigation";
+@use "alert";
+@use "accordion";
+@use "badge";
+@use "card";
+@use "carousel";
+@use "disclosure";
+@use "input-group";
+@use "list";
+@use "menu";
+@use "navigation";

package/src/scss/component/badge/_defaults.scss

@@ -0,0 +1,47 @@
+// @graupl/core badge base default values.
+//
+// Generally, these should not be used directly when styling bases 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 "../../defaults" as root-defaults;
+@use "../../functions/theme";
+@use "sass:map";
+
+// Badge selectors.
+$selector-base: root-defaults.$component-selector-base !default;
+$modifier-selector-base: root-defaults.$modifier-selector-base !default;
+$generate-base-theme-map: root-defaults.$generate-base-theme-maps !default;
+$badge-selector-base: $selector-base !default;
+$badge-selector: "badge" !default;
+$badge-theme-selector-base: $modifier-selector-base !default;
+$badge-theme-selector-prefix: "" !default;
+
+// Badge state theme defaults.
+// This map is used to define the default colour shades for the
+// themed badge bases.
+//
+// e.g.
+// Primary badges will use primary--900 as the text colour, primary--100 as the background
+// and primary--900 as the border colour.
+//
+// Secondary/tertiary badges will use the same shade for their respective colours.
+$-badge-theme-mappings: (
+  color: 900,
+  border-color: 700,
+);
+$badge-theme-mappings: () !default;
+
+// Merge the custom badge state theme map with the default one.
+@if $generate-base-theme-map {
+  $badge-theme-mappings: map.merge(
+    $-badge-theme-mappings,
+    $badge-theme-mappings
+  );
+}
+
+$-badge-theme-map: theme.generate-property-map($badge-theme-mappings);
+$badge-theme-map: () !default;
+$badge-theme-map: map.deep-merge($-badge-theme-map, $badge-theme-map);

package/src/scss/component/badge/_index.scss

@@ -0,0 +1,201 @@
+// @graupl/core badge base styles.
+//
+// This module provides the base styles for the badge component.
+//
+// The badge component is meant to be used on <badge> or <a> elements, but can be applied to anything.
+//
+// The following selectors are generated by default:
+// - `.badge`: The badge component.
+// - `.primary`: A component modifier to use the primary colour for the badge component.
+// - `.secondary`: A component modifier to use the secondary colour for the badge component.
+// - `.tertiary`: A component modifier to use the tertiary colour for the badge component.
+// - `.link`: A component modifier to make the badge component look like a link component.
+//
+// The following custom properties can be used to customize the badge component:
+// | Property | Description | Default Value |
+// | --- | --- | --- |
+// | `--graupl-badge-font-size`                  | The font size of the badge component.                                                                         | `var(--graupl-font-sm)`                                                                                                                                                               |
+// | `--graupl-badge-background`                 | The background colour of the badge component.                                                                 | `var(--graupl-background)`                                                                                                                                                            |
+// | `--graupl-badge-color`                      | The text colour of the badge component.                                                                       | `var(--graupl-color)`                                                                                                                                                                 |
+// | `--graupl-badge-border-color`               | The border colour of the badge component.                                                                     | `var(--graupl-border-color)`                                                                                                                                                          |
+// | `--graupl-badge-padding-x`                  | The horizontal padding of the badge component.                                                                | `var(--graupl-spacer-5)`                                                                                                                                                              |
+// | `--graupl-badge-padding-y`                  | The vertical padding of the badge component.                                                                  | `var(--graupl-spacer-3)`                                                                                                                                                              |
+// | `--graupl-badge-padding`                    | The padding of the badge component (combines y and x padding).                                                | `var(--graupl-badge-padding-y) var(--graupl-badge-padding-x)`                                                                                                                         |
+// | `--graupl-badge-border-top-width`           | The top border width of the badge component.                                                                  | `var(--graupl-border-top-width)`                                                                                                                                                      |
+// | `--graupl-badge-border-right-width`         | The right border width of the badge component.                                                                | `var(--graupl-border-right-width)`                                                                                                                                                    |
+// | `--graupl-badge-border-bottom-width`        | The bottom border width of the badge component.                                                               | `var(--graupl-border-bottom-width)`                                                                                                                                                   |
+// | `--graupl-badge-border-left-width`          | The left border width of the badge component.                                                                 | `var(--graupl-border-left-width)`                                                                                                                                                     |
+// | `--graupl-badge-border-width`               | The border width of the badge component (combines top, right, bottom, and left widths).                       | `var(--graupl-badge-border-top-width) var(--graupl-badge-border-right-width) var(--graupl-badge-border-bottom-width) var(--graupl-badge-border-left-width)`                           |
+// | `--graupl-badge-border-top-style`           | The top border style of the badge component.                                                                  | `var(--graupl-border-top-style)`                                                                                                                                                      |
+// | `--graupl-badge-border-right-style`         | The right border style of the badge component.                                                                | `var(--graupl-border-right-style)`                                                                                                                                                    |
+// | `--graupl-badge-border-bottom-style`        | The bottom border style of the badge component.                                                               | `var(--graupl-border-bottom-style)`                                                                                                                                                   |
+// | `--graupl-badge-border-left-style`          | The left border style of the badge component.                                                                 | `var(--graupl-border-left-style)`                                                                                                                                                     |
+// | `--graupl-badge-border-style`               | The border style of the badge component (combines top, right, bottom, and left styles).                       | `var(--graupl-badge-border-top-style) var(--graupl-badge-border-right-style) var(--graupl-badge-border-bottom-style) var(--graupl-badge-border-left-style)`                           |
+// | `--graupl-badge-border-top-left-radius`     | The top-left border radius of the badge component.                                                            | `var(--graupl-border-top-left-radius)`                                                                                                                                                |
+// | `--graupl-badge-border-top-right-radius`    | The top-right border radius of the badge component.                                                           | `var(--graupl-border-top-right-radius)`                                                                                                                                               |
+// | `--graupl-badge-border-bottom-right-radius` | The bottom-right border radius of the badge component.                                                        | `var(--graupl-border-bottom-right-radius)`                                                                                                                                            |
+// | `--graupl-badge-border-bottom-left-radius`  | The bottom-left border radius of the badge component.                                                         | `var(--graupl-border-bottom-left-radius)`                                                                                                                                             |
+// | `--graupl-badge-border-radius`              | The border radius of the badge component (combines top-left, top-right, bottom-right, and bottom-left radii). | `var(--graupl-badge-border-top-left-radius) var(--graupl-badge-border-top-right-radius) var(--graupl-badge-border-bottom-right-radius) var(--graupl-badge-border-bottom-left-radius)` |
+//
+// The following sass variables can be used to customize the generation of the badge component:
+// | Variable | Description | Default Value |
+// | --- | --- | --- |
+// | `$selector-base`               | The selector base for the component.                                                   | `.`                        |
+// | `$modifier-selector-base`      | The selector base for component modifiers.                                             | `.`                        |
+// | `$generate-base-theme-map`     | A flag to generate the base theme maps for badge variants.                             | `true`                     |
+// | `$badge-selector-base`         | The selector base for the badge component.                                             | `$selector-base`           |
+// | `$badge-selector`              | The badge component selector.                                                          | `badge`                    |
+// | `$badge-theme-selector-base`   | The selector base for the badge theme component modifiers.                             | `$modifier-selector-base`  |
+// | `$badge-theme-selector-prefix` | The badge theme component modifier selector prefix.                                    | `""`                       |
+// | `$badge-theme-mappings`        | A map of properties and color shades used generate all badge variants.                 | `()`                       |
+// | `$badge-theme-map`             | A map of all properties, colors, and color shades used to generate all badge variants. | `()`                       |
+//
+// Using `$badge-theme-mappings`
+//
+// `$badge-theme-mappings` is a 1-level map of properties and shade values.
+//
+// e.g.
+// ```scss
+// $badge-theme-mappings: (
+//   border-color: 700,
+// )
+// ```
+//
+// This directly[1] maps to all badge variants, telling them what shade to use for said property.
+// All badge variants will use the following based on the example above:
+// - Primary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--primary--700`,
+// - Secondary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--secondary--700`, and
+// - Tertiary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--tertiary--700`.
+//
+// You can use this to customize _all_ badges variants in the same way.
+//
+// For example, if you use the following map:
+// ```scss
+// $badge-theme-mappings: (
+//   border-color: 500,
+// )
+// ```
+//
+// All badge variants will use the following:
+// - Primary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--primary--500`,
+// - Secondary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--secondary--500`, and
+// - Tertiary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--tertiary--500`.
+//
+// [1] `$badge-theme-mappings` gets parsed into a larger, more explicit map: `$badge-theme-map`.
+//
+// Using `$badge-theme-map`
+//
+// `$badge-theme-map` is a multi-level map of properties, colors, and shade values.
+//
+// e.g.
+// ```scss
+// $badge-theme-map: (
+//   primary: (
+//     border-color: (
+//       color: primary,
+//       shade: 700
+//     ),
+//   ),
+//   secondary: (
+//     border-color: (
+//       color: secondary,
+//       shade: 700
+//     ),
+//   ),
+//   tertiary: (
+//     border-color: (
+//       color: tertiary,
+//       shade: 700
+//     ),
+//   ),
+// )
+// ```
+//
+// This directly maps to all badge variants, telling them what shade to use for said property.
+// The badge variants will use the following based on the example above:
+// - Primary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--primary--700`,
+// - Secondary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--secondary--700`, and
+// - Tertiary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--tertiary--700`.
+//
+// You can use this to customize badge variants individually.
+//
+// For example, if you use the following map:
+//
+// ```scss
+// $badge-theme-map: (
+//   primary: (
+//     border-color: (
+//       color: secondary,
+//       shade: 700
+//     ),
+//   ),
+//   secondary: (
+//     border-color: (
+//       color: secondary,
+//       shade: 700
+//     ),
+//   ),
+//   tertiary: (
+//     border-color: (
+//       color: secondary,
+//       shade: 700
+//     ),
+//   ),
+// )
+// ```
+//
+// The badge variants will use the following:
+// - Primary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--secondary--700`,
+// - Secondary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--secondary--700`, and
+// - Tertiary badges will have their `--graupl-badge-border-color` property set to `--graupl-theme-active--secondary--700`.
+//
+// @example
+// <badge class="badge primary">Primary Badge</badge>
+//
+// @example
+// <a class="badge secondary" href="#">Secondary Badge</a>
+//
+// @example
+// <a class="badge tertiary" href="#">Tertiary Badge</a>
+
+@use "../../defaults" as root-defaults;
+@use "../../functions/theme";
+@use "../../mixins/layer" as *;
+@use "defaults";
+@use "sass:map";
+@use "variables" as *;
+
+@include layer(component) {
+  // .badge
+  #{defaults.$badge-selector-base}#{defaults.$badge-selector} {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: $badge-padding;
+    border-width: $badge-border-width;
+    border-style: $badge-border-style;
+    border-radius: $badge-border-radius;
+    font-size: $badge-font-size;
+  }
+}
+
+@include layer(theme) {
+  // .badge
+  #{defaults.$badge-selector-base}#{defaults.$badge-selector} {
+    border-color: $badge-border-color;
+    background: $badge-background;
+    color: $badge-color;
+
+    @each $color, $map in defaults.$badge-theme-map {
+      // e.g. &.primary, &.secondary, &.tertiary
+      &#{defaults.$badge-theme-selector-base}#{defaults.$badge-theme-selector-prefix}#{$color} {
+        @each $prop, $value in $map {
+          --#{root-defaults.$prefix}badge-#{$prop}: #{theme.get(
+              map.get($value, color),
+              map.get($value, shade)
+            )};
+        }
+      }
+    }
+  }
+}

package/src/scss/component/badge/_variables.scss

@@ -0,0 +1,112 @@
+// @graupl/core badge base variables.
+//
+// These values are to be used to directly style bases and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";
+@use "../../variables" as root-variables;
+@use "../../defaults" as root-defaults;
+@use "../../theme/color/variables" as color;
+@use "../../theme/typography/variables" as typography;
+@use "../../functions/theme";
+@use "sass:map";
+
+// Typography.
+$badge-font-size: var(
+  --#{root-defaults.$prefix}badge-font-size,
+  #{map.get(typography.$font-sizes, sm)}
+);
+
+// Colors.
+$badge-background: var(
+  --#{root-defaults.$prefix}badge-background,
+  #{color.$background}
+);
+$badge-color: var(--#{root-defaults.$prefix}badge-color, #{color.$color});
+$badge-border-color: var(
+  --#{root-defaults.$prefix}badge-border-color,
+  #{color.$border-color}
+);
+
+// Spacing.
+$badge-padding-x: var(
+  --#{root-defaults.$prefix}badge-padding-x,
+  #{map.get(root-variables.$spacers, 5)}
+);
+$badge-padding-y: var(
+  --#{root-defaults.$prefix}badge-padding-y,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$badge-padding: var(
+  --#{root-defaults.$prefix}badge-padding,
+  #{$badge-padding-y} #{$badge-padding-x}
+);
+
+// Border widths.
+$badge-border-top-width: var(
+  --#{root-defaults.$prefix}badge-border-top-width,
+  #{root-variables.$border-top-width}
+);
+$badge-border-right-width: var(
+  --#{root-defaults.$prefix}badge-border-right-width,
+  #{root-variables.$border-right-width}
+);
+$badge-border-bottom-width: var(
+  --#{root-defaults.$prefix}badge-border-bottom-width,
+  #{root-variables.$border-bottom-width}
+);
+$badge-border-left-width: var(
+  --#{root-defaults.$prefix}badge-border-left-width,
+  #{root-variables.$border-left-width}
+);
+$badge-border-width: var(
+  --#{root-defaults.$prefix}badge-border-width,
+  #{$badge-border-top-width} #{$badge-border-right-width}
+    #{$badge-border-bottom-width} #{$badge-border-left-width}
+);
+
+// Border styles.
+$badge-border-top-style: var(
+  --#{root-defaults.$prefix}badge-border-top-style,
+  #{root-variables.$border-top-style}
+);
+$badge-border-right-style: var(
+  --#{root-defaults.$prefix}badge-border-right-style,
+  #{root-variables.$border-right-style}
+);
+$badge-border-bottom-style: var(
+  --#{root-defaults.$prefix}badge-border-bottom-style,
+  #{root-variables.$border-bottom-style}
+);
+$badge-border-left-style: var(
+  --#{root-defaults.$prefix}badge-border-left-style,
+  #{root-variables.$border-left-style}
+);
+$badge-border-style: var(
+  --#{root-defaults.$prefix}badge-border-style,
+  #{$badge-border-top-style} #{$badge-border-right-style}
+    #{$badge-border-bottom-style} #{$badge-border-left-style}
+);
+
+// Border radii.
+$badge-border-top-left-radius: var(
+  --#{root-defaults.$prefix}badge-border-top-left-radius,
+  #{root-variables.$border-top-left-radius}
+);
+$badge-border-top-right-radius: var(
+  --#{root-defaults.$prefix}badge-border-top-right-radius,
+  #{root-variables.$border-top-right-radius}
+);
+$badge-border-bottom-right-radius: var(
+  --#{root-defaults.$prefix}badge-border-bottom-right-radius,
+  #{root-variables.$border-bottom-right-radius}
+);
+$badge-border-bottom-left-radius: var(
+  --#{root-defaults.$prefix}badge-border-bottom-left-radius,
+  #{root-variables.$border-bottom-left-radius}
+);
+$badge-border-radius: var(
+  --#{root-defaults.$prefix}badge-border-radius,
+  #{$badge-border-top-left-radius} #{$badge-border-top-right-radius}
+    #{$badge-border-bottom-right-radius} #{$badge-border-bottom-left-radius}
+);

package/src/scss/component/disclosure/_defaults.scss

@@ -0,0 +1,45 @@
+// @graupl/core disclosure 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 "../../defaults" as root-defaults;
+
+// Disclosure selectors.
+$selector-base: root-defaults.$component-selector-base !default;
+$modifier-selector-base: root-defaults.$modifier-selector-base !default;
+$disclosure-selector-base: $selector-base !default;
+$disclosure-selector: "disclosure" !default;
+$disclosure-content-selector-base: $selector-base !default;
+$disclosure-content-selector: "disclosure-content" !default;
+$disclosure-toggle-selector-base: $modifier-selector-base !default;
+$disclosure-toggle-selector: "disclosure-toggle" !default;
+$disclosure-open-selector-base: $modifier-selector-base !default;
+$disclosure-open-selector: "show" !default;
+$disclosure-closed-selector-base: $modifier-selector-base !default;
+$disclosure-closed-selector: "hide" !default;
+$disclosure-transitioning-selector-base: $modifier-selector-base !default;
+$disclosure-transitioning-selector: "transitioning" !default;
+
+// Visibility properties.
+$disclosure-show-display: flex !default;
+$disclosure-hide-display: flex !default;
+$disclosure-transitioning-display: $disclosure-show-display !default;
+
+// Disclosure block-size properties.
+$disclosure-show-block-size: 100% !default;
+$disclosure-hide-block-size: 0 !default;
+$disclosure-transitioning-block-size: $disclosure-hide-block-size !default;
+
+// Opacity properties.
+$disclosure-show-opacity: 1 !default;
+$disclosure-hide-opacity: 0 !default;
+$disclosure-transitioning-opacity: $disclosure-hide-opacity !default;
+
+// Disclosure toggle properties.
+$disclosure-toggle-content: "'↓'" !default;
+$disclosure-toggle-transform: rotate(0deg) !default;
+$disclosure-toggle-open-transform: rotate(-180deg) !default;