@statistikzh/leu 0.3.0 → 0.4.0

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,
@@ -96,6 +20,7 @@ export class LeuCheckbox extends LitElement {
     identifier: { type: String, reflect: true },
     value: { type: String, reflect: true },
     name: { type: String, reflect: true },
+    label: { type: String, reflect: true },
   }
 
   constructor() {
@@ -130,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, 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>
   `
 }

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

@@ -0,0 +1,124 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+import { sendKeys } from "@web/test-runner-commands"
+
+import "../leu-checkbox.js"
+import "../leu-checkbox-group.js"
+
+async function defaultFixture() {
+  return fixture(html`
+    <leu-checkbox-group>
+      <leu-checkbox
+        label="Option 1"
+        identifier="a"
+        value="1"
+        disabled
+      ></leu-checkbox>
+      <leu-checkbox label="Option 2" identifier="b" value="2"></leu-checkbox>
+      <leu-checkbox label="Option 3" identifier="c" value="3"></leu-checkbox>
+    </leu-checkbox-group>
+  `)
+}
+
+async function checkedFixture() {
+  return fixture(html`
+    <leu-checkbox-group>
+      <leu-checkbox
+        label="Option 1"
+        identifier="a"
+        value="1"
+        disabled
+      ></leu-checkbox>
+      <leu-checkbox
+        label="Option 2"
+        identifier="b"
+        value="2"
+        checked
+      ></leu-checkbox>
+      <leu-checkbox label="Option 3" identifier="c" value="3"></leu-checkbox>
+    </leu-checkbox-group>
+  `)
+}
+
+describe("LeuCheckboxGroup", () => {
+  it("is a defined element", async () => {
+    const el = customElements.get("leu-checkbox-group")
+
+    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("has a default value of an empty array", async () => {
+    const el = await defaultFixture()
+
+    expect(el.value).to.deep.equal([])
+  })
+
+  it("updates the value when a checkbox is checked", async () => {
+    const el = await defaultFixture()
+    const leuCheckbox = el.querySelector('leu-checkbox[value="2"]')
+    const checkbox = leuCheckbox.shadowRoot.querySelector("input")
+
+    checkbox.click()
+
+    expect(el.value).to.deep.equal(["2"])
+  })
+
+  it("allows multiple checkboxes to be checked", async () => {
+    const el = await defaultFixture()
+    const leuCheckbox2 = el.querySelector('leu-checkbox[value="2"]')
+    const leuCheckbox3 = el.querySelector('leu-checkbox[value="3"]')
+    const checkbox2 = leuCheckbox2.shadowRoot.querySelector("input")
+    const checkbox3 = leuCheckbox3.shadowRoot.querySelector("input")
+
+    checkbox2.click()
+    checkbox3.click()
+
+    expect(el.value).to.deep.equal(["2", "3"])
+  })
+
+  it("updates the value when a checkbox is unchecked", async () => {
+    const el = await defaultFixture()
+    const leuCheckbox = el.querySelector('leu-checkbox[value="2"]')
+    const checkbox = leuCheckbox.shadowRoot.querySelector("input")
+
+    checkbox.click()
+    checkbox.click()
+
+    expect(el.value).to.deep.equal([])
+  })
+
+  it("doesn't update the value when a disabled checkbox is clicked", async () => {
+    const el = await defaultFixture()
+    const leuCheckbox = el.querySelector('leu-checkbox[value="1"]')
+    const checkbox = leuCheckbox.shadowRoot.querySelector("input")
+
+    checkbox.click()
+
+    expect(el.value).to.deep.equal([])
+  })
+
+  it("has a default value that reflects all checked checkboxes", async () => {
+    const el = await checkedFixture()
+
+    expect(el.value).to.deep.equal(["2"])
+  })
+
+  it("delegates focus to the first active checkbox", async () => {
+    const el = await defaultFixture()
+    const leuCheckbox = el.querySelector('leu-checkbox[value="2"]')
+    const checkbox = leuCheckbox.shadowRoot.querySelector("input")
+
+    await sendKeys({
+      press: "Tab",
+    })
+
+    expect(document.activeElement).to.equal(leuCheckbox)
+    expect(leuCheckbox.shadowRoot.activeElement).to.equal(checkbox)
+  })
+})