@ulu/frontend 0.1.0-beta.4 → 0.1.0-beta.40

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,
@@ -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;
       }
     }
@@ -424,7 +429,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

@@ -38,6 +38,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 +50,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",
@@ -134,6 +136,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 +149,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 +221,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 +247,6 @@ $config: (
         }
       }
     }
-    // Rules: Applies to both column and row
-    &#{'[#{ $attribute }*="rules"]'} { 
-      > #{ $select-item } {
-        position: relative;
-      }
-    }
     // Rules: Column
     &#{'[#{ $attribute }*="rules-column:"]'} { 
       > #{ $select-item } {
@@ -580,6 +594,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(

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,9 +77,12 @@ $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;
 
@@ -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.scss

@@ -2,9 +2,10 @@
 ////
 /// @group flipcard
 ////
-/// Creates adaptive (changing at breakpoints)n between items (vertical/horizontal layout)
+/// Flipcard (content revealed on backside of card after click)
 
 @use "sass:map";
+@use "../color";
 @use "../utils";
 @use "../selector";
 
@@ -31,7 +32,6 @@
 /// @prop {Color} title-color-image-hover [blue] Color of the front page text when using an image and hovered or focused.
 /// @prop {Boolean} bottom-shadow [true] Boolean that enables a bottom shadow to the image flipcard.
 
-
 $config: (
   "anim-delay" : 200ms,
   "anim-duration" : 430ms,
@@ -85,19 +85,25 @@ $config: (
   @return utils.require-map-get($config, $name, "flipcard [config]");
 }
 
+/// Prints component styles
+/// @demo flipcard
+/// @example scss
+/// @example
+///   @include ulu.component-flipcard-styles();
+
 @mixin styles {
   $prefix: selector.class("flipcard");
 
   #{ $prefix } {
     height: 100%;
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     line-height: 1.4;
     overflow: hidden;
     position: relative;
     border: get("border");
     border-radius: get("border-radius");
     &#{ $prefix }:hover {
-      border-color: get("border-color-hover");
+      border-color: color.get(get("border-color-hover"));
     }
     #{ $prefix }__control-button:focus {
       border: get("control-button-border-focus");
@@ -123,10 +129,10 @@ $config: (
         transform: scale(1.15);
       }
       #{ $prefix }__front-content {
-        color: get("title-color-hover");
+        color: color.get(get("title-color-hover"));
       }
       #{ $prefix }__icon {
-        color: get("icon-color-hover");
+        color: color.get(get("icon-color-hover"));
       }
     }
     @media (prefers-reduced-motion: no-preference) {
@@ -140,14 +146,14 @@ $config: (
     }
   }
   #{ $prefix }--w-image {
-    background-color: get("background-color-image");
+    background-color: color.get(get("background-color-image"));
 
     &:hover {
       #{ $prefix }__front-content {
-        color: get("title-color-image-hover");
+        color: color.get(get("title-color-image-hover"));
       }
       #{ $prefix }__icon {
-        color: get("icon-color-image-hover");
+        color: color.get(get("icon-color-image-hover"));
       }
     }
   }
@@ -168,7 +174,7 @@ $config: (
     }
   }
   #{ $prefix }__icon {
-    color: get('icon-color');
+    color: color.get(get('icon-color'));
     display: block;
     margin-top: 0.5rem;
   }
@@ -177,7 +183,7 @@ $config: (
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
-    color: get("title-color");
+    color: color.get(get("title-color"));
     position: relative;
     z-index: 2;
     padding: get('padding');
@@ -186,13 +192,13 @@ $config: (
   }
   #{ $prefix }--w-image {
     #{ $prefix }__icon {
-      color: get("icon-color-image");
+      color: color.get(get("icon-color-image"));
     }
     #{ $prefix }__front-content {
-      color: get("title-color-image");
+      color: color.get(get("title-color-image"));
       @if(get("bottom-shadow")) {
         // bottom position includes padding so that the shadow 
-        &:after {
+        &::after {
           content: '';
           display: block;
           position: absolute;
@@ -207,7 +213,7 @@ $config: (
     }
   }
   #{ $prefix }__back {
-    background-color: get("background-color-back");
+    background-color: color.get(get("background-color-back"));
     padding: get('padding');
     justify-content: flex-end;
     [data-flipcard-state="open"] & {