@ptcwebops/ptcw-design 1.5.8 → 1.6.0

package/dist/collection/components/ptc-span/ptc-span.js

@@ -3,6 +3,7 @@ export class PtcSpan {
   constructor() {
     this.spanStyle = 'tag-style';
     this.display = 'inline';
+    this.fontWeight = 'w-4';
     this.styles = undefined;
   }
   render() {
@@ -12,6 +13,7 @@ export class PtcSpan {
   getCssClassMap() {
     return {
       [this.spanStyle]: true,
+      [this.fontWeight]: true,
       [this.display]: true,
     };
   }
@@ -33,8 +35,8 @@ export class PtcSpan {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'link-style' | 'tag-style' | 'nav-style' | 'plm-hub-style' | 'plm-hub-style-smaller'",
-          "resolved": "\"link-style\" | \"nav-style\" | \"plm-hub-style\" | \"plm-hub-style-smaller\" | \"tag-style\"",
+          "original": "'link-style' | 'tag-style' | 'nav-style' | 'plm-hub-style' | 'plm-hub-style-smaller' | 'blog-tag'",
+          "resolved": "\"blog-tag\" | \"link-style\" | \"nav-style\" | \"plm-hub-style\" | \"plm-hub-style-smaller\" | \"tag-style\"",
           "references": {}
         },
         "required": false,
@@ -65,6 +67,24 @@ export class PtcSpan {
         "reflect": false,
         "defaultValue": "'inline'"
       },
+      "fontWeight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'w-3' | 'w-4' | 'w-5' | 'w-6' | 'w-7' | 'w-8' | 'w-9'",
+          "resolved": "\"w-3\" | \"w-4\" | \"w-5\" | \"w-6\" | \"w-7\" | \"w-8\" | \"w-9\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Span weight"
+        },
+        "attribute": "font-weight",
+        "reflect": false,
+        "defaultValue": "'w-4'"
+      },
       "styles": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/ptc-sticky-title/ptc-sticky-title.css

@@ -0,0 +1,115 @@
+:host {
+  display: block;
+  position: relative;
+  z-index: 3;
+}
+
+.sticky-header-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 0;
+  padding: 0 24px;
+  background-color: transparent;
+  transition: height 0.3s ease-in-out;
+  display: flex;
+  align-items: flex-end;
+  box-sizing: border-box;
+}
+@media only screen and (min-width: 768px) {
+  .sticky-header-container {
+    align-items: center;
+  }
+}
+
+.sticky-header-container.sticky {
+  position: fixed;
+  height: 74px;
+  background-image: linear-gradient(272deg, #3b4550, #1a1a1a);
+  z-index: 1;
+}
+
+.sticky-header-title {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+}
+@media only screen and (min-width: 768px) {
+  .sticky-header-title {
+    justify-content: center;
+  }
+}
+.sticky-header-title .logo-image {
+  position: absolute;
+  left: 0px;
+  visibility: hidden;
+  transform: translateY(-25px);
+}
+@media only screen and (min-width: 768px) {
+  .sticky-header-title .logo-image {
+    transform: translateY(0px);
+  }
+}
+.sticky-header-title .logo-image.is-visible {
+  visibility: visible;
+}
+.sticky-header-title .logo-image img {
+  max-height: 24px;
+  width: auto;
+}
+@media only screen and (min-width: 768px) {
+  .sticky-header-title .logo-image img {
+    max-height: 100%;
+    width: 60px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .sticky-header-title .logo-image img {
+    width: 90px;
+  }
+}
+.sticky-header-title .share-icons {
+  position: absolute;
+  right: 0px;
+  visibility: visible;
+  transform: translateY(-25px);
+  transition: visibility 0.3s ease-in-out;
+}
+@media only screen and (min-width: 768px) {
+  .sticky-header-title .share-icons {
+    visibility: hidden;
+  }
+}
+.sticky-header-title .share-icons ptc-social-share {
+  margin-left: var(--ptc-element-spacing-03);
+}
+.sticky-header-title h1 {
+  color: #ffffff;
+  font-size: var(--ptc-font-size-small);
+  font-weight: var(--ptc-font-weight-bold);
+  margin-top: var(--ptc-element-spacing-05);
+  margin-bottom: var(--ptc-element-spacing-05);
+}
+@media only screen and (min-width: 768px) {
+  .sticky-header-title h1 {
+    margin-top: 0.67em;
+    margin-bottom: 0.67em;
+    font-size: var(--ptc-font-size-large);
+  }
+}
+
+ptc-progress-bar {
+  display: none;
+  width: 100%;
+}
+
+.sticky ptc-progress-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  display: block;
+}

package/dist/collection/components/ptc-sticky-title/ptc-sticky-title.js

@@ -0,0 +1,89 @@
+import { Host, h, getAssetPath } from '@stencil/core';
+export class PtcStickyTitle {
+  constructor() {
+    this.barTitle = 'Bar Title';
+    this.isSticky = false;
+    this.logo = 'logo.png';
+  }
+  handleScroll() {
+    const scrollTop = document.documentElement.scrollTop;
+    const threshold = 260;
+    if (scrollTop > threshold) {
+      this.isSticky = true;
+    }
+    else {
+      this.isSticky = false;
+    }
+  }
+  render() {
+    const logoImg = getAssetPath(`./media/${this.logo}`);
+    return (h(Host, null, h("div", { class: `sticky-header-container ${this.isSticky ? 'sticky' : ''}` }, h("div", { class: "sticky-header-title" }, h("div", { class: `logo-image ${this.isSticky ? 'is-visible' : ''}` }, h("img", { src: logoImg })), h("h1", null, this.barTitle), h("div", { class: `share-icons is-flex ${this.isSticky ? 'is-visible' : ''}` }, h("ptc-social-share", { class: "icon", display: "inline-block", "share-type": "blog-facebook", text: "summary", url: "https://www.ptc.com", "share-title": "title goes here", source: "linkedin source", recipient: "yqiantest@ptc.com" }), h("ptc-social-share", { class: "icon", display: "inline-block", "share-type": "blog-twitter", text: "summary", url: "https://www.ptc.com", "share-title": "title goes here", source: "linkedin source", recipient: "yqiantest@ptc.com" }), h("ptc-social-share", { class: "icon", display: "inline-block", "share-type": "blog-linkedin", text: "summary", url: "https://www.ptc.com", "share-title": "title goes here", source: "linkedin source", recipient: "yqiantest@ptc.com" }), h("ptc-social-share", { class: "icon", display: "inline-block", "share-type": "blog-mail", text: "summary", url: "https://www.ptc.com", "share-title": "title goes here", source: "linkedin source", recipient: "yqiantest@ptc.com" }))), h("ptc-progress-bar", null))));
+  }
+  static get is() { return "ptc-sticky-title"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-sticky-title.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-sticky-title.css"]
+    };
+  }
+  static get assetsDirs() { return ["media"]; }
+  static get properties() {
+    return {
+      "barTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "bar title"
+        },
+        "attribute": "bar-title",
+        "reflect": false,
+        "defaultValue": "'Bar Title'"
+      },
+      "logo": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "logo",
+        "reflect": false,
+        "defaultValue": "'logo.png'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isSticky": {}
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "scroll",
+        "method": "handleScroll",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

package/dist/custom-elements/index.d.ts

@@ -362,6 +362,12 @@ export const PtcProductSidebar: {
   new (): PtcProductSidebar;
 };
 
+interface PtcProgressBar extends Components.PtcProgressBar, HTMLElement {}
+export const PtcProgressBar: {
+  prototype: PtcProgressBar;
+  new (): PtcProgressBar;
+};
+
 interface PtcQuote extends Components.PtcQuote, HTMLElement {}
 export const PtcQuote: {
   prototype: PtcQuote;
@@ -398,6 +404,12 @@ export const PtcSkeleton: {
   new (): PtcSkeleton;
 };
 
+interface PtcSlitCard extends Components.PtcSlitCard, HTMLElement {}
+export const PtcSlitCard: {
+  prototype: PtcSlitCard;
+  new (): PtcSlitCard;
+};
+
 interface PtcSocialShare extends Components.PtcSocialShare, HTMLElement {}
 export const PtcSocialShare: {
   prototype: PtcSocialShare;
@@ -428,6 +440,12 @@ export const PtcStickySection: {
   new (): PtcStickySection;
 };
 
+interface PtcStickyTitle extends Components.PtcStickyTitle, HTMLElement {}
+export const PtcStickyTitle: {
+  prototype: PtcStickyTitle;
+  new (): PtcStickyTitle;
+};
+
 interface PtcSubnav extends Components.PtcSubnav, HTMLElement {}
 export const PtcSubnav: {
   prototype: PtcSubnav;