@ulu/frontend 0.1.0-beta.83 → 0.1.0-beta.84

package/scss/_button.scss

@@ -94,7 +94,7 @@ $config: (
   
 $sizes: (
   "small" : (
-    "padding":        (0.35em 1.5em),
+    "padding":        (0.35em 1em),
     "min-width":      0,
     "icon-size":      2rem,
     "icon-font-size": 1rem
@@ -118,9 +118,9 @@ $styles: (
     "border-color" : transparent,
     "box-shadow" : none,
     "hover" : (
-      "background-color" : "white",
-      "color" : inherit,
-      "border-color" : transparent,
+      "background-color" : "control-background",
+      "color" : "control",
+      "border-color" : "control-border",
     )
   ),
   "outline" : (
@@ -129,7 +129,9 @@ $styles: (
     "border-color" : "rule-light",
     "box-shadow" : none,
     "hover" : (
-      "background-color" : "white",
+      "background-color" : "control-background",
+      "color" : "control",
+      "border-color" : "control-border",
     )
   ),
 ) !default;

package/scss/_element.scss

@@ -124,11 +124,27 @@ $rule-margins: (
 
 /// Get a rule style
 /// @param {Map} $changes Map of changes
+/// @return {CssValue} Rule style (css border value)
 
 @function get-rule-style($name: "default") {
   @return utils.require-map-get($rule-styles, $name, "element [rule style]");
 }
 
+/// Get an optional rule style (which is a border)
+/// - If the value is a string we return the rule style, else we return the value
+/// - Used for things where configuration for say a border can be a user defined border or a string (they want an existing rule-style)
+/// - Except when passing "none"/none this will return as-is (since it's a border property)
+/// @param {*} $value The value to check
+/// @return {*} Rule style if string, else value
+
+@function get-optional-rule-style($value) {
+  @if (meta.type-of($value) == "string") {
+    @return get-rule-style($value);
+  } @else {
+    @return $value;
+  }
+}
+
 /// Sets rule margin
 /// @param {Map} $changes Map of changes
 

package/scss/_utils.scss

@@ -438,6 +438,13 @@ $config: (
   @return $value;
 }
 
+/// If the value passed is equal to true use the default, else return the value
+/// @param {*} $value The value to check
+/// @param {*} $default The value to return when true
+@function default($value, $default) {
+  @return if($value == true, $default, $value);
+}
+
 /// Replaces all or one occurrence of a string within a string
 /// @param {String} $string String to operate on
 /// @param {String} $find String to find within string

package/scss/components/_button-group.scss

@@ -0,0 +1,90 @@
+////
+/// @group button-group
+/// Groups a set of buttons
+////
+
+@use "sass:map";
+@use "sass:math";
+
+@use "../selector";
+@use "../utils";
+@use "../color";
+@use "../button";
+
+/// Module Settings
+/// @type Map
+/// @prop {Dimension}  gap  [0.45em] Gap between buttons
+/// @prop {Boolean}  no-min-width  [true] Buttons within the button group should have no min width
+
+$config: (
+  "gap": 0.45em,
+  "no-min-width" : true
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-button-group-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-button-group-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "button-group [config]");
+}
+
+/// Prints component styles
+/// @demo button-group
+/// @example scss
+///  @include ulu.component-button-group-styles();
+
+@mixin styles {
+  $prefix: selector.class("button-group");
+  $prefix-button: selector.class("button");
+
+  $button-radius: button.get("border-radius");
+  
+  #{ $prefix } {
+    display: flex;
+    flex-wrap: wrap;
+    gap: get("gap");
+    #{ $prefix-button } {
+      margin: 0;
+    }
+  }
+  #{ $prefix }--joined {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    gap: 0;
+    // border-radius: button.get("border-radius");
+    #{ $prefix-button } {
+      position: relative; // To move to front when hover/active
+      border-radius: 0;
+      min-width: 0;
+      margin-left: -(button.get("border-width"));
+      &:first-child {
+        border-top-left-radius: $button-radius;
+        border-bottom-left-radius: $button-radius;
+        margin-left: 0;
+      }
+      &:last-child {
+        border-top-right-radius: $button-radius;
+        border-bottom-right-radius: $button-radius;
+      }
+      #{ button.get("active-selector") } {
+        z-index: 2;
+      }
+      &:hover,
+      &:focus {
+        z-index: 2;
+      }
+      
+    }
+  }
+}

package/scss/components/_data-grid.scss

@@ -3,9 +3,6 @@
 /// A page grid layout component that uses data attribute instead of class names, for brevity and readability
 ////
 
-/// Content Block
-/// @demo data-grid
-
 @use "sass:map";
 @use "sass:math";
 

package/scss/components/_headline-label.scss

@@ -0,0 +1,83 @@
+////
+/// @group headline-label
+////
+
+@use "sass:map";
+@use "sass:meta";
+@use "../utils";
+@use "../color";
+@use "../typography";
+
+// Used for function fallback
+$-fallbacks: (
+  "font-weight" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "font-weight-bold"
+  ),
+  "font-family" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "font-family-sans"
+  ),
+  "line-height" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "line-height-dense"
+  )
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {Color} color [ulu.cssvar-use("color-accent")] The text color of the headline label.
+/// @prop {Dimension} margin-bottom [0.2em] The bottom margin of the headline label.
+/// @prop {String} font-weight [typography.get("font-weight-bold")] The font weight of the headline label.
+/// @prop {String} font-family [typography.get("font-family-sans")] The font family of the headline label.
+/// @prop {Dimension|Number} line-height [typography.get("line-height-dense")] The font family of the headline label.
+/// @prop {String} text-transform [null] The font family of the headline label.
+/// @prop {String} type-size ["small"] The typography size preset to use for the headline label (e.g., "small", "medium", "large"), Only uses the font-size value for size
+
+$config: (
+  "color": "accent",
+  "margin-bottom": 0.2em,
+  "font-weight": true,
+  "font-family": true,
+  "line-height": true,
+  "text-transform" : null,
+  "type-size": "small"
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-headline-label-set(( "color" : red ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {String} $name Name of property
+/// @example scss
+///   @include ulu.component-headline-label-get("color");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "headline-label [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @example scss
+///  @include ulu.component-headline-label-styles();
+
+@mixin styles {
+  .headline-label {
+    display: block;
+    margin-bottom: get("margin-bottom");
+    font-weight: get("font-weight");
+    font-family: get("font-family");
+    line-height: get("line-height");
+    text-transform: get("text-transform");
+    color: color.get(get("color"));
+    @if (get("type-size")) {
+      @include typography.size(get("type-size"), $only-font-size: true);
+    }
+  }
+}

package/scss/components/_index.scss

@@ -8,6 +8,7 @@
 @forward "badge" as badge-*;
 @forward "basic-hero" as basic-hero-*;
 @forward "button" as button-*;
+@forward "button-group" as button-group-*;
 @forward "button-verbose" as button-verbose-*;
 @forward "callout" as callout-*;
 @forward "card" as card-*;
@@ -20,6 +21,7 @@
 @forward "flipcard" as flipcard-*;
 @forward "flipcard-grid" as flipcard-grid-*;
 @forward "form-theme" as form-theme-*;
+@forward "headline-label" as headline-label-*;
 @forward "horizontal-rule" as horizontal-rule-*;
 @forward "image-grid" as image-grid-*;
 @forward "links" as links-*;
@@ -32,9 +34,11 @@
 @forward "nav-strip" as nav-strip-*;
 @forward "overlay-section" as overlay-section-*;
 @forward "pager" as pager-*;
+@forward "panel" as panel-*;
 @forward "placeholder-block" as placeholder-block-*;
 @forward "pull-quote" as pull-quote-*;
 @forward "popover" as popover-*;
+@forward "rail" as rail-*;
 @forward "ratio-box" as ratio-box-*;
 @forward "rule" as rule-*;
 @forward "scroll-slider" as scroll-slider-*;
@@ -60,6 +64,7 @@
 @use "badge";
 @use "basic-hero";
 @use "button";
+@use "button-group";
 @use "button-verbose";
 @use "callout";
 @use "card";
@@ -72,6 +77,7 @@
 @use "flipcard";
 @use "flipcard-grid";
 @use "form-theme";
+@use "headline-label";
 @use "horizontal-rule";
 @use "image-grid";
 @use "list-lines";
@@ -84,9 +90,11 @@
 @use "nav-strip";
 @use "overlay-section";
 @use "pager";
+@use "panel";
 @use "placeholder-block";
 @use "popover";
 @use "pull-quote";
+@use "rail";
 @use "ratio-box";
 @use "rule";
 @use "scroll-slider";
@@ -113,6 +121,7 @@ $all-includes: (
   "badge",
   "basic-hero",
   "button",
+  "button-group",
   "button-verbose",
   "callout",
   "card",
@@ -125,6 +134,7 @@ $all-includes: (
   "flipcard",
   "flipcard-grid",
   "form-theme",
+  "headline-label",
   "horizontal-rule",
   "image-grid",
   "links",
@@ -137,7 +147,9 @@ $all-includes: (
   "nav-strip",
   "overlay-section",
   "pager",
+  "panel",
   "popover",
+  "rail",
   "ratio-box",
   "rule",
   "scroll-slider",
@@ -202,6 +214,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "button")) {
     @include button.styles;
   }
+  @if (list.index($includes, "button-group")) {
+    @include button-group.styles;
+  }
   @if (list.index($includes, "button-verbose")) {
     @include button-verbose.styles;
   }
@@ -247,6 +262,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "form-theme")) {
     @include form-theme.styles;
   }
+  @if (list.index($includes, "headline-label")) {
+    @include headline-label.styles;
+  }
   @if (list.index($includes, "horizontal-rule")) {
     @include horizontal-rule.styles;
   }
@@ -283,6 +301,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "pager")) {
     @include pager.styles;
   }
+  @if (list.index($includes, "panel")) {
+    @include panel.styles;
+  }
   @if (list.index($includes, "placeholder-block")) {
     @include placeholder-block.styles;
   }
@@ -292,6 +313,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "pull-quote")) {
     @include pull-quote.styles;
   }
+  @if (list.index($includes, "rail")) {
+    @include rail.styles;
+  }
   @if (list.index($includes, "ratio-box")) {
     @include ratio-box.styles;
   }

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);
+    }
+  }
+}