@statistikzh/leu 0.5.1 → 0.7.0

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

@@ -1,8 +1,9 @@
-import { html } from "lit"
+import { html, nothing } from "lit"
 import { ifDefined } from "lit/directives/if-defined.js"
 import { classMap } from "lit/directives/class-map.js"
 import "../leu-button.js"
-import { ICON_NAMES } from "../../icon/icon.js"
+import "../../icon/leu-icon.js"
+import { paths as iconPaths } from "../../icon/paths.js"
 import {
   BUTTON_VARIANTS,
   BUTTON_TYPES,
@@ -35,8 +36,6 @@ function Template(args = {}) {
         content=${ifDefined(args.content)}
         size=${ifDefined(args.size)}
         variant=${ifDefined(args.variant)}
-        icon=${ifDefined(args.icon)}
-        iconPosition=${ifDefined(args.iconPosition)}
         type=${ifDefined(args.type)}
         expanded=${ifDefined(args.expanded)}
         ?round=${args.round}
@@ -45,6 +44,12 @@ function Template(args = {}) {
         ?disabled=${args.disabled}
         @click=${copyContent}
       >
+        ${args.icon
+          ? html`<leu-icon
+              slot=${ifDefined(args.content ? args.iconPosition : undefined)}
+              name=${args.icon}
+            ></leu-icon>`
+          : nothing}
         ${args.content}
       </leu-button>
     </div>
@@ -70,13 +75,18 @@ function Template(args = {}) {
 
 export const Regular = Template.bind({})
 Regular.argTypes = {
-  content: { type: "string" },
-  icon: { control: "select", options: ICON_NAMES },
-  iconPosition: { control: "select", options: ["before", "after"] },
+  content: { control: "text" },
+  icon: { control: "select", options: Object.keys(iconPaths) },
+  iconPosition: {
+    control: "select",
+    options: ["before", "after"],
+  },
   type: { control: "radio", options: BUTTON_TYPES },
   size: { control: "radio", options: BUTTON_SIZES },
   variant: { control: "radio", options: BUTTON_VARIANTS },
   expanded: { control: "radio", options: BUTTON_EXPANDED_OPTIONS },
+  disabled: { control: "boolean" },
+  round: { control: "boolean" },
 }
 Regular.args = {
   content: "Click Mich...",
@@ -86,7 +96,7 @@ Regular.args = {
   inverted: false,
 
   icon: null,
-  iconPosition: null,
+  iconPosition: "before",
   size: null,
   variant: null,
   type: null,
@@ -97,9 +107,14 @@ const items = [
   { content: "Active", active: true },
   { content: "Disabled", disabled: true },
 
-  { content: "Normal", icon: "calendar" },
-  { content: "Active", icon: "calendar", active: true },
-  { content: "Disabled", icon: "calendar", disabled: true },
+  { content: "Normal", icon: "calendar", iconPosition: "before" },
+  { content: "Active", icon: "calendar", iconPosition: "before", active: true },
+  {
+    content: "Disabled",
+    icon: "calendar",
+    iconPosition: "before",
+    disabled: true,
+  },
 
   { content: "Normal", icon: "calendar", iconPosition: "after" },
   { content: "Active", icon: "calendar", iconPosition: "after", active: true },
@@ -120,13 +135,35 @@ const items = [
 ]
 
 const ghostItems = [
-  { content: "Normal", icon: "calendar" },
-  { content: "Active", icon: "calendar", active: true },
-  { content: "Disabled", icon: "calendar", disabled: true },
+  { content: "Normal", icon: "calendar", iconPosition: "before" },
+  { content: "Active", icon: "calendar", iconPosition: "before", active: true },
+  {
+    content: "Disabled",
+    icon: "calendar",
+    iconPosition: "before",
+    disabled: true,
+  },
 
-  { content: "Normal", icon: "calendar", expanded: "closed" },
-  { content: "Active", icon: "calendar", active: true, expanded: "closed" },
-  { content: "Disabled", icon: "calendar", disabled: true, expanded: "closed" },
+  {
+    content: "Normal",
+    icon: "calendar",
+    iconPosition: "before",
+    expanded: "closed",
+  },
+  {
+    content: "Active",
+    icon: "calendar",
+    iconPosition: "before",
+    active: true,
+    expanded: "closed",
+  },
+  {
+    content: "Disabled",
+    icon: "calendar",
+    iconPosition: "before",
+    disabled: true,
+    expanded: "closed",
+  },
 
   { content: "Normal", icon: "calendar", iconPosition: "after" },
   { content: "Active", icon: "calendar", iconPosition: "after", active: true },
@@ -269,8 +306,6 @@ function TemplateOverview() {
                             label=${ifDefined(item.label)}
                             size=${ifDefined(size.size)}
                             variant=${ifDefined(group.variant)}
-                            icon=${ifDefined(item.icon)}
-                            iconPosition=${ifDefined(item.iconPosition)}
                             expanded=${ifDefined(item.expanded)}
                             ?round=${item.round}
                             ?active=${item.active}
@@ -278,6 +313,12 @@ function TemplateOverview() {
                             ?inverted=${group.inverted}
                             @click=${copyContent}
                           >
+                            ${item.icon
+                              ? html` <leu-icon
+                                  slot=${ifDefined(item.iconPosition)}
+                                  name=${item.icon}
+                                ></leu-icon>`
+                              : nothing}
                             ${item.content}
                           </leu-button>
                         `

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

@@ -2,6 +2,7 @@ import { html } from "lit"
 import { fixture, expect, elementUpdated, oneEvent } from "@open-wc/testing"
 
 import "../leu-button.js"
+import "../../icon/leu-icon.js"
 
 async function defaultFixture() {
   return fixture(html` <leu-button>button</leu-button>`)
@@ -22,7 +23,9 @@ describe("LeuButton", () => {
 
   it("passes the a11y audit with no visible text", async () => {
     const el = await fixture(
-      html` <leu-button icon="download" label="sichern"></leu-button>`
+      html` <leu-button label="sichern">
+        <leu-icon name="download"></leu-icon>
+      </leu-button>`
     )
 
     await expect(el).shadowDom.to.be.accessible()
@@ -36,9 +39,8 @@ describe("LeuButton", () => {
 
   it("sets the aria-label attribute", async () => {
     const el = await fixture(
-      html` <leu-button
-        icon="download"
-        label="Dokument herunterladen"
+      html` <leu-button label="Dokument herunterladen"
+        ><leu-icon name="download"></leu-icon
       ></leu-button>`
     )
     const button = el.shadowRoot.querySelector("button")
@@ -46,62 +48,33 @@ describe("LeuButton", () => {
     expect(button).to.have.attribute("aria-label", "Dokument herunterladen")
   })
 
-  it("renders the icon at the correct position", async () => {
-    const el = await fixture(
-      html` <leu-button icon="addNew">Sichern</leu-button>`
-    )
-
-    const button = el.shadowRoot.querySelector("button")
-
-    expect(button).dom.to.equal(
-      "<button><div><svg><path /></svg></div><slot></slot></div>",
-      { ignoreAttributes: ["d", "class", "type"] }
-    )
-
-    el.iconPosition = "after"
-
-    await elementUpdated(el)
-
-    expect(button).dom.to.equal(
-      "<button><slot></slot><div><svg><path /></svg></div></div>",
-      { ignoreAttributes: ["d", "class", "type"] }
-    )
-  })
-
-  it("renders the icon at the correct size", async () => {
+  it("renders the icon slots at the correct position", async () => {
     const el = await fixture(
-      html` <leu-button icon="addNew">Sichern</leu-button>`
+      html` <leu-button
+        ><leu-icon name="addBew" slot="before"></leu-icon>Sichern</leu-button
+      >`
     )
 
     const button = el.shadowRoot.querySelector("button")
 
     expect(button).dom.to.equal(
-      "<button><div><svg width='24' height='24'><path /></svg></div><slot></slot></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><slot></slot></div>",
-      { ignoreAttributes: ["d", "class", "type"] }
+      "<button><slot name='before'></slot><span><slot></slot></span><slot name='after'></slot></button>",
+      { ignoreAttributes: ["class", "type"] }
     )
   })
 
   it("renders the expanded icon only when the variant is ghost", async () => {
     const el = await fixture(
-      html` <leu-button icon="addNew" variant="ghost" expanded="true"
-        >Sichern</leu-button
+      html` <leu-button variant="ghost" expanded="true"
+        ><leu-icon name="addNew" slot="before"></leu-icon>Sichern</leu-button
       >`
     )
 
     const button = el.shadowRoot.querySelector("button")
 
     expect(button).dom.to.equal(
-      "<button class='ghost regular'><div class='icon-wrapper icon-wrapper--before'><svg width='24' height='24'><path /></svg></div><slot></slot><div class='icon-wrapper icon-wrapper--expanded'><svg width='24' height='24'><path /></svg></div></div>",
-      { ignoreAttributes: ["d", "type", "width", "height"] }
+      "<button aria-expanded='true'><slot name='before'></slot><span><slot></slot></span><slot name='after'></slot><div class='icon-wrapper icon-wrapper--expanded'><leu-icon name='angleDropDown' size='24'></leu-icon></div></button>",
+      { ignoreAttributes: ["class", "type"] }
     )
 
     el.variant = "primary"
@@ -109,20 +82,17 @@ describe("LeuButton", () => {
     await elementUpdated(el)
 
     expect(button).dom.to.equal(
-      "<button class='primary regular'><div class='icon-wrapper icon-wrapper--before'><svg width='24' height='24'><path /></svg></div><slot></slot></div>",
-      { ignoreAttributes: ["d", "type"] }
+      "<button class='primary regular' aria-expanded='true'><slot name='before'></slot><span><slot></slot></span><slot name='after'></slot></button>",
+      { ignoreAttributes: ["class", "type"] }
     )
   })
 
   it("sets the dissabled attrbiute", async () => {
     const el = await fixture(
-      html` <leu-button
-        icon="addNew"
-        label="Sichern"
-        variant="ghost"
-        expanded="true"
-        disabled
-      ></leu-button>`
+      html` <leu-button variant="ghost" expanded="true" disabled>
+        <leu-icon name="addNew" slot="before"></leu-icon>
+        Sichern
+      </leu-button>`
     )
 
     const button = el.shadowRoot.querySelector("button")
@@ -137,11 +107,8 @@ describe("LeuButton", () => {
 
   it("reflects the role attribute", async () => {
     const el = await fixture(
-      html` <leu-button
-        icon="addNew"
-        variant="ghost"
-        componentRole="menuitemradio"
-        >Sichern</leu-button
+      html` <leu-button variant="ghost" componentRole="menuitemradio"
+        ><leu-icon name="addNew" slot="before"></leu-icon>Sichern</leu-button
       >`
     )
 
@@ -152,12 +119,8 @@ describe("LeuButton", () => {
 
   it("sets the either checked or selected attribute depending on the role", async () => {
     const el = await fixture(
-      html` <leu-button
-        icon="addNew"
-        variant="ghost"
-        componentRole="menuitemradio"
-        active
-        >Sichern</leu-button
+      html` <leu-button variant="ghost" componentRole="menuitemradio" active
+        ><leu-icon name="addNew" slot="before"></leu-icon>Sichern</leu-button
       >`
     )
 

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

@@ -1,4 +1,6 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
+import { LeuElement } from "../../lib/LeuElement.js"
+
 // @ts-ignore
 import styles from "./button-group.css"
 
@@ -8,7 +10,7 @@ import styles from "./button-group.css"
  * @prop {string} value - The value of the currenty selected (active) button
  * @fires input - When the value of the group changes by clicking a button
  */
-export class LeuButtonGroup extends LitElement {
+export class LeuButtonGroup extends LeuElement {
   static styles = styles
 
   constructor() {

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

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

package/src/components/checkbox/Checkbox.js

@@ -1,34 +1,40 @@
-import { html, LitElement } from "lit"
-import { Icon } from "../icon/icon.js"
+import { html } from "lit"
 
+import { LeuElement } from "../../lib/LeuElement.js"
+import { LeuIcon } from "../icon/Icon.js"
+
+// @ts-ignore
 import styles from "./checkbox.css"
 
 /**
  * @tagname leu-checkbox
  */
-export class LeuCheckbox extends LitElement {
+export class LeuCheckbox extends LeuElement {
+  static dependencies = {
+    "leu-icon": LeuIcon,
+  }
+
   static styles = styles
 
+  /** @internal */
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
   static properties = {
     checked: { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true },
-    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.checkIcon = Icon("check")
+    this.name = ""
+    this.value = ""
   }
 
   handleChange(event) {
@@ -45,7 +51,7 @@ export class LeuCheckbox extends LitElement {
   render() {
     return html`
       <input
-        id=${this.identifier}
+        id=${`checkbox-${this.name}`}
         class="checkbox"
         type="checkbox"
         name="${this.name}"
@@ -55,8 +61,8 @@ export class LeuCheckbox extends LitElement {
         ?disabled=${this.disabled}
         .value=${this.value}
       />
-      <label for=${this.identifier} class="label">${this.label}</label>
-      <div class="icon">${this.checkIcon}</div>
+      <label for=${`checkbox-${this.name}`} class="label"><slot></slot></label>
+      <leu-icon class="icon" name="check"></leu-icon>
     `
   }
 }

package/src/components/checkbox/CheckboxGroup.js

@@ -1,12 +1,15 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 
+import { LeuElement } from "../../lib/LeuElement.js"
+
+// @ts-ignore
 import styles from "./checkbox-group.css"
 
 /**
  * @tagname leu-checkbox-group
  */
-export class LeuCheckboxGroup extends LitElement {
+export class LeuCheckboxGroup extends LeuElement {
   static styles = styles
 
   static properties = {
@@ -29,7 +32,7 @@ export class LeuCheckboxGroup extends LitElement {
   }
 
   handleItems() {
-    this.items = [...this.querySelectorAll(":scope > *:not([slot])")]
+    this.items = Array.from(this.querySelectorAll(":scope > *:not([slot])"))
   }
 
   render() {

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

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

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

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

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

@@ -27,32 +27,16 @@ function Template({ label, orientation }) {
       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 value="1" name="checkbox-button" disabled
+        >Kurz</leu-checkbox
+      >
+      <leu-checkbox value="2" name="checkbox-button">Etwas Länger</leu-checkbox>
+      <leu-checkbox value="3" name="checkbox-button" disabled
+        >Deaktiviert dazwischen</leu-checkbox
+      >
+      <leu-checkbox value="4" name="checkbox-button"
+        >Ein langes Label um sicher ein umbruch zu erzwingen</leu-checkbox
+      >
     </leu-checkbox-group>
   `
 }

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

@@ -19,13 +19,8 @@ export default {
 
 function Template({ label = "Label", value, checked, disabled }) {
   return html`
-    <leu-checkbox
-      .value=${value}
-      ?checked=${checked}
-      ?disabled=${disabled}
-      label=${label}
-      identifier="checkbox-1"
-    >
+    <leu-checkbox .value=${value} ?checked=${checked} ?disabled=${disabled}>
+      ${label}
     </leu-checkbox>
   `
 }

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

@@ -8,14 +8,9 @@ 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 value="1" disabled>Option 1</leu-checkbox>
+      <leu-checkbox value="2">Option 2</leu-checkbox>
+      <leu-checkbox value="3">Option 3</leu-checkbox>
     </leu-checkbox-group>
   `)
 }
@@ -23,19 +18,9 @@ async function defaultFixture() {
 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 value="1" disabled>Option 1</leu-checkbox>
+      <leu-checkbox value="2" checked>Option 2</leu-checkbox>
+      <leu-checkbox value="3">Option 3</leu-checkbox>
     </leu-checkbox-group>
   `)
 }

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

@@ -6,11 +6,7 @@ import "../leu-checkbox.js"
 
 async function defaultFixture() {
   return fixture(html`
-    <leu-checkbox
-      identifier="b"
-      value="2"
-      label="Das ist ein Label"
-    ></leu-checkbox>
+    <leu-checkbox value="2">Das ist ein Label</leu-checkbox>
   `)
 }
 
@@ -104,11 +100,4 @@ describe("LeuCheckbox", () => {
 
     expect(event).to.exist
   })
-
-  it("applies the identifier to the input and the label", async () => {
-    const el = await defaultFixture()
-
-    expect(el.shadowRoot.querySelector("input").id).to.equal("b")
-    expect(el.shadowRoot.querySelector("label").htmlFor).to.equal("b")
-  })
 })

package/src/components/chip/Chip.js

@@ -1,20 +1,21 @@
-import { LitElement } from "lit"
+import { LeuElement } from "../../lib/LeuElement.js"
+
+// @ts-ignore
 import styles from "./chip.css"
 
 /* Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=21161-184433&mode=design&t=Kjo5VDiqivihn8dh-11 */
 
-export class LeuChipBase extends LitElement {
+export class LeuChipBase extends LeuElement {
   static styles = styles
 
   /** @internal */
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
   static properties = {
     inverted: { type: Boolean, reflect: true },
-    label: { type: String, reflect: true },
   }
 
   constructor() {