@statistikzh/leu 0.4.0 → 0.5.1

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

@@ -10,11 +10,8 @@ import {
   BUTTON_EXPANDED_OPTIONS,
 } from "../Button.js"
 
-function copyContent(params) {
-  const string = `<leu-button${Object.values(params)
-    .filter((o) => o)
-    .join("")}>\n</leu-button>`
-  navigator.clipboard.writeText(string)
+function copyContent(e) {
+  navigator.clipboard.writeText(e.target.outerHTML.replace(/<!--.*?-->/g, ""))
 }
 
 export default {
@@ -31,47 +28,24 @@ export default {
   },
 }
 
-function Template({
-  label,
-  round,
-  size,
-  active,
-  inverted,
-  variant,
-  disabled,
-  icon,
-  iconPosition,
-  type,
-  expanded,
-}) {
-  const params = {
-    label: label ? ` label="${label}"` : undefined,
-    size: size === "small" ? ' size="small"' : undefined,
-    variant: variant !== "primary" ? ` variant="${variant}"` : undefined,
-    icon: icon ? ` icon="${icon}"` : undefined,
-    iconPosition: iconPosition ? ` icon="${iconPosition}"` : undefined,
-    round: round ? " round" : undefined,
-    active: active ? " active" : undefined,
-    disabled: disabled ? " disabled" : undefined,
-    inverted: inverted ? " inverted" : undefined,
-    expanded: expanded ? ` expanded="${expanded}"` : undefined,
-  }
+function Template(args = {}) {
   const component = html`
     <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)}
+        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}
+        ?active=${args.active}
+        ?inverted=${args.inverted}
+        ?disabled=${args.disabled}
+        @click=${copyContent}
       >
+        ${args.content}
       </leu-button>
     </div>
     <br />
@@ -85,7 +59,7 @@ function Template({
       }
     </style>
     <div
-      style="${inverted
+      style="${args.inverted
         ? "background:var(--leu-color-accent-blue); color: var(--leu-color-white-transp-90);"
         : ""}padding:40px;"
     >
@@ -96,7 +70,7 @@ function Template({
 
 export const Regular = Template.bind({})
 Regular.argTypes = {
-  label: { type: "string" },
+  content: { type: "string" },
   icon: { control: "select", options: ICON_NAMES },
   iconPosition: { control: "select", options: ["before", "after"] },
   type: { control: "radio", options: BUTTON_TYPES },
@@ -105,7 +79,7 @@ Regular.argTypes = {
   expanded: { control: "radio", options: BUTTON_EXPANDED_OPTIONS },
 }
 Regular.args = {
-  label: "Click Mich...",
+  content: "Click Mich...",
   round: false,
   disabled: false,
   active: false,
@@ -119,18 +93,18 @@ Regular.args = {
 }
 
 const items = [
-  { label: "Normal" },
-  { label: "Active", active: true },
-  { label: "Disabled", disabled: true },
+  { content: "Normal" },
+  { content: "Active", active: true },
+  { content: "Disabled", disabled: true },
 
-  { label: "Normal", icon: "calendar" },
-  { label: "Active", icon: "calendar", active: true },
-  { label: "Disabled", icon: "calendar", disabled: true },
+  { content: "Normal", icon: "calendar" },
+  { content: "Active", icon: "calendar", active: true },
+  { content: "Disabled", icon: "calendar", disabled: true },
 
-  { label: "Normal", icon: "calendar", iconPosition: "after" },
-  { label: "Active", icon: "calendar", iconPosition: "after", active: true },
+  { content: "Normal", icon: "calendar", iconPosition: "after" },
+  { content: "Active", icon: "calendar", iconPosition: "after", active: true },
   {
-    label: "Disabled",
+    content: "Disabled",
     icon: "calendar",
     iconPosition: "after",
     disabled: true,
@@ -146,18 +120,18 @@ const items = [
 ]
 
 const ghostItems = [
-  { label: "Normal", icon: "calendar" },
-  { label: "Active", icon: "calendar", active: true },
-  { label: "Disabled", icon: "calendar", disabled: true },
+  { content: "Normal", icon: "calendar" },
+  { content: "Active", icon: "calendar", active: true },
+  { content: "Disabled", icon: "calendar", disabled: true },
 
-  { label: "Normal", icon: "calendar", expanded: "closed" },
-  { label: "Active", icon: "calendar", active: true, expanded: "closed" },
-  { label: "Disabled", icon: "calendar", disabled: true, expanded: "closed" },
+  { content: "Normal", icon: "calendar", expanded: "closed" },
+  { content: "Active", icon: "calendar", active: true, expanded: "closed" },
+  { content: "Disabled", icon: "calendar", disabled: true, expanded: "closed" },
 
-  { label: "Normal", icon: "calendar", iconPosition: "after" },
-  { label: "Active", icon: "calendar", iconPosition: "after", active: true },
+  { content: "Normal", icon: "calendar", iconPosition: "after" },
+  { content: "Active", icon: "calendar", iconPosition: "after", active: true },
   {
-    label: "Disabled",
+    content: "Disabled",
     icon: "calendar",
     iconPosition: "after",
     disabled: true,
@@ -289,30 +263,8 @@ function TemplateOverview() {
                 html`
                   <div>
                     <div class=${classMap({ table: true })} data-root>
-                      ${size.items.map((item) => {
-                        const params = {
-                          label: item.label
-                            ? ` label="${item.label}"`
-                            : undefined,
-                          size:
-                            size.size === "small" ? ' size="small"' : undefined,
-                          variant:
-                            group.variant !== "primary"
-                              ? ` variant="${group.variant}"`
-                              : undefined,
-                          icon: item.icon ? ` icon="${item.icon}"` : undefined,
-                          iconPosition: item.iconPosition
-                            ? ` iconPosition="${item.iconPosition}"`
-                            : undefined,
-                          round: item.round ? " round" : undefined,
-                          active: item.active ? " active" : undefined,
-                          disabled: item.disabled ? " disabled" : undefined,
-                          inverted: group.inverted ? " inverted" : undefined,
-                          expanded: item.expanded
-                            ? ` expanded="${item.expanded}"`
-                            : undefined,
-                        }
-                        return html`
+                      ${size.items.map(
+                        (item) => html`
                           <leu-button
                             label=${ifDefined(item.label)}
                             size=${ifDefined(size.size)}
@@ -324,11 +276,12 @@ function TemplateOverview() {
                             ?active=${item.active}
                             ?disabled=${item.disabled}
                             ?inverted=${group.inverted}
-                            @click=${() => copyContent(params)}
+                            @click=${copyContent}
                           >
+                            ${item.content}
                           </leu-button>
                         `
-                      })}
+                      )}
                     </div>
                   </div>
                 `
@@ -341,7 +294,7 @@ function TemplateOverview() {
 
 export const Overview = TemplateOverview.bind({})
 Overview.argTypes = {
-  label: { table: { disable: true } },
+  content: { table: { disable: true } },
   icon: { table: { disable: true } },
   iconPosition: { table: { disable: true } },
   size: { table: { disable: true } },

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

@@ -4,7 +4,7 @@ import { fixture, expect, elementUpdated, oneEvent } from "@open-wc/testing"
 import "../leu-button.js"
 
 async function defaultFixture() {
-  return fixture(html` <leu-button label="button"></leu-button>`)
+  return fixture(html` <leu-button>button</leu-button>`)
 }
 
 describe("LeuButton", () => {
@@ -20,22 +20,41 @@ describe("LeuButton", () => {
     await expect(el).shadowDom.to.be.accessible()
   })
 
+  it("passes the a11y audit with no visible text", async () => {
+    const el = await fixture(
+      html` <leu-button icon="download" label="sichern"></leu-button>`
+    )
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
   it("renders the label", async () => {
-    const el = await fixture(html` <leu-button label="Sichern"></leu-button>`)
+    const el = await fixture(html` <leu-button>Sichern</leu-button>`)
+
+    expect(el).to.have.trimmed.text("Sichern")
+  })
+
+  it("sets the aria-label attribute", async () => {
+    const el = await fixture(
+      html` <leu-button
+        icon="download"
+        label="Dokument herunterladen"
+      ></leu-button>`
+    )
     const button = el.shadowRoot.querySelector("button")
 
-    expect(button).to.have.trimmed.text("Sichern")
+    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" label="Sichern"></leu-button>`
+      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>Sichern</div>",
+      "<button><div><svg><path /></svg></div><slot></slot></div>",
       { ignoreAttributes: ["d", "class", "type"] }
     )
 
@@ -44,20 +63,20 @@ describe("LeuButton", () => {
     await elementUpdated(el)
 
     expect(button).dom.to.equal(
-      "<button>Sichern<div><svg><path /></svg></div></div>",
+      "<button><slot></slot><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>`
+      html` <leu-button icon="addNew">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>",
+      "<button><div><svg width='24' height='24'><path /></svg></div><slot></slot></div>",
       { ignoreAttributes: ["d", "class", "type"] }
     )
 
@@ -66,25 +85,22 @@ describe("LeuButton", () => {
     await elementUpdated(el)
 
     expect(button).dom.to.equal(
-      "<button><div><svg width='16' height='16'><path /></svg></div>Sichern</div>",
+      "<button><div><svg width='16' height='16'><path /></svg></div><slot></slot></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>`
+      html` <leu-button icon="addNew" variant="ghost" expanded="true"
+        >Sichern</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>",
+      "<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"] }
     )
 
@@ -93,7 +109,7 @@ describe("LeuButton", () => {
     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>",
+      "<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"] }
     )
   })
@@ -104,7 +120,7 @@ describe("LeuButton", () => {
         icon="addNew"
         label="Sichern"
         variant="ghost"
-        expanded="open"
+        expanded="true"
         disabled
       ></leu-button>`
     )
@@ -119,8 +135,63 @@ describe("LeuButton", () => {
     expect(button).to.not.have.attribute("disabled")
   })
 
+  it("reflects the role attribute", async () => {
+    const el = await fixture(
+      html` <leu-button
+        icon="addNew"
+        variant="ghost"
+        componentRole="menuitemradio"
+        >Sichern</leu-button
+      >`
+    )
+
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(button).to.have.attribute("role", "menuitemradio")
+  })
+
+  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
+      >`
+    )
+
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(button).to.have.attribute("aria-checked", "true")
+    expect(button).to.not.have.attribute("aria-selected")
+
+    el.componentRole = "tab"
+
+    await elementUpdated(el)
+
+    expect(button).to.have.attribute("aria-selected", "true")
+    expect(button).to.not.have.attribute("aria-checked")
+
+    el.componentRole = "checkbox"
+    el.active = false
+
+    await elementUpdated(el)
+
+    expect(button).to.have.attribute("aria-checked", "false")
+    expect(button).to.not.have.attribute("aria-selected")
+
+    el.componentRole = undefined
+    el.active = true
+
+    await elementUpdated(el)
+
+    expect(button).to.not.have.attribute("aria-checked")
+    expect(button).to.not.have.attribute("aria-selected")
+  })
+
   it("dispatches the click event", async () => {
-    const el = await fixture(html` <leu-button label="Sichern"></leu-button>`)
+    const el = await fixture(html` <leu-button>Sichern</leu-button>`)
     const button = el.shadowRoot.querySelector("button")
 
     setTimeout(() => button.click())

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

@@ -1,56 +1,98 @@
 import { html, LitElement } from "lit"
+// @ts-ignore
 import styles from "./button-group.css"
-import "../button/leu-button.js"
 
 /**
  * @tagname leu-button-group
+ * @slot - Slot for the buttons
+ * @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 {
   static styles = styles
 
-  static properties = {
-    items: { type: Array, reflect: true },
-    value: { type: String, reflect: true },
-  }
-
   constructor() {
     super()
-    /** @type {Array} */
-    this.items = []
-    /** @type {string} */
-    this.value = null
+
+    this._items = []
+  }
+
+  /**
+   * @param {import("../button/Button").LeuButton} button
+   * @returns {string}
+   */
+  static getButtonValue(button) {
+    return button.getAttribute("value") ?? button.innerText.trim()
+  }
+
+  get value() {
+    const activeButton = this._items.find((item) => item.active)
+    return activeButton ? LeuButtonGroup.getButtonValue(activeButton) : null
+  }
+
+  set value(newValue) {
+    this._items.forEach((item) => {
+      /* eslint-disable no-param-reassign */
+      item.active = LeuButtonGroup.getButtonValue(item) === newValue
+      /* eslint-enable no-param-reassign */
+    })
+  }
+
+  _handleSlotChange() {
+    /**
+     * Remove all event listeners that were added before.
+     * Just because a slotchange event was fired, it doesn't mean that all of the
+     * children of the slot have changed.
+     */
+    this._items.forEach((item) => {
+      item.removeEventListener("click", this._handleButtonClick)
+    })
+
+    const slot = this.shadowRoot.querySelector("slot")
+    this._items = slot.assignedElements({ flatten: true })
+
+    let foundActiveButtonBefore = false
+
+    this._items.forEach((item) => {
+      /* eslint-disable no-param-reassign */
+      item.addEventListener("click", () => this._handleButtonClick(item))
+      item.componentRole = "menuitemradio"
+
+      /**
+       * In case there are multiple active buttons
+       * only the first one will be kept active.
+       */
+      if (item.active && foundActiveButtonBefore) {
+        item.active = false
+      } else if (item.active) {
+        foundActiveButtonBefore = true
+      }
+
+      /* eslint-enable no-param-reassign */
+    })
   }
 
-  _setValue(newValue) {
-    this.value = newValue
+  /**
+   * @param {import("../button/Button").LeuButton} button
+   */
+  _handleButtonClick(button) {
+    if (!button.active) {
+      this.value = LeuButtonGroup.getButtonValue(button)
 
-    this.dispatchEvent(
-      new CustomEvent("input", {
-        bubbles: true,
-        composed: true,
-        detail: { value: newValue },
-      })
-    )
+      this.dispatchEvent(
+        new CustomEvent("input", {
+          bubbles: true,
+          composed: true,
+          detail: { value: LeuButtonGroup.getButtonValue(button) },
+        })
+      )
+    }
   }
 
   render() {
     return html`
       <div role="menubar" class="group">
-        ${this.items.map(
-          (item) =>
-            html`
-              <leu-button
-                label=${item}
-                variant=${this.value === item ? "primary" : "secondary"}
-                @click=${() => {
-                  this._setValue(item)
-                }}
-                role="menuitemradio"
-                aria-checked=${this.value === item}
-              >
-              </leu-button>
-            `
-        )}
+        <slot @slotchange=${this._handleSlotChange}></slot>
       </div>
     `
   }

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

@@ -1,5 +1,6 @@
 import { html } from "lit"
 import "../leu-button-group.js"
+import "../../button/leu-button.js"
 
 // https://stackoverflow.com/questions/72566428/storybook-angular-how-to-dynamically-update-args-from-the-template
 import { UPDATE_STORY_ARGS } from "@storybook/core-events" // eslint-disable-line
@@ -23,21 +24,27 @@ export default {
 }
 
 function Template({ items, value }, { id }) {
-  return html`
-    <leu-button-group
-      .items=${items}
+  return html` <leu-button-group
       .value=${value}
-      @click=${(event) => {
+      @input=${(event) => {
         updateStorybookArgss(id, {
           value: event.target.value,
         })
       }}
     >
+      ${items.map(
+        (i) =>
+          html`<leu-button
+            variant="secondary"
+            ?active=${value === i}
+            value=${`${i}-attr`}
+            >${i}
+          </leu-button>`
+      )}
     </leu-button-group>
     <br />
     <br />
-    <pre>value = '${value}'</pre>
-  `
+    <pre>value = '${value}'</pre>`
 }
 
 export const Regular = Template.bind({})