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

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/_hero.scss

@@ -11,10 +11,20 @@
 @use "../utils";
 @use "../breakpoint";
 @use "../typography";
+@use "../layout";
 
 /// Module Settings
 /// @type Map
 /// @prop {Map} extra-split-ratios  [wide 70/30] A map where the name is the modifier and the value is a list with two percentages (the first percentage will be correspond with the graphic or content depending on selector [ie. .hero--split-graphic-[name] would apply the first percentage to the graphic while hero--split-content-[name] would apply the first percentage to the content]) 
+/// @prop {String} breakpoint ["medium"] At what breakpoint the hero goes to small screen styling.
+/// @prop {Dimension} height [100vh] Height of the hero.
+/// @prop {Dimension} height-compact [40vh] Height of the hero when using the "--compact" styling.
+/// @prop {Dimension} graphic-height-stacked [60vh] Height of the graphic.
+/// @prop {Dimension} content-max-width [40rem] Max width of the content.
+/// @prop {Dimension} content-padding-top [3rem] Top padding of the content.
+/// @prop {Dimension} content-padding-bottom [3rem] Bottom padding of the content.
+/// @prop {CssValue} text-align [center] Text align of the content.
+
 
 $config: (
   "breakpoint" : "medium",
@@ -32,7 +42,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-hero-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -41,7 +51,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-hero-get("property");
 
 @function get($name) {
@@ -77,11 +87,7 @@ $config: (
     width: 100%;
   }
   #{ $prefix }__graphic-media {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    @include layout.absolute-fill(true);
     object-fit: cover;
   }
   
@@ -162,11 +168,7 @@ $config: (
       z-index: 2;
     }
     #{ $prefix }__graphic {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+      @include layout.absolute-fill();
     }
     &#{ $prefix }--bottom,
     &#{ $prefix }--bottom #{ $prefix }__content {

package/scss/components/_image-grid.scss

@@ -24,7 +24,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-image-grid-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -33,7 +33,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-image-grid-get("property");
 
 @function get($name) {

package/scss/components/_index.scss

@@ -6,11 +6,15 @@
 @forward "accordion" as accordion-*;
 @forward "adaptive-spacing" as adaptive-spacing-*;
 @forward "badge" as badge-*;
+@forward "badge-stack" as badge-stack-*;
+@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-*;
 @forward "card-grid" as card-grid-*;
+@forward "counter-list" as counter-list-*;
 @forward "css-icon" as css-icon-*;
 @forward "data-grid" as data-grid-*;
 @forward "data-table" as data-table-*;
@@ -18,10 +22,12 @@
 @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-*;
 @forward "list-lines" as list-lines-*;
+@forward "list-inline" as list-inline-*;
 @forward "list-ordered" as list-ordered-*;
 @forward "list-unordered" as list-unordered-*;
 @forward "menu-stack" as menu-stack-*;
@@ -29,13 +35,17 @@
 @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-*;
+@forward "skeleton" as skeleton-*;
 @forward "skip-link" as skip-link-*;
+@forward "sticky-list" as sticky-list-*;
 @forward "slider" as slider-*;
 @forward "hero" as hero-*;
 @forward "tabs" as tabs-*;
@@ -54,11 +64,15 @@
 @use "adaptive-spacing";
 @use "accordion";
 @use "badge";
+@use "badge-stack";
+@use "basic-hero";
 @use "button";
+@use "button-group";
 @use "button-verbose";
 @use "callout";
 @use "card";
 @use "card-grid";
+@use "counter-list";
 @use "css-icon";
 @use "data-grid";
 @use "data-table";
@@ -66,9 +80,11 @@
 @use "flipcard";
 @use "flipcard-grid";
 @use "form-theme";
+@use "headline-label";
 @use "horizontal-rule";
 @use "image-grid";
 @use "list-lines";
+@use "list-inline";
 @use "list-ordered";
 @use "list-unordered";
 @use "links";
@@ -77,13 +93,17 @@
 @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";
+@use "skeleton";
 @use "skip-link";
+@use "sticky-list";
 @use "slider";
 @use "hero";
 @use "tabs";
@@ -103,11 +123,15 @@ $all-includes: (
   "accordion",
   "adaptive-spacing",
   "badge",
+  "badge-stack",
+  "basic-hero",
   "button",
+  "button-group",
   "button-verbose",
   "callout",
   "card",
   "card-grid",
+  "counter-list",
   "css-icon",
   "data-grid",
   "data-table",
@@ -115,10 +139,12 @@ $all-includes: (
   "flipcard",
   "flipcard-grid",
   "form-theme",
+  "headline-label",
   "horizontal-rule",
   "image-grid",
   "links",
   "list-lines",
+  "list-inline",
   "list-ordered",
   "list-unordered",
   "menu-stack",
@@ -126,11 +152,15 @@ $all-includes: (
   "nav-strip",
   "overlay-section",
   "pager",
+  "panel",
   "popover",
+  "rail",
   "ratio-box",
   "rule",
   "scroll-slider",
+  "skeleton",
   "skip-link",
+  "sticky-list",
   "slider",
   "hero",
   "tabs",
@@ -190,12 +220,21 @@ $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;
   }
   @if (list.index($includes, "badge")) {
     @include badge.styles;
   }
+  @if (list.index($includes, "badge-stack")) {
+    @include badge-stack.styles;
+  }
+  @if (list.index($includes, "basic-hero")) {
+    @include basic-hero.styles;
+  }
   @if (list.index($includes, "tag")) {
     @include tag.styles;
   }
@@ -208,6 +247,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "card-grid")) {
     @include card-grid.styles;
   }
+  @if (list.index($includes, "counter-list")) {
+    @include counter-list.styles;
+  }
   @if (list.index($includes, "css-icon")) {
     @include css-icon.styles;
   }
@@ -229,6 +271,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;
   }
@@ -241,6 +286,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "list-lines")) {
     @include list-lines.styles;
   }
+  @if (list.index($includes, "list-inline")) {
+    @include list-inline.styles;
+  }
   @if (list.index($includes, "list-unordered")) {
     @include list-unordered.styles;
   }
@@ -262,6 +310,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;
   }
@@ -271,6 +322,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;
   }
@@ -280,9 +334,15 @@ $current-includes: $all-includes;
   @if (list.index($includes, "scroll-slider")) {
     @include scroll-slider.styles;
   }
+  @if (list.index($includes, "skeleton")) {
+    @include skeleton.styles;
+  }
   @if (list.index($includes, "skip-link")) {
     @include skip-link.styles;
   }
+  @if (list.index($includes, "sticky-list")) {
+    @include sticky-list.styles;
+  }
   @if (list.index($includes, "slider")) {
     @include slider.styles;
   }

package/scss/components/_list-inline.scss

@@ -0,0 +1,80 @@
+////
+/// @group list-inline
+////
+
+@use "sass:map";
+
+@use "../element";
+@use "../selector";
+@use "../utils";
+
+/// Module Config
+/// @prop {String} rule-style ["light"] Name of element > rule style to use for divider/border
+/// @prop {Dimension} margin-top [0] Top margin of list.
+/// @prop {Dimension} margin-bottom [1em] Bottom margin of list.
+/// @prop {Dimension} space-between [1em] Gap between item and dividers
+/// @prop {Dimension} space-between-large [1em] Gap between item and dividers when using large-gap modifier
+
+$config: (
+  "rule-style" : "light",
+  "margin-top": 0,
+  "margin-bottom": 1em,
+  "space-between" : 1em,
+  "space-between-large" : 2em
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-list-inline-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-list-inline-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "list-inline [config]");
+}
+
+/// Output component stylesheet
+/// @example scss
+///  @include ulu.component-list-inline-styles();
+
+@mixin styles {
+  $prefix: selector.class("list-inline");
+  $border: element.get-rule-style(get("rule-style"));
+  
+  ul#{ $prefix },
+  #{ $prefix } ul {
+    list-style: none;
+    display: inline-flex;
+    flex-wrap: wrap;
+    margin: get("margin-top") 0 get("margin-bottom") 0;
+  }
+  #{ $prefix } {
+    li {
+      // Not using flex gap because we would need to position
+      // pseudo for divider, so we would still need to use math
+      // So custom properties couldn't be used (no benefit)
+      padding-right: get("space-between");
+      margin-right: get("space-between");
+      border-right: $border;
+      &:last-child {
+        border-right: none;
+        padding-right: 0;
+        margin-right: 0;
+      }
+    }
+  }
+  #{ $prefix }--large-gap {
+    li {
+      padding-right: get("space-between-large");
+      margin-right: get("space-between-large");
+    }
+  }
+}

package/scss/components/_list-lines.scss

@@ -3,30 +3,45 @@
 ////
 
 @use "sass:map";
+@use "sass:meta";
 
 @use "../element";
-@use "../color";
 @use "../typography";
+@use "../selector";
 @use "../utils";
 
+// Used for function fallback
+$-fallbacks: (
+  "dense-line-height" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "line-height-dense"
+  ),
+);
+
 /// Module Config
 /// @prop {Boolean} border-first [true] If enabled, adds a top border to the first item in list-lines.
 /// @prop {Boolean} border-last [true] If enabled, adds a bottom border to the last item in list-lines.
+/// @prop {String} rule-style ["light"] Name of element > rule style to use for divider/border
 /// @prop {Dimension} margin-bottom [1em] Bottom margin of list.
 /// @prop {Dimension} margin-top [0] Top margin of list.
 /// @prop {Dimension} padding-between [1em] Padding between items in list.
+/// @prop {Dimension} padding-between [1em] Padding between items in list when using dense modifier
+/// @prop {Dimension} line-height-dense [true] Line height when list lines has dense modifier (defaults to typography line-height-dense)
 
 $config: (
   "border-first" : true,
   "border-last" : true,
   "margin-bottom": 1em,
   "margin-top": 0,
-  "padding-between" : 1em
+  "rule-style" : "light",
+  "padding-between" : 1em,
+  "dense-padding-between" : 0.65em,
+  "dense-line-height" : true
 ) !default;
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-list-lines-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -35,35 +50,12 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-list-lines-get("property");
 
 @function get($name) {
-  @return utils.require-map-get($config, $name, "grid [config]");
-}
-
-/// Output component styles
-
-@mixin inner-styles {
-  $border: element.get-rule-style("light") !default;
-  list-style: none;
-  margin: get("margin-top") 0 get("margin-bottom") 0;
-  padding: 0;
-  @if (get("border-first")) {
-    border-top: $border;
-  }
-  >li {
-    border-bottom: $border;
-    padding: get("padding-between") 0;
-    >*:last-child {
-      margin-bottom: 0;
-    }
-    @if (not get("border-last")) {
-      &:last-child {
-        border-bottom-width: 0;
-      }
-    }
-  }
+  $value: utils.require-map-get($config, $name, "list-lines [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
 }
 
 /// Output component stylesheet
@@ -71,14 +63,33 @@ $config: (
 ///  @include ulu.component-list-lines-styles();
 
 @mixin styles {
-  
-  .list-lines {
-    @include inner-styles;
+  $prefix: selector.class("list-lines");
+  $border: element.get-rule-style(get("rule-style"));
+
+  #{ $prefix } {
+    list-style: none;
+    margin: get("margin-top") 0 get("margin-bottom") 0;
+    padding: 0;
+    @if (get("border-first")) {
+      border-top: $border;
+    }
+    >li {
+      border-bottom: $border;
+      padding: get("padding-between") 0;
+      >*:last-child {
+        margin-bottom: 0;
+      }
+      @if (not get("border-last")) {
+        &:last-child {
+          border-bottom-width: 0;
+        }
+      }
+    }
   }
-  .list-lines--dense {
+  #{ $prefix }--dense {
     >li {
-      padding: 0.5em 0;
-      line-height: typography.get("line-height-dense");
+      padding: get("dense-padding-between") 0;
+      line-height: get("dense-line-height");
     }
   }
 }

package/scss/components/_list-ordered.scss

@@ -3,7 +3,6 @@
 ////
 
 @use "../element";
-@use "../color";
 @use "../selector";
 
 /// Output component stylesheet