@statistikzh/leu 0.0.2

package/scripts/generate-component/generate.js

@@ -0,0 +1,167 @@
+#!/usr/bin/env node
+/* eslint-disable no-use-before-define */
+
+import arg from "arg"
+import fs from "fs"
+import path from "path"
+import { fileURLToPath } from "url"
+
+const fsPromises = fs.promises
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const namespace = "leu"
+const Namespace = "Leu"
+
+const printHelp = () => {
+  console.log(`
+  Usage: ./scripts/generate-component/generate.js [options]
+
+  Options:
+    -n, --name        Name of the component directory, camel-case (required)
+    -c, --components  List of components to generate, camel-case (optional, defaults to name)
+    -h, --help        Print this help message
+
+  Example:
+    ./scripts/generate-component/generate.js --name radio --components radio,radio-button
+    ./scripts/generate-component/generate.js -n select
+  `)
+}
+
+const upperCamelCase = (str) =>
+  str
+    .split("-")
+    .map((chunk) => `${chunk.charAt(0).toUpperCase()}${chunk.slice(1)}`)
+    .join("")
+
+const makeFolder = async (dir) => {
+  if (dir !== "." && !fs.existsSync(dir)) {
+    await fsPromises.mkdir(dir)
+  }
+}
+
+const formatTemplateFileContents = (replacements, content) => {
+  // replace all instances of [name], [Name], [namespace] and [Namespace] accordingly
+  let result = content
+  for (let i = 0; i < replacements.length; i += 1) {
+    const { regex, value } = replacements[i]
+    result = result.replace(regex, value)
+  }
+  return result
+}
+
+const getReplacements = async ({ name }) => {
+  // name to lower-kebab-case (e.g. Text Input -> text-input)
+  // const lowerKebabCaseName = lowerKebabCase(name)
+  // name to UpperCamelCase (e.g. text-input -> TextInput)
+  const upperCamelCaseName = upperCamelCase(name)
+
+  return [
+    { regex: /\[name\]/g, value: name },
+    { regex: /\[namespace\]/g, value: namespace },
+    { regex: /\[Namespace\]/g, value: Namespace },
+    { regex: /\[Name\]/g, value: upperCamelCaseName },
+  ]
+}
+
+const copyFile = async (sourcePath, targetPath, params, replacements) => {
+  const stats = await fsPromises.stat(sourcePath)
+  if (stats.isDirectory()) {
+    await makeFolder(targetPath)
+    await copyAllFiles(sourcePath, targetPath, params)
+  } else if (stats.isFile()) {
+    const templateFileContents = await fsPromises.readFile(sourcePath, {
+      encoding: "utf8",
+    })
+    const formattedTemplateFileContents = formatTemplateFileContents(
+      replacements,
+      templateFileContents
+    )
+    await fsPromises.writeFile(targetPath, formattedTemplateFileContents, {
+      encoding: "utf8",
+    })
+
+    if (params.verbose) {
+      console.log(`Copied: ${sourcePath} -> ${targetPath}`)
+    }
+  }
+}
+
+const copyAllFiles = async (sourcePath, targetPath, params) => {
+  const fileNames = await fsPromises.readdir(sourcePath)
+  const fileCopyPromises = []
+  const replacements = await getReplacements(params)
+  fileNames.forEach((fileName) => {
+    const newFileName = formatTemplateFileContents(replacements, fileName)
+
+    console.log(`Creating: ${targetPath}/${newFileName}`)
+
+    fileCopyPromises.push(
+      copyFile(
+        `${sourcePath}/${fileName}`,
+        `${targetPath}/${newFileName}`,
+        params,
+        replacements
+      )
+    )
+  })
+  await Promise.all(fileCopyPromises)
+}
+
+const generate = async () => {
+  const args = arg({
+    "--help": Boolean,
+    "--name": String,
+    "--components": String,
+    "-n": "--name",
+    "-c": "--components",
+  })
+
+  if (args["--help"]) {
+    printHelp()
+    process.exit(0)
+  }
+
+  if (!args["--name"]) {
+    console.log("Please provide a name for your component.")
+    process.exit(1)
+  }
+
+  const name = args["--name"]
+  const components = args["--components"]
+    ? args["--components"].split(",").map((component) => component.trim())
+    : [name]
+
+  const kebabCaseRegex = /^[a-z]+(-[a-z]+)*$/
+
+  if (![name].concat(components).every((c) => kebabCaseRegex.test(c))) {
+    console.log(
+      "The name and the components have to be in camel case and can only contain [a-z] letters."
+    )
+    console.log("Example: radio-group")
+    process.exit(1)
+  }
+
+  const destinationPath = path.join(process.cwd(), `src/components/${name}`)
+  const templatesPath = path.join(__dirname, "templates")
+
+  if (fs.existsSync(destinationPath)) {
+    console.log(`The component ${name} already exists.`)
+    process.exit(1)
+  }
+
+  await makeFolder(destinationPath)
+
+  const copyPromises = components.map(async (component) =>
+    copyAllFiles(templatesPath, destinationPath, {
+      name: component,
+      Name: upperCamelCase(component),
+      namespace,
+      Namespace,
+    })
+  )
+
+  await Promise.all(copyPromises)
+}
+
+await generate()

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

@@ -0,0 +1,33 @@
+import { html, LitElement } from "lit"
+import { defineElement } from "../../lib/defineElement.js"
+import styles from "./[name].css"
+
+/**
+ * @tagname [namespace]-[name]
+ */
+export class Leu[Name] extends LitElement {
+  static styles = styles
+
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  static properties = {
+    value: { type: String },
+  }
+
+  constructor() {
+    super()
+  }
+
+  render() {
+    return html`
+      <p>Hello ${this.tagName}</p>
+    `
+  }
+}
+
+export function define[Name]Elements() {
+  defineElement("[name]", [Namespace][Name])
+}

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

@@ -0,0 +1,11 @@
+:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  --[name]-font-regular: var(--leu-font-regular);
+  --[name]-font-black: var(--leu-font-black);
+
+  font-family: var(--chip-font-regular);
+}

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

@@ -0,0 +1,3 @@
+import { define[Name]Elements } from "./[Name].js"
+
+define[Name]Elements()

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

@@ -0,0 +1,13 @@
+import { html } from "lit"
+import "../[namespace]-[name].js"
+
+export default {
+  title: "[Name]",
+  component: "[namespace]-[name]",
+}
+
+function Template({}) {
+  return html` <[namespace]-[name] /> `
+}
+
+export const Regular = Template.bind({})

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

@@ -0,0 +1,22 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../[namespace]-[name].js"
+
+async function defaultFixture() {
+  return fixture(html` <[namespace]-[name] /> `)
+}
+
+describe("[Namespace][Name]", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("[namespace]-[name]")
+
+    await expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+})

package/src/components/button/Button.js

@@ -0,0 +1,150 @@
+import { html, nothing, LitElement } from "lit"
+import { classMap } from "lit/directives/class-map.js"
+import { Icon } from "../icon/icon.js"
+import { defineElement } from "../../lib/defineElement.js"
+
+import styles from "./button.css"
+
+/*
+Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=4-1444&mode=design&t=xu5Vii8jXKKCKDez-0
+Live Demo: zh.ch
+*/
+
+const BUTTON_VARIANTS = ["primary", "secondary", "ghost"]
+Object.freeze(BUTTON_VARIANTS)
+export { BUTTON_VARIANTS }
+
+const BUTTON_SIZES = ["normal", "small"]
+Object.freeze(BUTTON_SIZES)
+export { BUTTON_SIZES }
+
+const BUTTON_TYPES = ["button", "submit", "reset"]
+Object.freeze(BUTTON_TYPES)
+export { BUTTON_TYPES }
+
+export const BUTTON_EXPANDED_OPTIONS = ["open", "closed"]
+Object.freeze(BUTTON_EXPANDED_OPTIONS)
+
+/**
+ * @tagname leu-button
+ */
+export class LeuButton extends LitElement {
+  static styles = styles
+
+  /**
+   * @internal
+   */
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  static properties = {
+    label: { type: String },
+    icon: { type: String },
+    iconAfter: { type: String },
+    size: { type: String },
+    variant: { type: String },
+    type: { type: String },
+
+    disabled: { type: Boolean },
+    round: { type: Boolean },
+    active: { type: Boolean },
+    inverted: { type: Boolean },
+    expanded: { type: String },
+    fluid: { type: Boolean },
+  }
+
+  constructor() {
+    super()
+    /** @type {string} */
+    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 {string} */
+    this.size = "normal"
+    /** @type {string} */
+    this.variant = "primary"
+    /** @type {string} */
+    this.type = "button"
+
+    /** @type {boolean} */
+    this.disabled = false
+    /** @type {boolean} - Only taken into account if no Label and an Icon is set */
+    this.round = false
+    /** @type {boolean} */
+    this.active = false
+    /** @type {boolean} - will be used on dark Background */
+    this.inverted = false
+
+    /** @type {boolean} - Alters the shape of the button to be full width of its parent container */
+    this.fluid = false
+
+    /**
+     * Only taken into account if variant is "ghost"
+     * @type {("open" | "closed" | undefined)}
+     */
+    this.expanded = undefined
+  }
+
+  getIconSize() {
+    return this.size === "small" || this.variant === "ghost" ? 16 : 24
+  }
+
+  renderIconBefore() {
+    if (this.icon) {
+      return html`<div class="icon-wrapper icon-wrapper--before">
+        ${Icon(this.icon, this.getIconSize())}
+      </div>`
+    }
+
+    return nothing
+  }
+
+  renderIconAfter() {
+    if (this.iconAfter && this.label && !this.icon) {
+      return html`<div class="icon-wrapper icon-wrapper--after">
+        ${Icon(this.iconAfter, this.getIconSize())}
+      </div>`
+    }
+
+    return nothing
+  }
+
+  renderExpandingIcon() {
+    if (typeof this.expanded !== "undefined" && this.variant === "ghost") {
+      return html`<div class="icon-wrapper icon-wrapper--expanded">
+        ${Icon("angleDropDown", 24)}
+      </div>`
+    }
+
+    return nothing
+  }
+
+  render() {
+    const cssClasses = {
+      icon: !this.label && this.icon && !this.iconAfter,
+      round: !this.label && this.icon && !this.iconAfter && this.round,
+      active: this.active,
+      inverted: this.inverted,
+      [this.variant]: true,
+      [this.size]: true,
+    }
+    return html`
+      <button
+        class=${classMap(cssClasses)}
+        ?disabled=${this.disabled}
+        type=${this.type}
+      >
+        ${this.renderIconBefore()} ${this.label} ${this.renderIconAfter()}
+        ${this.renderExpandingIcon()}
+      </button>
+    `
+  }
+}
+
+export function defineButtonElements() {
+  defineElement("button", LeuButton)
+}

package/src/components/button/button.css

@@ -0,0 +1,232 @@
+:host {
+  display: inline-block;
+}
+
+button {
+  font-family: var(--leu-font-black);
+  text-align: center;
+  appearance: none;
+  transition: background 0.1s ease;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+}
+
+button.round {
+  border-radius: 50%;
+}
+
+button:disabled {
+  cursor: not-allowed;
+}
+
+button:focus-visible {
+  border: 1px solid var(--leu-color-black-0);
+  outline: 2px solid var(--leu-color-func-cyan);
+}
+
+button.inverted:focus-visible {
+  border: 1px solid var(--leu-color-black-100);
+  outline: 2px solid var(--leu-color-black-0);
+}
+
+:host([fluid]) button {
+  width: 100%;
+  justify-content: center;
+}
+
+/* size - normal */
+button.normal {
+  padding: 12px 24px;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+button.normal.icon {
+  padding: 12px;
+}
+
+/* size - small */
+button.small {
+  padding: 6px 24px;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+button.small.icon {
+  padding: 8px;
+}
+
+/* primary */
+button.primary {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-100);
+}
+
+button.primary:hover {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-transp-80);
+}
+
+button.primary.active {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-100);
+}
+
+button.primary:disabled {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-transp-20);
+}
+
+/* secondary */
+button.secondary {
+  color: var(--leu-color-black-transp-60);
+  background: var(--leu-color-black-transp-10);
+}
+
+button.secondary:hover {
+  color: var(--leu-color-black-100);
+  background: var(--leu-color-black-transp-20);
+}
+
+button.secondary.active {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-100);
+}
+
+button.secondary:disabled {
+  color: var(--leu-color-black-transp-20);
+  background: var(--leu-color-black-transp-5);
+}
+
+/* ghost */
+button.ghost {
+  background: transparent;
+  padding: 0 0.5rem;
+  color: var(--leu-color-black-60);
+  font-family: var(--leu-font-regular);
+}
+
+button.ghost:hover {
+  color: var(--leu-color-black-100);
+}
+
+button.ghost.active {
+  color: var(--leu-color-black-100);
+}
+
+button.ghost:disabled {
+  color: var(--leu-color-black-20);
+}
+
+/* primary + inverted */
+button.primary.inverted {
+  color: var(--leu-color-black-100);
+  background: var(--leu-color-black-0);
+}
+
+button.primary.inverted:hover {
+  color: var(--leu-color-black-100);
+  background: var(--leu-color-white-transp-70);
+}
+
+button.primary.inverted.active {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-100);
+}
+
+button.primary.inverted:disabled {
+  color: var(--leu-color-black-40);
+  background: var(--leu-color-white-transp-70);
+}
+
+/* secondary + inverted */
+button.secondary.inverted {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-transp-20);
+}
+
+button.secondary.inverted:hover {
+  color: var(--leu-color-black-0);
+  background: var(--leu-color-black-transp-40);
+}
+
+button.secondary.inverted.active {
+  color: var(--leu-color-black-100);
+  background: var(--leu-color-black-0);
+}
+
+button.secondary.inverted:disabled {
+  color: var(--leu-color-white-transp-70);
+  background: var(--leu-color-black-transp-10);
+}
+
+/* ghost + inverted */
+button.ghost.inverted {
+  color: var(--leu-color-black-0);
+}
+
+button.ghost.inverted:hover {
+  color: var(--leu-color-white-transp-70);
+}
+
+button.ghost.inverted.active {
+  color: var(--leu-color-black-0);
+}
+
+button.ghost.inverted:disabled {
+  color: var(--leu-color-black-20);
+}
+
+/* icon-wrapper */
+.icon-wrapper svg {
+  display: block;
+}
+
+.ghost :is(.icon-wrapper--before, .icon-wrapper--after) {
+  padding: 0.5rem;
+  border-radius: 50%;
+  background: var(--leu-color-black-transp-10);
+}
+
+.ghost.active :is(.icon-wrapper--before, .icon-wrapper--after) {
+  background: var(--leu-color-black-100);
+  color: var(--leu-color-black-0);
+}
+
+.ghost:disabled :is(.icon-wrapper--before, .icon-wrapper--after) {
+  background: var(--leu-color-black-transp-5);
+}
+
+/* inverted */
+
+.ghost.inverted :is(.icon-wrapper--before, .icon-wrapper--after) {
+  background: var(--leu-color-black-transp-20);
+}
+
+.ghost.inverted:hover :is(.icon-wrapper--before, .icon-wrapper--after) {
+  background: var(--leu-color-black-transp-40);
+  color: var(--leu-color-black-0);
+}
+
+.ghost.inverted:disabled :is(.icon-wrapper--before, .icon-wrapper--after) {
+  background: var(--leu-color-black-transp-20);
+  color: var(--leu-color-white-transp-70);
+}
+
+.ghost.active.inverted :is(.icon-wrapper--before, .icon-wrapper--after) {
+  background: var(--leu-color-black-0);
+  color: var(--leu-color-black-100);
+}
+
+/* Expanded icon */
+.icon-wrapper--expanded {
+  transition: transform 0.1s ease;
+}
+
+:host([expanded="open"]) .icon-wrapper--expanded {
+  transform: rotate(180deg);
+}

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

@@ -0,0 +1,3 @@
+import { defineButtonElements } from "./Button.js"
+
+defineButtonElements()