@ulu/frontend 0.1.0-beta.100 → 0.1.0-beta.102

package/docs-dev/demos/scroll-slider/index.html

@@ -83,9 +83,9 @@ Scroll-Slider
 </li><p></p>
 <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
 <article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
-<a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+<a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet</a>
 </h5><div>
-This is the card content. It can contain around 2-3 sentences.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
 <img src="/frontend/assets/placeholder/image-1.jpg">
 </div><div class="card__footer">
@@ -94,9 +94,9 @@ This is the card content. It can contain around 2-3 sentences.
 </li></p>
 <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
 <article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
-<a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 2 Title</a>
+<a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
 </h5><div>
-This is the card content. It can contain around 2-3 sentences.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
 <img src="/frontend/assets/placeholder/image-1.jpg">
 </div><div class="card__footer">
@@ -105,9 +105,9 @@ This is the card content. It can contain around 2-3 sentences.
 </li></p>
 <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
 <article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
-<a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 3 Title</a>
+<a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem Ipsum</a>
 </h5><div>
-This is the card content. It can contain around 2-3 sentences.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
 <img src="/frontend/assets/placeholder/image-1.jpg">
 </div><div class="card__footer">
@@ -116,7 +116,7 @@ This is the card content. It can contain around 2-3 sentences.
 </li></p>
 <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
 <article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
-<a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 4 Title</a>
+<a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet</a>
 </h5><div>
 This is the card content. It can contain around 2-3 sentences.
 </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
@@ -127,9 +127,9 @@ This is the card content. It can contain around 2-3 sentences.
 </li></p>
 <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
 <article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
-<a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 5 Title</a>
+<a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
 </h5><div>
-This is the card content. It can contain around 2-3 sentences.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
 <img src="/frontend/assets/placeholder/image-1.jpg">
 </div><div class="card__footer">
@@ -138,9 +138,9 @@ This is the card content. It can contain around 2-3 sentences.
 </li></p>
 <p><li class="scroll-slider__slide" data-ulu-scroll-slider-slide="">
 <article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
-<a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 6 Title</a>
+<a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem Ipsum</a>
 </h5><div>
-This is the card content. It can contain around 2-3 sentences.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
 <img src="/frontend/assets/placeholder/image-1.jpg">
 </div><div class="card__footer">

package/docs-dev/demos/tag/index.html

@@ -5591,6 +5591,12 @@
 
                     <li><a href="#alternate-styles">Alternate Styles</a>
             		</li>
+
+                    <li><a href="#sizes">Sizes</a>
+            		</li>
+
+                    <li><a href="#counter-modifier">Counter Modifier</a>
+            		</li>
                 </ol>
             </div>
 			</div>
@@ -5607,7 +5613,7 @@
   <hr class="rule rule--light rule--margin-large">
 
     <div class="wysiwyg">
-      <h2 id="title-with-tag-new" tabindex="-1">Title with Tag <span class="tag">New</span></h2>
+      <h2 id="title-with-tag-new" tabindex="-1">Title with Tag <sup><span class="tag">New</span></sup></h2>
 <p>This is a tag inline <span class="tag">Some Definition</span> lorem ipsum, et depsi anu.</p>
 <h2 id="alternate-styles" tabindex="-1">Alternate Styles</h2>
 <p>Alternate styles are user set this shows defaults.</p>
@@ -5616,6 +5622,12 @@
 <li><span class="tag tag--danger">danger</span></li>
 <li><span class="tag tag--outline">outline</span></li>
 </ul>
+<h2 id="sizes" tabindex="-1">Sizes</h2>
+<p><span class="tag tag--small">Small Tag</span></p>
+<p><span class="tag">Default Tag</span></p>
+<h2 id="counter-modifier" tabindex="-1">Counter Modifier</h2>
+<p><span class="tag tag--counter">30</span> <span class="tag tag--counter">30,000</span></p>
+<p><span class="tag tag--small tag--counter">30</span> <span class="tag tag--small tag--counter">30,000</span></p>
 
     </div>
   </div>

package/docs-dev/sass/components/tag/index.html

@@ -5595,6 +5595,9 @@
 
                     <li><a href="#variable-styles">$styles</a>
             		</li>
+
+                    <li><a href="#variable-sizes">$sizes</a>
+            		</li>
                 </ol>
             		</li>
 
@@ -5608,6 +5611,9 @@
                     <li><a href="#mixin-set-styles">set-styles()</a>
             		</li>
 
+                    <li><a href="#mixin-set-sizes">set-sizes()</a>
+            		</li>
+
                     <li><a href="#mixin-styles">styles()</a>
             		</li>
                 </ol>
@@ -5659,6 +5665,9 @@
   <span class="pjs-token pjs-string">"border-color"</span> <span class="pjs-token pjs-punctuation">:</span> transparent<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"border-width"</span> <span class="pjs-token pjs-punctuation">:</span> 1px<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"color"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"type-tertiary"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"counter-size"</span> <span class="pjs-token pjs-punctuation">:</span> 1.75em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"counter-border-radius"</span> <span class="pjs-token pjs-punctuation">:</span> 20px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"counter-padding-sides"</span> <span class="pjs-token pjs-punctuation">:</span> 0.26em
 <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
 <details>
   <summary>File Information</summary>
@@ -5666,8 +5675,8 @@
 <li><strong>File:</strong> _tag.scss</li>
 <li><strong>Group:</strong> tag</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 24-39</li>
-<li><strong>Lines (code):</strong> 41-56</li>
+<li><strong>Lines (comments):</strong> 24-42</li>
+<li><strong>Lines (code):</strong> 44-62</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5765,6 +5774,24 @@
 <td style="text-align:left">&quot;type-tertiary&quot;</td>
 <td style="text-align:left">Color of the tag text.</td>
 </tr>
+<tr>
+<td style="text-align:left">counter-size</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">1.5em</td>
+<td style="text-align:left">Size when used as a counter (for numbers), will be this size by default and expand horizontally as needed (ie. circle/rounded rectangle or square/rectangle if without border radius)</td>
+</tr>
+<tr>
+<td style="text-align:left">counter-border-radius</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">20px</td>
+<td style="text-align:left">May need to be adjusted or can be set to 0 for square/rectangle</td>
+</tr>
+<tr>
+<td style="text-align:left">counter-padding-sides</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">0.26em</td>
+<td style="text-align:left">Counter left/right padding (this is the space/margin on the inside when the number can't fit in the circle/square</td>
+</tr>
 </tbody>
 </table>
 <div class="sassdoc-item-header">
@@ -5794,8 +5821,31 @@
 <li><strong>File:</strong> _tag.scss</li>
 <li><strong>Group:</strong> tag</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 58-58</li>
-<li><strong>Lines (code):</strong> 60-73</li>
+<li><strong>Lines (comments):</strong> 64-64</li>
+<li><strong>Lines (code):</strong> 66-79</li>
+</ul>
+</details>
+<div class="sassdoc-item-header">
+<h3 id="variable-sizes" tabindex="-1">$sizes</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Variable</strong></span>
+  </div>
+</div>
+<p>Map of alternate sizes</p>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$sizes</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+  <span class="pjs-token pjs-string">"small"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+    <span class="pjs-token pjs-string">"padding"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>0.25em 0.5em<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+    <span class="pjs-token pjs-string">"type-size"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"small-x"</span>
+  <span class="pjs-token pjs-punctuation">)</span>
+<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _tag.scss</li>
+<li><strong>Group:</strong> tag</li>
+<li><strong>Type:</strong> variable</li>
+<li><strong>Lines (comments):</strong> 81-81</li>
+<li><strong>Lines (code):</strong> 82-87</li>
 </ul>
 </details>
 <h2 id="mixins" tabindex="-1">Mixins</h2>
@@ -5812,8 +5862,8 @@
 <li><strong>File:</strong> _tag.scss</li>
 <li><strong>Group:</strong> tag</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 76-79</li>
-<li><strong>Lines (code):</strong> 81-83</li>
+<li><strong>Lines (comments):</strong> 89-92</li>
+<li><strong>Lines (code):</strong> 94-96</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5852,8 +5902,8 @@
 <li><strong>File:</strong> _tag.scss</li>
 <li><strong>Group:</strong> tag</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 85-87</li>
-<li><strong>Lines (code):</strong> 89-91</li>
+<li><strong>Lines (comments):</strong> 98-100</li>
+<li><strong>Lines (code):</strong> 102-104</li>
 </ul>
 </details>
 <h4 id="parameters-1" tabindex="-1">Parameters</h4>
@@ -5883,6 +5933,49 @@
 <li><a href="/frontend/sass/components/callout/#variable-styles">$styles</a></li>
 </ul>
 <div class="sassdoc-item-header">
+<h3 id="mixin-set-sizes" tabindex="-1">set-sizes()</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Mixin</strong></span>
+  </div>
+</div>
+<p>Set tag sizes</p>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _tag.scss</li>
+<li><strong>Group:</strong> tag</li>
+<li><strong>Type:</strong> mixin</li>
+<li><strong>Lines (comments):</strong> 106-108</li>
+<li><strong>Lines (code):</strong> 110-112</li>
+</ul>
+</details>
+<h4 id="parameters-2" tabindex="-1">Parameters</h4>
+<table>
+<thead>
+<tr>
+<th style="text-align:left">Name</th>
+<th style="text-align:left">Type</th>
+<th style="text-align:left">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left">$changes</td>
+<td style="text-align:left"><code>Map</code></td>
+<td style="text-align:left">Map of changes</td>
+</tr>
+<tr>
+<td style="text-align:left">$merge-mode</td>
+<td style="text-align:left"><code>String</code></td>
+<td style="text-align:left">Merge mode see utils.map-merge() [null</td>
+</tr>
+</tbody>
+</table>
+<h4 id="require-2" tabindex="-1">Require</h4>
+<ul>
+<li><a href="/frontend/sass/components/adaptive-spacing/#variable-sizes">$sizes</a></li>
+</ul>
+<div class="sassdoc-item-header">
 <h3 id="mixin-styles" tabindex="-1">styles()</h3>
   <div class="sassdoc-item-header__labels">
     <span class="tag tag--primary"><strong>Mixin</strong></span>
@@ -5895,15 +5988,16 @@
 <li><strong>File:</strong> _tag.scss</li>
 <li><strong>Group:</strong> tag</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 103-105</li>
-<li><strong>Lines (code):</strong> 107-156</li>
+<li><strong>Lines (comments):</strong> 124-126</li>
+<li><strong>Lines (code):</strong> 128-198</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
 <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">component-tag-styles</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
-<h4 id="require-2" tabindex="-1">Require</h4>
+<h4 id="require-3" tabindex="-1">Require</h4>
 <ul>
 <li><a href="/frontend/sass/components/accordion/#function-get">get()</a></li>
+<li><a href="/frontend/sass/components/adaptive-spacing/#variable-sizes">$sizes</a></li>
 <li><a href="/frontend/sass/components/callout/#variable-styles">$styles</a></li>
 </ul>
 <h2 id="functions" tabindex="-1">Functions</h2>
@@ -5920,13 +6014,13 @@
 <li><strong>File:</strong> _tag.scss</li>
 <li><strong>Group:</strong> tag</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 93-96</li>
-<li><strong>Lines (code):</strong> 98-101</li>
+<li><strong>Lines (comments):</strong> 114-117</li>
+<li><strong>Lines (code):</strong> 119-122</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>
 <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">component-tag-get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"property"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
-<h4 id="parameters-2" tabindex="-1">Parameters</h4>
+<h4 id="parameters-3" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
@@ -5943,7 +6037,7 @@
 </tr>
 </tbody>
 </table>
-<h4 id="require-3" tabindex="-1">Require</h4>
+<h4 id="require-4" tabindex="-1">Require</h4>
 <ul>
 <li><a href="/frontend/sass/components/accordion/#variable-config">$config</a></li>
 </ul>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.100",
+  "version": "0.1.0-beta.102",
   "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/_typography.scss

@@ -35,6 +35,7 @@
 /// @prop {Number} line-height-dense [1.3] Default dense line height
 /// @prop {Number} line-height-densest [1.1]
 /// @prop {Number} line-height-spaced [1.75]
+/// @prop {CssUnit} space-size [0.38em] The size of a space for the site's typography (used when creating faux spaces, like for .flow-inline utility)
 
 $config: (
   "letter-spacing-uppercase": 0.04em,
@@ -61,6 +62,7 @@ $config: (
   "max-width":                60em,
   "max-width-large":          75em,
   "max-width-small":          45em,
+  "space-size":               0.38em
 ) !default;
 
 /// Change modules $config

package/scss/components/_tag.scss

@@ -37,6 +37,9 @@ $-fallbacks: (
 /// @prop {Color} border-color [transparent] Border color for the tag.
 /// @prop {Dimension} border-width [1px] Border width of the tag.
 /// @prop {String} color ["type-tertiary"] Color of the tag text.
+/// @prop {String} counter-size [1.5em] Size when used as a counter (for numbers), will be this size by default and expand horizontally as needed (ie. circle/rounded rectangle or square/rectangle if without border radius)
+/// @prop {String} counter-border-radius [20px] May need to be adjusted or can be set to 0 for square/rectangle
+/// @prop {String} counter-padding-sides [0.26em] Counter left/right padding (this is the space/margin on the inside when the number can't fit in the circle/square
 
 $config: (
   "font-weight" : normal,
@@ -53,6 +56,9 @@ $config: (
   "border-color" : transparent,
   "border-width" : 1px,
   "color": "type-tertiary",
+  "counter-size" : 1.75em,
+  "counter-border-radius" : 20px,
+  "counter-padding-sides" : 0.26em
 ) !default;
 
 /// Style Map (alternate tag styles)
@@ -72,6 +78,13 @@ $styles: (
   )
 ) !default;
 
+/// Map of alternate sizes
+$sizes: (
+  "small" : (
+    "padding" : (0.25em 0.5em),
+    "type-size" : "small-x"
+  )
+) !default;
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
@@ -90,6 +103,14 @@ $styles: (
   $styles: utils.map-merge($styles, $changes, $merge-mode) !global;
 }
 
+/// Set tag sizes 
+/// @param {Map} $changes Map of changes
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
+
+@mixin set-sizes($changes, $merge-mode: null) {
+  $sizes: utils.map-merge($sizes, $changes, $merge-mode) !global;
+}
+
 /// Get a config option
 /// @param {Map} $name Name of property
 /// @example scss
@@ -121,10 +142,10 @@ $styles: (
     background-color: color.get(get("background-color"));
     color: color.get(get("color"));
     font-family: get("font-family");
+    line-height: get("line-height");
     @if (typography.has-size(get("type-size"))) {
       @include typography.size(get("type-size"), $only-font-size: true);
     }
-    line-height: get("line-height");
     &:not(:last-child) {
       margin-right: get("margin-between");
     }
@@ -136,8 +157,32 @@ $styles: (
     }
   }
 
+  
+
+  @each $name, $size in $sizes {
+    $type-size: map.get($size, "type-size");
+
+    #{ $prefix }--#{ $name } {
+      padding: map.get($size, "padding");  
+      line-height: map.get($size, "line-height");
+      @if (typography.has-size($type-size)) {
+        @include typography.size($type-size, $only-font-size: true);
+      }
+    }
+  }
+
+  // Order Reason: Needs to inherit from sizes but not styles
+  #{ $prefix }--counter {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: get("counter-size");
+    height: get("counter-size");
+    border-radius: get("counter-border-radius");
+    padding: 0 get("counter-padding-sides");
+  }
+
   @each $name, $style in $styles {
-    $type-size: map.get($style, "type-size");
     #{ $prefix }--#{ $name } {
       background-color: color.get(map.get($style, "background-color")); 
       color: color.get(map.get($style, "color")); 
@@ -146,11 +191,8 @@ $styles: (
       border-color: color.get(map.get($style, "border-color")); 
       border-width: map.get($style, "border-width"); 
       box-shadow: map.get($style, "box-shadow"); 
-      padding: map.get($style, "padding");  
-      @if (typography.has-size($type-size)) {
-        @include typography.size($type-size, $only-font-size: true);
-      }
-      line-height: map.get($style, "line-height");
     }
   }
+
+
 }

package/scss/helpers/_utilities.scss

@@ -6,6 +6,7 @@
 @use "../utils";
 @use "../layout";
 @use "../selector";
+@use "../typography";
 
 /// Print utilities helper styles
 /// - Includes classes like (.crop-margins, .no-scroll-y, .image-full-width, etc)
@@ -118,7 +119,12 @@
   #{ selector.class("overflow-hidden") } {
     overflow: hidden;
   }
-  // .justify-self-center {
-  //   justify-self: center;
-  // }
+  #{ selector.class("flow-inline") } {
+    &:not(:first-child) {
+      margin-left: typography.get("space-size");
+    }
+    &:not(:last-child) {
+      margin-right: typography.get("space-size");
+    }
+  }
 }