@oiz/stzh-components 3.0.0 → 3.1.0

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

@@ -0,0 +1,218 @@
+import { h, Host } from "@stencil/core";
+import { hasSlot } from "../../utils/utils";
+/**
+ * @slot heading - Heading text (alternative for heading property)
+ * @slot lead - Lead text (alternative for lead property)
+ * @slot image - Image (rendered within ratio 2:1, hence the different slot name to prevent naming collision)
+ */
+export class StzhPiContentNavigation {
+  constructor() {
+    this.handleCardClick = (originalEvent) => {
+      this.stzhClick.emit({
+        component: "stzh-pi-content-navigation",
+        originalEvent,
+        href: this.href,
+      });
+    };
+    this.href = undefined;
+    this.target = undefined;
+    this.analyticsId = undefined;
+    this.navigationLevel = "1";
+    this.heading = "";
+    this.headingLevel = "3";
+    this.lead = "";
+  }
+  componentDidRender() {
+    requestAnimationFrame(() => {
+      var _a, _b;
+      const objectId = this.analyticsId || ((_a = this.headingTextElement) === null || _a === void 0 ? void 0 : _a.innerText);
+      if (objectId) {
+        (_b = this.titleLinkElement) === null || _b === void 0 ? void 0 : _b.setAttribute("s-object-id", objectId);
+      }
+    });
+  }
+  renderHeading() {
+    const Heading = `h${this.headingLevel}`;
+    const TitleLink = this.href ? "a" : "button";
+    return (h(Heading, { class: "stzh-pi-content-navigation__title" }, h(TitleLink, { ref: el => (this.titleLinkElement = el), class: "stzh-pi-content-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("div", { ref: el => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" })))));
+  }
+  render() {
+    const hasLead = !!this.lead || hasSlot(this.element, "lead");
+    const hasImageSlot = hasSlot(this.element, "image");
+    const isNavigationLevel1or2 = this.navigationLevel === "1" || this.navigationLevel === "2";
+    const hasImage = hasImageSlot && isNavigationLevel1or2;
+    const shouldRenderTitleRatio = isNavigationLevel1or2 && !hasImage;
+    const classes = {
+      "stzh-pi-content-navigation": true,
+      "stzh-pi-content-navigation--has-lead": hasLead,
+      "stzh-pi-content-navigation--has-image": hasImage,
+      "stzh-pi-content-navigation--is-navigation-level-1-or-2": isNavigationLevel1or2,
+    };
+    return (h(Host, { "has-lead": hasLead }, h("article", { class: classes, "aria-label": this.heading, role: "listitem" }, h("div", { class: "stzh-pi-content-navigation__image" }, h("stzh-ratio", { ratio: "2:1" }, h("slot", { name: "image" }))), shouldRenderTitleRatio && (h("stzh-ratio", { class: "stzh-pi-content-navigation__title-ratio", ratio: "2:1" }, this.renderHeading())), h("div", { class: "stzh-pi-content-navigation__wrapper" }, !shouldRenderTitleRatio && this.renderHeading(), h("div", { class: "stzh-pi-content-navigation__lead" }, this.lead ? this.lead : h("slot", { name: "lead" }))), h("div", { class: "stzh-pi-content-navigation__arrow" }, h("stzh-icon", { class: "stzh-pi-content-navigation__arrow-icon", name: "arrow-right" })))));
+  }
+  static get is() { return "stzh-pi-content-navigation"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-pi-content-navigation.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-pi-content-navigation.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Href of card"
+        },
+        "attribute": "href",
+        "reflect": true
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "target if the button is used as link (if href used)"
+        },
+        "attribute": "target",
+        "reflect": false
+      },
+      "analyticsId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "For Adobe Analytics.\nWill be rendered as value of `s-object-id` attribute to the link elements.\nDefault value will be taken from `heading` prop/slot."
+        },
+        "attribute": "analytics-id",
+        "reflect": false
+      },
+      "navigationLevel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"1\" | \"2\" | \"3\" | \"4\"",
+          "resolved": "\"1\" | \"2\" | \"3\" | \"4\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Content navigation level"
+        },
+        "attribute": "navigation-level",
+        "reflect": true,
+        "defaultValue": "\"1\""
+      },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading (alternative for heading slot)"
+        },
+        "attribute": "heading",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "headingLevel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"1\" | \"2\" | \"3\" | \"4\"",
+          "resolved": "\"1\" | \"2\" | \"3\" | \"4\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading level"
+        },
+        "attribute": "heading-level",
+        "reflect": false,
+        "defaultValue": "\"3\""
+      },
+      "lead": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Lead text (alternative for lead slot)"
+        },
+        "attribute": "lead",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhClick",
+        "name": "stzhClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Click event (if href is used)"
+        },
+        "complexType": {
+          "original": "StzhPiCardNavigationClickEvent",
+          "resolved": "{ component: \"stzh-pi-content-navigation\"; originalEvent: MouseEvent; href: string; }",
+          "references": {
+            "StzhPiCardNavigationClickEvent": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhPiCardNavigationClickEvent"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+}
+//# sourceMappingURL=stzh-pi-content-navigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-pi-content-navigation.js","sourceRoot":"","sources":["../../../../src/components/stzh-pi-content-navigation/stzh-pi-content-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiCardNavigationClickEvent } from \"../../index\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n * @slot image - Image (rendered within ratio 2:1, hence the different slot name to prevent naming collision)\n */\n@Component({\n  tag: \"stzh-pi-content-navigation\",\n  styleUrl: \"stzh-pi-content-navigation.scss\",\n  scoped: true,\n})\nexport class StzhPiContentNavigation {\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Content navigation level */\n  @Prop({ reflect: true }) navigationLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"1\";\n\n  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = \"\";\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Lead text (alternative for lead slot) */\n  @Prop() lead: string = \"\";\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhPiCardNavigationClickEvent>;\n\n  private titleLinkElement: HTMLAnchorElement | HTMLButtonElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-pi-content-navigation\",\n      originalEvent,\n      href: this.href,\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  renderHeading(): DocumentFragment {\n    const Heading = `h${this.headingLevel}`;\n    const TitleLink = this.href ? \"a\" : \"button\";\n    return (\n      <Heading class=\"stzh-pi-content-navigation__title\">\n        <TitleLink\n          ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n          class=\"stzh-pi-content-navigation__title-link\"\n          href={this.href}\n          target={this.target}\n          onClick={this.handleCardClick}\n        >\n          <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>\n            {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n          </div>\n        </TitleLink>\n      </Heading>\n    );\n  }\n\n  render() {\n    const hasLead = !!this.lead || hasSlot(this.element, \"lead\");\n    const hasImageSlot = hasSlot(this.element, \"image\");\n    const isNavigationLevel1or2 = this.navigationLevel === \"1\" || this.navigationLevel === \"2\";\n    const hasImage = hasImageSlot && isNavigationLevel1or2;\n    const shouldRenderTitleRatio = isNavigationLevel1or2 && !hasImage;\n\n    const classes = {\n      \"stzh-pi-content-navigation\": true,\n      \"stzh-pi-content-navigation--has-lead\": hasLead,\n      \"stzh-pi-content-navigation--has-image\": hasImage,\n      \"stzh-pi-content-navigation--is-navigation-level-1-or-2\": isNavigationLevel1or2,\n    };\n\n    return (\n      <Host has-lead={hasLead}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          <div class=\"stzh-pi-content-navigation__image\">\n            <stzh-ratio ratio=\"2:1\">\n              <slot name={\"image\"}></slot>\n            </stzh-ratio>\n          </div>\n          {shouldRenderTitleRatio && (\n            <stzh-ratio class=\"stzh-pi-content-navigation__title-ratio\" ratio={\"2:1\"}>\n              {this.renderHeading()}\n            </stzh-ratio>\n          )}\n          <div class=\"stzh-pi-content-navigation__wrapper\">\n            {!shouldRenderTitleRatio && this.renderHeading()}\n            <div class=\"stzh-pi-content-navigation__lead\">{this.lead ? this.lead : <slot name=\"lead\"></slot>}</div>\n          </div>\n\n          <div class=\"stzh-pi-content-navigation__arrow\">\n            <stzh-icon class=\"stzh-pi-content-navigation__arrow-icon\" name=\"arrow-right\"></stzh-icon>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,62 @@
+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-pi-content-navigation';
+const story = createComponentStory(COMPONENT_NAME);
+
+const TEMPLATE = `
+<stzh-pi-content-navigation>
+  <img slot="image" src="media/images/example2.jpg" alt="Example image" />
+</stzh-pi-content-navigation>
+`;
+
+const TEMPLATE_WITHOUT_IMAGE = `
+<stzh-pi-content-navigation>
+</stzh-pi-content-navigation>
+`;
+
+export default {
+  title: 'Components/PublizistischeInhalte/PiContentNavigation',
+  component: COMPONENT_NAME,
+  parameters: {
+    stzh: {
+      activeTheme: 'stzh-theme-pi-lemongrass'
+    },
+    layout: 'padded',
+    actions: {
+      handles: ['stzhClick']
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('7956-291929'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [withActions, withDesign]
+};
+
+export const WithImage = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    href: '#',
+    heading: 'Lorem ipsum dolor si amet',
+    lead: 'Lorem ipsum dolor si amet, consectetur adipiscing elit'
+  }
+};
+
+export const WithoutImage = {
+  render: (args) => story(args, TEMPLATE_WITHOUT_IMAGE),
+  args: {
+    href: '#',
+    heading: 'Lorem ipsum dolor si amet',
+    lead: 'Lorem ipsum dolor si amet, consectetur adipiscing elit'
+  }
+};