@ptcwebops/ptcw-design 6.3.13 → 6.3.14-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

@@ -20,6 +20,7 @@ export class PtcWhitePaper {
     this.calculateTotalPages();
   }
   calculateTotalPages() {
+    // console.log(JSON.parse(this.items).length);
     this.totalPages = Math.ceil(JSON.parse(this.items).length / this.itemsPerPage);
   }
   handlePageChange(newPage) {
@@ -32,11 +33,6 @@ export class PtcWhitePaper {
           modalForm.setAttribute("show", "true");
           setTimeout(() => {
             window.scrollTo(0, 0);
-            const closeIcon = modalForm.shadowRoot.querySelector('ptc-close-icon').shadowRoot.querySelector('.close-icon');
-            if (closeIcon) {
-              closeIcon.tabIndex = 0;
-              closeIcon.focus();
-            }
           }, 200);
         }
       }
@@ -88,9 +84,14 @@ 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))))));
+    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 }))))));
@@ -222,6 +223,7 @@ export class PtcWhitePaper {
         }
       }];
   }
+  static get elementRef() { return "el"; }
   static get watchers() {
     return [{
         "propName": "items",

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

@@ -21,9 +21,18 @@ export class PtcNavSlider {
     const prevBtn = document.querySelector(`#${sliderId}`).shadowRoot.querySelector('#prevBtn');
     const nextBtn = document.querySelector(`#${sliderId}`).shadowRoot.querySelector('#nextBtn');
     let notDropdown = element.target.tagName.toLowerCase() != 'ptc-nav-submenu';
+    //console.log(element.target.tagName)
     this.updateArrows(boxWrap, prevBtn, nextBtn, notDropdown);
   }
   updateArrows(boxWrap, prevBtn, nextBtn, isNotDropdown) {
+    // let offsetWidth = boxWrap.offsetWidth;
+    // let scrollWidth = boxWrap.scrollWidth;
+    // let scrollLeft = boxWrap.scrollLeft;
+    // let combine = offsetWidth + scrollLeft;
+    // console.log("offsetWidth " + offsetWidth);
+    // console.log("scrollWidth " + scrollWidth);
+    // console.log("scrollLeft " + scrollLeft);
+    // console.log("offsetWidth +  scrollLeft " + combine);
     if ((boxWrap.offsetWidth) == boxWrap.scrollWidth) {
       prevBtn.style.visibility = "hidden";
       nextBtn.style.visibility = "hidden";

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

@@ -14,6 +14,7 @@ export class PtcSubnav {
     }
   }
   handleNavLinkClickedEvent() {
+    //console.log('link clicked');
     this.toggleNav();
   }
   render() {

package/dist/collection/stories/BackgroundImage.stories.js

@@ -6,21 +6,15 @@ export default {
   argTypes: {
     borderRadius: {
       control: 'select',
+      options: ["", "radius-lg", "radius-standard", "radius-sm"],
       description: 'Image border shape',
-      defaultValue: { summary: "'' means no border" },
-      options: [
-        '',
-        'radius-large',
-        'radius-large-top',
-        'radius-standard',
-        'radius-standard-top'
-      ]
+      defaultValue: { summary: '' }
     },
     imageType: {
       control: 'select',
-      description: 'Image type, "smart-bg needs to use with content inside the <ptc-img> tag"',
-      defaultValue: { summary: 'smart-bg' },
-      options: [ 'smart-bg', 'smart-img' ]
+      options: ["smart-bg", "smart-img"],
+      description: 'Image type',
+      defaultValue: { summary: 'smart-bg' }
     },
     imgUrl: {
       control: 'text',
@@ -29,15 +23,35 @@ export default {
     },
     loadMode: {
       control: 'select',
+      options: ["eager-bg", "lazy-bg"],
       description: 'Lazy loading option',
-      defaultValue: { summary: 'lazy-bg' },
-      options: [ 'eager-bg', 'lazy-bg' ]
+      defaultValue: { summary: 'lazy-bg' }
     },
-    styles: {
+    sizeLg: {
       control: 'text',
-      description: '(optional) Injected CSS styles',
-      defaultValue: { summary: 'undefined' }
-    }
+      description: 'Image solution for large screen &gt;=1200px',
+      defaultValue: { summary: '1920x1080' }
+    },
+    sizeMd: {
+      control: 'text',
+      description: 'Image size for medium screen &gt;=992px and &lt;=1199px',
+      defaultValue: { summary: '1366x500' }
+    },
+    sizeSm: {
+      control: 'text',
+      description: 'Image size for small screen &gt;=768px and &lt;=991px',
+      defaultValue: { summary: '1240x496' }
+    },
+    sizeXs: {
+      control: 'text',
+      description: 'Image size for smallest screen &lt;=767px',
+      defaultValue: { summary: '510x340' }
+    },
+    // styles: {
+    //   control: '',
+    //   description: '(optional) Injected CSS styles',
+    //   defaultValue: { summary: 'undefined' }
+    // }
   }
 };
 
@@ -46,15 +60,23 @@ const Template = args => { return html `<ptc-img
 	image-type=${args.imageType}
 	img-url=${args.imgUrl}
 	load-mode=${args.loadMode}
+	size-lg=${args.sizeLg}
+	size-md=${args.sizeMd}
+	size-sm=${args.sizeSm}
+	size-xs=${args.sizeXs}
 	styles=${args.styles}
 ></ptc-img>`;}
 
 export const Example = Template.bind({});
 
 Example.args = {
-  borderRadius: '',
+  borderRadius: 'radius-standard',
   imageType: 'smart-img',
-  imgUrl: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/3c9d7c7c7ca74dd483c4d7ca554ecc38?v=ece57c52',
+  imgUrl: "http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway",
   loadMode: 'lazy-bg',
-  styles: 'undefined'
+  sizeLg: '1920x1080',
+  sizeMd: '1366x500',
+  sizeSm: '1240x496',
+  sizeXs: '510x340',
+  // styles: 'undefined'
 }

package/dist/collection/stories/MobileSelect.stories.js

@@ -1,4 +1,3 @@
-import { ParameterName } from '@storybook/addon-designs/esm/addon';
 import { html } from 'lit';
 
 export default {
@@ -35,16 +34,15 @@ export default {
       description: 'Trigger Name (Mandatory)',
       defaultValue: { summary: 'undefined' }
     },
-    wheelData: {
-      control: 'array',
-      description: "This component is used with <footer-nav> in the back-end solution. If you want to test it, please inject the data through Javascript. Becuase StencilJS doesn't automatically parse string attributes into arrays, developers need to handle the parsing themselves.",
-      defaultValue: { summary: '["test1", "test2", "test3"]' }
-    }
-  },
+    // wheelData: {
+    //   control: 'object',
+    //   description: "Wheel Data (Mandatory) eg: data: [{ id: '1', value: '附近' }],",
+    //   defaultValue: { summary: 'undefined' }
+    // }
+  }
 };
 
-const Template = args => { return html `<ptc-para>This component is optimized for mobile screens. Please use the viewport addon in the "Example", and switch to a small device like a cell phone for correct display.</ptc-para>
-  <div class="demo-with-bgcolor">
+const Template = args => { return html `<div class="demo-with-bgcolor">
   <ptc-mobile-select class="js-mobile-select-1"
     cancel-btn-text=${args.cancelBtnText}
     ensure-btn-text=${args.ensureBtnText}
@@ -52,9 +50,21 @@ const Template = args => { return html `<ptc-para>This component is optimized fo
     selected-id=${args.selectedId}
     selected-text=${args.selectedText}
     trigger-name=${args.triggerName}
-    .wheelData=${args.wheelData}
+    wheel-data=${args.wheelData}
   ></ptc-mobile-select>
 </div>
+
+<script>
+  const ptcSelect = document.querySelector('.js-mobile-select-1');
+  ptcSelect.wheelData = [
+    { id: 'https://www.ptc.com/en', value: 'English'},
+    { id: 'https://www.ptc.com/cn', value: '中文 (简体)'},
+    { id: 'https://www.ptc.com/tw', value: '中文 (繁體)'},
+    { id: 'https://www.ptc.com/fr', value: 'Français'},
+    { id: 'https://www.ptc.com/de', value: 'Deutsch'},
+    { id: 'https://www.ptc.com/it', value: 'Italiano'},
+  ];
+</script>
 `;}
 
 export const Example = Template.bind({});
@@ -66,5 +76,5 @@ Example.args = {
   selectedId: 'en',
   selectedText: 'English',
   triggerName: 'lang-ddl',
-  wheelData: [{id: "https://www.ptc.com/en", value: "English"}, {id: "https://www.ptc.com/fr", value: "Français"}, {id:"https://www.ptc.com/cn", value:"中文 (简体)"}]
+  // wheelData: 'undefined'
 }

package/dist/collection/stories/organisms/eSupport/CaseTracker/preview.stories.js

@@ -0,0 +1,45 @@
+import { html } from 'lit';
+
+export default  {
+    title: 'Organisms/E-Support Organisms/Case Tracker'
+
+}
+const CaseTracker = args => {
+    return html `
+
+    <ptc-spacer></ptc-spacer>
+ <ptc-spacer></ptc-spacer>
+ <ptc-spacer></ptc-spacer>
+ <div class="ptc-container is-grid">
+    <div class="is-col-12 is-col-6-md">
+      <ptc-title upperline="none">Case Tracker - Authorized Use Only</ptc-title>
+      <ptc-spacer></ptc-spacer>
+      <ptc-spacer></ptc-spacer>
+      <ptc-para>If you want to use this application on behalf of a customer use this search from to lookup the customer record. When you have found the customer hit the Next > button</ptc-para>
+      <ptc-textfield field-id="contact-email" label-text="Customer Name" type="text" ptc-data-eloqua-name="C_EmailAddress" field-name="email"></ptc-textfield>
+      <ptc-textfield field-id="contact-email" label-text="Customer Number" type="text" ptc-data-eloqua-name="C_EmailAddress" field-name="email"></ptc-textfield>
+      <ptc-button color="ptc-quaternary" disabled="false" link-href="https://www.ptc.com" link-title="PTC" rel="undefined" tab-nav="0" target="_self" text-align="undefined" type="button">Search</ptc-button>
+      <ptc-button color="ptc-quaternary" disabled="false" link-href="https://www.ptc.com" link-title="PTC" rel="undefined" tab-nav="0" target="_self" text-align="undefined" type="button">Next</ptc-button>
+    </div>
+    <div class="is-col-12 is-col-2-md">
+
+    </div>
+    <div class="is-col-12 is-col-3-md">
+      <ptc-spacer></ptc-spacer>
+      <ptc-spacer></ptc-spacer>
+      <ptc-spacer></ptc-spacer>
+      <ptc-spacer></ptc-spacer>
+      <div  style="border: solid; padding: 5px;">
+      <ptc-title upperline="none" type="h3">search tips</ptc-title>
+      <ul>
+        <li>You can use this search form to use this application on behalf of a customer.</li>
+        <li>You can use this search form to use this application on behalf of a customer.</li>
+      </ul>
+    </div>
+    </div>
+
+
+ </div>
+    `;}
+
+export const Preview = CaseTracker.bind();

package/dist/collection/stories/organisms/eSupport/SupportArticle/preview.stories.js

@@ -0,0 +1,47 @@
+import { html } from 'lit';
+
+export default  {
+    title: 'Organisms/E-Support Organisms/Support Article'
+
+}
+const ArticlePage = args => {
+    return html `
+
+    <div class="ptc-container">
+
+    <ptc-title upperline="" type="h4" title-color="grey">How to run Apache, Tomcat, Windchill Directory Server </ptc-title>
+    <ptc-para>Modified: 23-Nov-2023 | LastSeen: 17-Jun-2024 
+        <ptc-dropdown label="Available in:" listitems="" theme="support">
+          <item selected="" label="English"></item>
+          <item label="English"></item>
+          <item label="English"></item>
+          
+        </ptc-dropdown>
+      
+    </ptc-para>
+  
+  <div style="background-color: rgb(238, 238, 238);; padding:2px">
+    <ptc-title type="h5" upperline="">Public</ptc-title>
+    <ptc-para >
+      Created by Steven Jin and improved by Mi Yeon Grace Jin, Amit Deshpande, Hideyuki Akiyama, Lily Liu, Arshad Imam, Luis Barbosa, Feng Xiang Cliff Tian, Swapnil Deshmukh, Kellan Chen, Teresa Man, Chao Max Wang, Saurabh Ghewande, Mahesh Lomate, Aditya Chaure, Tsutomu Seki, Salesforce Data Manipulation User, Steven Jin, Shirley Yang
+      Customer Views:  24559  |   Useful Ratings (Customers):  118  |   Useful Ratings (PTC):  45  |   Cases Solved:  154
+    </ptc-para>
+
+  </div>
+  <ptc-spacer></ptc-spacer>
+  <ptc-spacer></ptc-spacer>
+  <div>
+    <ptc-title upperline="" type="h4">Description</ptc-title>
+    <hr style="color:green">
+    <ptc-para>
+      <ul>
+        <li>How to run Apache HTTP Server, Tomcat, WindchillDS and, Windchill as a Windows service</li>
+        <li>How to run Apache HTTP Server, Tomcat, WindchillDS and, Windchill as a Windows service</li>
+        <li>How to run Apache HTTP Server, Tomcat, WindchillDS and, Windchill as a Windows service</li>
+      </ul>
+    </ptc-para>
+  </div>
+</div>
+    `;}
+
+export const Preview = ArticlePage.bind();

package/dist/collection/stories/organisms/eSupport/SupportPage/preview.stories.js

@@ -0,0 +1,157 @@
+import { html } from 'lit';
+
+export default  {
+    title: 'Organisms/E-Support Organisms/Support Page'
+
+}
+const SupportPage = args => {
+    return html `
+
+    <ptc-spacer></ptc-spacer>
+  <ptc-spacer></ptc-spacer>
+  <ptc-spacer></ptc-spacer>
+  <ptc-spacer></ptc-spacer>
+  <div class="ptc-container is-grid has-col-gap green-container">
+    <div class="is-col-12 is-col-7-md search-container">
+
+      <ptc-spacer></ptc-spacer>
+      <ptc-spacer></ptc-spacer>
+      <ptc-spacer></ptc-spacer>
+      <ptc-title type="h2" text-align="center" title-size="x-large" title-color="white" upperline="no-upperline" title-display="inline-block" title-shadow="" title-height="densest" title-margin="margin-3" title-weight="w-8" is-plm-hub="false">
+        Search the Knowledge Base
+      </ptc-title>
+      <ptc-search-field  placeholder-label="Search Technical Support Documentation and Articles" ></ptc-search-field>
+    </div>
+    <div class="is-col-12 is-col-5-md form-section">
+      <ptc-title upperline="none">Popular Tasks</ptc-title>
+      <!-- <ul> -->
+        <ptc-link>Product Pages</ptc-link>
+        <ptc-link>Product Pages</ptc-link>
+        <ptc-link>Product Pages</ptc-link>
+        <ptc-link>Product Pages</ptc-link>
+      
+    </div>
+  </div>
+
+  <ptc-spacer></ptc-spacer>
+  <ptc-spacer></ptc-spacer>
+  
+  <div class="ptc-container is-grid has-col-gap link-container ">
+    <div class="is-col-1"></div>
+    <div class="is-col-2 links"><ptc-link>Support</ptc-link>
+      <button class="btn" role="button" >
+      <span class="arrow">
+        <icon-asset slot="icon" type="solid" size="large" name="arrow-down" color="ptc-green"></icon-asset>
+      </span>
+      </button>
+    </div>
+    <div class="is-col-2 llinks"><ptc-link>Manage and monitor software</ptc-link>
+      <button class="btn" role="button" >
+        <span class="arrow">
+          <icon-asset slot="icon" type="solid" size="large" name="arrow-down" color="ptc-green"></icon-asset>
+        </span>
+        </button>
+    </div>
+    <div class="is-col-2 llinks"><ptc-link>Learn</ptc-link>
+      <button class="btn" role="button" >
+        <span class="arrow">
+          <icon-asset slot="icon" type="solid" size="large" name="arrow-down" color="ptc-green"></icon-asset>
+        </span>
+        </button>
+    </div>
+    <div class="is-col-2 llinks"><ptc-link>Service and Expertise</ptc-link>
+      <button class="btn" role="button" >
+        <span class="arrow">
+          <icon-asset slot="icon" type="solid" size="large" name="arrow-down" color="ptc-green"></icon-asset>
+        </span>
+        </button>
+    </div>
+    <div class="is-col-2 llinks"><ptc-link>PTC Partner Network</ptc-link>
+      <button class="btn" role="button" >
+        <span class="arrow">
+          <icon-asset slot="icon" type="solid" size="large" name="arrow-down" color="ptc-green"></icon-asset>
+        </span>
+        </button>
+    </div>
+    <div class="is-col-1 links"></div>
+  </div>
+ <style>
+   
+
+   .btn {
+      display: none;
+      padding: 10px;
+      font-size: 16px;
+      font-weight: 500;
+      border: none;
+      background-color: transparent;
+      cursor: pointer;
+      align-items: center;
+      span {
+        margin-right: 8px;
+        align-items: center;
+      }
+      
+
+      
+   }
+
+  .llinks:hover  .btn {
+      display: block;
+      
+      
+  }
+
+  .links:hover  .btn {
+      display: flex;
+  }
+  .green-container {
+    background-color:#b3dda4 ;
+    padding: 10px;
+    .search-container{
+      background-color: #00890B;
+      padding:10px;
+      align-items: center;
+    }
+    .form-section {
+      background-color: white;
+      padding: 10px;
+
+      ptc-link {
+        padding: 5px;
+      }
+    }
+  }
+  .links {
+    align-content: center;
+    text-align: center;
+    padding-bottom: 16px;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content:  space-between;
+  }
+
+  .llinks {
+    align-content: center;
+    text-align: center;
+    padding-bottom: 16px;
+    border-left: solid 2px #b3dda4;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+
+  }
+  .link-container {
+    border-bottom: solid 2px #b3dda4;
+    /* margin: 15px; */
+  }
+
+  
+</style> 
+    `;}
+
+export const Preview = SupportPage.bind();