@ulu/frontend 0.0.23 → 0.1.0-beta.0

package/scss/components/_list-lines.scss

@@ -10,18 +10,24 @@
 @use "../utils";
 
 /// 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 {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.
 
 $config: (
   "border-first" : true,
   "border-last" : true,
-  "margin-top": 0,
   "margin-bottom": 1em,
+  "margin-top": 0,
   "padding-between" : 1em
 ) !default;
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-///   @include module-name.set(( "property" : value ));
+/// @example
+///   @include ulu.component-list-lines-set(( "property" : value ));
 
 @mixin set($changes) {
   $config: map.merge($config, $changes) !global;
@@ -29,7 +35,8 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-///   @include module-name.get("property");
+/// @example
+///   @include ulu.component-list-lines-get("property");
 
 @function get($name) {
   @return utils.require-map-get($config, $name, "grid [config]");
@@ -59,6 +66,10 @@ $config: (
   }
 }
 
+/// Output component stylesheet
+/// @example scss
+///  @include ulu.component-list-lines-styles();
+
 @mixin styles {
   
   .list-lines {

package/scss/components/_list-ordered.scss

@@ -6,7 +6,9 @@
 @use "../color";
 @use "../selector";
 
-/// Output styles
+/// Output component stylesheet
+/// @example scss
+///  @include ulu.component-list-ordered-styles();
 
 @mixin styles {
   $prefix: selector.class("list-ordered");

package/scss/components/_list-unordered.scss

@@ -6,7 +6,9 @@
 @use "../color";
 @use "../selector";
 
-/// Output styles
+/// Output component stylesheet
+/// @example scss
+///  @include ulu.component-list-unordered-styles();
 
 @mixin styles {
   $prefix: selector.class("list-unordered");

package/scss/components/_menu-stack.scss

@@ -0,0 +1,245 @@
+////
+/// @group menu-stack
+////
+
+@use "sass:meta";
+@use "sass:map";
+@use "sass:math";
+@use "sass:selector" as sassSelector;
+
+@use "../utils";
+@use "../color";
+@use "../element";
+@use "../selector";
+@use "../button";
+@use "../typography";
+
+// Used for function fallback
+$-fallbacks: (
+  "link-border-radius" : (
+    "function" : meta.get-function("get", false, "button"),
+    "property" : "border-radius"
+  )
+);
+    
+/// Module Settings
+/// @type Map
+/// @prop {Dimension} checkbox-area-width [3em] The width of the checkbox are.
+/// @prop {Boolean} link-separated-margin [false] Enables a margin between the items in the menu-stack.
+/// @prop {Boolean} link-separated-rule-style [false] Enables a rule between the items in the menu-stack.
+/// @prop {Dimension} nested-indent [0.5em] The indentation of child lists within the menu-stack.
+/// @prop {Dimension} rule-margin [0.5em] Sets the padding and margin of the rule.
+/// @prop {String} rule-style [default] Determines the styling of the rule. Uses the rule.scss component.
+/// @prop {Number} toggle-icon-rotate [false] Set a value to rotate the collapsible item toggle icon rotation when open (ie. 90deg)
+/// @prop {Dimension} compact-link-padding-x [0.75em] The links horizontal padding when using the compact option.
+/// @prop {Dimension} compact-link-padding-y [0.25em] The links vertical padding when using the compact option.
+/// @prop {Color} label-color [null] The type color of the label.
+/// @prop {Dimension} label-margin [0.5em] The margin of the label.
+/// @prop {CssValue} label-text-transform [uppercase] Transforms the label text.
+/// @prop {CssValue} label-type-size [false] Adjusts the type size of the label.
+/// @prop {list} link-active-selectors [(.is-active, '[aria-current=page]')] Selectors to apply active styling.
+/// @prop {Color} link-background-color [transparent] The background color of the menu-stack toggle. 
+/// @prop {Color} link-background-color-active [rgb(219, 219, 219)] The background color of the menu-stack toggle when active.
+/// @prop {Color} link-background-color-hover [rgb(219, 219, 219)] The background color of the menu-stack toggle when hovered or focused.
+/// @prop {Dimension} link-border-radius [true] The border radius of the menu-stack toggle. If set to true, will use the border radius from the button component.
+/// @prop {String} link-color [link] The type color of the menu-stack toggle. This uses color.scss, so the value of this option should be a color variable from color.scss.
+/// @prop {Color} link-color-active [black] The type color of the menu-stack toggle when active.
+/// @prop {String} link-color-hover [link-hover] The type color of the menu-stack toggle when hovered or focused.  This uses color.scss, so the value of this option should be a color variable from color.scss.
+/// @prop {CssValue} link-font-weight [null] The font weight of the menu-stack toggle.
+/// @prop {Dimension} link-icon-margin [0.65em] Adds a right margin to the icon.
+/// @prop {Dimension} link-icon-width [1em] The width of the icon.
+/// @prop {Dimension} link-margin [0.2em] Margin for the menu-stack toggle.
+/// @prop {Dimension} link-padding-x [1em] Horizontal padding for menu-stack toggle.
+/// @prop {Dimension} link-padding-y [0.35em] Vertical padding for menu-stack toggle.
+
+$config: (
+  "checkbox-area-width" : 3em,
+  "nested-indent" : 0.5em,
+  "rule-style" : "default",
+  "rule-margin" : 0.5em,
+  "link-separated-margin" : false,
+  "link-separated-rule-style" : false,
+  "toggle-icon-rotate" : false,
+  "compact-link-padding-x": 0.75em,
+  "compact-link-padding-y": 0.25em,
+
+  "label-color" : null,
+  "label-margin" : 0.5em,
+  "label-text-transform" : uppercase,
+  "label-type-size" : false,
+  "link-active-selectors" : (".is-active", '[aria-current="page"]'),
+  "link-background-color" : transparent,
+  "link-background-color-active" : rgb(219, 219, 219),
+  "link-background-color-hover" : rgb(219, 219, 219),
+  "link-border-radius" : true,
+  "link-color" : "link",
+  "link-color-active" : black,
+  "link-color-hover" : "link-hover",
+  "link-font-weight" : null,
+  "link-icon-margin" : 0.65em,
+  "link-icon-width" : 1em,
+  "link-margin" : 0.2em,
+  "link-padding-x": 1em,
+  "link-padding-y": 0.35em,
+) !default;
+
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example
+///   @include ulu.component-menu-stack-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-menu-stack-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "menu-stack [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+// Internal fallback helper
+@function -fallback($op1, $op2) {
+  @return utils.map-fallback($config, $op1, $op2);
+}
+
+/// Prints component styles
+/// @example scss
+///  @include ulu.component-menu-stack-styles();
+/// @todo Colors stuff
+/// @todo Selector prefix
+
+@mixin styles {
+  $prefix: selector.class("menu-stack");
+
+  #{ $prefix }--separated {
+    border-top: element.get-rule-style(get("rule-style"));
+    padding-top: get("rule-margin");
+    margin-top: get("rule-margin");
+  }
+  #{ $prefix }__label {
+    text-transform: get("label-text-transform");
+    padding-bottom: get("label-margin");
+    color: color.get(get("label-color"));
+    @if (get("label-type-size")) {
+      @include typography.size(get("label-type-size"), $only-font-size: true);
+    }
+  }
+  #{ $prefix }__item--separator-before {
+    border-top: element.get-rule-style(-fallback("link-separated-rule-style", "rule-style"));
+    margin-top: -fallback("link-separated-margin", "link-padding-y");
+    padding-top: -fallback("link-separated-margin", "link-padding-y");
+  }
+  #{ $prefix }__item--separator-after {
+    border-bottom: element.get-rule-style(-fallback("link-separated-rule-style", "rule-style"));
+    margin-bottom: -fallback("link-separated-margin", "link-padding-y");
+    padding-bottom: -fallback("link-separated-margin", "link-padding-y");
+  }
+  #{ $prefix }__list {
+    & & {
+      padding-left: get("nested-indent");
+    }
+  }
+  // By default the link hangs outside the container so that 
+  // the icons/text align to the text (above/below)
+  // - Use the modifier "site-menu--contained" to keep the links within 
+  //   the parent container (no optical alignment), should be within something that contains it
+  #{ $prefix }__link,
+  #{ $prefix }__checkbox,
+  #{ $prefix }__toggle {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: get("link-padding-y") get("link-padding-x");
+    margin: get("link-margin") 0;
+    border-radius: get("link-border-radius");
+    font-weight: get("link-font-weight");
+    color: color.get(get("link-color"));
+    background-color: color.get(get("link-background-color"));
+    box-sizing: border-box;
+    &:hover,
+    &:focus {
+      color: color.get(get("link-color-hover"));
+      background-color: color.get(get("link-background-color-hover"));
+    }
+    @each $active-selector in get("link-active-selectors") {
+      &#{ $active-selector } {
+        &,
+        &:hover {
+          color: color.get(get("link-color-active"));
+          background-color: color.get(get("link-background-color-active"));
+        }
+      }
+    }
+  }
+  #{ $prefix }__checkbox {
+    $checkbox-y: (get("link-padding-y") + get("link-margin"));
+    padding: 0;
+    position: relative;
+    [type="checkbox"] {
+      position: absolute;
+      top: $checkbox-y;
+      left: get("link-padding-x");
+    }
+    label {
+      width: 100%;
+      padding: $checkbox-y get("link-padding-x") $checkbox-y get("checkbox-area-width");
+    }
+  }
+  #{ $prefix }__link-text {
+    display: block;
+    flex-grow: 1;
+  }
+  #{ $prefix }__link-icon {
+    margin-right: get("link-icon-margin");
+    width: get("link-icon-width");
+  }
+  #{ $prefix }__collapsible {
+    margin: 0;
+    @if (get("toggle-icon-rotate")) {
+      &[open] {
+        #{ $prefix }__toggle-icon {
+          transform: rotate(get("toggle-icon-rotate"));
+        }
+      }
+    }
+  }
+  #{ $prefix }__toggle {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  // Modifiers
+
+  // Link buttons hang outside in margin so that text optically aligns
+  #{ $prefix }--hanging {
+    padding-left: get("link-padding-x");
+    padding-right: get("link-padding-x");
+    > #{ $prefix }__list > #{ $prefix }__item {
+      > #{ $prefix }__link, 
+      >#{ $prefix }__collapsible > #{ $prefix }__toggle {
+        margin-left: -(get("link-padding-x"));
+        margin-right: -(get("link-padding-x"));
+        width: calc(100% + (get("link-padding-x") * 2));
+      }
+    } 
+    
+    // #{ $prefix }__toggle { 
+    //   width: auto;
+    // }
+  }
+  #{ $prefix }--compact {
+    #{ $prefix }__link {
+      border-radius: 0;
+      margin: 0;
+      padding: get("compact-link-padding-y") get("compact-link-padding-x");
+    }
+  }
+}