@statistikzh/leu 0.26.0 → 0.28.0

package/src/components/button/button.css

@@ -5,21 +5,22 @@
 /*
  * @todo : Disable hover styles for loading state
  */
-button {
+.button {
   position: relative;
-
   font-family: var(--leu-font-family-black);
   text-align: center;
+  text-decoration: none;
   appearance: none;
   transition: background 0.1s ease;
   cursor: pointer;
   border: none;
   border-radius: 2px;
 
-  max-width: 100%;
-  display: flex;
+  display: inline-flex;
+  justify-content: center;
   align-items: center;
   column-gap: 8px;
+  width: 100%;
 }
 
 .content {
@@ -29,49 +30,49 @@ button {
   white-space: nowrap;
 }
 
-button.round {
+.button--round {
   border-radius: 50%;
 }
 
-button.disabled {
+.button--disabled {
   cursor: not-allowed;
 }
 
-button.loading {
+.button--loading {
   cursor: wait;
 }
 
-button:focus-visible {
+.button:focus-visible {
   outline: 2px solid var(--leu-color-func-cyan);
   outline-offset: 2px;
 }
 
-button.inverted:focus-visible {
+.button--inverted:focus-visible {
   outline: 2px solid var(--leu-color-black-0);
 }
 
-:host([fluid]) button {
-  width: 100%;
-  justify-content: center;
+.button--icon-only {
+  aspect-ratio: 1;
+  width: unset;
 }
 
-button.loading :where(.content, .icon-wrapper) {
+.button--loading :where(.content, .icon-wrapper) {
   visibility: hidden;
 }
 
 /* size - regular */
-button.regular {
+.button--regular {
   padding: 12px 24px;
   font-size: 16px;
   line-height: 24px;
 }
 
-button.regular.icon-only {
+.button--regular.button--icon-only {
   padding: 12px;
 }
 
 /* size - small */
-button.small {
+.button--small {
   padding: 6px 24px;
   font-size: 14px;
   line-height: 20px;
@@ -79,62 +80,62 @@ button.small {
   --leu-icon-size: 1rem;
 }
 
-button.small.icon-only {
+.button--small.button--icon-only {
   padding: 8px;
 }
 
 /* primary */
-button.primary {
+.button--primary {
   color: var(--leu-color-black-0);
   background: var(--leu-color-black-100);
 }
 
-button.primary:hover {
+.button--primary:hover {
   color: var(--leu-color-black-0);
   background: var(--leu-color-black-transp-80);
 }
 
-button.primary.active {
+.button--primary.button--active {
   color: var(--leu-color-black-0);
   background: var(--leu-color-black-100);
 }
 
-button.primary.active:hover {
+.button--primary.button--active:hover {
   background: var(--leu-color-black-transp-80);
 }
 
-button.primary.disabled {
+.button--primary.button--disabled {
   color: var(--leu-color-black-0);
   background: var(--leu-color-black-transp-20);
 }
 
 /* secondary */
-button.secondary {
+.button--secondary {
   color: var(--leu-color-black-transp-60);
   background: var(--leu-color-black-transp-10);
 }
 
-button.secondary:hover {
+.button--secondary:hover {
   color: var(--leu-color-black-100);
   background: var(--leu-color-black-transp-20);
 }
 
-button.secondary.active {
+.button--secondary.button--active {
   color: var(--leu-color-black-0);
   background: var(--leu-color-black-100);
 }
 
-button.secondary.active:hover {
+.button--secondary.button--active:hover {
   background: var(--leu-color-black-transp-80);
 }
 
-button.secondary.disabled {
+.button--secondary.button--disabled {
   color: var(--leu-color-black-transp-20);
   background: var(--leu-color-black-transp-5);
 }
 
 /* ghost */
-button.ghost {
+.button--ghost {
   --leu-icon-size: 1rem;
 
   background: transparent;
@@ -144,74 +145,74 @@ button.ghost {
   height: 2rem;
 }
 
-button.ghost:hover {
+.button--ghost:hover {
   color: var(--leu-color-black-100);
 }
 
-button.ghost.active {
+.button--ghost.button--active {
   color: var(--leu-color-black-100);
 }
 
-button.ghost.disabled {
+.button--ghost.button--disabled {
   color: var(--leu-color-black-20);
 }
 
 /* primary + inverted */
-button.primary.inverted {
+.button--primary.button--inverted {
   color: var(--leu-color-black-100);
   background: var(--leu-color-black-0);
 }
 
-button.primary.inverted:hover {
+.button--primary.button--inverted:hover {
   color: var(--leu-color-black-100);
   background: var(--leu-color-white-transp-70);
 }
 
-button.primary.inverted.active {
+.button--primary.button--inverted.button--active {
   color: var(--leu-color-black-0);
   background: var(--leu-color-black-100);
 }
 
-button.primary.inverted.disabled {
+.button--primary.button--inverted.button--disabled {
   color: var(--leu-color-black-40);
   background: var(--leu-color-white-transp-70);
 }
 
 /* secondary + inverted */
-button.secondary.inverted {
+.button--secondary.button--inverted {
   color: var(--leu-color-black-0);
   background: var(--leu-color-black-transp-20);
 }
 
-button.secondary.inverted:hover {
+.button--secondary.button--inverted:hover {
   color: var(--leu-color-black-0);
   background: var(--leu-color-black-transp-40);
 }
 
-button.secondary.inverted.active {
+.button--secondary.button--inverted.button--active {
   color: var(--leu-color-black-100);
   background: var(--leu-color-black-0);
 }
 
-button.secondary.inverted.disabled {
+.button--secondary.button--inverted.button--disabled {
   color: var(--leu-color-white-transp-70);
   background: var(--leu-color-black-transp-10);
 }
 
 /* ghost + inverted */
-button.ghost.inverted {
+.button--ghost.button--inverted {
   color: var(--leu-color-black-0);
 }
 
-button.ghost.inverted:hover {
+.button--ghost.button--inverted:hover {
   color: var(--leu-color-white-transp-70);
 }
 
-button.ghost.inverted.active {
+.button--ghost.button--inverted.button--active {
   color: var(--leu-color-black-0);
 }
 
-button.ghost.inverted.disabled {
+.button--ghost.button--inverted.button--disabled {
   color: var(--leu-color-black-20);
 }
 
@@ -224,12 +225,12 @@ button.ghost.inverted.disabled {
   display: none;
 }
 
-.icon-before .icon-wrapper--before,
-.icon-after .icon-wrapper--after {
+.button--icon-before .icon-wrapper--before,
+.button--icon-after .icon-wrapper--after {
   display: block;
 }
 
-.ghost .icon-wrapper {
+.button--ghost .icon-wrapper {
   position: relative;
   width: 2rem;
   padding: 0 0.5rem;
@@ -237,14 +238,14 @@ button.ghost.inverted.disabled {
   --_color: currentcolor;
 }
 
-.ghost .icon-wrapper__slot {
+.button--ghost .icon-wrapper__slot {
   display: block;
   position: relative;
   z-index: 1;
   color: var(--_color);
 }
 
-.ghost .icon-wrapper::before {
+.button--ghost .icon-wrapper::before {
   content: "";
   position: absolute;
   z-index: 0;
@@ -257,32 +258,32 @@ button.ghost.inverted.disabled {
   background: var(--_bg);
 }
 
-.ghost.active .icon-wrapper {
+.button--ghost.button--active .icon-wrapper {
   --_bg: var(--leu-color-black-100);
   --_color: var(--leu-color-black-0);
 }
 
-.ghost.disabled .icon-wrapper {
+.button--ghost.button--disabled .icon-wrapper {
   --_bg: var(--leu-color-black-transp-5);
 }
 
 /* inverted */
 
-.ghost.inverted .icon-wrapper {
+.button--ghost.button--inverted .icon-wrapper {
   --_bg: var(--leu-color-black-transp-20);
 }
 
-.ghost.inverted:hover .icon-wrapper {
+.button--ghost.button--inverted:hover .icon-wrapper {
   --_bg: var(--leu-color-black-transp-40);
   --_color: var(--leu-color-black-0);
 }
 
-.ghost.inverted.disabled .icon-wrapper {
+.button--ghost.button--inverted.button--disabled .icon-wrapper {
   --_bg: var(--leu-color-black-transp-20);
   --_color: var(--leu-color-white-transp-70);
 }
 
-.ghost.active.inverted .icon-wrapper {
+.button--ghost.button--active.button--inverted .icon-wrapper {
   --_bg: var(--leu-color-black-0);
   --_color: var(--leu-color-black-100);
 }

package/src/components/button/stories/button.stories.ts

@@ -29,7 +29,7 @@ export default {
 }
 
 function Template(args = {}) {
-  const component = html`
+  return html`
     <div data-root>
       <leu-button
         content=${ifDefined(args.content)}
@@ -37,12 +37,14 @@ function Template(args = {}) {
         variant=${ifDefined(args.variant)}
         type=${ifDefined(args.type)}
         expanded=${ifDefined(args.expanded)}
+        href=${ifDefined(args.href)}
+        target=${ifDefined(args.target)}
         ?round=${args.round}
         ?active=${args.active}
         ?inverted=${args.inverted}
         ?disabled=${args.disabled}
         ?loading=${args.loading}
-        @click=${copyContent}
+        @click=${args.href ? undefined : copyContent}
       >
         ${args.icon
           ? html`<leu-icon
@@ -53,23 +55,6 @@ function Template(args = {}) {
         ${args.content}
       </leu-button>
     </div>
-    <br />
-    <p>Click the button to copy the code to the clipboard</p>
-  `
-
-  return html`
-    <style>
-      * {
-        font-family: Helvetica;
-      }
-    </style>
-    <div
-      style="${args.inverted
-        ? "background:var(--leu-color-accent-blue); color: var(--leu-color-white-transp-90);"
-        : ""}padding:40px;"
-    >
-      ${component}
-    </div>
   `
 }
 
@@ -89,6 +74,7 @@ Regular.argTypes = {
   round: { control: "boolean" },
   active: { control: "boolean" },
   loading: { control: "boolean" },
+  href: { control: "text" },
 }
 Regular.args = {
   content: "Click Mich...",
@@ -104,6 +90,17 @@ Regular.args = {
   type: null,
 }
 
+export const Link = Template.bind({})
+Link.args = {
+  content: "Zu den Daten",
+  icon: "link",
+  iconPosition: "before",
+  href: "https://datenkatalog.statistik.zh.ch/",
+  target: "_blank",
+  variant: "ghost",
+  size: "regular",
+}
+
 const items = [
   { content: "Normal" },
   { content: "Active", active: true },
@@ -301,6 +298,7 @@ function TemplateOverview() {
       .table {
         display: grid;
         align-items: center;
+        justify-items: start;
         grid-template-columns: auto auto auto;
         gap: 10px;
         padding: 10px;
@@ -327,7 +325,6 @@ function TemplateOverview() {
                         size=${ifDefined(size.size)}
                         variant=${ifDefined(group.variant)}
                         expanded=${ifDefined(item.expanded)}
-                        ?round=${item.round}
                         ?active=${item.active}
                         ?disabled=${item.disabled}
                         ?inverted=${group.inverted}

package/src/components/button/test/button.test.ts

@@ -32,6 +32,16 @@ describe("LeuButton", () => {
     await expect(el).shadowDom.to.be.accessible()
   })
 
+  it("passes the a11y audit when rendered as link", async () => {
+    const el = await fixture(
+      html` <leu-button href="https://datenkatalog.statistik.zh.ch/"
+        >Link</leu-button
+      >`,
+    )
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
   it("renders the label", async () => {
     const el = await fixture(html` <leu-button>Sichern</leu-button>`)
 
@@ -192,6 +202,42 @@ describe("LeuButton", () => {
     expect(clicked).to.be.false
   })
 
+  it("renders as an anchor when href is set", async () => {
+    const el = await fixture(
+      html` <leu-button
+        href="https://datenkatalog.statistik.zh.ch/"
+        target="_blank"
+        >Zu den Daten <leu-icon name="link" slot="before"></leu-icon
+      ></leu-button>`,
+    )
+
+    const anchor = el.shadowRoot.querySelector("a")
+
+    expect(anchor).to.exist
+    expect(anchor).to.have.attribute(
+      "href",
+      "https://datenkatalog.statistik.zh.ch/",
+    )
+    expect(anchor).to.have.attribute("target", "_blank")
+  })
+
+  it("does not set disabled or type attribute on anchor", async () => {
+    const el = await fixture(
+      html` <leu-button
+        href="https://datenkatalog.statistik.zh.ch/"
+        disabled
+        type="submit"
+        >Zu den Daten <leu-icon name="link" slot="before"></leu-icon
+      ></leu-button>`,
+    )
+
+    const anchor = el.shadowRoot.querySelector("a")
+
+    expect(anchor).to.exist
+    expect(anchor).to.not.have.attribute("disabled")
+    expect(anchor).to.not.have.attribute("type")
+  })
+
   describe("form association", () => {
     it("submits the form when type is submit", async () => {
       const form = await fixture<HTMLFormElement>(html`

package/src/components/file-input/FileInput.ts

@@ -145,16 +145,35 @@ export class LeuFileInput extends FormAssociatedMixin(LeuElement) {
     )
   }
 
+  /**
+   * This implementation Uses base-10 (decimal) units:
+   * 1 KB = 1_000 bytes
+   * 1 MB = 1_000_000 bytes
+   * 1 GB = 1_000_000_000 bytes
+   *
+   * To switch to base-2 (binary), use the following implementation:
+   * // const KB = 1024
+   * // const MB = 1024 * 1024
+   * // const GB = 1024 * 1024 * 1024
+   */
   protected static formatFileSize(size: number) {
-    if (size < 1e3) {
-      return html`${size}&nbsp;bytes`
+    const KB = 1e3
+    const MB = 1e6
+    const GB = 1e9
+
+    if (size >= GB) {
+      return html`${(size / GB).toFixed(1)}&nbsp;GB`
+    }
+
+    if (size >= MB) {
+      return html`${(size / MB).toFixed(1)}&nbsp;MB`
     }
 
-    if (size >= 1e3 && size < 1e6) {
-      return html`${(size / 1e3).toFixed(1)}&nbsp;KB`
+    if (size >= KB) {
+      return html`${(size / KB).toFixed(1)}&nbsp;KB`
     }
 
-    return html`${(size / 1e6).toFixed(1)}&nbsp;MB`
+    return html`${size}&nbsp;bytes`
   }
 
   protected handleDragEnter = (event: DragEvent) => {

package/src/components/input/Input.ts

@@ -86,10 +86,6 @@ export class LeuInput extends FormAssociatedMixin(LeuElement) {
   @property({ type: Boolean, reflect: true })
   clearable: boolean = false
 
-  /** The value of the input element. */
-  @property({ type: String, reflect: true })
-  value: string = ""
-
   /** A custom error that is completely independent of the validity state. Useful for displaying server side errors. */
   @property({ type: String, reflect: true })
   error: string = ""
@@ -150,6 +146,26 @@ export class LeuInput extends FormAssociatedMixin(LeuElement) {
   @property({ type: Boolean, reflect: true })
   novalidate: boolean = false
 
+  /** The default value of the input element. */
+  @property({ type: String, reflect: true, attribute: "value" })
+  defaultValue: string = ""
+
+  protected _value: string
+
+  /** The value of the input element. */
+  @property({ type: String, attribute: false })
+  set value(value: string) {
+    this._value = value
+  }
+
+  get value(): string {
+    if (typeof this._value === "string") {
+      return this._value
+    }
+
+    return this.defaultValue
+  }
+
   @state()
   _validity: ValidityState | null = null
 
@@ -171,15 +187,32 @@ export class LeuInput extends FormAssociatedMixin(LeuElement) {
   }
 
   formResetCallback() {
-    this.value = ""
+    this.value = this.defaultValue
   }
 
   protected setFormValue(): void {
-    this.internals.setFormValue(this.value)
+    this.internals.setFormValue(this.disabled ? null : this.value)
   }
 
   protected willUpdate(changedProperties: PropertyValues<this>): void {
-    if (changedProperties.has("value")) {
+    super.willUpdate(changedProperties)
+    let valueChanged = false
+
+    if (
+      changedProperties.has("defaultValue") &&
+      !changedProperties.has("value") &&
+      !this.hasInteracted
+    ) {
+      this.value = this.defaultValue
+      valueChanged = true
+    }
+
+    if (
+      valueChanged ||
+      changedProperties.has("value") ||
+      changedProperties.has("name") ||
+      changedProperties.has("disabled")
+    ) {
       this.setFormValue()
     }
   }
@@ -225,6 +258,7 @@ export class LeuInput extends FormAssociatedMixin(LeuElement) {
    * @fires {CustomEvent} change
    */
   protected handleChange(event: Event & { target: HTMLInputElement }) {
+    this.hasInteracted = true
     if (event.target.validity.valid) {
       this.value = event.target.value
     }
@@ -239,6 +273,7 @@ export class LeuInput extends FormAssociatedMixin(LeuElement) {
    * the event can be handled outside the shadow DOM.
    */
   protected handleInput(event: Event & { target: HTMLInputElement }) {
+    this.hasInteracted = true
     this.value = event.target.value
 
     const customEvent = new CustomEvent("input", {
@@ -311,7 +346,7 @@ export class LeuInput extends FormAssociatedMixin(LeuElement) {
       return true
     }
 
-    return this._validity === null || this.novalidate
+    return this._validity === null || this.novalidate || this.disabled
       ? false
       : !this._validity.valid
   }