@statistikzh/leu 0.28.0 → 0.28.2

package/src/components/chip/ChipSelectable.ts

@@ -1,80 +0,0 @@
-import { html } from "lit"
-import { property } from "lit/decorators.js"
-
-import { LeuChipBase } from "./Chip.js"
-
-/**
- * A chip component that can be selected.
- * @tagname leu-chip-selectable
- * @slot - The content of the chip
- */
-export class LeuChipSelectable extends LeuChipBase {
-  /** The size of the chip. Has no effect when variant is "radio" */
-  @property({ type: String, reflect: true })
-  size: "small" | "regular" = "regular"
-
-  /**
-   * The variant of the chip. Determines if only one or multiple chips can be selected.
-   * @default "toggle"
-   */
-  @property({ type: String, reflect: true })
-  variant: "toggle" | "radio" = "toggle"
-
-  /** Whether the chip is selected */
-  @property({ type: Boolean, reflect: true })
-  checked: boolean = false
-
-  /** The value of the chip */
-  @property({ type: String, reflect: true })
-  value: string = ""
-
-  constructor() {
-    super()
-
-    if (this.variant === "radio" && this.size === "small") {
-      console.warn("Small size has no effect on radio variant")
-    }
-  }
-
-  protected handleClick() {
-    let nextcheckedState = this.checked
-
-    if (this.variant === "radio") {
-      nextcheckedState = true
-    } else {
-      nextcheckedState = !this.checked
-    }
-
-    if (nextcheckedState !== this.checked) {
-      this.checked = nextcheckedState
-      this.dispatchEvent(
-        new CustomEvent("input", {
-          detail: {
-            checked: this.checked,
-            value: this.getValue(),
-          },
-          bubbles: true,
-          composed: true,
-        }),
-      )
-    }
-  }
-
-  /**
-   * Returns the value of the chip. If `value` is not set, it will return the text content
-   * @returns {string}
-   */
-  getValue() {
-    return this.value || this.textContent.trim()
-  }
-
-  render() {
-    return html`<button
-      @click=${() => this.handleClick()}
-      class="button"
-      aria-pressed=${this.checked ? "true" : "false"}
-    >
-      <span class="label"><slot></slot></span>
-    </button>`
-  }
-}

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

@@ -1,15 +0,0 @@
-.label {
-  margin: 0 0 0.5rem;
-  font: var(--leu-t-curve-tiny-black-font);
-  color: var(--leu-color-black-100);
-}
-
-:host([inverted]) .label {
-  color: var(--leu-color-black-0);
-}
-
-.group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--leu-chip-group-gap, 0.5rem);
-}

package/src/components/chip/chip.css

@@ -1,139 +0,0 @@
-:host *::before,
-:host *::after {
-  box-sizing: border-box;
-}
-
-:host {
-  --chip-background-color-default: var(--leu-color-black-transp-10);
-  --chip-background-color-hover: var(--leu-color-black-transp-20);
-  --chip-background-color-checked: var(--leu-color-black-100);
-  --chip-background-color-checked-hover: var(--leu-color-black-transp-80);
-
-  --chip-color-default: var(--leu-color-black-transp-60);
-  --chip-color-hover: var(--leu-color-black-100);
-  --chip-color-checked: var(--leu-color-black-0);
-
-  --chip-radio-border-default: var(--leu-color-black-transp-40);
-  --chip-radio-border-checked: var(--leu-color-black-0);
-  --chip-radio-background-default: var(--leu-color-black-0);
-  --chip-radio-background-checked: var(--leu-color-func-cyan);
-
-  --chip-font-regular: var(--leu-font-family-regular);
-  --chip-font-black: var(--leu-font-family-black);
-
-  --chip-background-color: var(--chip-background-color-default);
-  --chip-color: var(--chip-color-default);
-  --chip-radio-border: var(--chip-radio-border-default);
-  --chip-radio-background: var(--chip-radio-background-default);
-
-  --leu-icon-size: 1rem;
-
-  font-family: var(--chip-font-regular);
-
-  /* Allow shrinking to achieve text truncation (ellipsis) */
-  min-width: 0;
-}
-
-:host([inverted]) {
-  --chip-background-color: var(--leu-color-black-transp-20);
-  --chip-background-color-hover: var(--leu-color-black-transp-40);
-
-  --chip-color-default: var(--leu-color-black-0);
-  --chip-color-hover: var(--leu-color-black-0);
-  --chip-color-checked: var(--leu-color-black-0);
-}
-
-:host([checked]) {
-  --chip-background-color: var(--chip-background-color-checked);
-  --chip-color: var(--chip-color-checked);
-  --chip-radio-border: var(--chip-radio-border-checked);
-  --chip-radio-background: var(--chip-radio-background-checked);
-}
-
-.button {
-  appearance: none;
-  border: none;
-  border-radius: 1rem;
-  background-color: var(--chip-background-color);
-  padding: 8px 1rem;
-
-  color: var(--chip-color);
-  font-family: inherit;
-  font-size: 0.875rem;
-  line-height: 1rem;
-
-  cursor: pointer;
-
-  display: inline-flex;
-  gap: 0.5rem;
-  align-items: center;
-
-  /* Allow shrinking to achieve text truncation (ellipsis) */
-  min-width: 0;
-  max-width: 100%;
-}
-
-.button:hover,
-.button:focus-visible {
-  --chip-background-color: var(--chip-background-color-hover);
-  --chip-color: var(--chip-color-hover);
-}
-
-.button:focus-visible {
-  outline: 2px solid var(--leu-color-func-cyan);
-  outline-offset: 2px;
-}
-
-:host([href]) .button {
-  border-radius: 1.25rem;
-  padding: 0.5rem 1rem;
-
-  font-family: var(--chip-font-black);
-  font-size: 1.125rem;
-  line-height: 1.5rem;
-  text-decoration: none;
-}
-
-:host([checked]) .button:hover,
-:host([checked]) .button:focus-visible {
-  --chip-background-color: var(--chip-background-color-checked-hover);
-  --chip-color: var(--chip-color-checked);
-}
-
-:host([href][size="large"]) .button {
-  border-radius: 1.5rem;
-  padding: 0.3125rem 1.5rem;
-
-  font-size: 2rem;
-  line-height: 2.375rem;
-}
-
-:host([size="small"]:not([variant="radio"])) .button {
-  padding: 0.3125rem 0.75rem;
-
-  font-size: 0.75rem;
-  line-height: 1.25rem;
-}
-
-:host([variant="radio"]) .button::before {
-  content: "";
-  flex: 0 0 1rem;
-  width: 1rem;
-  height: 1rem;
-  background-color: var(--chip-radio-background);
-  border: 2px solid var(--chip-radio-border);
-  border-radius: 50%;
-}
-
-:host([variant="radio"][checked]) .button::before {
-  border-width: 3px;
-}
-
-.label {
-  position: relative;
-  top: -0.0625rem;
-
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}

package/src/components/chip/exports.ts

@@ -1,4 +0,0 @@
-export { LeuChipGroup } from "./ChipGroup.js"
-export { LeuChipLink } from "./ChipLink.js"
-export { LeuChipRemovable } from "./ChipRemovable.js"
-export { LeuChipSelectable } from "./ChipSelectable.js"

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

@@ -1,11 +0,0 @@
-import { LeuChipGroup } from "./ChipGroup.js"
-
-export { LeuChipGroup }
-
-LeuChipGroup.define("leu-chip-group")
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "leu-chip-group": LeuChipGroup
-  }
-}

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

@@ -1,11 +0,0 @@
-import { LeuChipLink } from "./ChipLink.js"
-
-export { LeuChipLink }
-
-LeuChipLink.define("leu-chip-link")
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "leu-chip-link": LeuChipLink
-  }
-}

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

@@ -1,11 +0,0 @@
-import { LeuChipRemovable } from "./ChipRemovable.js"
-
-export { LeuChipRemovable }
-
-LeuChipRemovable.define("leu-chip-removable")
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "leu-chip-removable": LeuChipRemovable
-  }
-}

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

@@ -1,11 +0,0 @@
-import { LeuChipSelectable } from "./ChipSelectable.js"
-
-export { LeuChipSelectable }
-
-LeuChipSelectable.define("leu-chip-selectable")
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "leu-chip-selectable": LeuChipSelectable
-  }
-}

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

@@ -1,159 +0,0 @@
-import { html } from "lit"
-import { ifDefined } from "lit/directives/if-defined.js"
-import { styleMap } from "lit/directives/style-map.js"
-
-import "../leu-chip-selectable.js"
-import "../leu-chip-removable.js"
-import "../leu-chip-link.js"
-import "../leu-chip-group.js"
-
-export default {
-  title: "Components/Chip/Group",
-  component: "leu-chip-group",
-  argTypes: {
-    selectionMode: {
-      control: "select",
-      options: ["single", "multiple", "none"],
-    },
-    headingLevel: {
-      control: "select",
-      options: [1, 2, 3, 4, 5, 6],
-    },
-    "--leu-chip-group-gap": {
-      control: "text",
-    },
-  },
-  args: {
-    selectionMode: "",
-    inverted: false,
-  },
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81933&mode=design&t=lzVrtq8lxYVJU5TB-11",
-    },
-    html: {
-      root: "[data-root]",
-    },
-  },
-}
-
-const chips = [
-  "Chip mit einem sehr langen Text der dann hoffentlich mal abgeschnitten wird",
-  "Chip 2",
-  "Chip 3",
-]
-
-const links = [
-  "Steuererklärung",
-  "Abstimmungen",
-  "Zentrale Aufnahmeprüfung",
-  "Pass & Identitätskarte",
-  "Arbeiten beim Kanton",
-]
-
-function invertedBackground({ args, content }) {
-  return {
-    content: html`
-      <div
-        style="background: ${args.inverted
-          ? "hsla(209, 83%, 59%, 1)"
-          : "var(--leu-color-black-5)"}; padding: 1rem;"
-        data-root
-      >
-        ${content}
-      </div>
-    `,
-    args,
-  }
-}
-
-function chipGroup({ args, content }) {
-  const styles = {
-    "--leu-chip-group-gap": args["--leu-chip-group-gap"],
-  }
-
-  const nextContent = html`
-    <leu-chip-group
-      style=${styleMap(styles)}
-      selection-mode=${ifDefined(args.selectionMode)}
-      heading-level=${ifDefined(args.headingLevel)}
-      label=${ifDefined(args.label)}
-      ?inverted=${args.inverted}
-    >
-      ${content}
-    </leu-chip-group>
-  `
-
-  return { args, content: nextContent }
-}
-
-function DefaultTemplate(args) {
-  const content = html`
-    ${chips.map(
-      (chip) => html`
-        <leu-chip-removable ?inverted=${args.inverted}>
-          ${chip}
-        </leu-chip-removable>
-      `,
-    )}
-  `
-
-  return invertedBackground(chipGroup({ args, content })).content
-}
-
-function SingleTemplate(args) {
-  const content = html`
-    ${chips.map(
-      (chip) => html`
-        <leu-chip-selectable
-          ?inverted=${args.inverted}
-          variant="radio"
-          value="chip-${chip}"
-        >
-          ${chip}
-        </leu-chip-selectable>
-      `,
-    )}
-  `
-
-  return invertedBackground(chipGroup({ args, content })).content
-}
-
-function MultipleTemplate(args) {
-  const content = html`
-    ${chips.map(
-      (chip) => html`
-        <leu-chip-selectable ?inverted=${args.inverted} value="chip-${chip}">
-          ${chip}
-        </leu-chip-selectable>
-      `,
-    )}
-  `
-
-  return invertedBackground(chipGroup({ args, content })).content
-}
-
-function LabeledTemplate(args) {
-  const content = html`
-    ${links.map(
-      (chip) => html`
-        <leu-chip-link ?inverted=${args.inverted}> ${chip} </leu-chip-link>
-      `,
-    )}
-  `
-
-  return invertedBackground(chipGroup({ args, content })).content
-}
-
-export const Default = DefaultTemplate.bind({})
-Default.args = {}
-
-export const Single = SingleTemplate.bind({})
-Single.args = { selectionMode: "single" }
-
-export const Multiple = MultipleTemplate.bind({})
-Multiple.args = { selectionMode: "multiple" }
-
-export const Labeled = LabeledTemplate.bind({})
-Labeled.args = { label: "Top Themen" }

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

@@ -1,45 +0,0 @@
-import { html } from "lit"
-import { ifDefined } from "lit/directives/if-defined.js"
-
-import "../leu-chip-link.js"
-
-export default {
-  title: "Components/Chip/Link",
-  component: "leu-chip-link",
-  argTypes: {
-    size: { control: "select", options: ["regular", "large"] },
-  },
-  args: {
-    label: "Publikationen",
-  },
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81933&mode=design&t=lzVrtq8lxYVJU5TB-11",
-    },
-    html: {
-      root: "[data-root]",
-    },
-  },
-}
-
-function Template(args) {
-  return html`
-    <div
-      style="background: ${args.inverted
-        ? "hsla(209, 83%, 59%, 1)"
-        : "var(--leu-color-black-5)"}; padding: 1rem;"
-      data-root
-    >
-      <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: "large" }

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

@@ -1,42 +0,0 @@
-import { html } from "lit"
-import { action } from "storybook/actions"
-
-import "../leu-chip-removable.js"
-
-export default {
-  title: "Components/Chip/Removable",
-  component: "leu-chip-removable",
-  args: {
-    label: "Daten",
-    onRemove: action("leu:remove"),
-  },
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81933&mode=design&t=lzVrtq8lxYVJU5TB-11",
-    },
-    html: {
-      root: "[data-root]",
-    },
-  },
-}
-
-function Template(args) {
-  return html`
-    <div
-      style="background: ${args.inverted
-        ? "hsla(209, 83%, 59%, 1)"
-        : "var(--leu-color-black-5)"}; padding: 1rem;"
-      data-root
-    >
-      <leu-chip-removable
-        @leu:remove=${args.onRemove}
-        ?inverted=${args.inverted}
-        >${args.label}</leu-chip-removable
-      >
-    </div>
-  `
-}
-
-export const Default = Template.bind({})
-Default.args = {}

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

@@ -1,54 +0,0 @@
-import { html } from "lit"
-import { ifDefined } from "lit/directives/if-defined.js"
-
-import "../leu-chip-selectable.js"
-
-export default {
-  title: "Components/Chip/Selectable",
-  component: "leu-chip-selectable",
-  argTypes: {
-    variant: { control: "select", options: ["toggle", "radio"] },
-    size: { control: "select", options: ["small", "regular"] },
-    label: { control: "text" },
-  },
-  args: {
-    label: "Publikationen",
-  },
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81933&mode=design&t=lzVrtq8lxYVJU5TB-11",
-    },
-    html: {
-      root: "[data-root]",
-    },
-  },
-}
-
-function Template(args) {
-  return html`
-    <div
-      style="background: ${args.inverted
-        ? "hsla(209, 83%, 59%, 1)"
-        : "var(--leu-color-black-5)"}; padding: 1rem;"
-      data-root
-    >
-      <leu-chip-selectable
-        size=${ifDefined(args.size)}
-        variant=${ifDefined(args.variant)}
-        ?checked=${args.checked}
-        ?inverted=${args.inverted}
-        >${args.label}</leu-chip-selectable
-      >
-    </div>
-  `
-}
-
-export const Default = Template.bind({})
-Default.args = {}
-
-export const Small = Template.bind({})
-Small.args = { size: "small", label: "Publikationen Region" }
-
-export const Radio = Template.bind({})
-Radio.args = { variant: "radio" }