@statistikzh/leu 0.9.0 → 0.10.0

package/src/components/dialog/test/dialog.test.js

@@ -0,0 +1,85 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-dialog.js"
+
+async function defaultFixture() {
+  return fixture(
+    html`<leu-dialog label="Title" sublabel="Category">
+      This is the content of the dialog.
+    </leu-dialog>`
+  )
+}
+
+describe("LeuDialog", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("leu-dialog")
+
+    expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("passes the a11y audit when the modal is open", async () => {
+    const el = await defaultFixture()
+
+    el.show()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("opens the dialog when calling show()", async () => {
+    const el = await defaultFixture()
+
+    el.show()
+
+    const dialog = el.shadowRoot.querySelector("dialog")
+
+    expect(dialog.open).to.be.true
+  })
+
+  it("closes the dialog when calling close()", async () => {
+    const el = await defaultFixture()
+
+    el.show()
+    el.close()
+
+    const dialog = el.shadowRoot.querySelector("dialog")
+
+    expect(dialog.open).to.be.false
+  })
+
+  it("renders a label and a sublabel", async () => {
+    const el = await defaultFixture()
+
+    const label = el.shadowRoot.querySelector("h1")
+    const sublabel = el.shadowRoot.querySelector(".subtitle")
+
+    expect(label).to.have.text("Title")
+    expect(sublabel).to.have.text("Category")
+  })
+
+  it("renders a close button", async () => {
+    const el = await defaultFixture()
+
+    const closeButton = el.shadowRoot.querySelector(".close-button")
+
+    expect(closeButton).to.exist
+  })
+
+  it("closes the dialog when clicking the close button", async () => {
+    const el = await defaultFixture()
+    const dialog = el.shadowRoot.querySelector("dialog")
+
+    el.show()
+
+    const closeButton = el.shadowRoot.querySelector(".close-button")
+    expect(dialog.open).to.be.true
+    closeButton.click()
+    expect(dialog.open).to.be.false
+  })
+})

package/src/components/input/input.css

@@ -54,6 +54,7 @@
 
   border: var(--input-border-width) solid var(--input-border-color);
   border-radius: 2px;
+  background: var(--leu-color-black-0);
 
   line-height: 1;
 }
@@ -79,6 +80,7 @@
   color: var(--input-color);
 
   border: 0;
+  background: var(--leu-color-black-0);
 
   padding-block: 2rem 1rem;
 }

package/src/styles/custom-properties.css

@@ -59,4 +59,31 @@
   --leu-z-index-popup: 100;
 
   @leu-font-styles './font-definitions.json';
+  --leu-t-font-feature-settings: "ss07", "ss08", "cv03", "cv04", "cv10";
+
+  /*
+   * Grid system
+   *
+   * The design system uses a 6 columns system on smaller screens.
+   * For simplicity we use a 12 column grid for all breakpoints (zh web implementation does the same).
+   *
+   * The goal is to keep the css footprint small
+   * by not generating all classes for every cell width for every breakpoint.
+   * Most components don't need a grid and those who do probably have a very simple configuration.
+   * If we have enough use cases for a more complex grid system we can add it later.
+   */
+  --leu-grid-gap: 1rem;
+  --leu-grid-template-columns: repeat(12, minmax(0, 4.25rem));
+  --leu-grid-max-width: 73rem;
+
+  --leu-grid-columns-full: 1 / -1;
+  --leu-grid-columns-offset: 1 / -1;
+
+  @media (--viewport-regular) {
+    --leu-grid-columns-offset: 3 / -1;
+  }
+
+  @media (--viewport-medium) {
+    --leu-grid-gap: 2rem;
+  }
 }

package/src/styles/font-definitions.json

@@ -47,14 +47,14 @@
       "fontWeight": "regular",
       "lineHeight": 1.5,
       "spacing": "13px",
-      "name": "biggerRegular"
+      "name": "bigger-regular"
     },
     {
       "fontSize": "18px",
       "fontWeight": "black",
       "lineHeight": 1.3,
       "spacing": "12px",
-      "name": "biggerRegular"
+      "name": "bigger-regular"
     },
     {
       "fontSize": "20px",
@@ -89,7 +89,7 @@
       "fontWeight": "black",
       "lineHeight": 1.2,
       "spacing": "17px",
-      "name": "smallBig"
+      "name": "small-big"
     },
     {
       "fontSize": "32px",
@@ -103,14 +103,14 @@
       "fontWeight": "black",
       "lineHeight": 1.2,
       "spacing": "24px",
-      "name": "biggerBig"
+      "name": "bigger-big"
     },
     {
       "fontSize": "48px",
       "fontWeight": "black",
       "lineHeight": 1,
       "spacing": "24px",
-      "name": "smallHuge"
+      "name": "small-huge"
     },
     {
       "fontSize": "56px",
@@ -130,6 +130,7 @@
   "curves": [
     {
       "name": "tiny",
+      "weights": ["regular", "black"],
       "steps": [
         [null, "tiny"],
         ["--viewport-regular", "small"]
@@ -137,63 +138,70 @@
     },
     {
       "name": "small",
+      "weights": ["regular", "black"],
       "steps": [
         [null, "small"],
         ["--viewport-regular", "regular"],
-        ["--viewport-large", "biggerRegular"]
+        ["--viewport-large", "bigger-regular"]
       ]
     },
     {
       "name": "regular",
+      "weights": ["regular", "black"],
       "steps": [
         [null, "regular"],
-        ["--viewport-small", "biggerRegular"],
+        ["--viewport-small", "bigger-regular"],
         ["--viewport-xlarge", "medium"]
       ]
     },
     {
-      "name": "biggerRegular",
+      "name": "bigger-regular",
+      "weights": ["regular", "black"],
       "steps": [
-        [null, "biggerRegular"],
+        [null, "bigger-regular"],
         ["--viewport-regular", "medium"],
         ["--viewport-xlarge", "large"]
       ]
     },
     {
       "name": "medium",
+      "weights": ["black"],
       "steps": [
-        [null, "biggerRegular"],
+        [null, "bigger-regular"],
         ["--viewport-small", "medium"],
         ["--viewport-large", "large"],
-        ["--viewport-xlarge", "smallBig"]
+        ["--viewport-xlarge", "small-big"]
       ]
     },
     {
       "name": "large",
+      "weights": ["black"],
       "steps": [
-        [null, "biggerRegular"],
+        [null, "bigger-regular"],
         ["--viewport-regular", "large"],
-        ["--viewport-large", "smallBig"],
+        ["--viewport-large", "small-big"],
         ["--viewport-xlarge", "big"]
       ]
     },
     {
       "name": "big",
+      "weights": ["black"],
       "steps": [
         [null, "large"],
-        ["--viewport-regular", "smallBig"],
+        ["--viewport-regular", "small-big"],
         ["--viewport-medium", "big"],
-        ["--viewport-large", "biggerBig"],
-        ["--viewport-xlarge", "smallHuge"]
+        ["--viewport-large", "bigger-big"],
+        ["--viewport-xlarge", "small-huge"]
       ]
     },
     {
       "name": "huge",
+      "weights": ["black"],
       "steps": [
-        [null, "smallBig"],
+        [null, "small-big"],
         ["--viewport-small", "big"],
-        ["--viewport-regular", "biggerBig"],
-        ["--viewport-medium", "smallHuge"],
+        ["--viewport-regular", "bigger-big"],
+        ["--viewport-medium", "small-huge"],
         ["--viewport-large", "huge"],
         ["--viewport-xlarge", "giant"]
       ]

package/src/styles/style.stories.js

@@ -0,0 +1,61 @@
+import { html } from "lit"
+
+export default {
+  title: "Layout",
+}
+
+function Template() {
+  return html` <style>
+      .container {
+        display: grid;
+        grid-template-columns: var(--leu-grid-template-columns);
+        gap: var(--leu-grid-gap);
+        max-width: var(--leu-grid-max-width);
+
+        margin: 0 auto;
+        padding: 1rem;
+
+        background-color: var(--leu-color-black-5);
+        font-family: var(--leu-font-family-regular);
+      }
+
+      .container div {
+        background-color: var(--leu-color-black-transp-5);
+        padding: 1rem;
+      }
+    </style>
+    <div class="container">
+      <div style="grid-column-end: span 12;">
+        <p>
+          This story demonstrates the use of the predefined grid custom
+          properties. It is not a component that can be reused.
+        </p>
+      </div>
+      <div style="grid-column: var(--leu-grid-columns-full)">
+        <pre>--leu-grid-columns-full</pre>
+        <p>A preset to use the full width of the grid</p>
+      </div>
+      <div style="grid-column: var(--leu-grid-columns-offset)">
+        <pre>--leu-grid-columns-offset</pre>
+        <p>
+          A preset that indents the content by two columns starting at the
+          regular breakpoint. On smaller breakpoints it will use the full width.
+        </p>
+      </div>
+
+      ${[
+        [2, 2, 2, 2, 2, 2],
+        [3, 3, 3, 3],
+        [4, 4, 4],
+        [6, 6],
+      ]
+        .flat()
+        .map(
+          (columns) =>
+            html`<div style="grid-column-end: span ${columns}">${columns}</div>`
+        )}
+    </div>`
+}
+
+export const Regular = Template.bind({})
+Regular.args = {}

package/dist/Button-5a8009c5.d.ts

@@ -1,83 +0,0 @@
-/**
- * A reactive controller that determines when slots exist.
- */
-export type ReactiveController = import("lit").ReactiveController;
-declare const BUTTON_VARIANTS: string[];
-/**
- * Thanks Shoelace!
- * Source: https://github.com/shoelace-style/shoelace/blob/next/src/internal/slot.ts
- */
-/**
- * A reactive controller that determines when slots exist.
- * @typedef {import("lit").ReactiveController} ReactiveController
- * @implements {ReactiveController}
- */
-declare class HasSlotController implements ReactiveController {
-    constructor(host: any, slotNames: any);
-    host: any;
-    slotNames: any;
-    /**
-     * @private
-     * @returns {Boolean}
-     */
-    private hasDefaultSlot;
-    /**
-     * @private
-     * @param {String} name
-     * @returns {Boolean}
-     */
-    private hasNamedSlot;
-    /**
-     * @param {String} slotName
-     * @returns {Boolean}
-     */
-    test(slotName: string): boolean;
-    hostConnected(): void;
-    hostDisconnected(): void;
-}
-/**
- * @tagname leu-button
- * @slot before - The icon to display before the label
- * @slot after - The icon to display after the label
- * @slot - The label of the button or the icon if no label is set
- */
-declare class LeuButton extends LeuElement {
-    label: any;
-    /** @type {string} */
-    size: string;
-    /** @type {string} */
-    variant: string;
-    /** @type {"button" | "submit" | "reset"} */
-    type: "button" | "submit" | "reset";
-    /** @type {string} */
-    componentRole: string;
-    /** @type {boolean} */
-    disabled: boolean;
-    /** @type {boolean} - Only taken into account if no Label and an Icon is set */
-    round: boolean;
-    /** @type {boolean} */
-    active: boolean;
-    /** @type {boolean} - will be used on dark Background */
-    inverted: boolean;
-    /** @type {boolean} - Alters the shape of the button to be full width of its parent container */
-    fluid: boolean;
-    /**
-     * Only taken into account if variant is "ghost"
-     * @type {("true" | "false" | undefined)}
-     */
-    expanded: ("true" | "false" | undefined);
-    renderExpandingIcon(): import("lit-html").TemplateResult<1> | typeof nothing;
-    getAriaAttributes(): {
-        role: string;
-        label: any;
-    };
-    hasTextContent(): boolean;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare const BUTTON_SIZES: string[];
-declare const BUTTON_TYPES: string[];
-declare const BUTTON_EXPANDED_OPTIONS: string[];
-import { L as LeuElement } from './LeuElement-7ab5ef5e.js';
-import { nothing } from 'lit';
-export { BUTTON_VARIANTS as B, HasSlotController as H, LeuButton as L, BUTTON_SIZES as a, BUTTON_TYPES as b, BUTTON_EXPANDED_OPTIONS as c };
-//# sourceMappingURL=Button-5a8009c5.d.ts.map

package/dist/Button-5a8009c5.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button-5a8009c5.d.ts","sourceRoot":"","sources":["Button-5a8009c5.js"],"names":[],"mappings":";;;iCAaa,OAAO,KAAK,EAAE,kBAAkB;AAwW7C,wCAA0D;AA/W1D;;;GAGG;AAEH;;;;GAIG;AACH;IACE,uCAcC;IAHC,UAAgB;IAEhB,eAA0B;IAG5B;;;OAGG;IACH,uBAeC;IAED;;;;OAIG;IACH,qBAEC;IAED;;;OAGG;IACH,gCAEC;IACD,sBAEC;IACD,yBAEC;CACF;AAkTD;;;;;GAKG;AACH;IAQI,WAAiB;IACjB,qBAAqB;IACrB,MADW,MAAM,CACI;IACrB,qBAAqB;IACrB,SADW,MAAM,CACO;IACxB,4CAA4C;IAC5C,MADW,QAAQ,GAAG,QAAQ,GAAG,OAAO,CACpB;IAEpB,qBAAqB;IACrB,eADW,MAAM,CACa;IAE9B,sBAAsB;IACtB,UADW,OAAO,CACG;IACrB,+EAA+E;IAC/E,OADW,OAAO,CACA;IAClB,sBAAsB;IACtB,QADW,OAAO,CACC;IACnB,wDAAwD;IACxD,UADW,OAAO,CACG;IAErB,gGAAgG;IAChG,OADW,OAAO,CACA;IAElB;;;OAGG;IACH,UAFU,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAEf;IAE3B,6EAOC;IACD;;;MAaC;IACD,0BAEC;IACD,+CAiCC;CACF;AA7GD,qCAA0C;AAE1C,qCAAmD;AAEnD,gDAAkD;gCA3XI,0BAA0B;wBAC7C,KAAK"}