Feature/513 tabbar use slots instead of arrays in the tabbar

packages/js-example-app/src/assets/index.html

@@ -76,64 +76,6 @@ <h2>Vanilla JS Example Application</h2>
         <div class="component">
           <p>Tab Bar</p>
           <blr-tab-bar
-            tabs="[
-          {
-            label: 'Tab 1',
-            icon: 'blr360',
-            href: './',
-            disabled: true,
-          },
-          {
-            label: 'Tab 2',
-            icon: 'blrInfo',
-            href: './',
-          },
-          {
-            label: 'Tab 3',
-            icon: 'blrCrop',
-            href: './',
-          },
-          {
-            label: 'Tab 4',
-            icon: 'blrDocumentNew',
-            href: './',
-          },
-          {
-            label: 'Tab 5',
-            icon: 'blrDocumentTwo',
-            href: './',
-          },
-          {
-            label: 'Tab 6',
-            icon: 'blrDownload',
-            href: './',
-          },
-          {
-            label: 'Tab 7',
-            icon: 'blrHeart',
-            href: './',
-          },
-          {
-            label: 'Tab 8',
-            icon: 'blrHome',
-            href: './',
-          },
-          {
-            label: 'Tab 9',
-            icon: 'blrLockClosed',
-            href: './',
-          },
-          {
-            label: 'Tab 10',
-            icon: 'blrMusic',
-            href: './',
-          },
-          {
-            label: 'Tab 11',
-            icon: 'blrPen',
-            href: './',
-          },
-        ]"
             variant="standard"
             overflowVariantStandard="buttons"
             overflowVariantFullWidth="browserOverflow"
@@ -142,7 +84,18 @@ <h2>Vanilla JS Example Application</h2>
             tabContent="labelAndIcon"
             iconPosition="leading"
             alignment="left"
-          ></blr-tab-bar>
+          ><p disabled label="Tab 1" icon="blr360">Tab 1</p>
+          <p label="Tab 2" icon="blrInfo">Tab 2</p>
+          <p label="Tab 3" icon="blrCrop">Tab 3</p>
+          <p label="Tab 4" icon="blrDocumentNew">Tab 4</p>
+          <p label="Tab 5" icon="blrDocumentTwo">Tab 5</p>
+          <p label="Tab 6" icon="blrDownload">Tab 6</p>
+          <p label="Tab 7" icon="blrHeart">Tab 7</p>
+          <p label="Tab 8" icon="blrHome">Tab 8</p>
+          <p label="Tab 9" icon="blrLockClosed">Tab 9</p>
+          <p label="Tab 10" icon="blrMusic">Tab 10</p>
+          <p label="Tab 11" icon="blrPen">Tab 11</p>
+        </blr-tab-bar>
         </div>
       </div>
 

packages/ui-library/src/components/navigation/tab-bar/index.css.ts

@@ -32,6 +32,10 @@ export const { tokenizedLight: tabBarLight, tokenizedDark: tabBarDark } = render
   - [ ] Add layoutvariant where I see the buttons, but no scrollbar
   */
   return typeSafeNestedCss/* css */ `
+      slot {
+        display: none;
+      }
+
       .wrapper-horizontal {
         position: relative;
         display: block;
@@ -152,7 +156,6 @@ export const { tokenizedLight: tabBarLight, tokenizedDark: tabBarDark } = render
               flex-direction: column;
               _flex: 0 1 0px;
               justify-content: center;
-              overflow: clip;
 
 
               &:focus-within:not(.disabled) {
@@ -165,6 +168,12 @@ export const { tokenizedLight: tabBarLight, tokenizedDark: tabBarDark } = render
                 _flex: 1 1 0px;
               }
 
+              .nav-item-underline {
+                &.selected {
+                background-color: ${TabBar.Tab.HighlightLine.BackgroundColor.Active.Pressed}
+                }
+              }
+
               .nav-item-content-wrapper {
                 display: flex;
                 justify-content: center;

packages/ui-library/src/components/navigation/tab-bar/index.stories.ts

@@ -1,3 +1,4 @@
+import { html } from 'lit-html';
 import { BlrTabBarType } from './index';
 import { BlrTabBarRenderFunction } from './renderFunction';
 import {
@@ -25,7 +26,6 @@ export default {
       options: FormSizes,
       control: { type: 'select' },
     },
-    tabs: { control: 'array' },
     tabContent: {
       options: TabContentVariants,
       control: { type: 'select' },
@@ -63,70 +63,26 @@ export default {
   },
 };
 
-export const BlrTabBar = (params: BlrTabBarType) => BlrTabBarRenderFunction(params);
+const tabsAsChildren = html`
+  <p disabled label="Tab 1" icon="blr360">Tab 1</p>
+  <p label="Tab 2" icon="blrInfo">Tab 2</p>
+  <p label="Tab 3" icon="blrCrop">Tab 3</p>
+  <p label="Tab 4" icon="blrDocumentNew">Tab 4</p>
+  <p label="Tab 5" icon="blrDocumentTwo">Tab 5</p>
+  <p label="Tab 6" icon="blrDownload">Tab 6</p>
+  <p label="Tab 7" icon="blrHeart">Tab 7</p>
+  <p label="Tab 8" icon="blrHome">Tab 8</p>
+  <p label="Tab 9" icon="blrLockClosed">Tab 9</p>
+  <p label="Tab 10" icon="blrMusic">Tab 10</p>
+  <p label="Tab 11" icon="blrPen">Tab 11</p>
+`;
+
+export const BlrTabBar = (params: BlrTabBarType) => BlrTabBarRenderFunction(params, tabsAsChildren);
 
 BlrTabBar.storyName = 'TabBar';
 
 const args: BlrTabBarType = {
   theme: 'Light',
-  tabs: [
-    {
-      label: 'Tab 1',
-      icon: 'blr360',
-      href: './',
-      disabled: true,
-    },
-    {
-      label: 'Tab 2',
-      icon: 'blrInfo',
-      href: './',
-    },
-    {
-      label: 'Tab 3',
-      icon: 'blrCrop',
-      href: './',
-    },
-    {
-      label: 'Tab 4',
-      icon: 'blrDocumentNew',
-      href: './',
-    },
-    {
-      label: 'Tab 5',
-      icon: 'blrDocumentTwo',
-      href: './',
-    },
-    {
-      label: 'Tab 6',
-      icon: 'blrDownload',
-      href: './',
-    },
-    {
-      label: 'Tab 7',
-      icon: 'blrHeart',
-      href: './',
-    },
-    {
-      label: 'Tab 8',
-      icon: 'blrHome',
-      href: './',
-    },
-    {
-      label: 'Tab 9',
-      icon: 'blrLockClosed',
-      href: './',
-    },
-    {
-      label: 'Tab 10',
-      icon: 'blrMusic',
-      href: './',
-    },
-    {
-      label: 'Tab 11',
-      icon: 'blrPen',
-      href: './',
-    },
-  ],
   variant: 'standard',
   overflowVariantStandard: 'buttons',
   overflowVariantFullWidth: 'browserOverflow',

packages/ui-library/src/components/navigation/tab-bar/index.test.ts

@@ -5,26 +5,10 @@ import type { BlrTabBarType } from '@boiler/ui-library/dist/';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
+import { html } from 'lit-html';
 
 const sampleParams: BlrTabBarType = {
   theme: 'Light',
-  tabs: [
-    {
-      label: 'Tab 1',
-      icon: 'blr360',
-      href: './',
-    },
-    {
-      label: 'Tab 2',
-      icon: 'blrInfo',
-      href: './',
-    },
-    {
-      label: 'Tab 3',
-      icon: 'blrCalendar',
-      href: './',
-    },
-  ],
   overflowVariantStandard: 'wrap',
   overflowVariantFullWidth: 'wrap',
   showDivider: true,
@@ -34,9 +18,23 @@ const sampleParams: BlrTabBarType = {
   alignment: 'left',
 };
 
+const tabsAsChildren = html`
+  <p disabled label="Tab 1" icon="blr360">Tab 1</p>
+  <p label="Tab 2" icon="blrInfo">Tab 2</p>
+  <p label="Tab 3" icon="blrCrop">Tab 3</p>
+  <p label="Tab 4" icon="blrDocumentNew">Tab 4</p>
+  <p label="Tab 5" icon="blrDocumentTwo">Tab 5</p>
+  <p label="Tab 6" icon="blrDownload">Tab 6</p>
+  <p label="Tab 7" icon="blrHeart">Tab 7</p>
+  <p label="Tab 8" icon="blrHome">Tab 8</p>
+  <p label="Tab 9" icon="blrLockClosed">Tab 9</p>
+  <p label="Tab 10" icon="blrMusic">Tab 10</p>
+  <p label="Tab 11" icon="blrPen">Tab 11</p>
+`;
+
 describe('blr-tab-bar', () => {
   it('is having a tab bar containing the right className', async () => {
-    const element = await fixture(BlrTabBarRenderFunction(sampleParams));
+    const element = await fixture(BlrTabBarRenderFunction(sampleParams, tabsAsChildren));
 
     const tabBar = querySelectorDeep('.blr-tab-bar-group', element.getRootNode() as HTMLElement);
     const className = tabBar?.className;
@@ -45,7 +43,7 @@ describe('blr-tab-bar', () => {
   });
 
   it('has a size md by default', async () => {
-    const element = await fixture(BlrTabBarRenderFunction(sampleParams));
+    const element = await fixture(BlrTabBarRenderFunction(sampleParams, tabsAsChildren));
 
     const input = querySelectorDeep('.blr-tab-bar-group', element.getRootNode() as HTMLElement);
     const className = input?.className;
@@ -54,7 +52,7 @@ describe('blr-tab-bar', () => {
   });
 
   it('has a size sm when "size" is set to "sm" ', async () => {
-    const element = await fixture(BlrTabBarRenderFunction({ ...sampleParams, size: 'sm' }));
+    const element = await fixture(BlrTabBarRenderFunction({ ...sampleParams, size: 'sm' }, tabsAsChildren));
 
     const input = querySelectorDeep('.blr-tab-bar-group', element.getRootNode() as HTMLElement);
     const className = input?.className;