@statistikzh/leu 0.3.0 → 0.5.0

package/rollup.config.js

@@ -1,3 +1,6 @@
+import { globSync } from "glob"
+import path from "path"
+import { fileURLToPath } from "url"
 import postcss from "rollup-plugin-postcss"
 import postcssLit from "rollup-plugin-postcss-lit"
 import { babel } from "@rollup/plugin-babel"
@@ -17,44 +20,25 @@ export const plugins = [
   },
 ]
 
+/**
+ * @type {import("rollup").RollupOptions}
+ */
 export default {
-  input: [
-    "index.js",
-    "./src/components/button/leu-button.js",
-    "./src/components/button/Button.js",
-    "./src/components/button-group/leu-button-group.js",
-    "./src/components/button-group/ButtonGroup.js",
-    "./src/components/checkbox/leu-checkbox.js",
-    "./src/components/checkbox/leu-checkbox-group.js",
-    "./src/components/checkbox/Checkbox.js",
-    "./src/components/checkbox/CheckboxGroup.js",
-    "./src/components/chip/leu-chip-group.js",
-    "./src/components/chip/leu-chip-link.js",
-    "./src/components/chip/leu-chip-removable.js",
-    "./src/components/chip/leu-chip-selectable.js",
-    "./src/components/chip/ChipGroup.js",
-    "./src/components/chip/ChipLink.js",
-    "./src/components/chip/ChipRemovable.js",
-    "./src/components/chip/ChipSelectable.js",
-    "./src/components/dropdown/leu-dropdown.js",
-    "./src/components/dropdown/Dropdown.js",
-    "./src/components/input/leu-input.js",
-    "./src/components/input/Input.js",
-    "./src/components/menu/leu-menu.js",
-    "./src/components/menu/leu-menu-item.js",
-    "./src/components/menu/Menu.js",
-    "./src/components/menu/MenuItem.js",
-    "./src/components/pagination/leu-pagination.js",
-    "./src/components/pagination/Pagination.js",
-    "./src/components/radio/leu-radio.js",
-    "./src/components/radio/leu-radio-group.js",
-    "./src/components/radio/Radio.js",
-    "./src/components/radio/RadioGroup.js",
-    "./src/components/select/leu-select.js",
-    "./src/components/select/Select.js",
-    "./src/components/table/leu-table.js",
-    "./src/components/table/Table.js",
-  ],
+  // Select all files in a direct subdirectory of src/components
+  // that have a name starting with
+  // -  a capital letter
+  // -  or "leu-"
+  input: {
+    "index.js": "index.js",
+    ...Object.fromEntries(
+      globSync("src/components/*/{[A-Z],leu-}*.js", { nocase: false }).map(
+        (file) => [
+          path.basename(file, path.extname(file)),
+          fileURLToPath(new URL(file, import.meta.url)),
+        ]
+      )
+    ),
+  },
   output: {
     dir: "./dist/",
     format: "esm",
@@ -66,6 +50,3 @@ export default {
   ],
   external: /^lit(\/.*\.js)?$/,
 }
-
-// TODO: add a second config for a bundle with esbuild
-// import esbuild from "rollup-plugin-esbuild"

package/scripts/generate-component/templates/[Name].js

@@ -1,5 +1,4 @@
 import { html, LitElement } from "lit"
-import { defineElement } from "../../lib/defineElement.js"
 import styles from "./[name].css"
 
 /**
@@ -27,7 +26,3 @@ export class Leu[Name] extends LitElement {
     `
   }
 }
-
-export function define[Name]Elements() {
-  defineElement("[name]", [Namespace][Name])
-}

package/scripts/generate-component/templates/[name].css

@@ -4,8 +4,8 @@
 }
 
 :host {
-  --[name]-font-regular: var(--leu-font-regular);
-  --[name]-font-black: var(--leu-font-black);
+  --[name]-font-regular: var(--leu-font-family-regular);
+  --[name]-font-black: var(--leu-font-family-black);
 
-  font-family: var(--chip-font-regular);
+  font-family: var(--[name]-font-regular);
 }

package/scripts/generate-component/templates/[namespace]-[name].js

@@ -1,3 +1,6 @@
-import { define[Name]Elements } from "./[Name].js"
+import { defineElement } from "../../lib/defineElement.js"
+import { [Namespace][Name] } from "./[Name].js"
 
-define[Name]Elements()
+export { [Namespace][Name] }
+
+defineElement("[name]", [Namespace][Name])

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.js

@@ -1,7 +1,6 @@
 import { LitElement, nothing } from "lit"
 import { html, unsafeStatic } from "lit/static-html.js"
 
-import { defineElement } from "../../lib/defineElement.js"
 import styles from "./accordion.css"
 
 /**
@@ -35,7 +34,6 @@ export class LeuAccordion extends LitElement {
     this.headingLevel = 2
     this.open = false
     this.label = ""
-    this.labelPrefix = ""
   }
 
   /**
@@ -96,7 +94,3 @@ export class LeuAccordion extends LitElement {
   }
   /* eslint-enable lit/binding-positions, lit/no-invalid-html */
 }
-
-export function defineAccordionElements() {
-  defineElement("accordion", LeuAccordion)
-}

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/leu-accordion.js

@@ -1,3 +1,6 @@
-import { defineAccordionElements } from "./Accordion.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuAccordion } from "./Accordion.js"
 
-defineAccordionElements()
+export { LeuAccordion }
+
+defineElement("accordion", LeuAccordion)

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

@@ -8,10 +8,8 @@ export default {
   component: "leu-accordion",
   argTypes: {
     headingLevel: {
-      control: {
-        type: "select",
-        options: [0, 1, 2, 3, 4, 5, 6],
-      },
+      control: "select",
+      options: [1, 2, 3, 4, 5, 6],
     },
     content: {
       control: {
@@ -19,6 +17,12 @@ export default {
       },
     },
   },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17341-82464&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
 function Template(args) {

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

@@ -1,15 +1,17 @@
 import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
+import { fixture, expect, elementUpdated, aTimeout } from "@open-wc/testing"
 
 import "../leu-accordion.js"
 
 async function defaultFixture() {
-  return fixture(html` <leu-accordion /> `)
+  return fixture(
+    html` <leu-accordion label="Titel des Akkordeons"></leu-accordion> `
+  )
 }
 
 describe("LeuAccordion", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("leu-accordion")
+    const el = customElements.get("leu-accordion")
 
     await expect(el).not.to.be.undefined
   })
@@ -19,4 +21,94 @@ describe("LeuAccordion", () => {
 
     await expect(el).shadowDom.to.be.accessible()
   })
+
+  it("renders the correct heading tag", async () => {
+    const el = await defaultFixture()
+
+    await expect(el._getHeadingTag()).to.equal("h2")
+
+    el.headingLevel = 1
+    await expect(el._getHeadingTag()).to.equal("h1")
+
+    el.headingLevel = 2
+    await expect(el._getHeadingTag()).to.equal("h2")
+
+    el.headingLevel = 3
+    await expect(el._getHeadingTag()).to.equal("h3")
+
+    el.headingLevel = 4
+    await expect(el._getHeadingTag()).to.equal("h4")
+
+    el.headingLevel = 5
+    await expect(el._getHeadingTag()).to.equal("h5")
+
+    el.headingLevel = 6
+    await expect(el._getHeadingTag()).to.equal("h6")
+  })
+
+  it("doesn't render an invalid heading tag", async () => {
+    const el = await defaultFixture()
+
+    el.headingLevel = 10
+    expect(el._getHeadingTag()).to.equal("h2")
+
+    el.headingLevel = -1
+    expect(el._getHeadingTag()).to.equal("h2")
+
+    el.headingLevel = 0
+    expect(el._getHeadingTag()).to.equal("h2")
+
+    el.headingLevel = "h3"
+    expect(el._getHeadingTag()).to.equal("h2")
+  })
+
+  it("toggles the open state", async () => {
+    const el = await fixture(
+      html`<leu-accordion label="Titel des Akkordeons"
+        ><div slot="content">Das ist der Inhalt</div></leu-accordion
+      >`
+    )
+
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(el.open).to.be.false
+
+    button.click()
+    expect(el.open).to.be.true
+
+    button.click()
+    expect(el.open).to.be.false
+  })
+
+  it("doesn't show the content when it is closed", async () => {
+    const el = await fixture(
+      html`<leu-accordion label="Titel des Akkordeons"
+        ><div slot="content">Das ist der Inhalt</div></leu-accordion
+      >`
+    )
+
+    const button = el.shadowRoot.querySelector("button")
+    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
+  })
+
+  it("shows the label prefix before the label", async () => {
+    const el = await fixture(
+      html`<leu-accordion
+        label-prefix="01"
+        label="Titel des Akkordeons"
+      ></leu-accordion>`
+    )
+
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(button).to.contain.text("01")
+    expect(button).to.contain.text("Titel des Akkordeons")
+  })
 })