;
+
+export const Template: Story = {
+ args: {},
+};
+
diff --git a/.storybook/main.ts b/.storybook/main.ts
index dbb9cbc6..8bfc6dd4 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -8,6 +8,8 @@ const config: StorybookConfig = {
name: "@storybook/web-components-vite",
options: {},
},
- docs: {},
+ core: {
+ disableTelemetry: true,
+ }
};
export default config;
diff --git a/.storybook/stories/button.stories.ts b/.storybook/stories/button.stories.ts
index 9fc217f5..5c7b12c8 100644
--- a/.storybook/stories/button.stories.ts
+++ b/.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`
- Button
{parameters.showToast()}}
+ @click=${() => {console.log("click!")}}
?disabled=${args.disabled}
>${args.text}
-
-
-
-
-
- You clicked the button.
-
`;
},
};
diff --git a/.storybook/stories/header.stories.ts b/.storybook/stories/header.stories.ts
index bbe3a994..e443a0ab 100644
--- a/.storybook/stories/header.stories.ts
+++ b/.storybook/stories/header.stories.ts
@@ -98,18 +98,6 @@ export const Template: StoryObj = {
?drawer=${args.drawer}
.tabs=${args.tabs}
>
-
-
- Page Content
-
-
- 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.
-
`;
},
};
diff --git a/.storybook/stories/toolbar.stories.ts b/.storybook/stories/toolbar.stories.ts
index 8d68c94c..b4224e01 100644
--- a/.storybook/stories/toolbar.stories.ts
+++ b/.storybook/stories/toolbar.stories.ts
@@ -22,9 +22,6 @@ export const Template: StoryObj = {
},
render: (args) => {
return html`
- Toolbar
-
-
{alert("Redo Clicked")}}
diff --git a/.storybook/stories/tracking.stories.ts b/.storybook/stories/tracking.stories.ts
index fb39d5dd..3ce49d6e 100644
--- a/.storybook/stories/tracking.stories.ts
+++ b/.storybook/stories/tracking.stories.ts
@@ -50,13 +50,6 @@ export const Template: StoryObj = {
},
render: (args, { parameters }) => {
return html`
- Matomo Tracking Banner
- The banner is disabled if a local storage key is set.
-
- Click the buttons below to enable/disable and refresh the page.
-
-
-
{
parameters.removeKeyLocalStorage(args.siteId)
}}>Re-Enable Banner
diff --git a/components/header/header.styles.ts b/components/header/header.styles.ts
new file mode 100644
index 00000000..a9ef875e
--- /dev/null
+++ b/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 {
+ }
+}
+`
diff --git a/components/header/header.ts b/components/header/header.ts
index 3eaa82c4..5206f6ab 100644
--- a/components/header/header.ts
+++ b/components/header/header.ts
@@ -1,4 +1,4 @@
-import "../../theme/hot.css";
+import "../../theme/hot-sl.css";
import "@shoelace-style/shoelace/dist/components/icon-button/icon-button.js";
import "@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js";
@@ -6,8 +6,9 @@ import "@shoelace-style/shoelace/dist/components/tab-group/tab-group.js";
import "@shoelace-style/shoelace/dist/components/tab/tab.js";
import { LitElement, html } from "lit";
-import { property, state } from "lit/decorators.js";
-import { headerVariants, type sizes, styles} from "./styles";
+import { property } from "lit/decorators.js";
+import styles from './header.styles.js';
+import type { CSSResultGroup } from 'lit';
import registerBundledIcons from "../../components/icons";
@@ -20,26 +21,28 @@ interface MenuItem {
export class Header extends LitElement {
- @property() name = "hot-header";
+ static styles: CSSResultGroup = [styles];
+
+ name = "hot-header";
/** Use a text-based title in the header. */
- @property({ type: String }) title: string = "";
+ @property({ type: String })
+ accessor title: string = "";
/** Display a logo on the left of the header. */
- @property({ type: String }) logo: string | URL = "";
+ @property({ type: String })
+ accessor logo: string | URL = "";
/** Add a drawer icon with a click event to e.g. open a sidebar. */
- @property({ type: Boolean }) drawer: boolean = true;
+ @property({ type: Boolean })
+ accessor drawer: boolean = true;
/** Array of menu items to include as navigation tabs. */
- @property({ type: Array }) tabs: MenuItem[] = [];
-
- /** Size of toolbar vertically. */
- @property({ type: String }) size: sizes = "large";
-
- @state() private selectedTab: number = 0;
+ @property({ type: Array })
+ accessor tabs: MenuItem[] = [];
- static styles = styles;
+ @property()
+ accessor selectedTab: number = 0;
protected render() {
const logoSrc =
@@ -50,26 +53,26 @@ export class Header extends LitElement {
: "";
return html`
- 
` : null }
- ${ !this.iconOnly ? html`
` : null }
+