@ulu/frontend 0.1.0-beta.99 → 0.2.0-beta.1

package/lib/scss/components/_definition-list.scss

@@ -0,0 +1,178 @@
+////
+/// @group definition-list
+/// Definition list styles
+////
+
+@use "sass:map";
+@use "sass:meta";
+@use "sass:math";
+
+@use "../selector";
+@use "../utils";
+@use "../color";
+@use "../typography";
+@use "../breakpoint";
+@use "../element";
+
+// Used for function fallback
+$-fallbacks: (
+  "term-font-weight": (
+    "function": meta.get-function("get", false, "typography"),
+    "property": "font-weight-bold"
+  ),
+  "line-height": (
+    "function": meta.get-function("get", false, "typography"),
+    "property": "line-height-dense"
+  ),
+  "separator-border": (
+    "function": meta.get-function("get-rule-style", false, "element"),
+    "arguments": ("light",)
+  )
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {String} term-font-weight [true] The font-weight of the dt element.
+/// @prop {Dimension} line-height [true] The line-height of the definition list.
+/// @prop {CssUnit} item-margin [0.75em] The spacing for each item.
+/// @prop {Boolean} separator [true] Whether to show a separator between items.
+/// @prop {Border} separator-border [true] The border style for the separator.
+/// @prop {Dimension} separator-padding [0.75em] The padding for the separator.
+/// @prop {String} table-breakpoint [medium] The breakpoint for the table layout.
+/// @prop {String} table-template-columns [(25% 75%)] The grid-template-columns for the table layout.
+/// @prop {Dimension} table-gap [1rem] The gap for the table layout.
+/// @prop {String} inline-description-separator [","] The separator for multiple dd elements in inline layout.
+/// @prop {String} inline-term-separator [":"] The separator for dt elements in inline layout.
+
+$config: (
+  "margin" : (0 0 1.5em 0),
+  "term-font-weight": true,
+  "line-height": true,
+  "item-margin" : 1em,
+  "separator": true,
+  "separator-border": true,
+  "table-breakpoint": "medium",
+  "table-template-columns": (25% 75%),
+  "table-gap": 1rem,
+  "inline-description-separator": ",",
+  "inline-term-separator": ":",
+  "compact-item-margin" : 0.5em
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-definition-list-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-definition-list-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "definition-list [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @demo definition-list
+/// @example scss
+///  @include ulu.component-definition-list-styles();
+
+@mixin styles {
+  $prefix: selector.class("definition-list");
+  $item-margin-half: math.div(get("item-margin"), 2);
+  $compact-item-margin-half: math.div(get("compact-item-margin"), 2);
+
+  #{ $prefix } {
+    line-height: get("line-height");
+    margin: get("margin");
+
+    > div {
+      margin-top: $item-margin-half;
+      padding-top: $item-margin-half;
+    }
+    dt,
+    dd {
+      display: block;
+      margin: 0;
+      font-weight: normal;
+    }
+    dt {
+      font-weight: get("term-font-weight");
+    }
+  }
+
+  // Modifiers
+  #{ $prefix }--table {
+    @include breakpoint.min(get("table-breakpoint")) {
+      > div {
+        display: grid;
+        grid-template-columns: get("table-template-columns");
+        gap: get("table-gap");
+      }
+    }
+  }
+
+  #{ $prefix }--inline,
+  #{ $prefix }--inline-all {
+    > div {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: baseline;
+    }
+
+    dd + dd {
+      &::before {
+        content: get("inline-description-separator");
+        margin-right: 0.2em;
+      }
+    }
+  }
+
+  #{ $prefix }--inline {
+    dt {
+      flex-basis: 100%;
+    }
+  }
+
+  #{ $prefix }--inline-all {
+    dt {
+      &::after {
+        content: get("inline-term-separator");
+        margin-right: 0.2em;
+      }
+    }
+  }
+
+  #{ $prefix }--separated > div:not(:first-child),
+  #{ $prefix }--separated-first > div:first-child {
+    border-top: get("separator-border");
+  }
+  #{ $prefix }--separated-last > div:last-child {
+    border-bottom: get("separator-border");
+    padding-bottom: $item-margin-half;
+  }
+
+  #{ $prefix }--compact {
+    > div {
+      margin-top: $compact-item-margin-half;
+      padding-top: $compact-item-margin-half;
+    }
+  }
+  #{ $prefix }--compact#{ $prefix }--separated-last > div:last-child {
+    padding-bottom: $compact-item-margin-half;
+  }
+
+  // Clip margin of first
+  #{ $prefix }:not(#{ $prefix }--separated-first) {
+    > div:first-child {
+      padding-top: 0;
+      margin-top: 0;
+    }
+  }
+}

package/{scss → lib/scss}/components/_index.scss

@@ -11,6 +11,7 @@
 @forward "button" as button-*;
 @forward "button-group" as button-group-*;
 @forward "button-verbose" as button-verbose-*;
+@forward "breadcrumb" as breadcrumb-*;
 @forward "callout" as callout-*;
 @forward "card" as card-*;
 @forward "card-grid" as card-grid-*;
@@ -18,6 +19,7 @@
 @forward "css-icon" as css-icon-*;
 @forward "data-grid" as data-grid-*;
 @forward "data-table" as data-table-*;
+@forward "definition-list" as definition-list-*;
 @forward "fill-context" as fill-context-*;
 @forward "flipcard" as flipcard-*;
 @forward "flipcard-grid" as flipcard-grid-*;
@@ -39,6 +41,8 @@
 @forward "placeholder-block" as placeholder-block-*;
 @forward "pull-quote" as pull-quote-*;
 @forward "popover" as popover-*;
+@forward "progress-bar" as progress-bar-*;
+@forward "progress-circle" as progress-circle-*;
 @forward "rail" as rail-*;
 @forward "ratio-box" as ratio-box-*;
 @forward "rule" as rule-*;
@@ -69,6 +73,7 @@
 @use "button";
 @use "button-group";
 @use "button-verbose";
+@use "breadcrumb";
 @use "callout";
 @use "card";
 @use "card-grid";
@@ -76,6 +81,7 @@
 @use "css-icon";
 @use "data-grid";
 @use "data-table";
+@use "definition-list";
 @use "fill-context";
 @use "flipcard";
 @use "flipcard-grid";
@@ -96,6 +102,8 @@
 @use "panel";
 @use "placeholder-block";
 @use "popover";
+@use "progress-bar";
+@use "progress-circle";
 @use "pull-quote";
 @use "rail";
 @use "ratio-box";
@@ -128,6 +136,7 @@ $all-includes: (
   "button",
   "button-group",
   "button-verbose",
+  "breadcrumb",
   "callout",
   "card",
   "card-grid",
@@ -135,6 +144,7 @@ $all-includes: (
   "css-icon",
   "data-grid",
   "data-table",
+  "definition-list",
   "fill-context",
   "flipcard",
   "flipcard-grid",
@@ -154,6 +164,9 @@ $all-includes: (
   "pager",
   "panel",
   "popover",
+  "progress-bar",
+  "progress-circle",
+  "pull-quote",
   "rail",
   "ratio-box",
   "rule",
@@ -226,6 +239,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "button-verbose")) {
     @include button-verbose.styles;
   }
+  @if (list.index($includes, "breadcrumb")) {
+    @include breadcrumb.styles;
+  }
   @if (list.index($includes, "badge")) {
     @include badge.styles;
   }
@@ -259,6 +275,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "data-table")) {
     @include data-table.styles;
   }
+  @if (list.index($includes, "definition-list")) {
+    @include definition-list.styles;
+  }
   @if (list.index($includes, "fill-context")) {
     @include fill-context.styles;
   }
@@ -319,6 +338,12 @@ $current-includes: $all-includes;
   @if (list.index($includes, "popover")) {
     @include popover.styles;
   }
+  @if (list.index($includes, "progress-bar")) {
+    @include progress-bar.styles;
+  }
+  @if (list.index($includes, "progress-circle")) {
+    @include progress-circle.styles;
+  }
   @if (list.index($includes, "pull-quote")) {
     @include pull-quote.styles;
   }

package/{scss → lib/scss}/components/_menu-stack.scss

@@ -32,7 +32,6 @@ $-fallbacks: (
     
 /// Module Settings
 /// @type Map
-/// @prop {Dimension} selectable-input-width [3em] The width of the checkbox/radio input
 /// @prop {Boolean} link-separated-margin [false] Enables a margin between the items in the menu-stack.
 /// @prop {Boolean} link-separated-rule-style [false] Enables a rule between the items in the menu-stack.
 /// @prop {Dimension} nested-indent [0.5em] The indentation of child lists within the menu-stack.
@@ -41,6 +40,9 @@ $-fallbacks: (
 /// @prop {Number} toggle-icon-rotate [false] Set a value to rotate the collapsible item toggle icon rotation when open (ie. 90deg)
 /// @prop {Dimension} compact-link-padding-x [0.75em] The links horizontal padding when using the compact option.
 /// @prop {Dimension} compact-link-padding-y [0.25em] The links vertical padding when using the compact option.
+/// @prop {Dimension} compact-selectable-input-width [2em] The width of the checkbox/radio input (when compact modifier)
+/// @prop {Dimension} compact-selectable-input-font-size [null] Optional compact input font-size
+/// @prop {Dimension} compact-selectable-input-top [null] Optional y/top for input
 /// @prop {Color} label-color [null] The type color of the label.
 /// @prop {Dimension} label-margin [0.5em] The margin of the label.
 /// @prop {CssValue} label-text-transform [uppercase] Transforms the label text.
@@ -61,9 +63,12 @@ $-fallbacks: (
 /// @prop {Dimension} link-margin [0.2em] Margin for the menu-stack toggle.
 /// @prop {Dimension} link-padding-x [1em] Horizontal padding for menu-stack toggle.
 /// @prop {Dimension} link-padding-y [0.35em] Vertical padding for menu-stack toggle.
+/// @prop {Dimension} selectable-input-width [3em] The width of the checkbox/radio input
+/// @prop {Dimension} selectable-input-top [0.73em] To fine tune the y/top value for absolutely positioned input, if you pass null/falsey it will use the padding which isn't always perfect since this is setup to not be centered when wrapping lines in label
+/// @prop {Dimension} selectable-input-font-size [null] Optional to set a specific font-size on the input
+
 
 $config: (
-  "selectable-input-width" : 3em,
   "nested-indent" : 0.5em,
   "rule-style" : "light",
   "rule-margin" : 0.5em,
@@ -75,7 +80,7 @@ $config: (
   "label-line-height" : true,
   "link-separated-margin" : false,
   "link-separated-rule-style" : false,
-  "link-active-selectors" : (".is-active", '[aria-current="page"]'),
+  "link-active-selectors" : (".is-active",),
   "link-background-color" : transparent,
   "link-background-color-active" : rgb(219, 219, 219),
   "link-background-color-hover" : rgb(240, 240, 240),
@@ -92,6 +97,33 @@ $config: (
   "link-padding-y": 0.5em,
   "compact-link-padding-x": 0.75em,
   "compact-link-padding-y": 0.25em,
+  "compact-selectable-input-width": 2.2em,
+  "compact-selectable-input-top" : 0.5em,
+  "compact-selectable-input-font-size": 0.8em,
+  "selectable-input-width" : 3em,
+  "selectable-input-top" : 0.73em,
+  "selectable-input-font-size" : null,
+  // new configs
+  "parent-font-weight" : bold,
+  "parent-separator-enabled": true,
+  "parent-separator-color" : "rule",
+  "parent-rule-style" : "light",
+  "parent-separated-margin" : false,
+
+  "plain-link-padding-y" : 0,
+  "plain-link-margin" : 0.2em,
+  "plain-link-font-weight": null,
+  "plain-link-line-height": null,
+  "plain-link-color": "link",
+  "plain-link-color-hover": "link-hover",
+
+  "multi-column-gap" : 2rem,
+) !default;
+
+$styles: (
+  "test" : (
+    // "link-margin" : 4rem,
+  ),
 ) !default;
 
 
@@ -104,6 +136,14 @@ $config: (
   $config: map.merge($config, $changes) !global;
 }
 
+/// Set tag styles 
+/// @param {Map} $changes Map of changes
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
+
+@mixin set-styles($changes, $merge-mode: null) {
+  $styles: utils.map-merge($styles, $changes, $merge-mode) !global;
+}
+
 /// Get a config option
 /// @param {Map} $name Name of property
 /// @example scss
@@ -143,6 +183,9 @@ $config: (
       @include typography.size(get("label-type-size"), $only-font-size: true);
     }
   }
+  #{ $prefix }__item {
+    display: flow-root;
+  }
   #{ $prefix }__item--separator-before {
     border-top: element.get-rule-style(-fallback("link-separated-rule-style", "rule-style"));
     margin-top: -fallback("link-separated-margin", "link-padding-y");
@@ -158,10 +201,25 @@ $config: (
       padding-left: get("nested-indent");
     }
   }
+
+  @if get("parent-separator-enabled") {
+    #{ $prefix }__item--parent {
+      border-bottom: element.get-rule-style(-fallback("parent-rule-style", "rule-style"));
+      margin-bottom: -fallback("parent-separated-margin", "link-padding-y");
+      padding-bottom: -fallback("parent-separated-margin", "link-padding-y");
+      #{ $prefix }__link {
+        font-weight: get("parent-font-weight");
+      }
+    }
+  }
+  
+
   // By default the link hangs outside the container so that 
   // the icons/text align to the text (above/below)
   // - Use the modifier "site-menu--contained" to keep the links within 
   //   the parent container (no optical alignment), should be within something that contains it
+
+  // add __toggle to these styles
   #{ $prefix }__link,
   #{ $prefix }__selectable,
   #{ $prefix }__toggle {
@@ -181,26 +239,34 @@ $config: (
       color: color.get(get("link-color-hover"));
       background-color: color.get(get("link-background-color-hover"));
     }
-    @each $active-selector in get("link-active-selectors") {
-      &#{ $active-selector } {
-        &,
-        &:hover {
-          color: color.get(get("link-color-active"));
-          background-color: color.get(get("link-background-color-active"));
-        }
-      }
-    }
   }
   #{ $prefix }__selectable {
     padding: 0;
     position: relative;
   }
+
+  // Combine all active selectors using sass:selector functions
+  $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;
+  $active-from-config: get("link-active-selectors");
+  $traditional-active: sassSelector.append($base-selectors, $active-from-config);
+
+  $checked-active: sassSelector.parse("#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)");
+
+  #{ $traditional-active, $checked-active },
+  #{ $prefix }__link[aria-current="page"] {
+    &,
+    &:hover {
+      color: color.get(get("link-color-active"));
+      background-color: color.get(get("link-background-color-active"));
+    }
+  }
   #{ $prefix }__selectable [type="checkbox"],
   #{ $prefix }__selectable [type="radio"],
   #{ $prefix }__selectable-input {
     position: absolute;
-    top: $selectable-y;
+    top: utils.fallback(get("selectable-input-top"), $selectable-y);
     left: get("link-padding-x");
+    font-size: get("selectable-input-font-size");
   }
   #{ $prefix }__selectable label,
   #{ $prefix }__selectable-label {
@@ -240,7 +306,7 @@ $config: (
     // padding-right: get("link-padding-x");
     > #{ $prefix }__list > #{ $prefix }__item {
       > #{ $prefix }__link, 
-      >#{ $prefix }__collapsible > #{ $prefix }__toggle {
+      >#{ $prefix }__collapsible {
         margin-left: -(get("link-padding-x"));
         margin-right: -(get("link-padding-x"));
         width: calc(100% + (get("link-padding-x") * 2));
@@ -251,11 +317,98 @@ $config: (
     //   width: auto;
     // }
   }
+
+  // new
+  #{ $prefix }--plain {
+    #{ $prefix }__link,
+    #{ $prefix }__selectable,
+    #{ $prefix }__toggle {
+      // should all of these styles use fallbacks instead of having defaults match the regular link styles? Padding-y is an exception since that needs a different styling.
+      padding: get("plain-link-padding-y") 0;
+      margin: get("plain-link-margin") 0;
+      border-radius: 0;
+      font-weight: get("plain-link-font-weight");
+      line-height: -fallback("plain-link-line-height", "link-line-height");
+      color: color.get(get("plain-link-color"));
+      background-color: transparent;
+      &:hover,
+      &:focus {
+        color: color.get(get("plain-link-color-hover"));
+        background-color: transparent;
+      }
+    }
+  }
+
   #{ $prefix }--compact {
+    $compact-y: get("compact-link-padding-y");
+    $compact-x: get("compact-link-padding-x");
+
+    #{ $prefix }__selectable,
+    #{ $prefix }__toggle,
     #{ $prefix }__link {
       border-radius: 0;
       margin: 0;
-      padding: get("compact-link-padding-y") get("compact-link-padding-x");
+    }
+    #{ $prefix }__toggle,
+    #{ $prefix }__link {
+      padding: $compact-y $compact-x;
+    }
+    #{ $prefix }__selectable label,
+    #{ $prefix }__selectable-label {
+      padding: $compact-y $compact-x $compact-y get("compact-selectable-input-width");
+    }
+    #{ $prefix }__selectable [type="checkbox"],
+    #{ $prefix }__selectable [type="radio"],
+    #{ $prefix }__selectable-input {
+      position: absolute;
+      top: utils.fallback(get("compact-selectable-input-top"), $compact-y);
+      left: $compact-x;
+      font-size: get("compact-selectable-input-font-size");
+    }
+  }
+
+  #{ $prefix }--hide-inputs {
+    #{ $prefix }__selectable-input,
+    #{ $prefix }__selectable [type="checkbox"],
+    #{ $prefix }__selectable [type="radio"] {
+      @include element.hidden-visually();
+    }
+
+    #{ $prefix }__selectable label,
+    #{ $prefix }__selectable-label {
+      padding-left: get("link-padding-x");
+    }
+  }
+
+  #{ $prefix }--multi-column {
+    > #{ $prefix }__list {
+      display: grid;
+      grid-auto-flow: column;
+      gap: get("multi-column-gap");
+    }
+  }
+
+  @each $name, $style in $styles {
+    #{ $prefix }--#{ $name } {
+      #{ $prefix }__link,
+      #{ $prefix }__selectable,
+      #{ $prefix }__toggle {
+        padding: map.get($style, "link-padding-y") map.get($style, "link-padding-x");
+        border-radius: map.get($style, "link-border-radius");
+        font-weight: map.get($style, "link-font-weight");
+        line-height: map.get($style, "link-line-height");
+        color: color.get(map.get($style, "link-color"));
+        background-color: color.get(map.get($style, "link-background-color"));
+        @if map.get($style, "link-margin") {
+          margin: map.get($style, "link-margin") 0;
+        }
+        &:hover,
+        &:focus {
+          color: color.get(map.get($style, "link-color-hover"));
+          background-color: color.get(map.get($style, "link-background-color-hover"));
+        }
+      }
     }
   }
-}
+
+}

package/{scss → lib/scss}/components/_modal.scss

@@ -25,7 +25,11 @@ $-fallbacks: (
   "border-radius" : (
     "function" : meta.get-function("get", false, "element"),
     "property" : "border-radius-large",
-  )
+  ),
+  "close-icon-vertical-offset": (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "icon-centered-vertical-offset",
+  ),
 );
 
 /// Module Settings
@@ -91,6 +95,7 @@ $config: (
   "close-color-hover":              black,
   "close-font-size":                1.2rem,
   "close-margin":                   0.5rem,
+  "close-icon-vertical-offset" : true,
   "close-size":                     2.5rem,
   "header-background-color":        black,
   "header-border-bottom":           none,
@@ -239,6 +244,11 @@ $config: (
       color: color.get(get("close-color-hover"));
     }
   }
+
+  #{ $prefix }__close-icon {
+    @include element.icon-vert-translate(get("close-icon-vertical-offset"));
+  }
+
   #{ $prefix }__resizer {
     position: absolute;
     overflow: hidden;