@statistikzh/leu 0.28.0 → 0.28.2

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

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

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

@@ -1,107 +0,0 @@
-import { Meta, StoryObj } from "@storybook/web-components-vite"
-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

@@ -1,42 +0,0 @@
-: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

@@ -1,28 +0,0 @@
-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/components/visually-hidden/VisuallyHidden.ts

@@ -1,16 +0,0 @@
-import { html } from "lit"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-
-import styles from "./visually-hidden.css?inline"
-
-/**
- * @tagname leu-visually-hidden
- */
-export class LeuVisuallyHidden extends LeuElement {
-  static styles = [LeuElement.styles, styles]
-
-  render() {
-    return html`<slot></slot>`
-  }
-}

package/src/components/visually-hidden/leu-visually-hidden.ts

@@ -1,11 +0,0 @@
-import { LeuVisuallyHidden } from "./VisuallyHidden.js"
-
-export { LeuVisuallyHidden }
-
-LeuVisuallyHidden.define("leu-visually-hidden")
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "leu-visually-hidden": LeuVisuallyHidden
-  }
-}

package/src/components/visually-hidden/stories/visually-hidden.stories.ts

@@ -1,22 +0,0 @@
-import { html } from "lit"
-import "../leu-visually-hidden.js"
-
-export default {
-  title: "Components/VisuallyHidden",
-  component: "leu-visually-hidden",
-  argTypes: {
-    content: {
-      control: "text",
-    },
-  },
-}
-
-function Template({ content }) {
-  return html` <leu-visually-hidden>${content}</leu-visually-hidden>`
-}
-
-export const Regular = Template.bind({})
-Regular.args = {
-  content:
-    "This is a text that isn't visible but still accessible for screenreaders.",
-}

package/src/components/visually-hidden/test/visually-hidden.test.ts

@@ -1,34 +0,0 @@
-import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
-
-import "../leu-visually-hidden.js"
-
-async function defaultFixture() {
-  return fixture(html`
-    <leu-visually-hidden>
-      This is a text that shouldn't be visible but still accessible.
-    </leu-visually-hidden>
-  `)
-}
-
-describe("LeuVisuallyHidden", () => {
-  it("is a defined element", async () => {
-    const el = await customElements.get("leu-visually-hidden")
-
-    await expect(el).not.to.be.undefined
-  })
-
-  it("passes the a11y audit", async () => {
-    const el = await defaultFixture()
-
-    await expect(el).to.be.accessible()
-  })
-
-  it("renders the default slot content", async () => {
-    const el = await defaultFixture()
-
-    expect(el).dom.to.equal(
-      "<leu-visually-hidden>This is a text that shouldn't be visible but still accessible.</leu-visually-hidden>",
-    )
-  })
-})

package/src/components/visually-hidden/visually-hidden.css

@@ -1,10 +0,0 @@
-:host {
-  clip: rect(0 0 0 0);
-  border: 0;
-  height: 1px;
-  margin: -1px !important;
-  overflow: hidden;
-  padding: 0 !important;
-  position: absolute;
-  width: 1px;
-}

package/src/docs/contributing.mdx

@@ -1,154 +0,0 @@
-import { Meta, Markdown } from "@storybook/addon-docs/blocks"
-
-<Meta title="Introduction/Contributing" />
-
-# Contributing
-
-Contributing to this project is highly appreciated. We are happy to receive feedback, bug reports, feature requests, and pull requests.
-
-## Web compenents
-
-Leu is entirely built with the lit library and custom elements.
-If you haven't worked with either of them before, [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) has a good introduction to custom elements.
-The [lit documentation](https://lit.dev/docs/) is a good starting point to get to know the library.
-
-## Create a new component
-
-To create a starting point for a new component, run
-
-```bash
-./scripts/generate-component/generate.js
-```
-
-Running it with `--help` will show you all available options.
-
-It creates a basic structure for a new component in the `src/components` directory.
-
-## Linting and formatting
-
-This project uses eslint and prettier to lint and format the code.
-commitlint is also used the enforce conventional commit messages.
-
-To scan the project for linting and formatting errors, run
-
-```bash
-npm run lint
-```
-
-To automatically fix linting and formatting errors, run
-
-```bash
-npm run format
-```
-
-## Testing with Web Test Runner
-
-To execute a single test run:
-
-```bash
-npm run test
-```
-
-To run the tests in interactive watch mode run:
-
-```bash
-npm run test:watch
-```
-
-## Demoing with Storybook
-
-To run a local instance of Storybook for your component, run
-
-```bash
-npm run storybook
-```
-
-## Development guidelines
-
-A few rules are necessary when developing a component library. The following conventions and guidelines should be followed when new features are implemented.
-
-At the same time they're not set in stone. If the there is a good reason to change them open a pull request.
-
-### Naming
-
-Every element or custom property that will be globally available has to be prefixed with `leu`.
-
-```js
-/* Custom elements */
-class LeuRadio extends LeuElement {
-  ...
-}
-
-window.customElements.define("leu-input", LeuInput)
-```
-
-```css
-/* CSS custom property of the theme */
-:root {
-  --leu-color-black-0: #000;
-}
-```
-
-### Scoped styles
-
-All CSS declarations have to live inside a custom element. This way we ensure that the styles won't interfere with the environment they're loaded into.
-Styles that are shared between components should be defined as global custom properties inside the `styles/theme.css`.
-When a global custom property is used inside a component it could be a good practice to assign them to a local custom property with a semantic naming.
-This only make a sense when the component has a certain complexity and the global custom property are used multiple times.
-
-```css
-:host {
-  --radio-color-disabled: var(--leu-color-black-20);
-}
-```
-
-### Value property
-
-All custom elements that contain a value of some sort (like an input or select fields) have to implement a `value` property.
-Everytime the value of the `value` property changes a `input` event has to be dispatched.
-This behaviour matches the way [Observable](https://observablehq.com) handles and observes changes of values that are contained in arbitrary elements. We decided to take over this pattern as it is usable in every other environment too.
-
-### Custom events
-
-Name of custom events have to be prefixed with `leu:`.
-
-```js
-this.dispatchEvent(new Event("leu:select", { bubbles: true, composed: true }))
-```
-
-### Dependencies
-
-We try to use as little non-dev dependencies as possible. The following dependencies are used:
-
-- `lit` is used to build all components.
-- `@floating-ui/dom` is used to position tooltips etc.
-
-### Composability
-
-Components should be composable. This means that it should be possible to use them in combination with other components without any problems.
-It can also make sense to split a component into multiple smaller components.
-
-The `leu-dropdown` element is a good example for this.
-
-```html
-<leu-dropdown label="Download">
-  <leu-menu>
-    <leu-menu-item>PDF</leu-menu-item>
-    <leu-menu-item>CSV</leu-menu-item>
-    <leu-menu-item>Excel</leu-menu-item>
-  </leu-menu>
-</leu-dropdown>
-```
-
-It could've been built as a single element by passing data to a property. The component could then render the menu and the menu items itself inside the shadow dom.
-
-```js
-html`<leu-dropdown
-  label="Download"
-  .items=${["PDF", "CSV", "Excel"]}
-></leu-dropdown>`
-```
-
-But this approach would make it impossible to create and populate the element with only HTML. It also is much harderß to apply event listeners or custom attributes like `role` to specific child elements.
-
-The `leu-table` element is (currently) built like that and shouldn't be used as an example for composability.

package/src/docs/installation.mdx

@@ -1,35 +0,0 @@
-import { Meta, Markdown } from "@storybook/addon-docs/blocks"
-
-<Meta title="Introduction/Installation" />
-
-# Installation
-
-You can load the leu library from a CDN or install it via npm.
-
-## npm installation
-
-For most projects, you will want to install the library via npm.
-
-```bash
-npm i @statistikzh/leu
-```
-
-## CDN
-
-If you are in you're just using plain HTML and JavaScript without any build or transformation steps or just want to tinker around with the library, you can use a CDN.
-Browsers can't resolve bare module imports without import maps. But we can use a CDN like esm.sh to resolve the imports for us.
-This is also applicable in an environment like [Observable](https://observablehq.com).
-
-If you're using this approach, **always** define the version you want to use. This way you can ensure that your application doesn't break when a new version is released.
-
-> ⚠️ Be aware that most CDN (including esm.sh) are probably not GDPR compliant. Don't use this approach in a production environment.
-
-```html
-<link
-  rel="stylesheet"
-  href="https://esm.sh/@statistikzh/leu@0.13.1/dist/theme.css"
-/>
-<script type="module">
-  import "https://esm.sh/@statistikzh/leu@0.13.1/dist/leu-input.js"
-</script>
-```