@ptcwebops/ptcw-design 6.3.36 → 6.3.37-beta

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

@@ -1,100 +1,242 @@
-import { html } from 'lit';
-
-export default {
-  title: 'New/ptc-text-copy-with-background',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    type: {
-      description: ' Type Specify Type, default is text-copy-with-background',
-      defaultValue: { summary: 'text-copy-with-background' },
-      control: 'select',
-      options: [
-        'text-copy-with-background',
-        'hero-footer-cta',
-        'tab-cta-with-background',
-        'case-studies'
-      ]
-    },
-    backgroundImage: {
-      description: ' Background image',
-      defaultValue: { summary: '' },
-      control: 'text'
-    },
-    ImageAltText: {
-      description: ' (optional) Image alt text',
-      defaultValue: { summary: '' },
-      control: 'text'
-    },
-    topSlitBackgroundColor: {
-      description: ' (optional) topSlitBackgroundColor: It will be color value which should match the background of the body. Entering in "auto" will grab the background color of the body on page load.',
-      defaultValue: { summary: '' },
-      control: 'text'
-    },
-    slitPosition: {
-      description: ' (optional) topSlitPosition: It will decide the position of .',
-      defaultValue: { summary: 'top-right' },
-      control: 'select',
-      options: [ 'top-left', 'top-right', 'bottom-left', 'bottom-right' ]
-    },
-    isBackgroundBlur: {
-      description: ' (optional) isBackgroundBlur: If true,it will add background blur image effect',
-      defaultValue: { summary: 'false' },
-      control: 'boolean'
-    },
-    overlay: {
-      description: ' (optional) overlay: If true,it will add black overlay with 0.55 opacity',
-      defaultValue: { summary: 'true' },
-      control: 'boolean'
-    },
-    disableLightLinks: {
-      description: ' (optional) disableLightLinks: If true, it will not add class for links to be lighter for ADA compliance',
-      defaultValue: { summary: 'false' },
-      control: 'boolean'
-    },
-    styles: {
-      description: ' (optional) Injected CSS Styles',
-      defaultValue: { summary: '' },
-      control: 'text'
-    },
-    default: {
-      description: 'Default slot content',
-      control: 'text',
-      table: { category: 'slots' }
-    },
-    'card-content': {
-      description: 'Slot: card-content',
-      control: 'text',
-      table: { category: 'slots' }
-    }
-  }
-};
-const Template = (args) => {
-  return html`<ptc-text-copy-with-background
-	type=${args.type}
-	backgroundImage=${args.backgroundImage}
-	ImageAltText=${args.ImageAltText}
-	topSlitBackgroundColor=${args.topSlitBackgroundColor}
-	slitPosition=${args.slitPosition}
-	isBackgroundBlur=${args.isBackgroundBlur}
-	overlay=${args.overlay}
-	disableLightLinks=${args.disableLightLinks}
-	styles=${args.styles}
->
-	${args.default}
-	<span slot="card-content">${args.card-content}</span>
-</ptc-text-copy-with-background>`;
-};
-export const Example = Template.bind({});
-Example.args = {
-  type: 'text-copy-with-background',
-  backgroundImage: '',
-  ImageAltText: '',
-  topSlitBackgroundColor: '',
-  slitPosition: 'top-right',
-  isBackgroundBlur: 'false',
-  overlay: 'true',
-  disableLightLinks: 'false',
-  styles: '',
-  default: 'Lorem ipsum text',
-  'card-content': 'Lorem for card-content'
-};
+import { html } from 'lit';
+
+export default {
+  title: 'Molecules/ptc-text-copy-with-background',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    ImageAltText: {
+      control: 'text',
+      description: '(optional) Image alt text',
+      defaultValue: { summary: 'undefined' }
+    },
+    backgroundImage: {
+      control: 'text',
+      description: 'Background image',
+      defaultValue: { summary: 'undefined' }
+    },
+    isBackgroundBlur: {
+      control: 'boolean',
+      description: '(optional) isBackgroundBlur: If true,it will add background blur image effect',
+      defaultValue: { summary: 'false' }
+    },
+    overlay: {
+      control: 'boolean',
+      description: '(optional) overlay: If true,it will add black overlay with 0.55 opacity',
+      defaultValue: { summary: 'true' }
+    },
+    slitPosition: {
+      control: 'select',
+      options: [
+        "bottom-left",
+        "bottom-right",
+        "top-left",
+        "top-right"
+      ],
+      description: '(optional) topSlitPosition: It will decide the position of .',
+      defaultValue: { summary: 'top-right' }
+    },
+    topSlitBackgroundColor: {
+      control: 'text',
+      description: "(optional) topSlitBackgroundColor: It will be color value which should match the background of the body. Entering in 'auto' will grab the background color of the body on page load.",
+      defaultValue: { summary: 'undefined' }
+    },
+    type: {
+      control: 'select',
+      options: ["case-studies", "hero-footer-cta", "tab-cta-with-background", "text-copy-with-background"],
+      description: 'Type Specify  Type, default is text-copy-with-background',
+      defaultValue: { summary: 'text-copy-with-background' }
+    }
+  }
+};
+
+// const Template = args => { return html `<ptc-text-copy-with-background
+// 	image-alt-text=${args.ImageAltText}
+// 	background-image=${args.backgroundImage}
+// 	is-background-blur=${args.isBackgroundBlur}
+// 	overlay=${args.overlay}
+// 	slit-position=${args.slitPosition}
+// 	top-slit-background-color=${args.topSlitBackgroundColor}
+// 	type=${args.type}
+// ></ptc-text-copy-with-background>`;}
+
+// export const Example = Template.bind({});
+
+// Example.args = {
+//   ImageAltText: 'undefined',
+//   backgroundImage: 'undefined',
+//   isBackgroundBlur: 'false',
+//   overlay: 'true',
+//   slitPosition: 'top-right',
+//   topSlitBackgroundColor: 'undefined',
+//   type: 'text-copy-with-background'
+// }
+
+// ** Text Copy With Background **
+
+
+const TextCopyWithBackgroundTemplate = args => {
+  const textColorTitle = args.type === 'tab-cta-with-background' ? 'gray' : 'white';
+  const textColorPara = args.type === 'tab-cta-with-background' ? 'primary-grey' : 'white';
+  return html `<ptc-text-copy-with-background
+	image-alt-text=${args.ImageAltText}
+	background-image=${args.backgroundImage}
+	is-background-blur=${args.isBackgroundBlur}
+	overlay=${args.overlay}
+	slit-position=${args.slitPosition}
+	top-slit-background-color=${args.topSlitBackgroundColor}
+	type=${args.type}
+>
+  <div class="ptc-container">
+    <div class="is-grid">
+        <div class="is-col is-col-6-lg is-col-5-xl">
+            <ptc-title title-color=${textColorTitle} type='h2' text-align='left' upperline="no-upperline"
+                title-margin="margin-flush" title-size="xx-large">
+                FactoryTalk Innovation Suite, powered by PTC </ptc-title>
+            <ptc-para font-size="small" para-color=${textColorPara} para-line-h="line-height-denser" font-weight="w-5"
+                para-margin="margin-4">
+                Transform your operations with the power of edge-to-enterprise analytics, machine learning, and
+                industrial IoT.PTC and Rockwell Automation are driving production management.
+            </ptc-para>
+            <ptc-spacer size="medium"></ptc-spacer>
+            <ptc-button type="link" color="ptc-primary" link-href="https://www.ptc.com" target="_blank">Request
+                Free Trial
+            </ptc-button>
+        </div>
+    </div>
+  </div>
+</ptc-text-copy-with-background>`;}
+
+export const TextCopyWithBackground = TextCopyWithBackgroundTemplate.bind({});
+
+TextCopyWithBackground.args = {
+  ImageAltText: 'undefined',
+  backgroundImage: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/8a544169f68442368b37d4ad1295bb21',
+  isBackgroundBlur: true,
+  overlay: true,
+  slitPosition: 'top-right',
+  topSlitBackgroundColor: 'white',
+  type: 'text-copy-with-background'
+}
+
+// ** Hero Footer CTA **
+
+const HeroFooterCTATemplate = args => { return html `<ptc-text-copy-with-background
+	image-alt-text=${args.ImageAltText}
+	background-image=${args.backgroundImage}
+	is-background-blur=${args.isBackgroundBlur}
+	overlay=${args.overlay}
+	slit-position=${args.slitPosition}
+	top-slit-background-color=${args.topSlitBackgroundColor}
+	type=${args.type}
+>
+  <div class="ptc-container">
+    <div class="is-grid">
+      <div class="is-col is-col-6-lg">
+        <ptc-title title-color="white" type='h2' text-align='left' title-size="xxxx-large"
+          upperline="no-upperline" title-margin="margin-flush">
+          Contact PTC today
+        </ptc-title>
+        <ptc-para font-size="small" para-color="white" para-line-h="line-height-denser" font-weight="w-6"
+          para-margin="margin-4">
+          Whether you’re a government contractor or serving in our military, PTC can help you achieve
+          excellence.
+        </ptc-para>
+      </div>
+      <div class="is-col is-col-6-lg u-flex-md">
+        <ptc-button class="u-align-center" type="link" color="ptc-quaternary" link-href="https://www.ptc.com"
+          target="_blank">Contact PTC
+        </ptc-button>
+      </div>
+    </div>
+  </div>
+</ptc-text-copy-with-background>`;}
+
+export const HeroFooterCTA = HeroFooterCTATemplate.bind({});
+
+HeroFooterCTA.args = {
+  ImageAltText: 'undefined',
+  backgroundImage: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/5ac472cf42f241ee85f44085971dcc7e',
+  isBackgroundBlur: true,
+  overlay: true,
+  slitPosition: 'top-right',
+  topSlitBackgroundColor: 'white',
+  type: 'hero-footer-cta'
+}
+
+// ** Tab CTA with background image **
+
+const TabCTAWithBackgroundImageTemplate = args => { return html `<ptc-text-copy-with-background
+	image-alt-text=${args.ImageAltText}
+	background-image=${args.backgroundImage}
+	is-background-blur=${args.isBackgroundBlur}
+	overlay=${args.overlay}
+	slit-position=${args.slitPosition}
+	top-slit-background-color=${args.topSlitBackgroundColor}
+	type=${args.type}
+>
+<div class="ptc-container">
+  <div class="is-grid">
+    <div class="is-col is-col-6-lg is-col-5-xl">
+      <ptc-title type='h3' text-align='left' upperline="no-upperline"
+          title-margin="margin-flush" title-color="gray">
+          Factory Insights as a Service</ptc-title>
+      <ptc-para font-size="small" para-line-h="line-height-denser" font-weight="w-5">
+          Deliver business impact for digital transformation initiatives, accelerate time to
+          value, and scale rapidly across the business.
+      </ptc-para>
+      <ptc-spacer breakpoint="large" size="large"></ptc-spacer>
+      <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com"
+          target="_blank">Explore the Solution
+      </ptc-button>
+      </div>
+    </div>
+  </div>
+</ptc-text-copy-with-background>`;}
+
+export const TabCTAWithBackgroundImage = TabCTAWithBackgroundImageTemplate.bind({});
+
+TabCTAWithBackgroundImage.args = {
+  ImageAltText: 'undefined',
+  backgroundImage: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/5ac472cf42f241ee85f44085971dcc7e',
+  isBackgroundBlur: false,
+  overlay: true,
+  slitPosition: undefined,
+  topSlitBackgroundColor: 'none',
+  type: 'tab-cta-with-background'
+}
+
+// ** Case studies slider cta with background image **
+
+const CaseStudiesSliderCtaWithBackgroundImageTemplate = args => { return html `<ptc-text-copy-with-background
+	image-alt-text=${args.ImageAltText}
+	background-image=${args.backgroundImage}
+	is-background-blur=${args.isBackgroundBlur}
+	overlay=${args.overlay}
+	slit-position=${args.slitPosition}
+	top-slit-background-color=${args.topSlitBackgroundColor}
+	type=${args.type}
+>
+  <div class="card-content" slot="card-content">
+    <ptc-title type='h2' text-align='left' upperline="solid" title-height="normal"
+        title-margin="margin-flush" title-display="block">Withings</ptc-title>
+    <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-6"
+        para-line-h="line-height-dense"> Hybrid
+        smartwatch pioneer relies on cloud-native Onshape to streamline collaboration
+        between its globally distributed design teams.</ptc-para>
+    <ptc-button type="link" color="ptc-secondary" link-title="" link-href="https://www.ptc.com"
+        target="_blank">Watch the Video
+    </ptc-button>
+  </div>
+</ptc-text-copy-with-background>`;}
+
+export const CaseStudiesSliderCtaWithBackgroundImage = CaseStudiesSliderCtaWithBackgroundImageTemplate.bind({});
+
+CaseStudiesSliderCtaWithBackgroundImage.args = {
+  ImageAltText: 'undefined',
+  backgroundImage: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/5ac472cf42f241ee85f44085971dcc7e',
+  isBackgroundBlur: false,
+  overlay: false,
+  slitPosition: 'bottom-right',
+  topSlitBackgroundColor: 'white',
+  type: 'case-studies'
+}

package/dist/collection/stories/Title.stories.js

@@ -1,5 +1,4 @@
 import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 export default {
   title: 'Atoms/ptc-title',
@@ -78,36 +77,26 @@ export default {
     isPlmHub: {
         description: "is it a title for PLM Hub page?",
         defaultValue: {summary: false}
-    },
-    slotContent: {
-      name: 'Default Slot',
-      description: 'Text Content between the <ptc-title> tags.',
-      control: 'text',
-      table: {
-        category: 'Default Slot',
-        type: {
-            summary: 'html',
-        },
-      }
     }
   },
 };
 
-const Template = args => {return html`<ptc-title
-  type="${args.type}"
-  text-align="${args.textAlign}"
-  title-size="${args.titleSize}"
-  title-color="${args.titleColor}"
-  upperline="${args.upperline}"
-  title-display="${args.titleDisplay}"
-  title-shadow="${args.titleShadow}"
-  title-height="${args.titleHeight}"
-  title-margin="${args.titleMargin}"
-  title-weight="${args.titleWeight}"
-  is-plm-hub="${args.isPlmHub}"
->
-  ${unsafeHTML(args.slotContent)}
-</ptc-title>`;
+const Template = args => {
+  return html`<ptc-title
+    type="${args.type}"
+    text-align="${args.textAlign}"
+    title-size="${args.titleSize}"
+    title-color="${args.titleColor}"
+    upperline="${args.upperline}"
+    title-display="${args.titleDisplay}"
+    title-shadow="${args.titleShadow}"
+    title-height="${args.titleHeight}"
+    title-margin="${args.titleMargin}"
+    title-weight="${args.titleWeight}"
+    is-plm-hub="${args.isPlmHub}"
+  >
+    Title Example
+  </ptc-title>`;
 };
 
 export const Example = Template.bind({});
@@ -123,5 +112,4 @@ Example.args = {
   titleWeight: 'w-8',
   titleShadow: '',
   isPlmHub: false,
-  slotContent:'Lorem ipsum',
 };

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();