@ulu/frontend 0.0.23 → 0.1.0-beta.0

package/scss/components/_hero.scss

@@ -0,0 +1,183 @@
+
+////
+/// @group hero
+////
+
+@use "sass:map";
+@use "sass:math";
+@use "sass:list";
+
+@use "../selector";
+@use "../utils";
+@use "../breakpoint";
+@use "../typography";
+
+/// Module Settings
+/// @type Map
+/// @prop {Map} extra-split-ratios  [wide 70/30] A map where the name is the modifier and the value is a list with two percentages (the first percentage will be correspond with the graphic or content depending on selector [ie. .hero--split-graphic-[name] would apply the first percentage to the graphic while hero--split-content-[name] would apply the first percentage to the content]) 
+
+$config: (
+  "breakpoint" : "medium",
+  "height" : 100vh,
+  "height-compact" : 40vh,
+  "graphic-height-stacked" : 60vh,
+  "content-max-width" : 40rem,
+  "content-padding-top" : 3rem,
+  "content-padding-bottom" : 3rem,
+  "text-align" : center,
+  "extra-split-ratios" : (
+    "wide" : (60%, 40%)
+  )
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example
+///   @include ulu.component-hero-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-hero-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "hero [config]");
+}
+
+/// Prints component styles
+/// @example scss
+///  @include ulu.component-hero-styles();
+
+@mixin styles {
+  $prefix: selector.class("hero");
+  $height: get("height");
+  $breakpoint: get("breakpoint");
+
+  #{ $prefix } {
+    display: flex;
+    flex-direction: column;
+    text-align: get("text-align");
+  }
+  #{ $prefix }__content-container {
+    padding-top: get("content-padding-top");
+    padding-top: get("content-padding-bottom");
+  }
+  #{ $prefix }__content-inner {
+    max-width: get("content-max-width");
+    margin-left: auto;
+    margin-right: auto;
+  }
+  #{ $prefix }__graphic {
+    position: relative;
+    flex-grow: 1;
+    width: 100%;
+  }
+  #{ $prefix }__graphic-media {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  
+  
+  
+  // This doesn't interfere with overlay
+  #{ $prefix }--top {
+    #{ $prefix }__graphic {
+      @include breakpoint.min($breakpoint) {
+        order: -1;
+      }
+    }
+  }
+  // These are shared between overlay and split style
+  @include breakpoint.min($breakpoint) {
+    #{ $prefix }--right,
+    #{ $prefix }--left {
+      text-align: right;
+      flex-direction: row;
+      #{ $prefix }__graphic,
+      #{ $prefix }__content {
+        flex: 1 0 50%;
+      }
+      #{ $prefix }__content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+    }
+    #{ $prefix }--right {
+      #{ $prefix }__content-inner {
+        margin-right: 0;
+      }
+    }
+    #{ $prefix }--left {
+      text-align: left;
+      #{ $prefix }__graphic {
+        order: -1;
+      }
+      #{ $prefix }__content-inner {
+        margin-left: 0;
+      }
+    }
+  }
+  #{ $prefix }--split {
+    @include breakpoint.min($breakpoint) {
+      min-height: $height;
+    }
+    #{ $prefix }__graphic {
+      @include breakpoint.max($breakpoint) {
+        height: get("graphic-height-stacked");
+      }
+    }
+  }
+
+  @if get("extra-split-ratios") {
+    @include breakpoint.min($breakpoint) {
+      @each $name, $ratio in get("extra-split-ratios") {
+        #{ $prefix }--split-graphic-#{ $name } #{ $prefix }__graphic,
+        #{ $prefix }--split-content-#{ $name } #{ $prefix }__content {
+          flex-basis: list.nth($ratio, 1);
+        }
+        #{ $prefix }--split-graphic-#{ $name } #{ $prefix }__content,
+        #{ $prefix }--split-content-#{ $name } #{ $prefix }__graphic {
+          flex-basis: list.nth($ratio, 2);
+        }
+      }
+    }
+  }
+  
+
+  #{ $prefix }--overlay {
+    position: relative;
+    justify-content: center;
+    min-height: $height;
+    #{ $prefix }__content { 
+      position: relative;
+      z-index: 2;
+    }
+    #{ $prefix }__graphic {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+    &#{ $prefix }--bottom,
+    &#{ $prefix }--bottom #{ $prefix }__content {
+      justify-content: flex-end;
+    }
+    &#{ $prefix }--top,
+    &#{ $prefix }--top #{ $prefix }__content {
+      justify-content: flex-start;
+    }
+  }
+  #{ $prefix }--compact {
+    min-height: get("height-compact");
+  }
+}

package/scss/components/_horizontal-rule.scss

@@ -0,0 +1,51 @@
+////
+/// @group horizontal-rule
+////
+
+@use "sass:map";
+@use "../utils";
+@use "../element";
+
+/// Module Settings
+/// @type Map
+/// @prop {Dimension} min-height [1em] Min height for rule.
+/// @prop {Dimension} margin [1em] Top and bottom margin for rule.
+
+$config: (
+  "margin": 1em,
+  "min-height": 1em,
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss 
+///   @include ulu.component-horizontal-rule-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-horizontal-rule-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "horizontal-rule [config]");
+}
+
+/// Prints adaptive spacing component styles
+/// @example scss
+///  @include ulu.component-horizontal-styles();
+
+@mixin styles {
+  .horizontal-rule {
+    display: inline-block;
+    min-height: get("min-height");
+    vertical-align: middle;
+    border-right: element.get-rule-style();
+    margin: 0 get("margin");
+    flex-grow: 0;
+    align-self: stretch;
+  }
+}

package/scss/components/_image-grid.scss

@@ -0,0 +1,71 @@
+////
+/// @group image-grid
+////
+
+@use "sass:map";
+@use "sass:math";
+
+@use "../selector";
+@use "../utils";
+@use "../breakpoint";
+
+
+/// Module Settings
+/// @type Map
+/// @prop {String} breakpoint ["small"] Sets the min breakpoint for the grid to print. This uses breakpoint.scss, so the value of this option should be a breakpoint variable from breakpoint.scss.
+/// @prop {Dimension} gap [3px] The gap between images in the grid.
+/// @prop {Dimension} min-width [math.div(100%, 3)] The min-width of the images in the grid.
+
+$config: (
+  "breakpoint": "small",
+  "gap":        3px,
+  "min-width":  math.div(100%, 3)
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example
+///   @include ulu.component-image-grid-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-image-grid-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "image-grid [config]");
+}
+
+/// Prints component styles
+/// @example scss
+///  @include ulu.component-image-grid-styles();
+
+@mixin styles {
+
+  $prefix: selector.class("image-grid");
+  $gap: get("gap");
+
+  #{ $prefix } {
+    display: flex;
+    flex-wrap: wrap;
+    margin: -($gap);
+    overflow: hidden;
+  }
+  #{ $prefix }__item {
+    // Have to use borders vs flexbox gap (adds to percentages) @important
+    border-bottom: $gap solid transparent;
+    border-top: $gap solid transparent;
+    @include breakpoint.min(get("breakpoint")) {
+      border: $gap solid transparent;
+      flex: 1 1;
+      min-width: get("min-width");
+    }
+    > img {
+      width: 100%;
+    }
+  }
+}

package/scss/components/_index.scss

@@ -1,75 +1,313 @@
 ////
-/// @group all
+/// @group index
+/// Outputs all component stylesheets, optionally choose to set includes or excludes to narrow down components that are output.
 ////
 
-@forward "links" as links-*;
-@forward "button" as button-*;
+@forward "accordion" as accordion-*;
+@forward "adaptive-spacing" as adaptive-spacing-*;
 @forward "badge" as badge-*;
-@forward "rule" as rule-*;
+@forward "button" as button-*;
+@forward "button-verbose" as button-verbose-*;
+@forward "callout" as callout-*;
+@forward "card" as card-*;
+@forward "card-grid" as card-grid-*;
+@forward "css-icon" as css-icon-*;
+@forward "data-grid" as data-grid-*;
+@forward "data-table" as data-table-*;
+@forward "fill-context" as fill-context-*;
+@forward "flipcard" as flipcard-*;
+@forward "flipcard-grid" as flipcard-grid-*;
+@forward "form-theme" as form-theme-*;
+@forward "horizontal-rule" as horizontal-rule-*;
+@forward "image-grid" as image-grid-*;
+@forward "links" as links-*;
 @forward "list-lines" as list-lines-*;
-@forward "list-unordered" as list-unordered-*;
 @forward "list-ordered" as list-ordered-*;
-@forward "fill-context" as fill-context-*;
+@forward "list-unordered" as list-unordered-*;
+@forward "menu-stack" as menu-stack-*;
+@forward "modal" as modal-*;
+@forward "nav-strip" as nav-strip-*;
+@forward "overlay-section" as overlay-section-*;
+@forward "pager" as pager-*;
+@forward "placeholder-block" as placeholder-block-*;
+@forward "pull-quote" as pull-quote-*;
+@forward "popover" as popover-*;
+@forward "ratio-box" as ratio-box-*;
+@forward "rule" as rule-*;
+@forward "scroll-slider" as scroll-slider-*;
+@forward "skip-link" as skip-link-*;
+@forward "slider" as slider-*;
+@forward "hero" as hero-*;
+@forward "tabs" as tabs-*;
+@forward "tag" as tag-*;
+@forward "tile-grid" as tile-grid-*;
+@forward "tile-button" as tile-button-*;
+@forward "tile-grid-overlay" as tile-grid-overlay-*;
+@forward "vignette" as vignette-*;
+@forward "captioned-figure" as captioned-figure-*;
+@forward "spoke-spinner" as spoke-spinner-*;
+@forward "wysiwyg" as wysiwyg-*;
 
-@use "sass:map";
+@use "sass:list";
 
 @use "../utils";
-@use "links";
-@use "button";
+@use "adaptive-spacing";
+@use "accordion";
 @use "badge";
-@use "rule";
+@use "button";
+@use "button-verbose";
+@use "callout";
+@use "card";
+@use "card-grid";
+@use "css-icon";
+@use "data-grid";
+@use "data-table";
+@use "fill-context";
+@use "flipcard";
+@use "flipcard-grid";
+@use "form-theme";
+@use "horizontal-rule";
+@use "image-grid";
 @use "list-lines";
-@use "list-unordered";
 @use "list-ordered";
-@use "fill-context";
+@use "list-unordered";
+@use "links";
+@use "menu-stack";
+@use "modal";
+@use "nav-strip";
+@use "overlay-section";
+@use "pager";
+@use "placeholder-block";
+@use "popover";
+@use "pull-quote";
+@use "ratio-box";
+@use "rule";
+@use "scroll-slider";
+@use "skip-link";
+@use "slider";
+@use "hero";
+@use "tabs";
+@use "tag";
+@use "tile-grid";
+@use "tile-button";
+@use "tile-grid-overlay";
+@use "vignette";
+@use "captioned-figure";
+@use "spoke-spinner";
+@use "wysiwyg";
 
-// Used to check against user's includes
+/// Default includes, all modules
+/// @type List
 
-$-all-includes: (
-  "links" : true,
-  "button" : true,
-  "badge" : true,
-  "rule" : true,
-  "list-lines" : true,
-  "list-unordered" : true,
-  "list-ordered" : true,
-  "fill-context" : true,
+$all-includes: (
+  "accordion",
+  "adaptive-spacing",
+  "badge",
+  "button",
+  "button-verbose",
+  "callout",
+  "card",
+  "card-grid",
+  "css-icon",
+  "data-grid",
+  "data-table",
+  "fill-context",
+  "flipcard",
+  "flipcard-grid",
+  "form-theme",
+  "horizontal-rule",
+  "image-grid",
+  "links",
+  "list-lines",
+  "list-ordered",
+  "list-unordered",
+  "menu-stack",
+  "modal",
+  "nav-strip",
+  "overlay-section",
+  "pager",
+  "popover",
+  "ratio-box",
+  "rule",
+  "scroll-slider",
+  "skip-link",
+  "slider",
+  "hero",
+  "tabs",
+  "tag",
+  "tile-grid",
+  "tile-button",
+  "tile-grid-overlay",
+  "placeholder-block",
+  "pull-quote",
+  "vignette",
+  "captioned-figure",
+  "spoke-spinner",
+  "wysiwyg",
 );
 
+/// Current included modules (for output when using styles), defaults to all
+/// @type List
+
+$current-includes: $all-includes;
+
+/// Change default includes (when user prints modules)
+/// - This available as configuration so that it can be configured (to allow easily copying configuration)
+/// @param {List} $includes List of modules by name to be included when styles are printed
+
+@mixin set-includes($includes) {
+  @include utils.require-list-contains($all-includes, $includes, "components.set-includes", true);
+  $current-includes: $includes !global;
+}
+
+/// Exclude certain items from includes
+/// @param {List} $excludes List of item names
+
+@mixin set-excludes($excludes) {
+  $current-includes: utils.list-without($current-includes, $excludes) !global;
+}
+
 /// Prints all Components styles
 /// @name component-styles
-/// @param {List} $includes A list of changes to module includes
+/// @param {List} $includes [$all-includes] A list of components to include (defaults to all)
 /// @example scss
 ///  @include ulu.component-styles();
 
-@mixin styles($includes: null) {
+@mixin styles($includes: $current-includes) {
   @include utils.file-header("components");
-  @if $includes {
-    @include utils.require-list-contains($-all-includes, $includes);
-    $-all-includes: map.merge($-all-includes, $includes) !global;
+
+  @include utils.require-list-contains($all-includes, $includes, "components.$includes", true);
+  
+  @if (list.index($includes, "accordion")) {
+    @include accordion.styles;
   }
-  @if (map.get($-all-includes, "links")) {
-    @include links.styles;
+  @if (list.index($includes, "adaptive-spacing")) {
+    @include adaptive-spacing.styles;
   }
-  @if (map.get($-all-includes, "button")) {
+  @if (list.index($includes, "hero")) {
+    @include hero.styles;
+  }
+  @if (list.index($includes, "button")) {
     @include button.styles;
   }
-  @if (map.get($-all-includes, "badge")) {
+  @if (list.index($includes, "button-verbose")) {
+    @include button-verbose.styles;
+  }
+  @if (list.index($includes, "badge")) {
     @include badge.styles;
   }
-  @if (map.get($-all-includes, "rule")) {
-    @include rule.styles;
+  @if (list.index($includes, "tag")) {
+    @include tag.styles;
+  }
+  @if (list.index($includes, "callout")) {
+    @include callout.styles;
+  }
+  @if (list.index($includes, "card")) {
+    @include card.styles;
+  }
+  @if (list.index($includes, "card-grid")) {
+    @include card-grid.styles;
   }
-  @if (map.get($-all-includes, "list-lines")) {
+  @if (list.index($includes, "css-icon")) {
+    @include css-icon.styles;
+  }
+  @if (list.index($includes, "data-grid")) {
+    @include data-grid.styles;
+  }
+  @if (list.index($includes, "data-table")) {
+    @include data-table.styles;
+  }
+  @if (list.index($includes, "fill-context")) {
+    @include fill-context.styles;
+  }
+  @if (list.index($includes, "flipcard")) {
+    @include flipcard.styles;
+  }
+  @if (list.index($includes, "flipcard-grid")) {
+    @include flipcard-grid.styles;
+  }
+  @if (list.index($includes, "form-theme")) {
+    @include form-theme.styles;
+  }
+  @if (list.index($includes, "horizontal-rule")) {
+    @include horizontal-rule.styles;
+  }
+  @if (list.index($includes, "image-grid")) {
+    @include image-grid.styles;
+  }
+  @if (list.index($includes, "links")) {
+    @include links.styles;
+  }
+  @if (list.index($includes, "list-lines")) {
     @include list-lines.styles;
   }
-  @if (map.get($-all-includes, "list-unordered")) {
+  @if (list.index($includes, "list-unordered")) {
     @include list-unordered.styles;
   }
-  @if (map.get($-all-includes, "list-ordered")) {
+  @if (list.index($includes, "list-ordered")) {
     @include list-ordered.styles;
   }
-  @if (map.get($-all-includes, "fill-context")) {
-    @include fill-context.styles;
+  @if (list.index($includes, "menu-stack")) {
+    @include menu-stack.styles;
+  }
+  @if (list.index($includes, "modal")) {
+    @include modal.styles;
+  }
+  @if (list.index($includes, "nav-strip")) {
+    @include nav-strip.styles;
+  }
+  @if (list.index($includes, "overlay-section")) {
+    @include overlay-section.styles;
+  }
+  @if (list.index($includes, "pager")) {
+    @include pager.styles;
+  }
+  @if (list.index($includes, "placeholder-block")) {
+    @include placeholder-block.styles;
+  }
+  @if (list.index($includes, "popover")) {
+    @include popover.styles;
+  }
+  @if (list.index($includes, "pull-quote")) {
+    @include pull-quote.styles;
+  }
+  @if (list.index($includes, "ratio-box")) {
+    @include ratio-box.styles;
+  }
+  @if (list.index($includes, "rule")) {
+    @include rule.styles;
+  }
+  @if (list.index($includes, "scroll-slider")) {
+    @include scroll-slider.styles;
+  }
+  @if (list.index($includes, "skip-link")) {
+    @include skip-link.styles;
+  }
+  @if (list.index($includes, "slider")) {
+    @include slider.styles;
+  }
+  @if (list.index($includes, "tabs")) {
+    @include tabs.styles;
+  }
+  @if (list.index($includes, "tile-grid")) {
+    @include tile-grid.styles;
+  }
+  @if (list.index($includes, "tile-button")) {
+    @include tile-button.styles;
+  }
+  @if (list.index($includes, "tile-grid-overlay")) {
+    @include tile-grid-overlay.styles;
+  }
+  @if (list.index($includes, "vignette")) {
+    @include vignette.styles;
+  }
+  @if (list.index($includes, "captioned-figure")) {
+    @include captioned-figure.styles;
+  }
+  @if (list.index($includes, "spoke-spinner")) {
+    @include spoke-spinner.styles;
+  }
+  @if (list.index($includes, "wysiwyg")) {
+    @include wysiwyg.styles;
   }
 }

package/scss/components/_links.scss

@@ -5,7 +5,7 @@
 @use "../element";
 @use "../selector";
 
-/// Link compontent styles (.link)
+/// Link component styles (.link)
 /// - Contextual link styling
 /// - Styles all links within as normal text hyperlinks (hover, visited)
 /// @example scss