@ulu/frontend 0.1.0-beta.27 → 0.1.0-beta.29

package/docs-dev/sass/helpers/utilities/index.html

@@ -196,6 +196,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/button-verbose/">
+          
+    
+    <span class="nav-tree__text">
+      Button Verbose
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/callout/">
@@ -228,11 +243,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card
+      Card Grid
     </span>
   
         </a>
@@ -243,11 +258,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card New
     </span>
   
         </a>
@@ -2667,6 +2682,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/button-verbose/">
+          
+    
+    <span class="nav-tree__text">
+      Button Verbose
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/callout/">
@@ -2699,11 +2729,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card
+      Card Grid
     </span>
   
         </a>
@@ -2714,11 +2744,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card New
     </span>
   
         </a>

package/docs-dev/sass/index.html

@@ -196,6 +196,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/button-verbose/">
+          
+    
+    <span class="nav-tree__text">
+      Button Verbose
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/callout/">
@@ -228,11 +243,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card
+      Card Grid
     </span>
   
         </a>
@@ -243,11 +258,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card New
     </span>
   
         </a>
@@ -2667,6 +2682,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/button-verbose/">
+          
+    
+    <span class="nav-tree__text">
+      Button Verbose
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/callout/">
@@ -2699,11 +2729,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card
+      Card Grid
     </span>
   
         </a>
@@ -2714,11 +2744,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card New
     </span>
   
         </a>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.27", 
+  "version": "0.1.0-beta.29",
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",
@@ -31,7 +31,8 @@
     "docs:assets": "vite --config docs.vite.config.js --force",
     "docs:assets:build": "vite build --config docs.vite.config.js",
     "docs:assets:build:prod": "IS_PRODUCTION=true vite build --config docs.vite.config.js",
-    "deploy" : "npm run build && npm run types && npm run docs:build:prod && npm run docs:assets:build:prod"
+    "deploy": "npm run build && npm run types && npm run docs:build:prod && npm run docs:assets:build:prod",
+    "deploy:docs": "npm run docs:build:prod && npm run docs:assets:build:prod"
   },
   "repository": {
     "type": "git",
@@ -67,6 +68,7 @@
     "@ulu/vitepress-auto-menus": "^0.0.3",
     "@ulu/vitepress-sassdoc": "^0.0.9",
     "algoliasearch": "^4.23.3",
+    "autoprefixer": "^10.4.16",
     "chokidar": "^3.6.0",
     "eleventy-plugin-nesting-toc": "^1.3.0",
     "fs-extra": "^11.2.0",
@@ -79,14 +81,14 @@
     "sass-embedded": "^1.81.0",
     "sharp": "^0.33.4",
     "svgo": "^3.3.2",
+    "twig": "^1.17.1",
     "typescript": "^5.3.3",
-    "autoprefixer": "^10.4.16",
     "vite": "^5.4.11"
   },
   "dependencies": {
-    "@ulu/utils": "^0.0.17",
+    "@floating-ui/dom": "^1.6.5",
+    "@ulu/utils": "^0.0.20",
     "ally.js": "^1.4.1",
-    "aria-tablist": "^1.2.2",
-    "@floating-ui/dom": "^1.6.5"
+    "aria-tablist": "^1.2.2"
   }
 }

package/scss/components/_button-verbose.scss

@@ -9,6 +9,7 @@
 @use "../utils";
 @use "../color";
 @use "../element";
+@use "../selector";
 
 // Used for function fallback
 $-fallbacks: (
@@ -36,6 +37,7 @@ $-fallbacks: (
 /// @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,16 +48,21 @@ $-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} left-cap [false] Enable left cap style 
+/// @prop {Color} left-cap-color ["link"] The color for the left cap
+/// @prop {color} left-cap-color-hover ["link-hover"] The color for the left cap when the button is hovered
+/// @prop {Number} left-cap-color-hover [0.5rem] Width of the cap
 
 $config: (
   "background-color" : white,
-  "background-color-hover" : "link",
+  "background-color-hover" : #F7F8F7,
   "border-radius" : "border-radius",
   "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,
@@ -66,6 +73,10 @@ $config: (
   "title-color": "link",
   "title-margin" : 0.5em,
   "title-color-hover" : "link-hover",
+  "left-cap" : true,
+  "left-cap-color" : "link",
+  "left-cap-color-hover" : "link-hover",
+  "left-cap-width" : 0.5rem
 ) !default;
 
 /// Change modules $config
@@ -89,10 +100,18 @@ $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>
+///     This is the body
+///     <span class="button-verbose__icon fas fa-arrow-right" aria-hidden="true"></span>
+///   </a>
 
 @mixin styles {
-  .button-verbose {
+  $prefix: selector.class("button-verbose");
+  
+  #{ $prefix } {
     text-decoration: none;
     border-radius: element.get(get("border-radius"));
     box-shadow: get("box-shadow");
@@ -107,21 +126,47 @@ $config: (
     padding-right: (get("padding-x") * 2) + 1em;
     color: color.get(get("color"));
     text-align: left;
+    // Add border like cap
+    @if get("left-cap") {
+      padding-left: calc(get("padding-x") + get("left-cap-width"));
+      &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: get("left-cap-width");
+        background-color: color.get(get("left-cap-color"));
+      }
+    }
     &: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("left-cap") and get("left-cap-color-hover")) {
+        &::after {
+          background-color: color.get(get("left-cap-color-hover"));
+        }
       }
     }
   }
-  .button-verbose__title {
+  #{ $prefix }__title {
     display: block;
     margin-bottom: get("title-margin");
     color: color.get(get("title-color"));
   }
-  .button-verbose__icon {
+  #{ $prefix }__icon {
     position: absolute;
     top: 50%;
     right: get("padding-x");
@@ -129,11 +174,14 @@ $config: (
     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%;
   }
 }

package/scss/components/_card.scss

@@ -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.
@@ -59,7 +59,7 @@
 /// @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 [30rem] Max width for image when using the modifier on the .card__image--icon
+/// @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
@@ -94,7 +94,7 @@ $config: (
   "image-border" : null, // For when you have a margin
   "image-filter-hover" : null,
   "image-margin" : null,
-  "image-icon-max-width" : 30rem,
+  "image-icon-max-width" : 8rem,
   "image-transform-hover" : null,
   "image-transition-duration" :    350ms,
   "image-transition-enabled" : true,
@@ -149,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;
+      }
+    }
+  } 
 }
 
 
@@ -238,14 +253,15 @@ $config: (
     margin-bottom: get("title-margin");
     display: block;
     font-weight: get("title-font-weight");
-    @if get("title-color-hover") {
-      &:hover,
-      &:focus {
-        color: color.get(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") {
@@ -307,7 +323,7 @@ $config: (
   }
 
   #{ $prefix }__image--icon {
-    background-color: transparent; 
+    // background-color: transparent; 
     display: flex;
     align-items: center;
     justify-content: center;

package/scss/components/_form-theme.scss

@@ -7,54 +7,62 @@
 @use "sass:meta";
 @use "sass:math";
 @use "sass:list";
+
 @use "../selector";
 @use "../utils";
 @use "../color";
 @use "../element";
 @use "../typography";
 
+// Used for function fallback
+$-fallbacks: (
+  "description-line-height" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "line-height-dense",
+  ),
+);
+
 /// Module Settings
 /// @type Map
 /// @prop {CssValue} color [inherit] Color of the text of the form.
-/// @prop {CssValue} color-placeholder ["type-tertiary"] Color for the placeh
-/// @prop {} drupal [false]
-/// @prop {} error-color ["danger"]
-/// @prop {} error-highlight-color [rgb(251, 242, 242)]
-/// @prop {} error-selector [".is-danger"]
-/// @prop {} file-button-style [true]
-/// @prop {} font-weight-label [bold]
-/// @prop {} font-weight-legend [bold]
-/// @prop {} font-weight-placeholder [normal]
-/// @prop {} font-weight-input [null]
-/// @prop {} font-weight-textarea [null]
-/// @prop {} font-weight-select [null]
-/// @prop {} input-border [element.get-rule-style()]
-/// @prop {} input-border-radius [0]
-/// @prop {} input-margin-y [0.75em]
-/// @prop {} input-padding-x [0.5em]
-/// @prop {} input-padding-y [0.25em]
-/// @prop {} input-min-width [10em]
-/// @prop {} input-background-color [white]
-/// @prop {} item-border-radius [null]
-/// @prop {} item-highlight-width [6px]
-/// @prop {} required-color ["danger"]
-/// @prop {} text-input-margin-bottom [0.5em]
-/// @prop {} text-input-margin-top [1em]
-/// @prop {} warning-color ["warning"]
-/// @prop {} warning-highlight-color [rgb(255, 249, 237)]
-/// @prop {} warning-selector [".is-warning"]
-/// @prop {} check-input-color [currentColor]
-/// @prop {} check-input-size [1.15em]
-/// @prop {} check-input-touch-size [2em]
-/// @prop {} check-input-background-color [white]
-/// @prop {} check-input-background-color-checked [white]
-/// @prop {} check-input-background-color-hover [white]
-/// @prop {} check-input-background-color-indeterminate [white]
-/// @prop {} check-input-border [null]
-/// @prop {} check-input-border-color-hover [null]
-/// @prop {} check-input-border-color-checked [null]
-/// @prop {} check-input-border-color-indeterminate [null]
-/// @prop {} check-input-border-color-focus [null]
+/// @prop {CssValue} color-placeholder ["type-tertiary"] Color for the placeholder text.
+/// @prop {Boolean} drupal [false] Toggle if using drupal to include drupal specific styling.
+/// @prop {Color} error-color ["danger"] Type color for errors.
+/// @prop {Color} error-highlight-color [rgb(251, 242, 242)] Outline color of error container.
+/// @prop {String} error-selector [".is-danger"] Class for error styling.
+/// @prop {} file-button-style [true] @joe-check should this have a fallback
+/// @prop {CssValue} font-weight-label [bold] Font weight of the labels.
+/// @prop {CssValue} font-weight-legend [bold] Font weight of the legend.
+/// @prop {CssValue} font-weight-placeholder [normal] Font weight of placeholder text.
+/// @prop {CssValue} font-weight-input [null] Font weight of input text.
+/// @prop {CssValue} font-weight-textarea [null] Font weight of textarea text.
+/// @prop {CssValue} font-weight-select [null] Font weight of select text.
+/// @prop {CssValue} input-border [element.get-rule-style()] Border of the input.
+/// @prop {Dimension} input-border-radius [0] Border radius of the input.
+/// @prop {Dimension} input-padding-x [0.5em] Horizontal padding of the input.
+/// @prop {Dimension} input-padding-y [0.25em] Vertical padding of the input.
+/// @prop {Dimension} input-min-width [10em] Min width of the input.
+/// @prop {Color} input-background-color [white] Background color of the input.
+/// @prop {Dimension} item-border-radius [null] Border radius for __item.
+/// @prop {Dimension} item-highlight-width [6px] Width of the item box highlight.
+/// @prop {Color} required-color ["danger"] Color for required text.
+/// @prop {Dimension} text-input-margin-bottom [0.5em] 
+/// @prop {Dimension} text-input-margin-top [1em]
+/// @prop {Color} warning-color ["warning"]
+/// @prop {Color} warning-highlight-color [rgb(255, 249, 237)]
+/// @prop {String} warning-selector [".is-warning"]
+/// @prop {Color} check-input-color [currentColor]
+/// @prop {Dimension} check-input-size [1.15em]
+/// @prop {Dimension} check-input-touch-size [2em]
+/// @prop {Color} check-input-background-color [white]
+/// @prop {Color} check-input-background-color-checked [white]
+/// @prop {Color} check-input-background-color-hover [white]
+/// @prop {Color} check-input-background-color-indeterminate [white]
+/// @prop {} check-input-border [null] @joe-check check how this is called with a fallback in the styles mixin
+/// @prop {Color} check-input-border-color-hover [null]
+/// @prop {Color} check-input-border-color-checked [null]
+/// @prop {Color} check-input-border-color-indeterminate [null]
+/// @prop {Color} check-input-border-color-focus [null]
 /// @prop {} check-input-outline [null]
 /// @prop {} check-input-outline-hover [null]
 /// @prop {} check-input-outline-checked [null]
@@ -76,6 +84,7 @@
 /// @prop {} description-color [false]
 /// @prop {} description-margin [(0.25em 0)]
 /// @prop {} description-max-width [25em]
+/// @prop {Number} description-line-height [true] Line height for description element, defaults to typograpahy line-height-dense
 /// @prop {} fieldset-background [transparent]
 /// @prop {} fieldset-border [none]
 /// @prop {} fieldset-margin-bottom [1rem]
@@ -160,6 +169,7 @@ $config: (
   "description-color"                         : false,
   "description-margin"                        : (0.25em 0),
   "description-max-width"                     : 25em,
+  "description-line-height"                   : true,
   "fieldset-background"                       : transparent,
   "fieldset-border"                           : none,
   "fieldset-margin-bottom"                    : 1rem,
@@ -198,7 +208,8 @@ $config: (
 ///   @include ulu.component-form-theme-get("property");
 
 @function get($name) {
-  @return utils.require-map-get($config, $name, "component-form-theme [config]");
+  $value: utils.require-map-get($config, $name, "component-form-theme [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
 }
 
 @function -fallback($op1, $op2) {
@@ -500,6 +511,7 @@ $config: (
   margin: get("description-margin");
   font-style: italic;
   @include typography.size("small", null, true);
+  line-height: get("description-line-height");
   max-width: get("description-max-width");
   color: color.get(get("description-color"));
 }