@statistikzh/leu 0.15.1 → 0.17.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@statistikzh/leu",
-  "version": "0.15.1",
+  "version": "0.17.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -65,33 +65,6 @@
             "events": []
           }
         },
-        {
-          "name": "leu-button-group",
-          "description": "A radio input-like button group component.\nIt allows only one button to be active at a time.\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [{ "name": "", "description": "Slot for the buttons" }],
-          "events": [
-            {
-              "name": "input",
-              "description": "When the value of the group changes by clicking a button"
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "The value of the currently selected (active) button"
-              }
-            ],
-            "events": [
-              {
-                "name": "input",
-                "description": "When the value of the group changes by clicking a button"
-              }
-            ]
-          }
-        },
         {
           "name": "leu-button",
           "description": "\n---\n\n\n### **Slots:**\n - **before** - The icon to display before the label\n- **after** - The icon to display after the label\n- _default_ - The label of the button or the icon if no label is set",
@@ -238,6 +211,33 @@
             "events": []
           }
         },
+        {
+          "name": "leu-button-group",
+          "description": "A radio input-like button group component.\nIt allows only one button to be active at a time.\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [{ "name": "", "description": "Slot for the buttons" }],
+          "events": [
+            {
+              "name": "input",
+              "description": "When the value of the group changes by clicking a button"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The value of the currently selected (active) button"
+              }
+            ],
+            "events": [
+              {
+                "name": "input",
+                "description": "When the value of the group changes by clicking a button"
+              }
+            ]
+          }
+        },
         {
           "name": "leu-chart-wrapper",
           "description": "A wrapper element for charts.\n---\n\n\n### **Slots:**\n - **title** - The title of the chart. Use a heading tag (h2-4) depending on your context.\n- **description** - A description of the chart. Content is wrapped in a `<p>` tag by the component.\n- **chart** - The actual chart\n- **caption** - A caption for the chart, e.g. a source or explanation of the data.\n- **download** - A download button or dropdown to export the chart in different formats.",
@@ -969,6 +969,87 @@
             "events": []
           }
         },
+        {
+          "name": "leu-message",
+          "description": "\n---\n\n\n### **Events:**\n - **leu:remove** - Fired when the close button is clicked.\n\n### **Slots:**\n - **default** - The content of the message. The title of the message should marked up with a `<strong>` tag.\n- **cta** - A call to action button that is only allowed for `size=large`\n\n### **CSS Properties:**\n - **--leu-message-accent-color** - Sets the color of the message. According to the design system, it is only allowd for `info` _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "type",
+              "description": "The type of the message. `error` and `success` will be displayed as filled boxes.",
+              "value": {
+                "type": "\"error\" | \"success\" | \"info\" | \"warning\"",
+                "default": "\"success\""
+              }
+            },
+            {
+              "name": "size",
+              "description": "The size of the message. A call to action button is only allowed for `large` messages.",
+              "value": {
+                "type": "\"regular\" | \"large\"",
+                "default": "\"regular\""
+              }
+            },
+            {
+              "name": "removable",
+              "description": "Wheter the message is removable or not. The component will not remove itself when the close button is clicked.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "popup",
+              "description": "Wheter the message is used as a popup or not. This will add a drop shadow but will not position the message absolutely.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "The content of the message. The title of the message should marked up with a `<strong>` tag."
+            },
+            {
+              "name": "cta",
+              "description": "A call to action button that is only allowed for `size=large`"
+            }
+          ],
+          "events": [
+            {
+              "name": "leu:remove",
+              "type": "CustomEvent",
+              "description": "Fired when the close button is clicked."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "type",
+                "description": "The type of the message. `error` and `success` will be displayed as filled boxes.",
+                "type": "\"error\" | \"success\" | \"info\" | \"warning\""
+              },
+              {
+                "name": "size",
+                "description": "The size of the message. A call to action button is only allowed for `large` messages.",
+                "type": "\"regular\" | \"large\""
+              },
+              {
+                "name": "removable",
+                "description": "Wheter the message is removable or not. The component will not remove itself when the close button is clicked.",
+                "type": "boolean"
+              },
+              {
+                "name": "popup",
+                "description": "Wheter the message is used as a popup or not. This will add a drop shadow but will not position the message absolutely.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "leu:remove",
+                "type": "CustomEvent",
+                "description": "Fired when the close button is clicked."
+              }
+            ]
+          }
+        },
         {
           "name": "leu-pagination",
           "description": "\n---\n\n\n### **Events:**\n - **leu:pagechange**",
@@ -1433,6 +1514,34 @@
             "events": []
           }
         },
+        {
+          "name": "leu-tag",
+          "description": "\n---\n\n\n### **Slots:**\n - **default** - The label of the tag\n- **icon** - An icon to display in the tag\n\n### **CSS Properties:**\n - **--leu-tag-accent-color** - The color of the tag _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "value": {
+                "type": "\"solid\" | \"outline\" | \"ghost\"",
+                "default": "\"solid\""
+              }
+            }
+          ],
+          "slots": [
+            { "name": "default", "description": "The label of the tag" },
+            { "name": "icon", "description": "An icon to display in the tag" }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "type": "\"solid\" | \"outline\" | \"ghost\""
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "leu-visually-hidden",
           "description": "\n---\n",

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.15.1",
+  "version": "0.17.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/components/message/Message.ts

@@ -0,0 +1,118 @@
+import { html, nothing } from "lit"
+import { property } from "lit/decorators.js"
+import { classMap } from "lit/directives/class-map.js"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
+import styles from "./message.css"
+import { LeuIcon } from "../icon/Icon.js"
+import { HasSlotController } from "../../lib/hasSlotController.js"
+
+/**
+ * @tagname leu-message
+ * @cssprop --leu-message-accent-color - Sets the color of the message. According to the design system, it is only allowd for `info`
+ * @slot [default] - The content of the message. The title of the message should marked up with a `<strong>` tag.
+ * @slot cta - A call to action button that is only allowed for `size=large`
+ * @fires leu:remove - Fired when the close button is clicked.
+ */
+export class LeuMessage extends LeuElement {
+  static styles = [LeuElement.styles, styles]
+
+  /**
+   * @internal
+   */
+  static shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  /**
+   * @internal
+   */
+  static dependencies = {
+    "leu-icon": LeuIcon,
+  }
+
+  /**
+   * @internal
+   */
+  static iconToTypeMap = {
+    info: "getInformation",
+    error: "caution",
+    success: "confirm",
+    warning: "caution",
+  }
+
+  /**
+   * The type of the message. `error` and `success` will be displayed as filled boxes.
+   */
+  @property({ type: String, reflect: true })
+  type: "error" | "success" | "info" | "warning" = "success"
+
+  /**
+   * The size of the message. A call to action button is only allowed for `large` messages.
+   */
+  @property({ type: String, reflect: true })
+  size: "regular" | "large" = "regular"
+
+  /**
+   * Wheter the message is removable or not. The component will not remove itself when the close button is clicked.
+   */
+  @property({ type: Boolean, reflect: true })
+  removable: boolean = false
+
+  /**
+   * Wheter the message is used as a popup or not. This will add a drop shadow but will not position the message absolutely.
+   */
+  @property({ type: Boolean, reflect: true })
+  popup: boolean = false
+
+  private hasSlotController = new HasSlotController(this, ["cta"])
+
+  protected renderIcon() {
+    const name = LeuMessage.iconToTypeMap[this.type]
+
+    return html`<leu-icon class="message__icon" name=${name}></leu-icon>`
+  }
+
+  protected handleRemove() {
+    this.dispatchEvent(
+      new CustomEvent("leu:remove", {
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  render() {
+    const hasCta = this.hasSlotController.test("cta")
+    const classes = classMap({
+      message: true,
+      "message--filled": this.type === "error" || this.type === "success",
+      "message--popup": this.popup,
+      [`message--${this.size}`]: true,
+      [`message--${this.type}`]: true,
+    })
+
+    return html`
+      <div class="${classes}">
+        ${this.renderIcon()}
+        <p class="message__content">
+          <slot></slot>
+        </p>
+        ${hasCta
+          ? html`<slot class="message__cta" name="cta"></slot>`
+          : nothing}
+        ${this.removable
+          ? html`<button
+              class="message__remove"
+              aria-label="Meldung schliessen"
+              @click=${this.handleRemove}
+            >
+              <leu-icon class="message__remove-icon" name="close"></leu-icon>
+            </button>`
+          : nothing}
+      </div>
+    `
+  }
+}

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

@@ -0,0 +1,5 @@
+import { LeuMessage } from "./Message.js"
+
+export { LeuMessage }
+
+LeuMessage.define("leu-message")

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 />
+```