@oiz/stzh-components 4.5.0 → 4.6.0-beta1

package/dist/collection/components/CMS/stzh-pi-teaser-layout-item/stzh-pi-teaser-layout-item.css

@@ -0,0 +1,501 @@
+@charset "UTF-8";
+/**
+ * Colors
+ */
+/* Signal colors */
+/* Old colors (TODO: cleanup when not needed anymore) */
+/**
+ * Base
+ */
+/**
+ * Selection
+ */
+/**
+ * Flyingfocus
+ */
+/**
+ * Icons
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Footer
+ */
+/**
+ * Fieldset
+ */
+/**
+ * Stepper
+ */
+/**
+ * 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
+ */
+/**
+ * Uploads
+ */
+/**
+ * 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], :host[stzh-hidden] {
+  display: none;
+}
+: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-teaser-layout-item-image-background-color: Background color if no image is present
+*/
+:host {
+  --image-background-color: var(--stzh-pi-teaser-layout-item-image-background-color,
+    var(--stzh-color-coolgrey10));
+  display: flex;
+  inline-size: 100%;
+  block-size: 100%;
+  container-type: size;
+}
+:host[image-position=top] {
+  --grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
+}
+@media screen and (max-width: 899px) {
+  :host[image-position=top] {
+    --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,
+        "image image image image " "text text text text "
+      );
+  }
+}
+@media screen and (min-width: 900px) {
+  :host[image-position=top] {
+    --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,
+        "image image image image image image image image"
+        "text text text text text text text text"
+      );
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host[image-position=top] {
+    --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,
+        "image image image image image image image image image image image image"
+        "text text text text text text text text text text text text"
+      );
+  }
+}
+:host[image-position=right] {
+  --grid-template-no-rows: 1fr;
+}
+@media screen and (max-width: 899px) {
+  :host[image-position=right] {
+    --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,
+        "text text image image"
+      );
+  }
+}
+@media screen and (min-width: 900px) {
+  :host[image-position=right] {
+    --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,
+        "text text text text text image image image"
+      );
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host[image-position=right] {
+    --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,
+        "text text text text text text image image image image image image"
+      );
+  }
+}
+:host:not([has-image]) {
+  --grid-template-no-rows: 1fr;
+}
+@media screen and (max-width: 899px) {
+  :host:not([has-image]) {
+    --grid-template-areas-no-image: "text text text text";
+  }
+}
+@media screen and (min-width: 900px) {
+  :host:not([has-image]) {
+    --grid-template-areas-no-image: "text text text text text text text text";
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host:not([has-image]) {
+    --grid-template-areas-no-image: "text text text text text text text text text text text text";
+  }
+}
+:host:not([has-lead]) .stzh-pi-teaser-layout-item__lead {
+  display: none;
+}
+:host[content-size=XL] .stzh-pi-teaser-layout-item__title {
+  font-size: var(--stzh-font-mega-font-size);
+  line-height: var(--stzh-font-mega-text-line-height);
+  letter-spacing: var(--stzh-font-mega-text-letter-spacing);
+}
+:host[content-size=L] .stzh-pi-teaser-layout-item__title {
+  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);
+}
+:host[content-size=M] .stzh-pi-teaser-layout-item__title {
+  font-size: var(--stzh-font-deca-font-size);
+  line-height: var(--stzh-font-deca-text-line-height);
+  letter-spacing: var(--stzh-font-deca-text-letter-spacing);
+}
+:host[content-size=S] .stzh-pi-teaser-layout-item__title {
+  font-size: var(--stzh-font-deci-font-size);
+  line-height: var(--stzh-font-deci-text-line-height);
+  letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+}
+:host[content-size=XS] .stzh-pi-teaser-layout-item__title {
+  font-size: var(--stzh-font-centi-font-size);
+  line-height: var(--stzh-font-centi-text-line-height);
+  letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+}
+:host[content-size=S]:not([has-image]) .stzh-pi-teaser-layout-item__title {
+  -webkit-line-clamp: 2;
+}
+@container (max-height: 235px) {
+  :host[image-position=top] .stzh-pi-teaser-layout-item {
+    --grid-template-rows: 40cqh 60cqh;
+  }
+  :host[image-position=top] .stzh-pi-teaser-layout-item__lead {
+    --lead-lines: 1;
+  }
+  :host:not([has-image]) .stzh-pi-teaser-layout-item__lead {
+    --lead-lines: 1;
+  }
+}
+@container (min-height: 236px) and (max-height:349px) {
+  :host[image-position=top] .stzh-pi-teaser-layout-item {
+    --grid-template-rows: 47cqh 53cqh;
+  }
+  :host[image-position=top] .stzh-pi-teaser-layout-item__lead {
+    --lead-lines: 2;
+  }
+  :host:not([has-image]) .stzh-pi-teaser-layout-item__lead {
+    --lead-lines: 2;
+  }
+}
+@container (min-height: 350px) and (max-height:599px) {
+  :host[image-position=top] .stzh-pi-teaser-layout-item {
+    --grid-template-rows: 55cqh 45cqh;
+  }
+  :host[image-position=top] .stzh-pi-teaser-layout-item__lead {
+    --lead-lines: 3;
+  }
+}
+@container (min-height: 600px) and (max-height: 799px) {
+  :host[image-position=top] .stzh-pi-teaser-layout-item {
+    --grid-template-rows: 55cqh 45cqh;
+  }
+}
+@container (min-height: 800px) {
+  :host[image-position=top] .stzh-pi-teaser-layout-item {
+    --grid-template-rows: 40cqh 60cqh;
+  }
+}
+
+.stzh-pi-teaser-layout-item {
+  column-gap: var(--stzh-grid-gutter);
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  display: grid;
+  height: 100%;
+  width: 100%;
+  grid-template-rows: var(--grid-template-no-rows, var(--grid-template-rows));
+  grid-template-areas: var(--grid-template-areas-no-image, var(--grid-template-areas));
+  background-color: var(--stzh-color-grey10);
+}
+@media screen and (min-width: 600px) {
+  .stzh-pi-teaser-layout-item {
+    column-gap: var(--stzh-grid-gutter-small);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-teaser-layout-item {
+    column-gap: var(--stzh-grid-gutter-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-teaser-layout-item {
+    column-gap: var(--stzh-grid-gutter-large);
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-pi-teaser-layout-item {
+    column-gap: var(--stzh-grid-gutter-ultra);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-teaser-layout-item {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-teaser-layout-item {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+}
+.stzh-pi-teaser-layout-item__text {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  height: 100%;
+  min-height: 0;
+  align-content: start;
+}
+.stzh-pi-teaser-layout-item__wrapper {
+  grid-area: text;
+  overflow: hidden;
+  padding: var(--stzh-space-medium);
+  height: 100%;
+  min-height: 0;
+}
+.stzh-pi-teaser-layout-item__image {
+  overflow: hidden;
+  grid-area: image;
+}
+.stzh-pi-teaser-layout-item__image > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.stzh-pi-teaser-layout-item__dateline {
+  font-family: var(--stzh-font-family-title);
+  font-weight: var(--stzh-font-weight-title);
+  font-style: var(--stzh-font-style-title);
+  font-size: var(--stzh-font-milli-font-size);
+  line-height: var(--stzh-font-milli-text-line-height);
+  letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+  color: var(--stzh-color-coolgrey70);
+  margin: 0;
+  align-self: start;
+}
+.stzh-pi-teaser-layout-item__title-wrapper {
+  padding-top: var(--stzh-space-xsmall);
+  padding-bottom: var(--stzh-space-xxsmall);
+}
+@media screen and (min-width: 600px) {
+  .stzh-pi-teaser-layout-item__title-wrapper {
+    padding-top: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-teaser-layout-item__title-wrapper {
+    padding-top: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-teaser-layout-item__title-wrapper {
+    padding-top: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-teaser-layout-item__title-wrapper {
+    padding-bottom: var(--stzh-space-xsmall);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-teaser-layout-item__title-wrapper {
+    padding-bottom: var(--stzh-space-small);
+  }
+}
+.stzh-pi-teaser-layout-item__title {
+  font-family: var(--stzh-font-family-title);
+  font-weight: var(--stzh-font-weight-title);
+  font-style: var(--stzh-font-style-title);
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  hyphens: auto;
+  color: var(--stzh-color-black);
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  /* Limit the text to 3 lines */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* Adds "..." at the end if truncated */
+  align-self: start;
+}
+.stzh-pi-teaser-layout-item__title-link {
+  display: block;
+  font-family: inherit;
+  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-teaser-layout-item__lead-wrapper {
+  padding-bottom: var(--stzh-space-xsmall);
+}
+@media screen and (min-width: 600px) {
+  .stzh-pi-teaser-layout-item__lead-wrapper {
+    padding-bottom: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-teaser-layout-item__lead-wrapper {
+    padding-bottom: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pi-teaser-layout-item__lead-wrapper {
+    padding-bottom: var(--stzh-space-xlarge);
+  }
+}
+.stzh-pi-teaser-layout-item__lead {
+  margin-top: 0;
+  color: var(--stzh-color-coolgrey70);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--lead-lines, 3);
+  line-clamp: var(--lead-lines, 3);
+  overflow: hidden;
+  /* don’t use text-overflow with multi-line clamp */
+  align-self: start;
+}
+@media screen and (max-width: 899px) {
+  .stzh-pi-teaser-layout-item__lead {
+    font-size: var(--stzh-font-milli-font-size);
+    line-height: var(--stzh-font-milli-text-line-height);
+    letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-pi-teaser-layout-item__lead {
+    font-size: var(--stzh-font-centi-font-size);
+    line-height: var(--stzh-font-centi-text-line-height);
+    letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+  }
+}
+.stzh-pi-teaser-layout-item__date {
+  font-size: var(--stzh-font-micro-font-size);
+  line-height: var(--stzh-font-micro-text-line-height);
+  color: var(--stzh-color-coolgrey70);
+  margin: 0;
+  align-self: end;
+}

package/dist/collection/components/CMS/stzh-pi-teaser-layout-item/stzh-pi-teaser-layout-item.e2e.js

@@ -0,0 +1,16 @@
+import { test } from "@playwright/test";
+import { visualDiff } from "../../../../.build/test/utils";
+const URL = "components-cms-publizistischeinhalte-piteaser-layout-item";
+const STORIES = ["with-image", "without-image"];
+test.describe("pi-teaser-layout-item", () => {
+    STORIES.forEach((storyId) => {
+        test(`story ${storyId} visual diff`, async ({ page }) => {
+            await visualDiff({
+                storyId,
+                page,
+                url: URL,
+            });
+        });
+    });
+});
+//# sourceMappingURL=stzh-pi-teaser-layout-item.e2e.js.map

package/dist/collection/components/CMS/stzh-pi-teaser-layout-item/stzh-pi-teaser-layout-item.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-pi-teaser-layout-item.e2e.js","sourceRoot":"","sources":["../../../../../src/components/CMS/stzh-pi-teaser-layout-item/stzh-pi-teaser-layout-item.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,MAAM,GAAG,GAAG,2DAA2D,CAAC;AAExE,MAAM,OAAO,GAAG,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC;AAEhD,IAAI,CAAC,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IAC1C,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACtD,MAAM,UAAU,CAAC;gBACf,OAAO;gBACP,IAAI;gBACJ,GAAG,EAAE,GAAG;aACT,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../../.build/test/utils\";\n\nconst URL = \"components-cms-publizistischeinhalte-piteaser-layout-item\";\n\nconst STORIES = [\"with-image\", \"without-image\"];\n\ntest.describe(\"pi-teaser-layout-item\", () => {\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"]}