@statistikzh/leu 0.15.0 → 0.15.1

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@statistikzh/leu",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -65,6 +65,33 @@
             "events": []
           }
         },
+        {
+          "name": "leu-button-group",
+          "description": "A radio input-like button group component.\nIt allows only one button to be active at a time.\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [{ "name": "", "description": "Slot for the buttons" }],
+          "events": [
+            {
+              "name": "input",
+              "description": "When the value of the group changes by clicking a button"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The value of the currently selected (active) button"
+              }
+            ],
+            "events": [
+              {
+                "name": "input",
+                "description": "When the value of the group changes by clicking a button"
+              }
+            ]
+          }
+        },
         {
           "name": "leu-button",
           "description": "\n---\n\n\n### **Slots:**\n - **before** - The icon to display before the label\n- **after** - The icon to display after the label\n- _default_ - The label of the button or the icon if no label is set",
@@ -212,30 +239,46 @@
           }
         },
         {
-          "name": "leu-button-group",
-          "description": "A radio input-like button group component.\nIt allows only one button to be active at a time.\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
+          "name": "leu-chart-wrapper",
+          "description": "A wrapper element for charts.\n---\n\n\n### **Slots:**\n - **title** - The title of the chart. Use a heading tag (h2-4) depending on your context.\n- **description** - A description of the chart. Content is wrapped in a `<p>` tag by the component.\n- **chart** - The actual chart\n- **caption** - A caption for the chart, e.g. a source or explanation of the data.\n- **download** - A download button or dropdown to export the chart in different formats.",
           "doc-url": "",
-          "attributes": [],
-          "slots": [{ "name": "", "description": "Slot for the buttons" }],
-          "events": [
+          "attributes": [
             {
-              "name": "input",
-              "description": "When the value of the group changes by clicking a button"
+              "name": "pending",
+              "description": "Whether the chart is currently loading or not.\nWhen set to `true`, a spinner will be shown in the chart container.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "title",
+              "description": "The title of the chart. Use a heading tag (h2-4) depending on your context."
+            },
+            {
+              "name": "description",
+              "description": "A description of the chart. Content is wrapped in a `<p>` tag by the component."
+            },
+            { "name": "chart", "description": "The actual chart" },
+            {
+              "name": "caption",
+              "description": "A caption for the chart, e.g. a source or explanation of the data."
+            },
+            {
+              "name": "download",
+              "description": "A download button or dropdown to export the chart in different formats."
             }
           ],
+          "events": [],
           "js": {
             "properties": [
               {
-                "name": "value",
-                "description": "The value of the currently selected (active) button"
-              }
+                "name": "pending",
+                "description": "Whether the chart is currently loading or not.\nWhen set to `true`, a spinner will be shown in the chart container.",
+                "type": "boolean"
+              },
+              { "name": "hasSlotController" }
             ],
-            "events": [
-              {
-                "name": "input",
-                "description": "When the value of the group changes by clicking a button"
-              }
-            ]
+            "events": []
           }
         },
         {
@@ -1390,49 +1433,6 @@
             "events": []
           }
         },
-        {
-          "name": "leu-chart-wrapper",
-          "description": "A wrapper element for charts.\n---\n\n\n### **Slots:**\n - **title** - The title of the chart. Use a heading tag (h2-4) depending on your context.\n- **description** - A description of the chart. Content is wrapped in a `<p>` tag by the component.\n- **chart** - The actual chart\n- **caption** - A caption for the chart, e.g. a source or explanation of the data.\n- **download** - A download button or dropdown to export the chart in different formats.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "pending",
-              "description": "Whether the chart is currently loading or not.\nWhen set to `true`, a spinner will be shown in the chart container.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "title",
-              "description": "The title of the chart. Use a heading tag (h2-4) depending on your context."
-            },
-            {
-              "name": "description",
-              "description": "A description of the chart. Content is wrapped in a `<p>` tag by the component."
-            },
-            { "name": "chart", "description": "The actual chart" },
-            {
-              "name": "caption",
-              "description": "A caption for the chart, e.g. a source or explanation of the data."
-            },
-            {
-              "name": "download",
-              "description": "A download button or dropdown to export the chart in different formats."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "pending",
-                "description": "Whether the chart is currently loading or not.\nWhen set to `true`, a spinner will be shown in the chart container.",
-                "type": "boolean"
-              },
-              { "name": "hasSlotController" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "leu-visually-hidden",
           "description": "\n---\n",

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/release-please-config.json

@@ -2,6 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/googleapis/release-please/main/schemas/config.json",
   "release-type": "node",
   "bump-minor-pre-major": true,
+  "always-update": true,
   "packages": {
     ".": {}
   }

package/scripts/postcss-leu-font-styles.cjs

@@ -35,20 +35,20 @@ function generateCustomPropertyDeclarations({
     {
       type: "font",
       name: varFont,
-      value: `var(${varFontSize}) / var(${varLineHeight}) var(${varFontFamily})`,
+      value: `normal var(${varFontSize}) / var(${varLineHeight}) var(${varFontFamily})`,
     },
   ]
 }
 
 function curveStepDeclarations(curvePrefix, stepStyle) {
   const fontSizeVar = stepStyle.declarations.find(
-    (s) => s.type === "fontSize"
+    (s) => s.type === "fontSize",
   ).name
   const lineHeightVar = stepStyle.declarations.find(
-    (s) => s.type === "lineHeight"
+    (s) => s.type === "lineHeight",
   ).name
   const spacingVar = stepStyle.declarations.find(
-    (s) => s.type === "spacing"
+    (s) => s.type === "spacing",
   ).name
   const fontVar = stepStyle.declarations.find((s) => s.type === "font").name
 
@@ -93,8 +93,8 @@ async function createLeuFontStyleNodes(file, postcss, nodeSource) {
   const fontStyleNodes = fontStyleDeclarations.flatMap((style) =>
     style.declarations.map(
       ({ name, value }) =>
-        new postcss.Declaration({ prop: name, value, source: nodeSource })
-    )
+        new postcss.Declaration({ prop: name, value, source: nodeSource }),
+    ),
   )
 
   const curveNodes = curves.flatMap((curve) =>
@@ -105,12 +105,12 @@ async function createLeuFontStyleNodes(file, postcss, nodeSource) {
         const [viewport, styleName] = step
 
         const stepStyle = fontStyleDeclarations.find(
-          (s) => s.name === styleName && s.fontWeight === fontWeight
+          (s) => s.name === styleName && s.fontWeight === fontWeight,
         )
 
         const nodes = curveStepDeclarations(curvePrefix, stepStyle).map(
           ({ prop, value }) =>
-            new postcss.Declaration({ prop, value, source: nodeSource })
+            new postcss.Declaration({ prop, value, source: nodeSource }),
         )
 
         return viewport === null
@@ -122,7 +122,7 @@ async function createLeuFontStyleNodes(file, postcss, nodeSource) {
               source: nodeSource,
             })
       })
-    })
+    }),
   )
 
   return [...fontStyleNodes, ...curveNodes]
@@ -143,7 +143,7 @@ module.exports = () => ({
       const nodes = await createLeuFontStyleNodes(
         path.resolve(rootDir, jsonFile),
         postcss,
-        atRule.source
+        atRule.source,
       )
 
       atRule.replaceWith(nodes)

package/src/components/{visualization → chart-wrapper}/ChartWrapper.ts

@@ -47,27 +47,30 @@ export class LeuChartWrapper extends LeuElement {
     const hasDownload = this.hasSlotController.test("download")
 
     return html`
-      <figure>
-        <slot name="title" class="title"></slot>
+      <figure class="chart-wrapper">
+        <slot name="title" class="chart-wrapper__title"></slot>
         ${hasDescription
-          ? html`<slot name="description" class="description"></slot>`
+          ? html`<slot
+              name="description"
+              class="chart-wrapper__description"
+            ></slot>`
           : nothing}
-        <div class="chart-container">
-          <slot name="chart" class="chart"></slot>
+        <div class="chart-wrapper__container">
+          <slot name="chart" class="chart-wrapper__chart"></slot>
           ${this.pending
-            ? html`<div class="spinner-container">
-                <leu-spinner class="spinner"></leu-spinner>
+            ? html`<div class="chart-wrapper__spinner-container">
+                <leu-spinner class="chart-wrapper__spinner"></leu-spinner>
               </div>`
             : nothing}
         </div>
         ${hasCaption
           ? html`<figcaption>
-              <slot name="caption" class="caption"></slot>
+              <slot name="caption" class="chart-wrapper__caption"></slot>
             </figcaption>`
           : nothing}
-        <hr class="ruler" />
+        <hr class="chart-wrapper__ruler" />
         ${hasDownload
-          ? html`<slot name="download" class="download"></slot>`
+          ? html`<slot name="download" class="chart-wrapper__download"></slot>`
           : nothing}
       </figure>
     `

package/src/components/{visualization → chart-wrapper}/chart-wrapper.css

@@ -1,6 +1,13 @@
 @import url("../../styles/custom-media.css");
 
-.title::slotted(h2) {
+.chart-wrapper {
+  display: block;
+  width: 100%;
+  margin: 0;
+}
+
+.chart-wrapper__title::slotted(h2) {
+  color: var(--leu-color-black-100);
   font: var(--leu-t-curve-large-black-font);
   margin: 0 0 0.75rem;
 
@@ -13,18 +20,20 @@
   }
 }
 
-.title::slotted(h3) {
+.chart-wrapper__title::slotted(h3) {
+  color: var(--leu-color-black-100);
   font: var(--leu-t-curve-medium-black-font);
   margin: 0 0 0.5rem;
 }
 
-.title::slotted(h4) {
+.chart-wrapper__title::slotted(h4) {
+  color: var(--leu-color-black-100);
   font: var(--leu-t-curve-regular-black-font);
   margin: 0 0 0.5rem;
 }
 
-.description,
-.chart {
+.chart-wrapper__description,
+.chart-wrapper__chart {
   display: block;
   margin-bottom: 0.75rem;
 
@@ -37,17 +46,17 @@
   }
 }
 
-.description {
+.chart-wrapper__description {
   font: var(--leu-t-curve-small-regular-font);
   color: var(--leu-color-black-60);
 }
 
-.caption {
+.chart-wrapper__caption {
   font: var(--leu-t-curve-tiny-regular-font);
   color: var(--leu-color-black-60);
 }
 
-.ruler {
+.chart-wrapper__ruler {
   display: block;
   border: none;
   border-top: 1px solid var(--leu-color-black-transp-20);
@@ -58,16 +67,16 @@
   }
 }
 
-.download {
+.chart-wrapper__download {
   display: block;
   margin-left: -0.5rem;
 }
 
-.chart-container {
+.chart-wrapper__container {
   position: relative;
 }
 
-.spinner-container {
+.chart-wrapper__spinner-container {
   position: absolute;
   top: 0;
   left: 0;

package/src/components/{visualization → chart-wrapper}/stories/chart-wrapper.stories.ts

@@ -46,7 +46,13 @@ const Template: Story = {
 export const Regular = {
   ...Template,
   args: {
-    // Add default args here
     pending: false,
   },
 }
+
+export const Pending = {
+  ...Template,
+  args: {
+    pending: true,
+  },
+}

package/src/components/{visualization → chart-wrapper}/test/chart-wrapper.test.ts

@@ -50,25 +50,28 @@ describe("LeuChartWrapper", () => {
   it("conditionally renders slots", async () => {
     let el = await defaultFixture()
 
-    expect(el.shadowRoot.querySelector(".description")).to.exist
-    expect(el.shadowRoot.querySelector(".caption")).to.exist
-    expect(el.shadowRoot.querySelector(".download")).to.exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__description")).to.exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__caption")).to.exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__download")).to.exist
 
     el = await fixture(html`<leu-chart-wrapper></leu-chart-wrapper>`)
 
-    expect(el.shadowRoot.querySelector(".description")).not.to.exist
-    expect(el.shadowRoot.querySelector(".caption")).not.to.exist
-    expect(el.shadowRoot.querySelector(".download")).not.to.exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__description")).not.to
+      .exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__caption")).not.to.exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__download")).not.to.exist
 
     // Check that the title and chart slots are always present
-    expect(el.shadowRoot.querySelector(".title")).to.exist
-    expect(el.shadowRoot.querySelector(".chart")).to.exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__title")).to.exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__chart")).to.exist
   })
 
   it("shows a spinner when pending is set", async () => {
     const el = await defaultFixture({ pending: true })
 
-    expect(el.shadowRoot.querySelector(".spinner-container")).to.exist
-    expect(el.shadowRoot.querySelector("leu-spinner.spinner")).to.exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__spinner-container")).to
+      .exist
+    expect(el.shadowRoot.querySelector("leu-spinner.chart-wrapper__spinner")).to
+      .exist
   })
 })

package/src/docs/contributing.mdx

@@ -92,7 +92,7 @@ window.customElements.define("leu-input", LeuInput)
 ### 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/custom-properties.css`.
+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.
 

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from "./components/accordion/Accordion.js"
 export * from "./components/button/Button.js"
 export * from "./components/button-group/ButtonGroup.js"
+export * from "./components/chart-wrapper/ChartWrapper.js"
 export * from "./components/checkbox/Checkbox.js"
 export * from "./components/checkbox/CheckboxGroup.js"
 export * from "./components/chip/exports.js"

package/src/styles/theme.css

@@ -1 +1,89 @@
-@import url("./custom-properties.css");
+@import url("./custom-media.css");
+
+:root,
+:host {
+  --leu-color-black-100: #000;
+  --leu-color-black-80: #333;
+  --leu-color-black-60: #666;
+  --leu-color-black-40: #949494;
+  --leu-color-black-20: #ccc;
+  --leu-color-black-10: #f0f0f0;
+  --leu-color-black-5: #f7f7f7;
+  --leu-color-black-0: #fffffe;
+
+  --leu-color-black-transp-80: rgb(0 0 0 / 80%);
+  --leu-color-black-transp-60: rgb(0 0 0 / 60%);
+  --leu-color-black-transp-40: rgb(0 0 0 / 40%);
+  --leu-color-black-transp-20: rgb(0 0 0 / 20%);
+  --leu-color-black-transp-10: rgb(0 0 0 / 10%);
+  --leu-color-black-transp-5: rgb(0 0 0 / 5%);
+
+  --leu-color-white-transp-90: rgb(255 255 255 / 90%);
+  --leu-color-white-transp-70: rgb(255 255 255 / 70%);
+  --leu-color-white-transp-40: rgb(255 255 255 / 40%);
+  --leu-color-white-transp-10: rgb(255 255 255 / 10%);
+
+  --leu-color-accent-blue: #0076bd;
+  --leu-color-accent-darkblue: #00407c;
+  --leu-color-accent-turquoise: #00797b;
+  --leu-color-accent-green: #1a7f1f;
+  --leu-color-accent-bordeaux: #b01657;
+  --leu-color-accent-magenta: #d40053;
+  --leu-color-accent-violet: #7f3da7;
+  --leu-color-accent-gray: var(--leu-color-black-60);
+
+  --leu-color-accent-blue-soft: #edf5fa;
+  --leu-color-accent-darkblue-soft: #e0e8ee;
+  --leu-color-accent-turquoise-soft: #e8f3f2;
+  --leu-color-accent-green-soft: #ebf6eb;
+  --leu-color-accent-bordeaux-soft: #f6e3ea;
+  --leu-color-accent-magenta-soft: #fcedf3;
+  --leu-color-accent-violet-soft: #ece2f1;
+  --leu-color-accent-gray-soft: var(--leu-color-black-10);
+
+  --leu-color-func-cyan: #009ee0;
+  --leu-color-func-red: #d93c1a;
+  --leu-color-func-green: #1a7f1f;
+
+  /* stylelint-disable value-keyword-case */
+  --leu-font-family-regular:
+    "InterRegular", "HelveticaNowRegular", "Helvetica", sans-serif;
+  --leu-font-family-black:
+    "InterBlack", "HelveticaNowBlack", "Arial Black", "Helvetica", sans-serif;
+  /* stylelint-enable 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-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/dist/components/visualization/test/chart-wrapper.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chart-wrapper.test.d.ts","sourceRoot":"","sources":["../../../../src/components/visualization/test/chart-wrapper.test.ts"],"names":[],"mappings":"AAGA,OAAO,yBAAyB,CAAA"}

package/src/styles/custom-properties.css

@@ -1,89 +0,0 @@
-@import url("./custom-media.css");
-
-:root,
-:host {
-  --leu-color-black-100: #000;
-  --leu-color-black-80: #333;
-  --leu-color-black-60: #666;
-  --leu-color-black-40: #949494;
-  --leu-color-black-20: #ccc;
-  --leu-color-black-10: #f0f0f0;
-  --leu-color-black-5: #f7f7f7;
-  --leu-color-black-0: #fffffe;
-
-  --leu-color-black-transp-80: rgb(0 0 0 / 80%);
-  --leu-color-black-transp-60: rgb(0 0 0 / 60%);
-  --leu-color-black-transp-40: rgb(0 0 0 / 40%);
-  --leu-color-black-transp-20: rgb(0 0 0 / 20%);
-  --leu-color-black-transp-10: rgb(0 0 0 / 10%);
-  --leu-color-black-transp-5: rgb(0 0 0 / 5%);
-
-  --leu-color-white-transp-90: rgb(255 255 255 / 90%);
-  --leu-color-white-transp-70: rgb(255 255 255 / 70%);
-  --leu-color-white-transp-40: rgb(255 255 255 / 40%);
-  --leu-color-white-transp-10: rgb(255 255 255 / 10%);
-
-  --leu-color-accent-blue: #0076bd;
-  --leu-color-accent-darkblue: #00407c;
-  --leu-color-accent-turquoise: #00797b;
-  --leu-color-accent-green: #1a7f1f;
-  --leu-color-accent-bordeaux: #b01657;
-  --leu-color-accent-magenta: #d40053;
-  --leu-color-accent-violet: #7f3da7;
-  --leu-color-accent-gray: var(--leu-color-black-60);
-
-  --leu-color-accent-blue-soft: #edf5fa;
-  --leu-color-accent-darkblue-soft: #e0e8ee;
-  --leu-color-accent-turquoise-soft: #e8f3f2;
-  --leu-color-accent-green-soft: #ebf6eb;
-  --leu-color-accent-bordeaux-soft: #f6e3ea;
-  --leu-color-accent-magenta-soft: #fcedf3;
-  --leu-color-accent-violet-soft: #ece2f1;
-  --leu-color-accent-gray-soft: var(--leu-color-black-10);
-
-  --leu-color-func-cyan: #009ee0;
-  --leu-color-func-red: #d93c1a;
-  --leu-color-func-green: #1a7f1f;
-
-  /* stylelint-disable value-keyword-case */
-  --leu-font-family-regular:
-    "InterRegular", "HelveticaNowRegular", "Helvetica", sans-serif;
-  --leu-font-family-black:
-    "InterBlack", "HelveticaNowBlack", "Arial Black", "Helvetica", sans-serif;
-  /* stylelint-enable 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-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;
-  }
-}