@ulu/frontend 0.1.0-beta.5 → 0.1.0-beta.50

package/scss/_utils.scss

@@ -20,7 +20,7 @@ $config: (
   "debug-maps": true,
   "file-header-comments": true,
   "responsive-change": 0.5vw,
-  "pixel-em-base" : 16px
+  "pixel-em-base" : 16px,
 ) !default;
 
 /// Change modules $config
@@ -34,8 +34,12 @@ $config: (
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example scss - General example
-///   @include ulu.utils-get("property");
+/// @compiler
+///   @use "index" as ulu;
+/// @example scss {compile} Example usage
+///   .test-em-to-pixel {
+///     width: ulu.utils-get("pixel-em-base");
+///   }
 
 @function get($name) {
   @return require-map-get($config, $name, 'utils');
@@ -47,6 +51,13 @@ $config: (
 /// @param {String} $key The key in the map to get value from
 /// @param {String} $context The context of using this function for debugging help
 /// @return {*} The value from the map
+/// @compiler
+///   @use "index" as ulu;
+/// @example scss {compile} Example usage
+///   .test-require-map {
+///     $test-map: ("test-font-size": 12px);
+///     font-size: ulu.utils-require-map-get($test-map, "test-font-size");
+///   }
 
 @function require-map-get($map, $key, $context: "unknown") {
   // $value: map.get($map, $key);
@@ -128,24 +139,49 @@ $config: (
 
 // Returns number unit info, and strips the unit
 /// @param {String} $number Number to get meta info for
-/// @return {Map} With properties (unit, value)
+/// @return {Map} With properties (unit, value, invalid [true/false if not number])
 
-@function number-info($number) {
-  $is-number: meta.type-of($number) != 'number';
-  $is-unitless: math.is-unitless($number);
-  @if ($is-unitless or not $is-number) {
+@function number-info($number, $errors: false) {
+
+  @if (meta.type-of($number) == 'number') {
+    $is-unitless: math.is-unitless($number);
     @return (
-      "unit": null,
-      "value": $number 
+      "unit": if($is-unitless, null, math.unit($number)),
+      "value": if($is-unitless, $number, strip-unit($number)),
+      "invalid" : false
     );
+
   } @else {
+    @if ($errors) {
+      @error "Expected Number, got #{ meta.type-of($number) } for #{ $number }";
+    }
     @return (
-      "unit" : math.unit($value), 
-      "value": math.div($number, ($number * 0 + 1))
+      "unit": null,
+      "value": $number,
+      "invalid" : true
     );
   }
 }
 
+/// Adds unit to unitless number
+/// @param {Number} $number The unitless number to add unit to
+/// @param {String} $unit The unit to add to number
+/// @return {String} Number with unit attached (can't be used in maths)
+
+@function add-unit($number, $unit) {
+  @return $number + string.unquote($unit);
+}
+
+/// Checks if two numbers are the same unit
+/// @param {Number} $number 
+/// @param {String} $other-number 
+/// @return {Boolean} Whether they have the same unit type
+// Could be made into multiple arguments in future if needed 
+
+@function units-match($number, $other-number) {
+  @return math.unit($number) == math.unit($other-number);
+}
+
 /// Reusable merge method 
 /// @param {Map} $original Source map 
 /// @param {Map} $changes Changes to merge into source map
@@ -448,9 +484,23 @@ $config: (
 /// Strips the unit from the number
 /// - Normally this shouldn't be needed
 /// @link https://stackoverflow.com/questions/12328259/how-do-you-strip-the-unit-from-any-number-in-sass/12335841#12335841 Original source (Miriam Suzanne)
+/// @compiler
+///   @use "index" as ulu;
+/// @example scss {compile} Example usage
+///   .test {
+///     line-height: ulu.utils-strip-unit(4rem);
+///   }
 
 @function strip-unit($value) {
-  @return math.div($value, ($value * 0 + 1));
+  @if (is-number($value)) {
+    @if (math.is-unitless($value)) {
+      @return $value;
+    } @else {
+      @return math.div($value, ($value * 0 + 1));
+    }
+  } @else {
+    @error "Expected number, got #{ $value }";
+  }
 }
 
 /// Calculate the size of something at a given scale (percentage/exponential)
@@ -485,4 +535,189 @@ $config: (
 ) {
   #{ $property } : $value;
   #{ $property } : calc(#{ $value } + #{ $responsive-change });
+}
+
+/// Calculates the hypotenuse of a triangle
+/// - Can be used to get length between two corners of a rectangle
+/// @param {Number} $width The width of the triangle
+/// @param {Number} $height The height of the triangle
+/// @return {Number} Hypotenuse of a triangle
+
+@function hypotenuse($width, $height) {
+  @return math.sqrt(math.pow($width, 2) + math.pow($height, 2));
+}
+
+/// Get's the info about a box shadow 
+/// @param {List} $shadow The box shadow property (ie. 0 0 4px red)
+/// @return {Map} Map with info about the shadow with the following keys (inset, offset-x, offset-y, blur, spread, color)
+/// @throw When shadow is not type list
+
+@function box-shadow-info($shadow) {
+  @if (meta.type-of($shadow) != "list") {
+    @error "Box shadow passed is not correct type (list)";
+  }
+  $result: (
+    "inset": false,
+    "offset-x": 0,
+    "offset-y": 0,
+    "blur": 0,
+    "spread": 0,
+    "color": null,
+  );
+
+  $number-keys: ("offset-x", "offset-y", "blur", "spread");
+  $number-index: 1;
+
+  @each $value in $shadow {
+    $type: meta.type-of($value);
+    @if $type == "color" {
+      $result: map.merge($result, ("color": $value));
+    } @else if $type == "string" and $value == inset {
+      $result: map.merge($result, ("inset": true));
+    } @else if $type == "number" and $number-index <= 4 {
+      // Add each back in by key in the order they appear
+      // if not found it's the default
+      $result: map.merge($result, (list.nth($number-keys, $number-index): $value));
+      $number-index: $number-index + 1;
+    }
+  }
+  
+  @return $result;
+}
+
+/// Get's the extent (how far the shadow extends past the box's edge)
+/// - This will only work on box-shadows that have matching units for the numbers
+/// @param {List} $shadow The box shadow property (ie. 0 0 4px red)
+/// @param {String} $side Optionally pass the side of box to get extend for, if not specified offsets are ignored and just the extent of the shadow is passed
+/// @return {Number} The size the shadow extends past it's box
+
+@function box-shadow-extent($shadow, $side: null) {
+  $info: box-shadow-info($shadow);
+  $extent: map.get($info, "spread") + map.get($info, "blur");
+  $offset-x: map.get($info, "offset-x");
+  $offset-y: map.get($info, "offset-y");
+  @if (not $side) {
+    @return $extent;
+  } @else {
+    @if ($side == "top") {
+      @return $extent - $offset-y;
+    } @else if ($side == "bottom") {
+      @return $extent + $offset-y;
+    } @else if ($side == "left") {
+      @return $extent - $offset-x;
+    } @else if ($side == "right") {
+      @return $extent + $offset-x;
+    }
+  }
+}
+
+/// Determines if value passed is a list
+/// @param {*} $value Value to check
+/// @return {Boolean} Whether the item was type list
+
+@function is-list($value) {
+  @return meta.type-of($value) == "list";
+}
+
+/// Determines if value passed is a map
+/// @param {*} $value Value to check
+/// @return {Boolean} Whether the item was type map
+
+@function is-map($value) {
+  @return meta.type-of($value) == "map";
+}
+
+/// Determines if value passed is a number
+/// @param {*} $value Value to check
+/// @return {Boolean} Whether the item was type number
+
+@function is-number($value) {
+  @return meta.type-of($value) == "number";
+}
+
+/// Determines if value passed is a string
+/// @param {*} $value Value to check
+/// @return {Boolean} Whether the item was type string
+
+@function is-string($value) {
+  @return meta.type-of($value) == "string";
+}
+
+/// Determines if value passed is a color
+/// @param {*} $value Value to check
+/// @return {Boolean} Whether the item was type color
+
+@function is-color($value) {
+  @return meta.type-of($value) == "color";
+}
+
+
+
+// /// Determines if value passed is a bool
+// /// @param {*} $value Value to check
+// /// @return {Boolean} Whether the item was type bool
+
+// @function is-bool($value) {
+//   @return meta.type-of($value) == "bool";
+// }
+
+// /// Determines if value passed is a null
+// /// @param {*} $value Value to check
+// /// @return {Boolean} Whether the item was type null
+
+// @function is-null($value) {
+//   @return meta.type-of($value) == "null";
+// }
+
+/// Returns true if number passed is even
+/// - Allows unit and unitless numbers
+/// @param {Number} $number The number to check
+/// @return {Boolean} Whether or not it is an even number
+
+@function is-even($number) {
+  @if (is-number($number)) {
+    @return strip-unit($number) % 2 == 0;
+  } @else {
+    @error "Expected Number, got #{ $number }";
+  }
+}
+
+/// Returns true if number passed is odd
+/// @param {Number} $number The number to check
+/// @return {Boolean} Whether or not it is an odd number
+
+@function is-odd($number) {
+  @return not is-even($number);
+}
+
+/// Always returns a map
+/// @param {*} $value The value to check if is map
+/// @return {Map} The $value if it was a map, else empty map
+
+@function ensure-map($value) {
+  @return if(is-map($value), $value, ());
+}
+
+/// Returns true if edge passed is an end (top/bottom)
+/// @param {String} $edge The edge string to test
+/// @return {Boolean} Whether the edge was an end (versus side/x-axis)
+/// @throw If $edge is not a valid value (not top/bottom/left/right)
+
+@function is-end($edge) {
+  @if ($edge == "top" or $edge == "bottom") {
+    @return true;
+  } @else if ($edge == "left" or $edge == "right") {
+    @return false;
+  } @else {
+    @error "Expected side to be top/bottom/left/right, got #{ $edge }";
+  }
+}
+
+/// Returns true if edge passed is an side (left/right)
+/// @param {String} $edge The edge string to test
+/// @return {Boolean} Whether the edge was an side (versus end/y-axis)
+/// @throw If $edge is not a valid value (not top/bottom/left/right)
+
+@function is-side($edge) {
+  @return not is-end($edge);
 }

package/scss/components/README.todos

@@ -13,3 +13,17 @@ 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,
@@ -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");
@@ -120,11 +120,11 @@ $config: (
     & + & {
       $gap: -(get("margin") - get("margin-between"));
       margin-top: $gap;
-      margin-top: calc($gap - 1px);
+      margin-top: calc($gap - get("border-width"));
     }
     &[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");
@@ -145,10 +145,9 @@ $config: (
     vertical-align: top;
     font-weight: bold;
     cursor: pointer;
+    display: flex; // For icon
+    align-items: center;
     &:has(#{ $prefix }__icon) {
-      display: flex; // For icon
-      align-items: center;
-      justify-content: space-between;
       list-style: none; // Remove the default arrow (old safari?)
       &::-webkit-details-marker,
       &::marker {
@@ -161,10 +160,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"));
       }
     }
@@ -172,9 +171,9 @@ $config: (
   #{ $prefix }__icon {
     flex: 0 0 get("icon-size");
     color: color.get(get("icon-color"));
-    margin-left: 0.5em;
-    order: 3;
-    background-color: get("icon-background-color");
+    margin-left: auto;
+    padding-left: 0.5em;
+    background-color: color.get(get("icon-background-color"));
     border-radius: get("icon-border-radius");
     width: get("icon-size");
     height: get("icon-size");
@@ -209,7 +208,6 @@ $config: (
   }
   #{ $prefix }--no-borders {
     border: none;
-    margin-bottom: 4rem;
     &[open] > .accordion__summary {
       border-bottom: none;
     }

package/scss/components/_badge.scss

@@ -6,6 +6,7 @@
 @use "sass:map";
 @use "../utils";
 @use "../selector";
+@use "../color";
 
 /// Module Settings
 /// @type Map
@@ -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/_basic-hero.scss

@@ -0,0 +1,112 @@
+////
+/// @group basic-hero
+/// Basic styling for a hero
+////
+
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:list";
+
+@use "../breakpoint";
+@use "../selector";
+@use "../utils";
+@use "../typography";
+@use "../color";
+
+// Used for function fallback
+$-fallbacks: (
+  "main-max-width" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "max-width"
+  ),
+  "main-min-width" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "max-width-small"
+  ),
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {CssValue} text-align [center] Alignment of text within hero.
+/// @prop {Color} background-color ["color-hero-background"] Background color of the hero
+
+$config: (
+  "background-color" : "background-gray",
+  "padding-top": 3rem,
+  "padding-bottom" : 2rem,
+  "gap" : (4rem 2rem),
+  "main-max-width" : true,
+  "main-min-width" : true,
+  "media-max-width" : 20rem,
+  "media-vertical-align" : center
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-basic-hero-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-basic-hero-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "basic-hero [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @example scss
+///  @include ulu.component-basic-hero-styles();
+
+@mixin styles {
+  $prefix: selector.class("basic-hero");
+
+  #{ $prefix } {
+    background-color: color.get(get("background-color")); 
+  }
+  #{ $prefix }__content {
+    display: flex;
+    align-items: stretch;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: get("gap"); 
+    padding-top: get("padding-top");
+    padding-bottom: get("padding-bottom");
+  }
+  #{ $prefix }__content-main {
+    $min-width: if(get("main-min-width"), get("main-min-width"), get("main-max-width"));
+    // Using max/min-width so that we don't need to add selectors to change flex-basis
+    // when centered. Using flex-basis: 0 to allow flexbox to decide the items width
+    // allows it to expand/shrink within. min(100%... Never larger than parent
+    min-width: min(100%, $min-width); 
+    max-width: get("main-max-width");
+    flex-shrink: 1;
+    flex-grow: 1;
+    flex-basis: 0;
+  }
+  #{ $prefix }__content-media {
+    display: flex;
+    align-items: center;
+    align-self: get("media-vertical-align");
+    justify-content: center;
+    flex: 0 0 auto; 
+    width: min(100%, get("media-max-width"));
+  }
+
+  // Modifiers
+  #{ $prefix }--center {
+    #{ $prefix }__content {
+      flex-direction: column;
+      flex-wrap: nowrap;
+      text-align: center;
+      align-items: center;
+    }
+  }
+}