diff --git a/.github/workflows/cdn_deploy.yml b/.github/workflows/cdn_deploy.yml index 6cb84e7..1db7328 100644 --- a/.github/workflows/cdn_deploy.yml +++ b/.github/workflows/cdn_deploy.yml @@ -61,10 +61,8 @@ jobs: aws s3 sync --delete \ --exclude "*" \ --include='dist/*' \ - --include "components/*.js" \ - --include='components/*.d.ts' \ - --include "react/*.js" \ - --include='react/*.d.ts' \ + --include "components/*" \ + --include "react/*" \ --include "theme/*" \ --include "i18n/*.xliff" \ ${{ github.workspace }} \ diff --git a/.storybook/stories/Button.stories.ts b/.storybook/stories/button.stories.ts similarity index 88% rename from .storybook/stories/Button.stories.ts rename to .storybook/stories/button.stories.ts index 71a76c2..9fcc52f 100644 --- a/.storybook/stories/Button.stories.ts +++ b/.storybook/stories/button.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from "@storybook/web-components"; -import "../../components/Button.js"; +import "../../components/button/button.js"; import { html } from "lit"; const meta: Meta = { @@ -11,12 +11,12 @@ export default meta; export const Template: StoryObj = { args: { text: "Click Me", - variant: "primary", + variant: "default", disabled: false, }, argTypes: { variant: { - options: ["primary", "secondary"], + options: ["default", "primary", "success", "neutral", "warning", "danger"], control: { type: "select", }, diff --git a/.storybook/stories/Header.stories.ts b/.storybook/stories/header.stories.ts similarity index 98% rename from .storybook/stories/Header.stories.ts rename to .storybook/stories/header.stories.ts index 58e5ed6..a6df669 100644 --- a/.storybook/stories/Header.stories.ts +++ b/.storybook/stories/header.stories.ts @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from "@storybook/web-components"; import { hrefTo } from '@storybook/addon-links'; -import "../../components/Header.js"; +import "../../components/header/header.js"; import { html } from "lit"; const defaultLogo = new URL('../../theme/logo.png', import.meta.url).href; diff --git a/.storybook/stories/Toolbar.stories.ts b/.storybook/stories/toolbar.stories.ts similarity index 93% rename from .storybook/stories/Toolbar.stories.ts rename to .storybook/stories/toolbar.stories.ts index fe47e12..2746506 100644 --- a/.storybook/stories/Toolbar.stories.ts +++ b/.storybook/stories/toolbar.stories.ts @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from "@storybook/web-components"; -import "../../components/Toolbar.js"; +import "../../components/toolbar/toolbar.js"; import { html } from "lit"; const meta: Meta = { diff --git a/.storybook/stories/Tracking.stories.ts b/.storybook/stories/tracking.stories.ts similarity index 92% rename from .storybook/stories/Tracking.stories.ts rename to .storybook/stories/tracking.stories.ts index 6081e31..7f39467 100644 --- a/.storybook/stories/Tracking.stories.ts +++ b/.storybook/stories/tracking.stories.ts @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from "@storybook/web-components"; import '@shoelace-style/shoelace/dist/components/alert/alert.js'; -import "../../components/Tracking.js"; +import "../../components/tracking/tracking.js"; import { html } from "lit"; const meta: Meta = { @@ -42,10 +42,10 @@ export const Template: StoryObj = { } }, addKeyLocalStorage: (siteId: number) => { - localStorage.setItem(`${siteId}-optout-closed`, 'true'); + localStorage.setItem(`${siteId}-matomo-agree`, 'true'); }, removeKeyLocalStorage: (siteId: number) => { - localStorage.removeItem(`${siteId}-optout-closed`); + localStorage.removeItem(`${siteId}-matomo-agree`); }, }, render: (args, { parameters }) => { diff --git a/README.md b/README.md index 5d4cac1..b3ac1f0 100644 --- a/README.md +++ b/README.md @@ -112,7 +112,7 @@ including a bundler such as rollup/vite/webpack, this is probably the best appro Example: ```js -import '@hotosm/ui/components/Toolbar'; +import '@hotosm/ui/components/toolbar/toolbar'; // Then in your template Click Me diff --git a/components/Button.ts b/components/button/button.ts similarity index 74% rename from components/Button.ts rename to components/button/button.ts index 9198c46..f3c7d8a 100644 --- a/components/Button.ts +++ b/components/button/button.ts @@ -1,6 +1,4 @@ -import "../theme/hot.css"; -import '@shoelace-style/shoelace/dist/themes/light.css'; -import '@shoelace-style/shoelace/dist/themes/dark.css'; +import "../../theme/sl-custom.css"; import '@shoelace-style/shoelace/dist/components/button/button.js'; @@ -13,9 +11,9 @@ const buttonStyle = cva( "bg-primary text-white py-3 px-6 rounded leading-[1.15]", { variants: { - variant: { - primary: "bg-primary border-2 border-primary text-white", - secondary: ` + classGroup: { + classGroup1: "bg-primary border-2 border-primary text-white", + classGroup2: ` bg-white border-2 border-primary text-primary! hover:bg-lightGray focus:bg-transparent focus:border-primary `, @@ -27,15 +25,19 @@ const buttonStyle = cva( }, }, ); +type variants = "classGroup1" | "classGroup2"; export class Button extends LitElement { @property() name = "hot-button"; + /** Type of button. */ + @property({ type: String }) variant: string = "default"; + /** Disable the button, greyed out, not clickable. */ @property({ type: Boolean }) disabled: boolean = false; - /** CVA button type. */ - @property({ type: String }) variant: "primary" | "secondary" = "primary"; + /** CVA button class group. */ + @property({ type: String, attribute: 'class-group' }) classGroup: variants = "classGroup1"; static styles = [ css` @@ -46,9 +48,9 @@ export class Button extends LitElement { protected render() { return html` { this._handleClick(e); diff --git a/components/Header.ts b/components/header/header.ts similarity index 79% rename from components/Header.ts rename to components/header/header.ts index 2cc0750..d4978aa 100644 --- a/components/Header.ts +++ b/components/header/header.ts @@ -1,6 +1,4 @@ -import "../theme/hot.css"; -import '@shoelace-style/shoelace/dist/themes/light.css'; -import '@shoelace-style/shoelace/dist/themes/dark.css'; +import "../../theme/sl-custom.css"; import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js'; import '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js'; @@ -10,11 +8,11 @@ import '@shoelace-style/shoelace/dist/components/tab/tab.js'; import { LitElement, css, html, unsafeCSS } from "lit"; import { property, state } from "lit/decorators.js"; -import registerBundledIcons from '../components/icons'; +import registerBundledIcons from '../../components/icons'; registerBundledIcons(); -const hotLogo = new URL('../theme/logo.png', import.meta.url); +const hotLogo = new URL('../../theme/logo.png', import.meta.url); interface MenuItem { label: string, @@ -91,6 +89,11 @@ export class Header extends LitElement { align-items: center; } + #right-section { + display: flex; + align-items: center; + } + sl-tab-group { display: flex; } @@ -114,6 +117,9 @@ export class Header extends LitElement { header { color: black; } + #break { + background-color: black; + } } ` ]; @@ -149,11 +155,20 @@ export class Header extends LitElement { )} - -
- ${this.drawer ? html` - - ` : null} +
+ { this._handleLogin(e)}} + > + +
+ ${this.drawer ? html` + + ` : null} +
`; @@ -163,6 +178,10 @@ export class Header extends LitElement { this.selectedTab = index; clickAction(); } + + private _handleLogin(_e: MouseEvent) { + console.log("Login button clicked"); + } } export default Header; diff --git a/components/icons.ts b/components/icons.ts index 7191213..64ece21 100644 --- a/components/icons.ts +++ b/components/icons.ts @@ -60,6 +60,12 @@ const icons = { `, + 'person-circle': ` + + + + + ` }; const libraryResolver: IconLibraryResolver = (name: string) => { diff --git a/components/index.ts b/components/index.ts index d9335d7..5a9c8af 100644 --- a/components/index.ts +++ b/components/index.ts @@ -1,7 +1,14 @@ // Index to import all components together // import '@hotosm/ui/components'; -export { default as Button } from './Button'; -export { default as Header } from './Header'; -export { default as Toolbar } from './Toolbar'; -export { default as Tracking } from './Tracking'; +// NOTE Must be included or rollup-plugin-css-only does not pick them up +// NOTE the light theme must be imported before the sl-custom override! +import '../theme/hot.css'; +import '@shoelace-style/shoelace/dist/themes/light.css'; +// import '@shoelace-style/shoelace/dist/themes/dark.css'; +import "../theme/sl-custom.css"; + +export { default as Button } from './button/button'; +export { default as Header } from './header/header'; +export { default as Toolbar } from './toolbar/toolbar'; +export { default as Tracking } from './tracking/tracking'; diff --git a/components/Toolbar.ts b/components/toolbar/toolbar.ts similarity index 95% rename from components/Toolbar.ts rename to components/toolbar/toolbar.ts index ad04018..989a541 100644 --- a/components/Toolbar.ts +++ b/components/toolbar/toolbar.ts @@ -1,6 +1,4 @@ -import "../theme/hot.css"; -import '@shoelace-style/shoelace/dist/themes/light.css'; -import '@shoelace-style/shoelace/dist/themes/dark.css'; +import "../../theme/sl-custom.css"; import '@shoelace-style/shoelace/dist/components/button/button.js'; import '@shoelace-style/shoelace/dist/components/button-group/button-group.js'; @@ -10,7 +8,7 @@ import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js'; import { LitElement, css, html, unsafeCSS } from "lit"; import { property } from "lit/decorators.js"; -import registerBundledIcons from '../components/icons'; +import registerBundledIcons from '../../components/icons'; registerBundledIcons(); diff --git a/components/Tracking.ts b/components/tracking/tracking.ts similarity index 95% rename from components/Tracking.ts rename to components/tracking/tracking.ts index 43ec75b..e839a0f 100644 --- a/components/Tracking.ts +++ b/components/tracking/tracking.ts @@ -1,13 +1,11 @@ -import "../theme/hot.css"; -import '@shoelace-style/shoelace/dist/themes/light.css'; -import '@shoelace-style/shoelace/dist/themes/dark.css'; +import "../../theme/sl-custom.css"; import '@shoelace-style/shoelace/dist/components/alert/alert.js'; import { LitElement, css, html, unsafeCSS } from "lit"; import { property, state } from "lit/decorators.js"; -import registerBundledIcons from '../components/icons'; +import registerBundledIcons from '../../components/icons'; registerBundledIcons(); @@ -41,7 +39,6 @@ export class Tracking extends LitElement { #tracking-header { font-weight: var(--sl-font-weight-bold); font-size: var(--sl-font-size-large); - color: #d63f3f; text-align: center; } sl-alert::part(base) { diff --git a/docs/components/hot-button.md b/docs/components/hot-button.md index 236f634..1580e52 100644 --- a/docs/components/hot-button.md +++ b/docs/components/hot-button.md @@ -2,11 +2,12 @@ ## Properties -| Property | Attribute | Type | Default | Description | -|------------|------------|----------------------------|--------------|------------------------------------------------| -| `disabled` | `disabled` | `boolean` | false | Disable the button, greyed out, not clickable. | -| `name` | `name` | `string` | "hot-button" | | -| `variant` | `variant` | `"primary" \| "secondary"` | "primary" | CVA button type. | +| Property | Attribute | Type | Default | Description | +|--------------|---------------|------------|---------------|------------------------------------------------| +| `classGroup` | `class-group` | `variants` | "classGroup1" | CVA button class group. | +| `disabled` | `disabled` | `boolean` | false | Disable the button, greyed out, not clickable. | +| `name` | `name` | `string` | "hot-button" | | +| `variant` | `variant` | `string` | "default" | Type of button. | ## Events diff --git a/docs/components/hot-header.md b/docs/components/hot-header.md index 9c596fc..62e1db2 100644 --- a/docs/components/hot-header.md +++ b/docs/components/hot-header.md @@ -7,4 +7,5 @@ | `drawer` | `drawer` | `boolean` | true | | `logo` | `logo` | `string \| URL` | "hotLogo" | | `name` | `name` | `string` | "hot-header" | +| `tabs` | `tabs` | `MenuItem[]` | [] | | `title` | `title` | `string` | "" | diff --git a/examples/svelte/src/App.svelte b/examples/svelte/src/App.svelte index 08eaf26..80b1bb7 100644 --- a/examples/svelte/src/App.svelte +++ b/examples/svelte/src/App.svelte @@ -1,5 +1,5 @@