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

package/js/ui/modal-builder.js

@@ -38,7 +38,7 @@ export const defaults = {
   noMinHeight: false,
   class: "",
   classCloseIcon: "css-icon css-icon--close",
-  classResizerIcon: "css-icon css-icon--drag",
+  classResizerIcon: "css-icon css-icon--drag-x",
   debug: false,
   templateCloseIcon(config) {
     return `<span class="modal__close-icon ${ config.classCloseIcon }" aria-hidden="true"></span>`;

package/js/ui/tabs.js

@@ -2,6 +2,12 @@
  * @module ui/tabs
  */
 
+// TODO:
+// - For Vertical tabs we should be updating the orientation when on mobile. 
+//   Currently using all arrows so that the interface works in both 
+//   orientations when vertical. Leaving that behavior for now but maybe consider
+//   setting this up to destroy tab interface when ui layout changes?
+
 import AriaTablist from "aria-tablist";
 
 const initAttr = "data-ulu-tablist-init";
@@ -127,13 +133,27 @@ function setHeights(element) {
   const images = [ ...parent.querySelectorAll("img") ];
   const imagePromises = images.map(image => imagePromise(image));
   function imagePromise(image) {
-    return new Promise((resolve, reject) => {
-      image.onload = () => resolve(image);
-      image.onerror = reject;
+    return new Promise((resolve) => {
+      if (image.complete) {
+        resolve(image);
+      } else {
+        image.onload = resolve;
+        // Errors should also resolve so that height matching continues
+        image.onerror = resolve; 
+      }
     });
   }
+  // Run after images are loaded, or if no images it will resolve and run
   Promise.all(imagePromises).then(() => {
-    const heights = panels.map(panel => panel.offsetHeight);
+    const heights = panels.map(panel => {
+      let panelHeight = panel.offsetHeight;
+      if (panel.hidden) {
+        panel.hidden = false;
+        panelHeight = panel.offsetHeight;
+        panel.hidden = true;
+      }
+      return panelHeight;
+    });
     const max = Math.max(...heights);
     panels.forEach(panel => panel.style.minHeight = `${ max }px`);
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.1",
+  "version": "0.1.0-beta.11", 
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",
@@ -27,9 +27,10 @@
     "docs:incremental": "npx @11ty/eleventy --serve --incremental --config=docs.eleventy.js",
     "docs:nogen": "NO_DOC_GEN=true npx @11ty/eleventy --serve --incremental --config=docs.eleventy.js",
     "docs:inspect": "node --inspect-brk ./node_modules/.bin/eleventy --serve --config=docs.eleventy.js",
-    "docs:build": "npx @11ty/eleventy --config=docs.eleventy.js",
+    "docs:build:prod": "IS_PRODUCTION=true npx @11ty/eleventy --config=docs.eleventy.js",
     "docs:assets": "vite --config docs.vite.config.js --force",
-    "docs:assets:build": "vite build --config docs.vite.config.js"
+    "docs:assets:build": "vite build --config docs.vite.config.js",
+    "docs:assets:build:prod": "IS_PRODUCTION=true vite build --config docs.vite.config.js"
   },
   "repository": {
     "type": "git",
@@ -82,9 +83,7 @@
     "vite": "^5.4.11"
   },
   "dependencies": {
-    "@ulu/utils": "^0.0.17"
-  },
-  "optionalDependencies": {
+    "@ulu/utils": "^0.0.17",
     "ally.js": "^1.4.1",
     "aria-tablist": "^1.2.2",
     "@floating-ui/dom": "^1.6.5"

package/scss/_color.scss

@@ -23,10 +23,17 @@ $palette: (
   "type-tertiary"           : rgb(157, 157, 157),
   "headline"                : inherit,
   "background"              : white,
+  "background-gray"         : #F7F8F7,
   "focus"                   : blue,
-  "error"                   : red,
-  "warning"                 : orange,
   "accent"                  : orange,
+  "info"                    : #00bde3,
+  "success"                 : #00a91c,
+  "warning"                 : #ffbe2e,  
+  "danger"                  : #d54309,  
+  "info-background"         : #e7f6f8,
+  "success-background"      : #ecf3ec,
+  "warning-background"      : #faf3d1,
+  "danger-background"       : #f4e3db,
   "selected"                : green,
   "box-shadow"              : rgba(0, 0, 0, 0.349),
   "box-shadow-hover"        : rgba(0, 0, 0, 0.5),
@@ -95,7 +102,7 @@ $color-classes: (
   // Allow non lookup if the value is already a color (helps with code flow)
   @if (meta.type-of($name) == "string") {
     // Allow custom-properties and keyword inherit/transparent to pass through
-    @if ($name == "inherit" or $name == "transparent" or string.index($name, "var(") == 1) {
+    @if ($name == "inherit" or $name == "transparent" or $name == "currentColor" or string.index($name, "var(") == 1) {
       @return $name;
     // Else look up the color from the palette
     } @else {

package/scss/base/_typography.scss

@@ -12,14 +12,14 @@
 /// - These are any type sizes that specify "base-class" in their configuration
 /// - Type sizes with "base-class-prefixed" will be prefixed with the "type-" prefix
 /// @example scss
-///  @include ulu.base-typography-styles();
+///   @include ulu.base-typography-styles();
 /// @example html {preview} Example of type size as base unprefixed
-///  <span class="h1">A</span>
-///  <span class="h2">A</span>
-///  <span class="h3">A</span>
-///  <span class="h4">A</span>
-///  <span class="h5">A</span>
-///  <span class="h6">A</span>
+///   <span class="h1">A</span>
+///   <span class="h2">A</span>
+///   <span class="h3">A</span>
+///   <span class="h4">A</span>
+///   <span class="h5">A</span>
+///   <span class="h6">A</span>
 
 @mixin styles {
 

package/scss/components/README.todos

@@ -13,3 +13,16 @@ Todos:
       * May override base styles
       * May contain layouts
       * May wrap or contain base (button vs button-group)
+
+Daniel Todos:
+  ☐ Remove uswds stylings for informative and emergency callouts and move it into soar's site
+    ☐ get rid of extra styles in frontend to clean up the left cap
+      ✔ add a dash to left-cap mixin (to make private) and remove documentation for that mixin @done
+      ✔ setup cap colors (define colors) @done
+      remove the width of the individual callout styles
+      remove background-dark, light, emergency styles
+    ☐ Reach out to Rachel about the bug with the theme toggle not working
+      ☐ ask her to recreate it
+  ☐ Setup search results page
+    ☐ General Node/Page Setup
+    ☐ Setup View

package/scss/components/_accordion.scss

@@ -13,8 +13,8 @@
 
 /// Module Settings
 /// @type Map
-/// @prop {Color}  background-color  [white] This is the background color of the accordion before it is expanded. 
-/// @prop {Color}  background-color-open  [#F7F8F7] This is the background color of the accordion before it is expanded. This will change the background color of the accordion's summary as well as the details.
+/// @prop {Color}  background-color  [accordion-background] This is the background color of the accordion before it is expanded. 
+/// @prop {Color}  background-color-open  [accordion-background-open] This is the background color of the accordion before it is expanded. This will change the background color of the accordion's summary as well as the details.
 /// @prop {String} border-color ["rule"]
 /// @prop {Number} border-radius  [0] This applies a rounding of edges for the accordion. If there are multiple accordions in a stack, this will only apply to the top of the first accordion and the bottom of the last accordion.
 /// @prop {Dimension} border-width  [1px] The width of the borders of the accordions
@@ -41,8 +41,8 @@
 /// @prop {Dimension} transparent-padding-x  [0] The upper and lower padding of the transparent summary.
 
 $config: (
-  "background-color":            white,
-  "background-color-open":       #F7F8F7,
+  "background-color":            "background",
+  "background-color-open":       "background-gray",
   "border-color":                "rule",
   "border-radius":               0,
   "border-width":                1px,
@@ -59,7 +59,7 @@ $config: (
   "icon-font-size":              1.5rem,
   "icon-size":                   auto,
   "icon-stroke-width":           0.15em,
-  "summary-background-color":    white,
+  "summary-background-color":    "white",
   "summary-color":               null,
   "summary-background-color-hover": null,
   "summary-color-hover":         null,
@@ -72,7 +72,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-accordion-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -81,7 +81,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-accordion-get("property");
 
 @function get($name) {
@@ -107,7 +107,7 @@ $config: (
     margin-top: get("margin");
     margin-bottom: get("margin");
     border: $border;
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     box-shadow: get("box-shadow");
     &:first-of-type {
       border-top-left-radius: get("border-radius");
@@ -124,7 +124,7 @@ $config: (
     }
     &[open], 
     &.is-active  {
-      background-color: get("background-color-open");
+      background-color: color.get(get("background-color-open"));
       padding-bottom: get("padding-y");
       z-index: 2; // Above child details
       > #{ $prefix }__summary {
@@ -136,8 +136,8 @@ $config: (
     }
   }
   #{ $prefix }__summary {
-    background-color: get("summary-background-color");
-    color: get("summary-color");
+    background-color: color.get(get("summary-background-color"));
+    color: color.get(get("summary-color"));
     margin-left: -(get("padding-x"));
     margin-right: -(get("padding-x"));
     line-height: get("summary-line-height");
@@ -161,10 +161,10 @@ $config: (
       @include typography.size(get("summary-type-size"));
     }
     &:hover {
-      background-color: get("summary-background-color-hover");
-      color: get("summary-color-hover");
+      background-color: color.get(get("summary-background-color-hover"));
+      color: color.get(get("summary-color-hover"));
       #{ $prefix }__icon {
-        background-color: get("icon-background-color-hover");
+        background-color: color.get(get("icon-background-color-hover"));
         color: color.get(get("icon-color-hover"));
       }
     }
@@ -174,7 +174,7 @@ $config: (
     color: color.get(get("icon-color"));
     margin-left: 0.5em;
     order: 3;
-    background-color: get("icon-background-color");
+    background-color: color.get(get("icon-background-color"));
     border-radius: get("icon-border-radius");
     width: get("icon-size");
     height: get("icon-size");

package/scss/components/_adaptive-spacing.scss

@@ -11,7 +11,7 @@
 
 /// Module Settings
 /// @type Map
-/// @prop {Boolean}  outputMargin  [false] @joe-check need examples for this to build documentation
+/// @prop {Boolean}  outputMargin  [false] Toggles the output of margin classes.
 /// @prop {Boolean}  outputPadding  [true] This is the background color of the accordion before it is expanded. 
 /// @prop {Boolean}  outputX  [true] This is the background color of the accordion before it is expanded. 
 /// @prop {Boolean}  outputY  [true] This is the background color of the accordion before it is expanded. 
@@ -54,7 +54,7 @@ $sizes: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-adaptive-spacing-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -71,7 +71,7 @@ $sizes: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-adaptive-spacing-get("property");
 
 @function get($name) {

package/scss/components/_badge.scss

@@ -6,6 +6,7 @@
 @use "sass:map";
 @use "../utils";
 @use "../selector";
+@use "../color";
 
 /// Module Settings
 /// @type Map
@@ -34,7 +35,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-badge-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -43,7 +44,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-badge-get("property");
 
 @function get($name) {
@@ -94,8 +95,8 @@ $config: (
     &:hover,
     &:focus,
     &:visited {
-      background-color: get("background-color");
-      color: get("color");
+      background-color: color.get(get("background-color"));
+      color: color.get(get("color"));
     }
   }
   #{ $prefix }--clickable {

package/scss/components/_button-verbose.scss

@@ -28,24 +28,24 @@ $-fallbacks: (
 
 /// Module Settings
 /// @type Map
-/// @prop {Color} background-color [white] Font size (basic ie. 1.3rem) for badge
-/// @prop {Color} background-color-hover [link] Font size (basic ie. 1.3rem) for badge
-/// @prop {String} border-radius [border-radius] Font size (basic ie. 1.3rem) for badge
-/// @prop {String} box-shadow [true] Use the fallback. But note it.
-/// @prop {String} box-shadow-hover [true] @joe-check these box-shadows are booleans, but it should be a css value
-/// @prop {String} color [type] Font size (basic ie. 1.3rem) for badge
-/// @prop {String} color-hover [type] Font size (basic ie. 1.3rem) for badge
-/// @prop {Color} icon-color [gray] Font size (basic ie. 1.3rem) for badge
-/// @prop {Dimension} icon-font-size [1.25rem] Font size (basic ie. 1.3rem) for badge
-/// @prop {Number} line-height [1.2] Font size (basic ie. 1.3rem) for badge
-/// @prop {Dimension} margin [1em] Font size (basic ie. 1.3rem) for badge
-/// @prop {Dimension} margin-inline [0.75em] Font size (basic ie. 1.3rem) for badge
-/// @prop {Dimension} min-width [20rem] Font size (basic ie. 1.3rem) for badge
-/// @prop {Dimension} padding-x [0.65em] Font size (basic ie. 1.3rem) for badge
-/// @prop {Dimension} padding-y [1em] Font size (basic ie. 1.3rem) for badge
-/// @prop {String} title-color [link] Font size (basic ie. 1.3rem) for badge
-/// @prop {String} title-color-hover [link-hover] Font size (basic ie. 1.3rem) for badge
-/// @prop {Dimension} title-margin [0.5em] Font size (basic ie. 1.3rem) for badge
+/// @prop {Color} background-color [white] Background color for the button.
+/// @prop {Color} background-color-hover [link] Background color for the button when hovered or focused.
+/// @prop {String} border-radius [border-radius] Border radius of the button.
+/// @prop {CssValue} box-shadow [true] Box shadow for the button. If set to true, uses default box-shadow.
+/// @prop {CssValue} box-shadow-hover [true] Box shadow for the button when hovered or focused. If set to true, uses default box-shadow-hover.
+/// @prop {String} color [type] Text color for the button.
+/// @prop {String} color-hover [type] Text color for the button when hovered or focused.
+/// @prop {Color} icon-color [gray] Color for button icons.
+/// @prop {Dimension} icon-font-size [1.25rem] Font size for the button.
+/// @prop {Number} line-height [1.2] Line height for button text.
+/// @prop {Dimension} margin [1em] Margin for the button.
+/// @prop {Dimension} margin-inline [0.75em] Margin for the button when using the inline modifier.
+/// @prop {Dimension} min-width [20rem] Min-width of the button.
+/// @prop {Dimension} padding-x [0.65em] Horizontal padding of the button.
+/// @prop {Dimension} padding-y [1em] Vertical padding of the button.
+/// @prop {String} title-color [link] Color of the title of the button.
+/// @prop {String} title-color-hover [link-hover] Color of the title of the button when hovered or focused.
+/// @prop {Dimension} title-margin [0.5em] Margin for the button's title.
 
 $config: (
   "background-color" : white,
@@ -70,7 +70,7 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-button-verbose-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -79,7 +79,7 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-button-verbose-get(( "property" : value ));
 
 @function get($name) {
@@ -102,7 +102,7 @@ $config: (
     margin-bottom: get("margin");
     max-width: 100%;
     width: get("min-width");
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     padding: get("padding-y") get("padding-x");
     padding-right: (get("padding-x") * 2) + 1em;
     color: color.get(get("color"));
@@ -126,7 +126,7 @@ $config: (
     right: get("padding-x");
     transform: translateY(-50%);
     font-size: get("icon-font-size");
-    color: get("icon-color");
+    color: color.get(get("icon-color"));
   }
   .button-verbose--inline {
     display: inline-block;

package/scss/components/_button.scss

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

package/scss/components/_callout.scss

@@ -10,13 +10,10 @@
 @use "../utils";
 @use "../selector";
 @use "../element";
+@use "../color";
 
 // Used for function fallback
 $-fallbacks: (
-  "border" : (
-    "function" : meta.get-function("get-rule-style", false, "element"),
-    "property" : "light"
-  ),
   "border-radius" : (
     "function" : meta.get-function("get", false, "element"),
     "property" : "border-radius"
@@ -26,8 +23,9 @@ $-fallbacks: (
 /// Module Settings
 /// @type Map
 /// @prop {Color} background-color [rgb(240, 240, 240)] The background color of the Callout.
-/// @prop {Boolean} border [true] The border of the Callout.
+/// @prop {Color} border-color ["rule-light"] The border color of the Callout.
 /// @prop {Boolean} border-radius [true] The border radius of the Callout.
+/// @prop {Dimension} border-width [1px] The border width of the Callout.
 /// @prop {CssValue} box-shadow [none] The box-shadow of the Callout.
 /// @prop {Boolean} left-cap [false] Toggles the use of left caps in styled callouts.
 /// @prop {Color} left-cap-color [green] Color of the left cap.
@@ -37,63 +35,46 @@ $-fallbacks: (
 
 $config: (
   "background-color" : rgb(240, 240, 240),
-  "border" : true,
+  "border-color" : "rule-light",
   "border-radius" :  true,
+  "border-width" : 1px,
   "box-shadow" : none,
-  "left-cap" : false,
-  "left-cap-color" : green,
+  "left-cap" : true,
+  "left-cap-color" : rgb(160, 160, 160),
   "left-cap-width" : 0.5rem,
   "margin" : 2rem,
   "padding" : 1.5rem,
 ) !default;
 
 $styles: (
-  "background-dark" : (
-    "background-color" : rgb(240, 240, 240)
-  ),
   "outline" : (
     "background-color": transparent
   ),
-  "light" : (
-    "background-color" : white,
-    "border-color" : gray
-  ),
-  "informative" : (
-    "background-color" : #e7f6f8,
-    "left-cap-color" : #00bde3,
+  "info" : (
+    "background-color" : "info-background",
+    "left-cap-color" : "info",
     "left-cap" : true,
-    "left-cap-width": 0.5rem
   ),
   "warning" : (
-    "background-color" : #faf3d1,
-    "left-cap-color" : #ffbe2e,
+    "background-color" : "info-background",
+    "left-cap-color" : "info",
     "left-cap" : true,
-    "left-cap-width": 0.5rem
   ),
   "success" : (
-    "background-color" : #ecf3ec,
-    "left-cap-color" : #00a91c,
+    "background-color" : "success-background",
+    "left-cap-color" : "success",
     "left-cap" : true,
-    "left-cap-width": 0.5rem
   ),
   "danger" : (
-    "background-color" : #f4e3db,
-    "left-cap-color" : #d54309,
+    "background-color" : "danger-background",
+    "left-cap-color" : "danger",
     "left-cap" : true,
-    "left-cap-width": 0.5rem
   ),
-  "emergency" : (
-    "background-color" : #9c3d10,
-    "left-cap-color" : #9c3d10,
-    "left-cap" : true,
-    "color" : white,
-    "left-cap-width": 0.5rem
-  )
 ) !default;
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example
+/// @example scss
 ///   @include ulu.component-callout-set(( "property" : value ));
 
 @mixin set($changes) {
@@ -102,7 +83,7 @@ $styles: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example
+/// @example scss
 ///   @include ulu.component-callout-get("property");
 
 @function get($name) {
@@ -118,22 +99,14 @@ $styles: (
   $styles: utils.map-merge($styles, $changes, $merge-mode) !global;
 }
 
-/// Output styling for a callout that adds a left cap
-/// @param {Dimension} $width The width of the left cap
-/// @param {Color} $color The left cap color
-
-@mixin left-cap($width: get("left-cap-width"), $color: get("left-cap-color")) {
+@mixin -left-cap($color: get("left-cap-color")) {
+  $left-padding: get-spacing-left(get("padding"));
   position: relative; 
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
+  padding-left: get("left-cap-width") + $left-padding;
   &::before {
-    position: absolute;
     content: "";
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: $width;
-    background-color: $color;
   }
 }
 
@@ -143,32 +116,48 @@ $styles: (
 
 @mixin styles {
   $prefix: selector.class("callout");
-
+  
   #{ $prefix } {
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     padding: get("padding");
-    border: get("border");
+    border: get("border-width") solid color.get(get("border-color"));
     margin-bottom: get("margin");
     box-shadow: get("box-shadow");
     border-radius: get("border-radius");
     & >:first-child {
       margin-top: 0;
     }
+    &::before {
+      position: absolute;
+      left: 0 - get("border-width");
+      top: 0 - get("border-width");
+      bottom: 0 - get("border-width");
+      width: get("left-cap-width");
+      background-color: color.get(get("left-cap-color"));
+    }
     @if get("left-cap") {
-      @include left-cap();
+      @include -left-cap();
+      &::before {
+        content: "";
+      }
     }
   }
   @each $name, $style in $styles {
     #{ $prefix }--#{ $name } {
-      background-color: map.get($style, "background-color"); 
-      color: map.get($style, "color"); 
+      background-color: color.get(map.get($style, "background-color")); 
+      color: color.get(map.get($style, "color")); 
       border: map.get($style, "border"); 
       border-radius: map.get($style, "border-radius"); 
-      border-color: map.get($style, "border-color"); 
+      border-color: color.get(map.get($style, "border-color")); 
       box-shadow: map.get($style, "box-shadow"); 
       padding: map.get($style, "padding"); 
+      &::before {
+        background-color: color.get(map.get($style, "left-cap-color"));
+      }
       @if map.get($style, "left-cap") {
-        @include left-cap( map.get($style, "left-cap-width"), map.get($style, "left-cap-color"));
+        @if not get("left-cap") {
+          @include -left-cap();
+        }
       }
     }
   }