@statistikzh/leu 0.15.1 → 0.16.0

package/src/components/message/stories/message.mdx

@@ -0,0 +1,76 @@
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks"
+
+import * as MessageStories from "./message.stories"
+
+<Meta of={MessageStories} />
+
+# Message
+
+A message component that can be used to display feedback, alerts, or important information to the user.
+
+[Meldungen | Design System | zh.ch](https://www.zh.ch/de/webangebote-entwickeln-und-gestalten/inhalt/designsystem/komponenten/meldungen.zhweb-noredirect.zhweb-cache.html?node-id=18369%3A164719&node-id=18369%3A163396&node-id=18369%3A166594&search=meldung) <br />
+
+## Background
+
+The message can appear with a colored background or with a white background. The appearance depends on the `type` attribute:
+
+`success` and `warning` will have a colored background.
+
+<Canvas of={MessageStories.Success} />
+<Canvas of={MessageStories.Error} />
+
+While `error` and `info` will have a white background.
+
+<Canvas of={MessageStories.Warning} />
+<Canvas of={MessageStories.Info} />
+
+## Content
+
+The text content can simply be passed into the default slot. The optional title of the message has to be marked up with a `<strong>` tag.
+
+```html
+<leu-message>
+  <strong>Title of the message</strong><br />
+  This is the content of the message. It can span multiple lines.
+</leu-message>
+```
+
+## Size
+
+The message component can be rendered in two sizes: `small` and `large`.
+The `small` size does not allow for a call to action button and a title.
+
+## Call to action button
+
+A call to action button can added to the message by using the `cta` slot. This is only allowed for the `large` size.
+Be aware that you have to set the `inverted` attribute on the button if you use it on a colored background.
+The component does not handle any events of the button.
+
+## Remove button
+
+With setting the `removable` attribute, a close button will be displayed in the top right corner of the message.
+The component does not remove itself from the DOM, but it will dispatch a `leu:remove` event when the close button is clicked.
+
+## Popup / Toast
+
+If you use the message as a toast or lay it over other content, you can set the `popup` attribute.
+This will add box shadow to the message.
+
+<Canvas of={MessageStories.Popup} />
+
+## Custom accent colored
+
+While `success`, `warning`, and `error` have a predefined accent color, you can set a custom accent color for the `info` type.
+Just set the `--leu-message-accent-color` css custom property on the message element.
+
+<Canvas of={MessageStories.CustomColor} />
+
+## Accessibility
+
+We have decided to not use the `role="alert"` or the
+`aria-live` attribute as the message component can be used in various contexts.
+We simply can't predict which role or which `aria-live` value would make sense.
+Please ensure that you add the appropriate role or attribute yourself.
+
+<Controls />
+```

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/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);