@ulu/frontend 0.1.0-beta.11 → 0.1.0-beta.111

package/scss/components/_accordion.scss

@@ -4,70 +4,92 @@
 ////
 
 @use "sass:map";
+@use "sass:meta";
 @use "sass:math";
 
 @use "../selector";
 @use "../utils";
 @use "../color";
 @use "../typography";
+@use "../element";
+
+
+// Used for function fallback
+$-fallbacks: (
+  "border-radius" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "border-radius"
+  ),
+);
 
 /// Module Settings
 /// @type Map
-/// @prop {Color}  background-color  [accordion-background] This is the background color of the accordion before it is expanded. 
-/// @prop {Color}  background-color-open  [accordion-background-open] This is the background color of the accordion before it is expanded. This will change the background color of the accordion's summary as well as the details.
-/// @prop {String} border-color ["rule"]
-/// @prop {Number} border-radius  [0] This applies a rounding of edges for the accordion. If there are multiple accordions in a stack, this will only apply to the top of the first accordion and the bottom of the last accordion.
-/// @prop {Dimension} border-width  [1px] The width of the borders of the accordions
-/// @prop {CssValue} box-shadow  [none] Adds a box shadow to accordion container
-/// @prop {Dimension} margin  [3rem] text This is the margin above and below the accordion. Multiple Accordions will stack. See margin-between below.
+/// @prop {Color}  background-color  [background] This is the background color of the accordion before it is expanded.
+/// @prop {Color}  background-color-open  [white] This is the background color of the accordion when it is expanded. This will change the background color of the accordion's summary as well as the details.
+/// @prop {String} border-color ["rule-light"] The color of the accordion border.
+/// @prop {Boolean|Number} border-radius  [true] This applies a rounding of edges for the accordion. If there are multiple accordions in a stack, this will only apply to the top of the first accordion and the bottom of the last accordion.
+/// @prop {Dimension} border-width  [1px] The width of the borders of the accordions.
+/// @prop {CssValue} box-shadow  [none] Adds a box shadow to accordion container.
+/// @prop {Dimension} margin  [(1.5em 0)] This is the margin above and below the accordion. Multiple Accordions will stack. See margin-between below.
 /// @prop {Dimension} margin-between  [0] This adds a margin between adjacent accordions. By default, accordions do not have any net margin between each other.
-/// @prop {Dimension} padding-x  [1.5em] Singular value for the left and right padding
-/// @prop {Dimension} padding-y  [1.5em] Singular value for the top and bottom padding
+/// @prop {Dimension} padding-x  [1.5em] Singular value for the left and right padding.
+/// @prop {Dimension} padding-y  [1.5em] Singular value for the top and bottom padding.
 /// @prop {Color} icon-background-color  [transparent] The background color of the icon.
 /// @prop {Color} icon-background-color-hover  [transparent] The background color of the icon when hovered or focused.
 /// @prop {Number} icon-border-radius  [50%] The border-radius of the icon.
 /// @prop {String} icon-color  [link] Color of the icon. This uses color.scss, so the value of this option should be a color variable from color.scss.
 /// @prop {String} icon-color-hover  [link-hover] Color of the icon when hovered or focused on. This uses color.scss, so the value of this options should be a color variable from color.scss.
-/// @prop {Dimension} icon-font-size  [1.5rem] The font-size of the icon.
+/// @prop {Dimension} icon-font-size  [1em] The font-size of the icon.
+/// @prop {Dimension} icon-margin [1em] The margin to the left of the icon.
 /// @prop {Dimension} icon-size  [auto] The size of the icon. Used as the base in the flex property.
-/// @prop {Dimension} icon-stroke-width [0.15em]
-/// @prop {Color} summary-background-color  [null] The background color for the summary (toggle button) of the accordion
+/// @prop {Dimension} icon-stroke-width [0.15em] The stroke width of the icon.
+/// @prop {Color} summary-background-color  [#f6f6f6] The background color for the summary (toggle button) of the accordion.
+/// @prop {Color} summary-background-color-hover [null] The background color for the summary (toggle button) of the accordion when hovered.
 /// @prop {Color} summary-color  [null] The color of the text in the accordion summary.
 /// @prop {Color} summary-color-hover  [null] The color of the text in the accordion summary when hovering or focusing on it.
 /// @prop {Dimension} summary-line-height  [null] Adjusts the line height of the summary element.
-/// @prop {Dimension} summary-padding-y  [1rem] The vertical padding of the summary.
-/// @prop {Dimension} summary-type-size  [false] The size of the text in the accordion summary. 
-/// @prop {Dimension} transparent-padding-y  [1em] The upper and lower padding of the transparent summary.
-/// @prop {Dimension} transparent-padding-x  [0] The upper and lower padding of the transparent summary.
+/// @prop {Dimension} summary-padding-y  [1em] The vertical padding of the summary.
+/// @prop {String|Boolean} summary-type-size  ["large"] The typography size of the text in the accordion summary. Can be a boolean to disable.
+/// @prop {Boolean} summary-border-enabled [true] Whether the summary has a border when the accordion is open.
+/// @prop {Color} summary-border-color [rule-light] The color of the summary border.
+/// @prop {Dimension} summary-border-width [1px] The width of the summary border.
+/// @prop {Dimension} transparent-content-padding [(0.25em 0)] The padding of the content area for transparent accordions.
+/// @prop {Dimension} borderless-margin-between  [0.5em] Margin between accordions when using no-border modifier.
+/// @prop {String} active-selector ['.is-active'] The selector used for the active state of a non-<details> accordion.
 
 $config: (
-  "background-color":            "background",
-  "background-color-open":       "background-gray",
-  "border-color":                "rule",
-  "border-radius":               0,
-  "border-width":                1px,
-  "box-shadow":                  none,
-  "margin":                      3rem,
-  "margin-between":              0,
-  "padding-x":                   1.5em,
-  "padding-y":                   1.5em,
-  "icon-background-color":       transparent,
-  "icon-background-color-hover": transparent,
-  "icon-border-radius":          50%,
-  "icon-color":                  "link",
-  "icon-color-hover":            "link-hover",
-  "icon-font-size":              1.5rem,
-  "icon-size":                   auto,
-  "icon-stroke-width":           0.15em,
-  "summary-background-color":    "white",
-  "summary-color":               null,
+  "background-color":               "background",
+  "background-color-open":          white,
+  "border-color":                   "rule-light",
+  "border-radius":                  true,
+  "border-width":                   1px,
+  "box-shadow":                     none,
+  "margin":                         (1.5em 0),
+  "margin-between":                 0,
+  "padding-x":                      1.25em,
+  "padding-y":                      1.25em,
+  "icon-background-color":          transparent,
+  "icon-background-color-hover":    transparent,
+  "icon-border-radius":             50%,
+  "icon-color":                     "link",
+  "icon-color-hover":               "link-hover",
+  "icon-font-size":                 1em,
+  "icon-margin":                    1em,
+  "icon-size":                      auto,
+  "icon-stroke-width":              0.15em,
+  "summary-background-color":       #f6f6f6,
+  "summary-color":                  null,
   "summary-background-color-hover": null,
-  "summary-color-hover":         null,
-  "summary-line-height":         null,
-  "summary-padding-y":           1rem,
-  "summary-type-size":           false,
-  "transparent-padding-x":       0,
-  "transparent-padding-y":       1em,
+  "summary-color-hover":            null,
+  "summary-line-height":            null,
+  "summary-padding-y":              1em,
+  "summary-type-size":              false,
+  "summary-border-enabled":         true,
+  "summary-border-color":           "rule-light",
+  "summary-border-width":           1px,
+  "transparent-content-padding":    (0.25em 0),
+  "borderless-margin-between":      0.5em,
+  "active-selector":                ".is-active"
 ) !default;
 
 /// Change modules $config
@@ -85,7 +107,8 @@ $config: (
 ///   @include ulu.component-accordion-get("property");
 
 @function get($name) {
-  @return utils.require-map-get($config, $name, "accordion [config]");
+  $value: utils.require-map-get($config, $name, "accordion [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
 }
 
 /// Prints component styles
@@ -95,72 +118,88 @@ $config: (
 
 @mixin styles {
   $prefix: selector.class("accordion");
-
+  $active-selector: get("active-selector");
+  $padding-x: get("padding-x");
   $border: get("border-width") solid color.get(get("border-color"));
 
   // When not one of our custom classed details components
   #{ $prefix } {
-    position: relative; // For active border
-    border-radius: 0;
-    padding-left: get("padding-x");
-    padding-right: get("padding-x");
-    margin-top: get("margin");
-    margin-bottom: get("margin");
+    position: relative; // For pushing to the top when in accordion groups
+    padding: 0;
+    margin: get("margin");
     border: $border;
     background-color: color.get(get("background-color"));
     box-shadow: get("box-shadow");
-    &:first-of-type {
-      border-top-left-radius: get("border-radius");
-      border-top-right-radius: get("border-radius");
-    }
-    &:last-of-type {
-      border-bottom-left-radius: get("border-radius");
-      border-bottom-right-radius: get("border-radius");
+    border-radius: get("border-radius");
+
+    // Sibling before sets the gap
+    & + #{ $prefix } {
+      margin-top: 0;
     }
-    & + & {
-      $gap: -(get("margin") - get("margin-between"));
-      margin-top: $gap;
-      margin-top: calc($gap - 1px);
+
+    // If no space get rid of border radiuses
+    @if (get("margin-between") == 0) {
+      &:has(+ #{ $prefix }) {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        margin-bottom: 0;
+      }
+      & + #{ $prefix } {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        margin-top: -(get("border-width")); // Pull border over top
+      }
+    } @else {
+      &:has(+ #{ $prefix }) {
+        margin-bottom: get("margin-between");
+      }
     }
+    
     &[open], 
-    &.is-active  {
+    &#{ $active-selector }  {
       background-color: color.get(get("background-color-open"));
-      padding-bottom: get("padding-y");
-      z-index: 2; // Above child details
+      z-index: 2; // Above other details/accordions
       > #{ $prefix }__summary {
-        margin-bottom: get("padding-y");
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0; 
-        border-bottom: $border;
+
+        @if (get("summary-border-enabled")) {
+          &::after {
+            content: "";
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            height: get("summary-border-width");
+            background-color: color.get(get("summary-border-color"));
+          }
+        }
       }
     }
   }
   #{ $prefix }__summary {
+    position: relative; // For pseudo border (done this way for animations)
+    display: flex;
+    list-style: none; // Remove the default arrow (old safari?)
+    width: 100%; // For <button>
     background-color: color.get(get("summary-background-color"));
     color: color.get(get("summary-color"));
-    margin-left: -(get("padding-x"));
-    margin-right: -(get("padding-x"));
     line-height: get("summary-line-height");
-    padding: get("summary-padding-y") get("padding-x");
-    vertical-align: top;
+    padding: get("summary-padding-y") $padding-x;
+    border-radius: get("border-radius");
     font-weight: bold;
     cursor: pointer;
-    &:has(#{ $prefix }__icon) {
-      display: flex; // For icon
-      align-items: center;
-      justify-content: space-between;
-      list-style: none; // Remove the default arrow (old safari?)
-      &::-webkit-details-marker,
-      &::marker {
-        display: none;
-        content: "";
-      }
-    }
-    
-    @if (get("summary-type-size")) {
-      @include typography.size(get("summary-type-size"));
+    align-items: center;
+
+    @include typography.optional-size(get("summary-type-size"), $only-font-size: true);
+
+    &::-webkit-details-marker,
+    &::marker {
+      display: none;
+      content: "";
     }
-    &:hover {
+    &:hover,
+    &:focus {
       background-color: color.get(get("summary-background-color-hover"));
       color: color.get(get("summary-color-hover"));
       #{ $prefix }__icon {
@@ -170,48 +209,66 @@ $config: (
     }
   }
   #{ $prefix }__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     flex: 0 0 get("icon-size");
     color: color.get(get("icon-color"));
-    margin-left: 0.5em;
-    order: 3;
+    margin-left: auto;
+    padding-left: get("icon-margin");
     background-color: color.get(get("icon-background-color"));
     border-radius: get("icon-border-radius");
     width: get("icon-size");
     height: get("icon-size");
     font-size: get("icon-font-size");
     line-height: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
+  }
+  #{ $prefix }__content {
+    padding: get("padding-y") $padding-x;
+    border-bottom-left-radius: get("border-radius");
+    border-bottom-right-radius: get("border-radius");
   }
   #{ $prefix }--transparent {
     border-left: none;
     border-right: none;
     background-color: transparent;
-    padding-left: get("transparent-padding-x");
-    padding-right: get("transparent-padding-x");
-    > #{ $prefix }__summary {
-      margin-left: -(get("transparent-padding-x"));
-      margin-right: -(get("transparent-padding-x"));
-      padding: get("transparent-padding-y") get("transparent-padding-x");
-      background-color: transparent;
-      border: none;
-    }
-    &[open], 
-    &.is-active {
-      background-color: transparent;
-      > #{ $prefix }__summary{
-        border-bottom: none;
+    border-radius: 0;
+
+    // Transparent always collapses space
+    @if (get("margin-between") != 0) {
+      &:has(+ #{ $prefix }) {
         margin-bottom: 0;
       }
+      & + #{ $prefix } {
+        margin-top: -(get("border-width")); // Pull border over top
+      }
+    }
+    > #{ $prefix }__summary,
+    > #{ $prefix }__content {
+      padding-left: 0;
+      padding-right: 0;
+      background-color: transparent;
+      border: none !important;
+      border-radius: 0 !important;
+    }
+    > #{ $prefix }__content {
+      padding: get("transparent-content-padding");
     }
   }
-  #{ $prefix }--no-borders {
+  #{ $prefix }--borderless {
     border: none;
-    margin-bottom: 4rem;
-    &[open] > .accordion__summary {
-      border-bottom: none;
+    &:has(+ #{ $prefix }) {
+      margin-bottom: 0;
+    }
+    & + #{ $prefix }--borderless {
+      margin-top: calc(get("borderless-margin-between") - get("border-width"));
+    }
+    &[open],
+    &#{ $active-selector } {
+      & > #{ $prefix }__summary {
+        border-radius: get("border-radius");
+        border-bottom: none;
+      }
     }
   }
 }

package/scss/components/_badge-stack.scss

@@ -0,0 +1,84 @@
+////
+/// @group badge-stack
+/// Stacks badges
+////
+
+@use "sass:map";
+@use "../utils";
+@use "../selector";
+@use "../color";
+@use "badge";
+
+/// Module Settings
+/// @type Map
+/// @prop {Dimension} width [10rem] Width of the badge stack
+/// @prop {Dimension} overlap [-5px] Right margin for stacked items
+/// @prop {Dimension} border-width [3px] Border width for stacked items
+
+$config: (
+  "width": 10rem,
+  "overlap": -5px,
+  "border-width": 3px,
+  "border-color" : "accent"
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-badge-stack-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-badge-stack-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "badge-stack [config]");
+}
+
+/// Prints component styles
+/// @demo badge-stack
+/// @example scss
+///  @include ulu.component-badge-stack-styles();
+
+@mixin styles {
+  $prefix: selector.class("badge-stack");
+  $prefix-badge: selector.class("badge");
+
+  #{ $prefix } {
+    width: get("width");
+    display: flex;
+  }
+  #{ $prefix }__item {
+    flex: 0 1 min-content;
+    margin-right: get("overlap");
+
+    #{ $prefix-badge }__inner {
+      // box-shadow: ulu.element-get("box-shadow");
+      position: relative;
+      &:before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: -1px;
+        bottom: -1px;
+        left: -1px;
+        right: -1px;
+        border-radius: badge.get("border-radius");
+        border: get("border-width") solid color.get(get("border-color"));
+      }
+    }
+    #{ $prefix-badge } {
+      &:focus,
+      &:hover {
+        #{ $prefix-badge }__inner {
+          z-index: 2;
+        }
+      }
+    }
+  }
+}

package/scss/components/_badge.scss

@@ -3,11 +3,21 @@
 /// Outputs badge component stylesheet
 ////
 
+@use "sass:meta";
 @use "sass:map";
 @use "../utils";
 @use "../selector";
+@use "../typography";
 @use "../color";
 
+// Used for function fallback
+$-fallbacks: (
+  "font-family" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "font-family-sans"
+  )
+);
+
 /// Module Settings
 /// @type Map
 /// @prop {Number} background-color [gray] Background color (if no image)
@@ -15,20 +25,28 @@
 /// @prop {Number} color [black] Type color
 /// @prop {Number} font-size [1.3rem] Font size (basic ie. 1.3rem) for badge
 /// @prop {Number} font-weight [bold] Font weight
-/// @prop {List} sizes [Object] List of other sizes (large by default), each size is a map of (width, font-size) 
+/// @prop {Number} font-family [true] Specify font family, defaults to typography font-family-sans
 /// @prop {Number} width [10rem] Width of badge (default size)
+/// @prop {Number} hover-scale [1.2] Scale of badge (if clickable) on hover (enlarges badge)
+/// @prop {List} sizes [Object] List of other sizes (large by default), each size is a map of (width, font-size) 
 
 $config: (
   "background-color":    gray,
   "border-radius":       50%,
   "color":               black,
-  "font-size":           1.3rem,
+  "font-size":           1.5rem,
   "font-weight":         bold,
-  "width":               10rem,
+  "font-family":         true,
+  "width":               7rem,
+  "hover-scale":         1.2,
   "sizes" : (
+    "small" : (
+      "font-size" : 1.2rem,
+      "width" :  5rem
+    ),
     "large" : (
       "font-size" : 2.75rem,
-      "width" :  6rem
+      "width" :  9rem
     )
   )
 ) !default;
@@ -48,7 +66,8 @@ $config: (
 ///   @include ulu.component-badge-get("property");
 
 @function get($name) {
-  @return utils.require-map-get($config, $name, "badge [config]");
+  $value: utils.require-map-get($config, $name, "badge [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
 }
 
 /// Output badge component styles
@@ -77,6 +96,7 @@ $config: (
     flex: 0 0 get("width");
     font-size: get("font-size");
     font-weight: get("font-weight");
+    font-family: get("font-family");
   }
   #{ $prefix }__inner {
     display: block;
@@ -99,11 +119,13 @@ $config: (
       color: color.get(get("color"));
     }
   }
-  #{ $prefix }--clickable {
+  #{ $prefix }--clickable,
+  button#{ $prefix },
+  a#{ $prefix } {
     &:hover,
     &:focus {
       #{ $prefix }__inner {
-        transform: scale(1.2);
+        transform: scale(get("hover-scale"));
       }
     }
   }
@@ -118,6 +140,7 @@ $config: (
     width: 100%;
     height: 100%;
     object-fit: cover;
+    margin: 0 !important;
   }
 
   @each $name, $props in get("sizes") {

package/scss/components/_basic-hero.scss

@@ -0,0 +1,112 @@
+////
+/// @group basic-hero
+/// Basic styling for a hero
+////
+
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:list";
+
+@use "../breakpoint";
+@use "../selector";
+@use "../utils";
+@use "../typography";
+@use "../color";
+
+// Used for function fallback
+$-fallbacks: (
+  "main-max-width" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "max-width"
+  ),
+  "main-min-width" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "max-width-small"
+  ),
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {CssValue} text-align [center] Alignment of text within hero.
+/// @prop {Color} background-color ["color-hero-background"] Background color of the hero
+
+$config: (
+  "background-color" : "background-gray",
+  "padding-top": 3rem,
+  "padding-bottom" : 2rem,
+  "gap" : (4rem 2rem),
+  "main-max-width" : true,
+  "main-min-width" : true,
+  "media-max-width" : 20rem,
+  "media-vertical-align" : center
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-basic-hero-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-basic-hero-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "basic-hero [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @example scss
+///  @include ulu.component-basic-hero-styles();
+
+@mixin styles {
+  $prefix: selector.class("basic-hero");
+
+  #{ $prefix } {
+    background-color: color.get(get("background-color")); 
+  }
+  #{ $prefix }__content {
+    display: flex;
+    align-items: stretch;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: get("gap"); 
+    padding-top: get("padding-top");
+    padding-bottom: get("padding-bottom");
+  }
+  #{ $prefix }__content-main {
+    $min-width: if(get("main-min-width"), get("main-min-width"), get("main-max-width"));
+    // Using max/min-width so that we don't need to add selectors to change flex-basis
+    // when centered. Using flex-basis: 0 to allow flexbox to decide the items width
+    // allows it to expand/shrink within. min(100%... Never larger than parent
+    min-width: min(100%, $min-width); 
+    max-width: get("main-max-width");
+    flex-shrink: 1;
+    flex-grow: 1;
+    flex-basis: 0;
+  }
+  #{ $prefix }__content-media {
+    display: flex;
+    align-items: center;
+    align-self: get("media-vertical-align");
+    justify-content: center;
+    flex: 0 0 auto; 
+    width: min(100%, get("media-max-width"));
+  }
+
+  // Modifiers
+  #{ $prefix }--center {
+    #{ $prefix }__content {
+      flex-direction: column;
+      flex-wrap: nowrap;
+      text-align: center;
+      align-items: center;
+    }
+  }
+}