@ulu/frontend 0.0.22 → 0.1.0-beta.0

package/scss/components/_css-icon.scss

@@ -0,0 +1,433 @@
+////
+/// @group css-icon
+/// Simple icons that only require CSS selectors, used for defaults (JS, etc). Not meant to be replacement for complete icon library. Note the selectors currently can't be modified.
+////
+
+// Notes: 
+// - Using this to avoid having coupled image in base, can easily switch 
+//   to font awesome in production
+// - Can't use clip-path with svg clipPath without it being loaded in document (more coupling/setup)
+// - Can't use mask-image until it's more universal (could create icons the 
+//   old way and export and use the masks in the future (complex shapes)
+
+// Note: File size is 7kb (1kb gzip) (2024-09-25)(
+// Benchmarks:
+// - 2024/09/25 - 1.3kb - File size (7kb unzipped)
+// - 2024/10/14 - 1.3kb - Tested after adding active icons and using attribute selectors
+
+@use "sass:map";
+@use "sass:math";
+
+@use "../utils";
+
+/// Module Settings
+/// @type Map
+/// @prop {String} active-selector [details[open] > summary &, &.is-active] The active selector for css-icon.
+/// @prop {Color} color [currentColor] The color of the css-icon.
+/// @prop {CssValue} font-family [('Courier New', monospace)]
+/// @prop {CssValue} margin [(0 0.15em)] The icon's margin
+/// @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} 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 
+/// @prop {Time} transition-duration [200ms] The duration length for the transition.
+/// @prop {CssValue} transition-timing-function [ease-in] The timing function for the transition.
+/// @prop {Map} stroke-sizes [Map] Modifiers to adjust stroke sizes for the icons.
+
+$config: (
+  "active-selector" : "details[open] > summary &, &.is-active",
+  "color" : currentColor,
+  "font-family" : ('Courier New', monospace),
+  "margin" : (0 0.15em),
+  "size" : 1.15em,
+  "stroke-border-radius" : null,
+  "stroke-width" : 3px,
+  "text-offset" : 0.05em,
+  "text-size" : 1em,
+  "vertical-align" : -0.25em,
+  "transition-duration" : 200ms, 
+  "transition-timing-function" : ease-in,
+  "stroke-sizes" : (
+    "large" : (
+      "stroke-width" : 5px,
+      "stroke-border-radius" : 2px
+    )
+  )
+);
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example
+///   @include ulu.component-css-icon-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-css-icon-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "css-icon [config]");
+}
+
+/// Used to style active icons
+/// - Probably only useful for extending this component and matching active selector
+/// - Used internally in module
+
+@mixin when-active() {
+  #{ get("active-selector") } {
+    @content;
+  }
+}
+
+@mixin for-each-stroke() {
+  @each $name, $props in get("stroke-sizes") {
+    $stroke-width: map.get($props, "stroke-width");
+    $stroke-border-radius: map.get($props, "stroke-width");
+    .css-icon--stroke-#{ $name } {
+      @content($stroke-width, $stroke-border-radius);
+    }
+  }
+}
+
+/// Output CSS icon component stylesheet
+/// @example scss
+///  @include ulu.component-css-icon-styles();
+
+@mixin styles {
+  $border: get("stroke-width") solid get("color");
+  $size: get("size");
+  $stroke-width: get("stroke-width");
+  $half-height: math.div(get("size"), 2);
+  $half-stroke-width: math.round(math.div(get("stroke-width"), 2));
+
+
+  .css-icon {
+    display: inline-block;
+    position: relative;
+    width: get("size");
+    height: get("size");
+    transform-origin: center;
+    vertical-align: get("vertical-align");
+    font-variant: normal;
+    text-rendering: auto;
+    line-height: 1;
+    margin: get("margin");
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    // Icons that share pseudos for strokes
+    &:before,
+    &:after {
+      // content: "";
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: $stroke-width;
+      top: 50%;
+      left: 50%;
+      background-color: get("color"); 
+      transform: translateX(-50%);
+      margin-top: -($half-stroke-width);
+      border-radius: get("stroke-border-radius");
+    }
+  }
+  @include for-each-stroke() using ($alt-width, $alt-border-radius) {
+    &::before,
+    &::after {
+      height: $alt-width;
+      margin-top: -(math.div($alt-width, 2));
+      border-radius: $alt-border-radius;
+    }
+  }
+  .css-icon--plus,
+  .css-icon--plus-to-minus,
+  .css-icon--minus,
+  .css-icon--close {
+    &::before,
+    &::after {
+      content: "";
+    }
+  }
+
+
+  // Solid icons
+  [class*="css-icon--circle"],
+  [class*="css-icon--square"] {
+    background-color: get("color");
+  }
+  [class*="css-icon--circle"] {
+    border-radius: 50%;
+  }
+
+  .css-icon--square {
+    transform: scale(0.9);
+  }
+  .css-icon--square,
+  .css-icon--circle,
+  .css-icon--circle-outline,
+  .css-icon--square-outline {
+    &::before,
+    &::after {
+      content: none;
+    }
+  }
+  .css-icon--circle-outline,
+  .css-icon--square-outline {
+    background-color: transparent;
+    border: $border;
+  }
+
+  
+  .css-icon--circle-info,
+  .css-icon--circle-question {
+    &: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");
+      height: auto;
+      left: 0;
+      right: 0;
+      background-color: transparent;
+      filter: invert(1) brightness(1.5);
+      transform: translateY(-50%);
+    }
+    &::after {
+      content: none;
+    }
+  }
+  .css-icon--circle-question { 
+    &:before {
+      content: "?";
+    }
+  }
+
+  [class*="css-icon--arrow"] {
+    &::before,
+    &::after {
+      content: "";
+      transform: translateY(-50%);
+      margin-top: 0;
+    }
+  }
+  
+  // Arrow uses same equilateral triangle
+  [class*="css-icon--triangle"],
+  [class*="css-icon--arrow"]::after {
+    background-color: get("color");
+    clip-path: polygon(10% 10%, 90% 50%, 10% 90%);
+  }
+  [class*="css-icon--arrow"] {
+    &:before {
+      content: "";
+      width: 70%;
+      left: 0;
+    }
+    // Note triangle clip-path is defined above with the solid triangle
+    &:after {
+      content: "";
+      border-radius: 0;
+      height: 100%;
+      width: 55%;
+      right: 0;
+      left: auto;
+    }
+  }
+  [class*="css-icon--angle"] {
+    transform: rotate(135deg);
+    &:before,
+    &:after {
+      content: "";
+      top: 30%;
+      left: 30%;
+      width: 70%;    
+      transform: none;
+      margin-top: 0;
+    }
+    &:after {
+      width: $stroke-width;
+      height: 70%;
+    }
+  }
+  @include for-each-stroke() using ($alt-width, $alt-border-radius) {
+    &[class*="css-icon--angle"] {
+      &:after {
+        width: $alt-width;
+      }
+    }
+  }
+  .css-icon--angle-left,
+  .css-icon--arrow-left {
+    transform: rotate(315deg);
+  }
+  .css-icon--angle-up,
+  .css-icon--angle-up-to-down {
+    transform: rotate(45deg);
+  }
+  .css-icon--angle-down,
+  .css-icon--angle-down-to-up {
+    transform: rotate(225deg);
+  }
+
+  // Centered pseudos offset by half of stroke before transform
+  // Icons with centered pseudos
+
+  .css-icon--plus,
+  .css-icon--plus-to-minus {
+    &:before {
+      transform: translateX(-50%) rotate(90deg);
+    }
+    &:after {
+      transform: translateX(-50%);
+    }
+  }
+  .css-icon--minus {
+    &:before {
+      content: none;
+    }
+    &:after {
+      transform: translateX(-50%);
+    }
+  }
+  .css-icon--close {
+    &:before {
+      transform: translate(-50%) rotate(45deg);
+    }
+    &:after {
+      transform: translate(-50%) rotate(-45deg);
+    }
+  }
+  [class*="css-icon--drag"] {
+    &::before {
+      content: "";
+      // Make up for margin-top by default
+      margin-top: -($stroke-width + $stroke-width);
+    }
+    &::after {
+      content: "";
+      margin-top: $stroke-width;
+    }
+  }
+
+  @include for-each-stroke() using ($alt-width, $alt-border-radius) {
+    &[class*="css-icon--drag"] {
+      &::before {
+        margin-top: -($alt-width + $alt-width);
+      }
+      &::after {
+        margin-top: $alt-width;
+      }
+    }
+  }
+  // For the menu icon the blocks are stacked with box shadow being the 
+  // third bar
+  .css-icon--menu,
+  .css-icon--menu-to-close {
+    display: inline-flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    vertical-align: middle;
+    &::before,
+    &::after {
+      content: "";
+      position: static;
+      transform: none;
+      margin-top: 0;
+    }
+    &::before {
+      box-shadow: 0px ($stroke-width * 2 + 1px) get("color");
+      margin-bottom: ($stroke-width * 3) + 2px;
+    }
+  }
+  @include for-each-stroke() using ($alt-width, $alt-border-radius) {
+    &.css-icon--menu,
+    &.css-icon--menu-to-close {
+      &::before {
+        box-shadow: 0px ($alt-width * 2 + 1px) get("color");
+        margin-bottom: ($alt-width * 3) + 2px;
+      }
+    }
+  }
+
+  // Rotations
+  .css-icon--triangle-left,
+  .css-icon--arrow-left {
+    transform: rotate(180deg);
+  }
+  .css-icon--drag-x,
+  .css-icon--triangle-up,
+  .css-icon--arrow-up {
+    transform: rotate(270deg);
+  }
+  .css-icon--triangle-down,
+  .css-icon--arrow-down {
+    transform: rotate(90deg);
+  }
+
+  // Active icons
+  .css-icon--plus-to-minus {
+    &,
+    &::before,
+    &::after {
+      transition: get("transition-duration") get("transition-timing-function");
+      transition-property: opacity, transform;
+    }
+    @include when-active() {
+      &::before {
+        opacity: 0;
+        transform: translateX(-50%) rotate(180deg);
+      }
+    }
+  }
+  
+  .css-icon--angle-right-to-down,
+  .css-icon--angle-up-to-down,
+  .css-icon--angle-down-to-up {
+    @include when-active() {
+      transition-duration: get("transition-duration");
+      transition-property: transform;
+    }
+  }
+  .css-icon--angle-right-to-down,
+  .css-icon--angle-up-to-down {
+    @include when-active() {
+      transform: rotate(225deg);
+    }
+  }
+  .css-icon--angle-down-to-up {
+    @include when-active() {
+      transform: rotate(45deg);
+    }
+  }
+  .css-icon--angle-up-to-down,
+  .css-icon--angle-down-to-up {
+    @include when-active() {
+      transition-duration: get("transition-duration") * 2;
+    }
+  }
+  .css-icon--menu-to-close {
+    @include when-active() {
+      animation: UluScaleIn get("transition-duration") get("transition-timing-function") forwards;
+      &::before,
+      &::after {
+        position: absolute;
+        top: 50%;
+        transition: none;
+        transform: translate(-50%) rotate(-45deg);
+      }
+      &:before {
+        box-shadow: none;
+        transform: translate(-50%) rotate(45deg);
+      }
+    }
+  }
+}

package/scss/{_grid.scss → components/_data-grid.scss}

@@ -1,71 +1,80 @@
 ////
-/// @group grid
+/// @group data-grid
+/// A page grid layout component that uses data attribute instead of class names, for brevity and readability
 ////
-/// Layout grid that uses attributes instead of classes
-/// - See the core layout module for changing defaults
-
-
-/// HTML Attribute to use for selecting
-/// @example markup
-///     <!-- instead it styles like: -->
-///     <div data-grid="columns: 12, gutters: true">
-///       <div data-grid-item="width: 4, width-medium: 6, offset-medium: 3">
-///       </div>
-///     </div>
-///
-///     <!-- or if using container -->
-///     <div data-grid-container>
-///       <div data-grid="columns: 12, gutters: true">
-///         <div data-grid-item="width: 4, width-medium: 6, offset-medium: 3">
-///         </div>
-///       </div>
-///     </div>
+
+/// Content Block
+/// @demo data-grid
 
 @use "sass:map";
 @use "sass:math";
-@use "breakpoint";
-@use "color";
-@use "element";
-@use "layout";
-@use "utils";
+
+@use "../breakpoint";
+@use "../color";
+@use "../element";
+@use "../layout";
+@use "../selector";
+@use "../typography";
+@use "../utils";
 
 /// Module Settings
 /// @type Map
-/// @prop {Number} $config.columns Default for grid mixin
-/// @prop {String} $config.attribute Default attribute to use for grid mixin
-/// @prop {Number} $config.gutter Default gutter for grid mixin
-/// @prop {Map} $config.extra-breakpoints Default extra breakpoints for grid mixin
-/// @prop {MaStringp} $config.position-class-column-first Classname for position system (JS) grid uses to display rules (layout can flow, script will update classes)
-/// @prop {String} $config.position-class-column-last See definition above
-/// @prop {String} $config.position-class-row-first See definition above
-/// @prop {String} $config.position-class-row-last See definition above
+/// @prop {String} attribute [data-grid] Default attribute to use for grid mixin.
+/// @prop {String} attribute-container [data-grid-container] Default attribute to use for grid's container.
+/// @prop {Number} columns [12] Default for grid mixin.
+/// @prop {Number} gutter [14px] Default gutter for grid mixin.
+/// @prop {String} position-class-column-first [position-column-first] Classname for position system (JS) grid uses to display rules (layout can flow, script will update classes)
+/// @prop {String} position-class-column-last [position-column-last] See definition above
+/// @prop {String} position-class-row-first [position-row-first] See definition above
+/// @prop {String} position-class-row-last [position-row-last] See definition above
+/// @prop {Dimension} sticky-bottom [var(--ulu-sticky-bottom-offset, 0)] When a column is sticky bottom this is the value for the sticky offset, set to --ulu-sticky-bottom-offset by default
+/// @prop {Dimension} sticky-top [var(--ulu-sticky-top-offset, 0)] When a column is sticky top this is the value for the sticky offset, set to --ulu-sticky-top-offset by default
+/// @prop {String} rule-color ["rule"] The color of the rule. This uses color.scss, so the value of this option should be a color variable from color.scss.
+/// @prop {Dimension} rule-size [1px] The width of the rule
+/// @prop {Map} extra-breakpoints [Map] Default extra breakpoints for grid mixin
+/// @prop {Map} extra-gutter-scales [Map] Extra options for gutter scales.
+/// @prop {Map} extra-rule-styles [Map] Extra options for rule styles.
 
 $config: (
-  "columns":            12,
-  "attribute":          "data-grid",
-  "attribute-container" : "data-grid-container",
-  "gutter":             14px,
-  "breakpoint" :        false, // Fallback to default
-  "extra-breakpoints" : (
+  "attribute":           "data-grid",
+  "attribute-container": "data-grid-container",
+  "breakpoint":          false,                   // Fallback to default
+  "columns":             12,
+  "gutter":              14px,
+  "position-class-column-first": "position-column-first",
+  "position-class-column-last":  "position-column-last",
+  "position-class-row-first":    "position-row-first",
+  "position-class-row-last":     "position-row-last",
+  "sticky-bottom":               var(--ulu-sticky-bottom-offset, 0),
+  "sticky-top":                  var(--ulu-sticky-top-offset, 0),
+  "rule-color" : "rule",
+  "rule-size" : 1px,
+  "extra-breakpoints":   (
     "medium" : (
-      "breakpoint" : "medium",
-      "gutter" : 15px
+      "breakpoint": "medium",
+      "gutter":     15px
     ),
     "large" : (
-      "breakpoint" : "large",
-      "gutter" : 20px
+      "breakpoint": "large",
+      "gutter":     20px
+    )
+  ),
+  "extra-gutter-scales" : (
+    "small": 0.6
+  ),
+  "extra-rule-styles" : (
+    "light" : (
+      "size" : 1px,
+      "color": "rule-light"
     )
   ),
-  "position-class-column-first": "position-column-first",
-  "position-class-column-last":  "position-column-last",
-  "position-class-row-first":    "position-row-first",
-  "position-class-row-last":     "position-row-last"
 ) !default;
 
+
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example scss
-///   @include module-name.set(( "property" : value ));
+/// @example
+///   @include ulu.component-data-grid-set(( "property" : value ));
 
 @mixin set($changes) {
   $config: map.merge($config, $changes) !global;
@@ -73,17 +82,16 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example scss
-///   @include module-name.get("property");
+/// @example
+///   @include ulu.component-data-grid-get("property");
 
 @function get($name) {
-  @return utils.require-map-get($config, $name, "grid [config]");
+  @return utils.require-map-get($config, $name, "data-grid [config]");
 }
 
-/// Returns gutter size for grid breakpoint map, defaults to the config's values
-/// Pass custom map to get gutter values from it
-/// @param {String} $name The name of the "grid breakpoint" (could be a different name than the actual breakpoint name it maps too)
-/// @param {Map} $custom-map Provide custom map of grid breakpoints to get the gutter from (defaults to the grid module's defaults 'extra-breakpoints')
+/// Output component stylesheet
+/// @example scss
+///  @include ulu.component-data-grid-styles();
 
 @function get-gutter($name: null, $custom-map: null) {
   @if (not $name) {
@@ -95,6 +103,8 @@ $config: (
   }
 }
 
+/// Get the default breakpoint for the grid (when it starts to be a grid (vs stacked/mobile)
+
 @function get-default-breakpoint() {
   $breakpoint: get("breakpoint");
   @if ($breakpoint) {
@@ -104,31 +114,43 @@ $config: (
   }
 }
 
-/// Creates grid css (variation of original data-grid)
+/// Prints default grid styles, if you want to customize further please use the create mixin
+/// @demo data-grid#align
+/// @example scss
+///  @include ulu.component-data-grid-styles();
+
+@mixin styles() {
+  @include create();
+}
+
+/// Output data grid styles
+/// - Can be used instead of styles() to have full control over options or for alternate grids (grids with different settings/column count) 
 /// @param {Number} $columns Columns in grid
 /// @param {Number} $breakpoint Breakpoint key for starting the grid
-/// @param {Map} $extra-breakpoints Map with other breakpoints to add (map of breakpoint and gutter see config.extra-breakpoints for an example (smalles to largest)
+/// @param {Map} $extra-breakpoints Map with other breakpoints to add (map of breakpoint and gutter see config.extra-breakpoints for an example (smallest to largest)
 /// @param {Number} $gutter Size in pixels for the gutters
 /// @param {Boolean} $include-rules Print styles for including rules
-/// @param {Number} $rule-size Size of the rule (border/seperator)
+/// @param {Number} $rule-size Size of the rule (border/separator)
 /// @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")
 
 @mixin create(
-  $columns: 12,
+  $columns: get("columns"),
   $breakpoint: get-default-breakpoint(),
   $extra-breakpoints: if(breakpoint.exists("large"), get("extra-breakpoints"), false),
   $gutter: get("gutter"),
   $include-rules: false,
-  $rule-size: 1px,
-  $rule-color: color.get("rule"),
-  $extra-rule-styles: null,
-  $extra-gutter-scales: null,
+  $rule-size: get("rule-size"),
+  $rule-color: get("rule-color"),
+  $extra-rule-styles: get("extra-rule-styles"),
+  $extra-gutter-scales: get("extra-gutter-scales"),
   $attribute: get("attribute"),
   $include-container: true,
   $container-attribute: get("attribute-container"),
-  $container-gutter-scales: true
+  $container-gutter-scales: true,
+  $sticky-top: get("sticky-top"),
+  $sticky-bottom: get("sticky-bottom")
 ) {
   $attribute-item: "#{ $attribute }-item";
   $select-grid: '[#{ $attribute }*="columns: #{ $columns }"]';
@@ -286,7 +308,7 @@ $config: (
         // For removing the rule per row (via equal heights for now)
         &.#{ $position-class-row-last } {
           &#{ $select-rule-row } {
-            content: none;
+            content: none !important;
           }
         }
       }
@@ -372,6 +394,16 @@ $config: (
         padding-left: $gutter;
         padding-right: $gutter;
       }
+      > #{'[#{ $attribute-item }*="sticky: top"]'} {
+        position: sticky;
+        align-self: start;
+        top: $sticky-top;
+      }
+      > #{'[#{ $attribute-item }*="sticky: bottom"]'} {
+        position: sticky;
+        align-self: end;
+        bottom: $sticky-bottom;
+      }
 
       @if $extra-gutter-scales {
         @each $scale, $amount in $extra-gutter-scales {
@@ -516,7 +548,7 @@ $config: (
         &#{'[#{ $attribute }*="rules-row-style: #{ $name }"]'} {
           > #{ $select-item } {
             &#{ $select-rule-row } {
-              background-color: $color;
+              background-color: color.get($color);
               height: $size;
             }
           }
@@ -690,7 +722,7 @@ $config: (
   &#{'[#{ $attribute }*="rules-row: #{ $key }"]'} {
     > #{ $select-item } {
       &#{ $select-rule-row } {
-        content: $size;
+        content: "";
         #{ $position }: math.floor(math.div($size, 2)) * -1;
       }
     }