@ulu/frontend 0.1.0-beta.6 → 0.1.0-beta.7

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

@@ -339,6 +339,36 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List Inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-lines/">
+          
+    
+    <span class="nav-tree__text">
+      List Lines
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/demos/menu-stack/">
@@ -1358,6 +1388,21 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List-inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/list-lines/">
@@ -2598,6 +2643,36 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List Inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-lines/">
+          
+    
+    <span class="nav-tree__text">
+      List Lines
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/demos/menu-stack/">
@@ -3617,6 +3692,21 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List-inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/list-lines/">

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

@@ -339,6 +339,36 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List Inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-lines/">
+          
+    
+    <span class="nav-tree__text">
+      List Lines
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/demos/menu-stack/">
@@ -1358,6 +1388,21 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List-inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/list-lines/">
@@ -2598,6 +2643,36 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List Inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-lines/">
+          
+    
+    <span class="nav-tree__text">
+      List Lines
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/demos/menu-stack/">
@@ -3617,6 +3692,21 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List-inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/list-lines/">

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

@@ -339,6 +339,36 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List Inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-lines/">
+          
+    
+    <span class="nav-tree__text">
+      List Lines
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/demos/menu-stack/">
@@ -1358,6 +1388,21 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List-inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/list-lines/">
@@ -2598,6 +2643,36 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List Inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-lines/">
+          
+    
+    <span class="nav-tree__text">
+      List Lines
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/demos/menu-stack/">
@@ -3617,6 +3692,21 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List-inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/list-lines/">

package/docs-dev/sass/index.html

@@ -339,6 +339,36 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List Inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-lines/">
+          
+    
+    <span class="nav-tree__text">
+      List Lines
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/demos/menu-stack/">
@@ -1358,6 +1388,21 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List-inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/list-lines/">
@@ -2598,6 +2643,36 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List Inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/list-lines/">
+          
+    
+    <span class="nav-tree__text">
+      List Lines
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/demos/menu-stack/">
@@ -3617,6 +3692,21 @@
         </li>
       
 
+        <li class="nav-tree__item ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/list-inline/">
+          
+    
+    <span class="nav-tree__text">
+      List-inline
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/list-lines/">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.6", 
+  "version": "0.1.0-beta.7", 
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/components/_index.scss

@@ -22,6 +22,7 @@
 @forward "image-grid" as image-grid-*;
 @forward "links" as links-*;
 @forward "list-lines" as list-lines-*;
+@forward "list-inline" as list-inline-*;
 @forward "list-ordered" as list-ordered-*;
 @forward "list-unordered" as list-unordered-*;
 @forward "menu-stack" as menu-stack-*;
@@ -69,6 +70,7 @@
 @use "horizontal-rule";
 @use "image-grid";
 @use "list-lines";
+@use "list-inline";
 @use "list-ordered";
 @use "list-unordered";
 @use "links";
@@ -119,6 +121,7 @@ $all-includes: (
   "image-grid",
   "links",
   "list-lines",
+  "list-inline",
   "list-ordered",
   "list-unordered",
   "menu-stack",
@@ -241,6 +244,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "list-lines")) {
     @include list-lines.styles;
   }
+  @if (list.index($includes, "list-inline")) {
+    @include list-inline.styles;
+  }
   @if (list.index($includes, "list-unordered")) {
     @include list-unordered.styles;
   }

package/scss/components/_list-inline.scss

@@ -0,0 +1,80 @@
+////
+/// @group list-inline
+////
+
+@use "sass:map";
+
+@use "../element";
+@use "../selector";
+@use "../utils";
+
+/// Module Config
+/// @prop {String} rule-style ["light"] Name of element > rule style to use for divider/border
+/// @prop {Dimension} margin-top [0] Top margin of list.
+/// @prop {Dimension} margin-bottom [1em] Bottom margin of list.
+/// @prop {Dimension} space-between [1em] Gap between item and dividers
+/// @prop {Dimension} space-between-large [1em] Gap between item and dividers when using large-gap modifier
+
+$config: (
+  "rule-style" : "light",
+  "margin-top": 0,
+  "margin-bottom": 1em,
+  "space-between" : 1em,
+  "space-between-large" : 2em
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-list-inline-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-list-inline-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "list-inline [config]");
+}
+
+/// Output component stylesheet
+/// @example scss
+///  @include ulu.component-list-inline-styles();
+
+@mixin styles {
+  $prefix: selector.class("list-inline");
+  $border: element.get-rule-style(get("rule-style"));
+  
+  ul#{ $prefix },
+  #{ $prefix } ul {
+    list-style: none;
+    display: inline-flex;
+    flex-wrap: wrap;
+    margin: get("margin-top") 0 get("margin-bottom") 0;
+  }
+  #{ $prefix } {
+    li {
+      // Not using flex gap because we would need to position
+      // pseudo for divider, so we would still need to use math
+      // So custom properties couldn't be used (no benefit)
+      padding-right: get("space-between");
+      margin-right: get("space-between");
+      border-right: $border;
+      &:last-child {
+        border-right: none;
+        padding-right: 0;
+        margin-right: 0;
+      }
+    }
+  }
+  #{ $prefix }--large-gap {
+    li {
+      padding-right: get("space-between-large");
+      margin-right: get("space-between-large");
+    }
+  }
+}

package/scss/components/_list-lines.scss

@@ -3,24 +3,40 @@
 ////
 
 @use "sass:map";
+@use "sass:meta";
 
 @use "../element";
 @use "../typography";
+@use "../selector";
 @use "../utils";
 
+// Used for function fallback
+$-fallbacks: (
+  "dense-line-height" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "line-height-dense"
+  ),
+);
+
 /// Module Config
 /// @prop {Boolean} border-first [true] If enabled, adds a top border to the first item in list-lines.
 /// @prop {Boolean} border-last [true] If enabled, adds a bottom border to the last item in list-lines.
+/// @prop {String} rule-style ["light"] Name of element > rule style to use for divider/border
 /// @prop {Dimension} margin-bottom [1em] Bottom margin of list.
 /// @prop {Dimension} margin-top [0] Top margin of list.
 /// @prop {Dimension} padding-between [1em] Padding between items in list.
+/// @prop {Dimension} padding-between [1em] Padding between items in list when using dense modifier
+/// @prop {Dimension} line-height-dense [true] Line height when list lines has dense modifier (defaults to typography line-height-dense)
 
 $config: (
   "border-first" : true,
   "border-last" : true,
   "margin-bottom": 1em,
   "margin-top": 0,
-  "padding-between" : 1em
+  "rule-style" : "light",
+  "padding-between" : 1em,
+  "dense-padding-between" : 0.65em,
+  "dense-line-height" : true
 ) !default;
 
 /// Change modules $config
@@ -38,31 +54,8 @@ $config: (
 ///   @include ulu.component-list-lines-get("property");
 
 @function get($name) {
-  @return utils.require-map-get($config, $name, "grid [config]");
-}
-
-/// Output component styles
-
-@mixin inner-styles {
-  $border: element.get-rule-style("light") !default;
-  list-style: none;
-  margin: get("margin-top") 0 get("margin-bottom") 0;
-  padding: 0;
-  @if (get("border-first")) {
-    border-top: $border;
-  }
-  >li {
-    border-bottom: $border;
-    padding: get("padding-between") 0;
-    >*:last-child {
-      margin-bottom: 0;
-    }
-    @if (not get("border-last")) {
-      &:last-child {
-        border-bottom-width: 0;
-      }
-    }
-  }
+  $value: utils.require-map-get($config, $name, "list-lines [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
 }
 
 /// Output component stylesheet
@@ -70,14 +63,33 @@ $config: (
 ///  @include ulu.component-list-lines-styles();
 
 @mixin styles {
-  
-  .list-lines {
-    @include inner-styles;
+  $prefix: selector.class("list-lines");
+  $border: element.get-rule-style(get("rule-style"));
+
+  #{ $prefix } {
+    list-style: none;
+    margin: get("margin-top") 0 get("margin-bottom") 0;
+    padding: 0;
+    @if (get("border-first")) {
+      border-top: $border;
+    }
+    >li {
+      border-bottom: $border;
+      padding: get("padding-between") 0;
+      >*:last-child {
+        margin-bottom: 0;
+      }
+      @if (not get("border-last")) {
+        &:last-child {
+          border-bottom-width: 0;
+        }
+      }
+    }
   }
-  .list-lines--dense {
+  #{ $prefix }--dense {
     >li {
-      padding: 0.5em 0;
-      line-height: typography.get("line-height-dense");
+      padding: get("dense-padding-between") 0;
+      line-height: get("dense-line-height");
     }
   }
 }