@ptcwebops/ptcw-design 6.4.3 → 6.4.4-beta

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

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

@@ -1,39 +1,27 @@
-import { html } from "lit";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { html } from 'lit';
 
 export default {
-	title: "Atoms/ptc-select",
-	tags: ["autodocs"],
-	argTypes: {
-		ptcDataEloquaName: {
-			description: " Eloqua Data. Please open the editor to see the changes.",
-			defaultValue: { summary: "" },
-			control: "text",
-		},
-	},
+  title: 'New/ptc-select',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    ptcDataEloquaName: {
+      description: ' Eloqua Data',
+      defaultValue: { summary: '' },
+      control: 'text'
+    },
+    default: {
+      description: 'Default slot content',
+      control: 'text',
+      table: { category: 'slots' }
+    }
+  }
 };
 const Template = (args) => {
-	return html`<ptc-select
-		field-id="contact-country"
-		label="Country*"
-		field-name="country"
-		default-value="USA"
-		ptcDataEloquaName=${args.ptcDataEloquaName}
-	>
-		<ul class="mdc-list">
-			<li class="mdc-list-item" data-value="">
-				<span class="mdc-list-item__ripple"></span>
-			</li>
-			<li class="mdc-list-item" data-value="USA">
-				<span class="mdc-list-item__ripple"></span>
-				<span class="mdc-list-item__text"> USA </span>
-			</li>
-			<li class="mdc-list-item" data-value="Canada">
-				<span class="mdc-list-item__ripple"></span>
-				<span class="mdc-list-item__text"> Canada </span>
-			</li>
-		</ul>
-	</ptc-select>`;
+  return html`<ptc-select
+	ptcDataEloquaName=${args.ptcDataEloquaName}
+>
+	${args.default}
+</ptc-select>`;
 };
 export const Example = Template.bind({});
-Example.args = { ptcDataEloquaName: "C_Country" };
+Example.args = { ptcDataEloquaName: '', default: 'Lorem ipsum text' };

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

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

@@ -5,7 +5,7 @@ export default {
   tags: [ 'autodocs' ],
   argTypes: {
     display: {
-      description: "Display, please open the code editor to see the changes",
+      description: "Display",
       defaultValue: { summary: 'inline' },
       control: 'select',
       options: [ 'block', 'inline-block', 'inline' ]
@@ -21,6 +21,11 @@ export default {
         'w-9'
       ]
     },
+    styles: {
+      description: ' Injected Styles',
+      defaultValue: { summary: '' },
+      control: 'text'
+    },
     default: {
       description: 'Default slot content',
       control: 'text',
@@ -30,9 +35,9 @@ export default {
 };
 const Template = (args) => {
   return html`<ptc-span
-  .key=${args.fontWeight}
-    display= "${args.display}"
-    font-weight= "${args.fontWeight}"
+    display=${args.display}
+    fontWeight=${args.fontWeight}
+    styles=${args.styles}
 >
     ${args.default}
 </ptc-span>`;
@@ -41,5 +46,6 @@ export const Example = Template.bind({});
 Example.args = {
   display: 'inline',
   fontWeight: 'w-4',
+  styles: '',
   default: 'Lorem ipsum text'
 };

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

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

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

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

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

@@ -14,6 +14,11 @@ 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',
@@ -66,6 +71,11 @@ 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',
@@ -77,6 +87,7 @@ 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}
@@ -88,6 +99,7 @@ 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>`;}
 
@@ -96,6 +108,7 @@ export const Example = Template.bind({});
 Example.args = {
   alertText: 'Alert text',
   alertTextContent: 'Alert text content',
+  disabled: 'false',
   fieldId: 'ID',
   fieldName: 'company field',
   helpertext: 'Helper text',
@@ -107,5 +120,6 @@ Example.args = {
   ptcDataTargetEloquaName: '',
   ptcMaxLength: '',
   required: 'true',
+  styles: '',
   type: 'text'
 }

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/Title.stories.js

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

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

@@ -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 = {};