@statistikzh/leu 0.16.0 → 0.18.0

package/src/components/icon/test/icon.test.ts

@@ -2,16 +2,17 @@ import { html } from "lit"
 import { fixture, expect } from "@open-wc/testing"
 
 import "../leu-icon.js"
+import { IconPathName } from "../paths.js"
 
-async function defaultFixture(name = "close") {
+async function defaultFixture(name: IconPathName | "" = "close") {
   return fixture(html` <leu-icon name=${name}></leu-icon> `)
 }
 
 describe("LeuIcon", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("leu-icon")
+    const el = customElements.get("leu-icon")
 
-    await expect(el).not.to.be.undefined
+    expect(el).not.to.be.undefined
   })
 
   it("passes the a11y audit", async () => {
@@ -30,7 +31,7 @@ describe("LeuIcon", () => {
   })
 
   it("renders the correct icon path", async () => {
-    const el = await defaultFixture("angleDropup")
+    const el = await defaultFixture("angleDropUp")
 
     const path = el.shadowRoot.querySelector("path")
     expect(path).to.have.attribute("d", "M7 14.5L12 9.5L17 14.5H7Z")

package/src/components/tag/Tag.ts

@@ -0,0 +1,28 @@
+import { html } from "lit"
+import { property } from "lit/decorators.js"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
+import styles from "./tag.css"
+
+/**
+ * @tagname leu-tag
+ * @cssprop --leu-tag-accent-color - The color of the tag
+ * @slot default - The label of the tag
+ * @slot icon - An icon to display in the tag
+ */
+export class LeuTag extends LeuElement {
+  static styles = [LeuElement.styles, styles]
+
+  @property({ type: String })
+  variant: "solid" | "outline" | "ghost" = "solid"
+
+  render() {
+    return html`
+      <div class="tag tag--${this.variant}">
+        <slot class="tag__icon" name="icon"></slot>
+        <slot class="tag__label"></slot>
+      </div>
+    `
+  }
+}

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

@@ -0,0 +1,5 @@
+import { LeuTag } from "./Tag.js"
+
+export { LeuTag }
+
+LeuTag.define("leu-tag")

package/src/components/tag/stories/tag.stories.ts

@@ -0,0 +1,107 @@
+import { Meta, StoryObj } from "@storybook/web-components"
+import { html } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
+
+import "../leu-tag.js"
+import "../../icon/leu-icon.js"
+import { LeuTag } from "../Tag.js"
+
+import { paths as iconPaths } from "../../icon/paths.js"
+
+type StoryArgs = LeuTag
+type Story = StoryObj<StoryArgs>
+
+export default {
+  title: "Components/Tag",
+  component: "leu-tag",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=21161-184432&t=QMYWpoD4FMWFrUkK-11",
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["solid", "outline", "ghost"],
+    },
+    "--leu-tag-accent-color": {
+      control: {
+        type: "color",
+        presetColors: [
+          "#0076bd",
+          "#00407c",
+          "#00797b",
+          "#1a7f1f",
+          "#b01657",
+          "#d40053",
+          "#7f3da7",
+          "#666666",
+          "#009ee0",
+          "#d93c1a",
+          "#1a7f1f",
+        ],
+      },
+    },
+    icon: { control: "select", options: Object.keys(iconPaths) },
+  },
+  args: {
+    variant: "solid",
+    icon: "confirm",
+    default: "Abgeschlossen",
+    "--leu-tag-accent-color": "#7f3da7",
+  },
+} satisfies Meta<StoryArgs>
+
+const Template: Story = {
+  render: (args: StoryArgs) =>
+    html` <leu-tag
+      variant=${ifDefined(args.variant)}
+      style="--leu-tag-accent-color: ${args["--leu-tag-accent-color"] ??
+      "unset"}"
+    >
+      ${args.icon
+        ? html`<leu-icon slot="icon" name=${args.icon}></leu-icon>`
+        : ""}
+      ${args.default}</leu-tag
+    >`,
+}
+
+export const Solid = {
+  ...Template,
+  args: {
+    variant: "solid",
+  },
+}
+
+export const Outline = {
+  ...Template,
+  args: {
+    variant: "outline",
+  },
+}
+
+export const Ghost = {
+  ...Template,
+  args: {
+    variant: "ghost",
+  },
+}
+
+export const Warning = {
+  ...Template,
+  args: {
+    variant: "solid",
+    "--leu-tag-accent-color": "#d93c1a",
+    default: "Abgelaufen",
+  },
+}
+
+export const NoIcon = {
+  ...Template,
+  args: {
+    variant: "solid",
+    "--leu-tag-accent-color": "#7f3da7",
+    icon: undefined,
+  },
+}

package/src/components/tag/tag.css

@@ -0,0 +1,42 @@
+:host {
+  /* --tag-font-regular: var(--leu-font-family-regular);
+  --tag-font-black: var(--leu-font-family-black);
+
+  font-family: var(--tag-font-regular); */
+}
+
+.tag {
+  --_accent-color: var(--leu-tag-accent-color, var(--leu-color-black-60));
+
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  gap: 0.25rem;
+  border-radius: 0.25rem;
+
+  background-color: var(--_accent-color);
+  border: 2px solid var(--_accent-color);
+  color: var(--leu-color-black-0);
+}
+
+.tag--outline {
+  background-color: transparent;
+  border-color: var(--_accent-color);
+  color: var(--_accent-color);
+}
+
+.tag--ghost {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--_accent-color);
+}
+
+.tag__icon {
+  --leu-icon-size: 1rem;
+}
+
+.tag__label {
+  display: block;
+  font: var(--leu-t-tiny-regular-font);
+  line-height: 1rem;
+}

package/src/components/tag/test/tag.test.ts

@@ -0,0 +1,28 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-tag.js"
+
+async function defaultFixture() {
+  return fixture(html`<leu-tag>Abgeschlossen</leu-tag>`)
+}
+
+describe("LeuTag", () => {
+  it("is a defined element", async () => {
+    const el = customElements.get("leu-tag")
+
+    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 with default slot content", async () => {
+    const el = await defaultFixture()
+
+    expect(el).to.have.trimmed.text("Abgeschlossen")
+  })
+})

package/src/docs/theme.mdx

@@ -59,6 +59,7 @@ This is helpful if you want to use the it to style your application or to build
 ## Table of Contents
 
 - [Design System](#design-system)
+- [Quick start](#quick-start)
 - [Structure of the file](#structure-of-the-file)
 - [Custom property naming](#custom-property-naming)
 - [Colors](#colors)
@@ -75,6 +76,50 @@ The theme is based on the official [design system](https://www.zh.ch/de/webangeb
 Currently there is no automatic workflow that generates the theme from the design system. The theme is manually updated when the design system changes.
 If you spot any inconsistencies between the theme and the design system, please open an issue.
 
+## Quick start
+
+The following css snippet is a good starting point when you want to use the theme to style your application.
+Details about the specific definitions can be found in the content below.
+
+```css
+html {
+  font-family: var(--leu-font-family-regular);
+  font-feature-settings: var(--leu-t-font-feature-settings);
+
+  /* Prevent browser from synthesizing font weights */
+  font-synthesis-weight: none;
+}
+
+strong {
+  font-family: var(--leu-font-family-black);
+}
+
+/* Heading style mapping. Use whatever selector make sense in your project. */
+h1 {
+  font: var(--leu-t-curve-huge-black-font);
+}
+
+h2 {
+  font: var(--leu-t-curve-large-black-font);
+}
+
+h3 {
+  font: var(--leu-t-curve-medium-black-font);
+}
+
+h4 {
+  font: var(--leu-t-curve-regular-black-font);
+}
+
+/*
+ * Prevent "Flash of Unstyled Custom Elements" (FOUCE)
+ * https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements
+ */
+:not(:defined) {
+  visibility: hidden;
+}
+```
+
 ## Structure of the file
 
 The theme contains custom properties for:
@@ -175,6 +220,8 @@ box-shadow: var(--leu-box-shadow-short);
 
 ## z-index
 
+TODO
+
 ## Typography
 
 The design system is based on the [Inter](https://rsms.me/inter/) font family. It just uses the `regular` and `black` weights.
@@ -306,9 +353,9 @@ h1 {
 
 As the theme only consist of custom properties, it isn't possible to provide a full set of grid classes.
 Instead the theme contains just five necessary values that can be applied directly.
+This approach helps us to keep the css footprint as small as possible.
 Most components don't need a grid anyway and those who do mostly have a very simple configuration.
-Alternatively you can use to build your own classes for your application.
-This aproach helps us to keep the css footprint small.
+Alternatively you can use the variables to build your own classes. You can find a possible implementation in this [GitHub Gist](https://gist.github.com/daenub/735d657cc0bf297e9a7d2015f003084c).
 
 The official design system uses a 6 columns system on smaller screens.
 For simplicity we use a 12 column grid for all breakpoints.