@ptcwebops/ptcw-design 6.3.34 → 6.3.35

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

@@ -1,242 +1,100 @@
-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'
-}
+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'
+};

package/dist/collection/stories/TheaterVideo.stories.js

@@ -0,0 +1,21 @@
+import { html } from 'lit';
+
+export default {
+  title: 'New/ptc-theater-video',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    default: {
+      description: 'Default slot content',
+      control: 'text',
+      table: { category: 'slots' }
+    }
+  }
+};
+const Template = (args) => {
+  return html`<ptc-theater-video
+>
+	${args.default}
+</ptc-theater-video>`;
+};
+export const Example = Template.bind({});
+Example.args = { default: 'Lorem ipsum text' };

package/dist/collection/stories/VideoEmbed.stories.js

@@ -0,0 +1,10 @@
+import { html } from 'lit';
+
+export default { title: 'New/ptc-video-embed', tags: [ 'autodocs' ], argTypes: {} };
+const Template = (args) => {
+  return html`<ptc-video-embed
+>
+</ptc-video-embed>`;
+};
+export const Example = Template.bind({});
+Example.args = {};

package/dist/collection/stories/backToTop.stories.js

@@ -0,0 +1,10 @@
+import { html } from 'lit';
+
+export default { title: 'New/ptc-back-to-top', tags: [ 'autodocs' ], argTypes: {} };
+const Template = (args) => {
+  return html`<ptc-back-to-top
+>
+</ptc-back-to-top>`;
+};
+export const Example = Template.bind({});
+Example.args = {};

package/dist/collection/stories/backgroundVideo.stories.js

@@ -0,0 +1,115 @@
+import { html } from 'lit';
+
+export default {
+  title: 'New/ptc-background-video',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    videoSrc: {
+      description: ' Video url',
+      defaultValue: { summary: '' },
+      control: 'text'
+    },
+    posterSrc: {
+      description: ' Poster url(Placeholder image till the video get the loaded)',
+      defaultValue: { summary: '' },
+      control: 'text'
+    },
+    overlay: {
+      description: ' Overlay(Optional, By default is true)',
+      defaultValue: { summary: 'true' },
+      control: 'boolean'
+    },
+    overlayType: {
+      description: ' Overlay Type standard is gray gradient. dark is dark gradient',
+      defaultValue: { summary: 'standard' },
+      control: 'select',
+      options: [ 'standard', 'dark' ]
+    },
+    playButtonTitle: {
+      description: ' Play Button Title',
+      defaultValue: { summary: '' },
+      control: 'text'
+    },
+    pauseButtonTitle: {
+      description: ' Pause Button Title',
+      defaultValue: { summary: '' },
+      control: 'text'
+    },
+    buttonLocation: {
+      description: ' Pause Button Location',
+      defaultValue: { summary: 'bottom-right' },
+      control: 'select',
+      options: [
+        'top-left',
+        'top-right',
+        'bottom-left',
+        'bottom-right',
+        'allbp-bottom-right'
+      ]
+    },
+    buttonTabIndex: {
+      description: ' Play/Pause Index',
+      defaultValue: { summary: '0' }
+    },
+    trackerId: {
+      description: ' Play and Pause Video / @State() paused: boolean; / tracker Id',
+      defaultValue: { summary: '' },
+      control: 'text'
+    },
+    defer: {
+      description: ' delay loading of video to improve perfomance',
+      defaultValue: { summary: '' },
+      control: 'boolean'
+    },
+    type: {
+      description: ' Video implementation type: default: Content need to add in tag Ex: <ptc-background-video>Content </ptc-background-video> legacy: Add the blank tag in any other setcon having relative parent. Ex: <div class="section" style="position: relative;"> <ptc-background-video></ptc-background-video> Content </div>',
+      defaultValue: { summary: 'default' },
+      control: 'select',
+      options: [ 'default', 'legacy' ]
+    },
+    isIframe: {
+      description: ' Is it a iframe?',
+      defaultValue: { summary: 'false' },
+      control: 'boolean'
+    },
+    default: {
+      description: 'Default slot content',
+      control: 'text',
+      table: { category: 'slots' }
+    }
+  }
+};
+const Template = (args) => {
+  return html`<ptc-background-video
+	videoSrc=${args.videoSrc}
+	posterSrc=${args.posterSrc}
+	overlay=${args.overlay}
+	overlayType=${args.overlayType}
+	playButtonTitle=${args.playButtonTitle}
+	pauseButtonTitle=${args.pauseButtonTitle}
+	buttonLocation=${args.buttonLocation}
+	buttonTabIndex=${args.buttonTabIndex}
+	trackerId=${args.trackerId}
+	defer=${args.defer}
+	type=${args.type}
+	isIframe=${args.isIframe}
+>
+	${args.default}
+</ptc-background-video>`;
+};
+export const Example = Template.bind({});
+Example.args = {
+  videoSrc: '',
+  posterSrc: '',
+  overlay: 'true',
+  overlayType: 'standard',
+  playButtonTitle: '',
+  pauseButtonTitle: '',
+  buttonLocation: 'bottom-right',
+  buttonTabIndex: '0',
+  trackerId: '',
+  defer: '',
+  type: 'default',
+  isIframe: 'false',
+  default: 'Lorem ipsum text'
+};

package/dist/collection/stories/jumbotronSubMenu.stories.js

@@ -0,0 +1,14 @@
+import { html } from 'lit';
+
+export default {
+  title: 'New/jumbotron-sub-menu',
+  tags: [ 'autodocs' ],
+  argTypes: {}
+};
+const Template = (args) => {
+  return html`<jumbotron-sub-menu
+>
+</jumbotron-sub-menu>`;
+};
+export const Example = Template.bind({});
+Example.args = {};

package/dist/collection/stories/ptcLink2.stories.js

@@ -0,0 +1,142 @@
+import { html } from 'lit';
+
+export default {
+  title: 'New/ptc-link-new',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    disabled: {
+      description: ' Disabled link',
+      defaultValue: { summary: 'false' },
+      control: 'boolean'
+    },
+    external: {
+      description: ' Rxternal link ',
+      defaultValue: { summary: 'false' },
+      control: 'boolean'
+    },
+    href: {
+      description: ' href',
+      defaultValue: { summary: '' },
+      control: 'select',
+      options: [ 'string', 'undefined' ]
+    },
+    target: {
+      description: ' Target',
+      defaultValue: { summary: '_self' },
+      control: 'select',
+      options: [ 'string', 'undefined' ]
+    },
+    linkTitle: {
+      description: ' Title',
+      defaultValue: { summary: '' },
+      control: 'select',
+      options: [ 'string', 'undefined' ]
+    },
+    theme: {
+      description: ' Theme',
+      defaultValue: { summary: 'simple' },
+      control: 'select',
+      options: [
+        '',                  'simple',
+        'underline',         'nav-title',
+        'primary-nav-link',  'nav-title-link',
+        'nav-card-link',     'secondary-nav-link',
+        'footer-nav-link',   'copyright-link',
+        'product-link',      'd-green-underline',
+        'd-white-underline', 'global',
+        'utility-nav-link',  'standard-link'
+      ]
+    },
+    fontSize: {
+      description: ' Font Size',
+      defaultValue: { summary: 'medium' },
+      control: 'select',
+      options: [ 'small', 'medium', 'large', 'medium-large' ]
+    },
+    fontWeight: {
+      description: ' Font Weight',
+      defaultValue: { summary: '' },
+      control: 'select',
+      options: [
+        'w-thin',
+        'w-regular',
+        'w-medium',
+        'w-semibold',
+        'w-bold',
+        'w-extrabold',
+        'w-black'
+      ]
+    },
+    linkArea: {
+      description: ' Optional Link Area',
+      defaultValue: { summary: '' }
+    },
+    seoCompatibilityMode: {
+      description: ' (optional) enable support for seo tools that can only view source',
+      defaultValue: { summary: 'false' },
+      control: 'boolean'
+    },
+    styles: {
+      description: ' (optional) Injected CSS Styles',
+      defaultValue: { summary: '' },
+      control: 'text'
+    },
+    trackerId: {
+      description: ' trackerId added for Mouseflow id',
+      defaultValue: { summary: '' },
+      control: 'text'
+    },
+    tabNav: {
+      description: ' (optional) tab-nav. indicates that its element can be focused, and where it participates in sequential keyboard navigation. A negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation',
+      defaultValue: { summary: '0' }
+    },
+    darkFocusState: {
+      description: ' darkFocusState for dark background',
+      defaultValue: { summary: 'false' },
+      control: 'boolean'
+    },
+    default: {
+      description: 'Default slot content',
+      control: 'text',
+      table: { category: 'slots' }
+    }
+  }
+};
+const Template = (args) => {
+  return html`<ptc-link
+	disabled=${args.disabled}
+	external=${args.external}
+	href=${args.href}
+	target=${args.target}
+	linkTitle=${args.linkTitle}
+	theme=${args.theme}
+	fontSize=${args.fontSize}
+	fontWeight=${args.fontWeight}
+	linkArea=${args.linkArea}
+	seoCompatibilityMode=${args.seoCompatibilityMode}
+	styles=${args.styles}
+	trackerId=${args.trackerId}
+	tabNav=${args.tabNav}
+	darkFocusState=${args.darkFocusState}
+>
+	${args.default}
+</ptc-link>`;
+};
+export const Example = Template.bind({});
+Example.args = {
+  disabled: 'false',
+  external: 'false',
+  href: '',
+  target: '_self',
+  linkTitle: '',
+  theme: 'simple',
+  fontSize: 'medium',
+  fontWeight: '',
+  linkArea: '',
+  seoCompatibilityMode: 'false',
+  styles: '',
+  trackerId: '',
+  tabNav: '0',
+  darkFocusState: 'false',
+  default: 'Lorem ipsum text'
+};