@ulu/frontend 0.1.0-beta.12 → 0.1.0-beta.121

package/scss/components/_panel.scss

@@ -0,0 +1,246 @@
+////
+/// @group panel
+/// A structured container for content with distinct header, body, and footer sections that can bleed to the edges.
+////
+
+@use "sass:map";
+@use "sass:list";
+@use "sass:meta";
+
+@use "../utils";
+@use "../selector";
+@use "../color";
+@use "../element";
+@use "../breakpoint";
+
+// Used for function fallback
+$-fallbacks: (
+  "box-shadow" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "box-shadow"
+  ),
+  "border-radius" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "border-radius"
+  ),
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {Color} background-color [rgb(255, 255, 255)] The background color of the panel
+/// @prop {Color} border [null] Set border to panel
+/// @prop {Dimension} border-radius [element.$config.border-radius] The border radius of the panel
+/// @prop {CssValue} box-shadow [element.$config.box-shadow] The box-shadow of the panel
+/// @prop {Dimension} margin-bottom [1.5rem] The bottom margin of the panel
+/// @prop {CssValue} overflow [null] Value for overflow, not included by default as it interferes with position sticky, but could be useful for cropping if that's needed (can be set on rows too)
+
+$config: (
+  "background-color" : rgb(255, 255, 255),
+  "border" : null,
+  "border-radius" : true,
+  "box-shadow" : true,
+  "margin-bottom" : 1.5em,
+  "overflow" : null,
+) !default;
+
+/// Styles Map (for unique variations/modifiers)
+/// - Use this map to define distinct visual styles for the panel
+/// - This map is two levels the first level is the name of the modifier (see default below). 
+///   This will become the modifier for the pane; so ("transparent" : (...)) = .panel--transparent.
+///   The second level is that modifier row modifiers (ie. panel__row--header) (see row options below)
+/// - Keyword "default" means without modifier for both parent and row configs
+///   - For example "default" as panel container modifier name will mean
+///     styles for this without any modifiers
+///   - In a panels row config (second level) "default" will refer to the non-modified row (ie .panel__row)
+/// - Order matters, default should be first
+/// - Row Options
+///   - Each row can have the following options:
+///       overflow: Set overflow property if needed,
+///       aspect-ratio,
+///       height,
+///       min-height,
+///       padding,
+///       margin: Can be used to create gap between container and row
+///       background-color,
+///       font-weight,
+///       font-family,
+///       color,
+///       box-shadow,
+///       grow: Default the panel will grow to fill the containers height, passing false disables this
+///       border-top: If a string is passed it will resolved as an element rule style
+///       border-bottom: If a string is passed it will resolved as an element rule style
+/// @type Map
+
+$styles: (
+  "default" : (
+    "default" : (
+      "padding": 1em,
+    ),
+    "header" : (
+      "padding" : (0.75em 1em),
+      "background-color" : #e7e7e7,
+      "border-bottom" : "default",
+      "font-weight" : bold,
+      "grow" : false,
+      "breakpoints" : (
+        "small" : (
+          "direction" : "max",
+          "padding" : (0.25em 0.5em)
+        )
+      )
+    ),
+    "footer" : (
+      "padding" : (0.5em 1em),
+      "background-color" : #f4f4f4,
+      "border-top" : "default",
+      "grow" : false
+    ),
+    "separator-top" : (
+      "border-top" : "light",
+    ),
+    "separator-bottom" : (
+      "border-bottom" : "light",
+    )
+  ),
+  "transparent" : (
+    "default" : (
+      "padding" : (1em 0),
+      "margin" : (0 1em),
+    ),
+    "header" : (
+      "padding" : (1em 0),
+      "margin" : (0 1em),
+      "background-color" : transparent,
+      "grow" : false
+    ),
+    "footer" : (
+      "padding" : (1em 0),
+      "margin" : (0 1em),
+      "background-color" : transparent,
+      "grow" : false
+    )
+  ),
+  "compact" : (
+    "default" : (
+      "padding" : (0.25em 0.5em)
+    ),
+    "header" : (
+      "padding" : (0.25em 0.5em)
+    ),
+    "body" : (
+      "padding" : (0.5em 1em)
+    )
+  )
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-panel-set(( "property" : value ));
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-panel-get("property");
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "panel [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Set style variations
+/// - See $styles for more information on map properties/structure
+/// @param {Map} $changes Map of changes (options for style include all config properties)
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
+@mixin set-styles($changes, $merge-mode: null) {
+  $styles: utils.map-merge($styles, $changes, $merge-mode) !global;
+}
+
+/// Output component styles
+/// @example scss
+///  @include ulu.component-panel-styles();
+@mixin styles {
+  $prefix: selector.class("panel");
+
+  #{ $prefix } {
+    display: flex;
+    flex-direction: column;
+    overflow: get("overflow");
+    background-color: get("background-color");
+    box-shadow: get("box-shadow");
+    border: get("border");
+    border-radius: get("border-radius");
+  }
+  #{ $prefix }__row {
+    &:first-child {
+      border-top-left-radius: get("border-radius");
+      border-top-right-radius: get("border-radius");
+    }
+    &:last-child {
+      border-bottom-left-radius: get("border-radius");
+      border-bottom-right-radius: get("border-radius");
+    }
+  }
+
+  @each $modifier, $rows in $styles {
+    @if ($modifier == "default") {
+      @each $row-name, $props in $rows {
+        @if ($row-name == "default") {
+          #{ $prefix }__row {
+            @include create-row-style($props);
+          }
+        } @else {
+          #{ $prefix }__row--#{ $row-name } {
+            @include create-row-style($props);
+          }
+        }
+      }
+    } @else {
+      #{ $prefix }--#{ $modifier } {
+        @each $row-name, $props in $rows {
+          @if ($row-name == "default") {
+            #{ $prefix }__row {
+              @include create-row-style($props);
+            }
+          } @else {
+            #{ $prefix }__row--#{ $row-name } {
+              @include create-row-style($props);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/// Create row styles
+/// @param {Map} $props - Row Options
+@mixin create-row-style($props) {
+  overflow: map.get($props, "overflow");
+  aspect-ratio: map.get($props, "aspect-ratio");
+  height: map.get($props, "height");
+  min-height: map.get($props, "min-height");
+  padding: map.get($props, "padding");
+  margin: map.get($props, "margin");
+  background-color: color.get(map.get($props, "background-color"));
+  font-weight: map.get($props, "font-weight");
+  font-family: map.get($props, "font-family");
+  color: color.get(map.get($props, "color"));
+  box-shadow: map.get($props, "box-shadow");
+  flex-grow: if(map.get($props, "grow") == false, 0, 1); // Default is grow
+  border-top: element.get-optional-rule-style(map.get($props, "border-top"));
+  border-bottom: element.get-optional-rule-style(map.get($props, "border-bottom"));
+  
+
+  // Allow passing breakpoint maps
+  $breakpoints: map.get($props, "breakpoints");
+  $b-options: ( "directionRequired" : true );
+
+  @if ($breakpoints and list.length($breakpoints)) {
+    @include breakpoint.from-each($breakpoints, $b-options) using ($b-props) {
+      @include create-row-style($b-props);
+    }
+  }
+}

package/scss/components/_popover.scss

@@ -29,7 +29,9 @@ $-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 {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.
@@ -40,13 +42,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 +62,8 @@ $-fallbacks: (
 
 $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");
+      }
+    }
+  }
 }