@ptcwebops/ptcw-design 1.8.2 → 1.8.4

package/dist/collection/stories/Tabs.stories.js

@@ -0,0 +1,214 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Molecules/ptc-tab-list',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['default', 'tab-with-banner'],
+      description: 'Tab Type',
+      defaultValue: { summary: 'undefined' }
+    }
+  }
+};
+
+// const Template = args => { return html `<ptc-tab-list
+// 	type=${args.type}
+// ></ptc-tab-list>`;}
+
+// export const Example = Template.bind({});
+
+// Example.args = { type: 'undefined' }
+
+// ** SimpleTab **
+
+const SimpleTabTemplate = args => { return html `<ptc-tab-list
+	type=${args.type}
+>
+  <tab-header slot="header" name="tab1">Overview</tab-header>
+  <tab-header slot="header" name="tab2">New Features</tab-header>
+  <tab-header slot="header" name="tab3">Included With Your Subscription</tab-header>
+  <tab-header slot="header" name="tab4">PTC Global Support Information</tab-header>
+  <tab-header slot="header" name="tab5">Included With Your Subscription</tab-header>
+  ​
+  <tab-content slot="content" name="tab1">
+      <h3>Title</h3>
+      <p>
+          PTC Mathcad Prime is purpose-built software for engineering math. Engineering
+          calculations are too important and complex to entrust to a spreadsheet. That’s why
+          engineers choose PTC Mathcad Prime as their calculation tool.
+      </p>        ​
+  </tab-content>
+  ​
+  <tab-content slot="content" name="tab2">
+      <p>
+          PTC Mathcad Prime is the industry standard for engineering mathematics software,
+          enabling you to solve your most complex problems, and share your engineering
+          calculations. And with PTC Mathcad Prime 8, engineering calculations just got better.
+          This release introduces key application, symbolic engine, numeric engine, and usability
+          enhancements.
+      </p>
+  </tab-content>
+  ​
+  <tab-content slot="content" name="tab3">
+      <p>
+          PTC's smart subscription choices allow you to gain access to industry-leading software
+          and support without the significant upfront cost of a perpetual software license.
+      </p>
+  </tab-content>
+  ​
+  <tab-content slot="content" name="tab4">
+      <p>
+          PTC offers a variety of support options, from the Gold support package to Platinum Plus,
+          including our new product, Smart Connected Support.
+      </p>
+  </tab-content>
+  <tab-content slot="content" name="tab5">
+      <p>
+          PTC offers a variety of support options, from the Gold support package to Platinum Plus,
+          including our new product, Smart Connected Support.
+      </p>
+  </tab-content>
+</ptc-tab-list>`;}
+
+export const SimpleTab = SimpleTabTemplate.bind({});
+
+SimpleTab.args = { type: 'undefined' }
+
+// ** TwoColumnWithToggleTab **
+
+const TwoColumnWithToggleTabTemplate = args => { return html `<ptc-tab-list
+	type=${args.type}
+>
+  <tab-header slot="header" name="tab1"> Factory Insights as a Service </tab-header>
+  <tab-header slot="header" name="tab2">ThingWorx IIoT Platform</tab-header>
+  <tab-header slot="header" name="tab3"> ThingWorx Azure</tab-header>
+  <tab-header slot="header" name="tab4">Windchill</tab-header>
+  <tab-header slot="header" name="tab5"> ThingWorx Kepware Edge</tab-header>
+  <tab-header slot="header" name="tab6">PTC Cloud Solutions</tab-header>
+  ​
+  <tab-content slot="content" name="tab1">
+      <ptc-text-copy-with-background type="tab-cta-with-background" top-slit-background-color="none"        background-image="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">
+          <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>
+  </tab-content>
+  ​
+  <tab-content slot="content" name="tab2">
+      <ptc-text-copy-with-background type="tab-cta-with-background" top-slit-background-color="none"       background-image="https://www.ptc.com/-/media/Images/new-org/1920x500/technologies/thingworx-iiot-platform1920x500.jpg?h=500&w=1920&la=en&hash=EE076BC966227C8161DC44B29116A532">
+          <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">
+                          ThingWorx IIoT Platform</ptc-title>
+                      <ptc-para font-size="small" para-line-h="line-height-denser" font-weight="w-5">
+                          Remove your barriers to digital transformation with ThingWorx, the IIoT platform
+                          purpose-built to address your business challenges.
+                      </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 ThingWorx </ptc-button>
+                  </div>
+              </div>
+          </div>
+      </ptc-text-copy-with-background>
+  </tab-content>
+  ​
+  <tab-content slot="content" name="tab3">
+      <ptc-text-copy-with-background type="tab-cta-with-background" top-slit-background-color="none" background-image="https://www.ptc.com/-/media/Images/new-org/1920x500/technologies/thingworx-azure-iiot1920x500.jpg?h=500&w=1920&la=en&hash=263185A5CAC91B4E8038A24BCD44077B">
+          <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">
+                          ThingWorx Azure</ptc-title>
+                      <ptc-para font-size="small" para-line-h="line-height-denser" font-weight="w-5">
+                          Deploy ThingWorx industrial IoT on Microsoft’s leading cloud infrastructure to accelerate your company’s digital transformation with unprecedented speed, scale, and security.
+                      </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>
+  </tab-content>
+  ​
+  <tab-content slot="content" name="tab4">
+      <ptc-text-copy-with-background type="tab-cta-with-background" top-slit-background-color="none"       background-image="https://www.ptc.com/-/media/Images/new-org/1920x500/technologies/windchill-cloud-enterprise-worker-tablet-hardhat.jpg?h=500&w=1920&la=en&hash=C7092C75035C9554F0DA75054DD3C74E">
+          <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">
+                          Windchill</ptc-title>
+                      <ptc-para font-size="small" para-line-h="line-height-denser" font-weight="w-5">
+                          Enable your enterprise to manage product development throughout the entire lifecycle. Our PLM cloud solution, Windchill, can help increase business flexibility by enabling better change management, streamlining communication and processes, and allowing you to adjust quickly to new needs and requirements.
+                      </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 PLM Cloud </ptc-button>
+                  </div>
+              </div>
+          </div>
+      </ptc-text-copy-with-background>
+  </tab-content>
+  <tab-content slot="content" name="tab5">
+      <ptc-text-copy-with-background type="tab-cta-with-background" top-slit-background-color="none"       background-image="https://www.ptc.com/-/media/Images/new-org/1920x500/technologies/thingworx-kepware-edge-wide-factory1920x500.jpg?h=500&w=1920&la=en&hash=A082674BFDE16ED2A88CEBD51C3579A2">
+          <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">ThingWorx Kepware Edge</ptc-title>
+                      <ptc-para font-size="small" para-line-h="line-height-denser" font-weight="w-5">
+                          Reliably and securely connect distributed devices to critical applications and systems.
+                      </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 edge solutions</ptc-button>
+                  </div>
+              </div>
+          </div>
+      </ptc-text-copy-with-background>
+  </tab-content>
+  <tab-content slot="content" name="tab6">
+      <ptc-text-copy-with-background type="tab-cta-with-background" top-slit-background-color="none"background-image="https://www.ptc.com/-/media/Images/new-org/1920x500/technologies/ptc-cloud-solutions-server1920x500.jpg?h=500&w=1920&la=en&hash=634D7423B0F362856C63A084A7083835">
+          <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">
+                          PTC Cloud Solutions</ptc-title>
+                      <ptc-para font-size="small" para-line-h="line-height-denser" font-weight="w-5">
+                          Experience all the benefits PTC Cloud solutions have to offer. Learn how we can help your team reduce downtime while we rapidly deploy, manage, secure, and optimize your PTC solutions in the cloud.
+                      </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 PTC Cloud</ptc-button>
+                  </div>
+              </div>
+          </div>
+      </ptc-text-copy-with-background>
+  </tab-content>
+</ptc-tab-list>`;}
+
+export const TwoColumnWithToggleTab = TwoColumnWithToggleTabTemplate.bind({});
+
+TwoColumnWithToggleTab.args = { type: 'undefined' }

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

@@ -0,0 +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'
+}