@ptcwebops/ptcw-design 3.4.0 → 3.4.2

package/dist/collection/stories/Span.stories.js

@@ -1,57 +1,57 @@
-import { html } from 'lit';
-
-export default {
-    title: "Atoms/ptc-span",
-    tags: [
-      "autodocs"
-    ],
-    argTypes: {
-        display: {
-            control: "select",
-            options: ["block", "inline", "inline-block"],
-            description: "Display",
-            defaultValue: {
-                summary: "inline"
-            }
-        },
-        fontWeight: {
-            control: "select",
-            options: ["w-3", "w-4", "w-5", "w-6", "w-7", "w-8", "w-9"],
-            description: "Span weight",
-            defaultValue: {
-                summary: "w-4"
-            }
-        },
-        spanStyle: {
-            control: "select",
-            options: ['link-style', 'tag-style', 'nav-style', 'plm-hub-style', 'plm-hub-style-smaller', 'blog-tag'],
-            description: "Span Style",
-            defaultValue: {
-                summary: "tag-style"
-            }
-        },
-        // styles: {
-        //     control: "",
-        //     description: "Injected Styles",
-        //     defaultValue: {
-        //         summary: "undefined"
-        //     }
-        // }
-    }
-}
-
-const Template = args => { 
-    return html `<ptc-span
-        display=${args.display}
-        font-weight=${args.fontWeight}
-        span-style=${args.spanStyle} 
-    >Example</ptc-span>`;
-}
-
-export const Example = Template.bind({});
-Example.args = {
-    display: "inline",
-    fontWeight: "w-4",
-    spanStyle: "tag-style",
-    // styles: "undefined",
-}
+import { html } from 'lit';
+
+export default {
+    title: "Atoms/ptc-span",
+    tags: [
+      "autodocs"
+    ],
+    argTypes: {
+        display: {
+            control: "select",
+            options: ["block", "inline", "inline-block"],
+            description: "Display",
+            defaultValue: {
+                summary: "inline"
+            }
+        },
+        fontWeight: {
+            control: "select",
+            options: ["w-3", "w-4", "w-5", "w-6", "w-7", "w-8", "w-9"],
+            description: "Span weight",
+            defaultValue: {
+                summary: "w-4"
+            }
+        },
+        spanStyle: {
+            control: "select",
+            options: ['link-style', 'tag-style', 'nav-style', 'plm-hub-style', 'plm-hub-style-smaller', 'blog-tag'],
+            description: "Span Style",
+            defaultValue: {
+                summary: "tag-style"
+            }
+        },
+        // styles: {
+        //     control: "",
+        //     description: "Injected Styles",
+        //     defaultValue: {
+        //         summary: "undefined"
+        //     }
+        // }
+    }
+}
+
+const Template = args => { 
+    return html `<ptc-span
+        display=${args.display}
+        font-weight=${args.fontWeight}
+        span-style=${args.spanStyle} 
+    >Example</ptc-span>`;
+}
+
+export const Example = Template.bind({});
+Example.args = {
+    display: "inline",
+    fontWeight: "w-4",
+    spanStyle: "tag-style",
+    // styles: "undefined",
+}

package/dist/collection/stories/SvgButton.stories.js

@@ -1,34 +1,34 @@
-import { html } from 'lit';
-
-export default {
-    title: 'Atoms/ptc-svg-btn',
-    tags: ['autodocs'],
-    
-    argTypes: {
-        display: {
-            control: { type: 'select' },
-            options: ["block", "flex", "inline", "inline-block"],
-            description: 'Display',
-            defaultValue: { summary: "block" },
-        },
-        svgName: {
-            control: { type: 'select' },
-            options: ["close", "slider-left", "slider-right", "back-arrow", "play"],
-            description: 'SVG Name',
-            defaultValue: { summary: "undefined" },
-        }
-    }
-}
-
-const Template = args => {
-    return html `<ptc-svg-btn 
-        display="${args.display}"
-        svg-name="${args.svgName}"
-    ></ptc-svg-btn>`;
-}
-
-export const Example = Template.bind({});
-Example.args = {
-    display: "block",
-    svgName: "close"
-}
+import { html } from 'lit';
+
+export default {
+    title: 'Atoms/ptc-svg-btn',
+    tags: ['autodocs'],
+    
+    argTypes: {
+        display: {
+            control: { type: 'select' },
+            options: ["block", "flex", "inline", "inline-block"],
+            description: 'Display',
+            defaultValue: { summary: "block" },
+        },
+        svgName: {
+            control: { type: 'select' },
+            options: ["close", "slider-left", "slider-right", "back-arrow", "play"],
+            description: 'SVG Name',
+            defaultValue: { summary: "undefined" },
+        }
+    }
+}
+
+const Template = args => {
+    return html `<ptc-svg-btn 
+        display="${args.display}"
+        svg-name="${args.svgName}"
+    ></ptc-svg-btn>`;
+}
+
+export const Example = Template.bind({});
+Example.args = {
+    display: "block",
+    svgName: "close"
+}

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

@@ -1,214 +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({});
-
+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' }