@ulu/frontend 0.1.0-beta.12 → 0.1.0-beta.121

package/scss/components/_progress-bar.scss

@@ -0,0 +1,260 @@
+////
+/// @group progress-bar
+/// Groups a set of buttons
+////
+
+@use "sass:map";
+@use "sass:meta";
+@use "sass:math";
+
+@use "../selector";
+@use "../utils";
+@use "../color";
+@use "../typography";
+
+
+// Used for function fallback
+$-fallbacks: (
+  "line-height" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "line-height-dense"
+  ),
+  "value-font-weight" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "font-weight-light"
+  )
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {Dimension} header-gap [0.25em] Margin/gap for the icon/value
+/// @prop {List} margin [(0 0 0.5em 0)] Margin for the progress bar.
+/// @prop {Boolean} line-height [true] Line height for the progress bar. If true, falls back to typography's `line-height-dense`.
+/// @prop {Color} value-color ["type-tertiary"] Color of the value text.
+/// @prop {Dimension} value-margin [0.5em] Margin for the value text.
+/// @prop {Boolean} value-font-weight [true] Font weight for the value text. If true, falls back to typography's `font-weight-light`.
+/// @prop {Dimension} value-margin-deficit [0.3em] Margin for the deficit value text.
+/// @prop {Color} value-color-deficit ["danger"] Color of the deficit value text.
+/// @prop {Dimension} bar-height [12px] Height of the progress bar.
+/// @prop {Color} bar-color [rgb(80, 80, 171)] Color of the progress bar.
+/// @prop {Color} bar-color-deficit ["danger"] Color of the deficit portion of the progress bar.
+/// @prop {Color} icon-color ["type-tertiary"] Color of the icon.
+/// @prop {Color} icon-color-deficit ["danger"] Color of the icon in a deficit state.
+/// @prop {Color} track-color [#ccc] Color of the progress bar track.
+/// @prop {List} track-margin [(0.1em 0)] Margin for the progress bar track.
+/// @prop {Time} animation-duration [200ms] Duration of the width transition animation.
+/// @prop {CssValue} animation-timing [ease] Timing function for the width transition animation.
+/// @prop {Time} animation-initial-duration [500ms] Duration of the initial fill animation.
+/// @prop {CssValue} animation-initial-timing [ease-in] Timing function for the initial fill animation.
+/// @prop {Time} animation-indeterminate-duration [2.5s] Duration of the indeterminate loading animation.
+
+$config: (
+  "margin" : (0 0 0.5em 0),
+  "header-gap" : 0.25em,
+  "line-height" : true,
+  "value-color" : "type-tertiary",
+  "value-margin" : 0.5em,
+  "value-font-weight" : true,
+  "value-margin-deficit" : 0.3em,
+  "value-color-deficit" : "danger",
+  "bar-height" : 12px,
+  "bar-color" : "indicator",
+  "bar-color-deficit" : "danger",
+  "icon-color" : "type-tertiary",
+  "icon-color-deficit" : "danger",
+  "track-color" : "placeholder-background-alt",
+  "track-margin" : (0.1em 0),
+  "animation-duration" : 200ms,
+  "animation-timing" : ease,
+  "animation-initial-duration" : 500ms,
+  "animation-initial-timing" : ease-in,
+  "animation-indeterminate-duration" : 2.5s
+) !default;
+
+/// @type Map
+/// This is the map of styles (variations in progress bar types)
+/// - Each style becomes the modifier and accepts ("bar-color", "bar-height", "track-color")
+/// - Use this to match whatever progress system(s) your creating
+$styles: (
+  "positive" : (
+    "bar-color" : "success",
+    "icon-color" : "success"
+  ),
+  "negative" : (
+    "bar-color" : "danger",
+    "icon-color" : "danger"
+  ),
+  "small" : (
+    "bar-height" : 8px
+  ),
+  "loader" : (
+    "bar-height" : 4px,
+    "track-color" : transparent
+  )
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-progress-bar-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-progress-bar-set-styles(( "small" : ( "bar-height" : 8px ) ));
+
+@mixin set-styles($changes) {
+  $styles: map.merge($styles, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-progress-bar-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "progress-bar [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @demo progress-bar
+/// @example scss
+///  @include ulu.component-progress-bar-styles();
+
+@mixin styles {
+  $prefix: selector.class("progress-bar");
+  
+  #{ $prefix } {
+    line-height: get("line-height");
+    margin: get("margin");
+  }
+  #{ $prefix }__header {
+    display: flex;
+    align-items: flex-end;
+  }
+  #{ $prefix }__value {
+    font-weight: get("value-font-weight");
+    color: color.get(get("value-color"));
+  }
+  #{ $prefix }__icon {
+    color: color.get(get("icon-color"));
+  }
+  #{ $prefix }__icon,
+  #{ $prefix }__header #{ $prefix }__value {
+    margin-left: auto;
+    padding-left: get("header-gap");
+  }
+  
+  #{ $prefix }__track {
+    position: relative; // For indeterminate animation
+    margin: get("track-margin");
+    display: flex;
+    width: 100%;
+    height: get("bar-height");
+    overflow: hidden;
+    background-color: color.get(get("track-color"));
+  }
+  #{ $prefix }__bar {
+    display: flex;
+    height: 100%;
+    // This is the animation when the component is living in the page
+    transition: width get("animation-duration") get("animation-timing"); 
+    // This is the initial animation of the bar within itself (ie. filling up)
+    &:before {
+      content: '';
+      display: block;
+      width: 100%;
+      background-color: color.get(get("bar-color"));
+      transform-origin: left center;
+      animation: ulu-progress-bar get("animation-initial-duration") forwards get("animation-initial-timing");
+    }
+  }
+  #{ $prefix }--deficit {
+    #{ $prefix }__icon {
+      color: color.get(get("icon-color-deficit"));
+    }
+  }
+  #{ $prefix }__bar--deficit {
+    align-items: flex-end;
+    margin-left: auto;
+    background-color: color.get(get("bar-color-deficit"));
+  }
+  #{ $prefix }__values {
+    display: flex;
+  }
+  #{ $prefix }__values #{ $prefix }__value:not(:last-child) {
+    margin-right: get("value-margin");
+  }
+  #{ $prefix }__value--deficit {
+    margin-left: auto;
+    margin-right: get("value-margin-deficit");
+    color: color.get(get("value-color-deficit"));
+    & + #{ $prefix }__value--total {
+      margin-left: 0;
+    }
+  }
+  #{ $prefix }__value--total {
+    margin-left: auto;
+    margin-right: 0;
+  }
+  
+  @each $name, $props in $styles {
+    #{ $prefix }--#{ $name } {
+      #{ $prefix }__track {
+        height: map.get($props, "bar-height");
+      }
+      #{ $prefix }__bar:before {
+        background-color: color.get(map.get($props, "bar-color"));
+      }
+      #{ $prefix }__track {
+        background-color: color.get(map.get($props, "track-color"));
+      }
+      #{ $prefix }__icon {
+        color: color.get(map.get($props, "icon-color"));
+      }
+    }
+  }
+
+
+  // For Site Loading (Async Content, not charting/visualization)
+  #{ $prefix }--indeterminate {
+    #{ $prefix }__bar {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 30%;
+      animation: ulu-progress-bar-indeterminate get("animation-indeterminate-duration") linear infinite;
+    }
+    // &#{ $prefix }--loaded {
+    //   #{ $prefix }__bar {
+    //     display: none;
+    //   }
+    // }
+  }
+
+  @keyframes ulu-progress-bar {
+    from {
+      transform: scaleX(0);
+    }
+    to {
+      transform: scaleX(1);
+    }
+  }
+
+  @keyframes ulu-progress-bar-indeterminate {
+    0% {
+      left: -100%;
+    }
+    50% {
+      left: 100%;
+    }
+    100% {
+      left: -100%;
+    }
+  }
+}

package/scss/components/_progress-circle.scss

@@ -0,0 +1,175 @@
+////
+/// @group progress-circle
+/// A circular progress indicator.
+////
+
+@use "sass:map";
+@use "sass:math";
+@use "../selector";
+@use "../utils";
+@use "../color";
+
+/// Module Settings
+/// @type Map
+/// @prop {Dimension} size [100px] The width and height of the chart.
+/// @prop {Number} viewbox-size [32] The size of the SVG viewbox. Used to calculate mask radius.
+/// @prop {Number} stroke-width [10] The width of the progress circle's stroke.
+/// @prop {Color} color-track ["placeholder-background-alt"] The color of the inactive track. Can be a theme color name or a CSS variable.
+/// @prop {Color} color-progress ["indicator"] The color of the progress stroke in a neutral state. Can be a theme color name or a CSS variable.
+/// @prop {Color} color-mask [white] The color of the center mask that creates the donut hole. Can be a theme color name or a CSS variable.
+/// @prop {Color} color-mask-pie [rgba(255, 255, 255, 0.5)] The mask color when using the pie style modifier.
+/// @prop {Color} value-color ["type"] The theme color name for the percentage text inside the circle.
+/// @prop {Color} value-color-outside ["type-tertiary"] The theme color name for the percentage text when displayed outside the circle.
+/// @prop {Dimension | List} value-margin-outside [(0.1em 0.35em)] The margin for the outside value text.
+/// @prop {Time} transition-duration [300ms] The duration for the stroke transition animation (when the component is updating already in the page)
+/// @prop {Time} animation-duration [1s] The duration for the stroke animation (relies on template having a custom build animation per pie based on dash array). This is used for initial animations
+/// @prop {Time} animation-delay [2s] The delay for the animation
+/// @prop {Time} animation-timing [ease-in] Timing function for animation
+/// @prop {Map} status-colors A map of status names to their corresponding colors (e.g., "low": "warning").
+/// @prop {Map} sizes A map of size variations. Each key is a modifier name (e.g., "small") and the value is a map with `size` and `stroke-width` properties.
+
+$config: (
+  "size": 100px,
+  "viewbox-size": 32,
+  "stroke-width": 10,
+  "color-track": "placeholder-background-alt",
+  "color-progress": "indicator",
+  "color-mask": white,
+  "color-mask-pie": rgba(255, 255, 255, 0.4),
+  "value-color": "type",
+  "value-color-outside": "type-tertiary",
+  "value-margin-outside" : (0.1em 0.35em),
+  "transition-duration" : 300ms,
+  "animation-duration" : 1s,
+  "animation-delay" : 2s,
+  "animation-timing" : ease-in,
+  "status-colors": (
+    "low": "danger",
+    "incomplete": "warning",
+    "complete": "success",
+  ),
+  "sizes": (
+    "small" : (
+      "size": 40px,
+      "stroke-width": 13,
+    )
+  )
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {String} $name Name of property
+@function get($name) {
+  @return utils.require-map-get($config, $name, "progress-circle [config]");
+}
+
+/// Prints component styles
+/// @demo progress-circle
+@mixin styles {
+  $prefix: selector.class("progress-circle");
+
+  #{ $prefix } {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    --ulu-progress-circle-stroke-width: #{ get("stroke-width") };
+  }
+  #{ $prefix }__chart {
+    position: relative;
+    line-height: 1;
+  }
+  #{ $prefix }__chart-value {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: color.get(get("value-color"));
+    text-shadow: none;
+  }
+  #{ $prefix }__chart-svg {
+    width: get("size");
+    height: get("size");
+    transform: rotate(-90deg);
+    border-radius: 50%;
+  }
+  #{ $prefix }__chart-track {
+    fill: transparent;
+    stroke: color.get(get("color-track"));
+    stroke-width: var(--ulu-progress-circle-stroke-width);
+  }
+  #{ $prefix }__chart-pie {
+    fill: transparent;
+    stroke: color.get(get("color-progress"));
+    stroke-width: var(--ulu-progress-circle-stroke-width);
+    stroke-dasharray: 0 100;
+    will-change: stroke-dasharray;
+    // If value is changing
+    transition: stroke get("transition-duration"); 
+    // For in template composed initial animation
+    animation-duration: get("animation-duration"); 
+    animation-delay: get("animation-delay"); 
+    animation-timing-function: get("animation-timing");
+  }
+  #{ $prefix }__chart-mask {
+    fill: color.get(get("color-mask"));
+    r: calc( (get("viewbox-size") / 2) - (var(--ulu-progress-circle-stroke-width) / 2) );
+  }
+  #{ $prefix }__value {
+    color: color.get(get("value-color-outside"));
+    margin: get("value-margin-outside");
+    font-weight: normal;
+    line-height: 1;
+  }
+
+  #{ $prefix }--outside {
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+  #{ $prefix }--outside-below {
+    display: block;
+  }
+  #{ $prefix }--pie {
+    // Note do not adjust the custom property for this since we want the mask to still be sized correctly
+    #{ $prefix }__chart-pie {
+      stroke-width: get("viewbox-size"); // As large as the svg (so it fills the circle)
+    }
+    #{ $prefix }__chart-track {
+      fill: color.get(get("color-track"));
+    }
+    #{ $prefix }__chart-mask {
+      fill: color.get(get("color-mask-pie"));
+    }
+  }
+  #{ $prefix }--no-mask {
+    #{ $prefix }__chart-mask {
+      display: none;
+    }
+  }
+
+
+  @each $name, $props in get("sizes") {
+    #{ $prefix }--#{ $name } {
+      --ulu-progress-circle-stroke-width: #{map.get($props, "stroke-width")};
+      #{ $prefix }__chart-svg {
+        width: map.get($props, "size");
+        height: map.get($props, "size");
+      }
+    }
+  }
+  @each $name, $color in get("status-colors") {
+    #{ $prefix }--#{ $name } {
+      #{ $prefix }__chart-pie {
+        stroke: color.get($color);
+      }
+    }
+  }
+
+  
+}

package/scss/components/_pull-quote.scss

@@ -83,7 +83,7 @@ $config: (
   #{ $prefix }__body {
     line-height: get("body-line-height");
     @if (get("quote-mark-enabled")) {
-      &:before {
+      &::before {
         display: block;
         position: relative;
         // content: open-quote;

package/scss/components/_rail.scss

@@ -0,0 +1,127 @@
+////
+/// @group rail
+////
+/// A horizontal, flexible container for arranging diverse inline elements.
+/// It provides a consistent layout for icons, labels, buttons, or other
+/// modular components, aligning content to either end or centering it.
+/// Item spacing is controlled via margins, allowing for individual item gap adjustments.
+
+@use "sass:map";
+@use "sass:meta";
+@use "sass:math";
+
+@use "../utils";
+@use "../color";
+@use "../selector";
+@use "../layout";
+@use "../element"; 
+
+// Used for function fallback
+$-fallbacks: (
+  "separator" : (
+    "function" : meta.get-function("get-rule-style", false, "element"),
+    "arguments" : ("light",)
+  ),
+);
+
+
+/// Module Settings
+/// @type Map
+/// @prop {Dimension} gap [1em] The default space between items in the rail
+/// @prop {Map} gap-modifiers [("small" : 0.5em, "large" : 2em )] Alternate gaps (use child modifiers .rail__item--gap-[name], these apply gap changes between the item and the item before it
+/// @prop {Dimension} margin-bottom [1em] The default space after rail
+/// @prop {CssValue} separator [true] Pass border property for separator, defaults to element rule style light
+
+$config: (
+  "gap" : 1em,
+  "margin-bottom" : 1.5em,
+  "separator" : true,
+  "gap-modifiers": (
+    "small" : 0.5em,
+    "none" : 0,
+    "large" : 2em
+  ),
+  "rule-size" : 1px,
+  "rule-color" : "rule",
+  "rule-margin" : 1em
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-rail-set(( "gap" : 1.5em ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-rail-get("gap");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "rail [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @example scss
+///   @include ulu.component-rail-styles();
+
+@mixin styles {
+  $prefix: selector.class("rail"); 
+  $gap: get("gap");
+
+  #{ $prefix } {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: $gap;
+    margin-bottom: get("margin-bottom");
+    max-width: 100%;
+  }
+  #{ $prefix }--rule {
+    border-bottom: get("rule-size") solid color.get(get("rule-color"));
+    padding-bottom: get("rule-margin");
+  }
+
+  // Modifiers
+  // - Note: Originally had mods for each type of flexbox layout
+  //   simplified to just agnostic naming and only what is currently needed
+  //   can update this in the future to add more alignment options if 
+  //   use cases come up
+
+  #{ $prefix }--justified { 
+    justify-content: space-between;
+  }
+  #{ $prefix }--baseline {
+    align-items: baseline;
+  }
+  #{ $prefix }--nowrap {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+  }
+
+  // Item level modifiers
+  #{ $prefix }__item--pull {
+    margin-inline-start: auto;
+  }
+  #{ $prefix }__item--separator {
+    border-inline-start: get("separator");
+    padding-inline-start: $gap;
+  }
+
+  @each $name, $value in get("gap-modifiers") {
+
+    $calc-gap: $value - $gap;
+    
+    #{ $prefix }__item--gap-#{ $name } {
+      margin-inline-start: $calc-gap;
+
+      &#{ $prefix }__item--separator {
+        padding-inline-start: $value;
+      }
+    }
+  }
+}

package/scss/components/_ratio-box.scss

@@ -5,6 +5,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../layout";
 
 /// Module Settings
 /// @type Map
@@ -49,11 +50,7 @@ $config: (
     padding: get("size") 0 0 0; 
   }
   .ratio-box__content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    @include layout.absolute-fill(true);
     border: 0;
   }
   @each $name, $size in get("sizes") {

package/scss/components/_rule.scss

@@ -82,6 +82,7 @@ $config: (
       width: $short-width;
       max-width: 100%;
       border-bottom-width: get("short-border-width");
+      display: inline-block;
     }
     @if get("short-modifiers") {
       @each $mod, $opts in get("short-modifiers") {

package/scss/components/_scroll-slider.scss

@@ -22,8 +22,6 @@
 /// @prop {Dimension} padding-bottom  [0]
 /// @prop {Dimension} padding-top  [0]
 /// @prop {String} prefix ["scroll-slide"]
-/// @prop {Color} button-background-color  [white]
-/// @prop {Color} button-background-color-hover  [white]
 /// @prop {CssValue} button-border  [2px solid white]
 /// @prop {Color} button-border-color-hover  [white]
 /// @prop {Dimension} button-border-radius  [50%]
@@ -46,8 +44,6 @@ $config: (
   "padding-bottom" : 0,
   "padding-top" : 0,
   "prefix": "scroll-slider",
-  "button-background-color" : white,
-  "button-background-color-hover" : white,
   "button-border" : 2px solid white,
   "button-border-color-hover" : white,
   "button-border-radius" : 50%,
@@ -124,7 +120,7 @@ $config: (
     @include layout.match-container-margin("scroll-padding-left", get("container"));
     // padding: 1rem;
     // Add space to end of list
-    // &:after {
+    // &::after {
     //   content: "\00a0";
     //   display: block;
     //   width: 1rem;