@ulu/frontend 0.1.0-beta.83 → 0.1.0-beta.85

package/docs-dev/sass/index.html

@@ -226,6 +226,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/button-group/">
+          
+    
+    <span class="nav-tree__text">
+      Button Group
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/button-verbose/">
@@ -421,6 +436,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/headline-label/">
+          
+    
+    <span class="nav-tree__text">
+      Headline Label
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/hero/">
@@ -541,6 +571,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/panel/">
+          
+    
+    <span class="nav-tree__text">
+      Panel
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/popovers/">
@@ -586,6 +631,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/rail/">
+          
+    
+    <span class="nav-tree__text">
+      Rail
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/rule/">
@@ -1290,6 +1350,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/button-group/">
+          
+    
+    <span class="nav-tree__text">
+      Button-group
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/button-verbose/">
@@ -1485,6 +1560,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/headline-label/">
+          
+    
+    <span class="nav-tree__text">
+      Headline-label
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/hero/">
@@ -1695,6 +1785,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/panel/">
+          
+    
+    <span class="nav-tree__text">
+      Panel
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/placeholder-block/">
@@ -1740,6 +1845,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/rail/">
+          
+    
+    <span class="nav-tree__text">
+      Rail
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/ratio-box/">
@@ -1845,6 +1965,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/table-sticky/">
+          
+    
+    <span class="nav-tree__text">
+      Table-sticky
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/tabs/">
@@ -2787,6 +2922,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/button-group/">
+          
+    
+    <span class="nav-tree__text">
+      Button Group
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/button-verbose/">
@@ -2982,6 +3132,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/headline-label/">
+          
+    
+    <span class="nav-tree__text">
+      Headline Label
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/hero/">
@@ -3102,6 +3267,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/panel/">
+          
+    
+    <span class="nav-tree__text">
+      Panel
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/popovers/">
@@ -3147,6 +3327,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/rail/">
+          
+    
+    <span class="nav-tree__text">
+      Rail
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/rule/">
@@ -3851,6 +4046,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/button-group/">
+          
+    
+    <span class="nav-tree__text">
+      Button-group
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/button-verbose/">
@@ -4046,6 +4256,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/headline-label/">
+          
+    
+    <span class="nav-tree__text">
+      Headline-label
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/hero/">
@@ -4256,6 +4481,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/panel/">
+          
+    
+    <span class="nav-tree__text">
+      Panel
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/placeholder-block/">
@@ -4301,6 +4541,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/rail/">
+          
+    
+    <span class="nav-tree__text">
+      Rail
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/ratio-box/">
@@ -4406,6 +4661,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/table-sticky/">
+          
+    
+    <span class="nav-tree__text">
+      Table-sticky
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/tabs/">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.83",
+  "version": "0.1.0-beta.85",
   "description": "A versatile SCSS and JavaScript component library offering configurable, accessible components and flexible integration into any project, with SCSS modules suitable for modern JS frameworks.",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/_breakpoint.scss

@@ -224,7 +224,7 @@ $sizes: (
 ///   @include breakpoints.fromEach($breakpoints) using ($props) {
 ///     width: map.get($props, "width");
 ///   }
-/// @param {String} $breakpoints A map with breakpoints direction will be pulled from each items "direction" property, if direction is missing and no breakpoint will wrap the code
+/// @param {String} $breakpoints A map with breakpoints direction will be pulled from each items "direction" property, if direction is missing no breakpoint will wrap the code (as convention we call the default non-breakpoint direction "default")
 /// @param {String} $options A map with options to change the behavior
 /// @param {Boolean} $options.directionRequired Require direction throw error if missing direction
 

package/scss/_button.scss

@@ -94,7 +94,7 @@ $config: (
   
 $sizes: (
   "small" : (
-    "padding":        (0.35em 1.5em),
+    "padding":        (0.35em 1em),
     "min-width":      0,
     "icon-size":      2rem,
     "icon-font-size": 1rem
@@ -118,9 +118,9 @@ $styles: (
     "border-color" : transparent,
     "box-shadow" : none,
     "hover" : (
-      "background-color" : "white",
-      "color" : inherit,
-      "border-color" : transparent,
+      "background-color" : "control-background",
+      "color" : "control",
+      "border-color" : "control-border",
     )
   ),
   "outline" : (
@@ -129,7 +129,9 @@ $styles: (
     "border-color" : "rule-light",
     "box-shadow" : none,
     "hover" : (
-      "background-color" : "white",
+      "background-color" : "control-background",
+      "color" : "control",
+      "border-color" : "control-border",
     )
   ),
 ) !default;

package/scss/_element.scss

@@ -124,11 +124,27 @@ $rule-margins: (
 
 /// Get a rule style
 /// @param {Map} $changes Map of changes
+/// @return {CssValue} Rule style (css border value)
 
 @function get-rule-style($name: "default") {
   @return utils.require-map-get($rule-styles, $name, "element [rule style]");
 }
 
+/// Get an optional rule style (which is a border)
+/// - If the value is a string we return the rule style, else we return the value
+/// - Used for things where configuration for say a border can be a user defined border or a string (they want an existing rule-style)
+/// - Except when passing "none"/none this will return as-is (since it's a border property)
+/// @param {*} $value The value to check
+/// @return {*} Rule style if string, else value
+
+@function get-optional-rule-style($value) {
+  @if (meta.type-of($value) == "string") {
+    @return get-rule-style($value);
+  } @else {
+    @return $value;
+  }
+}
+
 /// Sets rule margin
 /// @param {Map} $changes Map of changes
 

package/scss/_utils.scss

@@ -438,6 +438,13 @@ $config: (
   @return $value;
 }
 
+/// If the value passed is equal to true use the default, else return the value
+/// @param {*} $value The value to check
+/// @param {*} $default The value to return when true
+@function default($value, $default) {
+  @return if($value == true, $default, $value);
+}
+
 /// Replaces all or one occurrence of a string within a string
 /// @param {String} $string String to operate on
 /// @param {String} $find String to find within string

package/scss/components/_button-group.scss

@@ -0,0 +1,90 @@
+////
+/// @group button-group
+/// Groups a set of buttons
+////
+
+@use "sass:map";
+@use "sass:math";
+
+@use "../selector";
+@use "../utils";
+@use "../color";
+@use "../button";
+
+/// Module Settings
+/// @type Map
+/// @prop {Dimension}  gap  [0.45em] Gap between buttons
+/// @prop {Boolean}  no-min-width  [true] Buttons within the button group should have no min width
+
+$config: (
+  "gap": 0.45em,
+  "no-min-width" : true
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-button-group-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-button-group-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "button-group [config]");
+}
+
+/// Prints component styles
+/// @demo button-group
+/// @example scss
+///  @include ulu.component-button-group-styles();
+
+@mixin styles {
+  $prefix: selector.class("button-group");
+  $prefix-button: selector.class("button");
+
+  $button-radius: button.get("border-radius");
+  
+  #{ $prefix } {
+    display: flex;
+    flex-wrap: wrap;
+    gap: get("gap");
+    #{ $prefix-button } {
+      margin: 0;
+    }
+  }
+  #{ $prefix }--joined {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    gap: 0;
+    // border-radius: button.get("border-radius");
+    #{ $prefix-button } {
+      position: relative; // To move to front when hover/active
+      border-radius: 0;
+      min-width: 0;
+      margin-left: -(button.get("border-width"));
+      &:first-child {
+        border-top-left-radius: $button-radius;
+        border-bottom-left-radius: $button-radius;
+        margin-left: 0;
+      }
+      &:last-child {
+        border-top-right-radius: $button-radius;
+        border-bottom-right-radius: $button-radius;
+      }
+      #{ button.get("active-selector") } {
+        z-index: 2;
+      }
+      &:hover,
+      &:focus {
+        z-index: 2;
+      }
+      
+    }
+  }
+}

package/scss/components/_data-grid.scss

@@ -3,9 +3,6 @@
 /// A page grid layout component that uses data attribute instead of class names, for brevity and readability
 ////
 
-/// Content Block
-/// @demo data-grid
-
 @use "sass:map";
 @use "sass:math";
 

package/scss/components/_headline-label.scss

@@ -0,0 +1,83 @@
+////
+/// @group headline-label
+////
+
+@use "sass:map";
+@use "sass:meta";
+@use "../utils";
+@use "../color";
+@use "../typography";
+
+// Used for function fallback
+$-fallbacks: (
+  "font-weight" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "font-weight-bold"
+  ),
+  "font-family" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "font-family-sans"
+  ),
+  "line-height" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "line-height-dense"
+  )
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {Color} color [ulu.cssvar-use("color-accent")] The text color of the headline label.
+/// @prop {Dimension} margin-bottom [0.2em] The bottom margin of the headline label.
+/// @prop {String} font-weight [typography.get("font-weight-bold")] The font weight of the headline label.
+/// @prop {String} font-family [typography.get("font-family-sans")] The font family of the headline label.
+/// @prop {Dimension|Number} line-height [typography.get("line-height-dense")] The font family of the headline label.
+/// @prop {String} text-transform [null] The font family of the headline label.
+/// @prop {String} type-size ["small"] The typography size preset to use for the headline label (e.g., "small", "medium", "large"), Only uses the font-size value for size
+
+$config: (
+  "color": "accent",
+  "margin-bottom": 0.2em,
+  "font-weight": true,
+  "font-family": true,
+  "line-height": true,
+  "text-transform" : null,
+  "type-size": "small"
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-headline-label-set(( "color" : red ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {String} $name Name of property
+/// @example scss
+///   @include ulu.component-headline-label-get("color");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "headline-label [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @example scss
+///  @include ulu.component-headline-label-styles();
+
+@mixin styles {
+  .headline-label {
+    display: block;
+    margin-bottom: get("margin-bottom");
+    font-weight: get("font-weight");
+    font-family: get("font-family");
+    line-height: get("line-height");
+    text-transform: get("text-transform");
+    color: color.get(get("color"));
+    @if (get("type-size")) {
+      @include typography.size(get("type-size"), $only-font-size: true);
+    }
+  }
+}