Tab: Adding id as an "optional" params

stencil-workspace/src/components/modus-tabs/modus-tabs.e2e.ts

@@ -57,11 +57,23 @@ describe('modus-tabs', () => {
     expect(tabChange).toHaveReceivedEvent();
   });
 
+  it('renders changes on tabs even without tab id provided', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<modus-tabs></modus-tabs>');
+    const modusTabs = await page.find('modus-tabs');
+    modusTabs.setProperty('tabs', [{ label: 'Tab1' }, { id: 0, label: 'Tab 2' }]);
+    await page.waitForChanges();
+    const element = await page.find('modus-tabs >>> button');
+
+    expect(element.id).toEqual('tab-label-tab1');
+  });
+
   it('renders aria-label on tabs div when set', async () => {
     const page = await newE2EPage();
 
     await page.setContent('<modus-tabs aria-label="test label"></modus-tabs>');
-    let element = await page.find('modus-tabs >>> .modus-tabs');
+    const element = await page.find('modus-tabs >>> .modus-tabs');
     expect(element).toBeDefined();
     expect(element).toHaveAttribute('aria-label');
     expect(element.getAttribute('aria-label')).toEqual('test label');
@@ -71,7 +83,7 @@ describe('modus-tabs', () => {
     const page = await newE2EPage();
 
     await page.setContent('<modus-tabs></modus-tabs>');
-    let element = await page.find('modus-tabs >>> .modus-tabs');
+    const element = await page.find('modus-tabs >>> .modus-tabs');
     expect(element).toBeDefined();
     expect(element).not.toHaveAttribute('aria-label');
   });
@@ -80,7 +92,7 @@ describe('modus-tabs', () => {
     const page = await newE2EPage();
 
     await page.setContent('<modus-tabs aria-label=""></modus-tabs>');
-    let element = await page.find('modus-tabs >>> .modus-tabs');
+    const element = await page.find('modus-tabs >>> .modus-tabs');
     expect(element).toBeDefined();
     expect(element).not.toHaveAttribute('aria-label');
   });

stencil-workspace/src/components/modus-tabs/modus-tabs.tsx

@@ -1,6 +1,7 @@
 // eslint-disable-next-line
 import { Component, Event, EventEmitter, Fragment, h, JSX, Prop } from '@stencil/core';
 import { ModusIconMap } from '../../icons/ModusIconMap';
+import { kebabCase } from '../../utils/utils';
 
 export interface Tab {
   active?: boolean;
@@ -87,6 +88,10 @@ export class ModusTabs {
 
   render(): unknown {
     const tabs = this.tabs.map((tab: Tab) => {
+      if (!tab.id) {
+        tab.id = tab?.label ? `tab-label-${kebabCase(tab.label)}` : `tab-label-${this.tabs.indexOf(tab).toString()}`;
+      }
+
       return (
         <button
           id={`${tab.id}`}

stencil-workspace/src/utils/utils.spec.ts

@@ -1,4 +1,4 @@
-import { createGuid, generateElementId } from './utils';
+import { createGuid, generateElementId, kebabCase } from './utils';
 
 describe('createGuid', () => {
   it('returns truthy guid value', () => {
@@ -19,3 +19,9 @@ describe('generateElementId', () => {
     expect(generateElementId()).toEqual('mwc_id_1');
   });
 });
+
+describe('kebabCase', () => {
+  it('should return kebab case string - with whitespace', () => {
+    expect(kebabCase('This is a string')).toEqual('this-is-a-string');
+  });
+});

stencil-workspace/src/utils/utils.ts

@@ -16,3 +16,10 @@ let counter = 0;
 export function generateElementId(): string {
   return `mwc_id_${counter++}`;
 }
+
+export function kebabCase(string: string): string {
+  return string
+    .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
+    .join('-')
+    .toLowerCase();
+}