Big refactor, all things working

.storybook-react/main.ts

@@ -0,0 +1,16 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["./stories/**/*.stories.ts"],
+  staticDirs: ["./static"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  core: {
+    disableTelemetry: true,
+  }
+};
+export default config;
+

.storybook-react/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

.storybook-react/stories/button.stories.ts

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../../components/react';
+
+const meta = {
+  title: 'Button',
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+
+export const Template: StoryObj = {
+  args: {
+    innerHTML: "Click me",
+    variant: "primary",
+    disabled: false,
+    onClick: () => console.log("Click!")
+  },
+  argTypes: {
+    variant: {
+      options: ["default", "primary", "success", "neutral", "warning", "danger"],
+      control: {
+        type: "select",
+      },
+    },
+    disabled: {
+      options: [true, false],
+      control: {
+        type: "radio",
+      },
+    },
+  },
+};
+
+

.storybook-react/stories/header.stories.ts

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { hrefTo } from '@storybook/addon-links';
+import { Header } from '../../components/react/index';
+
+const defaultLogo = "";
+
+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 meta = {
+  title: 'Header',
+  component: Header,
+  args: {
+    size: "large",
+    title: "",
+    logo: defaultLogo,
+    drawer: true,
+    tabs: twoTab,
+  },
+  argTypes: {
+    size: {
+      options: ["large", "small"],
+      control: {
+        type: "select",
+      },
+    },
+    title: {
+      options: ["", "Tasking Manager", "FMTM", "Drone Tasking Manager"],
+      control: {
+        type: "select",
+      },
+    },
+    logo: {
+      options: [defaultLogo, "data:image/png;base64,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"],
+      control: {
+        type: "select",
+      },
+    },
+    drawer: {
+      options: [true, false],
+      control: {
+        type: "radio",
+      },
+    },
+    tabs: {
+      options: {
+        '2 Tabs': twoTab,
+      },
+      control: {
+        type: "select",
+      },
+    },
+  },
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Template: Story = {
+  args: {},
+};
+

.storybook-react/stories/logo.ts

@@ -0,0 +1,18 @@
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Logo } from '../../components/react/index';
+
+const meta = {
+  title: 'Logo',
+  component: Logo,
+} satisfies Meta<typeof Logo>;
+
+export default meta;
+
+export const Template: StoryObj = {
+  args: {},
+  argTypes: {},
+};
+
+

.storybook-react/stories/toolbar.stories.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Toolbar } from '../../components/react/index';
+
+const meta = {
+  title: 'Toolbar',
+  component: Toolbar,
+  argTypes: {},
+} satisfies Meta<typeof Toolbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Template: Story = {
+  args: {},
+};
+

.storybook/main.ts

@@ -8,6 +8,8 @@ const config: StorybookConfig = {
     name: "@storybook/web-components-vite",
     options: {},
   },
-  docs: {},
+  core: {
+    disableTelemetry: true,
+  }
 };
 export default config;

.storybook/stories/button.stories.ts

@@ -30,29 +30,13 @@ export const Template: StoryObj = {
       },
     },
   },
-  parameters: {
-    showToast: () => {
-      const alert = document.getElementById("click-toast");
-      if (alert) {
-        alert.show();
-      }
-    },
-  },
   render: (args, { parameters }) => {
     return html`
-      <h1>Button</h1>
       <hot-button
         variant="${args.variant}"
-        @click=${() => {parameters.showToast()}}
+        @click=${() => {console.log("click!")}}
         ?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.
-      </sl-alert>
     `;
   },
 };

.storybook/stories/header.stories.ts

@@ -98,18 +98,6 @@ export const Template: StoryObj = {
         ?drawer=${args.drawer}
         .tabs=${args.tabs}
       ></hot-header>
-
-      <h1 class="hot-font-sans hot-font-size-x-large">
-        Page Content
-      </h1>
-      <p class="hot-font-sans hot-font-size-medium">
-        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. Duis aute irure
-        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
-        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </p>
     `;
   },
 };

.storybook/stories/toolbar.stories.ts

@@ -22,9 +22,6 @@ export const Template: StoryObj = {
   },
   render: (args) => {
     return html`
-      <h1>Toolbar</h1>
-      <br>
-      <br>
       <hot-toolbar
         tooltip-position="${args.tooltipPosition}"
         @redo=${() => {alert("Redo Clicked")}}

.storybook/stories/tracking.stories.ts

@@ -50,13 +50,6 @@ export const Template: StoryObj = {
   },
   render: (args, { parameters }) => {
     return html`
-      <h1>Matomo Tracking Banner</h1>
-      The banner is disabled if a local storage key is set.
-      <br>
-      Click the buttons below to enable/disable and refresh the page.
-      <br>
-      <br>
-
       <sl-button @click=${() => {
         parameters.removeKeyLocalStorage(args.siteId)
       }}>Re-Enable Banner</sl-button>

components/header/header.styles.ts

@@ -0,0 +1,43 @@
+import { css } from 'lit';
+
+export default css`
+  .header {
+    display: flex;
+  }
+
+  .header--link {
+    text-decoration: none;
+  }
+
+  .header--title {
+  }
+
+  .header--tab-group {
+    flex-direction: column;
+  }
+
+  .header--nav {
+    justify-content: space-between;
+    justify-items: center;
+    gap: 1rem;
+    font-weight: 600;
+  }
+
+  .header--nav-mobile {
+  }
+
+  .header--person-circle {
+    font-size: var(--sl-font-size-x-large);
+  }
+
+  .header--drawer {
+    font-size: var(--sl-font-size-x-large)
+  }
+
+  .header--right-section {
+  }
+
+  .header--logo-img {
+  }
+}
+`