@statistikzh/leu 0.0.2

package/src/components/chip/exports.js

@@ -0,0 +1,10 @@
+export { LeuChipGroup, defineChipGroupElements } from "./ChipGroup.js"
+export { LeuChipLink, defineChipLinkElements } from "./ChipLink.js"
+export {
+  LeuChipRemovable,
+  defineChipRemovableElements,
+} from "./ChipRemovable.js"
+export {
+  LeuChipSelectable,
+  defineChipSelectableElements,
+} from "./ChipSelectable.js"

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

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

package/src/components/chip/leu-chip-link.js

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

package/src/components/chip/leu-chip-removable.js

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

package/src/components/chip/leu-chip-selectable.js

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

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

@@ -0,0 +1,99 @@
+import { html } from "lit"
+
+import "../leu-chip-selectable.js"
+import "../leu-chip-removable.js"
+import "../leu-chip-group.js"
+
+import { SELECTION_MODES } from "../ChipGroup.js"
+import { VARIANTS as SELECTABLE_VARIANTS } from "../ChipSelectable.js"
+
+export default {
+  title: "Chip Group",
+  component: "leu-chip-group",
+  argTypes: {
+    selectionMode: {
+      control: "select",
+      options: Object.values(SELECTION_MODES),
+    },
+    inverted: { control: "boolean" },
+  },
+  args: {
+    selectionMode: "",
+    inverted: false,
+  },
+}
+
+const chips = ["Chip 1", "Chip 2", "Chip 3"]
+
+function invertedBackground(args, content) {
+  return html`
+    <div
+      style="background: ${args.inverted
+        ? "hsla(209, 83%, 59%, 1)"
+        : "var(--leu-color-black-5)"}; padding: 1rem;"
+    >
+      ${content}
+    </div>
+  `
+}
+
+function DefaultTemplate(args) {
+  const content = html`
+    <leu-chip-group selection-mode=${args.selectionMode}>
+      ${chips.map(
+        (chip) => html`
+          <leu-chip-removable ?inverted=${args.inverted}>
+            ${chip}
+          </leu-chip-removable>
+        `
+      )}
+    </leu-chip-group>
+  `
+
+  return invertedBackground(args, content)
+}
+
+function SingleTemplate(args) {
+  const content = html`
+    <leu-chip-group selection-mode=${args.selectionMode}>
+      ${chips.map(
+        (chip) => html`
+          <leu-chip-selectable
+            ?inverted=${args.inverted}
+            variant=${SELECTABLE_VARIANTS.radio}
+            value="chip-${chip}"
+          >
+            ${chip}
+          </leu-chip-selectable>
+        `
+      )}
+    </leu-chip-group>
+  `
+
+  return invertedBackground(args, content)
+}
+
+function MultipleTemplate(args) {
+  const content = html`
+    <leu-chip-group selection-mode=${args.selectionMode}>
+      ${chips.map(
+        (chip) => html`
+          <leu-chip-selectable ?inverted=${args.inverted} value="chip-${chip}">
+            ${chip}
+          </leu-chip-selectable>
+        `
+      )}
+    </leu-chip-group>
+  `
+
+  return invertedBackground(args, content)
+}
+
+export const Default = DefaultTemplate.bind({})
+Default.args = {}
+
+export const Single = SingleTemplate.bind({})
+Single.args = { selectionMode: SELECTION_MODES.single }
+
+export const Multiple = MultipleTemplate.bind({})
+Multiple.args = { selectionMode: SELECTION_MODES.multiple }

package/src/components/chip/stories/chip-link.stories.js

@@ -0,0 +1,37 @@
+import { html } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
+
+import "../leu-chip-link.js"
+
+import { SIZES } from "../ChipLink.js"
+
+export default {
+  title: "Chip Link",
+  component: "leu-chip-link",
+  argTypes: {
+    size: { control: "select", options: Object.values(SIZES) },
+  },
+  args: {
+    label: "Publikationen",
+  },
+}
+
+function Template(args) {
+  return html`
+    <div
+      style="background: ${args.inverted
+        ? "hsla(209, 83%, 59%, 1)"
+        : "var(--leu-color-black-5)"}; padding: 1rem;"
+    >
+      <leu-chip-link size=${ifDefined(args.size)} ?inverted=${args.inverted}
+        >${args.label}</leu-chip-link
+      >
+    </div>
+  `
+}
+
+export const Default = Template.bind({})
+Default.args = {}
+
+export const Large = Template.bind({})
+Large.args = { size: SIZES.large }

package/src/components/chip/stories/chip-removable.stories.js

@@ -0,0 +1,28 @@
+import { html } from "lit"
+
+import "../leu-chip-removable.js"
+
+export default {
+  title: "Chip Removable",
+  component: "leu-chip-removable",
+  args: {
+    label: "Publikationen",
+  },
+}
+
+function Template(args) {
+  return html`
+    <div
+      style="background: ${args.inverted
+        ? "hsla(209, 83%, 59%, 1)"
+        : "var(--leu-color-black-5)"}; padding: 1rem;"
+    >
+      <leu-chip-removable ?inverted=${args.inverted}
+        >${args.label}</leu-chip-removable
+      >
+    </div>
+  `
+}
+
+export const Default = Template.bind({})
+Default.args = {}

package/src/components/chip/stories/chip-selectable.stories.js

@@ -0,0 +1,46 @@
+import { html } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
+
+import "../leu-chip-selectable.js"
+
+import { SIZES, VARIANTS } from "../ChipSelectable.js"
+
+export default {
+  title: "Chip Selectable",
+  component: "leu-chip-selectable",
+  argTypes: {
+    variant: { control: "select", options: Object.values(VARIANTS) },
+    size: { control: "select", options: Object.values(SIZES) },
+    label: { control: "text" },
+  },
+  args: {
+    label: "Publikationen",
+  },
+}
+
+function Template(args) {
+  return html`
+    <div
+      style="background: ${args.inverted
+        ? "hsla(209, 83%, 59%, 1)"
+        : "var(--leu-color-black-5)"}; padding: 1rem;"
+    >
+      <leu-chip-selectable
+        size=${ifDefined(args.size)}
+        variant=${ifDefined(args.variant)}
+        ?selected=${args.selected}
+        ?inverted=${args.inverted}
+        >${args.label}</leu-chip-selectable
+      >
+    </div>
+  `
+}
+
+export const Default = Template.bind({})
+Default.args = {}
+
+export const Small = Template.bind({})
+Small.args = { size: SIZES.small }
+
+export const Radio = Template.bind({})
+Radio.args = { variant: VARIANTS.radio }

package/src/components/chip/test/chip.test.js

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

@@ -0,0 +1,55 @@
+import { html, LitElement } from "lit"
+import { defineElement } from "../../lib/defineElement.js"
+import styles from "./dropdown.css"
+
+import { defineButtonElements } from "../button/Button.js"
+import { defineMenuElements } from "../menu/Menu.js"
+import { defineMenuItemElements } from "../menu/MenuItem.js"
+
+/**
+ * @tagname leu-dropdown
+ */
+export class LeuDropdown extends LitElement {
+  static styles = styles
+
+  static properties = {
+    label: { type: String },
+    expanded: { type: Boolean, reflect: true },
+  }
+
+  constructor() {
+    super()
+
+    this.label = ""
+    this.expanded = false
+  }
+
+  handleClick() {
+    this.expanded = !this.expanded
+  }
+
+  render() {
+    return html`
+      <leu-button
+        icon="download"
+        variant="ghost"
+        label=${this.label}
+        expanded=${this.expanded ? "open" : "closed"}
+        aria-expanded=${this.expanded ? "true" : "false"}
+        aria-controls="content"
+        ?active=${this.expanded}
+        @click=${this.handleClick}
+      ></leu-button>
+      <div id="content" class="content" ?hidden=${!this.expanded}>
+        <slot></slot>
+      </div>
+    `
+  }
+}
+
+export function defineDropdownElements() {
+  defineElement("dropdown", LeuDropdown)
+  defineButtonElements()
+  defineMenuElements()
+  defineMenuItemElements()
+}

package/src/components/dropdown/dropdown.css

@@ -0,0 +1,17 @@
+:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  position: relative;
+}
+
+.content {
+  overflow: hidden;
+  box-shadow: var(--leu-box-shadow-short);
+  border-radius: 2px;
+
+  position: absolute;
+  top: calc(100% + 0.5rem);
+}

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

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

package/src/components/dropdown/stories/dropdown.stories.js

@@ -0,0 +1,25 @@
+import { html } from "lit"
+import "../leu-dropdown.js"
+
+export default {
+  title: "Dropdown",
+  component: "leu-dropdown",
+}
+
+function Template({ label, expanded }) {
+  return html` <leu-dropdown label=${label} ?expanded=${expanded}>
+    <leu-menu>
+      <leu-menu-item>Als CSV Tabelle</leu-menu-item>
+      <leu-menu-item>Als XLS Tabelle</leu-menu-item>
+      <hr />
+      <leu-menu-item>Als PNG exportieren</leu-menu-item>
+      <leu-menu-item>Als SVG exportieren</leu-menu-item>
+      <leu-menu-item>Als PDF exportieren</leu-menu-item>
+    </leu-menu>
+  </leu-dropdown>`
+}
+
+export const Regular = Template.bind({})
+Regular.args = {
+  label: "Download",
+}

package/src/components/dropdown/test/dropdown.test.js

@@ -0,0 +1,31 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-dropdown.js"
+
+async function defaultFixture() {
+  return fixture(html` <leu-dropdown label="Download">
+    <leu-menu>
+      <leu-menu-item>Als CSV Tabelle</leu-menu-item>
+      <leu-menu-item>Als XLS Tabelle</leu-menu-item>
+      <hr />
+      <leu-menu-item>Als PNG exportieren</leu-menu-item>
+      <leu-menu-item>Als SVG exportieren</leu-menu-item>
+      <leu-menu-item>Als PDF exportieren</leu-menu-item>
+    </leu-menu>
+  </leu-dropdown>`)
+}
+
+describe("LeuDropdown", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("leu-dropdown")
+
+    await expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+})