@statistikzh/leu 0.3.0 → 0.4.0

package/src/components/table/stories/table.stories.js

@@ -4,15 +4,17 @@ import "../leu-table.js"
 export default {
   title: "Table",
   component: "leu-table",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=316-2445&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
-function Template({ itemsOnAPage }) {
+function Template({ itemsPerPage }) {
   return html`
-    <leu-table
-      id="table"
-      itemsOnAPage=${itemsOnAPage}
-      style="max-width:500px;"
-    ></leu-table>
+    <leu-table id="table" itemsPerPage=${itemsPerPage}></leu-table>
     <script>
       {
         const table = document.querySelector("leu-table[id=table]")
@@ -39,7 +41,10 @@ function Template({ itemsOnAPage }) {
             value: (row) => row.menge,
             style: (row) => {
               return {
-                color: row.menge > 10 ? "green" : "red",
+                color:
+                  row.menge > 10
+                    ? "var(--leu-color-func-green)"
+                    : "var(--leu-color-func-red)",
               }
             },
             sort: {
@@ -96,7 +101,7 @@ function Template({ itemsOnAPage }) {
 
 export const Regular = Template.bind({})
 Regular.argTypes = {
-  itemsOnAPage: { type: "number" },
+  itemsPerPage: { type: "number" },
   columns: { table: { disable: true } },
   data: { table: { disable: true } },
   _columns: { table: { disable: true } },
@@ -108,9 +113,14 @@ Regular.argTypes = {
   _sortArrowDown: { table: { disable: true } },
   _sortArrowUp: { table: { disable: true } },
   _scrollRef: { table: { disable: true } },
-  _itemsOnAPage: { table: { disable: true } },
+  _itemsPerPage: { table: { disable: true } },
   _sortedData: { table: { disable: true } },
 }
 Regular.args = {
-  itemsOnAPage: null,
+  itemsPerPage: null,
+}
+
+export const Pagination = Template.bind({})
+Pagination.args = {
+  itemsPerPage: 10,
 }

package/src/components/table/table.css

@@ -0,0 +1,99 @@
+:host {
+  position: relative;
+  display: block;
+}
+
+div.scroll {
+  display: inline-block;
+  width: 100%;
+  overflow: auto;
+}
+
+div.shadow {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+div.pagination {
+  height: calc(100% - 66px);
+}
+
+table {
+  width: 100%;
+  border-spacing: 0;
+  color: rgb(0 0 0 / 60%);
+  font-size: 16px;
+  font-family: var(--leu-font-regular);
+  line-height: 1.5;
+}
+
+td {
+  padding: 12px;
+}
+
+th {
+  padding: 16px 16px 8px;
+  text-align: left;
+  font-size: 12px;
+  font-weight: normal;
+  font-family: var(--leu-font-black);
+  background: var(--table-even-row-bg);
+}
+
+td:first-child,
+th:first-child {
+  left: 0;
+  background: inherit;
+  z-index: 1;
+}
+
+tr {
+  background: #fff;
+}
+
+tbody tr:nth-child(odd) {
+  background: var(--leu-color-black-5);
+}
+
+button {
+  background: none;
+  cursor: pointer;
+  line-height: 1.5;
+  padding: 0;
+  border: 0;
+  width: 100%;
+  display: flex;
+  align-items: flex-center;
+  font-size: inherit;
+  font-family: inherit;
+}
+
+thead svg {
+  display: inline-block;
+  color: var(--leu-color-accent-blue);
+  padding: 0;
+}
+
+table.sticky td:first-child,
+table.sticky th:first-child {
+  position: sticky;
+}
+
+div.shadow-left table.sticky td:first-child,
+div.shadow-left table.sticky th:first-child {
+  box-shadow: 0 0 5px rgb(0 0 0 / 50%);
+  clip-path: inset(0 -15px 0 0);
+}
+
+div.shadow-left {
+  box-shadow: inset 5px 0 5px -5px rgb(0 0 0 / 50%);
+}
+
+div.shadow-right {
+  box-shadow: inset -5px 0 5px -5px rgb(0 0 0 / 50%);
+}

package/src/components/table/test/table.test.js

@@ -23,7 +23,7 @@ async function defaultFixture() {
 
 describe("LeuTable", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("leu-table")
+    const el = customElements.get("leu-table")
 
     await expect(el).not.to.be.undefined
   })

package/src/lib/utils.js

@@ -0,0 +1,17 @@
+/**
+ * Wrap a Function to nsure that time-consuming tasks do not fire so often
+ * @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) {
+  let timer = null
+  return (...args) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      func.apply(this, args)
+    }, timeout)
+  }
+}
+
+export { debounce }

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
 })