@statistikzh/leu 0.15.0 → 0.16.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.0",
+  "version": "0.16.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -238,6 +238,49 @@
             ]
           }
         },
+        {
+          "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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "pending",
+              "description": "Whether the chart is currently loading or not.\nWhen set to `true`, a spinner will be shown in the chart container.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "title",
+              "description": "The title of the chart. Use a heading tag (h2-4) depending on your context."
+            },
+            {
+              "name": "description",
+              "description": "A description of the chart. Content is wrapped in a `<p>` tag by the component."
+            },
+            { "name": "chart", "description": "The actual chart" },
+            {
+              "name": "caption",
+              "description": "A caption for the chart, e.g. a source or explanation of the data."
+            },
+            {
+              "name": "download",
+              "description": "A download button or dropdown to export the chart in different formats."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "pending",
+                "description": "Whether the chart is currently loading or not.\nWhen set to `true`, a spinner will be shown in the chart container.",
+                "type": "boolean"
+              },
+              { "name": "hasSlotController" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "leu-checkbox",
           "description": "\n---\n",
@@ -926,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**",
@@ -1390,49 +1514,6 @@
             "events": []
           }
         },
-        {
-          "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.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "pending",
-              "description": "Whether the chart is currently loading or not.\nWhen set to `true`, a spinner will be shown in the chart container.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "title",
-              "description": "The title of the chart. Use a heading tag (h2-4) depending on your context."
-            },
-            {
-              "name": "description",
-              "description": "A description of the chart. Content is wrapped in a `<p>` tag by the component."
-            },
-            { "name": "chart", "description": "The actual chart" },
-            {
-              "name": "caption",
-              "description": "A caption for the chart, e.g. a source or explanation of the data."
-            },
-            {
-              "name": "download",
-              "description": "A download button or dropdown to export the chart in different formats."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "pending",
-                "description": "Whether the chart is currently loading or not.\nWhen set to `true`, a spinner will be shown in the chart container.",
-                "type": "boolean"
-              },
-              { "name": "hasSlotController" }
-            ],
-            "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.0",
+  "version": "0.16.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/release-please-config.json

@@ -2,6 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/googleapis/release-please/main/schemas/config.json",
   "release-type": "node",
   "bump-minor-pre-major": true,
+  "always-update": true,
   "packages": {
     ".": {}
   }

package/scripts/postcss-leu-font-styles.cjs

@@ -35,20 +35,20 @@ function generateCustomPropertyDeclarations({
     {
       type: "font",
       name: varFont,
-      value: `var(${varFontSize}) / var(${varLineHeight}) var(${varFontFamily})`,
+      value: `normal var(${varFontSize}) / var(${varLineHeight}) var(${varFontFamily})`,
     },
   ]
 }
 
 function curveStepDeclarations(curvePrefix, stepStyle) {
   const fontSizeVar = stepStyle.declarations.find(
-    (s) => s.type === "fontSize"
+    (s) => s.type === "fontSize",
   ).name
   const lineHeightVar = stepStyle.declarations.find(
-    (s) => s.type === "lineHeight"
+    (s) => s.type === "lineHeight",
   ).name
   const spacingVar = stepStyle.declarations.find(
-    (s) => s.type === "spacing"
+    (s) => s.type === "spacing",
   ).name
   const fontVar = stepStyle.declarations.find((s) => s.type === "font").name
 
@@ -93,8 +93,8 @@ async function createLeuFontStyleNodes(file, postcss, nodeSource) {
   const fontStyleNodes = fontStyleDeclarations.flatMap((style) =>
     style.declarations.map(
       ({ name, value }) =>
-        new postcss.Declaration({ prop: name, value, source: nodeSource })
-    )
+        new postcss.Declaration({ prop: name, value, source: nodeSource }),
+    ),
   )
 
   const curveNodes = curves.flatMap((curve) =>
@@ -105,12 +105,12 @@ async function createLeuFontStyleNodes(file, postcss, nodeSource) {
         const [viewport, styleName] = step
 
         const stepStyle = fontStyleDeclarations.find(
-          (s) => s.name === styleName && s.fontWeight === fontWeight
+          (s) => s.name === styleName && s.fontWeight === fontWeight,
         )
 
         const nodes = curveStepDeclarations(curvePrefix, stepStyle).map(
           ({ prop, value }) =>
-            new postcss.Declaration({ prop, value, source: nodeSource })
+            new postcss.Declaration({ prop, value, source: nodeSource }),
         )
 
         return viewport === null
@@ -122,7 +122,7 @@ async function createLeuFontStyleNodes(file, postcss, nodeSource) {
               source: nodeSource,
             })
       })
-    })
+    }),
   )
 
   return [...fontStyleNodes, ...curveNodes]
@@ -143,7 +143,7 @@ module.exports = () => ({
       const nodes = await createLeuFontStyleNodes(
         path.resolve(rootDir, jsonFile),
         postcss,
-        atRule.source
+        atRule.source,
       )
 
       atRule.replaceWith(nodes)

package/src/components/{visualization → chart-wrapper}/ChartWrapper.ts

@@ -47,27 +47,30 @@ export class LeuChartWrapper extends LeuElement {
     const hasDownload = this.hasSlotController.test("download")
 
     return html`
-      <figure>
-        <slot name="title" class="title"></slot>
+      <figure class="chart-wrapper">
+        <slot name="title" class="chart-wrapper__title"></slot>
         ${hasDescription
-          ? html`<slot name="description" class="description"></slot>`
+          ? html`<slot
+              name="description"
+              class="chart-wrapper__description"
+            ></slot>`
           : nothing}
-        <div class="chart-container">
-          <slot name="chart" class="chart"></slot>
+        <div class="chart-wrapper__container">
+          <slot name="chart" class="chart-wrapper__chart"></slot>
           ${this.pending
-            ? html`<div class="spinner-container">
-                <leu-spinner class="spinner"></leu-spinner>
+            ? html`<div class="chart-wrapper__spinner-container">
+                <leu-spinner class="chart-wrapper__spinner"></leu-spinner>
               </div>`
             : nothing}
         </div>
         ${hasCaption
           ? html`<figcaption>
-              <slot name="caption" class="caption"></slot>
+              <slot name="caption" class="chart-wrapper__caption"></slot>
             </figcaption>`
           : nothing}
-        <hr class="ruler" />
+        <hr class="chart-wrapper__ruler" />
         ${hasDownload
-          ? html`<slot name="download" class="download"></slot>`
+          ? html`<slot name="download" class="chart-wrapper__download"></slot>`
           : nothing}
       </figure>
     `

package/src/components/{visualization → chart-wrapper}/chart-wrapper.css

@@ -1,6 +1,13 @@
 @import url("../../styles/custom-media.css");
 
-.title::slotted(h2) {
+.chart-wrapper {
+  display: block;
+  width: 100%;
+  margin: 0;
+}
+
+.chart-wrapper__title::slotted(h2) {
+  color: var(--leu-color-black-100);
   font: var(--leu-t-curve-large-black-font);
   margin: 0 0 0.75rem;
 
@@ -13,18 +20,20 @@
   }
 }
 
-.title::slotted(h3) {
+.chart-wrapper__title::slotted(h3) {
+  color: var(--leu-color-black-100);
   font: var(--leu-t-curve-medium-black-font);
   margin: 0 0 0.5rem;
 }
 
-.title::slotted(h4) {
+.chart-wrapper__title::slotted(h4) {
+  color: var(--leu-color-black-100);
   font: var(--leu-t-curve-regular-black-font);
   margin: 0 0 0.5rem;
 }
 
-.description,
-.chart {
+.chart-wrapper__description,
+.chart-wrapper__chart {
   display: block;
   margin-bottom: 0.75rem;
 
@@ -37,17 +46,17 @@
   }
 }
 
-.description {
+.chart-wrapper__description {
   font: var(--leu-t-curve-small-regular-font);
   color: var(--leu-color-black-60);
 }
 
-.caption {
+.chart-wrapper__caption {
   font: var(--leu-t-curve-tiny-regular-font);
   color: var(--leu-color-black-60);
 }
 
-.ruler {
+.chart-wrapper__ruler {
   display: block;
   border: none;
   border-top: 1px solid var(--leu-color-black-transp-20);
@@ -58,16 +67,16 @@
   }
 }
 
-.download {
+.chart-wrapper__download {
   display: block;
   margin-left: -0.5rem;
 }
 
-.chart-container {
+.chart-wrapper__container {
   position: relative;
 }
 
-.spinner-container {
+.chart-wrapper__spinner-container {
   position: absolute;
   top: 0;
   left: 0;

package/src/components/{visualization → chart-wrapper}/stories/chart-wrapper.stories.ts

@@ -46,7 +46,13 @@ const Template: Story = {
 export const Regular = {
   ...Template,
   args: {
-    // Add default args here
     pending: false,
   },
 }
+
+export const Pending = {
+  ...Template,
+  args: {
+    pending: true,
+  },
+}

package/src/components/{visualization → chart-wrapper}/test/chart-wrapper.test.ts

@@ -50,25 +50,28 @@ describe("LeuChartWrapper", () => {
   it("conditionally renders slots", async () => {
     let el = await defaultFixture()
 
-    expect(el.shadowRoot.querySelector(".description")).to.exist
-    expect(el.shadowRoot.querySelector(".caption")).to.exist
-    expect(el.shadowRoot.querySelector(".download")).to.exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__description")).to.exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__caption")).to.exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__download")).to.exist
 
     el = await fixture(html`<leu-chart-wrapper></leu-chart-wrapper>`)
 
-    expect(el.shadowRoot.querySelector(".description")).not.to.exist
-    expect(el.shadowRoot.querySelector(".caption")).not.to.exist
-    expect(el.shadowRoot.querySelector(".download")).not.to.exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__description")).not.to
+      .exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__caption")).not.to.exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__download")).not.to.exist
 
     // Check that the title and chart slots are always present
-    expect(el.shadowRoot.querySelector(".title")).to.exist
-    expect(el.shadowRoot.querySelector(".chart")).to.exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__title")).to.exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__chart")).to.exist
   })
 
   it("shows a spinner when pending is set", async () => {
     const el = await defaultFixture({ pending: true })
 
-    expect(el.shadowRoot.querySelector(".spinner-container")).to.exist
-    expect(el.shadowRoot.querySelector("leu-spinner.spinner")).to.exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__spinner-container")).to
+      .exist
+    expect(el.shadowRoot.querySelector("leu-spinner.chart-wrapper__spinner")).to
+      .exist
   })
 })

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