@statistikzh/leu 0.3.0 → 0.5.0

package/src/components/button/Button.js

@@ -1,7 +1,9 @@
 import { html, nothing, LitElement } from "lit"
 import { classMap } from "lit/directives/class-map.js"
+import { ifDefined } from "lit/directives/if-defined.js"
+
 import { Icon } from "../icon/icon.js"
-import { defineElement } from "../../lib/defineElement.js"
+import { HasSlotController } from "../../lib/hasSlotController.js"
 
 import styles from "./button.css"
 
@@ -14,7 +16,7 @@ const BUTTON_VARIANTS = ["primary", "secondary", "ghost"]
 Object.freeze(BUTTON_VARIANTS)
 export { BUTTON_VARIANTS }
 
-const BUTTON_SIZES = ["normal", "small"]
+const BUTTON_SIZES = ["regular", "small"]
 Object.freeze(BUTTON_SIZES)
 export { BUTTON_SIZES }
 
@@ -22,9 +24,36 @@ const BUTTON_TYPES = ["button", "submit", "reset"]
 Object.freeze(BUTTON_TYPES)
 export { BUTTON_TYPES }
 
-export const BUTTON_EXPANDED_OPTIONS = ["open", "closed"]
+export const BUTTON_EXPANDED_OPTIONS = ["true", "false"]
 Object.freeze(BUTTON_EXPANDED_OPTIONS)
 
+/**
+ * All roles that are associated with a aria-checked attribute
+ * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
+ */
+const ARIA_ROLES_CHECKED = [
+  "checkbox",
+  "menuitemcheckbox",
+  "menuitemradio",
+  "option",
+  "radio",
+  "switch",
+]
+
+/**
+ * All roles that are associated with a aria-selected attribute
+ * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected
+ */
+const ARIA_ROLES_SELECTED = [
+  "gridcell",
+  "option",
+  "row",
+  "tab",
+  "columnheader",
+  "rowheader",
+  "treeitem",
+]
+
 /**
  * @tagname leu-button
  */
@@ -39,13 +68,19 @@ export class LeuButton extends LitElement {
     delegatesFocus: true,
   }
 
+  /**
+   * @internal
+   */
+  hasSlotController = new HasSlotController(this, ["[default]"])
+
   static properties = {
     label: { type: String, reflect: true },
     icon: { type: String, reflect: true },
-    iconAfter: { type: String, reflect: true },
+    iconPosition: { type: String, reflect: true },
     size: { type: String, reflect: true },
     variant: { type: String, reflect: true },
     type: { type: String, reflect: true },
+    componentRole: { type: String, reflect: true },
 
     disabled: { type: Boolean, reflect: true },
     round: { type: Boolean, reflect: true },
@@ -61,13 +96,13 @@ export class LeuButton extends LitElement {
     this.label = null
     /** @type {string} */
     this.icon = null
-    /** @type {string} - Only taken into account if Label and no Icon is set */
-    this.iconAfter = null
+    /** @type {("before" | "after")} - Only taken into account if Label and no Icon is set */
+    this.iconPosition = "before"
     /** @type {string} */
-    this.size = "normal"
+    this.size = "regular"
     /** @type {string} */
     this.variant = "primary"
-    /** @type {string} */
+    /** @type {"button" | "submit" | "reset"} */
     this.type = "button"
 
     /** @type {boolean} */
@@ -84,7 +119,7 @@ export class LeuButton extends LitElement {
 
     /**
      * Only taken into account if variant is "ghost"
-     * @type {("open" | "closed" | undefined)}
+     * @type {("true" | "false" | undefined)}
      */
     this.expanded = undefined
   }
@@ -94,7 +129,7 @@ export class LeuButton extends LitElement {
   }
 
   renderIconBefore() {
-    if (this.icon) {
+    if (this.icon && this.iconPosition === "before") {
       return html`<div class="icon-wrapper icon-wrapper--before">
         ${Icon(this.icon, this.getIconSize())}
       </div>`
@@ -104,9 +139,9 @@ export class LeuButton extends LitElement {
   }
 
   renderIconAfter() {
-    if (this.iconAfter && this.label && !this.icon) {
+    if (this.icon && this.iconPosition === "after") {
       return html`<div class="icon-wrapper icon-wrapper--after">
-        ${Icon(this.iconAfter, this.getIconSize())}
+        ${Icon(this.icon, this.getIconSize())}
       </div>`
     }
 
@@ -123,10 +158,30 @@ export class LeuButton extends LitElement {
     return nothing
   }
 
+  getAriaAttributes() {
+    const attributes = {
+      role: this.componentRole,
+      label: this.label,
+    }
+
+    if (this.componentRole) {
+      if (ARIA_ROLES_CHECKED.includes(this.componentRole)) {
+        attributes.checked = this.active ? "true" : "false"
+      } else if (ARIA_ROLES_SELECTED.includes(this.componentRole)) {
+        attributes.selected = this.active ? "true" : "false"
+      }
+    }
+
+    return attributes
+  }
+
   render() {
+    const hasContent = this.hasSlotController.test("[default]")
+    const aria = this.getAriaAttributes()
+
     const cssClasses = {
-      icon: !this.label && this.icon && !this.iconAfter,
-      round: !this.label && this.icon && !this.iconAfter && this.round,
+      icon: !hasContent && this.icon,
+      round: !hasContent && this.icon && this.round,
       active: this.active,
       inverted: this.inverted,
       [this.variant]: true,
@@ -134,17 +189,18 @@ export class LeuButton extends LitElement {
     }
     return html`
       <button
+        aria-label=${ifDefined(aria.label)}
+        aria-selected=${ifDefined(aria.selected)}
+        aria-checked=${ifDefined(aria.checked)}
+        role=${ifDefined(aria.role)}
         class=${classMap(cssClasses)}
         ?disabled=${this.disabled}
         type=${this.type}
       >
-        ${this.renderIconBefore()} ${this.label} ${this.renderIconAfter()}
-        ${this.renderExpandingIcon()}
+        ${this.renderIconBefore()}
+        <slot></slot>
+        ${this.renderIconAfter()} ${this.renderExpandingIcon()}
       </button>
     `
   }
 }
-
-export function defineButtonElements() {
-  defineElement("button", LeuButton)
-}

package/src/components/button/button.css

@@ -3,7 +3,7 @@
 }
 
 button {
-  font-family: var(--leu-font-black);
+  font-family: var(--leu-font-family-black);
   text-align: center;
   appearance: none;
   transition: background 0.1s ease;
@@ -38,14 +38,14 @@ button.inverted:focus-visible {
   justify-content: center;
 }
 
-/* size - normal */
-button.normal {
+/* size - regular */
+button.regular {
   padding: 12px 24px;
   font-size: 16px;
   line-height: 24px;
 }
 
-button.normal.icon {
+button.regular.icon {
   padding: 12px;
 }
 
@@ -76,6 +76,10 @@ button.primary.active {
   background: var(--leu-color-black-100);
 }
 
+button.primary.active:hover {
+  background: var(--leu-color-black-transp-80);
+}
+
 button.primary:disabled {
   color: var(--leu-color-black-0);
   background: var(--leu-color-black-transp-20);
@@ -97,6 +101,10 @@ button.secondary.active {
   background: var(--leu-color-black-100);
 }
 
+button.secondary.active:hover {
+  background: var(--leu-color-black-transp-80);
+}
+
 button.secondary:disabled {
   color: var(--leu-color-black-transp-20);
   background: var(--leu-color-black-transp-5);
@@ -107,7 +115,7 @@ button.ghost {
   background: transparent;
   padding: 0 0.5rem;
   color: var(--leu-color-black-60);
-  font-family: var(--leu-font-regular);
+  font-family: var(--leu-font-family-regular);
 }
 
 button.ghost:hover {

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

@@ -1,3 +1,6 @@
-import { defineButtonElements } from "./Button.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuButton } from "./Button.js"
 
-defineButtonElements()
+export { LeuButton }
+
+defineElement("button", LeuButton)

package/src/components/button/stories/button.stories.js

@@ -10,59 +10,44 @@ import {
   BUTTON_EXPANDED_OPTIONS,
 } from "../Button.js"
 
-function copyContent(params) {
-  const string = `<leu-button${Object.values(params)
-    .filter((o) => o)
-    .join("")}>\n</leu-button>`
-  navigator.clipboard.writeText(string)
+function copyContent(e) {
+  navigator.clipboard.writeText(e.target.outerHTML.replace(/<!--.*?-->/g, ""))
 }
 
 export default {
   title: "Button",
   component: "leu-button",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=4-1444&mode=design&t=xu5Vii8jXKKCKDez-0",
+    },
+    html: {
+      root: "[data-root]",
+    },
+  },
 }
 
-function Template({
-  label,
-  round,
-  size,
-  active,
-  inverted,
-  variant,
-  disabled,
-  icon,
-  iconAfter,
-  type,
-  expanded,
-}) {
-  const params = {
-    label: label ? ` label="${label}"` : undefined,
-    size: size === "small" ? ' size="small"' : undefined,
-    variant: variant !== "primary" ? ` variant="${variant}"` : undefined,
-    icon: icon ? ` icon="${icon}"` : undefined,
-    iconAfter: iconAfter ? ` icon="${iconAfter}"` : undefined,
-    round: round ? " round" : undefined,
-    active: active ? " active" : undefined,
-    disabled: disabled ? " disabled" : undefined,
-    inverted: inverted ? " inverted" : undefined,
-    expanded: expanded ? ` expanded="${expanded}"` : undefined,
-  }
+function Template(args = {}) {
   const component = html`
-    <leu-button
-      label=${ifDefined(label)}
-      size=${ifDefined(size)}
-      variant=${ifDefined(variant)}
-      icon=${ifDefined(icon)}
-      iconAfter=${ifDefined(iconAfter)}
-      type=${ifDefined(type)}
-      expanded=${expanded}
-      ?round=${round}
-      ?active=${active}
-      ?inverted=${inverted}
-      ?disabled=${disabled}
-      @click=${() => copyContent(params)}
-    >
-    </leu-button>
+    <div data-root>
+      <leu-button
+        content=${ifDefined(args.content)}
+        size=${ifDefined(args.size)}
+        variant=${ifDefined(args.variant)}
+        icon=${ifDefined(args.icon)}
+        iconPosition=${ifDefined(args.iconPosition)}
+        type=${ifDefined(args.type)}
+        expanded=${ifDefined(args.expanded)}
+        ?round=${args.round}
+        ?active=${args.active}
+        ?inverted=${args.inverted}
+        ?disabled=${args.disabled}
+        @click=${copyContent}
+      >
+        ${args.content}
+      </leu-button>
+    </div>
     <br />
     <p>Click the button to copy the code to the clipboard</p>
   `
@@ -74,8 +59,8 @@ function Template({
       }
     </style>
     <div
-      style="${inverted
-        ? "background:var(--leu-color-accent-blue);"
+      style="${args.inverted
+        ? "background:var(--leu-color-accent-blue); color: var(--leu-color-white-transp-90);"
         : ""}padding:40px;"
     >
       ${component}
@@ -85,40 +70,45 @@ function Template({
 
 export const Regular = Template.bind({})
 Regular.argTypes = {
-  label: { type: "string" },
+  content: { type: "string" },
   icon: { control: "select", options: ICON_NAMES },
-  iconAfter: { control: "select", options: ICON_NAMES },
+  iconPosition: { control: "select", options: ["before", "after"] },
   type: { control: "radio", options: BUTTON_TYPES },
   size: { control: "radio", options: BUTTON_SIZES },
   variant: { control: "radio", options: BUTTON_VARIANTS },
   expanded: { control: "radio", options: BUTTON_EXPANDED_OPTIONS },
 }
 Regular.args = {
-  label: "Click Mich...",
+  content: "Click Mich...",
   round: false,
   disabled: false,
   active: false,
   inverted: false,
 
   icon: null,
-  iconAfter: null,
+  iconPosition: null,
   size: null,
   variant: null,
   type: null,
 }
 
 const items = [
-  { label: "Normal" },
-  { label: "Active", active: true },
-  { label: "Disabled", disabled: true },
+  { content: "Normal" },
+  { content: "Active", active: true },
+  { content: "Disabled", disabled: true },
 
-  { label: "Normal", icon: "calendar" },
-  { label: "Active", icon: "calendar", active: true },
-  { label: "Disabled", icon: "calendar", disabled: true },
+  { content: "Normal", icon: "calendar" },
+  { content: "Active", icon: "calendar", active: true },
+  { content: "Disabled", icon: "calendar", disabled: true },
 
-  { label: "Normal", iconAfter: "calendar" },
-  { label: "Active", iconAfter: "calendar", active: true },
-  { label: "Disabled", iconAfter: "calendar", disabled: true },
+  { content: "Normal", icon: "calendar", iconPosition: "after" },
+  { content: "Active", icon: "calendar", iconPosition: "after", active: true },
+  {
+    content: "Disabled",
+    icon: "calendar",
+    iconPosition: "after",
+    disabled: true,
+  },
 
   { icon: "calendar" },
   { icon: "calendar", active: true },
@@ -130,22 +120,27 @@ const items = [
 ]
 
 const ghostItems = [
-  { label: "Normal", icon: "calendar" },
-  { label: "Active", icon: "calendar", active: true },
-  { label: "Disabled", icon: "calendar", disabled: true },
+  { content: "Normal", icon: "calendar" },
+  { content: "Active", icon: "calendar", active: true },
+  { content: "Disabled", icon: "calendar", disabled: true },
 
-  { label: "Normal", icon: "calendar", expanded: "closed" },
-  { label: "Active", icon: "calendar", active: true, expanded: "closed" },
-  { label: "Disabled", icon: "calendar", disabled: true, expanded: "closed" },
+  { content: "Normal", icon: "calendar", expanded: "closed" },
+  { content: "Active", icon: "calendar", active: true, expanded: "closed" },
+  { content: "Disabled", icon: "calendar", disabled: true, expanded: "closed" },
 
-  { label: "Normal", iconAfter: "calendar" },
-  { label: "Active", iconAfter: "calendar", active: true },
-  { label: "Disabled", iconAfter: "calendar", disabled: true },
+  { content: "Normal", icon: "calendar", iconPosition: "after" },
+  { content: "Active", icon: "calendar", iconPosition: "after", active: true },
+  {
+    content: "Disabled",
+    icon: "calendar",
+    iconPosition: "after",
+    disabled: true,
+  },
 ]
 
 const sizes = [
   {
-    size: "normal",
+    size: "regular",
     items,
   },
   {
@@ -168,7 +163,7 @@ const groups = [
   {
     inverted: false,
     variant: "ghost",
-    sizes: [{ size: "normal", items: ghostItems }],
+    sizes: [{ size: "regular", items: ghostItems }],
   },
   {
     inverted: true,
@@ -183,11 +178,11 @@ const groups = [
   {
     inverted: true,
     variant: "ghost",
-    sizes: [{ size: "normal", items: ghostItems }],
+    sizes: [{ size: "regular", items: ghostItems }],
   },
 ]
 
-function TemplateDev() {
+function TemplateOverview() {
   return html` <style>
       .codeblock {
         position: relative;
@@ -267,47 +262,26 @@ function TemplateDev() {
               (size) =>
                 html`
                   <div>
-                    <div class=${classMap({ table: true })}>
-                      ${size.items.map((item) => {
-                        const params = {
-                          label: item.label
-                            ? ` label="${item.label}"`
-                            : undefined,
-                          size:
-                            size.size === "small" ? ' size="small"' : undefined,
-                          variant:
-                            group.variant !== "primary"
-                              ? ` variant="${group.variant}"`
-                              : undefined,
-                          icon: item.icon ? ` icon="${item.icon}"` : undefined,
-                          iconAfter: item.iconAfter
-                            ? ` icon="${item.iconAfter}"`
-                            : undefined,
-                          round: item.round ? " round" : undefined,
-                          active: item.active ? " active" : undefined,
-                          disabled: item.disabled ? " disabled" : undefined,
-                          inverted: group.inverted ? " inverted" : undefined,
-                          expanded: item.expanded
-                            ? ` expanded="${item.expanded}"`
-                            : undefined,
-                        }
-                        return html`
+                    <div class=${classMap({ table: true })} data-root>
+                      ${size.items.map(
+                        (item) => html`
                           <leu-button
                             label=${ifDefined(item.label)}
                             size=${ifDefined(size.size)}
                             variant=${ifDefined(group.variant)}
                             icon=${ifDefined(item.icon)}
-                            iconAfter=${ifDefined(item.iconAfter)}
+                            iconPosition=${ifDefined(item.iconPosition)}
                             expanded=${ifDefined(item.expanded)}
                             ?round=${item.round}
                             ?active=${item.active}
                             ?disabled=${item.disabled}
                             ?inverted=${group.inverted}
-                            @click=${() => copyContent(params)}
+                            @click=${copyContent}
                           >
+                            ${item.content}
                           </leu-button>
                         `
-                      })}
+                      )}
                     </div>
                   </div>
                 `
@@ -318,11 +292,11 @@ function TemplateDev() {
     )}`
 }
 
-export const Dev = TemplateDev.bind({})
-Dev.argTypes = {
-  label: { table: { disable: true } },
+export const Overview = TemplateOverview.bind({})
+Overview.argTypes = {
+  content: { table: { disable: true } },
   icon: { table: { disable: true } },
-  iconAfter: { table: { disable: true } },
+  iconPosition: { table: { disable: true } },
   size: { table: { disable: true } },
   variant: { table: { disable: true } },
   type: { table: { disable: true } },