@oiz/stzh-components 3.0.0-beta5 → 3.0.0

package/dist/collection/components/stzh-datamessagelist-item/stzh-datamessagelist-item.css

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/components/stzh-datatable/stzh-datatable.css

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/components/stzh-datepicker/stzh-datepicker.css

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/components/stzh-daterange/stzh-daterange.css

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/components/stzh-details/stzh-details.css

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/components/stzh-dialog/stzh-dialog.css

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/components/stzh-disturber/stzh-disturber.css

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/components/stzh-dropdown/stzh-dropdown.css

@@ -28,6 +28,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -58,9 +61,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/components/stzh-editor/stzh-editor.css

@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Footer
+ */
 /**
  * Fieldset
  */
@@ -57,9 +60,6 @@
 /**
  * Tooltips
  */
-/**
- * Header
- */
 /**
  * Dialogs / Popover
  */

package/dist/collection/components/stzh-eventdata/stzh-eventdata.css

@@ -0,0 +1,210 @@
+/**
+ * Colors
+ */
+/* Signal colors */
+/* Old colors (TODO: cleanup when not needed anymore) */
+/**
+ * Base
+ */
+/**
+ * Selection
+ */
+/**
+ * Flyingfocus
+ */
+/**
+ * Icons
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Footer
+ */
+/**
+ * Fieldset
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Text
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Dialogs / Popover
+ */
+/**
+ * Overlays
+ */
+/**
+ * Accordions
+ */
+/**
+ * Timeline
+ */
+/**
+ * Buttons
+ */
+/**
+ * Ratios
+ */
+/**
+ * Pagetitle
+ */
+/**
+ * Calendar
+ */
+/**
+ * Cta
+ */
+/**
+ * Toasts
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Container
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Ratios
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-medium);
+  font-weight: var(--stzh-font-weight-medium);
+  font-style: var(--stzh-font-style-medium);
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+  /* default outline value, which will be applied to all elements receiving focus
+  the .has-focus class is used by the focus target */
+}
+:host[hidden] {
+  display: none;
+}
+:host::-moz-selection {
+  color: var(--stzh-selection-color);
+  background-color: var(--stzh-selection-background-color);
+}
+:host::selection {
+  color: var(--stzh-selection-color);
+  background-color: var(--stzh-selection-background-color);
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
+  -webkit-text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);
+          text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);
+}
+:host .has-focus {
+  outline: var(--stzh-flyingfocus-color) solid 0.125rem;
+  outline-offset: 0.125rem;
+}
+:host .stzh-fylingfocus-focused {
+  outline-style: none !important;
+}
+:host .stzh-fylingfocus-focused::-moz-focus-inner {
+  border: 0 !important;
+}
+
+.stzh-eventdata {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--stzh-space-xsmall);
+  -moz-column-gap: var(--stzh-space-medium);
+       column-gap: var(--stzh-space-medium);
+}
+@media screen and (min-width: 600px) {
+  .stzh-eventdata {
+    flex-direction: row;
+  }
+}
+.stzh-eventdata__label {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: var(--stzh-font-style-heavy);
+  font-size: var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));
+  line-height: var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));
+  letter-spacing: var(--stzh-font-curve-p1-default-text-letter-spacing);
+  flex-shrink: 0;
+}
+@media screen and (min-width: 900px) {
+  .stzh-eventdata__label {
+    font-size: var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));
+    line-height: var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));
+    letter-spacing: var(--stzh-font-curve-p1-medium-text-letter-spacing);
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-eventdata__label {
+    min-width: 10rem;
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-eventdata__label {
+    min-width: 10.875rem;
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-eventdata__label {
+    min-width: 11.375rem;
+  }
+}
+.stzh-eventdata__content {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--stzh-space-xsmall);
+}

package/dist/collection/components/stzh-eventdata/stzh-eventdata.e2e.js

@@ -0,0 +1,18 @@
+import { test } from "@playwright/test";
+import { visualDiff } from "../../../.build/test/utils";
+const URL = "components-eventdata";
+const STORIES = [
+  "default",
+];
+test.describe("eventdata", () => {
+  STORIES.forEach((storyId) => {
+    test(`story ${storyId} visual diff`, async ({ page }) => {
+      await visualDiff({
+        storyId,
+        page,
+        url: URL
+      });
+    });
+  });
+});
+//# sourceMappingURL=stzh-eventdata.e2e.js.map

package/dist/collection/components/stzh-eventdata/stzh-eventdata.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-eventdata.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-eventdata/stzh-eventdata.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,sBAAsB,CAAC;AAEnC,MAAM,OAAO,GAAG;EACd,SAAS;CACV,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EAC9B,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACtD,MAAM,UAAU,CAAC;QACf,OAAO;QACP,IAAI;QACJ,GAAG,EAAE,GAAG;OACT,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../.build/test/utils\";\n\nconst URL = \"components-eventdata\";\n\nconst STORIES = [\n  \"default\",\n];\n\ntest.describe(\"eventdata\", () => {\n  STORIES.forEach((storyId) => {\n    test(`story ${storyId} visual diff`, async ({ page }) => {\n      await visualDiff({\n        storyId,\n        page,\n        url: URL\n      });\n    });\n  });\n});\n"]}

package/dist/collection/components/stzh-eventdata/stzh-eventdata.js

@@ -0,0 +1,52 @@
+import { Host, h, } from "@stencil/core";
+/**
+ * @slot - Slot for multiple elements
+ * @slot label - Slot for label (alternative for label property)
+ */
+export class StzhEventdata {
+  constructor() {
+    this.label = "";
+  }
+  render() {
+    const classes = {
+      "stzh-eventdata": true
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-eventdata__label" }, this.label ? this.label : h("slot", { name: "label" })), h("div", { class: "stzh-eventdata__content" }, h("slot", null)))));
+  }
+  static get is() { return "stzh-eventdata"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-eventdata.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-eventdata.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label (use label slot as alternative)"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+}
+//# sourceMappingURL=stzh-eventdata.js.map

package/dist/collection/components/stzh-eventdata/stzh-eventdata.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-eventdata.js","sourceRoot":"","sources":["../../../../src/components/stzh-eventdata/stzh-eventdata.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,GACL,MAAM,eAAe,CAAC;AAEvB;;;GAGG;AAMH,MAAM,OAAO,aAAa;;iBAEA,EAAE;;EAI1B,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,gBAAgB,EAAE,IAAI;KACvB,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,OAAO,GAAQ,CACjD;QACN,WAAK,KAAK,EAAC,yBAAyB;UAClC,eAAa,CACT,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for multiple elements\n * @slot label - Slot for label (alternative for label property)\n */\n@Component({\n  tag: \"stzh-eventdata\",\n  styleUrl: \"stzh-eventdata.scss\",\n  scoped: true\n})\nexport class StzhEventdata {\n  /** Label (use label slot as alternative) */\n  @Prop() label: string = \"\";\n\n  @Element() element: HTMLStzhEventdataElement;\n\n  render() {\n    const classes = {\n      \"stzh-eventdata\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-eventdata__label\">\n            {this.label ? this.label : <slot name=\"label\"></slot>}\n          </div>\n          <div class=\"stzh-eventdata__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-eventdata/stzh-eventdata.stories.js

@@ -0,0 +1,44 @@
+import { createComponentStory } from '../../utils/story-utils';
+import { withActions } from '@storybook/addon-actions/decorator';
+import readme from './readme.md?raw';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+const COMPONENT_NAME = 'stzh-eventdata';
+const story = createComponentStory(COMPONENT_NAME);
+
+const TEMPLATE = `
+<stzh-eventdata>
+  <stzh-text>Lorem ipsum<br />dolor si amet</stzh-text>
+  <stzh-text>Lorem ipsum dolor si amet</stzh-text>
+  <stzh-text>Lorem ipsum: <a href="#">dolor si amet</a></stzh-text>
+</stzh-eventdata>
+`;
+
+export default {
+  title: 'Components/Eventdata',
+  component: COMPONENT_NAME,
+  parameters: {
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('eventdata'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withActions,
+    withDesign
+  ]
+};
+
+export const Default = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    label: 'Lorem ipsum'
+  }
+};