@ulu/frontend 0.1.0-beta.29 → 0.1.0-beta.30

package/scss/_utils.scss

@@ -465,7 +465,15 @@ $config: (
 /// @link https://stackoverflow.com/questions/12328259/how-do-you-strip-the-unit-from-any-number-in-sass/12335841#12335841 Original source (Miriam Suzanne)
 
 @function strip-unit($value) {
-  @return math.div($value, ($value * 0 + 1));
+  @if (is-number($value)) {
+    @if (math.is-unitless($value)) {
+      @return $value;
+    } @else {
+      @return math.div($value, ($value * 0 + 1));
+    }
+  } @else {
+    @error "Expected number, got #{ $value }";
+  }
 }
 
 /// Calculate the size of something at a given scale (percentage/exponential)
@@ -510,4 +518,147 @@ $config: (
 
 @function hypotenuse($width, $height) {
   @return math.sqrt(math.pow($width, 2) + math.pow($height, 2));
+}
+
+/// Get's the info about a box shadow 
+/// @param {List} $shadow The box shadow property (ie. 0 0 4px red)
+/// @return {Map} Map with info about the shadow with the following keys (inset, offset-x, offset-y, blur, spread, color)
+/// @throw When shadow is not type list
+
+@function box-shadow-info($shadow) {
+  @if (meta.type-of($shadow) != "list") {
+    @error "Box shadow passed is not correct type (list)";
+  }
+  $result: (
+    "inset": false,
+    "offset-x": 0,
+    "offset-y": 0,
+    "blur": 0,
+    "spread": 0,
+    "color": null,
+  );
+
+  $number-keys: ("offset-x", "offset-y", "blur", "spread");
+  $number-index: 1;
+
+  @each $value in $shadow {
+    $type: meta.type-of($value);
+    @if $type == "color" {
+      $result: map.merge($result, ("color": $value));
+    } @else if $type == "string" and $value == inset {
+      $result: map.merge($result, ("inset": true));
+    } @else if $type == "number" and $number-index <= 4 {
+      // Add each back in by key in the order they appear
+      // if not found it's the default
+      $result: map.merge($result, (list.nth($number-keys, $number-index): $value));
+      $number-index: $number-index + 1;
+    }
+  }
+  
+  @return $result;
+}
+
+/// Get's the extent (how far the shadow extends past the box's edge)
+/// - This will only work on box-shadows that have matching units for the numbers
+/// @param {List} $shadow The box shadow property (ie. 0 0 4px red)
+/// @param {String} $side Optionally pass the side of box to get extend for, if not specified offsets are ignored and just the extent of the shadow is passed
+/// @return {Number} The size the shadow extends past it's box
+
+@function box-shadow-extent($shadow, $side: null) {
+  $info: box-shadow-info($shadow);
+  $extent: map.get($info, "spread") + map.get($info, "blur");
+  $offset-x: map.get($info, "offset-x");
+  $offset-y: map.get($info, "offset-y");
+  @if (not $side) {
+    @return $extent;
+  } @else {
+    @if ($side == "top") {
+      @return $extent - $offset-y;
+    } @else if ($side == "bottom") {
+      @return $extent + $offset-y;
+    } @else if ($side == "left") {
+      @return $extent - $offset-x;
+    } @else if ($side == "right") {
+      @return $extent + $offset-x;
+    }
+  }
+}
+
+/// Determines if value passed is a list
+/// @param {*} $value Value to check
+/// @return {Boolean} Whether the item was type list
+
+@function is-list($value) {
+  @return meta.type-of($value) == "list";
+}
+
+/// Determines if value passed is a map
+/// @param {*} $value Value to check
+/// @return {Boolean} Whether the item was type map
+
+@function is-map($value) {
+  @return meta.type-of($value) == "map";
+}
+
+/// Determines if value passed is a number
+/// @param {*} $value Value to check
+/// @return {Boolean} Whether the item was type number
+
+@function is-number($value) {
+  @return meta.type-of($value) == "number";
+}
+
+/// Determines if value passed is a string
+/// @param {*} $value Value to check
+/// @return {Boolean} Whether the item was type string
+
+@function is-string($value) {
+  @return meta.type-of($value) == "string";
+}
+
+/// Determines if value passed is a color
+/// @param {*} $value Value to check
+/// @return {Boolean} Whether the item was type color
+
+@function is-color($value) {
+  @return meta.type-of($value) == "color";
+}
+
+
+
+// /// Determines if value passed is a bool
+// /// @param {*} $value Value to check
+// /// @return {Boolean} Whether the item was type bool
+
+// @function is-bool($value) {
+//   @return meta.type-of($value) == "bool";
+// }
+
+// /// Determines if value passed is a null
+// /// @param {*} $value Value to check
+// /// @return {Boolean} Whether the item was type null
+
+// @function is-null($value) {
+//   @return meta.type-of($value) == "null";
+// }
+
+/// Returns true if number passed is even
+/// - Allows unit and unitless numbers
+/// @param {Number} $number The number to check
+/// @return {Boolean} Whether or not it is an even number
+
+@function is-even($number) {
+  @if (is-number($number)) {
+    @return strip-unit($number) % 2 == 0;
+  } @else {
+    @error "Expected Number, got #{ $number }";
+  }
+}
+
+/// Returns true if number passed is odd
+/// @param {Number} $number The number to check
+/// @return {Boolean} Whether or not it is an odd number
+
+@function is-odd($number) {
+  @return not is-even($number);
 }

package/scss/components/_button-verbose.scss

@@ -104,7 +104,7 @@ $config: (
 /// @example html {preview} - Basic Example
 ///   <a href="#" class="button-verbose">
 ///     <strong class="button-verbose__title">Example Link</strong>
-///     This is the body
+///     <span class="button-verbose__body">This is the body</span>
 ///     <span class="button-verbose__icon fas fa-arrow-right" aria-hidden="true"></span>
 ///   </a>
 
@@ -161,9 +161,14 @@ $config: (
       }
     }
   }
-  #{ $prefix }__title {
+  #{ $prefix }__title,
+  #{ $prefix }__body {
     display: block;
-    margin-bottom: get("title-margin");
+    &:first-child {
+      margin-bottom: get("title-margin");
+    }
+  }
+  #{ $prefix }__title {
     color: color.get(get("title-color"));
   }
   #{ $prefix }__icon {

package/scss/components/_form-theme.scss

@@ -46,66 +46,66 @@ $-fallbacks: (
 /// @prop {Dimension} item-border-radius [null] Border radius for __item.
 /// @prop {Dimension} item-highlight-width [6px] Width of the item box highlight.
 /// @prop {Color} required-color ["danger"] Color for required text.
-/// @prop {Dimension} text-input-margin-bottom [0.5em] 
-/// @prop {Dimension} text-input-margin-top [1em]
-/// @prop {Color} warning-color ["warning"]
-/// @prop {Color} warning-highlight-color [rgb(255, 249, 237)]
-/// @prop {String} warning-selector [".is-warning"]
-/// @prop {Color} check-input-color [currentColor]
-/// @prop {Dimension} check-input-size [1.15em]
-/// @prop {Dimension} check-input-touch-size [2em]
-/// @prop {Color} check-input-background-color [white]
-/// @prop {Color} check-input-background-color-checked [white]
-/// @prop {Color} check-input-background-color-hover [white]
-/// @prop {Color} check-input-background-color-indeterminate [white]
+/// @prop {Dimension} text-input-margin-bottom [0.5em] Bottom margin for the label.
+/// @prop {Dimension} text-input-margin-top [1em] Top margin for the label.
+/// @prop {Color} warning-color ["warning"] The warning text color.
+/// @prop {Color} warning-highlight-color [rgb(255, 249, 237)] Outline color of the warning.
+/// @prop {String} warning-selector [".is-warning"] Selector for adding warning styles.
+/// @prop {Color} check-input-color [currentColor] @joe-check unused
+/// @prop {Dimension} check-input-size [1.15em] Size of input box.
+/// @prop {Dimension} check-input-touch-size [2em] Touchable size of the input box.
+/// @prop {Color} check-input-background-color [white] Background color for the check input.
+/// @prop {Color} check-input-background-color-checked [white] Background color for the check input when checked.
+/// @prop {Color} check-input-background-color-hover [white] Background color for the check input when hovered or focused.
+/// @prop {Color} check-input-background-color-indeterminate [white] Background color for the indeterminate check input.
 /// @prop {} check-input-border [null] @joe-check check how this is called with a fallback in the styles mixin
-/// @prop {Color} check-input-border-color-hover [null]
-/// @prop {Color} check-input-border-color-checked [null]
-/// @prop {Color} check-input-border-color-indeterminate [null]
-/// @prop {Color} check-input-border-color-focus [null]
-/// @prop {} check-input-outline [null]
-/// @prop {} check-input-outline-hover [null]
-/// @prop {} check-input-outline-checked [null]
-/// @prop {} check-input-outline-focus [1px solid white]
-/// @prop {} check-input-touch-color-hover [#e8e8e8]
-/// @prop {} check-input-touch-color-focus [null]
-/// @prop {} check-input-radio-size [0.3em]
-/// @prop {} check-input-checkmark-width [0.38em]
-/// @prop {} check-input-checkmark-height [0.68em]
-/// @prop {} check-input-checkmark-offset-y [-0.2em]
-/// @prop {} check-input-checkmark-stroke-size [0.18em]
-/// @prop {} check-input-mark-color [currentColor]
-/// @prop {} check-input-mark-color-hover [null]
-/// @prop {} check-input-mark-color-focus [null]
-/// @prop {} check-input-mark-color-checked [null]
-/// @prop {} check-input-mark-color-indeterminate [null]
-/// @prop {} check-input-disabled-opacity [0.6]
-/// @prop {} check-input-border-radius [null]
-/// @prop {} description-color [false]
-/// @prop {} description-margin [(0.25em 0)]
-/// @prop {} description-max-width [25em]
+/// @prop {Color} check-input-border-color-hover [null] Check input border color.
+/// @prop {Color} check-input-border-color-checked [null] Check input border color when checked.
+/// @prop {Color} check-input-border-color-indeterminate [null] Indeterminate check input border color.
+/// @prop {Color} check-input-border-color-focus [null] Check input border color when hovered or focused.
+/// @prop {CssValue} check-input-outline [null] Check input outline.
+/// @prop {CssValue} check-input-outline-hover [null]
+/// @prop {CssValue} check-input-outline-checked [null]
+/// @prop {CssValue} check-input-outline-focus [1px solid white]
+/// @prop {Color} check-input-touch-color-hover [#e8e8e8]
+/// @prop {Color} check-input-touch-color-focus [null]
+/// @prop {Dimension} check-input-radio-size [0.3em]
+/// @prop {Dimension} check-input-checkmark-width [0.38em]
+/// @prop {Dimension} check-input-checkmark-height [0.68em]
+/// @prop {Dimension} check-input-checkmark-offset-y [-0.2em]
+/// @prop {Dimension} check-input-checkmark-stroke-size [0.18em]
+/// @prop {Color} check-input-mark-color [currentColor]
+/// @prop {Color} check-input-mark-color-hover [null]
+/// @prop {Color} check-input-mark-color-focus [null]
+/// @prop {Color} check-input-mark-color-checked [null]
+/// @prop {Color} check-input-mark-color-indeterminate [null]
+/// @prop {Number} check-input-disabled-opacity [0.6]
+/// @prop {Dimension} check-input-border-radius [null]
+/// @prop {Color} description-color [false]
+/// @prop {CssValue} description-margin [(0.25em 0)]
+/// @prop {Dimension} description-max-width [25em]
 /// @prop {Number} description-line-height [true] Line height for description element, defaults to typograpahy line-height-dense
-/// @prop {} fieldset-background [transparent]
-/// @prop {} fieldset-border [none]
-/// @prop {} fieldset-margin-bottom [1rem]
-/// @prop {} fieldset-margin-top [1rem]
-/// @prop {} fieldset-padding [0]
-/// @prop {} fieldset-margin-compact [0]
-/// @prop {} fieldset-border-bottom [0]
-/// @prop {} fieldset-border-radius [0]
-/// @prop {} fieldset-legend-color [inherit]
-/// @prop {} fieldset-legend-border-bottom [null]
-/// @prop {} fieldset-legend-padding-bottom [null]
-/// @prop {} select-border-radius [4px]
-/// @prop {} select-background-color [null]
-/// @prop {} select-border [null]
-/// @prop {} select-padding-x [null]
-/// @prop {} select-padding-y [null]
-/// @prop {} select-image [null]
-/// @prop {} select-image-size [0.9em]
-/// @prop {} select-image-offset [0.7em]
-/// @prop {} select-image-margin [0.65em]
-/// @prop {Unit} inline-gap [1em] Gap between items that are inline like checkboxes
+/// @prop {Color} fieldset-background [transparent]
+/// @prop {CssValue} fieldset-border [none]
+/// @prop {Dimension} fieldset-margin-bottom [1rem]
+/// @prop {Dimension} fieldset-margin-top [1rem]
+/// @prop {Dimension} fieldset-padding [0]
+/// @prop {Dimension} fieldset-margin-compact [0]
+/// @prop {Dimension} fieldset-border-bottom [0]
+/// @prop {Dimension} fieldset-border-radius [0]
+/// @prop {Color} fieldset-legend-color [inherit]
+/// @prop {Dimension} fieldset-legend-border-bottom [null]
+/// @prop {Dimension} fieldset-legend-padding-bottom [null]
+/// @prop {Dimension} select-border-radius [4px]
+/// @prop {Color} select-background-color [null]
+/// @prop {CssValue} select-border [null]
+/// @prop {Dimension} select-padding-x [null]
+/// @prop {Dimension} select-padding-y [null]
+/// @prop {CssValue} select-image [null] 
+/// @prop {Dimension} select-image-size [0.9em]
+/// @prop {Dimension} select-image-offset [0.7em]
+/// @prop {Dimension} select-image-margin [0.65em]
+/// @prop {Dimension} inline-gap [1em] Gap between items that are inline like checkboxes
 
 $config: (
   "color"                                     : inherit,

package/scss/components/_popover.scss

@@ -30,7 +30,8 @@ $-fallbacks: (
 /// Module Settings
 /// @type Map
 /// @prop {Dimension} arrow-size [16px] Size of the dropdown arrow.
-/// @prop {Dimension} arrow-mask-overlap [4px] Size that the mask extends beyond the arrow size (which covers up the arrow box shadow inside the popover content). This should be adjusted based on the size of the box-shadow being used)
+/// @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.
@@ -61,7 +62,8 @@ $-fallbacks: (
 
 $config: (
   "arrow-size"                   : 16px,
-  "arrow-mask-overlap"           : 4px,
+  "arrow-box-shadow"             : true,
+  "arrow-box-shadow-extent"      : null,
   "background-color"             : white,
   "border-radius"                : 6px,
   "color"                        : inherit,
@@ -232,18 +234,79 @@ $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);
-  $overlap: utils.strip-unit(get("arrow-mask-overlap"));
+  $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;