@ulu/frontend 0.0.23 → 0.1.0-beta.0

package/scss/components/_accordion.scss

@@ -0,0 +1,217 @@
+////
+/// @group accordion
+/// Outputs accordion component stylesheet, which can be used with <details> or custom disclosure components
+////
+
+@use "sass:map";
+@use "sass:math";
+
+@use "../selector";
+@use "../utils";
+@use "../color";
+@use "../typography";
+
+/// Module Settings
+/// @type Map
+/// @prop {Color}  background-color  [white] This is the background color of the accordion before it is expanded. 
+/// @prop {Color}  background-color-open  [#F7F8F7] 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 {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 {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-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 {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.
+
+$config: (
+  "background-color":            white,
+  "background-color-open":       #F7F8F7,
+  "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,
+  "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,
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example
+///   @include ulu.component-accordion-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example
+///   @include ulu.component-accordion-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "accordion [config]");
+}
+
+/// Prints component styles
+/// @demo accordion
+/// @example scss
+///  @include ulu.component-accordion-styles();
+
+@mixin styles {
+  $prefix: selector.class("accordion");
+
+  $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");
+    border: $border;
+    background-color: 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");
+    }
+    & + & {
+      $gap: -(get("margin") - get("margin-between"));
+      margin-top: $gap;
+      margin-top: calc($gap - 1px);
+    }
+    &[open], 
+    &.is-active  {
+      background-color: get("background-color-open");
+      padding-bottom: get("padding-y");
+      z-index: 2; // Above child details
+      > #{ $prefix }__summary {
+        margin-bottom: get("padding-y");
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0; 
+        border-bottom: $border;
+      }
+    }
+  }
+  #{ $prefix }__summary {
+    background-color: get("summary-background-color");
+    color: 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;
+    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"));
+    }
+    &:hover {
+      background-color: get("summary-background-color-hover");
+      color: get("summary-color-hover");
+      #{ $prefix }__icon {
+        background-color: get("icon-background-color-hover");
+        color: color.get(get("icon-color-hover"));
+      }
+    }
+  }
+  #{ $prefix }__icon {
+    flex: 0 0 get("icon-size");
+    color: color.get(get("icon-color"));
+    margin-left: 0.5em;
+    order: 3;
+    background-color: 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 }--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;
+        margin-bottom: 0;
+      }
+    }
+  }
+  #{ $prefix }--no-borders {
+    border: none;
+    margin-bottom: 4rem;
+    &[open] > .accordion__summary {
+      border-bottom: none;
+    }
+  }
+}

package/scss/components/_adaptive-spacing.scss

@@ -0,0 +1,148 @@
+////
+/// @group adaptive-spacing
+/// Creates adaptive (changing at breakpoints) in between items (vertical/horizontal layout)
+////
+
+@use "sass:map";
+
+@use "../breakpoint";
+@use "../utils";
+@use "../selector";
+
+/// Module Settings
+/// @type Map
+/// @prop {Boolean}  outputMargin  [false] @joe-check need examples for this to build documentation
+/// @prop {Boolean}  outputPadding  [true] This is the background color of the accordion before it is expanded. 
+/// @prop {Boolean}  outputX  [true] This is the background color of the accordion before it is expanded. 
+/// @prop {Boolean}  outputY  [true] This is the background color of the accordion before it is expanded. 
+/// @prop {Boolean}  selectorX  ["sides"] This is the background color of the accordion before it is expanded. 
+/// @prop {Boolean}  selectorY  ["ends"] This is the background color of the accordion before it is expanded. 
+
+
+$config: (
+  "outputMargin": false,
+  "outputPadding": true,
+  "outputX": true,
+  "outputY": true,
+  "selectorX": "sides",
+  "selectorY": "ends"
+);
+
+/// Sizes Map
+/// @type Map
+
+$sizes: (
+  "small" : (
+    "initial" : (
+      "size" : 2rem
+    ),
+    "medium" : (
+      "direction" : "min",
+      "size": 4rem
+    )
+  ),
+  "large" : (
+    "initial" : (
+      "size" : 4rem
+    ),
+    "medium" : (
+      "direction" : "min",
+      "size" : 8rem
+    ),
+  )
+);
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example
+///   @include ulu.component-adaptive-spacing-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Set sizes map
+/// @param {Map} $changes Map of changes
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
+
+@mixin set-sizes($changes, $merge-mode: null) {
+  $sizes: utils.map-merge($sizes, $changes, $merge-mode) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example
+///   @include ulu.component-adaptive-spacing-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "component-adaptive-spacing [config]");
+}
+
+/// Outputs adaptive spacing component styles
+/// @example scss
+///  @include ulu.component-adaptive-spacing-styles();
+
+@mixin styles {
+  $prefixMargin: selector.class("adaptive-margin");
+  $prefixPadding: selector.class("adaptive-padding");
+  $hasMargin: map.get($config, "outputMargin");
+  $hasPadding: map.get($config, "outputPadding");
+  
+  @each $name, $breakpoints in $sizes {
+    $sizePrefixMargin: "#{ $prefixMargin }-#{ $name }";
+    $sizePrefixPadding: "#{ $prefixPadding }-#{ $name }";
+    @each $breakpoint, $props in $breakpoints {
+      $direction: map.get($props, "direction");
+      $value: map.get($props, "size");
+      // If no direction it is the default
+      @if $direction == null {
+        @if $hasMargin {
+          @include -classes-for-type($sizePrefixMargin, "margin", $value);
+        }
+        @if $hasPadding {
+          @include -classes-for-type($sizePrefixPadding, "padding", $value);
+        }
+      } @else {
+        @include breakpoint.from($breakpoint, $direction) {
+          @if $hasMargin {
+            @include -classes-for-type($sizePrefixMargin, "margin", $value);
+          }
+          @if $hasPadding {
+            @include -classes-for-type($sizePrefixPadding, "padding", $value);
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin -classes-for-type($prefix, $prop, $value) {
+  #{ $prefix } {
+    #{ $prop }: $value;
+  }
+  @if (map.get($config, "outputX")) {
+    #{ $prefix }-#{ map.get($config, "selectorX")} {
+      #{ $prop }-left: $value;
+      #{ $prop }-right: $value;
+    }
+    #{ $prefix }-left {
+      #{ $prop }-left: $value;
+    }
+    #{ $prefix }-right {
+      #{ $prop }-right: $value;
+    }
+  }
+  @if (map.get($config, "outputY")) {
+    #{ $prefix }-#{ map.get($config, "selectorY")} {
+      #{ $prop }-top: $value;
+      #{ $prop }-bottom: $value;
+    }
+    #{ $prefix }-top {
+      #{ $prop }-top: $value;
+    }
+    #{ $prefix }-bottom {
+      #{ $prop }-bottom: $value;
+    }
+  }
+}
+

package/scss/components/_badge.scss

@@ -1,5 +1,6 @@
 ////
 /// @group badge
+/// Outputs badge component stylesheet
 ////
 
 @use "sass:map";
@@ -8,21 +9,21 @@
 
 /// Module Settings
 /// @type Map
-/// @prop {Number} $config.font-size Font size (basic ie. 1.3rem) for badge
-/// @prop {Number} $config.border-radius Border radius of badge
-/// @prop {Number} $config.width Width of badge (default size)
-/// @prop {Number} $config.font-weight Font weight
-/// @prop {Number} $config.background-color Background color (if no image)
-/// @prop {Number} $config.color Type color
-/// @prop {List} $config.sizes List of other sizes (large by defualt), each size is a map of (width, font-size) 
+/// @prop {Number} background-color [gray] Background color (if no image)
+/// @prop {Number} border-radius [50%] Border radius of badge
+/// @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} width [10rem] Width of badge (default size)
 
 $config: (
-  "font-size":           1.3rem,
-  "border-radius":       50%,
-  "width":               10rem,
-  "font-weight":         bold,
   "background-color":    gray,
+  "border-radius":       50%,
   "color":               black,
+  "font-size":           1.3rem,
+  "font-weight":         bold,
+  "width":               10rem,
   "sizes" : (
     "large" : (
       "font-size" : 2.75rem,
@@ -33,7 +34,8 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-///   @include module-name.set(( "property" : value ));
+/// @example
+///   @include ulu.component-badge-set(( "property" : value ));
 
 @mixin set($changes) {
   $config: map.merge($config, $changes) !global;
@@ -41,13 +43,14 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-///   @include module-name.get("property");
+/// @example
+///   @include ulu.component-badge-get("property");
 
 @function get($name) {
   @return utils.require-map-get($config, $name, "badge [config]");
 }
 
-/// Prints badge component styles
+/// Output badge component styles
 /// @example scss
 ///  @include ulu.component-badge-styles();
 /// @example html {preview}

package/scss/components/_button-verbose.scss

@@ -0,0 +1,138 @@
+////
+/// @group button-verbose
+/// A button that has additional markup (ie. page with description for example). Used on things like linear pagination (up next).
+////
+
+@use "sass:map";
+@use "sass:meta";
+
+@use "../utils";
+@use "../color";
+@use "../element";
+
+// Used for function fallback
+$-fallbacks: (
+  "border-radius" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "border-radius"
+  ),
+  "box-shadow" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "box-shadow"
+  ),
+  "box-shadow-hover" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "box-shadow-hover"
+  )
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {Color} background-color [white] Font size (basic ie. 1.3rem) for badge
+/// @prop {Color} background-color-hover [link] Font size (basic ie. 1.3rem) for badge
+/// @prop {String} border-radius [border-radius] Font size (basic ie. 1.3rem) for badge
+/// @prop {String} box-shadow [true] Use the fallback. But note it.
+/// @prop {String} box-shadow-hover [true] @joe-check these box-shadows are booleans, but it should be a css value
+/// @prop {String} color [type] Font size (basic ie. 1.3rem) for badge
+/// @prop {String} color-hover [type] Font size (basic ie. 1.3rem) for badge
+/// @prop {Color} icon-color [gray] Font size (basic ie. 1.3rem) for badge
+/// @prop {Dimension} icon-font-size [1.25rem] Font size (basic ie. 1.3rem) for badge
+/// @prop {Number} line-height [1.2] Font size (basic ie. 1.3rem) for badge
+/// @prop {Dimension} margin [1em] Font size (basic ie. 1.3rem) for badge
+/// @prop {Dimension} margin-inline [0.75em] Font size (basic ie. 1.3rem) for badge
+/// @prop {Dimension} min-width [20rem] Font size (basic ie. 1.3rem) for badge
+/// @prop {Dimension} padding-x [0.65em] Font size (basic ie. 1.3rem) for badge
+/// @prop {Dimension} padding-y [1em] Font size (basic ie. 1.3rem) for badge
+/// @prop {String} title-color [link] Font size (basic ie. 1.3rem) for badge
+/// @prop {String} title-color-hover [link-hover] Font size (basic ie. 1.3rem) for badge
+/// @prop {Dimension} title-margin [0.5em] Font size (basic ie. 1.3rem) for badge
+
+$config: (
+  "background-color" : white,
+  "background-color-hover" : "link",
+  "border-radius" : "border-radius",
+  "box-shadow" : true,
+  "box-shadow-hover" : true,
+  "color" : "type",
+  "color-hover" : "type",
+  "icon-color": gray,
+  "icon-font-size" : 1.25rem,
+  "line-height" : 1.2,
+  "margin" : 1em,
+  "margin-inline" : 0.75em,
+  "min-width": 20rem,
+  "padding-x": 0.65em,
+  "padding-y": 1em,
+  "title-color": "link",
+  "title-margin" : 0.5em,
+  "title-color-hover" : "link-hover",
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example
+///   @include ulu.component-button-verbose-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example
+///   @include ulu.component-button-verbose-get(( "property" : value ));
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "button-verbose [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @example scss
+///  @include ulu.component-button-verbose-styles();
+
+@mixin styles {
+  .button-verbose {
+    text-decoration: none;
+    border-radius: element.get(get("border-radius"));
+    box-shadow: get("box-shadow");
+    line-height: get("line-height");
+    position: relative;
+    display: block;
+    margin-bottom: get("margin");
+    max-width: 100%;
+    width: get("min-width");
+    background-color: get("background-color");
+    padding: get("padding-y") get("padding-x");
+    padding-right: (get("padding-x") * 2) + 1em;
+    color: color.get(get("color"));
+    &:hover {
+      color: color.get(get("color-hover"));
+      background-color: color.get(get("background-color-hover"));
+      box-shadow: get("box-shadow-hover");
+      .button-verbose__title  {
+        color: color.get(get("title-color-hover"));
+      }
+    }
+  }
+  .button-verbose__title {
+    display: block;
+    margin-bottom: get("title-margin");
+    color: color.get(get("title-color"));
+  }
+  .button-verbose__icon {
+    position: absolute;
+    top: 50%;
+    right: get("padding-x");
+    transform: translateY(-50%);
+    font-size: get("icon-font-size");
+    color: get("icon-color");
+  }
+  .button-verbose--inline {
+    display: inline-block;
+    margin-right: get("margin-inline");
+  }
+  .button-verbose--full-width {
+    width: 100%;
+  }
+}

package/scss/components/_button.scss

@@ -1,5 +1,6 @@
 ////
 /// @group button
+/// Output core button styles and sizes
 ////
 
 @use "sass:map";
@@ -9,13 +10,17 @@
 @use "../utils";
 @use "../button";
 
+/// Module Settings
+/// @type Map
+/// @prop {Dimension} icon-margin [1em] List of other sizes (large by default), each size is a map of (width, font-size) 
+
 $config: (
-  "icon-margin" : 1em
+  "icon-margin" : 0.5em
 ) !default;
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-///   @include module-name.set(( "property" : value ));
+///   @include ulu.component-button-set(( "property" : value ));
 
 @mixin set($changes) {
   $config: map.merge($config, $changes) !global;
@@ -23,13 +28,13 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-///   @include module-name.get("property");
+///   @include ulu.component-button-get("property");
 
 @function get($name) {
   @return utils.require-map-get($config, $name, "component-button [config]");
 }
 
-/// Prints button component styles
+/// Output button component styles
 /// @example scss
 ///  @include ulu.component-button-styles();
 /// @example html {preview}