@ptcwebops/ptcw-design 6.3.31 → 6.3.32-beta

package/dist/collection/components/ptc-white-paper/ptc-white-paper.css

@@ -5659,26 +5659,26 @@ a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
 }
 
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a), .background-plm-grey a.light-link {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-plm-grey a.light-link {
   color: var(--color-blue-04);
   margin: -2px;
   border: 2px solid transparent;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
   transition: none;
   color: var(--color-blue-07);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
   color: var(--color-blue-05);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);

package/dist/collection/components/ptc-white-paper/ptc-white-paper.js

@@ -84,29 +84,28 @@ export class PtcWhitePaper {
   }
   renderContent(item, index) {
     const components = Object.values(item);
-    return (h("div", { class: "content-wrapper", key: index }, components.map((comp, i) => (h("div", { key: i }, (comp.heading && comp.heading.trim() !== '') ? (this.currentPage == 1
-      ? (h("ptc-title", { type: "h1", upperline: comp.isStyledHeading ? 'dotted' : 'no-upperline', "title-height": "densest", "title-margin": "margin-flush" }, comp.heading, h("ptc-spacer", { size: "large" })))
-      : (h("ptc-title", { type: "h2", upperline: comp.isStyledHeading ? 'dotted' : 'no-upperline', "title-height": "densest", "title-margin": "margin-flush" }, comp.heading, h("ptc-spacer", { size: "large" })))) : "", (comp.subHeading && comp.subHeading.trim() !== '') ? (h("div", { class: "sub-heading rich-content-text-editor", innerHTML: comp.subHeading })) : '', comp.componentType === 'two-column-with-text-media' && this.renderTwoColumnText(comp, i), comp.componentType === 'fullspan-media' && this.renderfullspanMedia(comp, i), comp.componentType === 'fullspan-text' && this.renderFullspanText(comp, i))))));
-  }
-  renderTwoColumnText(_, index) {
-    const pageNumber = this.currentPage;
-    const componentNumber = index + 1;
-    return (h("div", null, h("div", { class: "is-grid has-col-gap-xl has-row-gap-sm wp-component", key: index }, h("div", { class: "is-col-6-md" }, h("div", { class: "left-content" }, h("slot", { name: `left-column-content-page${pageNumber}-comp${componentNumber}` }))), h("div", { class: "is-col-6-md" }, h("div", { class: "right-content" }, h("slot", { name: `right-column-content-page${pageNumber}-comp${componentNumber}` }))))));
+    return (h("div", { class: "content-wrapper", key: index }, components.map((comp, i) => {
+      var _a, _b;
+      let heading = this.el.querySelector(`[slot="heading-page${this.currentPage}-comp${i + 1}"]`);
+      let subHeading = this.el.querySelector(`[slot="subheading-page${this.currentPage}-comp${i + 1}"]`);
+      return h("div", { key: i }, (heading && heading.innerText && ((_a = heading.innerText) === null || _a === void 0 ? void 0 : _a.trim()) !== '') ? (this.currentPage == 1
+        ? (h("ptc-title", { type: "h1", upperline: comp.isStyledHeading ? 'dotted' : 'no-upperline', "title-height": "densest", "title-margin": "margin-flush" }, h("slot", { name: `heading-page${this.currentPage}-comp${i + 1}` }), h("ptc-spacer", { size: "large" })))
+        : (h("ptc-title", { type: "h2", upperline: comp.isStyledHeading ? 'dotted' : 'no-upperline', "title-height": "densest", "title-margin": "margin-flush" }, h("slot", { name: `heading-page${this.currentPage}-comp${i + 1}` }), h("ptc-spacer", { size: "large" })))) : "", (subHeading && subHeading.innerText && ((_b = subHeading.innerText) === null || _b === void 0 ? void 0 : _b.trim()) !== '') ? (h("div", { class: "sub-heading rich-content-text-editor" }, h("slot", { name: `subheading-page${this.currentPage}-comp${i + 1}` }))) : '', comp.componentType === 'two-column-with-text-media' && this.renderTwoColumnText(comp, i), comp.componentType === 'fullspan-media' && this.renderfullspanMedia(comp, i), comp.componentType === 'fullspan-text' && this.renderFullspanText(comp, i));
+    })));
+  }
+  renderTwoColumnText(comp, index) {
+    return (h("div", null, comp.leftColumnContent && (h("div", { class: "is-grid has-col-gap-xl has-row-gap-sm wp-component", key: index }, h("div", { class: "is-col-6-md" }, h("div", { class: "left-content", innerHTML: comp.leftColumnContent })), h("div", { class: "is-col-6-md" }, h("div", { class: "right-content", innerHTML: comp.rightColumnContent }))))));
   }
   renderfullspanMedia(comp, index) {
-    const pageNumber = this.currentPage;
-    const componentNumber = index + 1;
-    return (h("div", { class: "wp-component wp-media", key: index }, comp.mainImage && (h("ptc-picture", { alt: comp.mainImageAlt, "display-image": "inline-block", "image-alignment": "center", "image-position": "relative", "object-fit": "cover", src: comp.mainImage })), h("div", { class: "image-description" }, h("slot", { name: `main-image-description-page${pageNumber}-comp${componentNumber}` }))));
+    return (h("div", { class: "wp-component wp-media", key: index }, comp.mainImage && (h("ptc-picture", { alt: comp.mainImageAlt, "display-image": "inline-block", "image-alignment": "center", "image-position": "relative", "object-fit": "cover", src: comp.mainImage })), comp.mainImageDescription && h("div", { class: "image-description", innerHTML: comp.mainImageDescription })));
   }
   renderFullspanText(comp, index) {
-    const pageNumber = this.currentPage;
-    const componentNumber = index + 1;
     const classes = {
       'wp-component': true,
       'wp-fullspan-text': true,
       'text-center': comp.isCenterText,
     };
-    return (h("div", { class: classes, key: index }, h("div", { class: "" }, h("slot", { name: `main-content-page${pageNumber}-comp${componentNumber}` })), h("div", { class: "" }, h("slot", { name: `main-content-multi-line-page${pageNumber}-comp${componentNumber}` })), comp.mainContentChart && (h("div", { class: "" }, h("ptc-spacer", { size: "large" }), h("object", { id: "", type: "text/html", width: "100%", height: comp.mainContentChartHeight, "data-dw-widget": "Edge", data: comp.mainContentChart, tabindex: "-1" }), h("ptc-spacer", { size: "large" })))));
+    return (h("div", { class: classes, key: index }, comp.mainContent && h("div", { class: "", innerHTML: comp.mainContent }), comp.mainContentMultiLine && h("div", { class: "", innerHTML: comp.mainContentMultiLine }), comp.mainContentChart && (h("div", { class: "" }, h("ptc-spacer", { size: "large" }), h("object", { id: "", type: "text/html", width: "100%", height: comp.mainContentChartHeight, "data-dw-widget": "Edge", data: comp.mainContentChart, tabindex: "-1" }), h("ptc-spacer", { size: "large" })))));
   }
   render() {
     const startIndex = (this.currentPage - 1) * this.itemsPerPage;

package/dist/collection/components/subnav/ptc-nav-link/ptc-nav-link.js

@@ -28,7 +28,7 @@ export class PtcNavLink {
     }
   }
   render() {
-    return (h(Host, null, h("div", { class: "tracker-div" }, h("a", { id: this.trackerId, href: this.href, target: this.isOutsideLink ? '_blank' : '_self', title: this.titleText, onClick: event => {
+    return (h(Host, null, h("div", { class: "tracker-div", id: this.trackerId }, h("a", { href: this.href, target: this.isOutsideLink ? '_blank' : '_self', title: this.titleText, onClick: event => {
         this.handleClick(event);
       } }, h("slot", null), !this.href.startsWith('#') && (h("svg", { class: "icon-arrow-right", xmlns: "http://www.w3.org/2000/svg", width: "14", height: "10", viewBox: "0 0 14 10", fill: "none" }, h("path", { d: "M8.84921 0.77792L8.81313 3.41153L0.51545 3.55584L0.515449 6.5863L8.81313 6.44199L8.81313 9.40029L13.1424 5.07107L8.84921 0.77792Z", fill: "#AEB8BD" })))))));
   }

package/dist/collection/components/tab-header/tab-header.js

@@ -63,7 +63,7 @@ export class TabHeader {
       'tab-header-selected': this.isSelected
     };
     return [
-      h("div", { class: classes, onClick: this.onClick.bind(this) }, h("slot", { name: "seo-content" }), h("span", { class: "header-content" }, h("span", { class: "text-cont" }, this.tabHeaderText))),
+      h("h2", { class: classes, onClick: this.onClick.bind(this) }, h("slot", { name: "seo-content" }), h("span", { class: "header-content" }, h("span", { class: "text-cont" }, this.tabHeaderText))),
     ];
   }
   static get is() { return "tab-header"; }

package/dist/collection/stories/Card.stories.js

@@ -14,17 +14,42 @@ export default {
       description: 'Card Link URL (Optional)',
       defaultValue: { summary: 'undefined' }
     },
+    // cardLogo: {
+    //   control: '',
+    //   description: 'Card Logo',
+    //   defaultValue: { summary: 'undefined' }
+    // },
     cardType: {
       control: 'select',
       options: ["hightlight-card", "horizontal-card", "listing-card"],
       description: 'Card Type Specify Card Type, default to simple card',
       defaultValue: { summary: 'custom-card' }
     },
+    // country: {
+    //   control: 'text',
+    //   description: 'Card Date',
+    //   defaultValue: { summary: 'undefined' }
+    // },
+    // eventType: {
+    //   control: '',
+    //   description: 'Event Type',
+    //   defaultValue: { summary: 'undefined' }
+    // },
     hasImage: {
       control: 'boolean',
       description: 'If this card has Image',
       defaultValue: { summary: 'false' }
     },
+    // hasLottie: {
+    //   control: '',
+    //   description: 'If this card has Lottie Image',
+    //   defaultValue: { summary: 'false' }
+    // },
+    // hasVideo: {
+    //   control: '',
+    //   description: 'If this card has Video',
+    //   defaultValue: { summary: 'false' }
+    // },
     heading: {
       control: 'text',
       description: 'Card heading',
@@ -36,24 +61,144 @@ export default {
       description: 'Card heading text transform',
       defaultValue: { summary: 'none' }
     },
+    // rel: {
+    //   control: '',
+    //   description: '(optional) Link card rel',
+    //   defaultValue: { summary: 'undefined' }
+    // },
     ribbonText: {
       control: 'text',
       description: 'Ribbon will show on listing card if this field has any value',
       defaultValue: { summary: 'undefined' }
     },
+    // styles: {
+    //   control: '',
+    //   description: '(optional) Injected CSS styles',
+    //   defaultValue: { summary: 'undefined' }
+    // },
     target: {
       control: '',
       description: '(optional) Link card target',
       defaultValue: { summary: '_self' }
     },
+    // titleLineCutOff: {
+    //   control: 'number',
+    //   description: 'Title Line Cut off',
+    //   defaultValue: { summary: 'undefined' }
+    // }
   }
 };
 
+// const Template = args => { return html `<ptc-card
+// 	card-date=${args.cardDate}
+// 	card-href=${args.cardHref}
+// 	card-logo=${args.cardLogo}
+// 	card-type=${args.cardType}
+// 	country=${args.country}
+// 	event-type=${args.eventType}
+// 	has-image=${args.hasImage}
+// 	has-lottie=${args.hasLottie}
+// 	has-video=${args.hasVideo}
+// 	heading=${args.heading}
+// 	heading-transform=${args.headingTransform}
+// 	rel=${args.rel}
+// 	ribbon-text=${args.ribbonText}
+// 	styles=${args.styles}
+// 	target=${args.target}
+// 	title-line-cut-off=${args.titleLineCutOff}
+// ></ptc-card>`;}
+
+// Example.args = {
+//   cardDate: 'undefined',
+//   cardHref: 'undefined',
+//   cardLogo: 'undefined',
+//   cardType: 'custom-card',
+//   country: 'undefined',
+//   eventType: 'undefined',
+//   hasImage: 'false',
+//   hasLottie: 'false',
+//   hasVideo: 'false',
+//   heading: 'undefined',
+//   headingTransform: 'none',
+//   rel: 'undefined',
+//   ribbonText: 'undefined',
+//   styles: 'undefined',
+//   target: '_self',
+//   titleLineCutOff: 'undefined',
+// }
+
+// ** Highlight Card **
+
+const HighlightCardTemplate = args => { return html `
+<div class="is-grid">
+<div class="is-col-8">
+  <ptc-card 
+    card-date=${args.cardDate}
+    card-href=${args.cardHref}
+    card-type=${args.cardType} 
+    has-image=${args.hasImage}
+    heading=${args.heading}
+    heading-transform=${args.headingTransform}
+    target=${args.target}
+  >
+    <ptc-img slot="slot-image" img-url="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway" size-xs="600x450" size-sm="600x450" size-md="1108x658" size-lg="1108x658" image-type="smart-img" load-mode="lazy-bg"></ptc-img>
+    <ptc-span slot="slot-before-heading" styles="::part(part-ptc-span){font-size:18px!important}" span-style="tag-style" display="block">Augmented Reality</ptc-span>
+    <div slot="slot-description">
+      <ptc-para font-size="xx-small" font-weight="w-6" para-line-h="line-height-dense">
+        Lorem ipsum dolor sit amet, consectetur adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing.
+      </ptc-para>
+    </div>
+  </ptc-card>
+</div>
+</div>
+`;}
+
+export const HighlightCard = HighlightCardTemplate.bind({});
+
+HighlightCard.args = {
+  cardDate: '2022-1-2',
+  cardHref: 'http://www.ptc.com',
+  cardType: 'hightlight-card',
+  hasImage: true,
+  heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing',
+  headingTransform: 'none',
+  target: '_blank',
+}
+
+// ** Horizontal Card **
+
+const HorizontalCardTemplate = args => { return html `
+<ptc-card 
+  card-href=${args.cardHref}
+  card-type=${args.cardType} 
+  has-image=${args.hasImage}
+  heading=${args.heading}
+  heading-transform=${args.headingTransform}
+  target=${args.target}
+>
+<ptc-picture slot="slot-image" alt="image-test" is-full-width="true" src="https://www.ptc.com/-/media/Images/new-org/510x340/PLM/BOM-Management.jpg"></ptc-picture>
+<div class="" slot="slot-description">
+  <ptc-para font-size="xx-small" para-line-h="line-height-dense" para-margin="margin-flush">Get full digital associativity across engineering, supply chain, manufacturing, sales, and service.</ptc-para>
+</div>
+</ptc-card>
+`; }
+
+export const HorizontalCard = HorizontalCardTemplate.bind({});
+
+HorizontalCard.args = {
+  cardHref: 'https://www.ptc.com/en/technologies/plm/bill-of-materials',
+  cardType: 'horizontal-card',
+  hasImage: true,
+  heading: 'BOM management',
+  headingTransform: 'none',
+  target: '_blank',
+}
+
 // ** Listing Card **
 
 const ListingCardTemplate = args => { return html `
 <div class="is-grid">
-  <div class="is-col-4">
+  <div class="is-col-3">
     <ptc-card 
       card-date=${args.cardDate}
       card-href=${args.cardHref}
@@ -66,7 +211,7 @@ const ListingCardTemplate = args => { return html `
     >
       <ptc-img slot="slot-image" img-url="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway" size-xs="600x450" size-sm="600x450" size-md="1108x658" size-lg="1108x658" image-type="smart-img" load-mode="lazy-bg"></ptc-img>
       <div slot="slot-description">
-          <ptc-para font-size="x-small" font-weight="w-4" para-line-h="line-height-19">
+          <ptc-para font-size="medium" font-weight="w-4" para-line-h="line-height-19">
           Join us for live presentations and hear about the latest updates for Creo, Windchill PLM, and Thingworx IOT and Augmented Reality. 
           </ptc-para>
       </div>
@@ -86,4 +231,4 @@ ListingCard.args = {
   headingTransform: 'none',
   ribbonText: 'eBook',
   target: '_blank',
-}
+}

package/dist/collection/stories/Link.stories.js

@@ -74,33 +74,22 @@ export default {
         'underline',
       ],
     },
-    slotContent: {
-      name: 'Default Slot',
-      description: 'Text Content between the <ptc-link> tags.',
-      control: 'text',
-      table: {
-        category: 'Default Slot',
-        type: {
-            summary: 'plain text',
-        },
-      }
-    }
   },
 };
 
-const Template = args => { return html`<ptc-link
-  disabled=${args.disabled}
-  external=${args.external}
-  font-size=${args.fontSize}
-  font-weight=${args.fontWeight}
-  href=${args.href}
-  link-area=${args.linkArea}
-  link-title=${args.linkTitle}
-  target=${args.target}
-  theme=${args.theme}
-  >
-    ${args.slotContent}
-</ptc-link>`;
+const Template = args => {
+  return html`<ptc-link
+    disabled=${args.disabled}
+    external=${args.external}
+    font-size=${args.fontSize}
+    font-weight=${args.fontWeight}
+    href=${args.href}
+    link-area=${args.linkArea}
+    link-title=${args.linkTitle}
+    target=${args.target}
+    theme=${args.theme}
+    >Link Text</ptc-link
+  >`;
 };
 
 export const Example = Template.bind({});
@@ -115,5 +104,4 @@ Example.args = {
   linkTitle: 'Title attribute goes here',
   target: '_blank',
   theme: 'simple',
-  slotContent:'Link text goes here',
 };

package/dist/collection/stories/Paragraph.stories.js

@@ -1,5 +1,4 @@
 import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 export default {
   title: 'Atoms/ptc-para',
@@ -46,24 +45,18 @@ export default {
       description: 'Paragraph Margin',
       defaultValue: { summary: 'undefined' }
     },
-
+    // paraStyle: {
+    //   control: 'select',
+    //   options: ["announcement", "default", "flush-style", "intro", "main", "small"],
+    //   description: 'Paragraph Style',
+    //   defaultValue: { summary: 'default' }
+    // },
     paraZIndex: {
       control: 'select',
       options: ["z-1", "z-2", "z-3", "z-99", "z-999", "z-auto"],
       description: 'sep z-index',
       defaultValue: { summary: 'undefined' }
     },
-    slotContent: {
-      name: 'Default Slot',
-      description: 'Text Content between the <ptc-para> tags.',
-      control: 'text',
-      table: {
-        category: 'Default Slot',
-        type: {
-            summary: 'html',
-        },
-      }
-    }
     // styles: {
     //   control: '',
     //   description: '(optional) Injected CSS Styles',
@@ -72,7 +65,7 @@ export default {
   }
 };
 
-//let paragraphContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
+let paragraphContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
 
 const Template = args => { return html `<ptc-para
 	ellipsis-line-cutoff=${args.ellipsisLineCutoff}
@@ -85,9 +78,7 @@ const Template = args => { return html `<ptc-para
 	para-style=${args.paraStyle}
 	para-z-index=${args.paraZIndex}
 	styles=${args.styles}
->
-  ${unsafeHTML(args.slotContent)}
-</ptc-para>`;}
+>${paragraphContent}</ptc-para>`;}
 
 export const Example = Template.bind({});
 
@@ -99,6 +90,7 @@ Example.args = {
   paraColor: 'primary-grey',
   paraLineH: 'line-height-normal',
   paraMargin: 'margin-5',
-  slotContent:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+  // paraStyle: 'default',
   paraZIndex: 'z-1',
+  // styles: 'undefined'
 }

package/dist/collection/stories/Select.stories.js

@@ -6,27 +6,27 @@ export default {
   argTypes: {
     disabled: {
       control: 'boolean',
-      description: 'Disable the field?',
+      description: '',
       defaultValue: { summary: 'false' },
     },
     helpertext: {
       control: 'text',
-      description: 'Help text',
+      description: '',
       defaultValue: { summary: 'Please select a value!' },
     },
     isRequired: {
       control: 'boolean',
-      description: 'Is this field required?',
+      description: '',
       defaultValue: { summary: 'true' },
     },
     label: {
       control: 'text',
-      description: 'Label text',
+      description: '',
       defaultValue: { summary: 'undefined' },
     },
     name: {
       control: 'text',
-      description: 'Name attribute',
+      description: '',
       defaultValue: { summary: 'undefined' },
     },
     ptcDataEloquaName: {
@@ -34,6 +34,7 @@ export default {
       description: 'Eloqua Data',
       defaultValue: { summary: 'undefined' },
     },
+    selectedValue: { control: 'text', description: '', defaultValue: { summary: '' } },
   },
 };
 
@@ -45,6 +46,7 @@ const Template = args => {
     label=${args.label}
     name=${args.name}
     ptc-data-eloqua-name=${args.ptcDataEloquaName}
+    selected-value=${args.selectedValue}
   >
     <ul class="mdc-list">
       <li class="mdc-list-item" data-value="">
@@ -75,4 +77,5 @@ Example.args = {
   label: 'Lable Name',
   name: 'examplename',
   ptcDataEloquaName: 'data-eloqua-value',
+  selectedValue: '',
 };

package/dist/collection/stories/Textfield.stories.js

@@ -4,122 +4,79 @@ export default {
   title: 'Atoms/ptc-textfield',
   tags: [ 'autodocs' ],
   argTypes: {
-    alertText: {
-      control: 'text',
-      description: 'Alert text (blue)',
-      defaultValue: { summary: '' }
-    },
-    alertTextContent: {
-      control: 'text',
-      description: 'Alert text content - below alert text (grey)',
-      defaultValue: { summary: '' }
-    },
     disabled: {
       control: 'boolean',
-      description: 'Disable the field?',
+      description: '',
       defaultValue: { summary: 'false' }
     },
     fieldId: {
       control: 'text',
-      description: 'ID',
-      defaultValue: { summary: '' }
+      description: '',
+      defaultValue: { summary: 'undefined' }
     },
-    fieldName: {
+    helpertext: {
       control: 'text',
-      description: 'input "name" value. e.g.: phone, email, firstname, lastname',
-      defaultValue: { summary: 'email' }
-    },
-    helpertext: { control: 'text', description: 'Validation text (red)', defaultValue: { summary: '' } },
-    ignoreBlindSubmit: {
-      control: 'boolean',
-      description: 'Ignore Blind Submit?',
-      defaultValue: { summary: 'false' }
+      description: '',
+      defaultValue: { summary: 'Please enter a value' }
     },
-    infoText: {
-      control: 'text',
-      description: 'Info Text (black)',
-      defaultValue: { summary: '' }
-    },
-    // inputValue: { control: 'text', description: '', defaultValue: { summary: '' } },
+    inputValue: { control: 'text', description: '', defaultValue: { summary: '' } },
     labelText: {
       control: 'text',
-      description: 'Label Text',
+      description: '',
       defaultValue: { summary: 'Email' }
     },
-    placeholderText: {
+    name: {
       control: 'text',
-      description: 'Place holder Text',
-      defaultValue: { summary: '' }
+      description: '',
+      defaultValue: { summary: 'email' }
     },
     ptcDataEloquaName: {
       control: 'text',
-      description: 'Eloqua Data Name (for the eloqua)',
-      defaultValue: { summary: '' }
-    },
-    ptcDataTargetEloquaName: {
-      control: 'text',
-      description: 'Eloqua Target Data Name (for the eloqua)',
-      defaultValue: { summary: '' }
+      description: '',
+      defaultValue: { summary: 'undefined' }
     },
     ptcMaxLength: {
-      control: 'number',
-      description: 'Text counter limit',
-      defaultValue: { summary: '' }
+      control: '',
+      description: '',
+      defaultValue: { summary: 'undefined' }
     },
     required: {
       control: 'boolean',
-      description: 'Is this a mandatory field?',
+      description: '',
       defaultValue: { summary: 'true' }
     },
-    styles: {
-      control: 'text',
-      description: 'Inject styles for customization',
-      defaultValue: { summary: '' }
-    },
     type: {
       control: 'text',
-      description: 'text, button, email, file and etc. This value triggers different validation',
+      description: 'button, email, file and etc. ',
       defaultValue: { summary: 'text' }
     }
   }
 };
 
 const Template = args => { return html `<ptc-textfield
-	alert-text=${args.alertText}
-	alert-text-content=${args.alertTextContent}
 	disabled=${args.disabled}
 	field-id=${args.fieldId}
-	field-name=${args.fieldName}
 	helpertext=${args.helpertext}
-	ignore-blind-submit=${args.ignoreBlindSubmit}
-	info-text=${args.infoText}
+	input-value=${args.inputValue}
 	label-text=${args.labelText}
-	placeholder-text=${args.placeholderText}
+	name=${args.name}
 	ptc-data-eloqua-name=${args.ptcDataEloquaName}
-	ptc-data-target-eloqua-name=${args.ptcDataTargetEloquaName}
 	ptc-max-length=${args.ptcMaxLength}
 	required=${args.required}
-	styles=${args.styles}
 	type=${args.type}
 ></ptc-textfield>`;}
 
 export const Example = Template.bind({});
 
 Example.args = {
-  alertText: 'Alert text',
-  alertTextContent: 'Alert text content',
   disabled: 'false',
-  fieldId: 'ID',
-  fieldName: 'company field',
-  helpertext: 'Helper text',
-  ignoreBlindSubmit: 'false',
-  infoText: 'Info text',
-  labelText: 'Lable Name',
-  placeholderText: 'Place hoder text goes here',
-  ptcDataEloquaName: 'C_EmailAddress',
-  ptcDataTargetEloquaName: '',
-  ptcMaxLength: '',
+  fieldId: 'ptc-field-name',
+  helpertext: 'Please enter a value',
+  inputValue: '',
+  labelText: 'Email',
+  name: 'email',
+  ptcDataEloquaName: 'data-eloqua-name-value',
+  ptcMaxLength: 'undefined',
   required: 'true',
-  styles: '',
-  type: 'text'
+  type: 'email'
 }