feat: update stories + header story

hotosm · Jun 2, 2024 · f019f11 · f019f11
1 parent 65f68e8
commit f019f11
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 4 deletions.
diff --git a/.storybook/stories/Button.stories.ts b/.storybook/stories/Button.stories.ts
@@ -3,6 +3,7 @@ import "../../components/Button.js";
 import { html } from "lit";
 
 const meta: Meta = {
+  title: "Button",
   component: "hot-button",
 };
 export default meta;
@@ -30,7 +31,6 @@ export const Template: StoryObj = {
   parameters: {
     showToast: () => {
       const alert = document.getElementById("click-toast");
-      console.log(alert)
       if (alert) {
         alert.show();
       }
@@ -47,6 +47,8 @@ export const Template: StoryObj = {
         ?disabled=${args.disabled}
       >${args.text}</hot-button>
 
+      <br>
+      <br>
       <sl-alert id="click-toast" variant="success" duration="3000" closable>
         <sl-icon slot="icon" name="check2-circle"></sl-icon>
         You clicked the button.

diff --git a/.storybook/stories/Header.stories.ts b/.storybook/stories/Header.stories.ts
@@ -1,19 +1,54 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
+import { hrefTo } from '@storybook/addon-links';
 import "../../components/Header.js";
 import { html } from "lit";
 
 const defaultLogo = new URL('../../theme/logo.png', import.meta.url).href;
 
 const meta: Meta = {
+  title: "Header",
   component: "hot-header",
 };
 export default meta;
 
+const oneTab = [
+  { label: 'ONE TAB ONLY', clickEvent: () => {} }
+];
+const twoTab = [
+  {
+    label: 'GO TO HEADER PAGE',
+    clickEvent: async () => {
+      const url = await hrefTo('Button', 'Template');
+      window.location.href = url;
+    }
+  },
+  {
+    label: 'GO TO TRACKING PAGE',
+    clickEvent: async () => {
+      const url = await hrefTo('Tracking', 'Template');
+      window.location.href = url;
+    }
+  }
+];
+const threeTab = Array.from({ length: 3 }, (_, index) => ({
+  label: `TAB Number ${index + 1}`,
+  clickEvent: () => {}
+}));
+const fourTab = Array.from({ length: 4 }, (_, index) => ({
+  label: `TAB Number ${index + 1}`,
+  clickEvent: () => {}
+}));
+const fiveTab = Array.from({ length: 5 }, (_, index) => ({
+  label: `TAB Number ${index + 1}`,
+  clickEvent: () => {}
+}));
+
 export const Template: StoryObj = {
   args: {
     title: "",
     logo: defaultLogo,
-    drawer: true
+    drawer: true,
+    tabs: twoTab,
   },
   argTypes: {
     title: {
@@ -34,13 +69,26 @@ export const Template: StoryObj = {
         type: "radio",
       },
     },
+    tabs: {
+      options: {
+        '1 Tab': oneTab,
+        '2 Tabs': twoTab,
+        '3 Tabs': threeTab,
+        '4 Tabs': fourTab,
+        '5 Tabs': fiveTab,
+      },
+      control: {
+        type: "select",
+      },
+    },
   },
   render: (args) => {
     return html`
       <hot-header
-        title="${args.title}"
-        logo="${args.logo}"
+        title=${args.title}
+        logo=${args.logo}
         ?drawer=${args.drawer}
+        .tabs=${args.tabs}
       ></hot-header>
     `;
   },

diff --git a/.storybook/stories/Toolbar.stories.ts b/.storybook/stories/Toolbar.stories.ts
@@ -3,6 +3,7 @@ import "../../components/Toolbar.js";
 import { html } from "lit";
 
 const meta: Meta = {
+  title: "Toolbar",
   component: "hot-toolbar",
 };
 export default meta;

diff --git a/.storybook/stories/Tracking.stories.ts b/.storybook/stories/Tracking.stories.ts
@@ -4,6 +4,7 @@ import "../../components/Tracking.js";
 import { html } from "lit";
 
 const meta: Meta = {
+  title: "Tracking",
   component: "hot-tracking",
 };
 export default meta;