@statistikzh/leu 0.15.1 → 0.17.0

package/src/components/message/stories/message.stories.ts

@@ -0,0 +1,149 @@
+import { Meta, StoryObj } from "@storybook/web-components"
+import { html, TemplateResult } from "lit"
+import { action } from "@storybook/addon-actions"
+
+import "../leu-message.js"
+import "../../button/leu-button.js"
+import { LeuMessage } from "../Message.js"
+
+type StoryArgs = LeuMessage
+type Story = StoryObj<StoryArgs>
+
+export default {
+  title: "Components/Message",
+  component: "leu-message",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=316-4172&p=f&t=RVDlqNcmiHHiwE5P-11",
+    },
+  },
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["error", "success", "info", "warning"],
+    },
+    size: {
+      control: "select",
+      options: ["regular", "large"],
+    },
+    "--leu-message-accent-color": {
+      control: {
+        type: "color",
+        presetColors: [
+          "#0076bd",
+          "#00407c",
+          "#00797b",
+          "#1a7f1f",
+          "#b01657",
+          "#d40053",
+          "#7f3da7",
+          "#666666",
+        ],
+      },
+    },
+  },
+  args: {
+    type: "success",
+    size: "regular",
+    removable: true,
+    onRemove: action("leu:remove"),
+  },
+} satisfies Meta<StoryArgs>
+
+const baseRender =
+  (messageContent: (args: StoryArgs) => TemplateResult) => (args: StoryArgs) =>
+    html` <leu-message
+      style="--leu-message-accent-color: ${args["--leu-message-accent-color"] ??
+      "unset"};"
+      type=${args.type}
+      size=${args.size}
+      ?removable=${args.removable}
+      ?popup=${args.popup}
+      @leu:remove=${args.onRemove}
+    >
+      ${messageContent(args)}
+    </leu-message>`
+
+const Template: Story = {
+  render: baseRender(
+    (args) =>
+      html`<strong>Nachricht Titel</strong><br />
+        Beschreibungstext einer Nachricht
+        <leu-button
+          slot="cta"
+          variant="secondary"
+          size="small"
+          ?inverted=${args.type === "error" || args.type === "success"}
+        >
+          Rückgängig
+        </leu-button>`,
+  ),
+}
+
+export const Success = {
+  ...Template,
+  args: {
+    type: "success",
+    size: "large",
+  },
+}
+
+export const Error = {
+  ...Template,
+  args: {
+    type: "error",
+    size: "large",
+  },
+}
+
+export const Warning = {
+  ...Template,
+  args: {
+    type: "warning",
+    size: "large",
+  },
+}
+
+export const Info = {
+  ...Template,
+  render: baseRender(
+    () =>
+      html`<strong>Nachricht Titel</strong><br />
+        Beschreibungstext einer Nachricht`,
+  ),
+  args: {
+    type: "info",
+    size: "large",
+  },
+}
+
+export const CustomColor = {
+  ...Template,
+  render: baseRender(
+    () =>
+      html`<strong>Entscheid wurde auf den 21.12.2024 verschoben</strong><br />
+        Aufgrund ausstehender Abklärungen wurde der Termin verschoben.`,
+  ),
+  args: {
+    type: "info",
+    size: "large",
+    "--message-accent-color": "#00797b",
+  },
+}
+
+export const Small = {
+  ...Template,
+  render: baseRender(() => html`Nachricht ohne Titel`),
+  args: {
+    type: "success",
+  },
+}
+
+export const Popup = {
+  ...Small,
+  args: {
+    ...Small.args,
+    popup: true,
+  },
+}

package/src/components/message/test/message.test.ts

@@ -0,0 +1,96 @@
+import { html } from "lit"
+import { fixture, expect, oneEvent } from "@open-wc/testing"
+
+import "../leu-message.js"
+import { LeuMessage } from "../Message.js"
+import { LeuIcon } from "../../icon/Icon.js"
+
+async function defaultFixture({ removable = false } = {}): Promise<LeuMessage> {
+  return fixture(
+    html`<leu-message ?removable=${removable}>
+      <strong>Entscheid wurde auf den 21.12.2024 verschoben</strong><br />
+      Aufgrund ausstehender Abklärungen wurde der Termin verschoben.
+    </leu-message>`,
+  )
+}
+
+describe("LeuMessage", () => {
+  it("is a defined element", async () => {
+    const el = customElements.get("leu-message")
+
+    expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("renders the message content", async () => {
+    const el = await defaultFixture()
+
+    expect(el).to.contain.text("Entscheid wurde auf den 21.12.2024 verschoben")
+
+    expect(el).to.contain.text(
+      "Aufgrund ausstehender Abklärungen wurde der Termin verschoben.",
+    )
+  })
+
+  it("renders the remove button according to its 'removable' property", async () => {
+    const el = await defaultFixture({ removable: true })
+
+    let removeButton = el.shadowRoot?.querySelector(".message__remove")
+
+    expect(removeButton).to.exist
+
+    el.removable = false
+    await el.updateComplete
+
+    removeButton = el.shadowRoot?.querySelector(".message__remove")
+
+    expect(removeButton).to.not.exist
+  })
+
+  it("dispatches 'leu:remove' event when remove button is clicked", async () => {
+    const el = await defaultFixture({ removable: true })
+
+    const button = el.shadowRoot?.querySelector(
+      ".message__remove",
+    ) as HTMLButtonElement
+
+    setTimeout(() => button.click())
+
+    const event = await oneEvent(el, "leu:remove", false)
+
+    expect(event).to.exist
+  })
+
+  it("renders the correct icon based on the type", async () => {
+    const el = await defaultFixture()
+
+    const icon = el.shadowRoot?.querySelector(".message__icon") as LeuIcon
+
+    expect(icon).to.exist
+
+    el.type = "success"
+    await el.updateComplete
+
+    expect(icon.name).to.equal("confirm")
+
+    el.type = "error"
+    await el.updateComplete
+
+    expect(icon.name).to.equal("caution")
+
+    el.type = "info"
+    await el.updateComplete
+
+    expect(icon.name).to.equal("getInformation")
+
+    el.type = "warning"
+    await el.updateComplete
+
+    expect(icon.name).to.equal("caution")
+  })
+})

package/src/components/tag/Tag.ts

@@ -0,0 +1,28 @@
+import { html } from "lit"
+import { property } from "lit/decorators.js"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
+import styles from "./tag.css"
+
+/**
+ * @tagname leu-tag
+ * @cssprop --leu-tag-accent-color - The color of the tag
+ * @slot default - The label of the tag
+ * @slot icon - An icon to display in the tag
+ */
+export class LeuTag extends LeuElement {
+  static styles = [LeuElement.styles, styles]
+
+  @property({ type: String })
+  variant: "solid" | "outline" | "ghost" = "solid"
+
+  render() {
+    return html`
+      <div class="tag tag--${this.variant}">
+        <slot class="tag__icon" name="icon"></slot>
+        <slot class="tag__label"></slot>
+      </div>
+    `
+  }
+}

package/src/components/tag/leu-tag.ts

@@ -0,0 +1,5 @@
+import { LeuTag } from "./Tag.js"
+
+export { LeuTag }
+
+LeuTag.define("leu-tag")

package/src/components/tag/stories/tag.stories.ts

@@ -0,0 +1,107 @@
+import { Meta, StoryObj } from "@storybook/web-components"
+import { html } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
+
+import "../leu-tag.js"
+import "../../icon/leu-icon.js"
+import { LeuTag } from "../Tag.js"
+
+import { paths as iconPaths } from "../../icon/paths.js"
+
+type StoryArgs = LeuTag
+type Story = StoryObj<StoryArgs>
+
+export default {
+  title: "Components/Tag",
+  component: "leu-tag",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=21161-184432&t=QMYWpoD4FMWFrUkK-11",
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["solid", "outline", "ghost"],
+    },
+    "--leu-tag-accent-color": {
+      control: {
+        type: "color",
+        presetColors: [
+          "#0076bd",
+          "#00407c",
+          "#00797b",
+          "#1a7f1f",
+          "#b01657",
+          "#d40053",
+          "#7f3da7",
+          "#666666",
+          "#009ee0",
+          "#d93c1a",
+          "#1a7f1f",
+        ],
+      },
+    },
+    icon: { control: "select", options: Object.keys(iconPaths) },
+  },
+  args: {
+    variant: "solid",
+    icon: "confirm",
+    default: "Abgeschlossen",
+    "--leu-tag-accent-color": "#7f3da7",
+  },
+} satisfies Meta<StoryArgs>
+
+const Template: Story = {
+  render: (args: StoryArgs) =>
+    html` <leu-tag
+      variant=${ifDefined(args.variant)}
+      style="--leu-tag-accent-color: ${args["--leu-tag-accent-color"] ??
+      "unset"}"
+    >
+      ${args.icon
+        ? html`<leu-icon slot="icon" name=${args.icon}></leu-icon>`
+        : ""}
+      ${args.default}</leu-tag
+    >`,
+}
+
+export const Solid = {
+  ...Template,
+  args: {
+    variant: "solid",
+  },
+}
+
+export const Outline = {
+  ...Template,
+  args: {
+    variant: "outline",
+  },
+}
+
+export const Ghost = {
+  ...Template,
+  args: {
+    variant: "ghost",
+  },
+}
+
+export const Warning = {
+  ...Template,
+  args: {
+    variant: "solid",
+    "--leu-tag-accent-color": "#d93c1a",
+    default: "Abgelaufen",
+  },
+}
+
+export const NoIcon = {
+  ...Template,
+  args: {
+    variant: "solid",
+    "--leu-tag-accent-color": "#7f3da7",
+    icon: undefined,
+  },
+}

package/src/components/tag/tag.css

@@ -0,0 +1,42 @@
+:host {
+  /* --tag-font-regular: var(--leu-font-family-regular);
+  --tag-font-black: var(--leu-font-family-black);
+
+  font-family: var(--tag-font-regular); */
+}
+
+.tag {
+  --_accent-color: var(--leu-tag-accent-color, var(--leu-color-black-60));
+
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  gap: 0.25rem;
+  border-radius: 0.25rem;
+
+  background-color: var(--_accent-color);
+  border: 2px solid var(--_accent-color);
+  color: var(--leu-color-black-0);
+}
+
+.tag--outline {
+  background-color: transparent;
+  border-color: var(--_accent-color);
+  color: var(--_accent-color);
+}
+
+.tag--ghost {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--_accent-color);
+}
+
+.tag__icon {
+  --leu-icon-size: 1rem;
+}
+
+.tag__label {
+  display: block;
+  font: var(--leu-t-tiny-regular-font);
+  line-height: 1rem;
+}

package/src/components/tag/test/tag.test.ts

@@ -0,0 +1,28 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-tag.js"
+
+async function defaultFixture() {
+  return fixture(html`<leu-tag>Abgeschlossen</leu-tag>`)
+}
+
+describe("LeuTag", () => {
+  it("is a defined element", async () => {
+    const el = customElements.get("leu-tag")
+
+    expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("renders with default slot content", async () => {
+    const el = await defaultFixture()
+
+    expect(el).to.have.trimmed.text("Abgeschlossen")
+  })
+})

package/src/docs/theme.mdx

@@ -59,6 +59,7 @@ This is helpful if you want to use the it to style your application or to build
 ## Table of Contents
 
 - [Design System](#design-system)
+- [Quick start](#quick-start)
 - [Structure of the file](#structure-of-the-file)
 - [Custom property naming](#custom-property-naming)
 - [Colors](#colors)
@@ -75,6 +76,50 @@ The theme is based on the official [design system](https://www.zh.ch/de/webangeb
 Currently there is no automatic workflow that generates the theme from the design system. The theme is manually updated when the design system changes.
 If you spot any inconsistencies between the theme and the design system, please open an issue.
 
+## Quick start
+
+The following css snippet is a good starting point when you want to use the theme to style your application.
+Details about the specific definitions can be found in the content below.
+
+```css
+html {
+  font-family: var(--leu-font-family-regular);
+  font-feature-settings: var(--leu-t-font-feature-settings);
+
+  /* Prevent browser from synthesizing font weights */
+  font-synthesis-weight: none;
+}
+
+strong {
+  font-family: var(--leu-font-family-black);
+}
+
+/* Heading style mapping. Use whatever selector make sense in your project. */
+h1 {
+  font: var(--leu-t-curve-huge-black-font);
+}
+
+h2 {
+  font: var(--leu-t-curve-large-black-font);
+}
+
+h3 {
+  font: var(--leu-t-curve-medium-black-font);
+}
+
+h4 {
+  font: var(--leu-t-curve-regular-black-font);
+}
+
+/*
+ * Prevent "Flash of Unstyled Custom Elements" (FOUCE)
+ * https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements
+ */
+:not(:defined) {
+  visibility: hidden;
+}
+```
+
 ## Structure of the file
 
 The theme contains custom properties for:
@@ -175,6 +220,8 @@ box-shadow: var(--leu-box-shadow-short);
 
 ## z-index
 
+TODO
+
 ## Typography
 
 The design system is based on the [Inter](https://rsms.me/inter/) font family. It just uses the `regular` and `black` weights.
@@ -306,9 +353,9 @@ h1 {
 
 As the theme only consist of custom properties, it isn't possible to provide a full set of grid classes.
 Instead the theme contains just five necessary values that can be applied directly.
+This approach helps us to keep the css footprint as small as possible.
 Most components don't need a grid anyway and those who do mostly have a very simple configuration.
-Alternatively you can use to build your own classes for your application.
-This aproach helps us to keep the css footprint small.
+Alternatively you can use the variables to build your own classes. You can find a possible implementation in this [GitHub Gist](https://gist.github.com/daenub/735d657cc0bf297e9a7d2015f003084c).
 
 The official design system uses a 6 columns system on smaller screens.
 For simplicity we use a 12 column grid for all breakpoints.

package/src/styles/custom-media.css

@@ -1,4 +1,5 @@
 @custom-media --viewport-small (min-width: 400px);
+@custom-media --viewport-small-max (max-width: 599px);
 @custom-media --viewport-regular (min-width: 600px);
 @custom-media --viewport-medium (min-width: 840px);
 @custom-media --viewport-large (min-width: 1024px);