@ulu/frontend 0.1.0-beta.26 → 0.1.0-beta.28

package/js/ui/popover.js

@@ -124,6 +124,7 @@ export class Popover extends Collapsible {
   createFloatingInstance() {
     const { content, anchor, contentArrow } = this.elements;
     const floatingElements = { trigger: anchor, contentArrow, content };    
+    console.log("this.floatingOptions:\n", this.floatingOptions);
     this.floatingCleanup = createFloatingUi(floatingElements, this.floatingOptions);
   }
   destroyFloatingInstance() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.26", 
+  "version": "0.1.0-beta.28", 
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/_utils.scss

@@ -128,24 +128,39 @@ $config: (
 
 // Returns number unit info, and strips the unit
 /// @param {String} $number Number to get meta info for
-/// @return {Map} With properties (unit, value)
+/// @return {Map} With properties (unit, value, invalid [true/false if not number])
 
-@function number-info($number) {
-  $is-number: meta.type-of($number) != 'number';
-  $is-unitless: math.is-unitless($number);
-  @if ($is-unitless or not $is-number) {
+@function number-info($number, $errors: false) {
+
+  @if (meta.type-of($number) == 'number') {
+    $is-unitless: math.is-unitless($number);
     @return (
-      "unit": null,
-      "value": $number 
+      "unit": if($is-unitless, null, math.unit($number)),
+      "value": if($is-unitless, $number, strip-unit($number)),
+      "invalid" : false
     );
+
   } @else {
+    @if ($errors) {
+      @error "Expected Number, got #{ meta.type-of($number) } for #{ $number }";
+    }
     @return (
-      "unit" : math.unit($value), 
-      "value": math.div($number, ($number * 0 + 1))
+      "unit": null,
+      "value": $number,
+      "invalid" : true
     );
   }
 }
 
+/// Adds unit to unitless number
+/// @param {Number} $number The unitless number to add unit to
+/// @param {String} $unit The unit to add to number
+/// @return {String} Number with unit attached (can't be used in maths)
+
+@function add-unit($number, $unit) {
+  @return $number + string.unquote($unit);
+}
+
 /// Reusable merge method 
 /// @param {Map} $original Source map 
 /// @param {Map} $changes Changes to merge into source map
@@ -485,4 +500,14 @@ $config: (
 ) {
   #{ $property } : $value;
   #{ $property } : calc(#{ $value } + #{ $responsive-change });
+}
+
+/// Calculates the hypotenuse of a triangle
+/// - Can be used to get length between two corners of a rectangle
+/// @param {Number} $width The width of the triangle
+/// @param {Number} $height The height of the triangle
+/// @return {Number} Hypotenuse of a triangle
+
+@function hypotenuse($width, $height) {
+  @return math.sqrt(math.pow($width, 2) + math.pow($height, 2));
 }

package/scss/components/_popover.scss

@@ -29,7 +29,8 @@ $-fallbacks: (
 
 /// Module Settings
 /// @type Map
-/// @prop {Dimension} arrow-size [16px] size of the dropdown arrow.
+/// @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 {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.
@@ -40,13 +41,12 @@ $-fallbacks: (
 /// @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 {CssValue} box-shadow-footer [0 0 4px] Box shadow of the popover footer.
-/// @prop {String} box-shadow-footer-color ["box-shadow"] Color of the footer's box shadow.
 /// @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.
@@ -61,6 +61,7 @@ $-fallbacks: (
 
 $config: (
   "arrow-size"                   : 16px,
+  "arrow-mask-overlap"           : 4px,
   "background-color"             : white,
   "border-radius"                : 6px,
   "color"                        : inherit,
@@ -70,14 +71,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 +116,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 +166,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 +229,73 @@ $config: (
       }
     }
   }
+}
+
+@mixin -arrow-styles() {
+  $prefix: selector.class("popover");
+  $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"));
+  $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/types/ui/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../js/ui/popover.js"],"names":[],"mappings":"AA6BA;;GAEG;AACH,6BAGC;AAED;;;;GAIG;AACH,8BAWC;AAED;;GAEG;AACH;;;;;;;;;EAkBC;AAKD,uDAmBC;AA5FD;;GAEG;AACH,4BAAqC;AA4FrC;;GAEG;AACH;IACE,8DAIC;IADC,qBAA4C;IAa9C,+BAIC;IADC,0BAA+E;IAEjF,gCAKC;CACF;4BAhI2B,kBAAkB"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../js/ui/popover.js"],"names":[],"mappings":"AA6BA;;GAEG;AACH,6BAGC;AAED;;;;GAIG;AACH,8BAWC;AAED;;GAEG;AACH;;;;;;;;;EAkBC;AAKD,uDAmBC;AA5FD;;GAEG;AACH,4BAAqC;AA4FrC;;GAEG;AACH;IACE,8DAIC;IADC,qBAA4C;IAa9C,+BAKC;IADC,0BAA+E;IAEjF,gCAKC;CACF;4BAjI2B,kBAAkB"}