@statistikzh/leu 0.2.0 → 0.4.0

package/src/components/button-group/ButtonGroup.js

@@ -1,7 +1,6 @@
 import { html, LitElement } from "lit"
-import { defineElement } from "../../lib/defineElement.js"
 import styles from "./button-group.css"
-import { defineButtonElements } from "../button/Button.js"
+import "../button/leu-button.js"
 
 /**
  * @tagname leu-button-group
@@ -56,8 +55,3 @@ export class LeuButtonGroup extends LitElement {
     `
   }
 }
-
-export function defineButtonGroupElements() {
-  defineButtonElements()
-  defineElement("button-group", LeuButtonGroup)
-}

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

@@ -1,3 +1,6 @@
-import { defineButtonGroupElements } from "./ButtonGroup.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuButtonGroup } from "./ButtonGroup.js"
 
-defineButtonGroupElements()
+export { LeuButtonGroup }
+
+defineElement("button-group", LeuButtonGroup)

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

@@ -14,6 +14,12 @@ function updateStorybookArgss(id, args) {
 export default {
   title: "ButtonGroup",
   component: "leu-button-group",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=18180-165796&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
 function Template({ items, value }, { id }) {

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

@@ -1,15 +1,17 @@
 import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
+import { fixture, expect, oneEvent, elementUpdated } from "@open-wc/testing"
 
 import "../leu-button-group.js"
 
+const items = ["Eins", "Zwei", "Drei"]
+
 async function defaultFixture() {
-  return fixture(html` <leu-button-group /> `)
+  return fixture(html` <leu-button-group .items=${items}></leu-button-group> `)
 }
 
 describe("LeuButtonGroup", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("leu-button-group")
+    const el = customElements.get("leu-button-group")
 
     await expect(el).not.to.be.undefined
   })
@@ -19,4 +21,78 @@ describe("LeuButtonGroup", () => {
 
     await expect(el).shadowDom.to.be.accessible()
   })
+
+  it("has no value by default", async () => {
+    const el = await defaultFixture()
+
+    await expect(el.value).to.be.null
+  })
+
+  it("has the correct value after clicking a button", async () => {
+    const el = await defaultFixture()
+
+    const buttons = el.shadowRoot.querySelectorAll("leu-button")
+
+    buttons[1].click()
+    await expect(el.value).to.equal("Zwei")
+
+    buttons[0].click()
+    await expect(el.value).to.equal("Eins")
+
+    buttons[2].click()
+    await expect(el.value).to.equal("Drei")
+
+    // Should not change after clicking the same button again
+    buttons[2].click()
+    await expect(el.value).to.equal("Drei")
+  })
+
+  it("renders the active button as a primary button", async () => {
+    const el = await defaultFixture()
+    el.value = "Zwei"
+    await elementUpdated(el)
+
+    const buttons = el.shadowRoot.querySelectorAll("leu-button")
+
+    await expect(buttons[0].variant).to.equal("secondary")
+    await expect(buttons[1].variant).to.equal("primary")
+    await expect(buttons[2].variant).to.equal("secondary")
+
+    buttons[0].click()
+
+    await expect(buttons[0].variant).to.equal("secondary")
+    await expect(buttons[1].variant).to.equal("secondary")
+    await expect(buttons[2].variant).to.equal("secondary")
+  })
+
+  it("sets the correct aria-checked attribute", async () => {
+    const el = await defaultFixture()
+    el.value = "Drei"
+    await elementUpdated(el)
+
+    const buttons = el.shadowRoot.querySelectorAll("leu-button")
+
+    await expect(buttons[0].getAttribute("aria-checked")).to.equal("false")
+    await expect(buttons[1].getAttribute("aria-checked")).to.equal("false")
+    await expect(buttons[2].getAttribute("aria-checked")).to.equal("true")
+
+    buttons[0].click()
+    await expect(buttons[0].getAttribute("aria-checked")).to.equal("false")
+    await expect(buttons[1].getAttribute("aria-checked")).to.equal("false")
+    await expect(buttons[2].getAttribute("aria-checked")).to.equal("false")
+  })
+
+  it("dispatches an input event when the value changes", async () => {
+    const el = await defaultFixture()
+    el.value = "Drei"
+    await elementUpdated(el)
+
+    const buttons = el.shadowRoot.querySelectorAll("leu-button")
+
+    setTimeout(() => buttons[0].click())
+
+    const inputEvent = await oneEvent(el, "input")
+
+    await expect(inputEvent.detail.value).to.be.equal("Eins")
+  })
 })

package/src/components/checkbox/Checkbox.js

@@ -1,89 +1,13 @@
-import { html, css, LitElement } from "lit"
+import { html, LitElement } from "lit"
 import { Icon } from "../icon/icon.js"
-import { defineElement } from "../../lib/defineElement.js"
+
+import styles from "./checkbox.css"
 
 /**
  * @tagname leu-checkbox
  */
 export class LeuCheckbox extends LitElement {
-  static styles = css`
-    :host {
-      --checkbox-color: var(--leu-color-black-40);
-      --checkbox-color-disabled: var(--leu-color-black-20);
-      --checkbox-color-focus: var(--leu-color-func-cyan);
-
-      --checkbox-label-color: var(--leu-color-black-100);
-      --checkbox-label-color-disabled: var(--checkbox-color-disabled);
-
-      --checkbox-tick-color: var(--leu-color-black-0);
-
-      --checkbox-font-regular: var(--leu-font-regular);
-
-      position: relative;
-
-      display: inline-flex;
-      align-items: flex-start;
-      gap: 0.5rem;
-
-      font-family: var(--checkbox-font-regular);
-    }
-
-    .checkbox {
-      --_length: 1.5rem;
-      appearance: none;
-      cursor: pointer;
-
-      width: var(--_length);
-      height: var(--_length);
-      margin: 0;
-
-      border: 2px solid var(--checkbox-color);
-      border-radius: 2px;
-
-      flex: 1 0 var(--_length);
-
-      display: grid;
-      place-items: center;
-    }
-
-    .checkbox:checked {
-      background-color: var(--checkbox-color);
-    }
-
-    .checkbox:is(:hover, :checked, :focus) {
-      --checkbox-color: var(--checkbox-color-focus);
-    }
-
-    .checkbox:focus-visible {
-      outline: 2px solid var(--checkbox-color-focus);
-      outline-offset: 2px;
-    }
-
-    .checkbox:disabled {
-      --checkbox-color: var(--checkbox-color-disabled);
-      cursor: not-allowed;
-    }
-
-    .label {
-      cursor: pointer;
-      color: var(--checkbox-label-color);
-      font-size: 1rem;
-      line-height: 1.5;
-    }
-
-    .checkbox:disabled + .label {
-      --checkbox-label-color: var(--checkbox-label-color-disabled);
-      cursor: not-allowed;
-    }
-
-    .icon {
-      position: absolute;
-      top: 0;
-      left: 0;
-      color: var(--checkbox-tick-color);
-      pointer-events: none;
-    }
-  `
+  static styles = styles
 
   static shadowRootOptions = {
     ...LitElement.shadowRootOptions,
@@ -93,16 +17,16 @@ export class LeuCheckbox extends LitElement {
   static properties = {
     checked: { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true },
-    identifier: { type: String },
-    value: { type: String },
-    name: { type: String },
+    identifier: { type: String, reflect: true },
+    value: { type: String, reflect: true },
+    name: { type: String, reflect: true },
+    label: { type: String, reflect: true },
   }
 
   constructor() {
     super()
     this.checked = false
     this.disabled = false
-    this.tabIndex = 0
 
     this.checkIcon = Icon("check")
   }
@@ -131,12 +55,8 @@ export class LeuCheckbox extends LitElement {
         ?disabled=${this.disabled}
         .value=${this.value}
       />
-      <label for=${this.identifier} class="label"><slot></slot></label>
+      <label for=${this.identifier} class="label">${this.label}</label>
       <div class="icon">${this.checkIcon}</div>
     `
   }
 }
-
-export function defineCheckboxElements() {
-  defineElement("checkbox", LeuCheckbox)
-}

package/src/components/checkbox/CheckboxGroup.js

@@ -1,45 +1,17 @@
-import { html, css, LitElement } from "lit"
+import { html, LitElement } from "lit"
 import { classMap } from "lit/directives/class-map.js"
-import { defineElement } from "../../lib/defineElement.js"
+
+import styles from "./checkbox-group.css"
 
 /**
  * @tagname leu-checkbox-group
  */
 export class LeuCheckboxGroup extends LitElement {
-  static styles = css`
-    :host {
-      --group-font-regular: var(--leu-font-regular);
-      --group-font-black: var(--leu-font-black);
-
-      font-family: var(--group-font-regular);
-    }
-
-    .fieldset {
-      display: flex;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      gap: 0.5rem 1rem;
-
-      border: none;
-      padding: 0;
-    }
-
-    .fieldset--vertical {
-      flex-direction: column;
-      gap: 1rem;
-    }
-
-    .legend {
-      font-family: var(--group-font-black);
-      font-size: 1.125rem;
-      line-height: 1.5;
-
-      margin-bottom: 0.5rem;
-    }
-  `
+  static styles = styles
 
   static properties = {
-    orientation: { type: String },
+    orientation: { type: String, reflect: true },
+    label: { type: String, reflect: true },
   }
 
   constructor() {
@@ -68,13 +40,11 @@ export class LeuCheckboxGroup extends LitElement {
 
     return html`
       <fieldset class=${classMap(fieldsetClasses)}>
-        <legend class="legend"><slot name="legend"></slot></legend>
+        ${this.label
+          ? html`<legend class="legend">${this.label}</legend>`
+          : html``}
         <slot @slotchange=${this.handleSlotChange}></slot>
       </fieldset>
     `
   }
 }
-
-export function defineCheckboxGroupElements() {
-  defineElement("checkbox-group", LeuCheckboxGroup)
-}

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

@@ -0,0 +1,29 @@
+:host {
+  --group-font-regular: var(--leu-font-regular);
+  --group-font-black: var(--leu-font-black);
+
+  font-family: var(--group-font-regular);
+}
+
+.fieldset {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+
+  border: none;
+  padding: 0;
+}
+
+.fieldset--vertical {
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.legend {
+  font-family: var(--group-font-black);
+  font-size: 1.125rem;
+  line-height: 1.5;
+
+  margin-bottom: 0.5rem;
+}

package/src/components/checkbox/checkbox.css

@@ -0,0 +1,76 @@
+:host {
+  --checkbox-color: var(--leu-color-black-40);
+  --checkbox-color-disabled: var(--leu-color-black-20);
+  --checkbox-color-focus: var(--leu-color-func-cyan);
+
+  --checkbox-label-color: var(--leu-color-black-100);
+  --checkbox-label-color-disabled: var(--checkbox-color-disabled);
+
+  --checkbox-tick-color: var(--leu-color-black-0);
+
+  --checkbox-font-regular: var(--leu-font-regular);
+
+  position: relative;
+
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+
+  font-family: var(--checkbox-font-regular);
+}
+
+.checkbox {
+  --_length: 1.5rem;
+  appearance: none;
+  cursor: pointer;
+
+  width: var(--_length);
+  height: var(--_length);
+  margin: 0;
+
+  border: 2px solid var(--checkbox-color);
+  border-radius: 2px;
+
+  flex: 1 0 var(--_length);
+
+  display: grid;
+  place-items: center;
+}
+
+.checkbox:checked {
+  background-color: var(--checkbox-color);
+}
+
+.checkbox:is(:hover, :checked, :focus) {
+  --checkbox-color: var(--checkbox-color-focus);
+}
+
+.checkbox:focus-visible {
+  outline: 2px solid var(--checkbox-color-focus);
+  outline-offset: 2px;
+}
+
+.checkbox:disabled {
+  --checkbox-color: var(--checkbox-color-disabled);
+  cursor: not-allowed;
+}
+
+.label {
+  cursor: pointer;
+  color: var(--checkbox-label-color);
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.checkbox:disabled + .label {
+  --checkbox-label-color: var(--checkbox-label-color-disabled);
+  cursor: not-allowed;
+}
+
+.icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  color: var(--checkbox-tick-color);
+  pointer-events: none;
+}

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

@@ -1,3 +1,6 @@
-import { defineCheckboxGroupElements } from "./CheckboxGroup.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuCheckboxGroup } from "./CheckboxGroup.js"
 
-defineCheckboxGroupElements()
+export { LeuCheckboxGroup }
+
+defineElement("checkbox-group", LeuCheckboxGroup)

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

@@ -1,3 +1,6 @@
-import { defineCheckboxElements } from "./Checkbox.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuCheckbox } from "./Checkbox.js"
 
-defineCheckboxElements()
+export { LeuCheckbox }
+
+defineElement("checkbox", LeuCheckbox)

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

@@ -1,6 +1,7 @@
 import { html } from "lit"
 import "../leu-checkbox.js"
 import "../leu-checkbox-group.js"
+import { ifDefined } from "lit/directives/if-defined.js"
 
 export default {
   title: "Checkbox/Group",
@@ -12,32 +13,54 @@ export default {
       control: { type: "checkbox" },
     },
   },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81935&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
-function Template({ legend, orientation }) {
+function Template({ label, orientation }) {
   return html`
-    <leu-checkbox-group orientation=${orientation}>
-      <span slot="legend">${legend}</span>
-      <leu-checkbox identifier="1" value="1" name="checkbox-button" disabled
-        >Kurz</leu-checkbox
-      >
-      <leu-checkbox identifier="2" value="2" name="checkbox-button"
-        >Etwas Länger</leu-checkbox
-      >
-      <leu-checkbox identifier="3" value="3" name="checkbox-button" disabled
-        >Deaktiviert dazwischen</leu-checkbox
-      >
-      <leu-checkbox identifier="4" value="4" name="checkbox-button"
-        >Ein langes Label um sicher ein umbruch zu erzwingen</leu-checkbox
-      >
+    <leu-checkbox-group
+      orientation=${ifDefined(orientation)}
+      label=${ifDefined(label)}
+    >
+      <leu-checkbox
+        identifier="1"
+        value="1"
+        name="checkbox-button"
+        label="Kurz"
+        disabled
+      ></leu-checkbox>
+      <leu-checkbox
+        identifier="2"
+        value="2"
+        name="checkbox-button"
+        label="Etwas Länger"
+      ></leu-checkbox>
+      <leu-checkbox
+        identifier="3"
+        value="3"
+        name="checkbox-button"
+        disabled
+        label="Deaktiviert dazwischen"
+      ></leu-checkbox>
+      <leu-checkbox
+        identifier="4"
+        value="4"
+        name="checkbox-button"
+        label="Ein langes Label um sicher ein umbruch zu erzwingen"
+      ></leu-checkbox>
     </leu-checkbox-group>
   `
 }
 
 export const Horizontal = Template.bind({})
-export const HorizontalLegend = Template.bind({})
-HorizontalLegend.args = {
-  legend: "Anrede",
+export const HorizontalLabel = Template.bind({})
+HorizontalLabel.args = {
+  label: "Anrede",
 }
 
 export const Vertical = Template.bind({})
@@ -45,8 +68,8 @@ Vertical.args = {
   orientation: "VERTICAL",
 }
 
-export const VerticalLegend = Template.bind({})
-VerticalLegend.args = {
+export const VerticalLabel = Template.bind({})
+VerticalLabel.args = {
   orientation: "VERTICAL",
-  legend: "Anrede",
+  label: "Anrede",
 }

package/src/components/checkbox/stories/checkbox.stories.js

@@ -9,6 +9,12 @@ export default {
       control: "text",
     },
   },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81935&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
 function Template({ label = "Label", value, checked, disabled }) {
@@ -17,9 +23,9 @@ function Template({ label = "Label", value, checked, disabled }) {
       .value=${value}
       ?checked=${checked}
       ?disabled=${disabled}
+      label=${label}
       identifier="checkbox-1"
     >
-      ${label}
     </leu-checkbox>
   `
 }