@statistikzh/leu 0.4.0 → 0.5.0

package/scripts/postcss-leu-font-styles.cjs

@@ -0,0 +1,160 @@
+const path = require("path")
+const fs = require("fs/promises")
+
+/* Plugin logic */
+
+function getPixelValue(value) {
+  return parseInt(value.replace("px", ""), 10)
+}
+
+async function parseFile(file) {
+  const string = await fs.readFile(file, "utf-8")
+
+  return JSON.parse(string)
+}
+
+function generateCustomPropertyDeclarations({
+  identifier,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  spacing,
+}) {
+  const customPropertyPrefix = `--leu-t-${identifier}-${fontWeight}`
+
+  const varFontSize = `${customPropertyPrefix}-font-size`
+  const varLineHeight = `${customPropertyPrefix}-line-height`
+  const varSpacing = `${customPropertyPrefix}-spacing`
+  const varFont = `${customPropertyPrefix}-font`
+  const varFontFamily = `--leu-font-family-${fontWeight}`
+
+  return [
+    { type: "fontSize", name: varFontSize, value: `${fontSize / 16}rem` },
+    { type: "lineHeight", name: varLineHeight, value: `${lineHeight}` },
+    { type: "spacing", name: varSpacing, value: `${spacing}rem` },
+    {
+      type: "font",
+      name: varFont,
+      value: `var(${varFontSize}) / var(${varLineHeight}) var(${varFontFamily})`,
+    },
+  ]
+}
+
+function curveStepDeclarations(curvePrefix, stepStyle) {
+  const fontSizeVar = stepStyle.declarations.find(
+    (s) => s.type === "fontSize"
+  ).name
+  const lineHeightVar = stepStyle.declarations.find(
+    (s) => s.type === "lineHeight"
+  ).name
+  const spacingVar = stepStyle.declarations.find(
+    (s) => s.type === "spacing"
+  ).name
+  const fontVar = stepStyle.declarations.find((s) => s.type === "font").name
+
+  return [
+    { prop: `${curvePrefix}-font-size`, value: ` var(${fontSizeVar})` },
+    { prop: `${curvePrefix}-line-height`, value: ` var(${lineHeightVar})` },
+    { prop: `${curvePrefix}-spacing`, value: ` var(${spacingVar})` },
+    { prop: `${curvePrefix}-font`, value: ` var(${fontVar})` },
+  ]
+}
+
+/**
+ *
+ * @param {*} file
+ * @param {import('postcss')} postcss
+ * @param {import('postcss').Source} nodeSource
+ * @returns
+ */
+async function createLeuFontStyleNodes(file, postcss, nodeSource) {
+  const { definitions, curves } = await parseFile(file)
+
+  const fontStyleDeclarations = definitions.flatMap((style) => {
+    const fontSize = getPixelValue(style.fontSize)
+    const fontWeights = Array.isArray(style.fontWeight)
+      ? style.fontWeight
+      : [style.fontWeight]
+    const spacing = getPixelValue(style.spacing) / 16
+
+    const identifier = (fontSize / 4) * 10
+
+    return fontWeights.map((fontWeight) => ({
+      name: style.name,
+      fontWeight,
+      identifier,
+      declarations: generateCustomPropertyDeclarations({
+        identifier,
+        fontSize,
+        fontWeight,
+        lineHeight: style.lineHeight,
+        spacing,
+      }),
+    }))
+  })
+
+  const fontStyleNodes = fontStyleDeclarations.flatMap((style) =>
+    style.declarations.map(
+      ({ name, value }) =>
+        new postcss.Declaration({ prop: name, value, source: nodeSource })
+    )
+  )
+
+  const curveNodes = curves.flatMap((curve) => {
+    const [_, lastStepName] = curve.steps.at(-1)
+    const { identifier } = fontStyleDeclarations.find(
+      (style) => style.name === lastStepName && style.fontWeight === "black"
+    )
+
+    const curvePrefix = `--leu-t-curve-${identifier}-black`
+
+    return curve.steps.flatMap((step) => {
+      const [viewport, styleName] = step
+
+      const stepStyle = fontStyleDeclarations.find(
+        (s) => s.name === styleName && s.fontWeight === "black"
+      )
+
+      const nodes = curveStepDeclarations(curvePrefix, stepStyle).map(
+        ({ prop, value }) =>
+          new postcss.Declaration({ prop, value, source: nodeSource })
+      )
+
+      return viewport === null
+        ? nodes
+        : new postcss.AtRule({
+            name: "media",
+            params: `(${viewport})`,
+            nodes,
+            source: nodeSource,
+          })
+    })
+  })
+
+  return [...fontStyleNodes, ...curveNodes]
+}
+
+/* Plugin config */
+
+/**
+ * @type {import('postcss').PluginCreator}
+ */
+module.exports = () => ({
+  postcssPlugin: "leu-font-styles",
+  AtRule: {
+    "leu-font-styles": async (atRule, postcss) => {
+      const rootDir = path.dirname(atRule.source.input.file)
+      const jsonFile = atRule.params.replace(/['"]+/g, "")
+
+      const nodes = await createLeuFontStyleNodes(
+        path.resolve(rootDir, jsonFile),
+        postcss,
+        atRule.source
+      )
+
+      atRule.replaceWith(nodes)
+    },
+  },
+})
+
+module.exports.postcss = true

package/src/components/accordion/accordion.css

@@ -6,8 +6,8 @@
 }
 
 :host {
-  --accordion-font-regular: var(--leu-font-regular);
-  --accordion-font-black: var(--leu-font-black);
+  --accordion-font-regular: var(--leu-font-family-regular);
+  --accordion-font-black: var(--leu-font-family-black);
 
   --accordion-toggle-font: var(--accordion-font-black);
 

package/src/components/accordion/stories/accordion.stories.js

@@ -8,7 +8,8 @@ export default {
   component: "leu-accordion",
   argTypes: {
     headingLevel: {
-      options: [0, 1, 2, 3, 4, 5, 6],
+      control: "select",
+      options: [1, 2, 3, 4, 5, 6],
     },
     content: {
       control: {

package/src/components/accordion/test/accordion.test.js

@@ -1,5 +1,5 @@
 import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
+import { fixture, expect, elementUpdated, aTimeout } from "@open-wc/testing"
 
 import "../leu-accordion.js"
 
@@ -88,11 +88,13 @@ describe("LeuAccordion", () => {
     )
 
     const button = el.shadowRoot.querySelector("button")
-    const content = el.shadowRoot.querySelector(".content")
+    const content = el.querySelector("[slot=content]")
 
     expect(content).not.to.be.visible
 
     button.click()
+    await elementUpdated(el)
+    await aTimeout(100)
     expect(content).to.be.visible
   })
 

package/src/components/breadcrumb/Breadcrumb.js

@@ -7,6 +7,7 @@ import { Icon } from "../icon/icon.js"
 import "../menu/leu-menu.js"
 import "../menu/leu-menu-item.js"
 import "../popup/leu-popup.js"
+import "../visually-hidden/leu-visually-hidden.js"
 import { debounce } from "../../lib/utils.js"
 
 /**
@@ -276,7 +277,7 @@ export class LeuBreadcrumb extends LitElement {
 
     return html`
       <nav class=${classMap(wrapperClasses)}>
-        <h2 class="visuallyhidden">Sie sind hier:</h2>
+        <leu-visually-hidden><h2>Sie sind hier:</h2></leu-visually-hidden>
         <ol class="breadcrumbs__list" ref=${ref(this._containerRef)}>
           ${showBackOnly
             ? html` <li class="breadcrumbs__item breadcrumbs__item--back">

package/src/components/breadcrumb/breadcrumb.css

@@ -4,8 +4,8 @@
 }
 
 :host {
-  --breadcrumb-font-regular: var(--leu-font-regular);
-  --breadcrumb-font-black: var(--leu-font-black);
+  --breadcrumb-font-regular: var(--leu-font-family-regular);
+  --breadcrumb-font-black: var(--leu-font-family-black);
 
   font-family: var(--breadcrumb-font-regular);
   line-height: 1.5;
@@ -74,17 +74,6 @@
   box-shadow: var(--leu-box-shadow-short);
 }
 
-.visuallyhidden {
-  clip: rect(0 0 0 0);
-  border: 0;
-  height: 1px;
-  margin: -1px !important;
-  overflow: hidden;
-  padding: 0 !important;
-  position: absolute;
-  width: 1px;
-}
-
 .breadcrumbs {
   font-size: 1rem;
 }

package/src/components/button/Button.js

@@ -1,6 +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 { HasSlotController } from "../../lib/hasSlotController.js"
 
 import styles from "./button.css"
 
@@ -21,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
  */
@@ -38,6 +68,11 @@ 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 },
@@ -45,6 +80,7 @@ export class LeuButton extends LitElement {
     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 },
@@ -66,7 +102,7 @@ export class LeuButton extends LitElement {
     this.size = "regular"
     /** @type {string} */
     this.variant = "primary"
-    /** @type {string} */
+    /** @type {"button" | "submit" | "reset"} */
     this.type = "button"
 
     /** @type {boolean} */
@@ -83,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
   }
@@ -103,7 +139,7 @@ export class LeuButton extends LitElement {
   }
 
   renderIconAfter() {
-    if (this.icon && this.label && this.iconPosition === "after") {
+    if (this.icon && this.iconPosition === "after") {
       return html`<div class="icon-wrapper icon-wrapper--after">
         ${Icon(this.icon, this.getIconSize())}
       </div>`
@@ -122,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,
-      round: !this.label && this.icon && this.round,
+      icon: !hasContent && this.icon,
+      round: !hasContent && this.icon && this.round,
       active: this.active,
       inverted: this.inverted,
       [this.variant]: true,
@@ -133,12 +189,17 @@ 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>
     `
   }

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;
@@ -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/stories/button.stories.js

@@ -10,11 +10,8 @@ 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 {
@@ -31,47 +28,24 @@ export default {
   },
 }
 
-function Template({
-  label,
-  round,
-  size,
-  active,
-  inverted,
-  variant,
-  disabled,
-  icon,
-  iconPosition,
-  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,
-    iconPosition: iconPosition ? ` icon="${iconPosition}"` : 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`
     <div data-root>
       <leu-button
-        label=${ifDefined(label)}
-        size=${ifDefined(size)}
-        variant=${ifDefined(variant)}
-        icon=${ifDefined(icon)}
-        iconPosition=${ifDefined(iconPosition)}
-        type=${ifDefined(type)}
-        expanded=${ifDefined(expanded)}
-        ?round=${round}
-        ?active=${active}
-        ?inverted=${inverted}
-        ?disabled=${disabled}
-        @click=${() => copyContent(params)}
+        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 />
@@ -85,7 +59,7 @@ function Template({
       }
     </style>
     <div
-      style="${inverted
+      style="${args.inverted
         ? "background:var(--leu-color-accent-blue); color: var(--leu-color-white-transp-90);"
         : ""}padding:40px;"
     >
@@ -96,7 +70,7 @@ function Template({
 
 export const Regular = Template.bind({})
 Regular.argTypes = {
-  label: { type: "string" },
+  content: { type: "string" },
   icon: { control: "select", options: ICON_NAMES },
   iconPosition: { control: "select", options: ["before", "after"] },
   type: { control: "radio", options: BUTTON_TYPES },
@@ -105,7 +79,7 @@ Regular.argTypes = {
   expanded: { control: "radio", options: BUTTON_EXPANDED_OPTIONS },
 }
 Regular.args = {
-  label: "Click Mich...",
+  content: "Click Mich...",
   round: false,
   disabled: false,
   active: false,
@@ -119,18 +93,18 @@ Regular.args = {
 }
 
 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", icon: "calendar", iconPosition: "after" },
-  { label: "Active", icon: "calendar", iconPosition: "after", active: true },
+  { content: "Normal", icon: "calendar", iconPosition: "after" },
+  { content: "Active", icon: "calendar", iconPosition: "after", active: true },
   {
-    label: "Disabled",
+    content: "Disabled",
     icon: "calendar",
     iconPosition: "after",
     disabled: true,
@@ -146,18 +120,18 @@ 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", icon: "calendar", iconPosition: "after" },
-  { label: "Active", icon: "calendar", iconPosition: "after", active: true },
+  { content: "Normal", icon: "calendar", iconPosition: "after" },
+  { content: "Active", icon: "calendar", iconPosition: "after", active: true },
   {
-    label: "Disabled",
+    content: "Disabled",
     icon: "calendar",
     iconPosition: "after",
     disabled: true,
@@ -289,30 +263,8 @@ function TemplateOverview() {
                 html`
                   <div>
                     <div class=${classMap({ table: true })} data-root>
-                      ${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,
-                          iconPosition: item.iconPosition
-                            ? ` iconPosition="${item.iconPosition}"`
-                            : 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`
+                      ${size.items.map(
+                        (item) => html`
                           <leu-button
                             label=${ifDefined(item.label)}
                             size=${ifDefined(size.size)}
@@ -324,11 +276,12 @@ function TemplateOverview() {
                             ?active=${item.active}
                             ?disabled=${item.disabled}
                             ?inverted=${group.inverted}
-                            @click=${() => copyContent(params)}
+                            @click=${copyContent}
                           >
+                            ${item.content}
                           </leu-button>
                         `
-                      })}
+                      )}
                     </div>
                   </div>
                 `
@@ -341,7 +294,7 @@ function TemplateOverview() {
 
 export const Overview = TemplateOverview.bind({})
 Overview.argTypes = {
-  label: { table: { disable: true } },
+  content: { table: { disable: true } },
   icon: { table: { disable: true } },
   iconPosition: { table: { disable: true } },
   size: { table: { disable: true } },