@ptcwebops/ptcw-design 4.6.8 → 4.7.0

package/dist/collection/components/ptc-nav-card/ptc-nav-card.css

@@ -61,64 +61,22 @@ ptc-link, ptc-square-card,
   position: relative;
 }
 :host .nav-card-wrap {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  font-size: 16px;
-  justify-content: center;
-  letter-spacing: 1.2px;
-  line-height: 1.5;
-  list-style: none;
-  margin: 2.5px;
-  padding: 16px 40px 16px 0;
-  text-align: left;
+  align-items: center;
   width: 100%;
+  border-radius: var(--ptc-border-radius-standard);
+  background-color: var(--color-gray-12);
+  transition: background-color var(--ptc-transition-medium) var(--ptc-ease-inout);
 }
-:host .nav-card-wrap:active {
-  border-radius: 4px;
-  background: var(--color-gray-11);
+:host .nav-card-wrap:hover {
+  background-color: var(--color-gray-08);
 }
 @media only screen and (min-width: 1200px) {
   :host .nav-card-wrap {
-    display: flex;
-    width: 100%;
-    border-radius: var(--ptc-border-radius-standard);
-    background-color: var(--color-gray-12);
-    transition: background-color var(--ptc-transition-medium) var(--ptc-ease-inout);
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    border-radius: 4px;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    font-size: 12px;
-    justify-content: center;
-    letter-spacing: 1.2px;
-    line-height: 18px;
-    list-style: none;
-    padding: 15px;
-    text-align: left;
-    background: transparent;
-    outline: 5px solid transparent;
-    border: 2px solid transparent;
+    background-color: var(--color-gray-10);
   }
   :host .nav-card-wrap:hover {
-    background-color: var(--color-gray-11);
-    border-radius: 4px;
-  }
-  :host .nav-card-wrap:active {
-    border-radius: 4px;
-    background: var(--color-gray-10);
+    background-color: var(--color-gray-08);
   }
 }
 :host .nav-card-wrap h4,
@@ -129,28 +87,19 @@ ptc-link, ptc-square-card,
   text-decoration: none;
 }
 :host .nav-card-wrap .media-card-wrap {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  padding: 1rem 1.5rem 1.125rem 1.5rem;
+  width: 100%;
+  height: 100%;
   display: flex;
-  -ms-flex-direction: row;
-  flex-direction: row;
+  align-items: center;
 }
 @media only screen and (min-width: 1200px) {
   :host .nav-card-wrap .media-card-wrap {
     padding: 1rem;
-    padding: 1rem 1.5rem 1.125rem 1.5rem;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
   }
 }
 :host .nav-card-wrap .media-card-wrap h4 {
+  margin-bottom: 0.25rem;
   font-weight: 800;
   display: flex;
   align-items: center;
@@ -171,7 +120,7 @@ ptc-link, ptc-square-card,
   }
 }
 :host .nav-card-wrap .media-card-wrap .card-logo {
-  padding-right: 20px;
+  padding-right: 1.5rem;
 }
 @media only screen and (min-width: 1200px) {
   :host .nav-card-wrap .media-card-wrap .card-logo {
@@ -190,80 +139,13 @@ ptc-link, ptc-square-card,
   }
 }
 
-:host(.media-card) .nav-card-wrap .media-card-wrap {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-@media only screen and (min-width: 1200px) {
-  :host(.media-card) .nav-card-wrap .media-card-wrap {
-    padding: 0px;
-  }
-  :host(.media-card) .nav-card-wrap .media-card-wrap:focus {
-    border: none !important;
-    outline: none !important;
-  }
-}
-:host(.media-card) .nav-card-wrap .media-card-wrap .card-logo img {
-  height: auto;
-  width: 24px;
-  max-width: 24px;
-  min-width: 24px;
-}
-:host(.media-card) .nav-card-wrap .media-card-wrap h4 {
-  font-size: 16px;
-  font-stretch: normal;
-  font-style: normal;
-  font-weight: 800;
-  letter-spacing: normal;
-  line-height: 24px;
-  text-align: left;
-  word-break: break-word;
-  hyphens: auto;
-  margin-bottom: 0px;
-}
-@media only screen and (min-width: 1200px) {
-  :host(.media-card) .nav-card-wrap .media-card-wrap h4 {
-    font-size: 12px;
-    hyphens: auto;
-    line-height: 18px;
-    text-align: left;
-    margin-bottom: 0rem;
-    font-stretch: normal;
-    font-style: normal;
-    letter-spacing: normal;
-  }
-}
-:host(.media-card) .nav-card-wrap .media-card-wrap p {
-  font-size: 14px;
-  font-stretch: normal;
-  font-style: normal;
-  font-weight: 400;
-  -webkit-hyphens: auto;
-  -ms-hyphens: auto;
-  hyphens: auto;
-  letter-spacing: normal;
-  line-height: 21px;
-  text-align: left;
-  word-break: break-word;
+:host(.media-card) .nav-card-wrap {
+  min-height: 99px;
+  box-sizing: border-box;
 }
 @media only screen and (min-width: 1200px) {
-  :host(.media-card) .nav-card-wrap .media-card-wrap p {
-    font-size: 12px;
-    font-stretch: normal;
-    font-style: normal;
-    font-weight: 400;
-    letter-spacing: normal;
-    line-height: 18px;
-    margin-bottom: 0;
-    text-align: left;
+  :host(.media-card) .nav-card-wrap {
+    min-height: 80px;
   }
 }
 
@@ -295,46 +177,49 @@ ptc-link, ptc-square-card,
   margin-left: 0.375rem;
 }
 
-:host(.links-card) .nav-card-wrap .links-card-wrap {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: left;
-  -ms-flex-pack: left;
-  justify-content: left;
-  background: transparent;
+:host(.links-card) .nav-card-wrap {
+  background-color: transparent;
+  align-items: flex-start;
+  padding: 1rem 1.5rem 1.5rem 1.5rem;
+  border-bottom: 1px solid var(--color-gray-07);
+  border-radius: 0;
+  margin: 0 -1.5rem;
+  transition: background-color var(--ptc-transition-medium) var(--ptc-ease-inout);
+}
+@media only screen and (min-width: 1200px) {
+  :host(.links-card) .nav-card-wrap {
+    margin: 0;
+    padding: 1.5rem;
+    border: 1px solid var(--color-gray-10);
+    border-radius: var(--ptc-border-radius-standard);
+  }
+}
+:host(.links-card) .nav-card-wrap:hover {
+  background-color: transparent;
 }
 :host(.links-card) .nav-card-wrap h3 {
-  margin: 0;
+  margin: 0 0 8px 0;
   display: inline-block;
   font-weight: 800;
+  font-size: 20px;
   color: var(--color-white);
-  font-size: 16px;
-  font-style: normal;
-  letter-spacing: normal;
-  line-height: normal;
-  position: relative;
-  text-align: left;
 }
 @media only screen and (min-width: 1200px) {
   :host(.links-card) .nav-card-wrap h3 {
-    display: inline-block;
-    font-size: 12px;
-    line-height: 1.5;
-    -ms-flex-item-align: center;
-    align-self: center;
+    font-size: 15px;
+    margin: 0 0 10px 0;
   }
 }
 :host(.links-card) .nav-card-wrap h3 svg {
-  margin-left: 6px;
-  margin-bottom: 3px;
+  margin-left: 0.375rem;
   vertical-align: middle;
-  width: 9.375px;
-  height: 11.25px;
+}
+:host(.links-card) .nav-card-wrap h3 a {
+  border-bottom: 1.5px solid transparent;
+  transition: border-color var(--ptc-transition-medium) var(--ptc-ease-inout);
+}
+:host(.links-card) .nav-card-wrap h3 a:hover {
+  border-color: var(--color-green-06);
 }
 :host(.links-card) ::slotted(ptc-link) {
   padding: 8px 0;

package/dist/collection/components/ptc-nav-card/ptc-nav-card.js

@@ -26,9 +26,9 @@ export class PtcNavCard {
   render() {
     return (h(Host, { class: this.cardType }, h("div", { class: "nav-card-wrap" }, this.cardType == 'links-card' ?
       h("div", { class: "links-card-wrap" }, h("h3", null, (this.cardHref && !(this.cardHref.startsWith('#'))) ?
-        (h("a", { href: this.cardHref, title: this.linkTitle, tabIndex: -1 }, this.heading, h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" })))) : (this.heading)), h("slot", null))
+        (h("a", { href: this.cardHref, title: this.linkTitle }, this.heading, h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" })))) : (this.heading)), h("slot", null))
       :
-        h("a", { href: this.cardHref, title: this.linkTitle, tabIndex: -1, class: "media-card-wrap" }, this.cardLogo &&
+        h("a", { href: this.cardHref, title: this.linkTitle, class: "media-card-wrap" }, this.cardLogo &&
           h("div", { class: "card-logo" }, h("img", { src: this.cardLogo, alt: this.logoAlt })), h("div", { class: "card-content" }, h("h4", null, this.heading, this.cardType == "cta-card" &&
           h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" }))), this.description &&
           h("p", null, this.description))))));

package/dist/collection/components/ptc-overlay/ptc-overlay.css

@@ -173,6 +173,14 @@ ptc-link, ptc-square-card,
   border-radius: var(--ptc-border-radius-large);
 }
 
+:host(.radius-pill) {
+  border-radius: var(--ptc-border-radius-pill);
+}
+
+:host(.radius-circle) {
+  border-radius: var(--ptc-border-radius-circle);
+}
+
 :host(.z-index-auto) {
   z-index: auto;
 }

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

@@ -55,8 +55,8 @@ export class PtcOverlay {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'radius-standard' | 'radius-large'",
-          "resolved": "\"radius-large\" | \"radius-standard\"",
+          "original": "'radius-standard' | 'radius-large'| 'radius-pill' | 'radius-circle'",
+          "resolved": "\"radius-circle\" | \"radius-large\" | \"radius-pill\" | \"radius-standard\"",
           "references": {}
         },
         "required": false,

package/dist/collection/components/ptc-picture/ptc-picture.css

@@ -120,6 +120,14 @@ img {
   border-radius: var(--ptc-border-radius-large);
 }
 
+.radius-pill {
+  border-radius: var(--ptc-border-radius-pill);
+}
+
+.radius-circle {
+  border-radius: var(--ptc-border-radius-circle);
+}
+
 .is-full-height {
   height: 100%;
 }

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

@@ -309,8 +309,8 @@ export class PtcPicture {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'radius-standard' | 'radius-large'",
-          "resolved": "\"radius-large\" | \"radius-standard\"",
+          "original": "'radius-standard' | 'radius-large' | 'radius-pill' | 'radius-circle'",
+          "resolved": "\"radius-circle\" | \"radius-large\" | \"radius-pill\" | \"radius-standard\"",
           "references": {}
         },
         "required": false,

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

@@ -1,17 +1,32 @@
 import { h, Host } from '@stencil/core';
 export class PtcStickySection {
+  constructor() {
+    this.hasPreloader = false;
+  }
   componentDidLoad() {
+    if (this.stickyEl.classList.contains('sticky')) {
+      this.stickyEl.classList.remove('sticky');
+    }
     let that = this;
-    setTimeout(() => {
-      that.stickyEl = that.el.shadowRoot.querySelector('.stickyEl');
-      that.originalPosition = that.stickyEl.offsetTop;
-      window.addEventListener('scroll', that.handleScroll);
-    }, 1500);
-    setTimeout(() => {
-      that.stickyEl = that.el.shadowRoot.querySelector('.stickyEl');
-      that.originalPosition = that.stickyEl.offsetTop;
-      window.addEventListener('scroll', that.handleScroll);
-    }, 3100);
+    if (this.hasPreloader) {
+      setTimeout(() => {
+        that.stickyEl = that.el.shadowRoot.querySelector('.stickyEl');
+        that.originalPosition = this.elPosition(that.stickyEl);
+        window.addEventListener('scroll', that.handleScroll);
+      }, 3100);
+    }
+    else {
+      setTimeout(() => {
+        that.stickyEl = that.el.shadowRoot.querySelector('.stickyEl');
+        that.originalPosition = that.stickyEl.offsetTop;
+        window.addEventListener('scroll', that.handleScroll);
+      }, 1500);
+    }
+  }
+  elPosition(element) {
+    const rect = element.getBoundingClientRect();
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    return rect.top + scrollTop;
   }
   disconnectedCallback() {
     window.removeEventListener('scroll', this.handleScroll);
@@ -26,6 +41,9 @@ export class PtcStickySection {
       }
     }
   }
+  handleResize() {
+    this.handleScroll();
+  }
   render() {
     return (h(Host, null, h("div", { class: "stickyEl", ref: el => (this.stickyEl = el) }, h("slot", null))));
   }
@@ -49,6 +67,12 @@ export class PtcStickySection {
         "target": "window",
         "capture": false,
         "passive": true
+      }, {
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
       }];
   }
 }

package/dist/collection/components/ptc-text-copy-with-background/ptc-text-copy-with-background.css

@@ -179,8 +179,24 @@ ptc-link, ptc-square-card,
 
 :host(.bottom-right) .tcb-top-slit {
   top: auto;
-  bottom: 0;
-  transform: scale(1.5, 1.5);
+  bottom: -1px;
+  transform: scale(1.5, 1);
+}
+
+:host(.bottom-left) .tcb-top-slit {
+  top: auto;
+  bottom: -1px;
+  transform: scale(1.5, 1) scaleX(-1);
+  left: 80px;
+  right: auto;
+}
+
+:host(.top-left) .tcb-top-slit {
+  top: -1px;
+  bottom: auto;
+  transform: scale(1.5, 1) rotate(180deg);
+  left: 80px;
+  right: auto;
 }
 
 :host(.case-studies) {

package/dist/collection/stories/Breadcrumb.stories.js

@@ -12,7 +12,7 @@ export default {
     // },
     position: {
       control: 'select',
-      options: ['left', 'center', 'right'],    
+      options: ['left', 'center', 'right'],
       description: 'breadcrumb position',
       defaultValue: { summary: 'undefined' }
     },
@@ -21,6 +21,12 @@ export default {
       description: 'remove topMargin',
       defaultValue: { summary: 'false' }
     },
+    color: {
+      control: 'select',
+      description: 'Color',
+      defaultValue: { summary: 'white' },
+      options: [ 'black', 'white', 'ptc-green', 'gray', 'light-gray', 'primary-gray', 'default', 'inherit' ]
+    },
     // styles: {
     //   control: '',
     //   description: '(optional) Injected CSS styles',
@@ -48,4 +54,4 @@ Example.args = {
   position: 'undefined',
   removeTopMargin: 'false',
   // styles: 'undefined'
-}
+}

package/dist/collection/stories/Overlay.stories.js

@@ -6,7 +6,7 @@ export default {
   argTypes: {
     borderRadius: {
       control: 'select',
-      options: ["radius-lg", "radius-md", "radius-sm", "radius-large"],
+      options: ['radius-standard', 'radius-large', 'radius-pill', 'radius-circle'],
       description: 'Overlay border shape',
       defaultValue: { summary: 'undefined' }
     },
@@ -21,23 +21,18 @@ export default {
       options: ["z-index-auto", "z-index-n-1", "z-index-n-2", "z-index-p-1", "z-index-p-2"],
       description: 'Overlay z-index',
       defaultValue: { summary: 'z-index-auto' }
-    },
-    // styles: {
-    //   control: '',
-    //   description: 'Injected Styles',
-    //   defaultValue: { summary: 'undefined' }
-    // }
+    }
   }
 };
 
-const Template = args => { return html `<ptc-picture alt="image-test" border-radius="radius-large" image-position="relative" src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data">
+const Template = args => { return html `<ptc-picture alt="image-test" border-radius=${args.borderRadius} image-position="relative" src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data">
   <ptc-overlay
     border-radius=${args.borderRadius}
     filter-color=${args.filterColor}
     overlay-z-index=${args.overlayZIndex}
     styles=${args.styles}
   ></ptc-overlay>
-</ptc-picture>`;}
+</ptc-picture> <style>ptc-picture{ display: inline-block}</style>`;}
 
 export const Example = Template.bind({});
 
@@ -46,4 +41,4 @@ Example.args = {
   filterColor: 'green',
   overlayZIndex: 'z-index-auto',
   // styles: 'undefined'
-}
+}

package/dist/collection/stories/TextCopyWithBackground.stories.js

@@ -27,9 +27,9 @@ export default {
     slitPosition: {
       control: 'select',
       options: [
-        // "bottom-left", 
-        "bottom-right", 
-        // "top-left", 
+        "bottom-left",
+        "bottom-right",
+        "top-left",
         "top-right"
       ],
       description: '(optional) topSlitPosition: It will decide the position of .',
@@ -184,7 +184,7 @@ const TabCTAWithBackgroundImageTemplate = args => { return html `<ptc-text-copy-
       <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com"
           target="_blank">Explore the Solution
       </ptc-button>
-      </div>  
+      </div>
     </div>
   </div>
 </ptc-text-copy-with-background>`;}
@@ -235,4 +235,4 @@ CaseStudiesSliderCtaWithBackgroundImage.args = {
   slitPosition: 'bottom-right',
   topSlitBackgroundColor: 'white',
   type: 'case-studies'
-}
+}

package/dist/collection/utils/utils.js

@@ -118,22 +118,28 @@ export function seoSlotReset(element) {
   }
 }
 // for elements in the light dom
-export function equalizeHeights(selector) {
-  const elements = document.querySelectorAll(selector);
-  //debugger
+export function equalizeHeights(selector, elem) {
+  let elements = elem.querySelectorAll(selector);
+  console.log('element: ' + elements[0].tagName);
+  //reset height
+  elements.forEach((element) => {
+    element.style.removeProperty('height');
+  });
   let tallestHeight = 0;
-  // 1. Find the tallest element
-  elements.forEach(element => {
+  // Find the tallest element
+  elements.forEach((element) => {
     const height = element.offsetHeight;
-    if (height > tallestHeight) {
+    if (height > tallestHeight && element.classList.contains('hydrated')) {
       tallestHeight = height;
     }
   });
-  //console.log('tallest height: ' + tallestHeight)
-  // 2. Set all elements to the tallest height
-  elements.forEach(element => {
-    element.style.height = `${tallestHeight}px`;
-  });
+  if (tallestHeight > 0) {
+    // Set all elements to the tallest height
+    elements.forEach((element) => {
+      element.style.height = `${tallestHeight}px`;
+    });
+    //return true;
+  }
 }
 //for elements in the shadow dom
 export function equalizeHeightsWithinShadow(selector, shadowRootOrHostElement) {