@statistikzh/leu 0.0.2

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

@@ -0,0 +1,333 @@
+import { html } 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 {
+  BUTTON_VARIANTS,
+  BUTTON_TYPES,
+  BUTTON_SIZES,
+  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)
+}
+
+export default {
+  title: "Button",
+  component: "leu-button",
+}
+
+function Template({
+  label,
+  round,
+  size,
+  active,
+  inverted,
+  variant,
+  disabled,
+  icon,
+  iconAfter,
+  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,
+    iconAfter: iconAfter ? ` icon="${iconAfter}"` : undefined,
+    round: round ? " round" : undefined,
+    active: active ? " active" : undefined,
+    disabled: disabled ? " disabled" : undefined,
+    inverted: inverted ? " inverted" : undefined,
+    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>
+    <br />
+    <p>Click the button to copy the code to the clipboard</p>
+  `
+
+  return html`
+    <style>
+      * {
+        font-family: Helvetica;
+      }
+    </style>
+    <div
+      style="${inverted
+        ? "background:var(--leu-color-accent-blue);"
+        : ""}padding:40px;"
+    >
+      ${component}
+    </div>
+  `
+}
+
+export const Regular = Template.bind({})
+Regular.argTypes = {
+  label: { type: "string" },
+  icon: { control: "select", options: ICON_NAMES },
+  iconAfter: { control: "select", options: ICON_NAMES },
+  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 },
+}
+Regular.args = {
+  label: "Click Mich...",
+  round: false,
+  disabled: false,
+  active: false,
+  inverted: false,
+
+  icon: null,
+  iconAfter: null,
+  size: null,
+  variant: null,
+  type: null,
+}
+
+const items = [
+  { label: "Normal" },
+  { label: "Active", active: true },
+  { label: "Disabled", disabled: true },
+
+  { label: "Normal", icon: "calendar" },
+  { 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 },
+
+  { icon: "calendar" },
+  { icon: "calendar", active: true },
+  { icon: "calendar", disabled: true },
+
+  { icon: "calendar", round: true },
+  { icon: "calendar", round: true, active: true },
+  { icon: "calendar", round: true, disabled: true },
+]
+
+const ghostItems = [
+  { label: "Normal", icon: "calendar" },
+  { label: "Active", icon: "calendar", active: true },
+  { label: "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" },
+
+  { label: "Normal", iconAfter: "calendar" },
+  { label: "Active", iconAfter: "calendar", active: true },
+  { label: "Disabled", iconAfter: "calendar", disabled: true },
+]
+
+const sizes = [
+  {
+    size: "normal",
+    items,
+  },
+  {
+    size: "small",
+    items,
+  },
+]
+
+const groups = [
+  {
+    inverted: false,
+    variant: "primary",
+    sizes,
+  },
+  {
+    inverted: false,
+    variant: "secondary",
+    sizes,
+  },
+  {
+    inverted: false,
+    variant: "ghost",
+    sizes: [{ size: "normal", items: ghostItems }],
+  },
+  {
+    inverted: true,
+    variant: "primary",
+    sizes,
+  },
+  {
+    inverted: true,
+    variant: "secondary",
+    sizes,
+  },
+  {
+    inverted: true,
+    variant: "ghost",
+    sizes: [{ size: "normal", items: ghostItems }],
+  },
+]
+
+function TemplateDev() {
+  return html` <style>
+      .codeblock {
+        position: relative;
+      }
+      .codeblock > pre {
+        background-image: repeating-linear-gradient(
+          #acc,
+          #acc 8px,
+          #9bb 0,
+          #9bb 24px,
+          #acc 0,
+          #acc 32px
+        );
+        background-attachment: local;
+        border: 1px solid #999;
+        color: #000;
+        font-family: monospace;
+        font-size: 14px;
+        line-height: 16px;
+        max-height: 400px;
+        overflow: scroll;
+        overflow: auto;
+        padding: 8px;
+        resize: none;
+        unicode-bidi: embed;
+        width: 100%;
+        box-sizing: border-box;
+      }
+      .codeblock > leu-button {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+      }
+      * {
+        font-family: Helvetica;
+      }
+      p {
+        margin: 0 20px;
+      }
+      h2 {
+        margin: 50px 0 20px 20px;
+      }
+      .group {
+        padding: 20px;
+      }
+      .inverted {
+        background: var(--leu-color-accent-blue);
+        color: #fff;
+      }
+      .main-table {
+        display: grid;
+        align-items: start;
+        grid-template-columns: auto auto;
+        gap: 10px;
+        padding: 10px;
+      }
+      .table {
+        display: grid;
+        align-items: center;
+        grid-template-columns: auto auto auto;
+        gap: 10px;
+        padding: 10px;
+      }
+    </style>
+    ${groups.map(
+      (group) =>
+        html`
+          <h2>${group.variant + (group.inverted ? " + inverted" : "")}</h2>
+          <div
+            class=${classMap({
+              "main-table": true,
+              group: true,
+              inverted: group.inverted,
+            })}
+          >
+            ${group.sizes.map(
+              (size) =>
+                html`
+                  <div>
+                    <div class=${classMap({ table: true })}>
+                      ${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,
+                          iconAfter: item.iconAfter
+                            ? ` icon="${item.iconAfter}"`
+                            : 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`
+                          <leu-button
+                            label=${ifDefined(item.label)}
+                            size=${ifDefined(size.size)}
+                            variant=${ifDefined(group.variant)}
+                            icon=${ifDefined(item.icon)}
+                            iconAfter=${ifDefined(item.iconAfter)}
+                            expanded=${ifDefined(item.expanded)}
+                            ?round=${item.round}
+                            ?active=${item.active}
+                            ?disabled=${item.disabled}
+                            ?inverted=${group.inverted}
+                            @click=${() => copyContent(params)}
+                          >
+                          </leu-button>
+                        `
+                      })}
+                    </div>
+                  </div>
+                `
+            )}
+          </div>
+          <p>Click the button to copy the code to the clipboard</p>
+        `
+    )}`
+}
+
+export const Dev = TemplateDev.bind({})
+Dev.argTypes = {
+  label: { table: { disable: true } },
+  icon: { table: { disable: true } },
+  iconAfter: { table: { disable: true } },
+  size: { table: { disable: true } },
+  variant: { table: { disable: true } },
+  type: { table: { disable: true } },
+  disabled: { table: { disable: true } },
+  round: { table: { disable: true } },
+  active: { table: { disable: true } },
+  inverted: { table: { disable: true } },
+}

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

@@ -0,0 +1,22 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-button.js"
+
+async function defaultFixture() {
+  return fixture(html` <leu-button label="button"></leu-button>`)
+}
+
+describe("LeuButton", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("leu-button")
+
+    await expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+})

package/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)
+}

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

@@ -0,0 +1,10 @@
+:host,
+:host * {
+  box-sizing: border-box;
+}
+
+.group {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}

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

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

package/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"],
+  value: "Zwei",
+}

package/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()
+  })
+})

package/src/components/checkbox/Checkbox.js

@@ -0,0 +1,142 @@
+import { html, css, LitElement } from "lit"
+import { Icon } from "../icon/icon.js"
+import { defineElement } from "../../lib/defineElement.js"
+
+/**
+ * @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 shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  static properties = {
+    checked: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    identifier: { type: String },
+    value: { type: String },
+    name: { type: String },
+  }
+
+  constructor() {
+    super()
+    this.checked = false
+    this.disabled = false
+    this.tabIndex = 0
+
+    this.checkIcon = Icon("check")
+  }
+
+  handleChange(event) {
+    this.checked = event.target.checked
+
+    const customEvent = new CustomEvent(event.type, event)
+    this.dispatchEvent(customEvent)
+  }
+
+  handleInput(event) {
+    this.checked = event.target.checked
+  }
+
+  render() {
+    return html`
+      <input
+        id=${this.identifier}
+        class="checkbox"
+        type="checkbox"
+        name="${this.name}"
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+        .checked=${this.checked}
+        ?disabled=${this.disabled}
+        .value=${this.value}
+      />
+      <label for=${this.identifier} class="label"><slot></slot></label>
+      <div class="icon">${this.checkIcon}</div>
+    `
+  }
+}
+
+export function defineCheckboxElements() {
+  defineElement("checkbox", LeuCheckbox)
+}