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

package/scss/components/_card.scss

@@ -9,6 +9,8 @@
 @use "../breakpoint";
 @use "../utils";
 @use "../selector";
+@use "../color";
+@use "../layout";
 
 // todo
 // sass color adjust for smooth transition. Add a comment for this if we can’t get to this
@@ -18,7 +20,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 +30,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 +58,18 @@
 /// @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
+/// @prop {Boolean} aside-rule [false] Whether or not to have a rule separating body and aside
+/// @prop {CssUnit} aside-rule-width [1px] Size of rule
+/// @prop {CssUnit} aside-rule-color ["rule-light"] Color of rule
+/// @prop {CssUnit} aside-rule-background-color [transparent] Color of aside background color
 
 $config: (
   "background-color" : white,
@@ -78,18 +88,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" : 40rem,
+  "horizontal-min-height" : 20rem,
+  "horizontal-max-width" : 80rem,
   "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 +126,12 @@ $config: (
   "overlay-background-color": rgba(0, 0, 0, 0.6),
   "overlay-shading": true,
   "overlay-body-padding-y": 1rem,
-  ) !default;
+  // new below
+  "aside-rule" : false,
+  "aside-rule-width" : 1px,
+  "aside-background-color" : transparent,
+  "aside-rule-color": "rule-light",
+) !default;
   
   /// Change modules $config
 /// @param {Map} $changes Map of changes
@@ -137,19 +159,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 +204,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 +215,30 @@ $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 {
+      @include layout.absolute-fill();
+      content: if(get("border"), "", null);
+      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 {
+      &::after {
         content: "";
         border: get("border-hover");
-        background-color: get("overlay-background-color-hover");
+        background-color: color.get(get("overlay-background-color-hover"));
       }
     }
   }
@@ -222,24 +255,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 +291,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");
@@ -265,11 +299,7 @@ $config: (
   }
   #{ $prefix }__image img,
   #{ $prefix}__image-media {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    @include layout.absolute-fill(true);
     border: 0;
     object-fit: cover;
     transform-origin: center center;
@@ -288,21 +318,28 @@ $config: (
       }
     }
   }
-  #{ $prefix }__body,
-  #{ $prefix }__footer,
-  #{ $prefix }__image--icon {
+
+  #{ $prefix }__footer {
+    padding: get("padding");
+  }
+  #{ $prefix }__main {
+    padding: get("padding");
+  }
+  #{ $prefix }__aside {
+    position: relative;
     padding: get("padding");
   }
 
   #{ $prefix }__image--icon {
-    background-color: transparent; 
+    // background-color: transparent; 
     display: flex;
     align-items: center;
     justify-content: center;
+    // padding: 2rem;
     img {
       position: static;
       display: block;
-      max-width: 30rem;
+      max-width: get("image-icon-max-width");
       height: auto;
       top: auto;
       left: auto;
@@ -314,9 +351,25 @@ $config: (
     z-index: 2; // Above image
   }
   #{ $prefix }__body {
+    display: flex;
+    flex-direction: column;
     flex-grow: 1;
     min-height: get("body-min-height");
   }
+  @if(get("aside-rule")) {
+    #{ $prefix }__aside {
+      background-color: color.get(get("aside-background-color"));
+    }
+    #{ $prefix }__aside::after {
+      content: "";
+      position: absolute;
+      top: calc(0rem - get("aside-rule-width") / 2);
+      left: get("padding");
+      right: get("padding");
+      height: get("aside-rule-width");
+      background-color: color.get(get("aside-rule-color"));
+    }
+  }
   // For actions/messages
   // - Layout as flex with min height to support buttons 
   //   and text without relying so much on padding
@@ -340,11 +393,17 @@ $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,21 +418,26 @@ $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;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
+      @include layout.absolute-fill();
       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 {      
@@ -384,40 +448,149 @@ $config: (
         border: 0;
         object-fit: cover;
         &::before {
-          position: absolute;
+          @include layout.absolute-fill(true);
           display: block;
-          top: 0;
-          bottom: 0;
-          left: 0;
-          right: 0;
           background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.9));
         }
       }
     }
   }
 
+  // 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");
+      }
+    }
+  }
+  #{ $prefix }--fill {
+    max-width: none;
+    height: 100%;
+    margin: 0;
+  }
+
   @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");
+
+    // When no footer remove extra row
+    &:not(:has(> #{ $prefix }__footer)) {
+      grid-template-rows: auto;
+    }
+    #{ $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 {
+      flex-direction: row;
+      max-width: get("horizontal-body-max-width");
+    }
+    
+    @if(get("aside-rule")) {
+      #{ $prefix }__main {
+        flex: 1 1 60%;
+      }
+      #{ $prefix }__aside {
+        flex: 1 1 40%;
+        height: 100%;
+        // flex-basis: 40%;
+        // min-width: 40%;
       }
+      #{ $prefix }__aside::after {
+        content: "";
+        position: absolute;
+        top: get("padding");
+        left: calc(0rem - get("aside-rule-width") / 2);
+        height: calc(100% - get("padding") - get("padding"));
+        width: get("aside-rule-width");
+        background-color: get("aside-rule-color");
+      }
+    }
+
+    // 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();
+    }
+  }
+  #{ $prefix }--horizontal-center {
+    #{ $prefix }__body {
+      align-self: center;
     }
   }
 }
 
+@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");
+  //   }
+  // }
+

package/scss/components/_counter-list.scss

@@ -0,0 +1,133 @@
+////
+/// @group counter-list
+/// Outputs a styled list with counters
+
+@use "sass:map";
+@use "../utils";
+@use "../selector";
+@use "../color";
+@use "../breakpoint";
+
+/// Module Settings
+/// @type Map
+/// @prop {List} margin [(2rem 0)] The top and bottom margin of the list.
+/// @prop {List} item-margin [(0, 0, 1rem, 0)] The margin applied to each list item.
+/// @prop {Keyword} align-items [baseline] How to align the counter (flexbox align-items values)
+/// @prop {Length} counter-width [2.4em] The width and height (if height is falsy)
+/// @prop {Length} counter-height [null] The height (optional)
+/// @prop {Length} counter-gap [1em] The gap between the counter and the list item content.
+/// @prop {String} counter-style [numeric] The list-style-type used for the counter.
+/// @prop {Keyword|Percentage} counter-border-radius [50%] The border-radius of the counter element.
+/// @prop {Length} counter-font-size [1.2em] The font-size of the counter text.
+/// @prop {String} counter-color [white] The text color of the counter. Accepts color names or hex codes.
+/// @prop {String} counter-background-color ["accent"] The background color of the counter. Refers to a color in the color module.
+
+$config: (
+  "margin" : (2rem 0),
+  "item-margin" : (0, 0, 1rem, 0),
+  "align-items" : baseline, 
+  "counter-width" : 2.4em,
+  "counter-height" : null,
+  "counter-gap" : 1em,
+  "counter-style" : numeric,
+  "counter-border-radius" : 50%,
+  "counter-font-size" : 1.2em,
+  "counter-color" : white,
+  "counter-background-color" : "accent",
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-counter-list-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-counter-list-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "counter-list [config]");
+}
+
+/// Output counter-list component styles
+/// @demo counter-list
+/// @example html {preview}
+///   <ol class="counter-list">
+///     <li class="counter-list__item">This is a item that will get counted</li>
+///     <li class="counter-list__item">Another item that has more content to show line wrapping. Lorem ipsum et depsi anu. Dolor et anu.</li>
+///     <li class="counter-list__item">Small Amount of Text</li>
+///   </ol>
+
+@mixin styles {
+  $prefix: selector.class("counter-list");
+  $width: get("counter-width");
+  $height: utils.fallback(get("counter-height"), $width);
+
+  #{ $prefix } {
+    margin: get("margin");
+    counter-reset: ulu-counter-list;
+
+    & > li,
+    & > #{ $prefix }__item {
+      display: flex;
+      gap: get("counter-gap");
+      align-items: get("align-items");
+      margin: get("item-margin");
+      min-height: $height;
+      &::before {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: $width;
+        height: $height;
+        flex: 0 0 $width;
+        counter-increment: ulu-counter-list;
+        content: counter(ulu-counter-list, get("counter-style"));
+        font-size: get("counter-font-size");
+        color: color.get(get("counter-color"));
+        background-color: color.get(get("counter-background-color"));
+        border-radius: get("counter-border-radius");
+      }
+
+      // Keeping this could be useful
+      // but we need to think about how its setup
+      // - Probably should be a modifier (choice)
+      // - May need either option for how align-items is set (flex-start vs center)
+      // - This could be useful when used in grid
+      // - May need to be pervasive and not linked to a breakpoint (alternate style)
+      // - It's also just useful to know you could override the layout like this 
+      //   to get useful variations (maybe we don't need to include it but users 
+      //   can do specific)
+      // @if ( get("counter-mobile-toggle") ) {
+      //   @include breakpoint.max("small") {
+      //     padding-left: 0;
+      //     padding-top: calc(get("counter-width") + get("counter-gap-mobile"));
+      //     flex-direction: column;
+      //     align-items: center;
+      //   }
+      // }
+    }
+  }
+
+  // Modifiers
+  #{ $prefix }--alphabetical {
+    & > li::before,
+    & > #{ $prefix }__item::before {
+      content: counter(ulu-counter-list, upper-alpha);
+    }
+  }
+  #{ $prefix }--numeric {
+    & > li::before,
+    & > #{ $prefix }__item::before {
+      content: counter(ulu-counter-list, numeric);
+    }
+  }
+  #{ $prefix }--no-reset {
+    counter-reset: none;
+  }
+}