@ulu/frontend 0.1.0-beta.106 → 0.1.0-beta.108

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);
+      }
+    }
+  }
+
+  
+}