@statistikzh/leu 0.3.0 → 0.4.0

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 }
 
@@ -42,7 +41,7 @@ export class LeuButton extends LitElement {
   static properties = {
     label: { type: String, reflect: true },
     icon: { type: String, reflect: true },
-    iconAfter: { type: String, reflect: true },
+    iconPosition: { type: String, reflect: true },
     size: { type: String, reflect: true },
     variant: { type: String, reflect: true },
     type: { type: String, reflect: true },
@@ -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
+  })
 })

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")
+  })
 })