@ptcwebops/ptcw-design 2.2.0 → 2.2.2

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

@@ -1,238 +1,238 @@
-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 => { 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="white" 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="white" 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://www.ptc.com/-/media/Images/new-org/1920x906/Augmented-Reality/CTA-FTIS2.jpg?h=660&w=1920&la=en&hash=0A8BE693C247D7FD02A74528B157A272',
-  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://www.ptc.com/-/media/Images/new-org/1920x500/CTA-Hero-Alternate/industries-aerospace-and-defense-plane-turbine1920x500.jpg?h=500&w=1920&la=en&hash=5F771ACE5F6223EF724CE26B8B7D6A65',
-  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://www.ptc.com/-/media/Images/new-org/1920x500/technologies/hybrid-cloud-fiaas-worker-tablet-hardhat1920x500.jpg?h=500&w=1920&la=en&hash=D6842D081A15FDD28F663C8A7FE5E5EB',
-  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://www.ptc.com/-/media/Images/new-org/1366x500/case-studies/withings-1366x500px.jpg?h=500&w=1366&la=en&hash=A264589A607595A7B7205A9C99D5045C',
-  isBackgroundBlur: false,
-  overlay: false,
-  slitPosition: 'bottom-right',
-  topSlitBackgroundColor: 'white',
-  type: 'case-studies'
+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 => { 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="white" 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="white" 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://www.ptc.com/-/media/Images/new-org/1920x906/Augmented-Reality/CTA-FTIS2.jpg?h=660&w=1920&la=en&hash=0A8BE693C247D7FD02A74528B157A272',
+  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://www.ptc.com/-/media/Images/new-org/1920x500/CTA-Hero-Alternate/industries-aerospace-and-defense-plane-turbine1920x500.jpg?h=500&w=1920&la=en&hash=5F771ACE5F6223EF724CE26B8B7D6A65',
+  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://www.ptc.com/-/media/Images/new-org/1920x500/technologies/hybrid-cloud-fiaas-worker-tablet-hardhat1920x500.jpg?h=500&w=1920&la=en&hash=D6842D081A15FDD28F663C8A7FE5E5EB',
+  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://www.ptc.com/-/media/Images/new-org/1366x500/case-studies/withings-1366x500px.jpg?h=500&w=1366&la=en&hash=A264589A607595A7B7205A9C99D5045C',
+  isBackgroundBlur: false,
+  overlay: false,
+  slitPosition: 'bottom-right',
+  topSlitBackgroundColor: 'white',
+  type: 'case-studies'
 }