@statistikzh/leu 0.3.0 → 0.4.0

package/dist/leu-popup-4bf6f1f4.js

@@ -0,0 +1,216 @@
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
+import { css, LitElement, html } from 'lit';
+import { autoUpdate, size, flip, shift, computePosition } from '@floating-ui/dom';
+
+var css_248z = css`:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  --popup-font-regular: var(--leu-font-regular);
+  --popup-font-black: var(--leu-font-black);
+
+  font-family: var(--leu-font-regular);
+
+  font-family: var(--popup-font-regular);
+}
+
+.popup {
+  display: none;
+
+  max-width: none;
+
+  max-width: var(--auto-size-available-width, none);
+  max-height: none;
+  max-height: var(--auto-size-available-height, none);
+
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+/* TODO: Should visibility be a matter of the popup component? */
+
+:host([active]) .popup {
+  display: block;
+}
+`;
+
+/**
+ * @tagname leu-popup
+ */
+class LeuPopup extends LitElement {
+  constructor() {
+    super();
+    this.anchorEl = null;
+    this.cleanup = undefined;
+    this.flip = false;
+    this.shift = false;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stop();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("active")) {
+      if (this.active) {
+        this.start();
+      } else {
+        this.stop();
+      }
+    }
+    if (changedProperties.has("anchor")) {
+      this.handleAnchorChange();
+    }
+    if (this.active) {
+      this.reposition();
+    }
+  }
+  get popupEl() {
+    return this.renderRoot?.querySelector(".popup") ?? null;
+  }
+  start() {
+    if (!this.anchorEl || !this.active) return;
+    this.cleanup = autoUpdate(this.anchorEl, this.popupEl, () => {
+      this.reposition();
+    });
+  }
+  stop() {
+    this.cleanup?.();
+    this.style.removeProperty("--auto-size-available-width");
+    this.style.removeProperty("--auto-size-available-height");
+  }
+  reposition() {
+    if (!this.anchorEl || !this.popupEl || !this.active) return;
+    const middleware = [];
+    if (this.matchSize) {
+      middleware.push(size({
+        apply: ({
+          rects
+        }) => {
+          const matchWidth = this.matchSize === "width" || this.matchSize === "both";
+          const matchHeight = this.matchSize === "height" || this.matchSize === "both";
+          this.popupEl.style.width = matchWidth ? `${rects.reference.width}px` : "";
+          this.popupEl.style.height = matchHeight ? `${rects.reference.height}px` : "";
+        }
+      }));
+    } else {
+      // Cleanup styles if we're not matching width/height
+      this.popupEl.style.width = "";
+      this.popupEl.style.height = "";
+    }
+    if (this.flip) {
+      middleware.push(flip());
+    }
+    if (this.shift) {
+      middleware.push(shift({
+        padding: this.shiftPadding
+      }));
+    }
+    if (this.autoSize) {
+      middleware.push(size({
+        padding: this.autoSizePadding,
+        apply: ({
+          availableWidth,
+          availableHeight
+        }) => {
+          const setMaxWidth = this.autoSize === "width" || this.autoSize === "both";
+          const setMaxHeight = this.autoSize === "height" || this.autoSize === "both";
+          if (setMaxHeight) {
+            this.style.setProperty("--auto-size-available-height", `${availableHeight}px`);
+          } else {
+            this.style.removeProperty("--auto-size-available-height");
+          }
+          if (setMaxWidth) {
+            this.style.setProperty("--auto-size-available-width", `${availableWidth}px`);
+          } else {
+            this.style.removeProperty("--auto-size-available-width");
+          }
+        }
+      }));
+    } else {
+      // Cleanup styles if we're not auto-sizing
+      this.style.removeProperty("--auto-size-available-width");
+      this.style.removeProperty("--auto-size-available-height");
+    }
+    computePosition(this.anchorEl, this.popupEl, {
+      placement: this.placement,
+      middleware
+    }).then(({
+      x,
+      y
+    }) => {
+      Object.assign(this.popupEl.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      });
+    });
+  }
+  handleAnchorChange() {
+    if (this.anchor && typeof this.anchor === "string") {
+      const root = this.getRootNode();
+      this.anchorEl = root.getElementById(this.anchor);
+    } else if (this.anchor instanceof HTMLElement) {
+      this.anchorEl = this.anchor;
+    } else {
+      this.anchorEl = this.querySelector("[slot=anchor]");
+    }
+    if (this.anchorEl instanceof HTMLSlotElement) {
+      [this.anchorEl] = this.anchorEl.assignedElements({
+        flatten: true
+      });
+    }
+    if (this.anchorEl) {
+      this.start();
+    }
+  }
+  render() {
+    return html`
+      <slot name="anchor" @slotchange=${this.handleAnchorChange}></slot>
+      <div class="popup">
+        <slot> </slot>
+      </div>
+    `;
+  }
+}
+_defineProperty(LeuPopup, "styles", css_248z);
+_defineProperty(LeuPopup, "shadowRootOptions", {
+  ...LitElement.shadowRootOptions,
+  delegatesFocus: true
+});
+_defineProperty(LeuPopup, "properties", {
+  anchor: {},
+  active: {
+    type: Boolean
+  },
+  /**
+   * @type {"top"|"top-start"|"top-end"|"bottom"|"bottom-start"|"bottom-end"|"left"|"left-start"|"left-end"|"right"|"right-start"|"right-end"}
+   */
+  placement: {
+    type: String
+  },
+  flip: {
+    type: Boolean
+  },
+  shift: {
+    type: Boolean
+  },
+  shiftPadding: {
+    type: Number
+  },
+  /** @type {"width" | "height" | "both"} */
+  matchSize: {
+    type: String
+  },
+  /** @type {"width" | "height" | "both"} */
+  autoSize: {
+    type: String
+  },
+  autoSizePadding: {
+    type: Number
+  }
+});
+
+defineElement("popup", LeuPopup);

package/dist/leu-radio-group.js

@@ -1,6 +1,9 @@
-import { defineRadioGroupElements } from './RadioGroup.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuRadioGroup } from './RadioGroup.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 
-defineRadioGroupElements();
+defineElement("radio-group", LeuRadioGroup);
+
+export { LeuRadioGroup };

package/dist/leu-radio.js

@@ -1,5 +1,8 @@
-import { defineRadioElements } from './Radio.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuRadio } from './Radio.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
 
-defineRadioElements();
+defineElement("radio", LeuRadio);
+
+export { LeuRadio };

package/dist/leu-select.js

@@ -1,14 +1,25 @@
-import { defineSelectElements } from './Select.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuSelect } from './Select.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/map.js';
 import 'lit/directives/if-defined.js';
 import 'lit/directives/ref.js';
 import './icon-03e86700.js';
+import './leu-button.js';
 import './Button.js';
+import './leu-menu.js';
 import './Menu.js';
+import './leu-menu-item.js';
 import './MenuItem.js';
+import 'lit/static-html.js';
+import './leu-input.js';
 import './Input.js';
+import 'lit/directives/live.js';
+import './leu-popup-4bf6f1f4.js';
+import '@floating-ui/dom';
 
-defineSelectElements();
+defineElement("select", LeuSelect);
+
+export { LeuSelect };

package/dist/leu-table.js

@@ -1,11 +1,17 @@
-import { defineTableElements } from './Table.js';
-import './defineElement-ba770aed.js';
+import { d as defineElement } from './defineElement-47d4f665.js';
+import { LeuTable } from './Table.js';
+import './_rollupPluginBabelHelpers-20f659f4.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/style-map.js';
 import 'lit/directives/ref.js';
 import './icon-03e86700.js';
+import './leu-pagination.js';
 import './Pagination.js';
+import 'lit/directives/live.js';
+import './leu-button.js';
 import './Button.js';
 
-defineTableElements();
+defineElement("table", LeuTable);
+
+export { LeuTable };

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -16,7 +16,8 @@
     "analyze": "cem analyze --litelement --globs \"src/**/*.js\"",
     "build": "rimraf dist && npm run build:js && npm run build:css",
     "build:js": "rollup -c rollup.config.js",
-    "build:css": "postcss src/styles/theme.css -o dist/theme.css",
+    "build:css": "postcss src/styles/theme.css -o dist/theme.css && cp dist/theme.css .storybook/static/",
+    "watch:css": "nodemon --watch 'src/styles/*' -e css --exec npm run build:css",
     "lint": "npm run lint:eslint && npm run lint:prettier",
     "lint:eslint": "eslint --ext .js,.mjs,.html . --ignore-path .gitignore ",
     "lint:prettier": "prettier \"**/*.{js,mjs,md,html,json}\" --check --ignore-path .gitignore",
@@ -27,10 +28,12 @@
     "test": "web-test-runner --coverage",
     "test:watch": "web-test-runner --watch",
     "prepare": "husky install",
-    "storybook": "npm run analyze && web-dev-server --config web-dev-server-storybook.config.mjs --watch",
-    "build-storybook": "storybook build"
+    "storybook": "npm run storybook:start",
+    "storybook:start": "npm run analyze && npm run watch:css & storybook dev -p 8080 --no-open",
+    "storybook:build": "npm run analyze && npm run build:css && storybook build --output-dir docs"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.6.3",
     "lit": "^3.0.2"
   },
   "devDependencies": {
@@ -39,25 +42,32 @@
     "@commitlint/config-conventional": "^17.7.0",
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@open-wc/eslint-config": "^9.2.1",
-    "@open-wc/testing": "^3.1.6",
+    "@open-wc/testing": "^4.0.0",
     "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.0.0",
+    "@storybook/addon-designs": "^7.0.9",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/blocks": "^7.6.10",
+    "@storybook/web-components": "^7.6.10",
     "@web/dev-server": "^0.1.34",
     "@web/dev-server-rollup": "^0.5.2",
-    "@web/dev-server-storybook": "^1.0.6",
-    "@web/storybook-builder": "^0.1.0",
+    "@web/storybook-builder": "^0.1.2",
     "@web/storybook-framework-web-components": "^0.1.1",
-    "@web/test-runner": "^0.14.0",
-    "@web/test-runner-commands": "^0.8.0",
-    "@web/test-runner-playwright": "^0.10.1",
+    "@web/test-runner": "^0.18.0",
+    "@web/test-runner-commands": "^0.9.0",
+    "@web/test-runner-playwright": "^0.11.0",
+    "@whitespace/storybook-addon-html": "^5.1.6",
     "arg": "^5.0.2",
     "es-dev-server": "^2.1.0",
-    "esbuild": "^0.19.4",
+    "esbuild": "^0.20.0",
     "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-storybook": "^0.6.14",
     "husky": "^8.0.0",
     "lint-staged": "^10.5.4",
+    "nodemon": "^3.0.2",
     "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
@@ -66,12 +76,14 @@
     "prettier": "^2.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-syntax-highlighter": "^15.5.0",
     "rimraf": "^5.0.5",
     "rollup": "^3.29.4",
     "rollup-plugin-esbuild": "^6.0.2",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-postcss-lit": "^2.1.0",
-    "storybook": "^7.4.5",
+    "sinon": "^17.0.1",
+    "storybook": "^7.6.10",
     "stylelint": "^15.10.3",
     "stylelint-config-standard": "^34.0.0"
   },

package/scripts/generate-component/templates/[Name].js

@@ -1,5 +1,4 @@
 import { html, LitElement } from "lit"
-import { defineElement } from "../../lib/defineElement.js"
 import styles from "./[name].css"
 
 /**
@@ -27,7 +26,3 @@ export class Leu[Name] extends LitElement {
     `
   }
 }
-
-export function define[Name]Elements() {
-  defineElement("[name]", [Namespace][Name])
-}

package/scripts/generate-component/templates/[name].css

@@ -7,5 +7,5 @@
   --[name]-font-regular: var(--leu-font-regular);
   --[name]-font-black: var(--leu-font-black);
 
-  font-family: var(--chip-font-regular);
+  font-family: var(--[name]-font-regular);
 }

package/scripts/generate-component/templates/[namespace]-[name].js

@@ -1,3 +1,6 @@
-import { define[Name]Elements } from "./[Name].js"
+import { defineElement } from "../../lib/defineElement.js"
+import { [Namespace][Name] } from "./[Name].js"
 
-define[Name]Elements()
+export { [Namespace][Name] }
+
+defineElement("[name]", [Namespace][Name])

package/src/components/accordion/Accordion.js

@@ -1,7 +1,6 @@
 import { LitElement, nothing } from "lit"
 import { html, unsafeStatic } from "lit/static-html.js"
 
-import { defineElement } from "../../lib/defineElement.js"
 import styles from "./accordion.css"
 
 /**
@@ -35,7 +34,6 @@ export class LeuAccordion extends LitElement {
     this.headingLevel = 2
     this.open = false
     this.label = ""
-    this.labelPrefix = ""
   }
 
   /**
@@ -96,7 +94,3 @@ export class LeuAccordion extends LitElement {
   }
   /* eslint-enable lit/binding-positions, lit/no-invalid-html */
 }
-
-export function defineAccordionElements() {
-  defineElement("accordion", LeuAccordion)
-}

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

@@ -1,3 +1,6 @@
-import { defineAccordionElements } from "./Accordion.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuAccordion } from "./Accordion.js"
 
-defineAccordionElements()
+export { LeuAccordion }
+
+defineElement("accordion", LeuAccordion)

package/src/components/accordion/stories/accordion.stories.js

@@ -8,10 +8,7 @@ export default {
   component: "leu-accordion",
   argTypes: {
     headingLevel: {
-      control: {
-        type: "select",
-        options: [0, 1, 2, 3, 4, 5, 6],
-      },
+      options: [0, 1, 2, 3, 4, 5, 6],
     },
     content: {
       control: {
@@ -19,6 +16,12 @@ export default {
       },
     },
   },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17341-82464&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
 function Template(args) {

package/src/components/accordion/test/accordion.test.js

@@ -4,12 +4,14 @@ import { fixture, expect } from "@open-wc/testing"
 import "../leu-accordion.js"
 
 async function defaultFixture() {
-  return fixture(html` <leu-accordion /> `)
+  return fixture(
+    html` <leu-accordion label="Titel des Akkordeons"></leu-accordion> `
+  )
 }
 
 describe("LeuAccordion", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("leu-accordion")
+    const el = customElements.get("leu-accordion")
 
     await expect(el).not.to.be.undefined
   })
@@ -19,4 +21,92 @@ describe("LeuAccordion", () => {
 
     await expect(el).shadowDom.to.be.accessible()
   })
+
+  it("renders the correct heading tag", async () => {
+    const el = await defaultFixture()
+
+    await expect(el._getHeadingTag()).to.equal("h2")
+
+    el.headingLevel = 1
+    await expect(el._getHeadingTag()).to.equal("h1")
+
+    el.headingLevel = 2
+    await expect(el._getHeadingTag()).to.equal("h2")
+
+    el.headingLevel = 3
+    await expect(el._getHeadingTag()).to.equal("h3")
+
+    el.headingLevel = 4
+    await expect(el._getHeadingTag()).to.equal("h4")
+
+    el.headingLevel = 5
+    await expect(el._getHeadingTag()).to.equal("h5")
+
+    el.headingLevel = 6
+    await expect(el._getHeadingTag()).to.equal("h6")
+  })
+
+  it("doesn't render an invalid heading tag", async () => {
+    const el = await defaultFixture()
+
+    el.headingLevel = 10
+    expect(el._getHeadingTag()).to.equal("h2")
+
+    el.headingLevel = -1
+    expect(el._getHeadingTag()).to.equal("h2")
+
+    el.headingLevel = 0
+    expect(el._getHeadingTag()).to.equal("h2")
+
+    el.headingLevel = "h3"
+    expect(el._getHeadingTag()).to.equal("h2")
+  })
+
+  it("toggles the open state", async () => {
+    const el = await fixture(
+      html`<leu-accordion label="Titel des Akkordeons"
+        ><div slot="content">Das ist der Inhalt</div></leu-accordion
+      >`
+    )
+
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(el.open).to.be.false
+
+    button.click()
+    expect(el.open).to.be.true
+
+    button.click()
+    expect(el.open).to.be.false
+  })
+
+  it("doesn't show the content when it is closed", async () => {
+    const el = await fixture(
+      html`<leu-accordion label="Titel des Akkordeons"
+        ><div slot="content">Das ist der Inhalt</div></leu-accordion
+      >`
+    )
+
+    const button = el.shadowRoot.querySelector("button")
+    const content = el.shadowRoot.querySelector(".content")
+
+    expect(content).not.to.be.visible
+
+    button.click()
+    expect(content).to.be.visible
+  })
+
+  it("shows the label prefix before the label", async () => {
+    const el = await fixture(
+      html`<leu-accordion
+        label-prefix="01"
+        label="Titel des Akkordeons"
+      ></leu-accordion>`
+    )
+
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(button).to.contain.text("01")
+    expect(button).to.contain.text("Titel des Akkordeons")
+  })
 })