@statistikzh/leu 0.15.1 → 0.16.0

package/dist/vscode.html-custom-data.json

@@ -34,17 +34,6 @@
         }
       ]
     },
-    {
-      "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",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://statistikzh.github.io/leu/?path=/story/button-group"
-        }
-      ]
-    },
     {
       "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",
@@ -120,6 +109,17 @@
         }
       ]
     },
+    {
+      "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",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://statistikzh.github.io/leu/?path=/story/button-group"
+        }
+      ]
+    },
     {
       "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.",
@@ -491,6 +491,43 @@
         }
       ]
     },
+    {
+      "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)_",
+      "attributes": [
+        {
+          "name": "type",
+          "description": "The type of the message. `error` and `success` will be displayed as filled boxes.",
+          "values": [
+            { "name": "error" },
+            { "name": "success" },
+            { "name": "info" },
+            { "name": "warning" }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "The size of the message. A call to action button is only allowed for `large` messages.",
+          "values": [{ "name": "regular" }, { "name": "large" }]
+        },
+        {
+          "name": "removable",
+          "description": "Wheter the message is removable or not. The component will not remove itself when the close button is clicked.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://statistikzh.github.io/leu/?path=/story/message"
+        }
+      ]
+    },
     {
       "name": "leu-pagination",
       "description": "\n---\n\n\n### **Events:**\n - **leu:pagechange**",

package/dist/vue/index.d.ts

@@ -1,8 +1,8 @@
 import type { DefineComponent } from "vue";
 
 import type { LeuAccordion } from "../Accordion.js";
-import type { LeuButtonGroup } from "../ButtonGroup.js";
 import type { LeuButton } from "../Button.js";
+import type { LeuButtonGroup } from "../ButtonGroup.js";
 import type { LeuChartWrapper } from "../ChartWrapper.js";
 import type { LeuCheckbox } from "../Checkbox.js";
 import type { LeuCheckboxGroup } from "../CheckboxGroup.js";
@@ -16,6 +16,7 @@ import type { LeuIcon } from "../Icon.js";
 import type { LeuInput, CustomEvent } from "../Input.js";
 import type { LeuMenu } from "../Menu.js";
 import type { LeuMenuItem } from "../MenuItem.js";
+import type { LeuMessage, CustomEvent } from "../Message.js";
 import type { LeuPagination, CustomEvent } from "../Pagination.js";
 import type { LeuPlaceholder } from "../Placeholder.js";
 import type { LeuPopup } from "../Popup.js";
@@ -39,13 +40,6 @@ type LeuAccordionProps = {
   label?: LeuAccordion["label"];
 };
 
-type LeuButtonGroupProps = {
-  /** The value of the currently selected (active) button */
-  value?: LeuButtonGroup["value"];
-  /** When the value of the group changes by clicking a button */
-  oninput?: (e: CustomEvent<never>) => void;
-};
-
 type LeuButtonProps = {
   /** `aria-label` of the underlying button elements.
 Use it to provide a label when only an icon is visible. */
@@ -77,6 +71,13 @@ If it is set, the icon will either show an expanded or collapsed state. */
   fluid?: LeuButton["fluid"];
 };
 
+type LeuButtonGroupProps = {
+  /** The value of the currently selected (active) button */
+  value?: LeuButtonGroup["value"];
+  /** When the value of the group changes by clicking a button */
+  oninput?: (e: CustomEvent<never>) => void;
+};
+
 type LeuChartWrapperProps = {
   /** Whether the chart is currently loading or not.
 When set to `true`, a spinner will be shown in the chart container. */
@@ -263,6 +264,20 @@ type LeuMenuItemProps = {
   componentRole?: LeuMenuItem["componentRole"];
 };
 
+type LeuMessageProps = {
+  /** The type of the message. `error` and `success` will be displayed as filled boxes. */
+  type?: LeuMessage["type"];
+  /** The size of the message. A call to action button is only allowed for `large` messages. */
+  size?: LeuMessage["size"];
+  /** Wheter the message is removable or not. The component will not remove itself when the close button is clicked. */
+  removable?: LeuMessage["removable"];
+  /** Wheter the message is used as a popup or not. This will add a drop shadow but will not position the message absolutely. */
+  popup?: LeuMessage["popup"];
+
+  /** Fired when the close button is clicked. */
+  "onleu:remove"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
 type LeuPaginationProps = {
   /**  */
   defaultPage?: LeuPagination["defaultPage"];
@@ -448,30 +463,30 @@ export type CustomElements = {
   "leu-accordion": DefineComponent<LeuAccordionProps>;
 
   /**
-   * A radio input-like button group component.
-   * It allows only one button to be active at a time.
-   * ---
    *
+   * ---
    *
-   * ### **Events:**
-   *  - **input** - When the value of the group changes by clicking a button
    *
    * ### **Slots:**
-   *  - _default_ - Slot for the buttons
+   *  - **before** - The icon to display before the label
+   * - **after** - The icon to display after the label
+   * - _default_ - The label of the button or the icon if no label is set
    */
-  "leu-button-group": DefineComponent<LeuButtonGroupProps>;
+  "leu-button": DefineComponent<LeuButtonProps>;
 
   /**
-   *
+   * A radio input-like button group component.
+   * It allows only one button to be active at a time.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **input** - When the value of the group changes by clicking a button
+   *
    * ### **Slots:**
-   *  - **before** - The icon to display before the label
-   * - **after** - The icon to display after the label
-   * - _default_ - The label of the button or the icon if no label is set
+   *  - _default_ - Slot for the buttons
    */
-  "leu-button": DefineComponent<LeuButtonProps>;
+  "leu-button-group": DefineComponent<LeuButtonGroupProps>;
 
   /**
    * A wrapper element for charts.
@@ -628,6 +643,23 @@ export type CustomElements = {
    */
   "leu-menu-item": DefineComponent<LeuMenuItemProps>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **leu:remove** - Fired when the close button is clicked.
+   *
+   * ### **Slots:**
+   *  - **default** - The content of the message. The title of the message should marked up with a `<strong>` tag.
+   * - **cta** - A call to action button that is only allowed for `size=large`
+   *
+   * ### **CSS Properties:**
+   *  - **--leu-message-accent-color** - Sets the color of the message. According to the design system, it is only allowd for `info` _(default: undefined)_
+   */
+  "leu-message": DefineComponent<LeuMessageProps>;
+
   /**
    *
    * ---

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.16.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**",

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.16.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;
+}