@statistikzh/leu 0.28.1 → 0.28.2

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

@@ -1,154 +0,0 @@
-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({
-  name,
-  fontSize,
-  fontWeight,
-  lineHeight,
-  spacing,
-}) {
-  const customPropertyPrefix = `--leu-t-${name}-${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: `normal 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
-
-    return fontWeights.map((fontWeight) => ({
-      name: style.name,
-      fontWeight,
-      declarations: generateCustomPropertyDeclarations({
-        name: style.name,
-        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) =>
-    curve.weights.flatMap((fontWeight) => {
-      const curvePrefix = `--leu-t-curve-${curve.name}-${fontWeight}`
-
-      return curve.steps.flatMap((step) => {
-        const [viewport, styleName] = step
-
-        const stepStyle = fontStyleDeclarations.find(
-          (s) => s.name === styleName && s.fontWeight === fontWeight,
-        )
-
-        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.ts

@@ -1,108 +0,0 @@
-import { nothing } from "lit"
-import { html, unsafeStatic } from "lit/static-html.js"
-import { property } from "lit/decorators.js"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-
-import styles from "./accordion.css?inline"
-
-/**
- * @tagname leu-accordion
- * @slot content - The content of the accordion. No styles will be applied to the content.
- * @attr {number} heading-level - The heading level of the accordion title. Must be between 1 and 6.
- * @attr {string} label-prefix - The prefix of the accordion label. e.g. "01"
- */
-export class LeuAccordion extends LeuElement {
-  static styles = [LeuElement.styles, styles]
-
-  /** @internal */
-  static shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-  }
-
-  /**
-   * The heading level of the accordion title. Must be between 1 and 6.
-   */
-  @property({ type: Number, attribute: "heading-level", reflect: true })
-  headingLevel = 2
-
-  /**
-   * The expanded state of the accordion.
-   */
-  @property({ type: Boolean, reflect: true })
-  open = false
-
-  /**
-   * The label (title) of the accordion
-   */
-  @property({ type: String, reflect: true })
-  label = ""
-
-  /**
-   * The prefix of the accordion label. e.g. "01"
-   */
-  @property({ type: String, attribute: "label-prefix", reflect: true })
-  labelPrefix = ""
-
-  /**
-   * Determines the heading tag of the accordion toggle.
-   * The headingLevel shouldn't be used directly to render the heading tag
-   * in order to avoid XSS issues.
-   * @internal
-   */
-  private _getHeadingTag(): string {
-    let level = 2
-    if (this.headingLevel > 0 && this.headingLevel < 7) {
-      level = Math.floor(this.headingLevel)
-    }
-
-    return `h${level}`
-  }
-
-  /**
-   * Toggles the accordion open state.
-   * @internal
-   */
-  private _handleToggleClick() {
-    this.open = !this.open
-  }
-
-  render() {
-    const hTag = this._getHeadingTag()
-
-    /* The eslint rules don't recognize html import from lit/static-html.js */
-    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
-    return html`<${unsafeStatic(hTag)} class="heading"><button
-        id="toggle"
-        type="button"
-        class="button"
-        aria-controls="contentwrapper"
-        aria-expanded="${this.open}"
-        @click=${this._handleToggleClick}
-      >
-        ${
-          this.labelPrefix
-            ? html`<span class="label-prefix">${this.labelPrefix}</span>`
-            : nothing
-        }
-        <span class="label">${this.label}</span>
-        <div class="plus"></div>
-      </button></${unsafeStatic(hTag)}>
-      <div
-        id="contentwrapper"
-        class="contentwrapper"
-        ?hidden=${!this.open}
-        aria-labelledby="toggle"
-        role="region"
-      >
-        <div
-          class="content"
-        >
-          <slot name="content"></slot>
-        </div>
-      </div>
-      <hr class="divider" />`
-  }
-  /* eslint-enable lit/binding-positions, lit/no-invalid-html */
-}

package/src/components/accordion/accordion.css

@@ -1,150 +0,0 @@
-@import url("../../styles/custom-media.css");
-
-:host {
-  --accordion-font-regular: var(--leu-font-family-regular);
-  --accordion-font-black: var(--leu-font-family-black);
-
-  --accordion-toggle-font: var(--accordion-font-black);
-
-  --label-color: var(--leu-color-black-60);
-  --label-color-active: var(--leu-color-black-100);
-
-  --divider-color: var(--leu-color-black-20);
-  --divider-color-active: var(--leu-color-black-100);
-
-  --transition: 0.1s ease;
-
-  font-family: var(--accordion-font-regular);
-
-  position: relative;
-}
-
-.heading {
-  margin: 0;
-}
-
-.button {
-  width: 100%;
-  background: none;
-  padding: 1rem 0;
-  margin: 0;
-  cursor: pointer;
-
-  border: none;
-
-  color: var(--label-color);
-  font-family: var(--accordion-toggle-font);
-  font-size: 1rem;
-  line-height: 1.5rem;
-  text-align: left;
-
-  display: flex;
-  gap: 0.25rem;
-
-  transition: color var(--transition);
-
-  @media (--viewport-regular) {
-    font-size: 1.125rem;
-    gap: 0.8rem;
-  }
-
-  @media (--viewport-xlarge) {
-    font-size: 1.25rem;
-    line-height: 1.625rem;
-  }
-}
-
-.button:focus-visible {
-  outline: 2px solid var(--leu-color-func-cyan);
-  outline-offset: 4px;
-}
-
-.button:hover,
-.button:focus-visible,
-:host([open]) .button {
-  color: var(--label-color-active);
-}
-
-.plus {
-  position: relative;
-  flex: 0 0 1rem;
-  aspect-ratio: 1;
-  align-self: center;
-  margin-inline: 0.5rem;
-}
-
-.plus::before,
-.plus::after {
-  content: "";
-
-  position: absolute;
-  top: calc(50% - 0.0625rem);
-  left: 0;
-
-  display: block;
-  width: 1rem;
-  height: 0.125rem;
-  aspect-ratio: 1 / 0.125;
-  background-color: currentcolor;
-  transition: transform var(--transition);
-}
-
-.plus::before {
-  transform: rotate(90deg);
-}
-
-:host([open]) .plus::before {
-  transform: rotate(180deg);
-}
-
-.label {
-  display: block;
-  flex-grow: 1;
-}
-
-.contentwrapper {
-  display: grid;
-  grid-template-rows: 1fr;
-  transition: grid-template-rows var(--transition);
-}
-
-.content {
-  overflow: hidden;
-}
-
-.contentwrapper[hidden] {
-  grid-template-rows: 0fr;
-  opacity: 0;
-  visibility: hidden;
-}
-
-slot[name="content"] {
-  display: block;
-  padding: 0.5rem 0 1.5rem;
-
-  @media (--viewport-medium) {
-    padding: 0.75rem 0 1.5rem;
-  }
-
-  @media (--viewport-xlarge) {
-    padding: 1rem 0 2.5rem;
-  }
-}
-
-.divider {
-  width: 100%;
-  height: 1px;
-  margin: 0;
-
-  border: none;
-  background-color: var(--divider-color);
-
-  transition:
-    transform var(--transition),
-    background-color var(--transition);
-}
-
-:host(:not([open])) .heading:is(:hover, :focus-visible) ~ .divider {
-  background-color: var(--divider-color-active);
-  transform: scaleY(3);
-}

package/src/components/accordion/leu-accordion.ts

@@ -1,11 +0,0 @@
-import { LeuAccordion } from "./Accordion.js"
-
-export { LeuAccordion }
-
-LeuAccordion.define("leu-accordion")
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "leu-accordion": LeuAccordion
-  }
-}

package/src/components/accordion/stories/accordion.stories.ts

@@ -1,62 +0,0 @@
-import { html } from "lit"
-import { ifDefined } from "lit/directives/if-defined.js"
-
-import "../leu-accordion.js"
-
-export default {
-  title: "Components/Accordion",
-  component: "leu-accordion",
-  argTypes: {
-    "heading-level": {
-      control: "select",
-      options: [1, 2, 3, 4, 5, 6],
-    },
-    content: {
-      control: {
-        type: "text",
-      },
-    },
-  },
-  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) {
-  return html`
-    <leu-accordion
-      heading-level=${ifDefined(args["heading-level"])}
-      label=${ifDefined(args.label)}
-      label-prefix=${ifDefined(args["label-prefix"])}
-      ?open=${args.open}
-    >
-      <div slot="content">${args.content}</div>
-    </leu-accordion>
-  `
-}
-
-export const Regular = Template.bind({})
-Regular.args = {
-  "heading-level": 2,
-  label:
-    "Akkordeontitel der lang und noch länger werden kann und dann umbricht",
-  content: `Regular Interessierte können ab sofort die Genauigkeit ihrer Smartphones
-  und Navigationsgeräte überprüfen. Die Baudirektion hat beim Landesmuseum
-  in Zürich einen Kontrollpunkt beim Landesmuseum in Zürich einen
-  Kontrollpunktfür mobile Geräte eingerichtet – den ersten in der
-  Schweiz.P, Helvetic Roman Interessierte können ab sofort die Genauigkeit
-  ihrer Smartphones und Navigationsgeräte überprüfen.
-
-  Die Zürich einen Kontrollpunktfür mobile einen Kontrollpunkt beim
-  Landesmuseum in Zürich einen Kontrollpunktfür mobile Geräte eingerichtet
-  – den ersten in der Schweiz.`,
-}
-
-export const Prefix = Template.bind({})
-Prefix.args = {
-  ...Regular.args,
-  "label-prefix": "01",
-}

package/src/components/accordion/test/accordion.test.ts

@@ -1,118 +0,0 @@
-import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
-
-import "../leu-accordion.js"
-
-async function defaultFixture() {
-  return fixture(html`
-    <leu-accordion label="Titel des Akkordeons"></leu-accordion>
-  `)
-}
-
-describe("LeuAccordion", () => {
-  it("is a defined element", async () => {
-    const el = customElements.get("leu-accordion")
-
-    await expect(el).not.to.be.undefined
-  })
-
-  it("passes the a11y audit", async () => {
-    const el = await defaultFixture()
-
-    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
-  })
-
-  // TODO: `.visible` throws an error:
-  // DOMException: HTMLDivElement object could not be cloned.
-  // Maybe chai-dom is not compatible with using slots?
-  // 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(el).to.have.attribute("label", "Titel des Akkordeons")
-  //   expect(content).not.to.be.visible
-
-  //   button.click()
-  //   await elementUpdated(el)
-  //   await aTimeout(150)
-  //   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")
-  })
-})