@ptcwebops/ptcw-design 4.3.0 → 4.3.2

package/dist/collection/components/organism-bundles/homepage-jumbotron/homepage-jumbotron.js

@@ -0,0 +1,134 @@
+import { h, Host } from '@stencil/core';
+import Swiper from 'swiper';
+import 'swiper/swiper-bundle.css';
+export class HomepageJumbotron {
+  constructor() {
+    this.bgVideoSrc = '';
+    this.bgSrc = 'https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80';
+    this.jumbotron = 'light';
+    this.isIframe = false;
+  }
+  componentDidLoad() {
+    this.initSlider();
+  }
+  initSlider() {
+    if (this.swiperContainerRef) {
+      this.mySwiper = new Swiper(this.swiperContainerRef, {
+        slidesPerView: 1,
+        spaceBetween: 2,
+        loop: true,
+        pagination: {
+          el: '.swiper-pagination',
+          clickable: true,
+        },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+        breakpoints: {
+          768: {
+            slidesPerView: 2,
+          },
+          992: {
+            slidesPerView: 3,
+          },
+        },
+      });
+      console.log('running swiper');
+    }
+  }
+  render() {
+    return (h(Host, null, h("ptc-jumbotron", Object.assign({ "jumbotron-type": this.jumbotron }, (!!this.bgVideoSrc && { bgVideoSrc: this.bgVideoSrc }), (!this.bgVideoSrc && !!this.bgSrc && { bgSrc: this.bgSrc }), { "is-iframe": this.isIframe, "sub-title": "" //sub title is coming from slot here
+      ,
+      "play-button-title": "play1", "pause-button-title": "pause text" }), h("slot", { name: "breadcrumb" }), h("slot", { name: "main-title" }), h("slot", { name: "hp-sub-title" }), h("ptc-button", { slot: "j-cta", type: "link", color: "ptc-quaternary", "link-href": "https://www.ptc.com", target: "_blank" }, "Lorem ipsum dolor sit amet")), h("div", { class: "swiper-container", ref: el => (this.swiperContainerRef = el) }, h("div", { class: "swiper-wrapper" }, h("div", { class: "swiper-slide" }, h("ptc-info-tile", { title: "Gravida Enim", description: "Neque rhoncus adipiscing ullamcorper lectus", variant: "image", "img-src": "https://placehold.co/500", link: "#test" })), h("div", { class: "swiper-slide" }, h("ptc-info-tile", { title: "Gravida Enim", description: "Neque rhoncus adipiscing ullamcorper lectus", variant: "image", "img-src": "https://placehold.co/500", link: "#test" })), h("div", { class: "swiper-slide" }, h("ptc-info-tile", { title: "Gravida Enim", description: "Neque rhoncus adipiscing ullamcorper lectus", variant: "image", "img-src": "https://placehold.co/500", link: "#test" }))), h("div", { class: "swiper-pagination" }), h("div", { class: "swiper-button-next" }), h("div", { class: "swiper-button-prev" }))));
+  }
+  static get is() { return "homepage-jumbotron"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["homepage-jumbotron.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["homepage-jumbotron.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "bgVideoSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "bg-video-src",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "bgSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "bg-src",
+        "reflect": false,
+        "defaultValue": "'https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80'"
+      },
+      "jumbotron": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "jumbotron",
+        "reflect": false,
+        "defaultValue": "'light'"
+      },
+      "isIframe": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-iframe",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/organism-bundles/homepage-toggled-content/homepage-toggled-content.css

@@ -0,0 +1,228 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link, ptc-square-card {
+  word-break: break-word;
+  hyphens: manual;
+  -webkit-hyphens: manual;
+  -moz-hyphens: manual;
+  -ms-hyphens: manual;
+}
+@supports (hyphenate-limit-chars: 12 3 3) {
+  h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link, ptc-square-card {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    /* For Safari */
+    -webkit-hyphenate-limit-after: 3;
+    /* For Safari */
+    hyphenate-limit-chars: 12 3 3;
+    hyphenate-limit-lines: 2;
+    hyphenate-limit-last: always;
+    hyphenate-limit-zone: 6%;
+    -webkit-hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+    -webkit-hyphenate-limit-chars: 12 3 3;
+    -webkit-hyphenate-limit-lines: 2;
+    -moz-hyphens: auto;
+    -moz-hyphenate-limit-chars: 12 3 3;
+    -moz-hyphenate-limit-lines: 2;
+    -ms-hyphens: auto;
+    -ms-hyphenate-limit-chars: 12 3 3;
+    -ms-hyphenate-limit-lines: 2;
+  }
+}
+
+::slotted(.title) {
+  color: var(--color-gray-10);
+  font-family: Raleway;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 800;
+  line-height: 40px;
+  /* 125% */
+}
+
+::slotted(.description) {
+  color: var(--color-gray-10);
+  font-family: Raleway;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 27px;
+  /* 150% */
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 20px;
+}
+@media only screen and (min-width: 992px) {
+  .header {
+    width: 70%;
+  }
+}
+
+.tabs {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 64px;
+}
+
+.tabs-desktop {
+  display: flex;
+  gap: 24px;
+}
+
+.tabs-mobile {
+  display: none;
+  position: relative;
+}
+
+.dropdown-button {
+  background: linear-gradient(180deg, #197BC0 0%, #4795CD 100%);
+  color: white;
+  padding: 24px;
+  border: none;
+  border-radius: var(--ptc-border-radius-standard) var(--ptc-border-radius-standard) 0px 0px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  font-family: var(--ptc-font-latin);
+  font-size: var(--ptc-font-size-small);
+  font-weight: var(--ptc-font-weight-extrabold);
+}
+
+.dropdown-button .arrow {
+  margin-left: 24px;
+}
+
+.dropdown-menu {
+  position: absolute;
+  width: calc(100% - 2px);
+  background-color: var(--color-white);
+  color: var(--color-gray-10);
+  display: flex;
+  flex-direction: column;
+  border-radius: 0px 0px var(--ptc-border-radius-standard) var(--ptc-border-radius-standard);
+  border: 1px solid var(--color-gray-10);
+  border-top: 0px;
+}
+.dropdown-menu .dropdown-item {
+  color: var(--gray-10-text-gray, #323B42);
+  font-family: var(--ptc-font-latin);
+  font-size: var(--ptc-font-size-small);
+  font-weight: var(--ptc-font-weight-regular);
+}
+
+.dropdown-item {
+  padding: 10px;
+  cursor: pointer;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.dropdown-item:last-child {
+  border-bottom: none;
+}
+
+.dropdown-item:hover {
+  font-weight: var(--ptc-font-weight-bold);
+}
+
+@media (max-width: 992px) {
+  .tabs-desktop {
+    display: none;
+  }
+
+  .tabs-mobile {
+    display: block;
+    width: 100%;
+  }
+}
+.content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  overflow: hidden;
+}
+
+.tab-content {
+  display: flex;
+  flex-direction: column;
+}
+@media only screen and (min-width: 992px) {
+  .tab-content {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    width: 100%;
+    /* align-content: center; */
+    justify-content: center;
+    align-items: center;
+    gap: 56px;
+  }
+}
+.tab-content img {
+  max-width: 100%;
+  width: 100%;
+  height: auto;
+  margin-bottom: 20px;
+}
+@media only screen and (min-width: 992px) {
+  .tab-content img {
+    width: 580px;
+    height: 733px;
+    flex-shrink: 0;
+  }
+}
+
+.content-detail {
+  text-align: left;
+}
+@media only screen and (min-width: 992px) {
+  .content-detail {
+    flex-grow: 1;
+    overflow: hidden;
+    word-break: break-word;
+  }
+}
+.content-detail p,
+.content-detail h2 {
+  margin-block-start: unset;
+  margin-block-end: unset;
+}
+.content-detail h2 {
+  margin-bottom: 16px;
+}
+.content-detail p {
+  margin-bottom: 32px;
+}
+
+.info-card-wrapper {
+  margin-top: 72px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+}

package/dist/collection/components/organism-bundles/homepage-toggled-content/homepage-toggled-content.js

@@ -0,0 +1,47 @@
+import { h } from '@stencil/core';
+export class HomepageToggledContent {
+  constructor() {
+    this.activeTab = 0;
+    this.dropdownOpen = false;
+  }
+  handleTabSelected(tabIndex) {
+    this.activeTab = tabIndex;
+    this.dropdownOpen = false; // Close dropdown on selection
+  }
+  toggleDropdown() {
+    this.dropdownOpen = !this.dropdownOpen;
+  }
+  getTabs() {
+    const tabs = Array.from(this.el.querySelectorAll('[slot^="tab-label"]'));
+    return tabs.map((tab, index) => ({
+      label: tab.textContent,
+      index,
+    }));
+  }
+  render() {
+    const upArrow = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "11", viewBox: "0 0 15 11", fill: "none" }, h("path", { d: "M13 8.5L7.34315 2.71178L1.68629 8.5", stroke: "white", "stroke-width": "3", "stroke-linecap": "round" })));
+    const downArrow = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "11", viewBox: "0 0 15 11", fill: "none" }, h("path", { d: "M13 2.5L7.34315 8.28822L1.68629 2.5", stroke: "white", "stroke-width": "3", "stroke-linecap": "round" })));
+    const tabs = this.getTabs();
+    //console.log(tabs);
+    return (h("div", null, h("div", { class: "header" }, h("h2", null, h("slot", { name: "title" })), h("p", null, h("slot", { name: "description" }))), h("div", { class: "tabs" }, h("div", { class: "tabs-desktop" }, tabs.map(tab => (h("homepage-clickable-tab", { label: tab.label, active: this.activeTab === tab.index, onClick: () => this.handleTabSelected(tab.index) })))), h("div", { class: "tabs-mobile" }, h("button", { class: "dropdown-button", onClick: () => this.toggleDropdown() }, h("slot", { name: `tab-label-${this.activeTab}` }), h("span", { class: "arrow" }, this.dropdownOpen ? upArrow : downArrow)), this.dropdownOpen && (h("div", { class: "dropdown-menu" }, tabs.map(tab => (h("div", { class: "dropdown-item", onClick: () => this.handleTabSelected(tab.index) }, h("slot", { name: `tab-label-${tab.index}` })))))))), h("div", { class: "content" }, tabs.map((tab, index) => (h("div", { style: { display: this.activeTab === index ? 'flex' : 'none' }, class: "tab-content" }, h("img", { src: `https://placehold.co/580x733`, alt: `Image ${index + 1}` }), h("div", { class: "content-detail" }, h("div", { hidden: true }, tab.label), h("h2", null, h("slot", { name: `tab-title-${index}` })), h("p", null, h("slot", { name: `tab-content-${index}` })), h("ptc-button", { type: "link", color: "ptc-quaternary", "link-href": "https://www.ptc.com", target: "_blank" }, h("slot", { name: `tab-button-${index}` })), h("div", { class: "info-card-wrapper" }, h("ptc-info-tile", { "tile-title": "Gravida Enim", description: "Neque rhoncus adipiscing ullamcorper lectus", variant: "text" }), h("ptc-info-tile", { "tile-title": "Commodo Adipiscing", description: "Justo fames sodales neque faucibus nulla purus gravida", variant: "text" })))))))));
+  }
+  static get is() { return "homepage-toggled-content"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["homepage-toggled-content.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["homepage-toggled-content.css"]
+    };
+  }
+  static get states() {
+    return {
+      "activeTab": {},
+      "dropdownOpen": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/ptc-info-tile/ptc-info-tile.css

@@ -0,0 +1,136 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link, ptc-square-card {
+  word-break: break-word;
+  hyphens: manual;
+  -webkit-hyphens: manual;
+  -moz-hyphens: manual;
+  -ms-hyphens: manual;
+}
+@supports (hyphenate-limit-chars: 12 3 3) {
+  h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link, ptc-square-card {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    /* For Safari */
+    -webkit-hyphenate-limit-after: 3;
+    /* For Safari */
+    hyphenate-limit-chars: 12 3 3;
+    hyphenate-limit-lines: 2;
+    hyphenate-limit-last: always;
+    hyphenate-limit-zone: 6%;
+    -webkit-hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+    -webkit-hyphenate-limit-chars: 12 3 3;
+    -webkit-hyphenate-limit-lines: 2;
+    -moz-hyphens: auto;
+    -moz-hyphenate-limit-chars: 12 3 3;
+    -moz-hyphenate-limit-lines: 2;
+    -ms-hyphens: auto;
+    -ms-hyphenate-limit-chars: 12 3 3;
+    -ms-hyphenate-limit-lines: 2;
+  }
+}
+
+:host {
+  display: block;
+}
+
+.tile {
+  position: relative;
+  background-color: white;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: border 0.3s;
+  max-width: 360px;
+  height: 116px;
+}
+.tile.image {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  align-items: center;
+}
+.tile.image .tile-content {
+  border-bottom: 2px solid var(--color-white);
+  background: #FFF;
+  height: 82px;
+}
+.tile.image:hover .tile-content {
+  border-bottom: 2px solid var(--Blue-6, #4795CD);
+  background: #FFF;
+}
+.tile.image:active .tile-content, .tile.image:focus .tile-content {
+  border-bottom: 2px solid var(--Blue-6, #4795CD);
+  background: var(--Gray-1, #F6F6F6);
+}
+.tile.text {
+  background-color: var(--color-white);
+  border: 1px solid var(--color-gray-03);
+  width: 268px;
+}
+.tile.text:hover {
+  background-color: var(--color-gray-01);
+  border: 1px solid var(--color-gray-07);
+}
+.tile img {
+  width: 120px;
+  height: 116px;
+}
+.tile h3 {
+  margin: 0;
+  font-size: 1.2em;
+}
+.tile p {
+  margin: 0.5em 0 0;
+  color: #666;
+}
+.tile .link-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+.tile .tile-content {
+  padding: 16px;
+}
+.tile .tile-content h3 {
+  color: var(--color-blue-07);
+  font-family: Raleway;
+  font-size: 14px;
+  font-weight: 500;
+}
+.tile .tile-content p {
+  color: var(--color-gray-10);
+  font-family: Raleway;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  /* 150% */
+}

package/dist/collection/components/ptc-info-tile/ptc-info-tile.js

@@ -0,0 +1,136 @@
+import { Host, h } from '@stencil/core';
+export class PtcInfoTile {
+  constructor() {
+    this.tileTitle = undefined;
+    this.description = undefined;
+    this.imgSrc = undefined;
+    this.link = undefined;
+    this.variant = undefined;
+  }
+  handleClick() {
+    this.tileClick.emit();
+  }
+  render() {
+    const content = (h("div", { class: "tile-content" }, h("h3", null, this.tileTitle), h("p", null, this.description)));
+    return (h(Host, null, h("div", { class: `tile ${this.variant}`, onClick: () => this.handleClick() }, this.variant === 'image' && this.imgSrc && h("img", { src: this.imgSrc, alt: this.tileTitle }), content, this.link && (h("a", { href: this.link, class: "link-overlay" })))));
+  }
+  static get is() { return "ptc-info-tile"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-info-tile.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-info-tile.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "tileTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tile-title",
+        "reflect": false
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "description",
+        "reflect": false
+      },
+      "imgSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "img-src",
+        "reflect": false
+      },
+      "link": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "link",
+        "reflect": false
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'image' | 'text'",
+          "resolved": "\"image\" | \"text\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "variant",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tileClick",
+        "name": "tileClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+}