@ulu/frontend 0.1.0-beta.8 → 0.1.0-beta.81

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

@@ -3,6 +3,8 @@
 /// Outputs accordion component stylesheet, which can be used with <details> or custom disclosure components
 ////
 
+// Internal note: We don't require the content to be wrapped, this is so that this can be used on details elements outside of our control. So we use negative margins
+
 @use "sass:map";
 @use "sass:math";
 
@@ -39,11 +41,12 @@
 /// @prop {Dimension} summary-type-size  [false] The size of the text in the accordion summary. 
 /// @prop {Dimension} transparent-padding-y  [1em] The upper and lower padding of the transparent summary.
 /// @prop {Dimension} transparent-padding-x  [0] The upper and lower padding of the transparent summary.
+/// @prop {Dimension} borderless-margin-between  [0.5rem] Margin between accordions when using no-border modiifier
 
 $config: (
   "background-color":            "background",
-  "background-color-open":       "background-gray",
-  "border-color":                "rule",
+  "background-color-open":       white,
+  "border-color":                "rule-light",
   "border-radius":               0,
   "border-width":                1px,
   "box-shadow":                  none,
@@ -59,7 +62,7 @@ $config: (
   "icon-font-size":              1.5rem,
   "icon-size":                   auto,
   "icon-stroke-width":           0.15em,
-  "summary-background-color":    "white",
+  "summary-background-color":    #f6f6f6,
   "summary-color":               null,
   "summary-background-color-hover": null,
   "summary-color-hover":         null,
@@ -68,6 +71,7 @@ $config: (
   "summary-type-size":           false,
   "transparent-padding-x":       0,
   "transparent-padding-y":       1em,
+  "borderless-margin-between" :  0.5rem
 ) !default;
 
 /// Change modules $config
@@ -95,15 +99,16 @@ $config: (
 
 @mixin styles {
   $prefix: selector.class("accordion");
-
+  $padding-x: get("padding-x");
+  $padding-x-double: get("padding-x") * 2;
   $border: get("border-width") solid color.get(get("border-color"));
 
   // When not one of our custom classed details components
   #{ $prefix } {
     position: relative; // For active border
     border-radius: 0;
-    padding-left: get("padding-x");
-    padding-right: get("padding-x");
+    padding-left: $padding-x;
+    padding-right: $padding-x;
     margin-top: get("margin");
     margin-bottom: get("margin");
     border: $border;
@@ -120,7 +125,7 @@ $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  {
@@ -138,17 +143,18 @@ $config: (
   #{ $prefix }__summary {
     background-color: color.get(get("summary-background-color"));
     color: color.get(get("summary-color"));
-    margin-left: -(get("padding-x"));
-    margin-right: -(get("padding-x"));
+    margin-left: -($padding-x);
+    margin-right: -($padding-x);
     line-height: get("summary-line-height");
-    padding: get("summary-padding-y") get("padding-x");
+    padding: get("summary-padding-y") $padding-x;
     vertical-align: top;
     font-weight: bold;
     cursor: pointer;
+    align-items: center;
+    width: calc(100% + $padding-x-double); // To fix if using <button>
+ 
     &:has(#{ $prefix }__icon) {
-      display: flex; // For icon
-      align-items: center;
-      justify-content: space-between;
+      display: flex;
       list-style: none; // Remove the default arrow (old safari?)
       &::-webkit-details-marker,
       &::marker {
@@ -172,8 +178,8 @@ $config: (
   #{ $prefix }__icon {
     flex: 0 0 get("icon-size");
     color: color.get(get("icon-color"));
-    margin-left: 0.5em;
-    order: 3;
+    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");
@@ -194,6 +200,7 @@ $config: (
     > #{ $prefix }__summary {
       margin-left: -(get("transparent-padding-x"));
       margin-right: -(get("transparent-padding-x"));
+      width: 100%;
       padding: get("transparent-padding-y") get("transparent-padding-x");
       background-color: transparent;
       border: none;
@@ -207,11 +214,18 @@ $config: (
       }
     }
   }
-  #{ $prefix }--no-borders {
+  #{ $prefix }--borderless {
     border: none;
-    margin-bottom: 4rem;
-    &[open] > .accordion__summary {
-      border-bottom: none;
+    & + & {
+      $gap: -(get("margin") - get("borderless-margin-between"));
+      margin-top: $gap;
+      margin-top: calc($gap - get("border-width"));
+    }
+    &[open],
+    &.is-active {
+      & > .accordion__summary {
+        border-bottom: none;
+      }
     }
   }
 }

package/scss/components/_badge.scss

@@ -3,11 +3,21 @@
 /// Outputs badge component stylesheet
 ////
 
+@use "sass:meta";
 @use "sass:map";
 @use "../utils";
 @use "../selector";
+@use "../typography";
 @use "../color";
 
+// Used for function fallback
+$-fallbacks: (
+  "font-family" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "font-family-sans"
+  )
+);
+
 /// Module Settings
 /// @type Map
 /// @prop {Number} background-color [gray] Background color (if no image)
@@ -15,6 +25,7 @@
 /// @prop {Number} color [black] Type color
 /// @prop {Number} font-size [1.3rem] Font size (basic ie. 1.3rem) for badge
 /// @prop {Number} font-weight [bold] Font weight
+/// @prop {Number} font-family [true] Specify font family, defaults to typography font-family-sans
 /// @prop {List} sizes [Object] List of other sizes (large by default), each size is a map of (width, font-size) 
 /// @prop {Number} width [10rem] Width of badge (default size)
 
@@ -22,13 +33,18 @@ $config: (
   "background-color":    gray,
   "border-radius":       50%,
   "color":               black,
-  "font-size":           1.3rem,
+  "font-size":           1.5rem,
   "font-weight":         bold,
-  "width":               10rem,
+  "font-family":         true,
+  "width":               7rem,
   "sizes" : (
+    "small" : (
+      "font-size" : 1.2rem,
+      "width" :  5rem
+    ),
     "large" : (
       "font-size" : 2.75rem,
-      "width" :  6rem
+      "width" :  9rem
     )
   )
 ) !default;
@@ -48,7 +64,8 @@ $config: (
 ///   @include ulu.component-badge-get("property");
 
 @function get($name) {
-  @return utils.require-map-get($config, $name, "badge [config]");
+  $value: utils.require-map-get($config, $name, "badge [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
 }
 
 /// Output badge component styles
@@ -77,6 +94,7 @@ $config: (
     flex: 0 0 get("width");
     font-size: get("font-size");
     font-weight: get("font-weight");
+    font-family: get("font-family");
   }
   #{ $prefix }__inner {
     display: block;
@@ -118,6 +136,7 @@ $config: (
     width: 100%;
     height: 100%;
     object-fit: cover;
+    margin: 0 !important;
   }
 
   @each $name, $props in get("sizes") {

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;
+    }
+  }
+}

package/scss/components/_button-verbose.scss

@@ -9,6 +9,8 @@
 @use "../utils";
 @use "../color";
 @use "../element";
+@use "../selector";
+@use "../button";
 
 // Used for function fallback
 $-fallbacks: (
@@ -23,6 +25,14 @@ $-fallbacks: (
   "box-shadow-hover" : (
     "function" : meta.get-function("get", false, "element"),
     "property" : "box-shadow-hover"
+  ),
+  "border-color" : (
+    "function" : meta.get-function("get", false, "button"),
+    "property" : "border-color"
+  ),
+  "border-width" : (
+    "function" : meta.get-function("get", false, "button"),
+    "property" : "border-width"
   )
 );
 
@@ -31,11 +41,14 @@ $-fallbacks: (
 /// @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 {String} border-width [null] Border width (or set to true to inherit button border width default)
+/// @prop {String} border-color [null] Border color (or set to true to inherit button border width default)
 /// @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 {Color} icon-color-hover [null] Optional color for icon when hovered
 /// @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.
@@ -46,26 +59,44 @@ $-fallbacks: (
 /// @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.
+/// @prop {Boolean} cap [false] Enable left cap style 
+/// @prop {Color} cap-side ["left"] The side that gets the cap
+/// @prop {Number} cap-match-radius [true] The cap should have be rounded to match the parent's border radius
+/// @prop {Map} cap-options The options for cap (see element.cap for options)
+/// @prop {Map} cap-options-hover The options for cap when hovered
 
 $config: (
   "background-color" : white,
-  "background-color-hover" : "link",
-  "border-radius" : "border-radius",
+  "background-color-hover" : #F7F8F7,
+  "border-radius" : true,
+  "border-color" : null,
+  "border-width" : null,
   "box-shadow" : true,
   "box-shadow-hover" : true,
   "color" : "type",
   "color-hover" : "type",
   "icon-color": gray,
+  "icon-color-hover": null,
   "icon-font-size" : 1.25rem,
   "line-height" : 1.2,
   "margin" : 1em,
   "margin-inline" : 0.75em,
   "min-width": 20rem,
-  "padding-x": 0.65em,
+  "padding-x": 0.75em,
   "padding-y": 1em,
   "title-color": "link",
   "title-margin" : 0.5em,
   "title-color-hover" : "link-hover",
+  "cap" : false,
+  "cap-side" : "left",
+  "cap-match-radius" : true,
+  "cap-options" : (
+    "color" : "link",
+    "size" : 0.5rem,
+  ),
+  "cap-options-hover" : (
+    "color" : "link-hover"
+  ),
 ) !default;
 
 /// Change modules $config
@@ -89,50 +120,101 @@ $config: (
 
 /// Prints component styles
 /// @example scss
-///  @include ulu.component-button-verbose-styles();
+///   @include ulu.component-button-verbose-styles();
+/// @example html {preview} - Basic Example
+///   <a href="#" class="button-verbose">
+///     <strong class="button-verbose__title">Example Link</strong>
+///     <span class="button-verbose__body">This is the body</span>
+///     <span class="button-verbose__icon fas fa-arrow-right" aria-hidden="true"></span>
+///   </a>
 
 @mixin styles {
-  .button-verbose {
+  $prefix: selector.class("button-verbose");
+  $padding-x: get("padding-x");
+  $padding-y: get("padding-y");
+  $padding-right: ($padding-x * 2) + 1em;
+  $cap-side: get("cap-side");
+  $cap-defaults: (
+    "offset" : utils.if-type("number", get("border-width"), 0),
+    "border-radius" : if(get("cap-match-radius"), get("border-radius"), 0),
+    "padding-adjust" : if(utils.is-side($cap-side), $padding-x, $padding-y)
+  );
+  
+  #{ $prefix } {
+    position: relative; // For cap and icon
+    display: block;
     text-decoration: none;
-    border-radius: element.get(get("border-radius"));
+    border-radius: get("border-radius");
+    @if (get("border-width")) {
+      border: get("border-width") solid color.get(get("border-color"));
+    }
     box-shadow: get("box-shadow");
     line-height: get("line-height");
-    position: relative;
-    display: block;
     margin-bottom: get("margin");
     max-width: 100%;
     width: get("min-width");
     background-color: color.get(get("background-color"));
-    padding: get("padding-y") get("padding-x");
-    padding-right: (get("padding-x") * 2) + 1em;
+    padding: $padding-y $padding-right $padding-y $padding-x;
     color: color.get(get("color"));
+    text-align: left;
+
     &:hover {
       color: color.get(get("color-hover"));
       background-color: color.get(get("background-color-hover"));
       box-shadow: get("box-shadow-hover");
-      .button-verbose__title  {
-        color: color.get(get("title-color-hover"));
+      @if get("title-color-hover") {
+        #{ $prefix }__title  {
+          color: color.get(get("title-color-hover"));
+        }
+      }
+      @if get("icon-color-hover") {
+        #{ $prefix }__icon  {
+          color: color.get(get("icon-color-hover"));
+        }
+      }
+    }
+    @if get("cap") {
+      @include element.cap(
+        $side: $cap-side,
+        $options: map.merge($cap-defaults, get("cap-options"))
+      );
+      @if get("cap-options-hover") {
+        &:hover,
+        &:focus {
+          @include element.cap-appearance(
+            $side: $cap-side,
+            $options: get("cap-options-hover")
+          );
+        }
       }
     }
   }
-  .button-verbose__title {
+  #{ $prefix }__title,
+  #{ $prefix }__body {
     display: block;
-    margin-bottom: get("title-margin");
+    &:first-child {
+      margin-bottom: get("title-margin");
+    }
+  }
+  #{ $prefix }__title {
     color: color.get(get("title-color"));
   }
-  .button-verbose__icon {
+  #{ $prefix }__icon {
     position: absolute;
     top: 50%;
-    right: get("padding-x");
+    right: $padding-x;
     transform: translateY(-50%);
     font-size: get("icon-font-size");
     color: color.get(get("icon-color"));
   }
-  .button-verbose--inline {
+  #{ $prefix }--inline {
     display: inline-block;
     margin-right: get("margin-inline");
+    &:last-child {
+      margin-right: 0;
+    }
   }
-  .button-verbose--full-width {
+  #{ $prefix }--full-width {
     width: 100%;
   }
 }