@oiz/stzh-components 3.0.0 → 3.1.0

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

@@ -15,6 +15,7 @@ export default {
   title: 'Components/Panorama',
   component: COMPONENT_NAME,
   parameters: {
+    layout: 'padded',
     actions: {
       // don't listen to stzhChange or stzhZoomChange or demo gonna lag
       handles: ['stzhLoad', 'stzhFullscreenChange', 'stzhSceneChange']
@@ -30,10 +31,7 @@ export default {
       allowFullscreen: true
     }
   },
-  decorators: [
-    withActions,
-    withDesign
-  ]
+  decorators: [withActions, withDesign]
 };
 
 export const Default = {
@@ -47,43 +45,49 @@ export const Default = {
         imageTitle: 'Scene 1',
         imageAuthor: '© gettyimages',
         imageSrc: 'media/images/panorama/alma.jpg',
-        hotspots: [{
-          pitch: -20,
-          yaw: 25,
-          type: 'info',
-          text: 'Beispiel Info ohne Link',
-          url: ''
-        }, {
-          pitch: 10,
-          yaw: 10,
-          type: 'info',
-          text: 'Beispiel Info mit Link',
-          url: 'http://example.com'
-        }, {
-          pitch: -10,
-          yaw: -10,
-          type: 'scene',
-          id: 'hotspot1',
-          sceneId: 'scene2',
-          targetPitch: 0,
-          targetYaw: 0,
-          text: 'Szene 2'
-        }]
+        hotspots: [
+          {
+            pitch: -20,
+            yaw: 25,
+            type: 'info',
+            text: 'Beispiel Info ohne Link',
+            url: ''
+          },
+          {
+            pitch: 10,
+            yaw: 10,
+            type: 'info',
+            text: 'Beispiel Info mit Link',
+            url: 'http://example.com'
+          },
+          {
+            pitch: -10,
+            yaw: -10,
+            type: 'scene',
+            id: 'hotspot1',
+            sceneId: 'scene2',
+            targetPitch: 0,
+            targetYaw: 0,
+            text: 'Szene 2'
+          }
+        ]
       },
       {
         sceneId: 'scene2',
         imageTitle: 'Scene 2',
         imageSrc: 'media/images/panorama/cerro-toco-0.jpg',
-        hotspots: [{
-          pitch: 0,
-          yaw: 0,
-          type: 'scene',
-          id: 'hotspot2',
-          sceneId: 'scene1',
-          targetPitch: 0,
-          targetYaw: 0,
-          text: 'Szene 1'
-        }]
+        hotspots: [
+          {
+            pitch: 0,
+            yaw: 0,
+            type: 'scene',
+            id: 'hotspot2',
+            sceneId: 'scene1',
+            targetPitch: 0,
+            targetYaw: 0,
+            text: 'Szene 1'
+          }
+        ]
       }
     ]
   }

package/dist/collection/components/stzh-pi-content-navigation/stzh-pi-content-navigation.css

@@ -0,0 +1,443 @@
+/**
+ * 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
+ */
+/**
+ * TopnewsMostsearched
+ */
+/**
+ * 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;
+}
+
+/**
+* @prop --stzh-pi-content-navigation-arrow-background-color: Background color of the arrow
+*/
+:host {
+  --arrow-background-color: var(--stzh-pi-content-navigation-arrow-background-color, var(--stzh-color-secondary30));
+  display: flex;
+  flex-direction: column;
+}
+
+.stzh-pi-content-navigation {
+  position: relative;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--stzh-space-small);
+  background-color: var(--stzh-color-coolgrey20);
+  /* Level 3 and 4 */
+  /* Has lead variant */
+  /* Has image */
+  /* Title ratio styling (when navigation level 1 and 2 and no image) */
+}
+.stzh-pi-content-navigation__wrapper {
+  padding-left: var(--stzh-space-medium);
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-content-navigation__wrapper {
+    padding-left: var(--stzh-space-large);
+  }
+}
+.stzh-pi-content-navigation__image {
+  width: 100%;
+  display: none;
+}
+.stzh-pi-content-navigation__title {
+  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-hecto-font-size);
+  line-height: var(--stzh-font-hecto-text-line-height);
+  letter-spacing: var(--stzh-font-hecto-text-letter-spacing);
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  -webkit-hyphens: auto;
+          hyphens: auto;
+  color: var(--stzh-color-black);
+  margin: 0;
+}
+.stzh-pi-content-navigation__title-link {
+  display: block;
+  font-family: inherit;
+  padding: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: transparent;
+  border: none;
+  color: var(--stzh-color-black);
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+  transition: color var(--stzh-base-transition-animation-speed);
+  border-radius: var(--stzh-button-border-radius);
+  cursor: pointer;
+}
+.stzh-pi-content-navigation__title-link::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.stzh-pi-content-navigation__title-link::after {
+  z-index: 1;
+}
+.stzh-pi-content-navigation__lead {
+  font-size: var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));
+  line-height: var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));
+  margin-top: var(--stzh-space-small);
+  margin-bottom: var(--stzh-space-small);
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-content-navigation__lead {
+    font-size: var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));
+    line-height: var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));
+    letter-spacing: var(--stzh-font-curve-p2-medium-text-letter-spacing);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-content-navigation__lead {
+    margin-top: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-content-navigation__lead {
+    margin-top: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-content-navigation__lead {
+    margin-bottom: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-content-navigation__lead {
+    margin-bottom: var(--stzh-space-large);
+  }
+}
+.stzh-pi-content-navigation__arrow {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 4rem;
+  height: 4rem;
+  color: var(--stzh-color-black);
+  background-color: var(--arrow-background-color);
+}
+.stzh-pi-content-navigation__arrow-icon {
+  --size: var(--stzh-icon-size-large);
+}
+.stzh-pi-content-navigation:not(.stzh-pi-content-navigation--is-navigation-level-1-or-2) .stzh-pi-content-navigation__wrapper {
+  padding-right: var(--stzh-space-small);
+  padding-left: var(--stzh-space-small);
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-content-navigation:not(.stzh-pi-content-navigation--is-navigation-level-1-or-2) .stzh-pi-content-navigation__wrapper {
+    padding-right: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-content-navigation:not(.stzh-pi-content-navigation--is-navigation-level-1-or-2) .stzh-pi-content-navigation__wrapper {
+    padding-right: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-content-navigation:not(.stzh-pi-content-navigation--is-navigation-level-1-or-2) .stzh-pi-content-navigation__wrapper {
+    padding-left: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-content-navigation:not(.stzh-pi-content-navigation--is-navigation-level-1-or-2) .stzh-pi-content-navigation__wrapper {
+    padding-left: var(--stzh-space-large);
+  }
+}
+.stzh-pi-content-navigation:not(.stzh-pi-content-navigation--is-navigation-level-1-or-2) .stzh-pi-content-navigation__title-ratio .stzh-pi-content-navigation__title {
+  padding-right: var(--stzh-space-small);
+  padding-left: var(--stzh-space-small);
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-content-navigation:not(.stzh-pi-content-navigation--is-navigation-level-1-or-2) .stzh-pi-content-navigation__title-ratio .stzh-pi-content-navigation__title {
+    padding-right: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-content-navigation:not(.stzh-pi-content-navigation--is-navigation-level-1-or-2) .stzh-pi-content-navigation__title-ratio .stzh-pi-content-navigation__title {
+    padding-right: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-content-navigation:not(.stzh-pi-content-navigation--is-navigation-level-1-or-2) .stzh-pi-content-navigation__title-ratio .stzh-pi-content-navigation__title {
+    padding-left: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-content-navigation:not(.stzh-pi-content-navigation--is-navigation-level-1-or-2) .stzh-pi-content-navigation__title-ratio .stzh-pi-content-navigation__title {
+    padding-left: var(--stzh-space-large);
+  }
+}
+.stzh-pi-content-navigation--has-lead .stzh-pi-content-navigation__wrapper {
+  padding-right: var(--stzh-space-medium);
+  padding-left: var(--stzh-space-medium);
+  padding-top: var(--stzh-space-medium);
+  padding-bottom: var(--stzh-space-xxlarge);
+  flex-direction: column;
+  align-items: flex-start;
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-content-navigation--has-lead .stzh-pi-content-navigation__wrapper {
+    padding-right: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-content-navigation--has-lead .stzh-pi-content-navigation__wrapper {
+    padding-left: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-pi-content-navigation--has-lead .stzh-pi-content-navigation__wrapper {
+    padding-top: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-content-navigation--has-lead .stzh-pi-content-navigation__wrapper {
+    padding-top: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-content-navigation--has-lead .stzh-pi-content-navigation__wrapper {
+    padding-top: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-content-navigation--has-lead .stzh-pi-content-navigation__wrapper {
+    padding-bottom: var(--stzh-space-xxxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-content-navigation--has-lead .stzh-pi-content-navigation__wrapper {
+    padding-bottom: var(--stzh-space-xxxxlarge);
+  }
+}
+.stzh-pi-content-navigation--has-lead .stzh-pi-content-navigation__arrow {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 2.75rem;
+  height: 2.75rem;
+}
+.stzh-pi-content-navigation--has-image .stzh-pi-content-navigation__image {
+  display: block;
+}
+.stzh-pi-content-navigation__title-ratio .stzh-ratio {
+  background-color: var(--stzh-color-coolgrey30);
+}
+.stzh-pi-content-navigation__title-ratio .stzh-pi-content-navigation__title {
+  display: flex;
+  align-items: center;
+  padding-top: var(--stzh-space-medium);
+  padding-right: var(--stzh-space-medium);
+  padding-bottom: var(--stzh-space-medium);
+  padding-left: var(--stzh-space-medium);
+}
+@media screen and (min-width: 600px) {
+  .stzh-pi-content-navigation__title-ratio .stzh-pi-content-navigation__title {
+    padding-top: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-content-navigation__title-ratio .stzh-pi-content-navigation__title {
+    padding-top: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-content-navigation__title-ratio .stzh-pi-content-navigation__title {
+    padding-top: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-content-navigation__title-ratio .stzh-pi-content-navigation__title {
+    padding-right: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-pi-content-navigation__title-ratio .stzh-pi-content-navigation__title {
+    padding-bottom: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-content-navigation__title-ratio .stzh-pi-content-navigation__title {
+    padding-bottom: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-content-navigation__title-ratio .stzh-pi-content-navigation__title {
+    padding-bottom: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-content-navigation__title-ratio .stzh-pi-content-navigation__title {
+    padding-left: var(--stzh-space-large);
+  }
+}

package/dist/collection/components/stzh-pi-content-navigation/stzh-pi-content-navigation.e2e.js

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

package/dist/collection/components/stzh-pi-content-navigation/stzh-pi-content-navigation.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-pi-content-navigation.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-pi-content-navigation/stzh-pi-content-navigation.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,2BAA2B,CAAC;AAExC,MAAM,OAAO,GAAG,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;AAE5C,IAAI,CAAC,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;EACvC,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-cardnavigation\";\n\nconst STORIES = [\"default\", \"without-lead\"];\n\ntest.describe(\"pi-card-navigation\", () => {\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"]}