@ulu/frontend 0.1.0-beta.12 → 0.1.0-beta.121

package/scss/components/_css-icon.scss

@@ -124,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;
@@ -188,7 +188,7 @@ $config: (
   
   .css-icon--circle-info,
   .css-icon--circle-question {
-    &:before {
+    &::before {
       content: "i";
       text-align: center;
       font-size: get("text-size");
@@ -208,7 +208,7 @@ $config: (
     }
   }
   .css-icon--circle-question { 
-    &:before {
+    &::before {
       content: "?";
     }
   }
@@ -229,13 +229,13 @@ $config: (
     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%;
@@ -246,8 +246,8 @@ $config: (
   }
   [class*="css-icon--angle"] {
     transform: rotate(135deg);
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       content: "";
       top: 30%;
       left: 30%;
@@ -255,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;
       }
     }
@@ -285,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);
     }
   }
@@ -377,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 {
@@ -429,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",
@@ -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

@@ -33,6 +33,7 @@ $-fallbacks: (
 /// @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.
@@ -63,6 +64,7 @@ $config: (
   "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,
@@ -175,6 +177,7 @@ $config: (
     }
     tfoot tr {
       background-color: color.get(get("footer-background-color"));
+      color: color.get(get("footer-color"));
     }
     th,
     td {

package/scss/components/_definition-list.scss

@@ -0,0 +1,178 @@
+////
+/// @group definition-list
+/// Definition list styles
+////
+
+@use "sass:map";
+@use "sass:meta";
+@use "sass:math";
+
+@use "../selector";
+@use "../utils";
+@use "../color";
+@use "../typography";
+@use "../breakpoint";
+@use "../element";
+
+// Used for function fallback
+$-fallbacks: (
+  "term-font-weight": (
+    "function": meta.get-function("get", false, "typography"),
+    "property": "font-weight-bold"
+  ),
+  "line-height": (
+    "function": meta.get-function("get", false, "typography"),
+    "property": "line-height-dense"
+  ),
+  "separator-border": (
+    "function": meta.get-function("get-rule-style", false, "element"),
+    "arguments": ("light",)
+  )
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {String} term-font-weight [true] The font-weight of the dt element.
+/// @prop {Dimension} line-height [true] The line-height of the definition list.
+/// @prop {CssUnit} item-margin [0.75em] The spacing for each item.
+/// @prop {Boolean} separator [true] Whether to show a separator between items.
+/// @prop {Border} separator-border [true] The border style for the separator.
+/// @prop {Dimension} separator-padding [0.75em] The padding for the separator.
+/// @prop {String} table-breakpoint [medium] The breakpoint for the table layout.
+/// @prop {String} table-template-columns [(25% 75%)] The grid-template-columns for the table layout.
+/// @prop {Dimension} table-gap [1rem] The gap for the table layout.
+/// @prop {String} inline-description-separator [","] The separator for multiple dd elements in inline layout.
+/// @prop {String} inline-term-separator [":"] The separator for dt elements in inline layout.
+
+$config: (
+  "margin" : (0 0 1.5em 0),
+  "term-font-weight": true,
+  "line-height": true,
+  "item-margin" : 1em,
+  "separator": true,
+  "separator-border": true,
+  "table-breakpoint": "medium",
+  "table-template-columns": (25% 75%),
+  "table-gap": 1rem,
+  "inline-description-separator": ",",
+  "inline-term-separator": ":",
+  "compact-item-margin" : 0.5em
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-definition-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-definition-list-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "definition-list [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @demo definition-list
+/// @example scss
+///  @include ulu.component-definition-list-styles();
+
+@mixin styles {
+  $prefix: selector.class("definition-list");
+  $item-margin-half: math.div(get("item-margin"), 2);
+  $compact-item-margin-half: math.div(get("compact-item-margin"), 2);
+
+  #{ $prefix } {
+    line-height: get("line-height");
+    margin: get("margin");
+
+    > div {
+      margin-top: $item-margin-half;
+      padding-top: $item-margin-half;
+    }
+    dt,
+    dd {
+      display: block;
+      margin: 0;
+      font-weight: normal;
+    }
+    dt {
+      font-weight: get("term-font-weight");
+    }
+  }
+
+  // Modifiers
+  #{ $prefix }--table {
+    @include breakpoint.min(get("table-breakpoint")) {
+      > div {
+        display: grid;
+        grid-template-columns: get("table-template-columns");
+        gap: get("table-gap");
+      }
+    }
+  }
+
+  #{ $prefix }--inline,
+  #{ $prefix }--inline-all {
+    > div {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: baseline;
+    }
+
+    dd + dd {
+      &::before {
+        content: get("inline-description-separator");
+        margin-right: 0.2em;
+      }
+    }
+  }
+
+  #{ $prefix }--inline {
+    dt {
+      flex-basis: 100%;
+    }
+  }
+
+  #{ $prefix }--inline-all {
+    dt {
+      &::after {
+        content: get("inline-term-separator");
+        margin-right: 0.2em;
+      }
+    }
+  }
+
+  #{ $prefix }--separated > div:not(:first-child),
+  #{ $prefix }--separated-first > div:first-child {
+    border-top: get("separator-border");
+  }
+  #{ $prefix }--separated-last > div:last-child {
+    border-bottom: get("separator-border");
+    padding-bottom: $item-margin-half;
+  }
+
+  #{ $prefix }--compact {
+    > div {
+      margin-top: $compact-item-margin-half;
+      padding-top: $compact-item-margin-half;
+    }
+  }
+  #{ $prefix }--compact#{ $prefix }--separated-last > div:last-child {
+    padding-bottom: $compact-item-margin-half;
+  }
+
+  // Clip margin of first
+  #{ $prefix }:not(#{ $prefix }--separated-first) {
+    > div:first-child {
+      padding-top: 0;
+      margin-top: 0;
+    }
+  }
+}

package/scss/components/_flipcard.scss

@@ -2,7 +2,7 @@
 ////
 /// @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";
@@ -32,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,
@@ -86,6 +85,12 @@ $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");
 
@@ -193,7 +198,7 @@ $config: (
       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;