@statistikzh/leu 0.18.0 → 0.19.0

package/src/components/progress-bar/ProgressBar.ts

@@ -0,0 +1,52 @@
+import { html, nothing } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
+import { property } from "lit/decorators.js"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
+import styles from "./progress-bar.css"
+
+/**
+ * An indicator showing the completion progress of a task
+ *
+ * @tagname leu-progress-bar
+ */
+export class LeuProgressBar extends LeuElement {
+  static styles = [LeuElement.styles, styles]
+
+  static shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  /** Progress as a percentage from 0 to 100 */
+  @property({ type: Number, reflect: true })
+  value: number = 0
+
+  /** Label that is displayed below the progress bar */
+  @property({ type: String, reflect: true })
+  label: string = ""
+
+  /** Whether the progress bar is in indeterminate state. */
+  @property({ type: Boolean, reflect: true })
+  indeterminate: boolean = false
+
+  render() {
+    return html`
+      <progress
+        class="progress"
+        max=${ifDefined(!this.indeterminate ? 100 : undefined)}
+        value=${ifDefined(!this.indeterminate ? this.value : undefined)}
+        id="progress"
+      ></progress>
+      <div class="info">
+        ${this.label
+          ? html`<label class="label" for="progress">${this.label}</label>`
+          : html`<div class="label label--placeholder"></div>`}
+        ${this.indeterminate
+          ? nothing
+          : html`<span class="value">${Math.round(this.value)}&#8239;%</span>`}
+      </div>
+    `
+  }
+}

package/src/components/progress-bar/leu-progress-bar.ts

@@ -0,0 +1,5 @@
+import { LeuProgressBar } from "./ProgressBar.js"
+
+export { LeuProgressBar }
+
+LeuProgressBar.define("leu-progress-bar")

package/src/components/progress-bar/progress-bar.css

@@ -0,0 +1,97 @@
+/* :host {
+  --progress-bar-font-regular: var(--leu-font-family-regular);
+  --progress-bar-font-black: var(--leu-font-family-black);
+
+  font-family: var(--progress-bar-font-regular);
+} */
+
+.progress {
+  --_height: 0.5rem;
+  --_border-radius: 0.25rem;
+  --_progress-color: var(--leu-color-func-cyan);
+  --_indeterminate-animation: indeterminate 2s ease infinite;
+  --_indeterminate-width: 25%;
+
+  appearance: none;
+  display: block;
+  width: 100%;
+  height: var(--_height);
+
+  background-color: var(--leu-color-black-transp-10);
+  border: none;
+  border-radius: var(--_border-radius);
+  margin-bottom: 0.5rem;
+}
+
+.progress::-webkit-progress-bar {
+  background: transparent;
+  border-radius: var(--_border-radius);
+}
+
+/* Progress bar */
+.progress::-moz-progress-bar {
+  background-color: var(--_progress-color);
+  border-radius: var(--_border-radius);
+}
+
+.progress::-webkit-progress-value {
+  background-color: var(--_progress-color);
+  border-radius: var(--_border-radius);
+}
+
+/* Indeterminate state */
+.progress:indeterminate::-moz-progress-bar {
+  width: var(--_indeterminate-width);
+  animation: var(--_indeterminate-animation);
+}
+
+/* Safari */
+.progress:indeterminate::-webkit-progress-value {
+  display: block;
+  width: var(--_indeterminate-width);
+  animation: var(--_indeterminate-animation);
+}
+
+/* Chrome */
+.progress:indeterminate::before {
+  content: "";
+  display: block;
+  width: var(--_indeterminate-width);
+  height: var(--_height);
+  background-color: var(--_progress-color);
+  border-radius: var(--_border-radius);
+  animation: var(--_indeterminate-animation);
+}
+
+@keyframes indeterminate {
+  0% {
+    margin-left: 0%;
+  }
+
+  50% {
+    margin-left: 75%;
+  }
+
+  100% {
+    margin-left: 0%;
+  }
+}
+
+/* Info section (text label and value) */
+.info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.label,
+.value {
+  font: var(--leu-t-tiny-regular-font);
+  color: var(--leu-color-black-60);
+}
+
+.value {
+  /* margin-left: auto; */
+}

package/src/components/progress-bar/stories/progress-bar.stories.ts

@@ -0,0 +1,39 @@
+import { Meta, StoryObj } from "@storybook/web-components"
+import { html } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
+
+import "../leu-progress-bar.js"
+import { LeuProgressBar } from "../ProgressBar.js"
+
+type StoryArgs = LeuProgressBar
+type Story = StoryObj<StoryArgs>
+
+export default {
+  title: "Components/ProgressBar",
+  component: "leu-progress-bar",
+} satisfies Meta<StoryArgs>
+
+const Template: Story = {
+  render: ({ label, value, indeterminate }) =>
+    html` <leu-progress-bar
+      .label="${ifDefined(label)}"
+      .value="${ifDefined(value)}"
+      ?indeterminate=${indeterminate}
+    ></leu-progress-bar>`,
+}
+
+export const Regular = {
+  ...Template,
+  args: {
+    value: 50,
+    label: "Datei hochladen",
+  },
+}
+
+export const Indeterminate = {
+  ...Template,
+  args: {
+    indeterminate: true,
+    label: "Datei hochladen",
+  },
+}

package/src/components/progress-bar/test/progress-bar.test.ts

@@ -0,0 +1,61 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+import { ifDefined } from "lit/directives/if-defined.js"
+
+import "../leu-progress-bar.js"
+import { type LeuProgressBar } from "../ProgressBar.js"
+
+async function defaultFixture({
+  value,
+  label,
+  indeterminate,
+}: { value?: number; label?: string; indeterminate?: boolean } = {}) {
+  return fixture<LeuProgressBar>(
+    html`<leu-progress-bar
+      value=${ifDefined(value)}
+      label=${ifDefined(label)}
+      ?indeterminate=${indeterminate}
+    ></leu-progress-bar>`,
+  )
+}
+
+describe("LeuProgressBar", () => {
+  it("is a defined element", async () => {
+    const el = customElements.get("leu-progress-bar")
+
+    expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture({ value: 65, label: "Datei hochladen" })
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("renders the text labels and applies the value", async () => {
+    const el = await defaultFixture({ value: 65, label: "Datei hochladen" })
+
+    const label = el.shadowRoot?.querySelector(".label")
+    const value = el.shadowRoot?.querySelector(".value")
+    const progress = el.shadowRoot?.querySelector("progress")
+
+    expect(label?.textContent).to.equal("Datei hochladen")
+    expect(value?.textContent).to.equal("65 %")
+    expect(progress?.value).to.equal(65)
+  })
+
+  it("applies the indeterminate state", async () => {
+    const el = await defaultFixture({
+      value: 65,
+      label: "Datei hochladen",
+      indeterminate: true,
+    })
+
+    const value = el.shadowRoot?.querySelector(".value")
+    const progress = el.shadowRoot?.querySelector("progress")
+
+    expect(value).to.not.exist
+    expect(progress).to.not.have.attribute("value")
+    expect(progress).to.not.have.attribute("max")
+  })
+})