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

package/lib/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/lib/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 → lib/scss}/components/_skeleton.scss

@@ -32,7 +32,8 @@ $-fallbacks: (
 /// @prop {Dimension} inline-margin [0.35em] The margin between inline skeleton text elements.
 /// @prop {Number} media-ratio [(4/3)] The aspect ratio for skeleton media blocks (width/height).
 /// @prop {Dimension} text-border-radius [3em] The border-radius for skeleton text lines.
-/// @prop {Map} text-sizes [Map] A map defining various width percentages for skeleton text lines.
+/// @prop {Map} widths [Map] A map defining various width percentages for skeleton text lines (or used to size blocks/etc)
+
 $config: (
   "animation" : UluPulse 2s cubic-bezier(0.4,0,0.6,1) infinite,
   "color" : "type-disabled",
@@ -41,8 +42,9 @@ $config: (
   "border-radius": true,
   "inline-margin" : 0.35em,
   "media-ratio" : list.slash(4, 3),
+  "media-font-size" : 2rem,
   "text-border-radius" : 3em,
-  "text-sizes": (
+  "widths": (
     "small-xxx" : 10%,
     "small-xx" : 20%,
     "small-x" : 30%,
@@ -79,43 +81,45 @@ $config: (
 
 @mixin styles {
   $prefix: selector.class("skeleton");
-  #{ $prefix },
-  #{ $prefix }-background,
-  #{ $prefix }-block,
-  #{ $prefix }-text {
+
+  #{ $prefix } {
     animation: get("animation");
     color: color.get(get("color"));
   }
-  #{ $prefix }-background {
-    animation: get("animation");
+  #{ $prefix }--background {
     background-color: color.get(get("background-color")) !important;
   }
-  #{ $prefix }-background--alt {
-    background-color: color.get(get("background-color-alt"));
-  }
-  #{ $prefix }-block,
-  #{ $prefix }-text {
+  #{ $prefix }--block,
+  #{ $prefix }--text,
+  #{ $prefix }--media {
     animation: get("animation");
     color: color.get(get("color"));
     background-color: color.get(get("background-color")) !important;
     border-radius: get("border-radius");
   }
-  #{ $prefix }-block--media {
-    aspect-ratio: 4/3;
+  #{ $prefix }--media {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: get("media-ratio");
+    font-size: get("media-font-size");
   }
-  #{ $prefix }-text {
+  #{ $prefix }--text {
     height: 1em;
     width: 60%;
     border-radius: get("text-border-radius");
   }
-  #{ $prefix }-text--inline {
+  #{ $prefix }--inline {
     display: inline-block;
   }
-  #{ $prefix }-text--inline + #{ $prefix }-text--inline {
+  #{ $prefix }--inline + #{ $prefix }--inline {
     margin-left: get("inline-margin");
   }
-  @each $name, $value in get("text-sizes") {
-    #{ $prefix }-text--#{ $name } {
+  #{ $prefix }--background-alt {
+    background-color: color.get(get("background-color-alt")) !important;
+  }
+  @each $name, $value in get("widths") {
+    #{ $prefix }--width-#{ $name } {
       width: $value;
     }
   }

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

@@ -37,6 +37,9 @@ $-fallbacks: (
 /// @prop {Color} border-color [transparent] Border color for the tag.
 /// @prop {Dimension} border-width [1px] Border width of the tag.
 /// @prop {String} color ["type-tertiary"] Color of the tag text.
+/// @prop {String} counter-size [1.5em] Size when used as a counter (for numbers), will be this size by default and expand horizontally as needed (ie. circle/rounded rectangle or square/rectangle if without border radius)
+/// @prop {String} counter-border-radius [20px] May need to be adjusted or can be set to 0 for square/rectangle
+/// @prop {String} counter-padding-sides [0.26em] Counter left/right padding (this is the space/margin on the inside when the number can't fit in the circle/square
 
 $config: (
   "font-weight" : normal,
@@ -53,6 +56,9 @@ $config: (
   "border-color" : transparent,
   "border-width" : 1px,
   "color": "type-tertiary",
+  "counter-size" : 1.75em,
+  "counter-border-radius" : 20px,
+  "counter-padding-sides" : 0.26em
 ) !default;
 
 /// Style Map (alternate tag styles)
@@ -72,6 +78,13 @@ $styles: (
   )
 ) !default;
 
+/// Map of alternate sizes
+$sizes: (
+  "small" : (
+    "padding" : (0.25em 0.5em),
+    "type-size" : "small-x"
+  )
+) !default;
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
@@ -90,6 +103,14 @@ $styles: (
   $styles: utils.map-merge($styles, $changes, $merge-mode) !global;
 }
 
+/// Set tag sizes 
+/// @param {Map} $changes Map of changes
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
+
+@mixin set-sizes($changes, $merge-mode: null) {
+  $sizes: utils.map-merge($sizes, $changes, $merge-mode) !global;
+}
+
 /// Get a config option
 /// @param {Map} $name Name of property
 /// @example scss
@@ -121,10 +142,10 @@ $styles: (
     background-color: color.get(get("background-color"));
     color: color.get(get("color"));
     font-family: get("font-family");
+    line-height: get("line-height");
     @if (typography.has-size(get("type-size"))) {
       @include typography.size(get("type-size"), $only-font-size: true);
     }
-    line-height: get("line-height");
     &:not(:last-child) {
       margin-right: get("margin-between");
     }
@@ -136,8 +157,32 @@ $styles: (
     }
   }
 
+  
+
+  @each $name, $size in $sizes {
+    $type-size: map.get($size, "type-size");
+
+    #{ $prefix }--#{ $name } {
+      padding: map.get($size, "padding");  
+      line-height: map.get($size, "line-height");
+      @if (typography.has-size($type-size)) {
+        @include typography.size($type-size, $only-font-size: true);
+      }
+    }
+  }
+
+  // Order Reason: Needs to inherit from sizes but not styles
+  #{ $prefix }--counter {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: get("counter-size");
+    height: get("counter-size");
+    border-radius: get("counter-border-radius");
+    padding: 0 get("counter-padding-sides");
+  }
+
   @each $name, $style in $styles {
-    $type-size: map.get($style, "type-size");
     #{ $prefix }--#{ $name } {
       background-color: color.get(map.get($style, "background-color")); 
       color: color.get(map.get($style, "color")); 
@@ -146,11 +191,8 @@ $styles: (
       border-color: color.get(map.get($style, "border-color")); 
       border-width: map.get($style, "border-width"); 
       box-shadow: map.get($style, "box-shadow"); 
-      padding: map.get($style, "padding");  
-      @if (typography.has-size($type-size)) {
-        @include typography.size($type-size, $only-font-size: true);
-      }
-      line-height: map.get($style, "line-height");
     }
   }
+
+
 }

package/{scss → lib/scss}/helpers/_utilities.scss

@@ -6,6 +6,8 @@
 @use "../utils";
 @use "../layout";
 @use "../selector";
+@use "../typography";
+@use "../element";
 
 /// Print utilities helper styles
 /// - Includes classes like (.crop-margins, .no-scroll-y, .image-full-width, etc)
@@ -38,9 +40,21 @@
   #{ selector.class("full-width") } {
     width: 100%;
   }
+  #{ selector.class("no-min-width") } {
+    min-width: 0;
+  }
   #{ selector.class("flex-basis-full") } {
     flex-basis: 100%;
   }
+  #{ selector.class("flex-grow") } {
+    flex-grow: 1;
+  }
+  #{ selector.class("flex-wrap") } {
+    flex-wrap: wrap;
+  }
+  #{ selector.class("flex-shrink") } {
+    flex-shrink: 1;
+  }
   #{ selector.class("full-min-height") } {
     min-height: 100%;
   }
@@ -118,7 +132,12 @@
   #{ selector.class("overflow-hidden") } {
     overflow: hidden;
   }
-  // .justify-self-center {
-  //   justify-self: center;
-  // }
+  #{ selector.class("flow-inline") } {
+    &:not(:first-child) {
+      margin-left: typography.get("space-size");
+    }
+    &:not(:last-child) {
+      margin-right: typography.get("space-size");
+    }
+  }
 }