@statistikzh/leu 0.15.0 → 0.16.0

package/src/components/message/message.css

@@ -0,0 +1,163 @@
+@import url("../../styles/custom-media.css");
+
+:host {
+  font-family: var(--leu-font-family-regular);
+}
+
+.message {
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+
+  padding: var(--_padding);
+  border-radius: 0.25rem;
+  overflow: hidden;
+
+  background-color: var(--leu-color-black-0);
+  color: var(--_accent-color);
+}
+
+.message::before {
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  width: 0.25rem;
+  height: 100%;
+  background-color: var(--_accent-color);
+}
+
+.message--error {
+  --_accent-color: var(--leu-message-accent-color, var(--leu-color-func-red));
+}
+
+.message--warning {
+  --_accent-color: var(--leu-message-accent-color, var(--leu-color-func-red));
+}
+
+.message--success {
+  --_accent-color: var(--leu-message-accent-color, var(--leu-color-func-green));
+}
+
+.message--info {
+  --_accent-color: var(
+    --leu-message-accent-color,
+    var(--leu-color-accent-violet)
+  );
+}
+
+.message--filled {
+  background-color: var(--_accent-color);
+  color: var(--leu-color-black-0);
+}
+
+.message--filled::before {
+  content: none;
+}
+
+.message--regular {
+  --_padding: 0.75rem;
+  --_icon-size: 24px;
+
+  @media (--viewport-large) {
+    --_padding: 1rem;
+  }
+}
+
+.message--large {
+  --_padding: 1rem;
+  --_icon-size: 32px;
+
+  @media (--viewport-small-max) {
+    flex-flow: column;
+    align-items: start;
+    gap: 0.75rem;
+  }
+
+  @media (--viewport-regular) {
+    --_padding: 1.25rem;
+  }
+
+  @media (--viewport-large) {
+    --_padding: 1.5rem;
+  }
+}
+
+.message--popup {
+  box-shadow: var(--leu-box-shadow-regular);
+}
+
+.message__icon {
+  --leu-icon-size: var(--_icon-size);
+
+  display: block;
+  flex: 0 0 min-content;
+}
+
+.message__content {
+  flex: 1 1 auto;
+  font: var(--leu-t-curve-small-regular-font);
+  margin: 0 0.5rem;
+
+  @media (--viewport-regular) {
+    margin-inline: 0.75rem;
+  }
+
+  @media (--viewport-large) {
+    margin-inline: 1rem;
+  }
+}
+
+.message--large .message__content {
+  @media (--viewport-small-max) {
+    margin-inline: 0;
+  }
+}
+
+.message__content ::slotted(strong) {
+  font-family: var(--leu-font-family-black);
+  font-weight: normal;
+}
+
+.message__cta {
+  display: block;
+  flex: 0 0 min-content;
+  margin-inline-end: 0.5rem;
+}
+
+.message__remove {
+  flex: 0 0 min-content;
+  border: none;
+  background: none;
+  padding: 0;
+  color: var(--leu-color-black-60);
+  cursor: pointer;
+}
+
+.message__remove:where(:hover, :focus-visible) {
+  color: var(--leu-color-black-40);
+}
+
+.message--filled .message__remove {
+  color: var(--leu-color-black-0);
+}
+
+.message--filled .message__remove:where(:hover, :focus-visible) {
+  color: var(--leu-color-white-transp-70);
+}
+
+.message--large .message__remove {
+  position: absolute;
+  inset-block-start: var(--_padding);
+  inset-inline-end: var(--_padding);
+
+  @media (--viewport-regular) {
+    position: static;
+    inset: auto;
+  }
+}
+
+.message__remove-icon {
+  --leu-icon-size: 1.5rem;
+}

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/docs/contributing.mdx

@@ -92,7 +92,7 @@ window.customElements.define("leu-input", LeuInput)
 ### Scoped styles
 
 All CSS declarations have to live inside a custom element. This way we ensure that the styles won't interfere with the environment they're loaded into.
-Styles that are shared between components should be defined as global custom properties inside the `styles/custom-properties.css`.
+Styles that are shared between components should be defined as global custom properties inside the `styles/theme.css`.
 When a global custom property is used inside a component it could be a good practice to assign them to a local custom property with a semantic naming.
 This only make a sense when the component has a certain complexity and the global custom property are used multiple times.
 

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from "./components/accordion/Accordion.js"
 export * from "./components/button/Button.js"
 export * from "./components/button-group/ButtonGroup.js"
+export * from "./components/chart-wrapper/ChartWrapper.js"
 export * from "./components/checkbox/Checkbox.js"
 export * from "./components/checkbox/CheckboxGroup.js"
 export * from "./components/chip/exports.js"

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

package/src/styles/theme.css

@@ -1 +1,89 @@
-@import url("./custom-properties.css");
+@import url("./custom-media.css");
+
+:root,
+:host {
+  --leu-color-black-100: #000;
+  --leu-color-black-80: #333;
+  --leu-color-black-60: #666;
+  --leu-color-black-40: #949494;
+  --leu-color-black-20: #ccc;
+  --leu-color-black-10: #f0f0f0;
+  --leu-color-black-5: #f7f7f7;
+  --leu-color-black-0: #fffffe;
+
+  --leu-color-black-transp-80: rgb(0 0 0 / 80%);
+  --leu-color-black-transp-60: rgb(0 0 0 / 60%);
+  --leu-color-black-transp-40: rgb(0 0 0 / 40%);
+  --leu-color-black-transp-20: rgb(0 0 0 / 20%);
+  --leu-color-black-transp-10: rgb(0 0 0 / 10%);
+  --leu-color-black-transp-5: rgb(0 0 0 / 5%);
+
+  --leu-color-white-transp-90: rgb(255 255 255 / 90%);
+  --leu-color-white-transp-70: rgb(255 255 255 / 70%);
+  --leu-color-white-transp-40: rgb(255 255 255 / 40%);
+  --leu-color-white-transp-10: rgb(255 255 255 / 10%);
+
+  --leu-color-accent-blue: #0076bd;
+  --leu-color-accent-darkblue: #00407c;
+  --leu-color-accent-turquoise: #00797b;
+  --leu-color-accent-green: #1a7f1f;
+  --leu-color-accent-bordeaux: #b01657;
+  --leu-color-accent-magenta: #d40053;
+  --leu-color-accent-violet: #7f3da7;
+  --leu-color-accent-gray: var(--leu-color-black-60);
+
+  --leu-color-accent-blue-soft: #edf5fa;
+  --leu-color-accent-darkblue-soft: #e0e8ee;
+  --leu-color-accent-turquoise-soft: #e8f3f2;
+  --leu-color-accent-green-soft: #ebf6eb;
+  --leu-color-accent-bordeaux-soft: #f6e3ea;
+  --leu-color-accent-magenta-soft: #fcedf3;
+  --leu-color-accent-violet-soft: #ece2f1;
+  --leu-color-accent-gray-soft: var(--leu-color-black-10);
+
+  --leu-color-func-cyan: #009ee0;
+  --leu-color-func-red: #d93c1a;
+  --leu-color-func-green: #1a7f1f;
+
+  /* stylelint-disable value-keyword-case */
+  --leu-font-family-regular:
+    "InterRegular", "HelveticaNowRegular", "Helvetica", sans-serif;
+  --leu-font-family-black:
+    "InterBlack", "HelveticaNowBlack", "Arial Black", "Helvetica", sans-serif;
+  /* stylelint-enable value-keyword-case */
+
+  --leu-box-shadow-short: 0px 0px 2px var(--leu-color-black-transp-40);
+  --leu-box-shadow-regular: 0px 0px 16px var(--leu-color-black-transp-20);
+  --leu-box-shadow-long: 0px 0px 80px var(--leu-color-black-transp-20);
+
+  --leu-z-index-popup: 100;
+
+  @leu-font-styles './font-definitions.json';
+  --leu-t-font-feature-settings: "ss07", "ss08", "cv03", "cv04", "cv10";
+
+  /*
+   * Grid system
+   *
+   * The design system uses a 6 columns system on smaller screens.
+   * For simplicity we use a 12 column grid for all breakpoints (zh web implementation does the same).
+   *
+   * The goal is to keep the css footprint small
+   * by not generating all classes for every cell width for every breakpoint.
+   * Most components don't need a grid and those who do probably have a very simple configuration.
+   * If we have enough use cases for a more complex grid system we can add it later.
+   */
+  --leu-grid-gap: 1rem;
+  --leu-grid-template-columns: repeat(12, minmax(0, 4.25rem));
+  --leu-grid-max-width: 73rem;
+
+  --leu-grid-columns-full: 1 / -1;
+  --leu-grid-columns-offset: 1 / -1;
+
+  @media (--viewport-regular) {
+    --leu-grid-columns-offset: 3 / -1;
+  }
+
+  @media (--viewport-medium) {
+    --leu-grid-gap: 2rem;
+  }
+}

package/dist/components/visualization/test/chart-wrapper.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chart-wrapper.test.d.ts","sourceRoot":"","sources":["../../../../src/components/visualization/test/chart-wrapper.test.ts"],"names":[],"mappings":"AAGA,OAAO,yBAAyB,CAAA"}

package/src/styles/custom-properties.css

@@ -1,89 +0,0 @@
-@import url("./custom-media.css");
-
-:root,
-:host {
-  --leu-color-black-100: #000;
-  --leu-color-black-80: #333;
-  --leu-color-black-60: #666;
-  --leu-color-black-40: #949494;
-  --leu-color-black-20: #ccc;
-  --leu-color-black-10: #f0f0f0;
-  --leu-color-black-5: #f7f7f7;
-  --leu-color-black-0: #fffffe;
-
-  --leu-color-black-transp-80: rgb(0 0 0 / 80%);
-  --leu-color-black-transp-60: rgb(0 0 0 / 60%);
-  --leu-color-black-transp-40: rgb(0 0 0 / 40%);
-  --leu-color-black-transp-20: rgb(0 0 0 / 20%);
-  --leu-color-black-transp-10: rgb(0 0 0 / 10%);
-  --leu-color-black-transp-5: rgb(0 0 0 / 5%);
-
-  --leu-color-white-transp-90: rgb(255 255 255 / 90%);
-  --leu-color-white-transp-70: rgb(255 255 255 / 70%);
-  --leu-color-white-transp-40: rgb(255 255 255 / 40%);
-  --leu-color-white-transp-10: rgb(255 255 255 / 10%);
-
-  --leu-color-accent-blue: #0076bd;
-  --leu-color-accent-darkblue: #00407c;
-  --leu-color-accent-turquoise: #00797b;
-  --leu-color-accent-green: #1a7f1f;
-  --leu-color-accent-bordeaux: #b01657;
-  --leu-color-accent-magenta: #d40053;
-  --leu-color-accent-violet: #7f3da7;
-  --leu-color-accent-gray: var(--leu-color-black-60);
-
-  --leu-color-accent-blue-soft: #edf5fa;
-  --leu-color-accent-darkblue-soft: #e0e8ee;
-  --leu-color-accent-turquoise-soft: #e8f3f2;
-  --leu-color-accent-green-soft: #ebf6eb;
-  --leu-color-accent-bordeaux-soft: #f6e3ea;
-  --leu-color-accent-magenta-soft: #fcedf3;
-  --leu-color-accent-violet-soft: #ece2f1;
-  --leu-color-accent-gray-soft: var(--leu-color-black-10);
-
-  --leu-color-func-cyan: #009ee0;
-  --leu-color-func-red: #d93c1a;
-  --leu-color-func-green: #1a7f1f;
-
-  /* stylelint-disable value-keyword-case */
-  --leu-font-family-regular:
-    "InterRegular", "HelveticaNowRegular", "Helvetica", sans-serif;
-  --leu-font-family-black:
-    "InterBlack", "HelveticaNowBlack", "Arial Black", "Helvetica", sans-serif;
-  /* stylelint-enable value-keyword-case */
-
-  --leu-box-shadow-short: 0px 0px 2px var(--leu-color-black-transp-40);
-  --leu-box-shadow-regular: 0px 0px 16px var(--leu-color-black-transp-20);
-  --leu-box-shadow-long: 0px 0px 80px var(--leu-color-black-transp-20);
-
-  --leu-z-index-popup: 100;
-
-  @leu-font-styles './font-definitions.json';
-  --leu-t-font-feature-settings: "ss07", "ss08", "cv03", "cv04", "cv10";
-
-  /*
-   * Grid system
-   *
-   * The design system uses a 6 columns system on smaller screens.
-   * For simplicity we use a 12 column grid for all breakpoints (zh web implementation does the same).
-   *
-   * The goal is to keep the css footprint small
-   * by not generating all classes for every cell width for every breakpoint.
-   * Most components don't need a grid and those who do probably have a very simple configuration.
-   * If we have enough use cases for a more complex grid system we can add it later.
-   */
-  --leu-grid-gap: 1rem;
-  --leu-grid-template-columns: repeat(12, minmax(0, 4.25rem));
-  --leu-grid-max-width: 73rem;
-
-  --leu-grid-columns-full: 1 / -1;
-  --leu-grid-columns-offset: 1 / -1;
-
-  @media (--viewport-regular) {
-    --leu-grid-columns-offset: 3 / -1;
-  }
-
-  @media (--viewport-medium) {
-    --leu-grid-gap: 2rem;
-  }
-}