@ptcwebops/ptcw-design 6.4.2 → 6.4.3

package/dist/collection/stories/ReadmoreV2.stories.js

@@ -1,37 +0,0 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Atoms/ptc-readmore-v2',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    maxCharacters: {
-      control: '',
-      description: 'Character limit',
-      defaultValue: { summary: '100' }
-    },
-    readLessText: {
-      control: 'text',
-      description: 'Read Less Text',
-      defaultValue: { summary: "'Read Less'" }
-    },
-    readMoreText: {
-      control: 'text',
-      description: 'Read More Text',
-      defaultValue: { summary: "'Read More'" }
-    }
-  }
-};
-
-const Template = args => { return html `<ptc-readmore-v2
-	max-characters=${args.maxCharacters}
-	read-less-text=${args.readLessText}
-	read-more-text=${args.readMoreText}
->tes Nulla ut nunc id nulla aliquam feugiat. Maecenas quis dui rhoncus, mattis risus ac, tincidunt massa. Cras dictum aliquet eleifend. Etiam condimentum suscipit vulputate. In tempus ante at eros elementum volutpat. Ut aliquam mattis velit, sed malesuada lorem. Donec eu posuere nisl, eget scelerisque lectus. Donec id nibh quis lectus euismod semper eget in sem. Ut vulputate cursus libero ut pharetra.Ut aliquam mattis velit, sed malesuada lorem. Donec eu posuere nisl, eget scelerisque lectus. Donec id nibh quis lectus euismod semper eget in sem. Ut vulputate cursus libero ut pharetra.</ptc-readmore-v2>`;}
-
-export const Example = Template.bind({});
-
-Example.args = {
-  maxCharacters: '100',
-  readLessText: "Read Less",
-  readMoreText: "Read More"
-}

package/dist/collection/stories/ScrollButton.stories.js

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

package/dist/collection/stories/SearchField.stories.js

@@ -1,21 +0,0 @@
-import { html } from 'lit';
-
-export default {
-  title: 'New/ptc-search-field',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    styles: {
-      description: ' (optional) Injected CSS styles ',
-      defaultValue: { summary: '' },
-      control: 'text'
-    }
-  }
-};
-const Template = (args) => {
-  return html`<ptc-search-field
-	styles=${args.styles}
->
-</ptc-search-field>`;
-};
-export const Example = Template.bind({});
-Example.args = { styles: '' };

package/dist/collection/stories/SocialShare.stories.js

@@ -1,83 +0,0 @@
-import { html } from 'lit';
-
-export default {
-  title: 'New/ptc-social-share',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    source: {
-      description: ' Optional - source for linkedin',
-      defaultValue: { summary: '' },
-      control: 'text'
-    },
-    recipient: {
-      description: ' Email recipient. If you want to use mail share, you need to use this property',
-      defaultValue: { summary: '' },
-      control: 'text'
-    },
-    iconColor: {
-      description: ' Icon asset color',
-      defaultValue: { summary: 'white' },
-      control: 'select',
-      options: [
-        'black',
-        'white',
-        'ptc-green',
-        'gray',
-        'primary-gray',
-        'inherit'
-      ]
-    },
-    iconHoverColor: {
-      description: ' Icon asset hover color',
-      defaultValue: { summary: 'gray' },
-      control: 'select',
-      options: [
-        'black',
-        'white',
-        'ptc-green',
-        'gray',
-        'primary-gray',
-        'inherit'
-      ]
-    },
-    iconSize: {
-      description: ' is hover or not / @State() isHover: boolean = false; / Icon Size',
-      defaultValue: { summary: 'large' },
-      control: 'select',
-      options: [
-        'small',
-        'medium',
-        'large',
-        'x-large',
-        'xx-large',
-        'xxx-large',
-        'xxxx-large'
-      ]
-    },
-    darkFocusState: {
-      description: ' darkFocusState for dark background',
-      defaultValue: { summary: 'false' },
-      control: 'boolean'
-    }
-  }
-};
-const Template = (args) => {
-  return html`<ptc-social-share
-	source=${args.source}
-	recipient=${args.recipient}
-	iconColor=${args.iconColor}
-	iconHoverColor=${args.iconHoverColor}
-	iconSize=${args.iconSize}
-	darkFocusState=${args.darkFocusState}
->
-</ptc-social-share>`;
-};
-export const Example = Template.bind({});
-Example.args = {
-  source: '',
-  recipient: '',
-  iconColor: 'white',
-  iconHoverColor: 'gray',
-  iconSize: 'large',
-  darkFocusState: 'false'
-};

package/dist/collection/stories/SvgBtn.stories.js

@@ -1,36 +0,0 @@
-import { html } from 'lit';
-
-export default {
-  title: 'New/ptc-svg-btn',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    svgName: {
-      description: ' Options: "close", "slider-left", "slider-right", "back-arrow"',
-      defaultValue: { summary: 'close' },
-      control: 'text'
-    },
-    display: {
-      description: ' Display',
-      defaultValue: { summary: 'block' },
-      control: 'select',
-      options: [ 'block', 'inline', 'inline-block', 'flex' ]
-    },
-    zIndex: {
-      description: ' Z-Index',
-      defaultValue: { summary: '' },
-      control: 'text'
-    },
-    styles: { description: ' Injected Styles', defaultValue: { summary: '' } }
-  }
-};
-const Template = (args) => {
-  return html`<ptc-svg-btn
-	svgName=${args.svgName}
-	display=${args.display}
-	zIndex=${args.zIndex}
-	styles=${args.styles}
->
-</ptc-svg-btn>`;
-};
-export const Example = Template.bind({});
-Example.args = { svgName: 'close', display: 'block', zIndex: '', styles: '' };

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

@@ -1,100 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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/Title.stories.js

@@ -1,127 +0,0 @@
-import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-
-export default {
-  title: 'Atoms/ptc-title',
-  tags: ['autodocs'],
-
-  argTypes: {
-    type: {
-      control: { type: 'inline-radio' },
-      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-      description: 'H tag',
-      defaultValue: { summary: 'h2' },
-    },
-    textAlign: {
-      control: { type: 'inline-radio' },
-      options: ['left', 'center', 'right', 'inherit'],
-      description: 'Title alignment',
-    },
-    titleDisplay: {
-      control: { type: 'select' },
-      options: ['block', 'inline-block'],
-      description: 'Title heading display',
-      defaultValue: { summary: 'inline-block' },
-    },
-    titleSize: {
-      control: { type: 'select' },
-      options: [
-        'xx-small',
-        'x-small',
-        'small',
-        'medium',
-        'large',
-        'x-large',
-        'xx-large',
-        'xxx-large',
-        'xxxx-large',
-        'xxxx-large-allbp',
-        'xx-large-allbp',
-        'xxxx-large-desktop',
-        'xxxx-large-store',
-      ],
-      description: 'Title size',
-    },
-    titleColor: {
-      control: { type: 'select' },
-      options: ['black', 'white', 'gray', 'gray-darker', 'gray-1'],
-      description: 'Title color',
-      defaultValue: { summary: 'gray' },
-    },
-    upperline: {
-      control: { type: 'inline-radio' },
-      options: ['dotted', 'solid', 'no-upperline'],
-      description: 'The style of the decorative upperline',
-      defaultValue: { summary: 'dotted' },
-    },
-    titleShadow: {
-      control: { type: 'inline-radio' },
-      options: ['blue', 'red', 'green', 'orange', 'slate-grey'],
-      description: 'Shadow Color',
-    },
-    titleHeight: {
-      control: { type: 'select' },
-      options: ['densest', 'denser', 'dense', 'normal', 'loose', 'looser', 'paragraph'],
-      description: 'Title Height',
-      defaultValue: { summary: 'paragraph' },
-    },
-    titleWeight: {
-      control: { type: 'select' },
-      options: ['w-3', 'w-4', 'w-5', 'w-6', 'w-7', 'w-8', 'w-9'],
-      description: 'Title Weight',
-    },
-    titleMargin: {
-        control: {type: 'select'},
-        options: ['margin-flush' ,'margin-top-3', 'margin-top-4', 'margin-top-5', 'margin-top-6', 'margin-bottom-3', 'margin-bottom-4', 'margin-bottom-5', 'margin-bottom-6', 'margin-3', 'margin-4', 'margin-5', 'margin-6'],
-        description: 'title margins'
-    },
-    isPlmHub: {
-        description: "is it a title for PLM Hub page?",
-        defaultValue: {summary: false}
-    },
-    slotContent: {
-      name: 'Default Slot',
-      description: 'Text Content between the <ptc-title> tags.',
-      control: 'text',
-      table: {
-        category: 'Default Slot',
-        type: {
-            summary: 'html',
-        },
-      }
-    }
-  },
-};
-
-const Template = args => {return html`<ptc-title
-  type="${args.type}"
-  text-align="${args.textAlign}"
-  title-size="${args.titleSize}"
-  title-color="${args.titleColor}"
-  upperline="${args.upperline}"
-  title-display="${args.titleDisplay}"
-  title-shadow="${args.titleShadow}"
-  title-height="${args.titleHeight}"
-  title-margin="${args.titleMargin}"
-  title-weight="${args.titleWeight}"
-  is-plm-hub="${args.isPlmHub}"
->
-  ${unsafeHTML(args.slotContent)}
-</ptc-title>`;
-};
-
-export const Example = Template.bind({});
-Example.args = {
-  type: 'h2',
-  titleDisplay: 'inline-block',
-  titleSize: 'x-large',
-  textAlign: 'center',
-  titleHeight: 'densest',
-  titleMargin: 'margin-3',
-  titleColor: 'gray',
-  upperline: 'no-upperline',
-  titleWeight: 'w-8',
-  titleShadow: '',
-  isPlmHub: false,
-  slotContent:'Lorem ipsum',
-};

package/dist/collection/stories/Tooltip.stories.js

@@ -1,112 +0,0 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Atoms/ptc-tooltip',
-  tags: ['autodocs'],
-  argTypes: {
-    textLines: {
-      name: 'Maximum lines',
-      description: "Set maximum length in lines of content",
-
-    },
-    maxLength: {
-      name: 'Maximum chars',
-      description: "Set maximum length in chars of content",
-      defaultValue: { summary: 45 }
-    },
-    position: {
-      name: 'Position',
-      description: "Set position of the the tooltip box",
-      control: { type: 'select' },
-      options: ['left', 'right', 'bottom', 'bottom-right', 'top'],
-      defaultValue: { summary: 'bottom' }
-    },
-    width: {
-      name: 'width',
-      description: "Fill-width will make the tooltip box full-width relative to its parent",
-      control: { type: 'select' },
-      options: ['full-width', 'default'],
-      defaultValue: { summary: 'default' }
-
-    },
-    theme: {
-      name: 'Theme',
-      description: "Set the theme",
-      control: { type: 'select' },
-      options: ['standard', 'danger'],
-      defaultValue: { summary: 'standard' },
-    },
-    zIndex: {
-      name: 'zIndex',
-      description: "Set the zIndex of tooltip box",
-      control: { type: 'select' },
-      options: ['z-auto', 'z-1', 'z-2', 'z-3', 'z-999'],
-      defaultValue: { summary: 'z-auto' },
-    },
-    hideOnMobile: {
-      name: 'Hide tooltip box on mobile',
-      description: "Set true to hide the tooltip on mobile",
-      control: { type: 'boolean' },
-      defaultValue: { summary: false },
-    },
-    textDisplay: {
-      name: 'Text Display css property',
-      description: "Set textDisplay propety inline or block for tooltip text",
-      control: { type: 'select' },
-      options: ['inline', 'block'],
-      defaultValue: { summary: 'inline' },
-    },
-    description: {
-      name: 'Tooltip content',
-      description: "Set content in the follwing textarea",
-      defaultValue: { summary: 'This is a tooltip text placeholder' },
-    },
-
-  }
-};
-
-const Template = args => {
-  return html  `<ptc-tooltip
-  text-display="${args.textDisplay}"
-  text-lines="${args.textLines}"
-  max-length="${args.maxLength}"
-  description="${args.description}"
-  position="${args.position}"
-  width="${args.width}"
-  zIndex="${args.zIndex}"
-  theme="${args.theme}"
-  hide-on-mobile="${args.hideOnMobile}"
-  ></ptc-tooltip>`
-};
-
-
-export const TooltipWithLinesLimit = Template.bind({});
-TooltipWithLinesLimit.args = {
-  textLines: 2,
-  position: 'bottom',
-  width: "default",
-  theme: "standard",
-  hideOnMobile: false,
-  zIndex: "z-auto",
-  textDisplay: "inline",
-  description: "Nulla ut nunc id nulla aliquam feugiat. Maecenas quis dui rhoncus, mattis risus ac, tincidunt massa. Cras dictum aliquet eleifend. Etiam condimentum suscipit vulputate. In tempus ante at eros elementum volutpat. Ut aliquam mattis velit, sed malesuada lorem. Donec eu posuere nisl, eget scelerisque lectus. Donec id nibh quis lectus euismod semper eget in sem. Ut vulputate cursus libero ut pharetra. Aliquam convallis vulputate dignissim. Mauris vel elit sit amet nibh porta cursus eu id urna.",
-
-}
-
-
-export const TooltipWithCharLimit = Template.bind({});
-TooltipWithCharLimit.args = {
-  maxLength: 45,
-  position: 'bottom',
-  width: "default",
-  theme: "standard",
-  hideOnMobile: false,
-  zIndex: "z-auto",
-  textDisplay: "inline",
-  description: "Nulla ut nunc id nulla aliquam feugiat. Maecenas quis dui rhoncus, mattis risus ac, tincidunt massa. Cras dictum ",
-
-}
-
-
-
-

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

@@ -1,10 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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