feat: add button-group (#37)

src/components/button-group/ButtonGroup.js

@@ -0,0 +1,63 @@
+import { html, LitElement } from "lit"
+import { defineElement } from "../../lib/defineElement.js"
+import styles from "./button-group.css"
+import { defineButtonElements } from "../button/Button.js"
+
+/**
+ * @tagname leu-button-group
+ */
+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
+  }
+
+  _setValue(newValue) {
+    this.value = newValue
+
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        bubbles: true,
+        composed: true,
+        detail: { value: newValue },
+      })
+    )
+  }
+
+  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>
+            `
+        )}
+      </div>
+    `
+  }
+}
+
+export function defineButtonGroupElements() {
+  defineButtonElements()
+  defineElement("button-group", LeuButtonGroup)
+}

src/components/button-group/button-group.css

@@ -0,0 +1,17 @@
+:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  --button-group-font-regular: var(--leu-font-regular);
+  --button-group-font-black: var(--leu-font-black);
+
+  font-family: var(--chip-font-regular);
+}
+
+.group {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}

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

@@ -0,0 +1,3 @@
+import { defineButtonGroupElements } from "./ButtonGroup.js"
+
+defineButtonGroupElements()

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

@@ -0,0 +1,41 @@
+import { html } from "lit"
+import "../leu-button-group.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
+function updateStorybookArgss(id, args) {
+  const channel = window.__STORYBOOK_ADDONS_CHANNEL__
+  channel.emit(UPDATE_STORY_ARGS, {
+    storyId: id,
+    updatedArgs: args,
+  })
+}
+
+export default {
+  title: "ButtonGroup",
+  component: "leu-button-group",
+}
+
+function Template({ items, value }, { id }) {
+  return html`
+    <leu-button-group
+      .items=${items}
+      .value=${value}
+      @click=${(event) => {
+        updateStorybookArgss(id, {
+          value: event.target.value,
+        })
+      }}
+    >
+    </leu-button-group>
+    <br />
+    <br />
+    <pre>value = '${value}'</pre>
+  `
+}
+
+export const Regular = Template.bind({})
+Regular.args = {
+  items: ["Eins", "Zwei", "Drei"],
+  selected: "Zwei",
+}

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

@@ -0,0 +1,22 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-button-group.js"
+
+async function defaultFixture() {
+  return fixture(html` <leu-button-group /> `)
+}
+
+describe("LeuButtonGroup", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("leu-button-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()
+  })
+})