@ptcwebops/ptcw-design 6.4.3-beta → 6.4.3

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

@@ -8,7 +8,7 @@ export default {
         display: {
             control: { type: 'select' },
             options: ["block", "flex", "inline", "inline-block"],
-            description: 'Display',
+            description: 'Display, please open the editor to see the difference',
             defaultValue: { summary: "block" },
         },
         svgName: {

package/dist/collection/stories/Textfield.stories.js

@@ -14,11 +14,6 @@ export default {
       description: 'Alert text content - below alert text (grey)',
       defaultValue: { summary: '' }
     },
-    disabled: {
-      control: 'boolean',
-      description: 'Disable the field?',
-      defaultValue: { summary: 'false' }
-    },
     fieldId: {
       control: 'text',
       description: 'ID',
@@ -71,11 +66,6 @@ export default {
       description: 'Is this a mandatory field?',
       defaultValue: { summary: 'true' }
     },
-    styles: {
-      control: 'text',
-      description: 'Inject styles for customization',
-      defaultValue: { summary: '' }
-    },
     type: {
       control: 'text',
       description: 'text, button, email, file and etc. This value triggers different validation',
@@ -87,7 +77,6 @@ export default {
 const Template = args => { return html `<ptc-textfield
 	alert-text=${args.alertText}
 	alert-text-content=${args.alertTextContent}
-	disabled=${args.disabled}
 	field-id=${args.fieldId}
 	field-name=${args.fieldName}
 	helpertext=${args.helpertext}
@@ -99,7 +88,6 @@ const Template = args => { return html `<ptc-textfield
 	ptc-data-target-eloqua-name=${args.ptcDataTargetEloquaName}
 	ptc-max-length=${args.ptcMaxLength}
 	required=${args.required}
-	styles=${args.styles}
 	type=${args.type}
 ></ptc-textfield>`;}
 
@@ -108,7 +96,6 @@ export const Example = Template.bind({});
 Example.args = {
   alertText: 'Alert text',
   alertTextContent: 'Alert text content',
-  disabled: 'false',
   fieldId: 'ID',
   fieldName: 'company field',
   helpertext: 'Helper text',
@@ -120,6 +107,5 @@ Example.args = {
   ptcDataTargetEloquaName: '',
   ptcMaxLength: '',
   required: 'true',
-  styles: '',
   type: 'text'
 }

package/dist/collection/stories/organisms/ptc/Buying Options Cards Slider/preview.stories.js

@@ -0,0 +1,264 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Buying Options Cards Slider'
+};
+
+const BuyingOptionsCardsSliderPage = args => {
+  return html`
+
+
+<section class="ptc-section">
+      <div class="ptc-container">
+        <max-width-container class="u-textAlign-ctr" breakpoint="768" content-align="center" max-width="768">
+          <ptc-title type="h2" seo-compatibility-mode title-color="gray" upperline="no-upperline" title-margin="margin-bottom-4 margin-flush">
+            <h2>Creo buying options</h2>
+          </ptc-title>
+          <p>
+            From enterprise licensing and solutions to single licensing for small teams and hobbyists, we make it easy
+            to activate Creo: the professional's choice for 3D CAD. Get started below.
+          </p>
+          <ptc-button color="ptc-quaternary" tracker-id="creo-demo" seo-compatibility-mode>
+            Lloreum epsum
+          </ptc-button>
+        </max-width-container>
+      </div>
+      <buying-option-cards-slider>
+        <div class="swiper-slide">
+          <buying-option-card background-image="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/38fe812f6a7a4191acc623e82a156c5c?v=c662fa62">
+            <ptc-picture
+              alt="Instance Access"
+              src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/b67a8c51c3ba4fc7ab4eab2ccf19fc15?v=bff94f17"
+              width="48"
+              height="48"
+              image-alignment="center"
+              display-image="inline-block"
+              slot="icon"
+            ></ptc-picture>
+            <ptc-title
+              slot="title"
+              type="h3"
+              title-color="white"
+              text-align="center"
+              upperline="no-upperline"
+              title-margin="margin-flush margin-bottom-2"
+            >
+              Instant Access
+            </ptc-title>
+            <div slot="subtitle">
+              <p>
+                For smaller teams looking for immediate benefits – Creo: the professionals choice for 3D CAD.
+              </p>
+            </div>
+
+            <div>
+              <span class="card-details-header">
+                Up to 5 Licenses
+              </span>
+              <ptc-icon-list list-type="icon-top-align-list">
+                <icon-asset
+                  slot="icon"
+                  type="ptc"
+                  size="x-small"
+                  name="checkmark"
+                  color="ptc-green"
+                  injected-style="svg{ pointer-events: none}"
+                ></icon-asset>
+                <p>Advanced 3D design capabilities</p>
+              </ptc-icon-list>
+              <ptc-icon-list list-type="icon-top-align-list">
+                <icon-asset
+                  slot="icon"
+                  type="ptc"
+                  size="x-small"
+                  name="checkmark"
+                  color="ptc-green"
+                  injected-style="svg{ pointer-events: none}"
+                ></icon-asset>
+                <p>Tailored product suites</p>
+              </ptc-icon-list>
+              <ptc-icon-list list-type="icon-top-align-list">
+                <icon-asset
+                  slot="icon"
+                  type="ptc"
+                  size="x-small"
+                  name="checkmark"
+                  color="ptc-green"
+                  injected-style="svg{ pointer-events: none}"
+                ></icon-asset>
+                <p>Integrated simulation features</p>
+              </ptc-icon-list>
+            </div>
+
+            <ptc-button
+              color="ptc-quaternary"
+              tracker-id="instant-access-buy-now"
+              cta-width="full-width"
+              styles="button{ width: 100%; }"
+              seo-compatibility-mode
+            >
+              Buy Now
+            </ptc-button>
+          </buying-option-card>
+        </div>
+        <div class="swiper-slide">
+          <buying-option-card background-image="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/38fe812f6a7a4191acc623e82a156c5c?v=c662fa62">
+            <ptc-picture
+              alt=""
+              src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/fb7716c401034494ac13d5b1c7d2b5de?v=fa08af5e"
+              width="48"
+              height="48"
+              image-alignment="center"
+              display-image="inline-block"
+              slot="icon"
+            ></ptc-picture>
+            <ptc-title
+              slot="title"
+              type="h3"
+              title-color="white"
+              text-align="center"
+              upperline="no-upperline"
+              title-margin="margin-flush margin-bottom-2"
+            >
+              Chat & Buy
+            </ptc-title>
+            <div slot="subtitle">
+              <p>
+                For larger teams - talk to a Creo expert to identify your challenges and unique Creo solution.
+              </p>
+            </div>
+
+            <div>
+              <span class="card-details-header">
+                5 or More Licenses
+              </span>
+              <ptc-icon-list list-type="icon-top-align-list">
+                <icon-asset
+                  slot="icon"
+                  type="ptc"
+                  size="x-small"
+                  name="checkmark"
+                  color="ptc-green"
+                  injected-style="svg{ pointer-events: none}"
+                ></icon-asset>
+                <p>Expertise to best meet your needs</p>
+              </ptc-icon-list>
+              <ptc-icon-list list-type="icon-top-align-list">
+                <icon-asset
+                  slot="icon"
+                  type="ptc"
+                  size="x-small"
+                  name="checkmark"
+                  color="ptc-green"
+                  injected-style="svg{ pointer-events: none}"
+                ></icon-asset>
+                <p>Product demo or consultation</p>
+              </ptc-icon-list>
+              <ptc-icon-list list-type="icon-top-align-list">
+                <icon-asset
+                  slot="icon"
+                  type="ptc"
+                  size="x-small"
+                  name="checkmark"
+                  color="ptc-green"
+                  injected-style="svg{ pointer-events: none}"
+                ></icon-asset>
+                <p>A la carte licensing</p>
+              </ptc-icon-list>
+            </div>
+
+            <ptc-button
+              color="ptc-quaternary"
+              tracker-id="chat-buy-contact-us"
+              cta-width="full-width"
+              styles="button{ width: 100%; }"
+              seo-compatibility-mode
+            >
+              Contact Us
+            </ptc-button>
+          </buying-option-card>
+        </div>
+        <div class="swiper-slide">
+          <buying-option-card background-image="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/38fe812f6a7a4191acc623e82a156c5c?v=c662fa62">
+            <ptc-picture
+              alt=""
+              src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/12bd2aad6f254eca8bfd78810b775ac9?v=eca64df2"
+              width="48"
+              height="48"
+              image-alignment="center"
+              display-image="inline-block"
+              slot="icon"
+            ></ptc-picture>
+            <ptc-title
+              slot="title"
+              type="h3"
+              title-color="white"
+              text-align="center"
+              upperline="no-upperline"
+              title-margin="margin-flush margin-bottom-2"
+            >
+              Local Support
+            </ptc-title>
+            <div slot="subtitle">
+              <p>
+                Find a trusted local partner to provide expertise and accelerate your Creo integration.
+              </p>
+            </div>
+
+            <div>
+              <span class="card-details-header">
+                Search by Country
+              </span>
+              <ptc-icon-list list-type="icon-top-align-list">
+                <icon-asset
+                  slot="icon"
+                  type="ptc"
+                  size="x-small"
+                  name="checkmark"
+                  color="ptc-green"
+                  injected-style="svg{ pointer-events: none}"
+                ></icon-asset>
+                <p>Trusted support within your region</p>
+              </ptc-icon-list>
+              <ptc-icon-list list-type="icon-top-align-list">
+                <icon-asset
+                  slot="icon"
+                  type="ptc"
+                  size="x-small"
+                  name="checkmark"
+                  color="ptc-green"
+                  injected-style="svg{ pointer-events: none}"
+                ></icon-asset>
+                <p>Digital transformation solutions</p>
+              </ptc-icon-list>
+              <ptc-icon-list list-type="icon-top-align-list">
+                <icon-asset
+                  slot="icon"
+                  type="ptc"
+                  size="x-small"
+                  name="checkmark"
+                  color="ptc-green"
+                  injected-style="svg{ pointer-events: none}"
+                ></icon-asset>
+                <p>Productivity gains & reduced costs</p>
+              </ptc-icon-list>
+            </div>
+
+            <ptc-button
+              color="ptc-quaternary"
+              tracker-id="local-support-get-started"
+              cta-width="full-width"
+              styles="button{ width: 100%; }"
+              seo-compatibility-mode
+            >
+              Get Started
+            </ptc-button>
+          </buying-option-card>
+        </div>
+      </buying-option-cards-slider>
+    </section>
+
+  `;
+};
+
+export const Preview = BuyingOptionsCardsSliderPage.bind();

package/dist/collection/utils/utils.js

@@ -295,14 +295,3 @@ export function CheckDarkFocusState(context, el, classList = '.light-links,.back
     }
   }
 }
-export function isReducedMotion() {
-  var _a, _b;
-  return (_b = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(prefers-reduced-motion: reduce)').matches) !== null && _b !== void 0 ? _b : false;
-}
-export function onReducedMotionChange(cb) {
-  const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
-  const handler = (e) => cb(e.matches);
-  mql.addEventListener('change', handler);
-  cb(mql.matches); // initial run
-  return () => mql.removeEventListener('change', handler);
-}

package/dist/custom-elements/index.d.ts

@@ -44,6 +44,18 @@ export const BundleJumbotronExample: {
   new (): BundleJumbotronExample;
 };
 
+interface BuyingOptionCard extends Components.BuyingOptionCard, HTMLElement {}
+export const BuyingOptionCard: {
+  prototype: BuyingOptionCard;
+  new (): BuyingOptionCard;
+};
+
+interface BuyingOptionCardsSlider extends Components.BuyingOptionCardsSlider, HTMLElement {}
+export const BuyingOptionCardsSlider: {
+  prototype: BuyingOptionCardsSlider;
+  new (): BuyingOptionCardsSlider;
+};
+
 interface DropdownItem extends Components.DropdownItem, HTMLElement {}
 export const DropdownItem: {
   prototype: DropdownItem;
@@ -164,12 +176,6 @@ export const MaxWidthContainer: {
   new (): MaxWidthContainer;
 };
 
-interface ModalFormExample extends Components.ModalFormExample, HTMLElement {}
-export const ModalFormExample: {
-  prototype: ModalFormExample;
-  new (): ModalFormExample;
-};
-
 interface MostPopularNews extends Components.MostPopularNews, HTMLElement {}
 export const MostPopularNews: {
   prototype: MostPopularNews;