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

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.8", 
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/components/_data-table.scss

@@ -46,9 +46,11 @@ $config: (
   "highlighted-row-border-color" : null,
   "large-header-cell-padding-y" : 1em,
   "caption-type-size" : "large",
+  "caption-background-color" : null,
   "caption-font-weight" : bold,
-  "caption-margin" : (0 0 1em 0),
-  "caption-padding" : (0,),
+  "caption-margin" : (0,),
+  "caption-padding" : (0.5em,),
+  "caption-text-align" : left,
   "extra-selector" : ".wysiwyg table"
 ) !default;
 
@@ -107,9 +109,11 @@ $config: (
         @include typography.size(get("caption-type-size"));
       }
       font-weight: get("caption-font-weight");
-      text-align: left;
+      text-align: get("caption-text-align");
       margin: get("caption-margin");
       padding: get("caption-padding");
+      background-color: get("caption-background-color");
+      border-bottom: $border;
     }
     th,
     tr,

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");
+    }
+  }
+}