@ulu/frontend 0.1.0-beta.2 → 0.1.0-beta.4

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## Version 0.1.0-beta.3
+
+- scss/components/tabs - Add breakpoint to vertical tabs (to go to horizontal)
+
 ## Version 0.1.0-beta.2
 
 - scss

package/docs-dev/demos/data-table/index.html

@@ -4638,46 +4638,46 @@
   </tfoot>
 </table>
 <h2 class="h2">Complex Table</h2>
-<table class="data-table" id="dt-1">
+<table class="data-table" id="dt-3">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-1-type" rowspan="2">Type</th>
-      <th id="dt-1-group" colspan="2">Group</th>
-      <th id="dt-1-details" colspan="2">Details</th>
-      <th id="dt-1-id" rowspan="2">Id</th>
+      <th id="dt-3-type" rowspan="2">Type</th>
+      <th id="dt-3-group" colspan="2">Group</th>
+      <th id="dt-3-details" colspan="2">Details</th>
+      <th id="dt-3-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-1-group" id="dt-1-primary">Primary</th>
-      <th headers="dt-1-group" id="dt-1-secondary">Secondary</th>
-      <th headers="dt-1-details" id="dt-1-before">Before Task</th>
-      <th headers="dt-1-details" id="dt-1-after">After Task</th>
+      <th headers="dt-3-group" id="dt-3-primary">Primary</th>
+      <th headers="dt-3-group" id="dt-3-secondary">Secondary</th>
+      <th headers="dt-3-details" id="dt-3-before">Before Task</th>
+      <th headers="dt-3-details" id="dt-3-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-1-type dt-1-r1" id="dt-1-r1">Default</th>
-      <td headers="dt-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-3-type dt-3-r1" id="dt-3-r1">Default</th>
+      <td headers="dt-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-id">OL-53-GHSLE</td>
+      <td headers="dt-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-id">OL-53-GHSLE</td>
+      <td headers="dt-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
+      <td headers="dt-3-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>

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

@@ -4609,6 +4609,12 @@
     <button type="button" id="tabs-1-3">
       Tab Label 3
     </button>
+    <button type="button" id="tabs-1-4">
+      Tab Label 4
+    </button>
+    <button type="button" id="tabs-1-5">
+      Tab Label 5
+    </button>
   </div>
   <div class="tabs__tabpanel" aria-labelledby="tabs-1-1">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
@@ -4624,6 +4630,12 @@
   <div class="tabs__tabpanel" aria-labelledby="tabs-1-3">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
   </div>
+  <div class="tabs__tabpanel" aria-labelledby="tabs-1-4">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
+  </div>
+  <div class="tabs__tabpanel" aria-labelledby="tabs-1-5">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
+  </div>
 </div>
 <h2 class="h2">Full Width</h2>
 <div class="tabs tabs--full-width">

package/docs-dev/guide/index.html

@@ -4594,7 +4594,7 @@
 
 <hr class="rule rule--light rule--margin-large">
     <div class="wysiwyg">
-      <p>Guide Landing page</p>
+      <p>Guide Landing page (unused/not output)</p>
 
     </div>
   </div>

package/docs-dev/index.html

@@ -4596,6 +4596,9 @@
 
                     <li><a href="#printing">Printing</a>
             		</li>
+
+                    <li><a href="#javascript">Javascript</a>
+            		</li>
                 </ol>
             </div>
 			</div>
@@ -4637,6 +4640,8 @@
 <p>For in-depth details and examples, please refer to the scss core breakpoint module and the javascript ui breakpoints module.</p>
 <h2 id="printing" tabindex="-1">Printing</h2>
 <p>While most components can be printed directly, certain components, such as those with interactive or collapsible elements, may require JavaScript assistance to ensure optimal print output. The JavaScript modules provided offer the necessary mechanisms for managing print behavior in these specific cases.</p>
+<h2 id="javascript" tabindex="-1">Javascript</h2>
+<p>Javascript modules are mostly used for static/traditional sites, a Vue specific library is in development that offers the same functionality for Vue apps.</p>
 
     </div>
   </div>

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

@@ -4658,6 +4658,7 @@
   <span class="pjs-token pjs-string">"vertical-divider-width"</span> <span class="pjs-token pjs-punctuation">:</span> 0px<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"vertical-tab-gap"</span> <span class="pjs-token pjs-punctuation">:</span> 0.75em<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"vertical-indicator-left"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"vertical-breakpoint"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"horizontal-tab-wrap"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">false</span>
 <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
 <details>
@@ -4666,8 +4667,8 @@
 <li><strong>File:</strong> _tabs.scss</li>
 <li><strong>Group:</strong> tabs</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 28-50</li>
-<li><strong>Lines (code):</strong> 52-74</li>
+<li><strong>Lines (comments):</strong> 32-55</li>
+<li><strong>Lines (code):</strong> 57-80</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -4802,6 +4803,12 @@
 <td style="text-align:left">The indicator for selected tab should be on the left when vertical (false will be on right/inside)</td>
 </tr>
 <tr>
+<td style="text-align:left">vertical-breakpoint</td>
+<td style="text-align:left">Boolean</td>
+<td style="text-align:left">true</td>
+<td style="text-align:left">Set the breakpoint when the vertical tabs should switch to horizontal (defaults to breakpoint 'default')</td>
+</tr>
+<tr>
 <td style="text-align:left">horizontal-tab-wrap</td>
 <td style="text-align:left">Boolean</td>
 <td style="text-align:left">false</td>
@@ -4823,8 +4830,8 @@
 <li><strong>File:</strong> _tabs.scss</li>
 <li><strong>Group:</strong> tabs</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> 82-85</li>
+<li><strong>Lines (code):</strong> 87-89</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -4863,8 +4870,8 @@
 <li><strong>File:</strong> _tabs.scss</li>
 <li><strong>Group:</strong> tabs</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 95-97</li>
-<li><strong>Lines (code):</strong> 99-255</li>
+<li><strong>Lines (comments):</strong> 101-103</li>
+<li><strong>Lines (code):</strong> 105-245</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -4887,8 +4894,8 @@
 <li><strong>File:</strong> _tabs.scss</li>
 <li><strong>Group:</strong> tabs</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 85-88</li>
-<li><strong>Lines (code):</strong> 90-93</li>
+<li><strong>Lines (comments):</strong> 91-94</li>
+<li><strong>Lines (code):</strong> 96-99</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>

package/package.json

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

package/scss/components/_tabs.scss

@@ -22,6 +22,10 @@ $-fallbacks: (
   "tab-font-weight" : (
     "function" : meta.get-function("get", false, "typography"),
     "property" : "font-weight-semibold"
+  ),
+  "vertical-breakpoint" : (
+    "function" : meta.get-function("get", false, "breakpoint"),
+    "property" : "default"
   )
 );
 
@@ -47,6 +51,7 @@ $-fallbacks: (
 /// @prop {Dimension} vertical-divider-width [0px] Divider between tabs and panels when vertical
 /// @prop {Dimension} vertical-tab-gap [0.75em] The gap between tabs when vertical
 /// @prop {Boolean} vertical-indicator-left [true] The indicator for selected tab should be on the left when vertical (false will be on right/inside)
+/// @prop {Boolean} vertical-breakpoint [true] Set the breakpoint when the vertical tabs should switch to horizontal (defaults to breakpoint 'default')
 /// @prop {Boolean} horizontal-tab-wrap [false] Set to true to allow line wrapping when the tabs are in horizontal orientation, vertical is always allowed to wrap
 
 $config: (
@@ -70,6 +75,7 @@ $config: (
   "vertical-divider-width" : 0px,
   "vertical-tab-gap" : 0.75em,
   "vertical-indicator-left" : true,
+  "vertical-breakpoint" : true,
   "horizontal-tab-wrap" : false
 ) !default;
 
@@ -110,20 +116,30 @@ $config: (
       display: flex; 
       gap: get("tab-gap");
       overflow-x: auto;
+      border-bottom: get("tablist-divider");
+      border-bottom-width: get("tablist-divider-width");
     }
     [role="tab"] {
       display: block;
       position: relative; 
       cursor: pointer;
+      text-align: center;
       padding: get("tab-padding");
       color: color.get(get("tab-color"));
       font-weight: get("tab-font-weight");
+      @if (not get("horizontal-tab-wrap")) {
+        white-space: nowrap;
+      }
       // Indicator
       &::after {
         content: "";
         position: absolute;
         background-color: color.get(get("indicator-color"));
         opacity: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: get("indicator-size");
       }
       &:hover {
         color: color.get(get("tab-color-hover"));
@@ -131,35 +147,11 @@ $config: (
       &[aria-selected="true"] {
         color: color.get(get("tab-color-selected"));
         background-color: color.get(get("tab-background-color-selected"));
-
-      }
-    }
-
-    // Styling for horizontal tabs
-    &:not(#{ $prefix }--vertical) {
-      [role="tablist"] {
-        border-bottom: get("tablist-divider");
-        border-bottom-width: get("tablist-divider-width");
-      }
-      [role="tab"] {
-        text-align: center;
-        @if (not get("horizontal-tab-wrap")) {
-          white-space: nowrap;
-        }
         &::after {
-          bottom: 0;
-          left: 0;
-          right: 0;
-          height: get("indicator-size");
-        }
-        &[aria-selected="true"] {
-          &::after {
-            opacity: 1;
-          }
+          opacity: 1;
         }
       }
     }
-
     [role="tabpanel"] {
       position: relative;
       z-index: 1;
@@ -182,36 +174,34 @@ $config: (
     }
   }
 
-  #{ $prefix }--vertical {
-    display: grid;
-    grid-template-columns: get("vertical-tablist-width") auto; 
-    [role="tablist"] {
-      flex-direction: column;
-      gap: get("vertical-tab-gap");
-      border-right: get("tablist-divider");
-      border-right-width: get("vertical-divider-width");
-      grid-column: 1;
-    }
-    [role="tab"] {
-      padding: get("vertical-tab-padding");
-      &::after {
-        @if (get("vertical-indicator-left")) {
-          left: 0;
-        } @else {
-          right: 0;
-        }
-        bottom: 0;
-        top: 0;
-        width: get("indicator-size");
+  @include breakpoint.min(get("vertical-breakpoint")) {
+    #{ $prefix }--vertical {
+      display: grid;
+      grid-template-columns: get("vertical-tablist-width") auto; 
+      [role="tablist"] {
+        flex-direction: column;
+        gap: get("vertical-tab-gap");
+        border-right: get("tablist-divider");
+        border-right-width: get("vertical-divider-width");
+        border-bottom: none;
+        grid-column: 1;
       }
-      &[aria-selected="true"] {
+      [role="tab"] {
+        padding: get("vertical-tab-padding");
+        white-space: normal;
+        text-align: left;
         &::after {
-          opacity: 1;
+          left: if(get("vertical-indicator-left"), 0, auto);
+          right: if(not get("vertical-indicator-left"), 0, auto);;
+          bottom: 0;
+          top: 0;
+          width: get("indicator-size");
+          height: auto;
         }
       }
-    }
-    [role="tabpanel"] {
-      grid-column: 2; // needed for equalHeights in vertical
+      [role="tabpanel"] {
+        grid-column: 2; // needed for equalHeights in vertical
+      }
     }
   }