@ulu/frontend 0.1.0-beta.1 → 0.1.0-beta.100

package/scss/components/_overlay-section.scss

@@ -8,6 +8,8 @@
 @use "sass:map";
 @use "../utils";
 @use "../breakpoint";
+@use "../color";
+@use "../layout";
 
 /// Module Settings
 /// @type Map
@@ -41,7 +43,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-overlay-section-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -50,7 +52,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-overlay-section-get("property");
 
 @function get($name) {
@@ -59,7 +61,6 @@ $config: (
 
 /// Prints component styles
 /// @example scss
-/// @example scss
 ///  @include ulu.component-overlay-section-styles();
 
 @mixin styles {
@@ -81,11 +82,7 @@ $config: (
     }
   }
   .overlay-section__background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    @include layout.absolute-fill();
     img, 
     video {
       object-fit: cover;
@@ -96,7 +93,7 @@ $config: (
   .overlay-section__content {
     position: relative;
     z-index: 2;
-    background-color: get("content-background-color");
+    background-color: color.get(get("content-background-color"));
     border: get("content-border");
     flex: 0 1 get("content-width");
     padding: get("content-padding");

package/scss/components/_pager.scss

@@ -15,9 +15,9 @@
 /// Module Settings
 /// @type Map
 /// @prop {String} background-color [link] The background color of the pager. This uses color.scss, so the value of this options should be a color variable from color.scss.
-/// @prop {String} background-color-hover [linkhover] The background color of the pager when hovered or focused. This uses color.scss, so the value of this options should be a color variable from color.scss.
+/// @prop {String} background-color-hover [link-hover] The background color of the pager when hovered or focused. This uses color.scss, so the value of this options should be a color variable from color.scss.
 /// @prop {String} border-color [link] The border color of the pager item. This uses color.scss, so the value of this options should be a color variable from color.scss.
-/// @prop {String} border-color-hover [linkhover] The border color of the pager item when hovered or focused. This uses color.scss, so the value of this options should be a color variable from color.scss.
+/// @prop {String} border-color-hover [link-hover] The border color of the pager item when hovered or focused. This uses color.scss, so the value of this options should be a color variable from color.scss.
 /// @prop {Dimension} border-radius [50%] The border radius of the pager item.
 /// @prop {Dimension} border-width [1px] The border width of the pager item.
 /// @prop {Color} color [white] The type color of the pager item.
@@ -32,7 +32,7 @@
 /// @prop {Color} active-color [type] The type color when active. This uses color.scss, so the value of this options should be a color variable from color.scss.
 /// @prop {CssValue} active-font-weight [bold] The font weight of the pager when focused or hovered.
 /// @prop {String} action-background-color [link] The background color of the actions options of the pager. This uses color.scss, so the value of this options should be a color variable from color.scss.
-/// @prop {String} action-background-color-hover [linkhover] The background color of the actions options of the pager when focused or hovered. This uses color.scss, so the value of this options should be a color variable from color.scss.
+/// @prop {String} action-background-color-hover [link-hover] The background color of the actions options of the pager when focused or hovered. This uses color.scss, so the value of this options should be a color variable from color.scss.
 /// @prop {Color} action-border-color [transparent] The border color of the action options of the pager.
 /// @prop {String} action-border-color-hover [link] The border color of the action options of the pager when focused or hovered. This uses color.scss, so the value of this options should be a color variable from color.scss.
 /// @prop {Color} action-color [white] The type color of the actions options of the pager.
@@ -72,7 +72,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-pager-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -81,7 +81,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-pager-get("property");
 
 
@@ -120,9 +120,9 @@ $config: (
       border-radius: get("border-radius");
       border: get("border-width") solid color.get(get("border-color"));
       background-color: color.get(get("background-color"));
-      color: get("color");
+      color: color.get(get("color"));
       &:hover {
-        color: get("color-hover");
+        color: color.get(get("color-hover"));
         border-color: color.get(get("border-color-hover"));
         background-color: color.get(get("background-color-hover"));
       }
@@ -134,8 +134,8 @@ $config: (
       span {
         font-weight: get("font-weight");
         color: color.get(get("active-color"));
-        background-color: get("active-background-color");
-        border-color: get("active-border-color");
+        background-color: color.get(get("active-background-color"));
+        border-color: color.get(get("active-border-color"));
       }
     }
   }
@@ -148,14 +148,14 @@ $config: (
       height: get("action-width");
       line-height: get("action-width");
       background-color: color.get(get("action-background-color"));
-      color: get("action-color");
+      color: color.get(get("action-color"));
       font-size: 1.2rem;
       line-height: 2.8rem;
       font-weight: bold;
       &:hover {
         border-color: color.get(get("action-border-color-hover"));
         background-color: color.get(get("action-background-color-hover"));
-        color: get("action-color-hover");
+        color: color.get(get("action-color-hover"));
       }
     }
   }

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/_placeholder-block.scss

@@ -67,7 +67,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-placeholder-block-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -76,7 +76,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-placeholder-block-get("property");
 
 @function get($name) {
@@ -92,20 +92,20 @@ $config: (
   $prefix: selector.class("placeholder-block");
 
   #{ $prefix } {
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     padding: get("padding");
-    color: get("color");
-    border: get("border-width") get("border-style") get("border-color");
+    color: color.get(get("color"));
+    border: get("border-width") get("border-style") color.get(get("border-color"));
     margin-bottom: get("margin-bottom");
     border-radius: get("border-radius");
   }
   #{ $prefix }__icon {
-    color: get("icon-color");
+    color: color.get(get("icon-color"));
     display: block;
     margin: 0 auto get("icon-margin") auto;
     font-size: get("icon-font-size");