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

package/scss/components/_counter-list.scss

@@ -0,0 +1,151 @@
+////
+/// @group counter-list
+/// Outputs a styled list with counters
+
+@use "sass:map";
+@use "sass:selector" as sassSelector;
+
+@use "../utils";
+@use "../selector";
+@use "../color";
+@use "../breakpoint";
+
+/// Module Settings
+/// @type Map
+/// @prop {List|CssUnit} margin [(2rem 0)] The top and bottom margin of the list.
+/// @prop {List|CssUnit} item-margin [((0 0 1rem 0))] The margin applied to each list item.
+/// @prop {Keyword} align-items [baseline] How to align the counter (flexbox align-items values)
+/// @prop {CssUnit} counter-width [2.4em] The width and height (if height is falsy)
+/// @prop {CssUnit} counter-height [null] The height (optional)
+/// @prop {CssUnit} counter-gap [1em] The gap between the counter and the list item content.
+/// @prop {String} counter-style [numeric] The list-style-type used for the counter.
+/// @prop {Keyword|Percentage} counter-border-radius [50%] The border-radius of the counter element.
+/// @prop {CssUnit} counter-font-size [1.2em] The font-size of the counter text.
+/// @prop {Color|String} counter-color [white] The text color of the counter. Accepts color names or hex codes.
+/// @prop {Color|String} counter-background-color ["accent"] The background color of the counter. Refers to a color in the color module.
+/// @prop {String} extra-selector [null] Additional selectors to include table styling.
+
+$config: (
+  "margin" : (2rem 0),
+  "item-margin" : (0 0 1rem 0),
+  "align-items" : baseline, 
+  "counter-width" : 2.4em,
+  "counter-height" : null,
+  "counter-gap" : 1em,
+  "counter-style" : numeric,
+  "counter-border-radius" : 50%,
+  "counter-font-size" : 1.2em,
+  "counter-font-weight" : null,
+  "counter-font-family" : null,
+  "counter-color" : white,
+  "counter-background-color" : "accent",
+  "extra-selector" : null
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-counter-list-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-counter-list-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "counter-list [config]");
+}
+
+/// Output counter-list component styles
+/// @demo counter-list
+/// @example html {preview}
+///   <ol class="counter-list">
+///     <li class="counter-list__item">This is a item that will get counted</li>
+///     <li class="counter-list__item">Another item that has more content to show line wrapping. Lorem ipsum et depsi anu. Dolor et anu.</li>
+///     <li class="counter-list__item">Small Amount of Text</li>
+///   </ol>
+
+@mixin styles {
+  $prefix: selector.class("counter-list");
+  $prefix-item: sassSelector.parse("#{ $prefix }__item");
+  $extra-selector: get("extra-selector");
+
+  $selector: $prefix;
+  $selector-item: sassSelector.parse("#{ $prefix } > li, #{ $prefix-item }");
+
+  @if ($extra-selector) {
+    $selector: sassSelector.parse("#{ $prefix }, #{ $extra-selector }");
+    $selector-item: sassSelector.parse("#{ $selector-item }, #{ $extra-selector } > li");
+  }
+
+  #{ $selector } {
+    margin: get("margin");
+    counter-reset: ulu-counter-list;
+  }
+
+  #{ $selector-item } {
+    $width: get("counter-width");
+    $height: utils.fallback(get("counter-height"), $width);
+
+    display: flex;
+    gap: get("counter-gap");
+    align-items: get("align-items");
+    margin: get("item-margin");
+    min-height: $height;
+    &::before {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: $width;
+      height: $height;
+      flex: 0 0 $width;
+      counter-increment: ulu-counter-list;
+      content: counter(ulu-counter-list, get("counter-style"));
+      font-size: get("counter-font-size");
+      font-family: get("counter-font-family");
+      font-weight: get("counter-font-weight");
+      color: color.get(get("counter-color"));
+      background-color: color.get(get("counter-background-color"));
+      border-radius: get("counter-border-radius");
+    }
+
+    // Keeping this could be useful
+    // but we need to think about how its setup
+    // - Probably should be a modifier (choice)
+    // - May need either option for how align-items is set (flex-start vs center)
+    // - This could be useful when used in grid
+    // - May need to be pervasive and not linked to a breakpoint (alternate style)
+    // - It's also just useful to know you could override the layout like this 
+    //   to get useful variations (maybe we don't need to include it but users 
+    //   can do specific)
+    // @if ( get("counter-mobile-toggle") ) {
+    //   @include breakpoint.max("small") {
+    //     padding-left: 0;
+    //     padding-top: calc(get("counter-width") + get("counter-gap-mobile"));
+    //     flex-direction: column;
+    //     align-items: center;
+    //   }
+    // }
+  }
+
+  // Modifiers
+  #{ $prefix }--alphabetical {
+    & > li::before,
+    & > #{ $prefix-item }::before {
+      content: counter(ulu-counter-list, upper-alpha);
+    }
+  }
+  #{ $prefix }--numeric {
+    & > li::before,
+    & > #{ $prefix-item }::before {
+      content: counter(ulu-counter-list, numeric);
+    }
+  }
+  #{ $prefix }--no-reset {
+    counter-reset: none;
+  }
+}

package/scss/components/_css-icon.scss

@@ -17,6 +17,7 @@
 
 @use "sass:map";
 @use "sass:math";
+@use "../color";
 
 @use "../utils";
 
@@ -29,6 +30,7 @@
 /// @prop {Dimension} size [1.1em] The width, height and font size of the css-icon.
 /// @prop {Dimension} stroke-border-radius [1px] The rounding of the strokes for css-icon.
 /// @prop {Dimension} stroke-width [0.15em] The stroke width of the css-icon.
+/// @prop {Dimension} drag-gap-multiplier [0.75] Multiplier used to adjust the space between drag-x/drag-y icons (used for all stroke sizes)
 /// @prop {Dimension} text-offset [0.05em] When using an icon with text, adds a margin to match the text height.
 /// @prop {Dimension} text-size [1em] font-size of the icon when using text.
 /// @prop {Dimension} vertical-align [-0.2em] Vertical-align for css-icon 
@@ -44,6 +46,7 @@ $config: (
   "size" : 1.15em,
   "stroke-border-radius" : null,
   "stroke-width" : 3px,
+  "drag-gap-multiplier" : 0.75,
   "text-offset" : 0.05em,
   "text-size" : 1em,
   "vertical-align" : -0.25em,
@@ -59,7 +62,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-css-icon-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -68,7 +71,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-css-icon-get("property");
 
 @function get($name) {
@@ -100,7 +103,7 @@ $config: (
 ///  @include ulu.component-css-icon-styles();
 
 @mixin styles {
-  $border: get("stroke-width") solid get("color");
+  $border: get("stroke-width") solid color.get(get("color"));
   $size: get("size");
   $stroke-width: get("stroke-width");
   $half-height: math.div(get("size"), 2);
@@ -121,8 +124,8 @@ $config: (
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     // Icons that share pseudos for strokes
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       // content: "";
       display: block;
       position: absolute;
@@ -130,7 +133,7 @@ $config: (
       height: $stroke-width;
       top: 50%;
       left: 50%;
-      background-color: get("color"); 
+      background-color: color.get(get("color")); 
       transform: translateX(-50%);
       margin-top: -($half-stroke-width);
       border-radius: get("stroke-border-radius");
@@ -158,7 +161,7 @@ $config: (
   // Solid icons
   [class*="css-icon--circle"],
   [class*="css-icon--square"] {
-    background-color: get("color");
+    background-color: color.get(get("color"));
   }
   [class*="css-icon--circle"] {
     border-radius: 50%;
@@ -185,14 +188,14 @@ $config: (
   
   .css-icon--circle-info,
   .css-icon--circle-question {
-    &:before {
+    &::before {
       content: "i";
       text-align: center;
       font-size: get("text-size");
       font-family: get("font-family");
       font-weight: bold;
       margin-top: get("text-offset");
-      color: get("color");
+      color: color.get(get("color"));
       height: auto;
       left: 0;
       right: 0;
@@ -205,7 +208,7 @@ $config: (
     }
   }
   .css-icon--circle-question { 
-    &:before {
+    &::before {
       content: "?";
     }
   }
@@ -222,17 +225,17 @@ $config: (
   // Arrow uses same equilateral triangle
   [class*="css-icon--triangle"],
   [class*="css-icon--arrow"]::after {
-    background-color: get("color");
+    background-color: color.get(get("color"));
     clip-path: polygon(10% 10%, 90% 50%, 10% 90%);
   }
   [class*="css-icon--arrow"] {
-    &:before {
+    &::before {
       content: "";
       width: 70%;
       left: 0;
     }
     // Note triangle clip-path is defined above with the solid triangle
-    &:after {
+    &::after {
       content: "";
       border-radius: 0;
       height: 100%;
@@ -243,8 +246,8 @@ $config: (
   }
   [class*="css-icon--angle"] {
     transform: rotate(135deg);
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       content: "";
       top: 30%;
       left: 30%;
@@ -252,14 +255,14 @@ $config: (
       transform: none;
       margin-top: 0;
     }
-    &:after {
+    &::after {
       width: $stroke-width;
       height: 70%;
     }
   }
   @include for-each-stroke() using ($alt-width, $alt-border-radius) {
     &[class*="css-icon--angle"] {
-      &:after {
+      &::after {
         width: $alt-width;
       }
     }
@@ -282,26 +285,26 @@ $config: (
 
   .css-icon--plus,
   .css-icon--plus-to-minus {
-    &:before {
+    &::before {
       transform: translateX(-50%) rotate(90deg);
     }
-    &:after {
+    &::after {
       transform: translateX(-50%);
     }
   }
   .css-icon--minus {
-    &:before {
+    &::before {
       content: none;
     }
-    &:after {
+    &::after {
       transform: translateX(-50%);
     }
   }
   .css-icon--close {
-    &:before {
+    &::before {
       transform: translate(-50%) rotate(45deg);
     }
-    &:after {
+    &::after {
       transform: translate(-50%) rotate(-45deg);
     }
   }
@@ -309,21 +312,23 @@ $config: (
     &::before {
       content: "";
       // Make up for margin-top by default
-      margin-top: -($stroke-width + $stroke-width);
+      margin-top: -(($stroke-width + $stroke-width) * get("drag-gap-multiplier"));
     }
     &::after {
       content: "";
-      margin-top: $stroke-width;
+      margin-top: $stroke-width * get("drag-gap-multiplier");
     }
   }
 
   @include for-each-stroke() using ($alt-width, $alt-border-radius) {
+    // $drag-gap-multiplier: map.get($props, "drag-gap-multiplier");
+    // $drag-gap-multiplier: if($drag-gap-multiplier, $drag-gap-multiplier, 0);
     &[class*="css-icon--drag"] {
       &::before {
-        margin-top: -($alt-width + $alt-width);
+        margin-top: -(($alt-width + $alt-width) * get("drag-gap-multiplier"));
       }
       &::after {
-        margin-top: $alt-width;
+        margin-top: $alt-width * get("drag-gap-multiplier");
       }
     }
   }
@@ -344,7 +349,7 @@ $config: (
       margin-top: 0;
     }
     &::before {
-      box-shadow: 0px ($stroke-width * 2 + 1px) get("color");
+      box-shadow: 0px ($stroke-width * 2 + 1px) color.get(get("color"));
       margin-bottom: ($stroke-width * 3) + 2px;
     }
   }
@@ -352,7 +357,7 @@ $config: (
     &.css-icon--menu,
     &.css-icon--menu-to-close {
       &::before {
-        box-shadow: 0px ($alt-width * 2 + 1px) get("color");
+        box-shadow: 0px ($alt-width * 2 + 1px) color.get(get("color"));
         margin-bottom: ($alt-width * 3) + 2px;
       }
     }
@@ -372,6 +377,16 @@ $config: (
   .css-icon--arrow-down {
     transform: rotate(90deg);
   }
+  .css-icon--drag-both {
+    transform: rotate(-45deg);
+    &::before {
+      transform: translateX(-50%) scale(0.8);
+      margin-top: -($stroke-width);
+    }
+    &::after {
+      transform: translateX(-50%) scaleX(0.5) scaleY(0.8);
+    }
+  }
 
   // Active icons
   .css-icon--plus-to-minus {
@@ -424,7 +439,7 @@ $config: (
         transition: none;
         transform: translate(-50%) rotate(-45deg);
       }
-      &:before {
+      &::before {
         box-shadow: none;
         transform: translate(-50%) rotate(45deg);
       }

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";
 
@@ -38,6 +35,7 @@
 $config: (
   "attribute":           "data-grid",
   "attribute-container": "data-grid-container",
+  "attribute-init":      "data-grid-init",
   "breakpoint":          false,                   // Fallback to default
   "columns":             12,
   "gutter":              14px,
@@ -49,6 +47,7 @@ $config: (
   "sticky-top":                  var(--ulu-sticky-top-offset, 0),
   "rule-color" : "rule",
   "rule-size" : 1px,
+  "rule-fade-duration" : 400ms,
   "extra-breakpoints":   (
     "medium" : (
       "breakpoint": "medium",
@@ -73,7 +72,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-data-grid-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -82,7 +81,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-data-grid-get("property");
 
 @function get($name) {
@@ -134,6 +133,7 @@ $config: (
 /// @param {Map} $extra-rule-styles Map of other rule styles to add (map of maps of size, and color), key is the styles name ("name": ("size" : 4px, "color" : "color name" || color))
 /// @param {String} $extra-gutter-scales A map of gutter scales used like `data-grid="gutter-scale: large`, configuration map property becomes scale name and value is the amount (multiplier) to apply to the grid's gutter ie `( "large" : 2.25 )`
 /// @param {Map} $attribute Attribute to use for selecting grid and children. Children attribute get's "-item" as a suffix ("ie. data-grid, data-grid-item")
+/// @param {CssDuration} $rule-fade-duration The amount of time for rules to fade in (after init, script positioning), set to falsey value to disable rule fade in (rules will always be shown)
 
 @mixin create(
   $columns: get("columns"),
@@ -146,17 +146,20 @@ $config: (
   $extra-rule-styles: get("extra-rule-styles"),
   $extra-gutter-scales: get("extra-gutter-scales"),
   $attribute: get("attribute"),
+  $attribute-init: get("attribute-init"),
   $include-container: true,
   $container-attribute: get("attribute-container"),
   $container-gutter-scales: true,
   $sticky-top: get("sticky-top"),
-  $sticky-bottom: get("sticky-bottom")
+  $sticky-bottom: get("sticky-bottom"),
+  $rule-fade-duration: get("rule-fade-duration")
 ) {
   $attribute-item: "#{ $attribute }-item";
   $select-grid: '[#{ $attribute }*="columns: #{ $columns }"]';
+  $select-grid-not-init: '[#{ $attribute }]:not([#{ $attribute-init }])';
   $select-item: '[#{ $attribute-item }]';
-  $select-rule-col: ":before";
-  $select-rule-row: ":after";
+  $select-rule-col: "::before";
+  $select-rule-row: "::after";
   $select-container: "[#{ $container-attribute }]";
   // These through off syntax highlighting when inside interpolation
   $position-class-column-first: get("position-class-column-first");
@@ -215,6 +218,20 @@ $config: (
         }
       }
     }
+    // Rules: Applies to both column and row
+    &#{'[#{ $attribute }*="rules"]'} { 
+      > #{ $select-item } {
+        position: relative;
+        @if ($rule-fade-duration) {
+          &#{ $select-rule-col },
+          &#{ $select-rule-row } {
+            // For when grid init fades them in
+            opacity: 1;
+            transition: opacity $rule-fade-duration ease-in; 
+          }
+        }
+      }
+    }
     // Rules: Row
     &#{'[#{ $attribute }*="rules-row:"]'} { 
       > #{ $select-item } {
@@ -227,12 +244,6 @@ $config: (
         }
       }
     }
-    // Rules: Applies to both column and row
-    &#{'[#{ $attribute }*="rules"]'} { 
-      > #{ $select-item } {
-        position: relative;
-      }
-    }
     // Rules: Column
     &#{'[#{ $attribute }*="rules-column:"]'} { 
       > #{ $select-item } {
@@ -580,6 +591,21 @@ $config: (
       }
     }
   }
+
+  // Disable grid rules until init attribute it present (from positioning script)
+  // - In order to keep the rules for this compact it will only hide them if the init
+  //   is not present
+  
+  @if ($rule-fade-duration) {
+    #{ $select-grid-not-init } {
+      > #{ $select-item } {
+        &#{ $select-rule-col },
+        &#{ $select-rule-row } {
+          opacity: 0 !important;
+        }
+      }
+    }
+  }
 }
 
 @mixin -create-extra-breakpoint(
@@ -635,6 +661,23 @@ $config: (
         }
       }
 
+      &#{'[#{ $attribute }*="gutters-row:"]'} { 
+        > #{ $select-item } {
+          padding-top:  $gutter;
+          padding-bottom: $gutter;
+        }
+        @if $extra-gutter-scales {
+          @each $scale, $amount in $extra-gutter-scales {
+            &#{'[#{ $attribute }*="gutter-scale: #{ $scale }"]'} { 
+              > #{ $select-item } {
+                padding-top:  $gutter * $amount;
+                padding-bottom: $gutter * $amount;
+              }
+            }
+          }
+        }
+      }
+
       @include -create-column-widths(
         $columns: $columns,
         $attribute-item: $attribute-item,

package/scss/components/_data-table.scss

@@ -24,16 +24,47 @@ $-fallbacks: (
 
 /// Module Settings
 /// @type Map
+/// @prop {Dimension} cell-padding [(0.5em,)] Padding of the th and td elements.
+/// @prop {CssValue} text-align [left] Text align of the table.
+/// @prop {String} type-size ["small"] Font size of the table.
+/// @prop {Color} background-color [white] Background color of table container.
+/// @prop {Color} header-background-color [#f5f4f4] Background color of the the table header.
+/// @prop {Color} body-background-color [white] Background color of table body.
+/// @prop {Color} footer-background-color [#f3f3f3] Background color of table footer.
+/// @prop {Color} color ["type-secondary"] Font color of the table.
+/// @prop {Color} header-color ["headline"] Font color for the table header.
+/// @prop {Color} footer-color [null] Font color for the table footer.
+/// @prop {Number} line-height [true] Line height for the table.
+/// @prop {Dimension} column-min-width [6em] Min-width of the th element.
+/// @prop {Dimension} first-column-large-min-width [15em] When using "--large-first" style, the min width of the first th element.
+/// @prop {Dimension} border-width [1px] Border width of the table.
+/// @prop {Color} border-color [#dddddd] Border color for the table.
+/// @prop {Color} striped-row-background-color [#eeeeee] Background color for even rows if using "--striped" styling.
+/// @prop {Color} muted-row-background-color [#ccc] Background color for odd rows if using "--striped" styling.
+/// @prop {Color} muted-row-border-color [null] Border color for odd rows if using "--striped" styling.
+/// @prop {Color} highlighted-row-background-color [#ccc] Background color row if using "__row-highlighted" styling.
+/// @prop {Color} highlighted-row-border-color [null]  Border color row if using "__row-highlighted" styling.
+/// @prop {Dimension} large-header-cell-padding-y [1em]  Vertical padding of header if using "--large-header" styling.
+/// @prop {String} caption-type-size ["large"] Type size of table caption.
+/// @prop {Color} caption-background-color [null] Background color of table caption.
+/// @prop {CssValue} caption-font-weight [bold] Font weight of caption.
+/// @prop {CssBalue} caption-border-bottom [null] Bottom border of the caption.
+/// @prop {Dimension} caption-margin [(0,)] Margin of the caption.
+/// @prop {Dimension} caption-padding [(0.65em 0)] Padding of the caption.
+/// @prop {CssValue} caption-text-align [left] Text align of the caption.
+/// @prop {String} extra-selector [".wysiwyg table"] Additional selectors to include table styling.
 
 $config: (
   "cell-padding" : (0.5em,),
   "text-align" : left,
   "type-size" : "small",
   "background-color" : white,
-  "header-background-color" : #eeeeee,
+  "header-background-color" : #f5f4f4,
   "body-background-color" : white,
   "footer-background-color" : #f3f3f3,
   "color" : "type-secondary",
+  "header-color" : "headline",
+  "footer-color" : null,
   "line-height" : true,
   "column-min-width" : 6em,
   "first-column-large-min-width" : 15em,
@@ -46,15 +77,18 @@ $config: (
   "highlighted-row-border-color" : null,
   "large-header-cell-padding-y" : 1em,
   "caption-type-size" : "large",
+  "caption-background-color" : null,
   "caption-font-weight" : bold,
-  "caption-margin" : (0 0 1em 0),
-  "caption-padding" : (0,),
+  "caption-border-bottom" : null,
+  "caption-margin" : (0,),
+  "caption-padding" : (0.65em 0),
+  "caption-text-align" : left,
   "extra-selector" : ".wysiwyg table"
 ) !default;
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-data-table-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -63,7 +97,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-data-table-get("property");
 
 @function get($name) {
@@ -107,9 +141,11 @@ $config: (
         @include typography.size(get("caption-type-size"));
       }
       font-weight: get("caption-font-weight");
-      text-align: left;
+      text-align: get("caption-text-align");
       margin: get("caption-margin");
       padding: get("caption-padding");
+      background-color: get("caption-background-color");
+      border-bottom: get("caption-border-bottom");
     }
     th,
     tr,
@@ -133,11 +169,15 @@ $config: (
     thead tr {
       background-color: color.get(get("header-background-color"));
     }
+    thead th {
+      color: color.get(get("header-color"));
+    }
     tbody tr {
       background-color: color.get(get("body-background-color"));
     }
     tfoot tr {
       background-color: color.get(get("footer-background-color"));
+      color: color.get(get("footer-color"));
     }
     th,
     td {

package/scss/components/_flipcard-grid.scss

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