@statistikzh/leu 0.27.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/select/Select.ts

@@ -472,7 +472,6 @@ export class LeuSelect extends FormAssociatedMixin(LeuElement) {
             type="button"
             class="apply-button"
             @click=${this._closeDropdown}
-            fluid
             >Anwenden</leu-button
           >
         </div>

package/src/components/tab/Tab.ts

@@ -0,0 +1,72 @@
+import { html, PropertyValues } from "lit"
+import { property } from "lit/decorators.js"
+import { LeuElement } from "../../lib/LeuElement.js"
+
+import styles from "./tab.css?inline"
+
+let nextId = 1
+
+/**
+ * Tab Button.
+ *
+ * @prop {string} name - Name to link Button and Panel together
+ * @prop {boolean} active - Is active
+ *
+ * @tagname leu-tab
+ */
+export class LeuTab extends LeuElement {
+  static styles = [LeuElement.styles, styles]
+
+  protected readonly componentId = `leu-tab-${nextId++}`
+
+  /**
+   * Name of the tab. Apply the same name to the corresponding panel to link them together.
+   * Has to be unique within the tab component.
+   */
+  @property({ type: String, reflect: true })
+  name = ""
+
+  @property({ type: Boolean, reflect: true })
+  active = false
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.setAttribute("role", "tab")
+    this.addEventListener("click", this.handleClick)
+    // Set an id if not already provided. The id is used by the tab-group
+    // to set the aria-controls / aria-labelledby attributes.
+    this.id = this.id.length > 0 ? this.id : this.componentId
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+    this.removeEventListener("click", this.handleClick)
+  }
+
+  handleClick() {
+    if (this.active) {
+      return
+    }
+
+    this.active = true
+
+    this.dispatchEvent(
+      new CustomEvent("leu:tab-select", {
+        detail: { name: this.name },
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  updated(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has("active")) {
+      this.ariaSelected = this.active ? "true" : "false"
+      this.tabIndex = this.active ? 0 : -1
+    }
+  }
+
+  render() {
+    return html`<span class="label"><slot></slot></span>`
+  }
+}