@statistikzh/leu 0.2.0 → 0.4.0

package/src/components/breadcrumb/stories/breadcrumb.stories.js

@@ -0,0 +1,73 @@
+import { html } from "lit"
+import "../leu-breadcrumb.js"
+
+export default {
+  title: "Breadcrumb",
+  component: "leu-breadcrumb",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=18100-258351&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+    html: {
+      root: "[data-root]",
+    },
+  },
+}
+
+function Template({ items, inverted }) {
+  return html`
+    <div
+      style=${inverted ? "background: var(--leu-color-accent-blue);" : ""}
+      data-root
+    >
+      <leu-breadcrumb .items=${items} ?inverted=${inverted}></leu-breadcrumb>
+    </div>
+    <button
+      @click=${() => {
+        document.getElementsByTagName("leu-breadcrumb")[0].items = [
+          { label: "Kanton Zürich", href: "https://zh.ch" },
+          { label: "Bildung", href: "https://www.zh.ch/de/bildung.html" },
+          {
+            label: "Schulen",
+            href: "https://www.zh.ch/de/bildung/schulen.html",
+          },
+          {
+            label: "Volksschule",
+            href: "https://www.zh.ch/de/bildung/schulen/volksschule.html",
+          },
+        ]
+      }}
+      style="margin-top:50px;"
+    >
+      update items
+    </button>
+  `
+}
+
+export const Regular = Template.bind({})
+Regular.argTypes = {
+  _allListElementWidths: { table: { disable: true } },
+  _visible: { table: { disable: true } },
+  _small: { table: { disable: true } },
+  _resizeListenerFunction: { table: { disable: true } },
+}
+Regular.args = {
+  items: [
+    { label: "Kanton Zürich", href: "https://zh.ch" },
+    { label: "Gesundheit", href: "https://zh.ch/de/gesundheit.html" },
+    {
+      label: "Lebensmittel & Gebrauchsgegenstände",
+      href: "https://zh.ch/de/gesundheit/lebensmittel-gebrauchsgegenstaende.html",
+    },
+    {
+      label: "Lebensmittel",
+      href: "https://zh.ch/de/gesundheit/lebensmittel-gebrauchsgegenstaende/lebensmittel.html",
+    },
+    {
+      label: "Trinkwasser",
+      href: "https://zh.ch/de/gesundheit/lebensmittel-gebrauchsgegenstaende/lebensmittel.html",
+    },
+  ],
+  inverted: true,
+}

package/src/components/breadcrumb/test/breadcrumb.test.js

@@ -0,0 +1,141 @@
+import { html } from "lit"
+import { fixture, expect, aTimeout } from "@open-wc/testing"
+import { setViewport } from "@web/test-runner-commands"
+
+import "../leu-breadcrumb.js"
+
+const items = [
+  { label: "Kanton Zürich", href: "https://zh.ch" },
+  { label: "Gesundheit", href: "https://zh.ch/de/gesundheit.html" },
+  {
+    label: "Lebensmittel & Gebrauchsgegenstände",
+    href: "https://zh.ch/de/gesundheit/lebensmittel-gebrauchsgegenstaende.html",
+  },
+  {
+    label: "Lebensmittel",
+    href: "https://zh.ch/de/gesundheit/lebensmittel-gebrauchsgegenstaende/lebensmittel.html",
+  },
+  {
+    label: "Trinkwasser",
+    href: "https://zh.ch/de/gesundheit/lebensmittel-gebrauchsgegenstaende/lebensmittel.html",
+  },
+]
+
+async function defaultFixture(args = {}) {
+  return fixture(
+    html` <leu-breadcrumb .items="${args.items ?? items}"></leu-breadcrumb> `
+  )
+}
+
+describe("LeuBreadcrumb", () => {
+  it("is a defined element", async () => {
+    const el = customElements.get("leu-breadcrumb")
+
+    expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+    await expect(el).to.be.accessible()
+  })
+
+  it("renders a list of items", async () => {
+    await setViewport({ width: 1024, height: 1024 })
+    const el = await defaultFixture()
+
+    const itemEls = el.shadowRoot.querySelectorAll("li")
+
+    expect(itemEls[0]).to.have.trimmed.text(items[0].label)
+    expect(itemEls[0].querySelector("a")).to.have.attribute(
+      "href",
+      items[0].href
+    )
+    expect(itemEls[1]).to.have.trimmed.text(items[1].label)
+    expect(itemEls[1].querySelector("a")).to.have.attribute(
+      "href",
+      items[1].href
+    )
+    expect(itemEls[2]).to.have.trimmed.text(items[2].label)
+    expect(itemEls[2].querySelector("a")).to.have.attribute(
+      "href",
+      items[2].href
+    )
+    expect(itemEls[3]).to.have.trimmed.text(items[3].label)
+    expect(itemEls[3].querySelector("a")).to.have.attribute(
+      "href",
+      items[3].href
+    )
+
+    expect(itemEls[4]).to.have.trimmed.text(items[4].label)
+    expect(itemEls[4].querySelector("a")).to.not.exist
+  })
+
+  it("hides the overflowing items when shrinking the viewport", async () => {
+    await setViewport({ width: 1024, height: 1024 })
+    const el = await defaultFixture()
+
+    let itemEls = el.shadowRoot.querySelectorAll("li")
+    expect(itemEls.length).to.equal(5)
+
+    await setViewport({ width: 768, height: 1024 })
+    await aTimeout(600)
+    await el.updateComplete
+    itemEls = el.shadowRoot.querySelectorAll("li")
+
+    expect(itemEls.length).to.equal(4)
+  })
+
+  it("shows all the items when viewport is enlarged", async () => {
+    await setViewport({ width: 768, height: 1024 })
+    const el = await defaultFixture()
+
+    let itemEls = el.shadowRoot.querySelectorAll("li")
+    expect(itemEls.length).to.equal(4)
+
+    await setViewport({ width: 1024, height: 1024 })
+    await aTimeout(600)
+    await el.updateComplete
+    itemEls = el.shadowRoot.querySelectorAll("li")
+
+    expect(itemEls.length).to.equal(5)
+  })
+
+  it("only shows the first item when the viewport is too small", async () => {
+    await setViewport({ width: 240, height: 1024 })
+    const el = await defaultFixture()
+
+    const itemEls = el.shadowRoot.querySelectorAll("li")
+    expect(itemEls.length).to.equal(1)
+
+    expect(itemEls[0]).to.have.trimmed.text(items[3].label)
+    expect(itemEls[0].querySelector("a")).to.have.attribute(
+      "href",
+      items[3].href
+    )
+  })
+
+  it("shows a dropdown toggle when items are hidden", async () => {
+    await setViewport({ width: 768, height: 1024 })
+    const el = await defaultFixture()
+
+    const dropdownToggle = el.shadowRoot.querySelector("li:nth-child(2) button")
+    expect(dropdownToggle).to.exist
+    expect(dropdownToggle).to.have.trimmed.text("…")
+  })
+
+  it("shows a dropdown when the toggle is clicked", async () => {
+    await setViewport({ width: 768, height: 1024 })
+    const el = await defaultFixture()
+
+    const dropdownToggle = el.shadowRoot.querySelector("li:nth-child(2) button")
+    dropdownToggle.click()
+
+    await el.updateComplete
+
+    const dropdown = el.shadowRoot.querySelectorAll("leu-menu")
+    expect(dropdown).to.exist
+
+    const dropdownItems = el.shadowRoot.querySelectorAll("leu-menu-item")
+    expect(dropdownItems.length).to.equal(2)
+  })
+})

package/src/components/button/Button.js

@@ -1,7 +1,6 @@
 import { html, nothing, LitElement } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 import { Icon } from "../icon/icon.js"
-import { defineElement } from "../../lib/defineElement.js"
 
 import styles from "./button.css"
 
@@ -14,7 +13,7 @@ const BUTTON_VARIANTS = ["primary", "secondary", "ghost"]
 Object.freeze(BUTTON_VARIANTS)
 export { BUTTON_VARIANTS }
 
-const BUTTON_SIZES = ["normal", "small"]
+const BUTTON_SIZES = ["regular", "small"]
 Object.freeze(BUTTON_SIZES)
 export { BUTTON_SIZES }
 
@@ -40,19 +39,19 @@ export class LeuButton extends LitElement {
   }
 
   static properties = {
-    label: { type: String },
-    icon: { type: String },
-    iconAfter: { type: String },
-    size: { type: String },
-    variant: { type: String },
-    type: { type: String },
-
-    disabled: { type: Boolean },
-    round: { type: Boolean },
-    active: { type: Boolean },
-    inverted: { type: Boolean },
-    expanded: { type: String },
-    fluid: { type: Boolean },
+    label: { type: String, reflect: true },
+    icon: { type: String, reflect: true },
+    iconPosition: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    variant: { type: String, reflect: true },
+    type: { type: String, reflect: true },
+
+    disabled: { type: Boolean, reflect: true },
+    round: { type: Boolean, reflect: true },
+    active: { type: Boolean, reflect: true },
+    inverted: { type: Boolean, reflect: true },
+    expanded: { type: String, reflect: true },
+    fluid: { type: Boolean, reflect: true },
   }
 
   constructor() {
@@ -61,10 +60,10 @@ export class LeuButton extends LitElement {
     this.label = null
     /** @type {string} */
     this.icon = null
-    /** @type {string} - Only taken into account if Label and no Icon is set */
-    this.iconAfter = null
+    /** @type {("before" | "after")} - Only taken into account if Label and no Icon is set */
+    this.iconPosition = "before"
     /** @type {string} */
-    this.size = "normal"
+    this.size = "regular"
     /** @type {string} */
     this.variant = "primary"
     /** @type {string} */
@@ -94,7 +93,7 @@ export class LeuButton extends LitElement {
   }
 
   renderIconBefore() {
-    if (this.icon) {
+    if (this.icon && this.iconPosition === "before") {
       return html`<div class="icon-wrapper icon-wrapper--before">
         ${Icon(this.icon, this.getIconSize())}
       </div>`
@@ -104,9 +103,9 @@ export class LeuButton extends LitElement {
   }
 
   renderIconAfter() {
-    if (this.iconAfter && this.label && !this.icon) {
+    if (this.icon && this.label && this.iconPosition === "after") {
       return html`<div class="icon-wrapper icon-wrapper--after">
-        ${Icon(this.iconAfter, this.getIconSize())}
+        ${Icon(this.icon, this.getIconSize())}
       </div>`
     }
 
@@ -125,8 +124,8 @@ export class LeuButton extends LitElement {
 
   render() {
     const cssClasses = {
-      icon: !this.label && this.icon && !this.iconAfter,
-      round: !this.label && this.icon && !this.iconAfter && this.round,
+      icon: !this.label && this.icon,
+      round: !this.label && this.icon && this.round,
       active: this.active,
       inverted: this.inverted,
       [this.variant]: true,
@@ -144,7 +143,3 @@ export class LeuButton extends LitElement {
     `
   }
 }
-
-export function defineButtonElements() {
-  defineElement("button", LeuButton)
-}

package/src/components/button/button.css

@@ -38,14 +38,14 @@ button.inverted:focus-visible {
   justify-content: center;
 }
 
-/* size - normal */
-button.normal {
+/* size - regular */
+button.regular {
   padding: 12px 24px;
   font-size: 16px;
   line-height: 24px;
 }
 
-button.normal.icon {
+button.regular.icon {
   padding: 12px;
 }
 

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

@@ -1,3 +1,6 @@
-import { defineButtonElements } from "./Button.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuButton } from "./Button.js"
 
-defineButtonElements()
+export { LeuButton }
+
+defineElement("button", LeuButton)

package/src/components/button/stories/button.stories.js

@@ -20,6 +20,15 @@ function copyContent(params) {
 export default {
   title: "Button",
   component: "leu-button",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=4-1444&mode=design&t=xu5Vii8jXKKCKDez-0",
+    },
+    html: {
+      root: "[data-root]",
+    },
+  },
 }
 
 function Template({
@@ -31,7 +40,7 @@ function Template({
   variant,
   disabled,
   icon,
-  iconAfter,
+  iconPosition,
   type,
   expanded,
 }) {
@@ -40,7 +49,7 @@ function Template({
     size: size === "small" ? ' size="small"' : undefined,
     variant: variant !== "primary" ? ` variant="${variant}"` : undefined,
     icon: icon ? ` icon="${icon}"` : undefined,
-    iconAfter: iconAfter ? ` icon="${iconAfter}"` : undefined,
+    iconPosition: iconPosition ? ` icon="${iconPosition}"` : undefined,
     round: round ? " round" : undefined,
     active: active ? " active" : undefined,
     disabled: disabled ? " disabled" : undefined,
@@ -48,21 +57,23 @@ function Template({
     expanded: expanded ? ` expanded="${expanded}"` : undefined,
   }
   const component = html`
-    <leu-button
-      label=${ifDefined(label)}
-      size=${ifDefined(size)}
-      variant=${ifDefined(variant)}
-      icon=${ifDefined(icon)}
-      iconAfter=${ifDefined(iconAfter)}
-      type=${ifDefined(type)}
-      expanded=${expanded}
-      ?round=${round}
-      ?active=${active}
-      ?inverted=${inverted}
-      ?disabled=${disabled}
-      @click=${() => copyContent(params)}
-    >
-    </leu-button>
+    <div data-root>
+      <leu-button
+        label=${ifDefined(label)}
+        size=${ifDefined(size)}
+        variant=${ifDefined(variant)}
+        icon=${ifDefined(icon)}
+        iconPosition=${ifDefined(iconPosition)}
+        type=${ifDefined(type)}
+        expanded=${ifDefined(expanded)}
+        ?round=${round}
+        ?active=${active}
+        ?inverted=${inverted}
+        ?disabled=${disabled}
+        @click=${() => copyContent(params)}
+      >
+      </leu-button>
+    </div>
     <br />
     <p>Click the button to copy the code to the clipboard</p>
   `
@@ -75,7 +86,7 @@ function Template({
     </style>
     <div
       style="${inverted
-        ? "background:var(--leu-color-accent-blue);"
+        ? "background:var(--leu-color-accent-blue); color: var(--leu-color-white-transp-90);"
         : ""}padding:40px;"
     >
       ${component}
@@ -87,7 +98,7 @@ export const Regular = Template.bind({})
 Regular.argTypes = {
   label: { type: "string" },
   icon: { control: "select", options: ICON_NAMES },
-  iconAfter: { control: "select", options: ICON_NAMES },
+  iconPosition: { control: "select", options: ["before", "after"] },
   type: { control: "radio", options: BUTTON_TYPES },
   size: { control: "radio", options: BUTTON_SIZES },
   variant: { control: "radio", options: BUTTON_VARIANTS },
@@ -101,7 +112,7 @@ Regular.args = {
   inverted: false,
 
   icon: null,
-  iconAfter: null,
+  iconPosition: null,
   size: null,
   variant: null,
   type: null,
@@ -116,9 +127,14 @@ const items = [
   { label: "Active", icon: "calendar", active: true },
   { label: "Disabled", icon: "calendar", disabled: true },
 
-  { label: "Normal", iconAfter: "calendar" },
-  { label: "Active", iconAfter: "calendar", active: true },
-  { label: "Disabled", iconAfter: "calendar", disabled: true },
+  { label: "Normal", icon: "calendar", iconPosition: "after" },
+  { label: "Active", icon: "calendar", iconPosition: "after", active: true },
+  {
+    label: "Disabled",
+    icon: "calendar",
+    iconPosition: "after",
+    disabled: true,
+  },
 
   { icon: "calendar" },
   { icon: "calendar", active: true },
@@ -138,14 +154,19 @@ const ghostItems = [
   { label: "Active", icon: "calendar", active: true, expanded: "closed" },
   { label: "Disabled", icon: "calendar", disabled: true, expanded: "closed" },
 
-  { label: "Normal", iconAfter: "calendar" },
-  { label: "Active", iconAfter: "calendar", active: true },
-  { label: "Disabled", iconAfter: "calendar", disabled: true },
+  { label: "Normal", icon: "calendar", iconPosition: "after" },
+  { label: "Active", icon: "calendar", iconPosition: "after", active: true },
+  {
+    label: "Disabled",
+    icon: "calendar",
+    iconPosition: "after",
+    disabled: true,
+  },
 ]
 
 const sizes = [
   {
-    size: "normal",
+    size: "regular",
     items,
   },
   {
@@ -168,7 +189,7 @@ const groups = [
   {
     inverted: false,
     variant: "ghost",
-    sizes: [{ size: "normal", items: ghostItems }],
+    sizes: [{ size: "regular", items: ghostItems }],
   },
   {
     inverted: true,
@@ -183,11 +204,11 @@ const groups = [
   {
     inverted: true,
     variant: "ghost",
-    sizes: [{ size: "normal", items: ghostItems }],
+    sizes: [{ size: "regular", items: ghostItems }],
   },
 ]
 
-function TemplateDev() {
+function TemplateOverview() {
   return html` <style>
       .codeblock {
         position: relative;
@@ -267,7 +288,7 @@ function TemplateDev() {
               (size) =>
                 html`
                   <div>
-                    <div class=${classMap({ table: true })}>
+                    <div class=${classMap({ table: true })} data-root>
                       ${size.items.map((item) => {
                         const params = {
                           label: item.label
@@ -280,8 +301,8 @@ function TemplateDev() {
                               ? ` variant="${group.variant}"`
                               : undefined,
                           icon: item.icon ? ` icon="${item.icon}"` : undefined,
-                          iconAfter: item.iconAfter
-                            ? ` icon="${item.iconAfter}"`
+                          iconPosition: item.iconPosition
+                            ? ` iconPosition="${item.iconPosition}"`
                             : undefined,
                           round: item.round ? " round" : undefined,
                           active: item.active ? " active" : undefined,
@@ -297,7 +318,7 @@ function TemplateDev() {
                             size=${ifDefined(size.size)}
                             variant=${ifDefined(group.variant)}
                             icon=${ifDefined(item.icon)}
-                            iconAfter=${ifDefined(item.iconAfter)}
+                            iconPosition=${ifDefined(item.iconPosition)}
                             expanded=${ifDefined(item.expanded)}
                             ?round=${item.round}
                             ?active=${item.active}
@@ -318,11 +339,11 @@ function TemplateDev() {
     )}`
 }
 
-export const Dev = TemplateDev.bind({})
-Dev.argTypes = {
+export const Overview = TemplateOverview.bind({})
+Overview.argTypes = {
   label: { table: { disable: true } },
   icon: { table: { disable: true } },
-  iconAfter: { table: { disable: true } },
+  iconPosition: { table: { disable: true } },
   size: { table: { disable: true } },
   variant: { table: { disable: true } },
   type: { table: { disable: true } },

package/src/components/button/test/button.test.js

@@ -1,5 +1,5 @@
 import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
+import { fixture, expect, elementUpdated, oneEvent } from "@open-wc/testing"
 
 import "../leu-button.js"
 
@@ -9,7 +9,7 @@ async function defaultFixture() {
 
 describe("LeuButton", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("leu-button")
+    const el = customElements.get("leu-button")
 
     await expect(el).not.to.be.undefined
   })
@@ -19,4 +19,114 @@ describe("LeuButton", () => {
 
     await expect(el).shadowDom.to.be.accessible()
   })
+
+  it("renders the label", async () => {
+    const el = await fixture(html` <leu-button label="Sichern"></leu-button>`)
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(button).to.have.trimmed.text("Sichern")
+  })
+
+  it("renders the icon at the correct position", async () => {
+    const el = await fixture(
+      html` <leu-button icon="addNew" label="Sichern"></leu-button>`
+    )
+
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(button).dom.to.equal(
+      "<button><div><svg><path /></svg></div>Sichern</div>",
+      { ignoreAttributes: ["d", "class", "type"] }
+    )
+
+    el.iconPosition = "after"
+
+    await elementUpdated(el)
+
+    expect(button).dom.to.equal(
+      "<button>Sichern<div><svg><path /></svg></div></div>",
+      { ignoreAttributes: ["d", "class", "type"] }
+    )
+  })
+
+  it("renders the icon at the correct size", async () => {
+    const el = await fixture(
+      html` <leu-button icon="addNew" label="Sichern"></leu-button>`
+    )
+
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(button).dom.to.equal(
+      "<button><div><svg width='24' height='24'><path /></svg></div>Sichern</div>",
+      { ignoreAttributes: ["d", "class", "type"] }
+    )
+
+    el.size = "small"
+
+    await elementUpdated(el)
+
+    expect(button).dom.to.equal(
+      "<button><div><svg width='16' height='16'><path /></svg></div>Sichern</div>",
+      { ignoreAttributes: ["d", "class", "type"] }
+    )
+  })
+
+  it("renders the expanded icon only when the variant is ghost", async () => {
+    const el = await fixture(
+      html` <leu-button
+        icon="addNew"
+        label="Sichern"
+        variant="ghost"
+        expanded="open"
+      ></leu-button>`
+    )
+
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(button).dom.to.equal(
+      "<button class='ghost normal'><div class='icon-wrapper icon-wrapper--before'><svg width='24' height='24'><path /></svg></div>Sichern<div class='icon-wrapper icon-wrapper--expanded'><svg width='24' height='24'><path /></svg></div></div>",
+      { ignoreAttributes: ["d", "type", "width", "height"] }
+    )
+
+    el.variant = "primary"
+
+    await elementUpdated(el)
+
+    expect(button).dom.to.equal(
+      "<button class='primary normal'><div class='icon-wrapper icon-wrapper--before'><svg width='24' height='24'><path /></svg></div>Sichern</div>",
+      { ignoreAttributes: ["d", "type"] }
+    )
+  })
+
+  it("sets the dissabled attrbiute", async () => {
+    const el = await fixture(
+      html` <leu-button
+        icon="addNew"
+        label="Sichern"
+        variant="ghost"
+        expanded="open"
+        disabled
+      ></leu-button>`
+    )
+
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(button).to.have.attribute("disabled")
+
+    el.disabled = false
+    await elementUpdated(el)
+
+    expect(button).to.not.have.attribute("disabled")
+  })
+
+  it("dispatches the click event", async () => {
+    const el = await fixture(html` <leu-button label="Sichern"></leu-button>`)
+    const button = el.shadowRoot.querySelector("button")
+
+    setTimeout(() => button.click())
+
+    const event = await oneEvent(el, "click")
+
+    expect(event).to.exist
+  })
 })