@ulu/frontend 0.1.0-beta.3 → 0.1.0-beta.31

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,58 +35,41 @@ $-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
@@ -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();
+        }
       }
     }
   }

package/scss/components/_captioned-figure.scss

@@ -10,6 +10,7 @@
 @use "../utils";
 @use "../element";
 @use "../typography";
+@use "../color";
 
 // Used for function fallback
 $-fallbacks: (
@@ -29,6 +30,23 @@ $-fallbacks: (
 
 /// Module Settings
 /// @type Map
+/// @prop {Boolean} text-alignment-matches [false] Toggles matching alignment.
+/// @prop {Boolean} text-alignment-matches-center-only [true] Toggles matching alignment, but only if center.
+/// @prop {Color} background-color [white] Background color of the component.
+/// @prop {CssValue} box-shadow [true] Box shadow the captioned figure.
+/// @prop {Dimension} margin-bottom [true] Bottom margin of the captioned figure.
+/// @prop {Number} line-height [true] Line height of the captioned figure caption.
+/// @prop {Dimension} caption-padding [0.5em] Padding of the captioned figure caption. 
+/// @prop {Color} color [null] Font color of the captioned figure caption. 
+/// @prop {String} type-size ["small"] Font size of the captioned figure caption. 
+/// @prop {Dimension} caption-max-width [min(100%, 15em)] Max width of the captioned figure caption. 
+/// @prop {Color} caption-background-color [rgba(255,255,255,0.7)] background color of the captioned figure caption. 
+/// @prop {CssValue} caption-backdrop-filter [blur(2px)] Filter of the backdrop of the captioned figure.
+/// @prop {Color} traditional-caption-color [null] Traditional style for font color.
+/// @prop {Color} traditional-caption-background-color [transparent] Traditional style for caption background color.
+/// @prop {Dimension} traditional-caption-padding [0.5em] Traditional style for caption padding.
+/// @prop {Dimension} traditional-caption-max-width [35em] Traditional style for caption max width.
+/// @prop {CssValue} traditional-caption-text-align [right] Traditional style for caption text-align.
 
 $config: (
   "text-alignment-matches" : false,
@@ -82,7 +100,7 @@ $config: (
     display: block;
     position: relative;
     margin-bottom: get("margin-bottom");
-    background-color: get("background-color");
+    background-color: color.get(get("background-color"));
     > img {
       width: 100%;
       height: auto;
@@ -101,20 +119,20 @@ $config: (
   }
   #{ $prefix }__caption {
     position: absolute;
-    color: get("color");
+    color: color.get(get("color"));
     @include typography.size(get("type-size"), $only-font-size: true);
     line-height: get("line-height");
     max-width: get("caption-max-width");
-    background-color: get("caption-background-color");
+    background-color: color.get(get("caption-background-color"));
     padding: get("caption-padding");
     backdrop-filter: get("caption-backdrop-filter");
   }
   #{ $prefix }--traditional {
     #{ $prefix }__caption {
       position: static;
-      color: get("traditional-caption-color");
+      color: color.get(get("traditional-caption-color"));
       max-width: get("traditional-caption-max-width");
-      background-color: get("traditional-caption-background-color");
+      background-color: color.get(get("traditional-caption-background-color"));
       padding: get("traditional-caption-padding");
       text-align: get("traditional-caption-text-align");
       @if (get("traditional-caption-text-align") == right) {

package/scss/components/_card-grid.scss

@@ -51,7 +51,7 @@ $config: (
   
   #{ $prefix } {
     display: grid;
-    grid-template-columns:  get("template-columns");
+    grid-template-columns: get("template-columns");
     grid-auto-rows: 1fr;
     gap: get("gap");
     margin: get("gap") 0;

package/scss/components/_card.scss

@@ -9,6 +9,7 @@
 @use "../breakpoint";
 @use "../utils";
 @use "../selector";
+@use "../color";
 
 // todo
 // sass color adjust for smooth transition. Add a comment for this if we can’t get to this
@@ -18,7 +19,6 @@
 /// @prop {Dimension} padding [2rem] The padding for the image icon
 /// @prop {Dimension} margin-y [3rem] Top and bottom margin for the card.
 /// @prop {Dimension} border-radius [5rem] The border radius of the card.
-/// @prop {String} horizontal-breakpoint [small] The breakpoint used to change the card to vertical if using the card--horizontal styling. Uses ulu's breakpoint module.
 /// @prop {CssValue} box-shadow [null] The box-shadow for the card.
 /// @prop {CssValue} box-shadow-hover [null] The box-shadow for the card when hovered or focused.
 /// @prop {Color} color [null] The type color of the card.
@@ -29,7 +29,7 @@
 /// @prop {Color} background-color [white] The background color of the card.
 /// @prop {Color} background-color-hover [rgb(242, 244, 246)] The background color of the card when hovered or focused.
 /// @prop {Dimension} max-width [28rem] The max-width of the card.
-/// @prop {Dimension} body-min-height [10rem] the min-height of the card body.
+/// @prop {Dimension} body-min-height [8rem] the min-height of the card body.
 /// @prop {CssValue} border [1px solid #ccc] The card border.
 /// @prop {CssValue} border-hover [2px solid #278cca] The card border when hovered or focused.
 /// @prop {Dimension} header-margin [0.75em] The margin for the card header.
@@ -57,9 +57,14 @@
 /// @prop {Boolean} image-transition-enabled [true] Enable or disable the image transition.
 /// @prop {Time} image-transition-duration [350ms] The duration of the image transition.
 /// @prop {CssValue} image-transition-timing-function [ease-in-out] The timing function for the image transition.
+/// @prop {Number} image-fit-padding [1rem] Padding on inside of image when using image fit modifier
+/// @prop {CssValue} image-fit-filter [drop-shadow(0 0px 8px rgba(0, 0, 0, 0.2))] Filter to use on image when using image fit modifier
+/// @prop {List} image-icon-max-width [10rem] Max width for image when using the modifier on the .card__image--icon
 /// @prop {List} image-transition-properties [(transform, filter)] The properties for the image transitions.
-
-
+/// @prop {String} horizontal-breakpoint [small] The breakpoint used to change the card to vertical if using the card--horizontal styling. Uses ulu's breakpoint module.
+/// @prop {Unit} horizontal-min-height [10rem] Minimum height when horizontal
+/// @prop {Unit} horizontal-max-width [40rem] Maximum width when horizontal
+/// @prop {Unit} horizontal-body-max-width [80rem] The max-width of body when horizontal
 
 $config: (
   "background-color" : white,
@@ -78,18 +83,25 @@ $config: (
   "footer-padding-y" : 0.25rem,
   "footer-min-height" : 2.5rem,
   "horizontal-breakpoint" : "small",
+  "horizontal-image-width" : min(33%, 20rem),
+  "horizontal-body-max-width" : 80rem,
+  "horizontal-min-height" : 10rem,
+  "horizontal-max-width" : 40rem,
   "header-margin" : 0.75em,
   "image-ratio" : 56.25%,
   "image-aspect-ratio": list.slash(5, 3),
-  "image-background-color" : rgb(197, 197, 197),
+  "image-background-color" : rgb(238, 238, 238),
   "image-border" : null, // For when you have a margin
   "image-filter-hover" : null,
   "image-margin" : null,
+  "image-icon-max-width" : 8rem,
   "image-transform-hover" : null,
   "image-transition-duration" :    350ms,
   "image-transition-enabled" : true,
   "image-transition-properties" : (transform, filter),
   "image-transition-timing-function" : ease-in-out,
+  "image-fit-padding" : 1rem,
+  "image-fit-filter" : drop-shadow(0 0px 8px rgba(0, 0, 0, 0.3)),
   "margin-y" : 3rem,
   "max-width" : 28rem,
   "padding" : 2rem,
@@ -109,7 +121,7 @@ $config: (
   "overlay-background-color": rgba(0, 0, 0, 0.6),
   "overlay-shading": true,
   "overlay-body-padding-y": 1rem,
-  ) !default;
+) !default;
   
   /// Change modules $config
 /// @param {Map} $changes Map of changes
@@ -137,19 +149,34 @@ $config: (
 
 @mixin when-clickable($hover: false) {
   $prefix: selector.class("card");
+  // When proxy click enabled
   @if (get("clickable-card-enabled") and get("clickable-card-selector")) {
-    #{ $prefix } {
-      &#{ get("clickable-card-selector") } {
-        @if ($hover) {
-          #{ get("clickable-card-interact-selector") } {
-            @content;
-          }
-        } @else {
+    #{ $prefix }#{ get("clickable-card-selector") },
+    a#{ $prefix },
+    button#{ $prefix },
+    #{ $prefix }--clickable {
+      @if ($hover) {
+        #{ get("clickable-card-interact-selector") } {
           @content;
         }
+      } @else {
+        @content;
       }
     }
-  }
+  // Without proxy click (only if interactive)
+  } @else {
+    a#{ $prefix },
+    button#{ $prefix },
+    #{ $prefix }--clickable {
+      @if ($hover) {
+        #{ get("clickable-card-interact-selector") } {
+          @content;
+        }
+      } @else {
+        @content;
+      }
+    }
+  } 
 }
 
 
@@ -167,8 +194,8 @@ $config: (
   $prefix: selector.class("card");
 
   #{ $prefix } {
-    color: get("color");
-    background-color: get("background-color");
+    color: color.get(get("color"));
+    background-color: color.get(get("background-color"));
     border-radius: get("border-radius");
     box-shadow: get("box-shadow");
     margin-top: get("margin-y");
@@ -178,34 +205,34 @@ $config: (
     flex-direction: column;
     justify-content: flex-end;
     max-width: get("max-width");
-  }
-  @if (get("border") or get("border-hover") or get("overlay-background-color-hover")) {
-    @include when-clickable($hover: false) {
-      &:after {
-        position: absolute;
-        content: if(get("border"), "", false);
-        top: 0; 
-        bottom: 0; 
-        right: 0; 
-        left: 0;
-        border: get("border");
-        border-radius: get("border-radius");
-        z-index: 4;
-        pointer-events: none;
-      }
+    // Not absolutely necessary, incase we want to remove in future
+    overflow: hidden; 
+
+    // Border is on pseudo so that it's on top of image/etc
+    &:after {
+      position: absolute;
+      content: if(get("border"), "", null);
+      top: 0; 
+      bottom: 0; 
+      right: 0; 
+      left: 0;
+      border: get("border");
+      border-radius: get("border-radius");
+      z-index: 4;
+      pointer-events: none;
     }
   }
 
   @include when-clickable($hover: true) {
-    background-color: get("background-color-hover");
-    color: get("color-hover");
+    background-color: color.get(get("background-color-hover"));
+    color: color.get(get("color-hover"));
     box-shadow: get("box-shadow-hover");
     
     @if (get("border-hover") or get("overlay-background-color-hover")) {
       &:after {
         content: "";
         border: get("border-hover");
-        background-color: get("overlay-background-color-hover");
+        background-color: color.get(get("overlay-background-color-hover"));
       }
     }
   }
@@ -222,24 +249,25 @@ $config: (
   } 
 
   #{ $prefix }__title {
-    color: get("title-color");
+    color: color.get(get("title-color"));
     margin-bottom: get("title-margin");
     display: block;
     font-weight: get("title-font-weight");
-    @if get("title-color-hover") {
-      &:hover,
-      &:focus {
-        color: get("title-color-hover");
-      }
-    }
     #{ $prefix }__title-link {
       all: unset;
+      cursor: pointer;
+      @if get("title-color-hover") {
+        &:hover,
+        &:focus {
+          color: color.get(get("title-color-hover"));
+        }
+      }
     }
   }
   @if get("title-color-hover") {
     @include when-clickable($hover: true) {
       #{ $prefix }__title {
-        color: get("title-color-hover");
+        color: color.get(get("title-color-hover"));
       }
     }
   }
@@ -257,7 +285,7 @@ $config: (
     // padding-top: get("image-ratio"); // 9:16
     margin: get("image-margin");
     border: get("image-border");
-    background-color: get("image-background-color");
+    background-color: color.get(get("image-background-color"));
     border-top-right-radius: get("border-radius");
     border-top-left-radius: get("border-radius");
     aspect-ratio: get("image-aspect-ratio");
@@ -295,14 +323,14 @@ $config: (
   }
 
   #{ $prefix }__image--icon {
-    background-color: transparent; 
+    // background-color: transparent; 
     display: flex;
     align-items: center;
     justify-content: center;
     img {
       position: static;
       display: block;
-      max-width: 30rem;
+      max-width: get("image-icon-max-width");
       height: auto;
       top: auto;
       left: auto;
@@ -340,11 +368,15 @@ $config: (
       position: relative;
       flex-grow: 0;
       z-index: 2;
-      color: get("color-overlay");
-      background-color: get("overlay-background-color");
+      color: color.get(get("color-overlay"));
+      background-color: color.get(get("overlay-background-color"));
       min-height: 0;
       padding-top: get("overlay-body-padding-y");
       padding-bottom: get("overlay-body-padding-y");
+      &:not(:has(~ #{ $prefix }__footer)) {
+        border-bottom-left-radius: get("border-radius");
+        border-bottom-right-radius: get("border-radius");
+      }
       @if (get("overlay-shading")) {
         margin-top: 4rem;
         &::before {
@@ -359,11 +391,20 @@ $config: (
       }
     }
     #{ $prefix }__footer {
-      background-color: get("overlay-background-color");
-      color: get("color-overlay");
+      background-color: color.get(get("overlay-background-color"));
+      color: color.get(get("color-overlay"));
+      border-bottom-left-radius: get("border-radius");
+      border-bottom-right-radius: get("border-radius");
+    }
+    #{ $prefix }__body,
+    #{ $prefix }__footer {
+      &:last-child {
+        border-bottom-left-radius: get("border-radius");
+        border-bottom-right-radius: get("border-radius");
+      }
     }
     #{ $prefix }__title {
-      color: get("color-overlay");
+      color: color.get(get("color-overlay"));
     }
     #{ $prefix }__image {
       position: absolute;
@@ -373,7 +414,7 @@ $config: (
       right: 0;
       overflow: hidden;
       padding-top: 0;
-      background-color: rgb(255, 255, 255);
+      background-color: color.get(rgb(255, 255, 255));
       border-radius: get("border-radius");
       aspect-ratio: auto;
       img {      
@@ -396,28 +437,107 @@ $config: (
     }
   }
 
+  // Incase this modifier is being used to hide the image
+  // not just to tell the component how to layout without image
+  // - Use case is hiding image when you can't control the output 
+  //   of the inside of the card (printed no matter what). We had
+  //   this happen in HHRC, including this extra CSS for that
+  #{ $prefix }--no-image {
+    #{ $prefix }__image {
+      display: none;
+    }
+  }
+  #{ $prefix }--image-fit {
+    #{ $prefix }__image {
+      img {
+        padding: get("image-fit-padding");
+        object-fit: contain;
+        object-position: top center;
+        filter: get("image-fit-filter");
+      }
+    }
+  }
+
   @if (get("horizontal-breakpoint")) {
     @include breakpoint.min(get("horizontal-breakpoint")) {
-      #{ $prefix }--horizontal {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        #{ $prefix }__image {
-          width: 33%;
-          flex: 0 1 33%;
-          // max-width: 30rem;
-          min-height: 28rem;
-          // padding-top: 0;
-        }
-        #{ $prefix }__body {
-          display: flex;
-          flex: 1;
-          flex-direction: column;
-          justify-content: center;
-          max-width: 80rem;
-        }
-      }
+      @include -horizontal-card-styles();
     }
+  } @else {
+    @include -horizontal-card-styles();
   }
 }
 
+@mixin -horizontal-card-styles() {
+  $prefix: selector.class("card");
+
+  #{ $prefix }--horizontal {
+    display: grid;
+    grid-template-columns: get("horizontal-image-width") 1fr;
+    // Creating the two rows (body and footer), if one is missing it's height will be 0
+    // Cannot use gap with the grid as it will create space when a row isn't needed
+    grid-template-rows: auto auto;
+    min-height: get("horizontal-min-height");
+    max-width: get("horizontal-max-width");
+    #{ $prefix }__image {
+      grid-column: 1 / 2;
+      grid-row: 1 / -1;
+      aspect-ratio: auto;
+      border-top-right-radius: 0;
+      border-bottom-left-radius: get("border-radius");
+    }
+    #{ $prefix }__body,
+    #{ $prefix }__footer {
+      grid-column: 2 / 3;
+    }
+    #{ $prefix }__body {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      max-width: get("horizontal-body-max-width");
+    }
+
+    // For modern browsers
+    // Optionally use no-image modifier for older browser support
+    &:not(:has(#{ $prefix }__image)) {
+      @include -card-horizontal-no-image-styles();
+    }
+    &#{ $prefix }--no-image {
+      @include -card-horizontal-no-image-styles();
+    }
+  }
+}
+
+@mixin -card-horizontal-no-image-styles() {
+  $prefix: selector.class("card");
+  grid-template-columns: 1fr;
+  #{ $prefix }__body,
+  #{ $prefix }__footer {
+    grid-column: 1 / 2;
+  }
+}
+
+// OLD CSS FOR HORIZONTAL
+  // #{ $prefix }--horizontal {
+  //   display: flex;
+  //   flex-direction: row;
+  //   justify-content: center;
+  //   align-items: center;
+  //   #{ $prefix }__image {
+  //     align-self: stretch;
+  //     border-top-right-radius: 0;
+  //     border-bottom-left-radius: get("border-radius");
+  //     width: get("horizontal-image-width");
+  //     flex: 0 0 get("horizontal-image-width");
+  //     // max-width: 30rem;
+  //     // min-height: 28rem;
+  //     // padding-top: 0;
+  //   }
+  //   #{ $prefix }__body {
+  //     display: flex;
+  //     flex: 1;
+  //     flex-direction: column;
+  //     justify-content: center;
+  //     max-width: get("horizontal-body-max-width");
+  //   }
+  // }
+