@statistikzh/leu 0.3.0 → 0.5.0

package/src/components/chip/ChipSelectable.js

@@ -1,5 +1,4 @@
 import { html } from "lit"
-import { defineElement } from "../../lib/defineElement.js"
 
 import { LeuChipBase } from "./Chip.js"
 
@@ -9,7 +8,7 @@ export const SIZES = {
 }
 
 export const VARIANTS = {
-  default: "default",
+  toggle: "toggle",
   radio: "radio",
 }
 
@@ -31,11 +30,11 @@ export class LeuChipSelectable extends LeuChipBase {
 
     /**
      * The variant of the chip. Has an effect not only on the visual appearance but also on the behavior.
-     * - `default`: The chip behaves like a toggle button.
+     * - `toggle`: The chip behaves like a toggle button.
      * - `radio`: The chip behaves like a radio button.
      *
      * @type {keyof typeof VARIANTS}
-     * @default "default"
+     * @default "toggle"
      */
     variant: { type: String, reflect: true },
 
@@ -79,13 +78,9 @@ export class LeuChipSelectable extends LeuChipBase {
     return html`<button
       @click=${(e) => this.handleClick(e)}
       class="button"
-      aria-selected=${this.selected ? "true" : "false"}
+      aria-pressed=${this.selected ? "true" : "false"}
     >
-      <span class="label"><slot></slot></span>
+      <span class="label">${this.label}</span>
     </button>`
   }
 }
-
-export function defineChipSelectableElements() {
-  defineElement("chip-selectable", LeuChipSelectable)
-}

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

@@ -1,5 +1,15 @@
-:host {
+.label {
+  margin: 0 0 0.5rem;
+  font: var(--leu-t-curve-35-black-font);
+  color: var(--leu-color-black-100);
+}
+
+:host([inverted]) .label {
+  color: var(--leu-color-black-0);
+}
+
+.group {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: var(--leu-chip-group-gap, 0.5rem);
 }

package/src/components/chip/chip.css

@@ -20,8 +20,8 @@
   --chip-radio-background-default: var(--leu-color-black-0);
   --chip-radio-background-selected: var(--leu-color-func-cyan);
 
-  --chip-font-regular: var(--leu-font-regular);
-  --chip-font-black: var(--leu-font-black);
+  --chip-font-regular: var(--leu-font-family-regular);
+  --chip-font-black: var(--leu-font-family-black);
 
   --chip-background-color: var(--chip-background-color-default);
   --chip-color: var(--chip-color-default);
@@ -29,6 +29,9 @@
   --chip-radio-background: var(--chip-radio-background-default);
 
   font-family: var(--chip-font-regular);
+
+  /* Allow shrinking to achieve text truncation (ellipsis) */
+  min-width: 0;
 }
 
 :host([inverted]) {
@@ -61,8 +64,11 @@
   cursor: pointer;
 
   display: inline-flex;
-  align-items: center;
   gap: 0.5rem;
+
+  /* Allow shrinking to achieve text truncation (ellipsis) */
+  min-width: 0;
+  max-width: 100%;
 }
 
 .button:hover,
@@ -109,6 +115,7 @@
 
 :host([variant="radio"]) .button::before {
   content: "";
+  flex: 0 0 1rem;
   width: 1rem;
   height: 1rem;
   background-color: var(--chip-radio-background);
@@ -123,6 +130,10 @@
 .label {
   position: relative;
   top: -0.0625rem;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .icon svg {

package/src/components/chip/exports.js

@@ -1,10 +1,4 @@
-export { LeuChipGroup, defineChipGroupElements } from "./ChipGroup.js"
-export { LeuChipLink, defineChipLinkElements } from "./ChipLink.js"
-export {
-  LeuChipRemovable,
-  defineChipRemovableElements,
-} from "./ChipRemovable.js"
-export {
-  LeuChipSelectable,
-  defineChipSelectableElements,
-} from "./ChipSelectable.js"
+export { LeuChipGroup } from "./ChipGroup.js"
+export { LeuChipLink } from "./ChipLink.js"
+export { LeuChipRemovable } from "./ChipRemovable.js"
+export { LeuChipSelectable } from "./ChipSelectable.js"

package/src/components/chip/leu-chip-group.js

@@ -1,3 +1,6 @@
-import { defineChipGroupElements } from "./ChipGroup.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuChipGroup } from "./ChipGroup.js"
 
-defineChipGroupElements()
+export { LeuChipGroup }
+
+defineElement("chip-group", LeuChipGroup)

package/src/components/chip/leu-chip-link.js

@@ -1,3 +1,6 @@
-import { defineChipLinkElements } from "./ChipLink.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuChipLink } from "./ChipLink.js"
 
-defineChipLinkElements()
+export { LeuChipLink }
+
+defineElement("chip-link", LeuChipLink)

package/src/components/chip/leu-chip-removable.js

@@ -1,3 +1,6 @@
-import { defineChipRemovableElements } from "./ChipRemovable.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuChipRemovable } from "./ChipRemovable.js"
 
-defineChipRemovableElements()
+export { LeuChipRemovable }
+
+defineElement("chip-removable", LeuChipRemovable)

package/src/components/chip/leu-chip-selectable.js

@@ -1,3 +1,6 @@
-import { defineChipSelectableElements } from "./ChipSelectable.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuChipSelectable } from "./ChipSelectable.js"
 
-defineChipSelectableElements()
+export { LeuChipSelectable }
+
+defineElement("chip-selectable", LeuChipSelectable)

package/src/components/chip/stories/chip-group.stories.js

@@ -1,92 +1,155 @@
 import { html } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
+import { styleMap } from "lit/directives/style-map.js"
 
 import "../leu-chip-selectable.js"
 import "../leu-chip-removable.js"
+import "../leu-chip-link.js"
 import "../leu-chip-group.js"
 
 import { SELECTION_MODES } from "../ChipGroup.js"
 import { VARIANTS as SELECTABLE_VARIANTS } from "../ChipSelectable.js"
 
 export default {
-  title: "Chip Group",
+  title: "Chip/Group",
   component: "leu-chip-group",
   argTypes: {
     selectionMode: {
       control: "select",
       options: Object.values(SELECTION_MODES),
     },
-    inverted: { control: "boolean" },
+    headingLevel: {
+      control: "select",
+      options: [1, 2, 3, 4, 5, 6],
+    },
+    "--leu-chip-group-gap": {
+      control: "text",
+    },
   },
   args: {
     selectionMode: "",
     inverted: false,
   },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81933&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+    html: {
+      root: "[data-root]",
+    },
+  },
 }
 
-const chips = ["Chip 1", "Chip 2", "Chip 3"]
+const chips = [
+  "Chip mit einem sehr langen Text der dann hoffentlich mal abgeschnitten wird",
+  "Chip 2",
+  "Chip 3",
+]
 
-function invertedBackground(args, content) {
-  return html`
-    <div
-      style="background: ${args.inverted
-        ? "hsla(209, 83%, 59%, 1)"
-        : "var(--leu-color-black-5)"}; padding: 1rem;"
+const links = [
+  "Steuererklärung",
+  "Abstimmungen",
+  "Zentrale Aufnahmeprüfung",
+  "Pass & Identitätskarte",
+  "Arbeiten beim Kanton",
+]
+
+function invertedBackground({ args, content }) {
+  return {
+    content: html`
+      <div
+        style="background: ${args.inverted
+          ? "hsla(209, 83%, 59%, 1)"
+          : "var(--leu-color-black-5)"}; padding: 1rem;"
+        data-root
+      >
+        ${content}
+      </div>
+    `,
+    args,
+  }
+}
+
+function chipGroup({ args, content }) {
+  const styles = {
+    "--leu-chip-group-gap": args["--leu-chip-group-gap"],
+  }
+
+  const nextContent = html`
+    <leu-chip-group
+      style=${styleMap(styles)}
+      selection-mode=${ifDefined(args.selectionMode)}
+      heading-level=${ifDefined(args.headingLevel)}
+      label=${ifDefined(args.label)}
+      ?inverted=${args.inverted}
     >
       ${content}
-    </div>
+    </leu-chip-group>
   `
+
+  return { args, content: nextContent }
 }
 
 function DefaultTemplate(args) {
   const content = html`
-    <leu-chip-group selection-mode=${args.selectionMode}>
-      ${chips.map(
-        (chip) => html`
-          <leu-chip-removable ?inverted=${args.inverted}>
-            ${chip}
-          </leu-chip-removable>
-        `
-      )}
-    </leu-chip-group>
+    ${chips.map(
+      (chip) => html`
+        <leu-chip-removable ?inverted=${args.inverted} label=${chip}>
+        </leu-chip-removable>
+      `
+    )}
   `
 
-  return invertedBackground(args, content)
+  return invertedBackground(chipGroup({ args, content })).content
 }
 
 function SingleTemplate(args) {
   const content = html`
-    <leu-chip-group selection-mode=${args.selectionMode}>
-      ${chips.map(
-        (chip) => html`
-          <leu-chip-selectable
-            ?inverted=${args.inverted}
-            variant=${SELECTABLE_VARIANTS.radio}
-            value="chip-${chip}"
-          >
-            ${chip}
-          </leu-chip-selectable>
-        `
-      )}
-    </leu-chip-group>
+    ${chips.map(
+      (chip) => html`
+        <leu-chip-selectable
+          ?inverted=${args.inverted}
+          variant=${SELECTABLE_VARIANTS.radio}
+          value="chip-${chip}"
+          label=${chip}
+        >
+        </leu-chip-selectable>
+      `
+    )}
   `
 
-  return invertedBackground(args, content)
+  return invertedBackground(chipGroup({ args, content })).content
 }
 
 function MultipleTemplate(args) {
   const content = html`
-    <leu-chip-group selection-mode=${args.selectionMode}>
-      ${chips.map(
-        (chip) => html`
-          <leu-chip-selectable ?inverted=${args.inverted} value="chip-${chip}">
-            ${chip}
-          </leu-chip-selectable>
-        `
-      )}
-    </leu-chip-group>
+    ${chips.map(
+      (chip) => html`
+        <leu-chip-selectable
+          ?inverted=${args.inverted}
+          value="chip-${chip}"
+          label=${chip}
+        >
+        </leu-chip-selectable>
+      `
+    )}
+  `
+
+  return invertedBackground(chipGroup({ args, content })).content
+}
+
+function LabeledTemplate(args) {
+  const content = html`
+    ${links.map(
+      (chip) => html`
+        <leu-chip-link ?inverted=${args.inverted} label=${chip}>
+        </leu-chip-link>
+      `
+    )}
   `
 
-  return invertedBackground(args, content)
+  return invertedBackground(chipGroup({ args, content })).content
 }
 
 export const Default = DefaultTemplate.bind({})
@@ -97,3 +160,6 @@ Single.args = { selectionMode: SELECTION_MODES.single }
 
 export const Multiple = MultipleTemplate.bind({})
 Multiple.args = { selectionMode: SELECTION_MODES.multiple }
+
+export const Labeled = LabeledTemplate.bind({})
+Labeled.args = { label: "Top Themen" }

package/src/components/chip/stories/chip-link.stories.js

@@ -6,7 +6,7 @@ import "../leu-chip-link.js"
 import { SIZES } from "../ChipLink.js"
 
 export default {
-  title: "Chip Link",
+  title: "Chip/Link",
   component: "leu-chip-link",
   argTypes: {
     size: { control: "select", options: Object.values(SIZES) },
@@ -14,6 +14,15 @@ export default {
   args: {
     label: "Publikationen",
   },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81933&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+    html: {
+      root: "[data-root]",
+    },
+  },
 }
 
 function Template(args) {
@@ -22,10 +31,13 @@ function Template(args) {
       style="background: ${args.inverted
         ? "hsla(209, 83%, 59%, 1)"
         : "var(--leu-color-black-5)"}; padding: 1rem;"
+      data-root
     >
-      <leu-chip-link size=${ifDefined(args.size)} ?inverted=${args.inverted}
-        >${args.label}</leu-chip-link
-      >
+      <leu-chip-link
+        size=${ifDefined(args.size)}
+        ?inverted=${args.inverted}
+        label=${args.label}
+      ></leu-chip-link>
     </div>
   `
 }

package/src/components/chip/stories/chip-removable.stories.js

@@ -3,11 +3,20 @@ import { html } from "lit"
 import "../leu-chip-removable.js"
 
 export default {
-  title: "Chip Removable",
+  title: "Chip/Removable",
   component: "leu-chip-removable",
   args: {
     label: "Publikationen",
   },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81933&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+    html: {
+      root: "[data-root]",
+    },
+  },
 }
 
 function Template(args) {
@@ -16,10 +25,12 @@ function Template(args) {
       style="background: ${args.inverted
         ? "hsla(209, 83%, 59%, 1)"
         : "var(--leu-color-black-5)"}; padding: 1rem;"
+      data-root
     >
-      <leu-chip-removable ?inverted=${args.inverted}
-        >${args.label}</leu-chip-removable
-      >
+      <leu-chip-removable
+        ?inverted=${args.inverted}
+        label=${args.label}
+      ></leu-chip-removable>
     </div>
   `
 }

package/src/components/chip/stories/chip-selectable.stories.js

@@ -6,7 +6,7 @@ import "../leu-chip-selectable.js"
 import { SIZES, VARIANTS } from "../ChipSelectable.js"
 
 export default {
-  title: "Chip Selectable",
+  title: "Chip/Selectable",
   component: "leu-chip-selectable",
   argTypes: {
     variant: { control: "select", options: Object.values(VARIANTS) },
@@ -16,6 +16,15 @@ export default {
   args: {
     label: "Publikationen",
   },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81933&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+    html: {
+      root: "[data-root]",
+    },
+  },
 }
 
 function Template(args) {
@@ -24,14 +33,15 @@ function Template(args) {
       style="background: ${args.inverted
         ? "hsla(209, 83%, 59%, 1)"
         : "var(--leu-color-black-5)"}; padding: 1rem;"
+      data-root
     >
       <leu-chip-selectable
         size=${ifDefined(args.size)}
         variant=${ifDefined(args.variant)}
+        label=${args.label}
         ?selected=${args.selected}
         ?inverted=${args.inverted}
-        >${args.label}</leu-chip-selectable
-      >
+      ></leu-chip-selectable>
     </div>
   `
 }

package/src/components/chip/test/chip-group.test.js

@@ -0,0 +1,124 @@
+import { html } from "lit"
+import { fixture, expect, oneEvent } from "@open-wc/testing"
+
+import "../leu-chip-selectable.js"
+import "../leu-chip-removable.js"
+import "../leu-chip-group.js"
+
+async function removableFixture() {
+  return fixture(
+    html`
+      <leu-chip-group>
+        <leu-chip-removable label="Publikationen"></leu-chip-removable>
+        <leu-chip-removable label="Daten" value="2"></leu-chip-removable>
+        <leu-chip-removable
+          label="Schnittstellen"
+          value="3"
+        ></leu-chip-removable>
+      </leu-chip-group>
+    `
+  )
+}
+
+async function singleSelectionFixture() {
+  return fixture(
+    html`
+      <leu-chip-group selection-mode="single">
+        <leu-chip-selectable
+          label="Publikationen"
+          value="1"
+          variant="radio"
+        ></leu-chip-selectable>
+        <leu-chip-selectable
+          label="Daten"
+          value="2"
+          variant="radio"
+        ></leu-chip-selectable>
+        <leu-chip-selectable
+          label="Schnittstellen"
+          value="3"
+          variant="radio"
+        ></leu-chip-selectable>
+      </leu-chip-group>
+    `
+  )
+}
+
+async function multipleSelectionFixture() {
+  return fixture(
+    html`
+      <leu-chip-group selection-mode="multiple">
+        <leu-chip-selectable
+          label="Publikationen"
+          value="1"
+        ></leu-chip-selectable>
+        <leu-chip-selectable label="Daten" value="2"></leu-chip-selectable>
+        <leu-chip-selectable
+          label="Schnittstellen"
+          value="3"
+        ></leu-chip-selectable>
+      </leu-chip-group>
+    `
+  )
+}
+
+describe("LeuChipGroup", () => {
+  it("is a defined element", async () => {
+    const el = customElements.get("leu-chip-selectable")
+
+    await expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit with removable chips", async () => {
+    const el = await removableFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("passes the a11y audit with selectable chips", async () => {
+    const el = await multipleSelectionFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("passes the a11y audit with selectable radio chips", async () => {
+    const el = await singleSelectionFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("updates the value when a chip is selected", async () => {
+    const el = await singleSelectionFixture()
+    const chip = el.querySelector("leu-chip-selectable")
+    const chipButton = chip.shadowRoot.querySelector("button")
+    chipButton.click()
+
+    await expect(el.value).to.deep.equal(["1"])
+  })
+
+  it("updates the value when multiple chips are selected", async () => {
+    const el = await multipleSelectionFixture()
+    const chips = el.querySelectorAll("leu-chip-selectable")
+    const chipButton2 = chips[1].shadowRoot.querySelector("button")
+    const chipButton3 = chips[2].shadowRoot.querySelector("button")
+
+    chipButton2.click()
+    chipButton3.click()
+
+    await expect(el.value).to.deep.equal(["2", "3"])
+  })
+
+  it("fires an input event when a chip is selected", async () => {
+    const el = await singleSelectionFixture()
+    const chip = el.querySelector("leu-chip-selectable")
+    const chipButton = chip.shadowRoot.querySelector("button")
+
+    setTimeout(() => {
+      chipButton.click()
+    }, 0)
+
+    const event = await oneEvent(el, "input")
+
+    await expect(event).to.exist
+  })
+})

package/src/components/chip/test/chip-link.test.js

@@ -0,0 +1,58 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-chip-link.js"
+
+async function defaultFixture() {
+  return fixture(
+    html`
+      <leu-chip-link label="Daten" href="https://zh.ch/daten"></leu-chip-link>
+    `
+  )
+}
+
+describe("LeuChipLink", () => {
+  it("is a defined element", async () => {
+    const el = customElements.get("leu-chip-link")
+
+    await expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("renders the label", async () => {
+    const el = await defaultFixture()
+
+    const link = el.shadowRoot.querySelector("a")
+
+    expect(link).to.have.trimmed.text("Daten")
+  })
+
+  it("renders a link element", async () => {
+    const el = await defaultFixture()
+
+    expect(el.shadowRoot.querySelector("a")).to.exist
+  })
+
+  it("passes the href attribute to the link", async () => {
+    const el = await defaultFixture()
+
+    expect(el.shadowRoot.querySelector("a").getAttribute("href")).to.equal(
+      "https://zh.ch/daten"
+    )
+  })
+
+  it("delegates the focus to the a element", async () => {
+    const el = await defaultFixture()
+
+    el.focus()
+
+    expect(el.shadowRoot.querySelector("a")).to.equal(
+      el.shadowRoot.activeElement
+    )
+  })
+})