@ulu/frontend 0.1.0-beta.11 → 0.1.0-beta.111

package/scss/components/_popover.scss

@@ -29,38 +29,41 @@ $-fallbacks: (
 
 /// Module Settings
 /// @type Map
-/// @prop {Dimension} arrow-size [16px]
-/// @prop {Color} background-color [white]
-/// @prop {Dimension} border-radius [6px]
-/// @prop {Color} color [inherit]
-/// @prop {Dimension} max-width [90vw]
-/// @prop {Dimension} max-height [25rem]
-/// @prop {Dimension} padding [1rem]
-/// @prop {Dimension} padding-large [2rem]
-/// @prop {Dimension} type-size [null]
-/// @prop {Number} z-index [true]
-/// @prop {CssValue} box-shadow [true]
-/// @prop {CssValue} box-shadow-footer [0 0 4px]
-/// @prop {String} box-shadow-footer-color ["box-shadow"]
-/// @prop {Color} header-background-color [#ccc]
-/// @prop {Color} header-color [null]
-/// @prop {Color} header-media-background-color [black]
-/// @prop {Dimension} header-padding-y [0.25rem]
-/// @prop {Color} footer-background-color [#ccc]
-/// @prop {Color} footer-color [null]
-/// @prop {Dimension} footer-padding-y [0.25rem]
-/// @prop {Dimension} footer-padding-y-large [0.5rem]
-/// @prop {Color} tooltip-background-color [white]
-/// @prop {Color} tooltip-color [null]
-/// @prop {Dimension} tooltip-max-width [20rem]
-/// @prop {Dimension} tooltip-padding [0.5rem]
-/// @prop {Dimension} tooltip-width [auto]
-/// @prop {Dimension} width [15rem]
-/// @prop {Dimension} width-large [30rem]
-/// @prop {Dimension} width-large-x [50rem]
+/// @prop {Dimension} arrow-size [16px] Size of the dropdown arrow.
+/// @prop {Boolean} arrow-box-shadow [true] When true the arrow will get the popover's box shadow. Note if the box shadow is not a list (for example custom property), the mask won't be calculated from the box-shadow (use arrow-box-shadow-extent to specify manually)
+/// @prop {Number} arrow-box-shadow-extent [null] If set will determine the amount of overlap added to the arrow mask, else it's calculated automatically by the box-shadow option (can be used if box-shadow is custom property)
+/// @prop {Color} background-color [white] Background color of the popover.
+/// @prop {Dimension} border-radius [6px] Border radius of the popover.
+/// @prop {Color} color [inherit] Text color of the popover.
+/// @prop {Dimension} max-width [90vw] Max width of the popover.
+/// @prop {Dimension} max-height [25rem] Max height of the popover.
+/// @prop {Dimension} padding [1rem] Padding of the popover.
+/// @prop {Dimension} padding-large [2rem] Padding of the popover if using "--large" or "--large-x" styling.
+/// @prop {Dimension} type-size [null] Font size of the popover.
+/// @prop {Number} z-index [true] z-index of the popover.
+/// @prop {CssValue} box-shadow [true] Box shadow of the popover.
+/// @prop {Color} header-background-color [#ccc] Background color of the popover header
+/// @prop {Color} header-color [null] Text color for the header.
+/// @prop {Color} header-media-background-color [black] background color for header media.
+/// @prop {Dimension} header-padding-y [0.25rem] Vertical padding of the header.
+/// @prop {Color} footer-background-color [#ccc] Background color of the footer.
+/// @prop {Color} footer-border-top [1px solid #dfdfdf] Optional border used to separate the content from footer
+/// @prop {Color} footer-color [null] Text color of the footer.
+/// @prop {Dimension} footer-padding-y [0.25rem] Vertical padding of the footer.
+/// @prop {Dimension} footer-padding-y-large [0.5rem] Vertical padding of the footer if using "--large" or "--large-x" styling.
+/// @prop {Color} tooltip-background-color [white] Background color of the tooltip.
+/// @prop {Color} tooltip-color [null] Font color of the tooltip.
+/// @prop {Dimension} tooltip-max-width [20rem] Max width of the tooltip.
+/// @prop {Dimension} tooltip-padding [0.5rem] Padding of the tooltip.
+/// @prop {Dimension} tooltip-width [auto] Width of the tooltip.
+/// @prop {Dimension} width [15rem] Width of the popover.
+/// @prop {Dimension} width-large [30rem] Width of the popover if using "--large".
+/// @prop {Dimension} width-large-x [50rem] Width of the popover if using "--large-x".
 
 $config: (
   "arrow-size"                   : 16px,
+  "arrow-box-shadow"             : true,
+  "arrow-box-shadow-extent"      : null,
   "background-color"             : white,
   "border-radius"                : 6px,
   "color"                        : inherit,
@@ -70,14 +73,12 @@ $config: (
   "padding-large"                : 2rem,
   "type-size"                    : null,
   "z-index"                      : true,
-  
   "box-shadow"                   : true,
-  "box-shadow-footer"            : 0 0 4px,
-  "box-shadow-footer-color"      : "box-shadow",
   "header-background-color"      : #ccc,
   "header-color"                 : null,
   "header-media-background-color": black,
   "header-padding-y"             : 0.25rem,
+  "footer-border-top"            : 1px solid #dfdfdf,  
   "footer-background-color"      : #ccc,
   "footer-color"                 : null,
   "footer-padding-y"             : 0.25rem,
@@ -117,39 +118,9 @@ $config: (
 
 @mixin styles {
   $prefix: selector.class("popover");
-  $arrow-size-half: math.div(get("arrow-size"), 2);
 
   @if (get("arrow-size")) {
-    #{ $prefix }__arrow {
-      display: block;
-      visibility: hidden;
-      z-index: 1;
-      &,
-      &:before {
-        position: absolute;
-        width: get("arrow-size");
-        height: get("arrow-size");
-        background: inherit;
-      }
-      &:before {
-        visibility: visible;
-        content: '';
-        transform: rotate(45deg);
-        // box-shadow: $box-shadow;
-      }
-      [data-placement^='top'] > & {
-        bottom: -($arrow-size-half);
-      }
-      [data-placement^='bottom'] > & {
-        top: -($arrow-size-half);
-      }
-      [data-placement^='left'] > & {
-        right: -($arrow-size-half);
-      }
-      [data-placement^='right'] > & {
-        left: -($arrow-size-half);
-      }
-    }
+    @include -arrow-styles();
   }
   // Default position is on the right of the container (Popper handles positioning)
   #{ $prefix } {
@@ -197,7 +168,7 @@ $config: (
     background-color: color.get(get("header-media-background-color"));
   }
   #{ $prefix }__footer {
-    box-shadow: get("box-shadow-footer") color.get(get("box-shadow-footer-color"));
+    border-top: get("footer-border-top");
     padding: get("footer-padding-y") get("padding");
     color: color.get(get("footer-color"));
     background-color: color.get(get("footer-background-color"));
@@ -260,4 +231,134 @@ $config: (
       }
     }
   }
+}
+
+@mixin -arrow-styles() {
+  @if get("arrow-box-shadow") {
+    @include -arrow-styles-with-box-shadow();
+  } @else {
+    @include -arrow-styles-simple();
+  }
+}
+
+// Internal mixin for original arrow styles without box-shadow
+@mixin -arrow-styles-simple() {
+  $prefix: selector.class("popover");
+  $size: get("arrow-size");
+  $half: math.div($size, 2);
+
+  #{ $prefix }__arrow {
+    visibility: hidden;
+    z-index: 1;
+    &,
+    &::before {
+      display: block;
+      position: absolute;
+      width: $size;
+      height: $size;
+      background: inherit;
+    }
+    &::before {
+      visibility: visible;
+      content: '';
+      transform: rotate(45deg);
+    }
+    [data-placement^="top"] > & {
+      bottom: -($half);
+    }
+    [data-placement^="bottom"] > & {
+      top: -($half);
+    }
+    [data-placement^="left"] > & {
+      right: -($half);
+    }
+    [data-placement^="right"] > & {
+      left: -($half);
+    }
+  }
+  // Account for footer and change arrow color when positioned next to it
+  #{ $prefix }__footer ~ #{ $prefix }__arrow {
+    [data-placement^="top"] > & {
+      &::before {
+        background-color: get("footer-background-color");
+      }
+    }
+  }
+}
+
+// Internal mixin for arrow styles when using the mask (extra pseudo element)
+@mixin -arrow-styles-with-box-shadow() {
+  $prefix: selector.class("popover");
+  $box-shadow: get("box-shadow");
+  $size: get("arrow-size");
+  $half: math.div($size, 2);
+  $size-info: utils.number-info($size);
+  $unitless: map.get($size-info, "value");
+  $unit: map.get($size-info, "unit");
+  $hypotenuse: utils.hypotenuse($unitless, $unitless);
+  $hypotenuse-half: math.div($hypotenuse, 2);
+  $manual-extent: get("arrow-box-shadow-extent");
+  $shadow-extent: if(
+    $manual-extent,
+    $manual-extent,
+    if(utils.is-list($box-shadow), utils.box-shadow-extent($box-shadow), 5px)
+  );
+  $overlap: utils.strip-unit($shadow-extent);
+  $mask-height: utils.add-unit($hypotenuse-half + $overlap, $unit);
+  $mask-width: utils.add-unit($hypotenuse + $overlap, $unit);
+  
+  #{ $prefix }__arrow {
+    visibility: hidden;
+    z-index: 1;
+    &,
+    &::before,
+    &::after {
+      display: block;
+      position: absolute;
+      width: $size;
+      height: $size;
+      background: inherit;
+    }
+    &::before,
+    &::after {
+      visibility: visible;
+      content: '';
+    }
+    &::before {
+      box-shadow: get("box-shadow");
+      transform: rotate(45deg);
+    }
+    // Masking shape
+    &::after {
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%);
+      height: $mask-height;
+      width: $mask-width;
+    }
+    [data-placement^="top"] > & {
+      bottom: -($half);
+      transform: rotate(180deg); // Rotate w. mask
+    }
+    [data-placement^="bottom"] > & {
+      top: -($half);
+    }
+    [data-placement^="left"] > & {
+      right: -($half);
+      transform: rotate(90deg); // Rotate w. mask
+    }
+    [data-placement^="right"] > & {
+      left: -($half);
+      transform: rotate(-90deg); // Rotate w. mask
+    }
+  }
+  // Account for footer and change arrow color when positioned next to it
+  #{ $prefix }__footer ~ #{ $prefix }__arrow {
+    [data-placement^="top"] > & {
+      &::before,
+      &::after {
+        background-color: get("footer-background-color");
+      }
+    }
+  }
 }

package/scss/components/_progress-bar.scss

@@ -0,0 +1,254 @@
+////
+/// @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 {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 {Dimension} icon-margin [0.25em] Margin for the icon.
+/// @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),
+  "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-margin" : 0.25em,
+  "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 }__icon {
+    margin-left: auto;
+    padding-left: get("icon-margin");
+    color: color.get(get("icon-color"));
+  }
+  #{ $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;
+    font-weight: get("value-font-weight");
+    color: color.get(get("value-color"));
+  }
+  #{ $prefix }__value {
+    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%;
+    }
+  }
+}