@statistikzh/leu 0.9.0 → 0.10.0

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

@@ -250,6 +250,21 @@
         }
       ]
     },
+    {
+      "name": "leu-dialog",
+      "description": "\n---\n",
+      "attributes": [
+        { "name": "label", "values": [] },
+        { "name": "sublabel", "values": [] },
+        { "name": "open", "values": [] }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://statistikzh.github.io/leu/?path=/story/dialog"
+        }
+      ]
+    },
     {
       "name": "leu-dropdown",
       "description": "\n---\n",

package/dist/vue/index.d.ts

@@ -10,6 +10,7 @@ import type { LeuChipGroup } from "../ChipGroup.js";
 import type { LeuChipLink } from "../ChipLink.js";
 import type { LeuChipRemovable } from "../ChipRemovable.js";
 import type { LeuChipSelectable, CustomEvent } from "../ChipSelectable.js";
+import type { LeuDialog } from "../Dialog.js";
 import type { LeuDropdown } from "../Dropdown.js";
 import type { LeuIcon } from "../Icon.js";
 import type { LeuInput, CustomEvent } from "../Input.js";
@@ -172,6 +173,17 @@ type LeuChipSelectableProps = {
   onInput?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type LeuDialogProps = {
+  /**  */
+  label?: LeuDialog["label"];
+  /**  */
+  sublabel?: LeuDialog["sublabel"];
+  /**  */
+  open?: LeuDialog["open"];
+  /**  */
+  _dialogRef?: LeuDialog["_dialogRef"];
+};
+
 type LeuDropdownProps = {
   /**  */
   label?: LeuDropdown["label"];
@@ -561,6 +573,13 @@ export type CustomElements = {
    */
   "leu-chip-selectable": DefineComponent<LeuChipSelectableProps>;
 
+  /**
+   *
+   * ---
+   *
+   */
+  "leu-dialog": DefineComponent<LeuDialogProps>;
+
   /**
    *
    * ---

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.9.0",
+  "version": "0.10.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -488,6 +488,34 @@
             "events": [{ "name": "input" }]
           }
         },
+        {
+          "name": "leu-dialog",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "sublabel",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "open",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "label", "value": { "type": "string" } },
+              { "name": "sublabel", "value": { "type": "string" } },
+              { "name": "open", "value": { "type": "boolean" } }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "leu-dropdown",
           "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.9.0",
+  "version": "0.10.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/rollup.config.js

@@ -11,7 +11,10 @@ export const plugins = [
     plugin: replace,
     args: [
       {
-        __LEU_VERSION__: JSON.stringify(process.env.npm_package_version),
+        preventAssignment: true,
+        values: {
+          __LEU_VERSION__: JSON.stringify(process.env.npm_package_version),
+        },
       },
     ],
   },

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

@@ -14,13 +14,13 @@ async function parseFile(file) {
 }
 
 function generateCustomPropertyDeclarations({
-  identifier,
+  name,
   fontSize,
   fontWeight,
   lineHeight,
   spacing,
 }) {
-  const customPropertyPrefix = `--leu-t-${identifier}-${fontWeight}`
+  const customPropertyPrefix = `--leu-t-${name}-${fontWeight}`
 
   const varFontSize = `${customPropertyPrefix}-font-size`
   const varLineHeight = `${customPropertyPrefix}-line-height`
@@ -77,14 +77,11 @@ async function createLeuFontStyleNodes(file, postcss, nodeSource) {
       : [style.fontWeight]
     const spacing = getPixelValue(style.spacing) / 16
 
-    const identifier = (fontSize / 4) * 10
-
     return fontWeights.map((fontWeight) => ({
       name: style.name,
       fontWeight,
-      identifier,
       declarations: generateCustomPropertyDeclarations({
-        identifier,
+        name: style.name,
         fontSize,
         fontWeight,
         lineHeight: style.lineHeight,
@@ -100,36 +97,33 @@ async function createLeuFontStyleNodes(file, postcss, nodeSource) {
     )
   )
 
-  const curveNodes = curves.flatMap((curve) => {
-    const [_, lastStepName] = curve.steps.at(-1)
-    const { identifier } = fontStyleDeclarations.find(
-      (style) => style.name === lastStepName && style.fontWeight === "black"
-    )
-
-    const curvePrefix = `--leu-t-curve-${identifier}-black`
-
-    return curve.steps.flatMap((step) => {
-      const [viewport, styleName] = step
-
-      const stepStyle = fontStyleDeclarations.find(
-        (s) => s.name === styleName && s.fontWeight === "black"
-      )
-
-      const nodes = curveStepDeclarations(curvePrefix, stepStyle).map(
-        ({ prop, value }) =>
-          new postcss.Declaration({ prop, value, source: nodeSource })
-      )
-
-      return viewport === null
-        ? nodes
-        : new postcss.AtRule({
-            name: "media",
-            params: `(${viewport})`,
-            nodes,
-            source: nodeSource,
-          })
+  const curveNodes = curves.flatMap((curve) =>
+    curve.weights.flatMap((fontWeight) => {
+      const curvePrefix = `--leu-t-curve-${curve.name}-${fontWeight}`
+
+      return curve.steps.flatMap((step) => {
+        const [viewport, styleName] = step
+
+        const stepStyle = fontStyleDeclarations.find(
+          (s) => s.name === styleName && s.fontWeight === fontWeight
+        )
+
+        const nodes = curveStepDeclarations(curvePrefix, stepStyle).map(
+          ({ prop, value }) =>
+            new postcss.Declaration({ prop, value, source: nodeSource })
+        )
+
+        return viewport === null
+          ? nodes
+          : new postcss.AtRule({
+              name: "media",
+              params: `(${viewport})`,
+              nodes,
+              source: nodeSource,
+            })
+      })
     })
-  })
+  )
 
   return [...fontStyleNodes, ...curveNodes]
 }

package/src/components/chip/chip-group.css

@@ -1,6 +1,6 @@
 .label {
   margin: 0 0 0.5rem;
-  font: var(--leu-t-curve-35-black-font);
+  font: var(--leu-t-curve-tiny-black-font);
   color: var(--leu-color-black-100);
 }
 

package/src/components/dialog/Dialog.js

@@ -0,0 +1,100 @@
+import { html, nothing } from "lit"
+import { createRef, ref } from "lit/directives/ref.js"
+import { classMap } from "lit/directives/class-map.js"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+import { HasSlotController } from "../../lib/hasSlotController.js"
+import { LeuIcon } from "../icon/Icon.js"
+
+// design: https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=21161-186812&node-type=FRAME
+
+// @ts-ignore
+import styles from "./dialog.css"
+
+/**
+ * @tagname leu-dialog
+ */
+export class LeuDialog extends LeuElement {
+  static dependencies = {
+    "leu-icon": LeuIcon,
+  }
+
+  static styles = styles
+
+  static shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  /**
+   * @internal
+   */
+  hasSlotController = new HasSlotController(this, ["toolbar"])
+
+  static properties = {
+    label: { type: String },
+    sublabel: { type: String },
+    open: { type: Boolean, open: true },
+  }
+
+  constructor() {
+    super()
+
+    /** @type {import("lit/directives/ref").Ref<HTMLDialogElement>} */
+    this._dialogRef = createRef()
+
+    /** @type {string} */
+    this.label = ""
+    /** @type {string} */
+    this.sublabel = ""
+    /** @type {boolean} */
+    this.open = false
+  }
+
+  show() {
+    this._dialogRef.value.showModal()
+  }
+
+  close() {
+    this._dialogRef.value.close()
+  }
+
+  render() {
+    const hasActionbar = this.hasSlotController.test("actionbar")
+
+    const closeButtonLabelClasses = {
+      "close-button__label": true,
+      "close-button__label--hidden": hasActionbar,
+    }
+
+    return html`
+      <dialog class="dialog" ref=${ref(this._dialogRef)} ?open=${this.open}>
+        <div class="content">
+          <div class="header">
+            <div class="title-wrapper">
+              <h1 class="title">${this.label}</h1>
+              ${this.sublabel
+                ? html`<p class="subtitle">${this.sublabel}</p>`
+                : nothing}
+            </div>
+            <button
+              class="close-button"
+              @click=${this.close}
+              aria-label="Schliessen"
+            >
+              <span
+                class=${classMap(closeButtonLabelClasses)}
+                aria-hidden="true"
+                >Schliessen</span
+              ><leu-icon name="close"> </leu-icon>
+            </button>
+          </div>
+          <slot></slot>
+        </div>
+        <div class="actionbar">
+          <slot name="actionbar"></slot>
+        </div>
+      </dialog>
+    `
+  }
+}

package/src/components/dialog/dialog.css

@@ -0,0 +1,162 @@
+@import url("../../styles/custom-media.css");
+
+/* figma https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=21161-186812&t=8VgDy9avMRG5aL7s-0 */
+
+:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  --dialog-font-regular: var(--leu-font-family-regular);
+  --dialog-font-black: var(--leu-font-family-black);
+
+  font-family: var(--dialog-font-regular);
+}
+
+.dialog {
+  background: #fff;
+  border: 0;
+  padding: 0;
+
+  overflow: hidden;
+  background-color: var(--leu-color-black-0);
+
+  flex-direction: column;
+
+  margin: 0 auto;
+  height: 100vh;
+  width: 100vw;
+  max-height: 100vh;
+  max-width: 100vw;
+
+  @media (--viewport-regular) {
+    margin: 80px auto;
+    height: fit-content;
+    width: fit-content;
+    max-width: min(100% - 4.5rem, 60.5rem);
+    max-height: calc(100vh - 5rem);
+  }
+}
+
+.dialog[open] {
+  display: flex;
+}
+
+.dialog::backdrop {
+  background-color: var(--leu-color-black-transp-40);
+}
+
+.content {
+  --padding: 2rem;
+  padding: var(--padding);
+  padding-bottom: 0;
+  margin-bottom: 1.5rem;
+  overflow-y: auto;
+
+  @media (--viewport-regular) {
+    --padding: 2.5rem;
+  }
+
+  @media (--viewport-medium) {
+    margin-bottom: 2rem;
+  }
+
+  @media (--viewport-large) {
+    --padding: 3.5rem;
+  }
+
+  @media (--viewport-xlarge) {
+    margin-bottom: 2.5rem;
+  }
+}
+
+.title-wrapper {
+  display: flex;
+  flex-flow: column wrap;
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.title {
+  font: var(--leu-t-curve-big-black-font);
+  margin: 0 0 0.75rem;
+  order: 2;
+
+  @media (--viewport-regular) {
+    margin-bottom: 1rem;
+  }
+
+  @media (--viewport-medium) {
+    margin-bottom: 1.25rem;
+  }
+
+  @media (--viewport-xlarge) {
+    margin-bottom: 1.5rem;
+    font: var(--leu-t-bigger-big-black-font);
+  }
+}
+
+.subtitle {
+  color: var(--leu-color-black-transp-60);
+  font-size: var(--leu-t-tiny-regular-font-size);
+  line-height: var(--leu-t-tiny-regular-line-height);
+
+  order: 1;
+
+  margin: 0 0 4px;
+}
+
+.close-button {
+  cursor: pointer;
+  display: flex;
+  gap: 0.5rem;
+
+  padding: 0.25rem 0;
+  margin-left: 0.75rem;
+  border: 0;
+  border-radius: 0.125rem;
+
+  color: var(--leu-color-black-transp-60);
+  background: transparent;
+
+  @media (--viewport-regular) {
+    margin-left: 1rem;
+  }
+
+  @media (--viewport-medium) {
+    margin-left: 1.25rem;
+  }
+
+  @media (--viewport-xlarge) {
+    margin-left: 1.5rem;
+  }
+}
+
+.close-button:focus-visible {
+  outline: 2px solid var(--leu-color-func-cyan);
+  outline-offset: 2px;
+}
+
+.close-button__label {
+  display: none;
+  font: var(--leu-t-regular-regular-font);
+
+  @media (--viewport-medium) {
+    display: inline;
+  }
+}
+
+.close-button__label--hidden {
+  display: none;
+}
+
+.actionbar {
+  display: flex;
+  justify-content: flex-end;
+  min-height: 3rem;
+}

package/src/components/dialog/leu-dialog.js

@@ -0,0 +1,5 @@
+import { LeuDialog } from "./Dialog.js"
+
+export { LeuDialog }
+
+LeuDialog.define("leu-dialog")

package/src/components/dialog/stories/dialog.stories.js

@@ -0,0 +1,144 @@
+import { html } from "lit"
+import "../leu-dialog.js"
+import "../../input/leu-input.js"
+import "../../button/leu-button.js"
+
+export default {
+  title: "Dialog",
+  component: "leu-dialog",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=16052-88818&node-type=canvas&t=swv3JY6UIoCBUpXa-11",
+    },
+  },
+}
+
+function openDialog() {
+  document.querySelector("leu-dialog").show()
+}
+
+function closeDialog() {
+  document.querySelector("leu-dialog").close()
+}
+
+function OpenDialogButton() {
+  return html` <leu-button @click=${() => openDialog()}>
+    Open dialog
+  </leu-button>`
+}
+
+function Template({ label, sublabel }) {
+  return html`
+    ${OpenDialogButton()}
+
+    <leu-dialog label="${label}" sublabel="${sublabel}">
+      <leu-input label="Eingabe"></leu-input>
+      <br />
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet.
+    </leu-dialog>
+  `
+}
+
+export const Regular = Template.bind({})
+Regular.args = {
+  label: "Property: label",
+  rubric: "Property: sublabel",
+}
+
+function ActionButtonsTemplate({ label, sublabel }) {
+  return html`
+    ${OpenDialogButton()}
+
+    <leu-dialog label="${label}" sublabel="${sublabel}">
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet.
+      <slot slot="actionbar">
+        <leu-button
+          variant="secondary"
+          @click=${() => {
+            // eslint-disable-next-line no-alert
+            alert("Fenster wird geschlossen")
+            closeDialog()
+          }}
+        >
+          Abbrechen
+        </leu-button>
+        <leu-button
+          @click=${() => {
+            // eslint-disable-next-line no-alert
+            alert("Fenster wird offen gelassen")
+          }}
+        >
+          Anwenden
+        </leu-button>
+      </slot>
+    </leu-dialog>
+  `
+}
+
+export const ActionButtons = ActionButtonsTemplate.bind({})
+ActionButtons.args = {
+  label: "Property: label",
+  sublabel: "Property: sublabel",
+}
+
+function SmallContentTemplate({ label, sublabel }) {
+  return html`
+    ${OpenDialogButton()}
+
+    <leu-dialog label="${label}" sublabel="${sublabel}">
+      <p>Ein kurzer Text</p>
+    </leu-dialog>
+  `
+}
+
+export const SmallContent = SmallContentTemplate.bind({})
+SmallContent.args = {
+  label: "Dialog Titel",
+  sublabel: "Property: sublabel",
+}
+
+function ScrollablePageTemplate({ label, sublabel }) {
+  return html`
+    <div style="height: 200vh">
+      ${OpenDialogButton()}
+
+      <leu-dialog label="${label}" sublabel="${sublabel}">
+        <leu-input label="Eingabe"></leu-input>
+        <br />
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+        rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+        ipsum dolor sit amet.
+      </leu-dialog>
+    </div>
+    <div style="height: 200vh">${OpenDialogButton()}</div>
+  `
+}
+
+export const ScrollablePage = ScrollablePageTemplate.bind({})
+ScrollablePage.args = {
+  label: "Dialog Titel",
+  sublabel: "Property: sublabel",
+}