@statistikzh/leu 0.4.0 → 0.5.0

package/src/components/table/table.css

@@ -28,7 +28,7 @@ table {
   border-spacing: 0;
   color: rgb(0 0 0 / 60%);
   font-size: 16px;
-  font-family: var(--leu-font-regular);
+  font-family: var(--leu-font-family-regular);
   line-height: 1.5;
 }
 
@@ -41,7 +41,7 @@ th {
   text-align: left;
   font-size: 12px;
   font-weight: normal;
-  font-family: var(--leu-font-black);
+  font-family: var(--leu-font-family-black);
   background: var(--table-even-row-bg);
 }
 

package/src/components/visually-hidden/VisuallyHidden.js

@@ -0,0 +1,13 @@
+import { html, LitElement } from "lit"
+import styles from "./visually-hidden.css"
+
+/**
+ * @tagname leu-visually-hidden
+ */
+export class LeuVisuallyHidden extends LitElement {
+  static styles = styles
+
+  render() {
+    return html`<slot></slot>`
+  }
+}

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

@@ -0,0 +1,6 @@
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuVisuallyHidden } from "./VisuallyHidden.js"
+
+export { LeuVisuallyHidden }
+
+defineElement("visually-hidden", LeuVisuallyHidden)

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

@@ -0,0 +1,22 @@
+import { html } from "lit"
+import "../leu-visually-hidden.js"
+
+export default {
+  title: "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.js

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

@@ -0,0 +1,10 @@
+: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/lib/defineElement.js

@@ -2,7 +2,7 @@
  * Adds a definition for a custom element to the custom element
  * registry if it isn't defined before. Prefixes the name with `leu-`.
  * @param {string} name
- * @param {HTMLElement} constructor
+ * @param {CustomElementConstructor} constructor
  */
 export function defineElement(name, constructor) {
   if (!customElements.get(`leu-${name}`)) {

package/src/lib/hasSlotController.js

@@ -5,7 +5,8 @@
 
 /**
  * A reactive controller that determines when slots exist.
- * @implements { import("lit").ReactiveController }
+ * @typedef {import("lit").ReactiveController} ReactiveController
+ * @implements {ReactiveController}
  */
 export class HasSlotController {
   constructor(host, slotNames) {
@@ -76,8 +77,9 @@ export class HasSlotController {
     const slot = event.target
 
     if (
-      (this.slotNames.includes("[default]") && !slot.name) ||
-      (slot.name && this.slotNames.includes(slot.name))
+      slot instanceof HTMLSlotElement &&
+      ((this.slotNames.includes("[default]") && !slot.name) ||
+        (slot.name && this.slotNames.includes(slot.name)))
     ) {
       this.host.requestUpdate()
     }

package/src/lib/utils.js

@@ -1,10 +1,10 @@
 /**
- * Wrap a Function to nsure that time-consuming tasks do not fire so often
+ * Return a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked.
  * @param {Function} func - Your function
  * @param {Number} timeout - Default is 500 ms
  * @returns {Function} - Your function wrapped in a timeout function
  */
-const debounce = function (func, timeout = 500) {
+const debounce = function debounce(func, timeout = 500) {
   let timer = null
   return (...args) => {
     clearTimeout(timer)
@@ -14,4 +14,22 @@ const debounce = function (func, timeout = 500) {
   }
 }
 
-export { debounce }
+/**
+ * Return a throttled function that only invokes func at most once per every wait milliseconds.
+ * @param {Function} func - Your function
+ * @param {Number} timeout - Default is 500 ms
+ * @returns {Function} - Your function wrapped in a timeout function
+ */
+const throttle = function throttle(func, timeout = 500) {
+  let timer = null
+  return (...args) => {
+    if (timer === null) {
+      func(...args)
+      timer = setTimeout(() => {
+        timer = null
+      }, timeout)
+    }
+  }
+}
+
+export { debounce, throttle }

package/src/styles/custom-properties.css

@@ -1,3 +1,5 @@
+@import url("./custom-media.css");
+
 :root {
   --leu-color-black-100: #000;
   --leu-color-black-80: #333;
@@ -42,10 +44,12 @@
   --leu-color-func-red: #d93c1a;
   --leu-color-func-green: #1a7f1f;
 
-  --leu-font-regular: HelveticaNowRegular, Helvetica, sans-serif; /* stylelint-disable-line value-keyword-case */
-  --leu-font-black: HelveticaNowBlack, Arial Black, Helvetica, sans-serif; /* stylelint-disable-line value-keyword-case */
+  --leu-font-family-regular: HelveticaNowRegular, Helvetica, sans-serif; /* stylelint-disable-line value-keyword-case */
+  --leu-font-family-black: HelveticaNowBlack, Arial Black, Helvetica, sans-serif; /* stylelint-disable-line value-keyword-case */
 
   --leu-box-shadow-short: 0px 0px 2px var(--leu-color-black-transp-40);
   --leu-box-shadow-regular: 0px 0px 16px var(--leu-color-black-transp-20);
   --leu-box-shadow-long: 0px 0px 80px var(--leu-color-black-transp-20);
+
+  @leu-font-styles './font-definitions.json';
 }

package/src/styles/font-definitions.json

@@ -0,0 +1,202 @@
+{
+  "definitions": [
+    {
+      "fontSize": "12px",
+      "fontWeight": "regular",
+      "lineHeight": 1.5,
+      "spacing": "9px",
+      "name": "tiny"
+    },
+    {
+      "fontSize": "12px",
+      "fontWeight": "black",
+      "lineHeight": 1.5,
+      "spacing": "9px",
+      "name": "tiny"
+    },
+    {
+      "fontSize": "14px",
+      "fontWeight": "regular",
+      "lineHeight": 1.4,
+      "spacing": "10px",
+      "name": "small"
+    },
+    {
+      "fontSize": "14px",
+      "fontWeight": "black",
+      "lineHeight": 1.4,
+      "spacing": "10px",
+      "name": "small"
+    },
+    {
+      "fontSize": "16px",
+      "fontWeight": "regular",
+      "lineHeight": 1.5,
+      "spacing": "12px",
+      "name": "regular"
+    },
+    {
+      "fontSize": "16px",
+      "fontWeight": "black",
+      "lineHeight": 1.5,
+      "spacing": "12px",
+      "name": "regular"
+    },
+    {
+      "fontSize": "18px",
+      "fontWeight": "regular",
+      "lineHeight": 1.5,
+      "spacing": "13px",
+      "name": "biggerRegular"
+    },
+    {
+      "fontSize": "18px",
+      "fontWeight": "black",
+      "lineHeight": 1.3,
+      "spacing": "12px",
+      "name": "biggerRegular"
+    },
+    {
+      "fontSize": "20px",
+      "fontWeight": "regular",
+      "lineHeight": 1.5,
+      "spacing": "15px",
+      "name": "medium"
+    },
+    {
+      "fontSize": "20px",
+      "fontWeight": "black",
+      "lineHeight": 1.3,
+      "spacing": "13px",
+      "name": "medium"
+    },
+    {
+      "fontSize": "24px",
+      "fontWeight": "regular",
+      "lineHeight": 1.5,
+      "spacing": "18px",
+      "name": "large"
+    },
+    {
+      "fontSize": "24px",
+      "fontWeight": "black",
+      "lineHeight": 1.3,
+      "spacing": "15px",
+      "name": "large"
+    },
+    {
+      "fontSize": "28px",
+      "fontWeight": "black",
+      "lineHeight": 1.2,
+      "spacing": "17px",
+      "name": "smallBig"
+    },
+    {
+      "fontSize": "32px",
+      "fontWeight": "black",
+      "lineHeight": 1.2,
+      "spacing": "19px",
+      "name": "big"
+    },
+    {
+      "fontSize": "40px",
+      "fontWeight": "black",
+      "lineHeight": 1.2,
+      "spacing": "24px",
+      "name": "biggerBig"
+    },
+    {
+      "fontSize": "48px",
+      "fontWeight": "black",
+      "lineHeight": 1,
+      "spacing": "24px",
+      "name": "smallHuge"
+    },
+    {
+      "fontSize": "56px",
+      "fontWeight": "black",
+      "lineHeight": 1,
+      "spacing": "28px",
+      "name": "huge"
+    },
+    {
+      "fontSize": "72px",
+      "fontWeight": "black",
+      "lineHeight": 1,
+      "spacing": "36px",
+      "name": "giant"
+    }
+  ],
+  "curves": [
+    {
+      "name": "tiny",
+      "steps": [
+        [null, "tiny"],
+        ["--viewport-regular", "small"]
+      ]
+    },
+    {
+      "name": "small",
+      "steps": [
+        [null, "small"],
+        ["--viewport-regular", "regular"],
+        ["--viewport-large", "biggerRegular"]
+      ]
+    },
+    {
+      "name": "regular",
+      "steps": [
+        [null, "regular"],
+        ["--viewport-small", "biggerRegular"],
+        ["--viewport-xlarge", "medium"]
+      ]
+    },
+    {
+      "name": "biggerRegular",
+      "steps": [
+        [null, "biggerRegular"],
+        ["--viewport-regular", "medium"],
+        ["--viewport-xlarge", "large"]
+      ]
+    },
+    {
+      "name": "medium",
+      "steps": [
+        [null, "biggerRegular"],
+        ["--viewport-small", "medium"],
+        ["--viewport-large", "large"],
+        ["--viewport-xlarge", "smallBig"]
+      ]
+    },
+    {
+      "name": "large",
+      "steps": [
+        [null, "biggerRegular"],
+        ["--viewport-regular", "large"],
+        ["--viewport-large", "smallBig"],
+        ["--viewport-xlarge", "big"]
+      ]
+    },
+    {
+      "name": "big",
+      "steps": [
+        [null, "large"],
+        ["--viewport-regular", "smallBig"],
+        ["--viewport-medium", "big"],
+        ["--viewport-large", "biggerBig"],
+        ["--viewport-xlarge", "smallHuge"]
+      ]
+    },
+    {
+      "name": "huge",
+      "steps": [
+        [null, "smallBig"],
+        ["--viewport-small", "big"],
+        ["--viewport-regular", "biggerBig"],
+        ["--viewport-medium", "smallHuge"],
+        ["--viewport-large", "huge"],
+        ["--viewport-xlarge", "giant"]
+      ]
+    }
+  ]
+}

package/stylelint.config.mjs

@@ -1,3 +1,4 @@
+/** @type {import('stylelint').Config} */
 export default {
   extends: "stylelint-config-standard",
   overrides: [
@@ -16,6 +17,7 @@ export default {
     // Allowing kebab-case and BEM
     "selector-class-pattern":
       "^[a-z]([-]?[a-z0-9]+)*(__[a-z0-9]([-]?[a-z0-9]+)*)?(--[a-z0-9]([-]?[a-z0-9]+)*)?$",
+    "at-rule-no-unknown": [true, { ignoreAtRules: ["leu-font-styles"] }],
   },
   ignoreFiles: ["scripts/generate-component/templates/**/*"],
 }

package/tsconfig.build.json

@@ -0,0 +1,21 @@
+{
+  "include": ["dist/**/*.js"],
+  "exclude": ["node_modules", "dist/**/*.d.ts"],
+  "compilerOptions": {
+    // Tells TypeScript to read JS files, as
+    // normally they are ignored as source files
+    "allowJs": true,
+    // Generate d.ts files
+    "declaration": true,
+    // This compiler run should
+    // only output d.ts files
+    "emitDeclarationOnly": true,
+    // Types should go into this directory.
+    // Removing this would place the .d.ts files
+    // next to the .js files
+    "outDir": "dist",
+    // go to js file when using IDE functions like
+    // "Go to Definition" in VSCode
+    "declarationMap": true
+  }
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "include": ["src/**/*.js"],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*.d.ts",
+    "**/*.stories.js",
+    "**/*.test.js",
+    "**/*.css"
+  ],
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "noEmit": true
+  }
+}