@statistikzh/leu 0.3.0 → 0.5.0

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

@@ -0,0 +1,35 @@
+/**
+ * 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 debounce(func, timeout = 500) {
+  let timer = null
+  return (...args) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      func.apply(this, args)
+    }, timeout)
+  }
+}
+
+/**
+ * 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
+  }
+}

package/{web-dev-server-storybook.config.mjs → web-dev-server.config.mjs}

@@ -1,6 +1,5 @@
 import { fromRollup } from "@web/dev-server-rollup"
 import rollupJson from "@rollup/plugin-json"
-import { storybookPlugin } from "@web/dev-server-storybook"
 
 import { plugins as rollupPlugins } from "./rollup.config.js"
 
@@ -15,5 +14,5 @@ export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
     "**/custom-elements.json": "js",
     "src/components/**/*.css": "js",
   },
-  plugins: [storybookPlugin({ type: "web-components" }), ...plugins, json()],
+  plugins: [...plugins, json()],
 })

package/web-test-runner.config.mjs

@@ -1,12 +1,12 @@
 import { playwrightLauncher } from "@web/test-runner-playwright"
-import { plugins as devServerPlugins } from "./web-dev-server-storybook.config.mjs"
+import { plugins as wdsPlugins } from "./web-dev-server.config.mjs"
 
 const filteredLogs = ["Running in dev mode", "lit-html is in dev mode"]
 
 export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   /** Test files to run */
   files: "src/components/**/*.test.js",
-  plugins: devServerPlugins,
+  plugins: wdsPlugins,
   mimeTypes: {
     "src/components/**/*.css": "js",
   },
@@ -45,5 +45,18 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
     // playwrightLauncher({ product: "webkit" }),
   ],
 
+  testRunnerHtml: (testFramework) =>
+    `<html>
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="dist/theme.css" />
+        <link rel="stylesheet" href="https://www.web.statistik.zh.ch/leu/styles/fonts.css" />
+      </head>
+      <body>
+        <script type="module" src="${testFramework}"></script>
+      </body>
+    </html>`,
+
   // See documentation for all available options
 })

package/dist/index.js

@@ -1,26 +0,0 @@
-export { BUTTON_EXPANDED_OPTIONS, BUTTON_SIZES, BUTTON_TYPES, BUTTON_VARIANTS, LeuButton, defineButtonElements } from './Button.js';
-export { LeuButtonGroup, defineButtonGroupElements } from './ButtonGroup.js';
-export { LeuCheckbox, defineCheckboxElements } from './Checkbox.js';
-export { LeuCheckboxGroup, defineCheckboxGroupElements } from './CheckboxGroup.js';
-export { LeuChipGroup, defineChipGroupElements } from './ChipGroup.js';
-export { LeuChipLink, defineChipLinkElements } from './ChipLink.js';
-export { LeuChipRemovable, defineChipRemovableElements } from './ChipRemovable.js';
-export { LeuChipSelectable, defineChipSelectableElements } from './ChipSelectable.js';
-export { LeuDropdown, defineDropdownElements } from './Dropdown.js';
-export { LeuInput, SIZE_TYPES, defineInputElements } from './Input.js';
-export { LeuMenu, defineMenuElements } from './Menu.js';
-export { LeuMenuItem, defineMenuItemElements } from './MenuItem.js';
-export { LeuPagination, definePaginationElements } from './Pagination.js';
-export { LeuRadio, defineRadioElements } from './Radio.js';
-export { LeuRadioGroup, defineRadioGroupElements } from './RadioGroup.js';
-export { LeuSelect, defineSelectElements } from './Select.js';
-export { LeuTable, defineTableElements } from './Table.js';
-import './defineElement-ba770aed.js';
-import 'lit';
-import 'lit/directives/class-map.js';
-import './icon-03e86700.js';
-import './Chip-5f70d04f.js';
-import 'lit/directives/if-defined.js';
-import 'lit/directives/ref.js';
-import 'lit/directives/map.js';
-import 'lit/directives/style-map.js';