@ptcwebops/ptcw-design 6.3.21 → 6.3.22-beta

package/dist/collection/stories/Card.stories.js

@@ -14,17 +14,42 @@ export default {
       description: 'Card Link URL (Optional)',
       defaultValue: { summary: 'undefined' }
     },
+    // cardLogo: {
+    //   control: '',
+    //   description: 'Card Logo',
+    //   defaultValue: { summary: 'undefined' }
+    // },
     cardType: {
       control: 'select',
       options: ["hightlight-card", "horizontal-card", "listing-card"],
       description: 'Card Type Specify Card Type, default to simple card',
       defaultValue: { summary: 'custom-card' }
     },
+    // country: {
+    //   control: 'text',
+    //   description: 'Card Date',
+    //   defaultValue: { summary: 'undefined' }
+    // },
+    // eventType: {
+    //   control: '',
+    //   description: 'Event Type',
+    //   defaultValue: { summary: 'undefined' }
+    // },
     hasImage: {
       control: 'boolean',
       description: 'If this card has Image',
       defaultValue: { summary: 'false' }
     },
+    // hasLottie: {
+    //   control: '',
+    //   description: 'If this card has Lottie Image',
+    //   defaultValue: { summary: 'false' }
+    // },
+    // hasVideo: {
+    //   control: '',
+    //   description: 'If this card has Video',
+    //   defaultValue: { summary: 'false' }
+    // },
     heading: {
       control: 'text',
       description: 'Card heading',
@@ -36,24 +61,144 @@ export default {
       description: 'Card heading text transform',
       defaultValue: { summary: 'none' }
     },
+    // rel: {
+    //   control: '',
+    //   description: '(optional) Link card rel',
+    //   defaultValue: { summary: 'undefined' }
+    // },
     ribbonText: {
       control: 'text',
       description: 'Ribbon will show on listing card if this field has any value',
       defaultValue: { summary: 'undefined' }
     },
+    // styles: {
+    //   control: '',
+    //   description: '(optional) Injected CSS styles',
+    //   defaultValue: { summary: 'undefined' }
+    // },
     target: {
       control: '',
       description: '(optional) Link card target',
       defaultValue: { summary: '_self' }
     },
+    // titleLineCutOff: {
+    //   control: 'number',
+    //   description: 'Title Line Cut off',
+    //   defaultValue: { summary: 'undefined' }
+    // }
   }
 };
 
+// const Template = args => { return html `<ptc-card
+// 	card-date=${args.cardDate}
+// 	card-href=${args.cardHref}
+// 	card-logo=${args.cardLogo}
+// 	card-type=${args.cardType}
+// 	country=${args.country}
+// 	event-type=${args.eventType}
+// 	has-image=${args.hasImage}
+// 	has-lottie=${args.hasLottie}
+// 	has-video=${args.hasVideo}
+// 	heading=${args.heading}
+// 	heading-transform=${args.headingTransform}
+// 	rel=${args.rel}
+// 	ribbon-text=${args.ribbonText}
+// 	styles=${args.styles}
+// 	target=${args.target}
+// 	title-line-cut-off=${args.titleLineCutOff}
+// ></ptc-card>`;}
+
+// Example.args = {
+//   cardDate: 'undefined',
+//   cardHref: 'undefined',
+//   cardLogo: 'undefined',
+//   cardType: 'custom-card',
+//   country: 'undefined',
+//   eventType: 'undefined',
+//   hasImage: 'false',
+//   hasLottie: 'false',
+//   hasVideo: 'false',
+//   heading: 'undefined',
+//   headingTransform: 'none',
+//   rel: 'undefined',
+//   ribbonText: 'undefined',
+//   styles: 'undefined',
+//   target: '_self',
+//   titleLineCutOff: 'undefined',
+// }
+
+// ** Highlight Card **
+
+const HighlightCardTemplate = args => { return html `
+<div class="is-grid">
+<div class="is-col-8">
+  <ptc-card 
+    card-date=${args.cardDate}
+    card-href=${args.cardHref}
+    card-type=${args.cardType} 
+    has-image=${args.hasImage}
+    heading=${args.heading}
+    heading-transform=${args.headingTransform}
+    target=${args.target}
+  >
+    <ptc-img slot="slot-image" img-url="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway" size-xs="600x450" size-sm="600x450" size-md="1108x658" size-lg="1108x658" image-type="smart-img" load-mode="lazy-bg"></ptc-img>
+    <ptc-span slot="slot-before-heading" styles="::part(part-ptc-span){font-size:18px!important}" span-style="tag-style" display="block">Augmented Reality</ptc-span>
+    <div slot="slot-description">
+      <ptc-para font-size="xx-small" font-weight="w-6" para-line-h="line-height-dense">
+        Lorem ipsum dolor sit amet, consectetur adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing.
+      </ptc-para>
+    </div>
+  </ptc-card>
+</div>
+</div>
+`;}
+
+export const HighlightCard = HighlightCardTemplate.bind({});
+
+HighlightCard.args = {
+  cardDate: '2022-1-2',
+  cardHref: 'http://www.ptc.com',
+  cardType: 'hightlight-card',
+  hasImage: true,
+  heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing',
+  headingTransform: 'none',
+  target: '_blank',
+}
+
+// ** Horizontal Card **
+
+const HorizontalCardTemplate = args => { return html `
+<ptc-card 
+  card-href=${args.cardHref}
+  card-type=${args.cardType} 
+  has-image=${args.hasImage}
+  heading=${args.heading}
+  heading-transform=${args.headingTransform}
+  target=${args.target}
+>
+<ptc-picture slot="slot-image" alt="image-test" is-full-width="true" src="https://www.ptc.com/-/media/Images/new-org/510x340/PLM/BOM-Management.jpg"></ptc-picture>
+<div class="" slot="slot-description">
+  <ptc-para font-size="xx-small" para-line-h="line-height-dense" para-margin="margin-flush">Get full digital associativity across engineering, supply chain, manufacturing, sales, and service.</ptc-para>
+</div>
+</ptc-card>
+`; }
+
+export const HorizontalCard = HorizontalCardTemplate.bind({});
+
+HorizontalCard.args = {
+  cardHref: 'https://www.ptc.com/en/technologies/plm/bill-of-materials',
+  cardType: 'horizontal-card',
+  hasImage: true,
+  heading: 'BOM management',
+  headingTransform: 'none',
+  target: '_blank',
+}
+
 // ** Listing Card **
 
 const ListingCardTemplate = args => { return html `
 <div class="is-grid">
-  <div class="is-col-4">
+  <div class="is-col-3">
     <ptc-card 
       card-date=${args.cardDate}
       card-href=${args.cardHref}
@@ -66,7 +211,7 @@ const ListingCardTemplate = args => { return html `
     >
       <ptc-img slot="slot-image" img-url="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway" size-xs="600x450" size-sm="600x450" size-md="1108x658" size-lg="1108x658" image-type="smart-img" load-mode="lazy-bg"></ptc-img>
       <div slot="slot-description">
-          <ptc-para font-size="x-small" font-weight="w-4" para-line-h="line-height-19">
+          <ptc-para font-size="medium" font-weight="w-4" para-line-h="line-height-19">
           Join us for live presentations and hear about the latest updates for Creo, Windchill PLM, and Thingworx IOT and Augmented Reality. 
           </ptc-para>
       </div>
@@ -86,4 +231,4 @@ ListingCard.args = {
   headingTransform: 'none',
   ribbonText: 'eBook',
   target: '_blank',
-}
+}

package/dist/collection/stories/Link.stories.js

@@ -74,33 +74,22 @@ export default {
         'underline',
       ],
     },
-    slotContent: {
-      name: 'Default Slot',
-      description: 'Text Content between the <ptc-link> tags.',
-      control: 'text',
-      table: {
-        category: 'Default Slot',
-        type: {
-            summary: 'plain text',
-        },
-      }
-    }
   },
 };
 
-const Template = args => { return html`<ptc-link
-  disabled=${args.disabled}
-  external=${args.external}
-  font-size=${args.fontSize}
-  font-weight=${args.fontWeight}
-  href=${args.href}
-  link-area=${args.linkArea}
-  link-title=${args.linkTitle}
-  target=${args.target}
-  theme=${args.theme}
-  >
-    ${args.slotContent}
-</ptc-link>`;
+const Template = args => {
+  return html`<ptc-link
+    disabled=${args.disabled}
+    external=${args.external}
+    font-size=${args.fontSize}
+    font-weight=${args.fontWeight}
+    href=${args.href}
+    link-area=${args.linkArea}
+    link-title=${args.linkTitle}
+    target=${args.target}
+    theme=${args.theme}
+    >Link Text</ptc-link
+  >`;
 };
 
 export const Example = Template.bind({});
@@ -115,5 +104,4 @@ Example.args = {
   linkTitle: 'Title attribute goes here',
   target: '_blank',
   theme: 'simple',
-  slotContent:'Link text goes here',
 };

package/dist/collection/stories/Paragraph.stories.js

@@ -1,5 +1,4 @@
 import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 export default {
   title: 'Atoms/ptc-para',
@@ -46,24 +45,18 @@ export default {
       description: 'Paragraph Margin',
       defaultValue: { summary: 'undefined' }
     },
-
+    // paraStyle: {
+    //   control: 'select',
+    //   options: ["announcement", "default", "flush-style", "intro", "main", "small"],
+    //   description: 'Paragraph Style',
+    //   defaultValue: { summary: 'default' }
+    // },
     paraZIndex: {
       control: 'select',
       options: ["z-1", "z-2", "z-3", "z-99", "z-999", "z-auto"],
       description: 'sep z-index',
       defaultValue: { summary: 'undefined' }
     },
-    slotContent: {
-      name: 'Default Slot',
-      description: 'Text Content between the <ptc-para> tags.',
-      control: 'text',
-      table: {
-        category: 'Default Slot',
-        type: {
-            summary: 'html',
-        },
-      }
-    }
     // styles: {
     //   control: '',
     //   description: '(optional) Injected CSS Styles',
@@ -72,7 +65,7 @@ export default {
   }
 };
 
-//let paragraphContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
+let paragraphContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
 
 const Template = args => { return html `<ptc-para
 	ellipsis-line-cutoff=${args.ellipsisLineCutoff}
@@ -85,9 +78,7 @@ const Template = args => { return html `<ptc-para
 	para-style=${args.paraStyle}
 	para-z-index=${args.paraZIndex}
 	styles=${args.styles}
->
-  ${unsafeHTML(args.slotContent)}
-</ptc-para>`;}
+>${paragraphContent}</ptc-para>`;}
 
 export const Example = Template.bind({});
 
@@ -99,6 +90,7 @@ Example.args = {
   paraColor: 'primary-grey',
   paraLineH: 'line-height-normal',
   paraMargin: 'margin-5',
-  slotContent:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+  // paraStyle: 'default',
   paraZIndex: 'z-1',
+  // styles: 'undefined'
 }

package/dist/collection/stories/Select.stories.js

@@ -6,27 +6,27 @@ export default {
   argTypes: {
     disabled: {
       control: 'boolean',
-      description: 'Disable the field?',
+      description: '',
       defaultValue: { summary: 'false' },
     },
     helpertext: {
       control: 'text',
-      description: 'Help text',
+      description: '',
       defaultValue: { summary: 'Please select a value!' },
     },
     isRequired: {
       control: 'boolean',
-      description: 'Is this field required?',
+      description: '',
       defaultValue: { summary: 'true' },
     },
     label: {
       control: 'text',
-      description: 'Label text',
+      description: '',
       defaultValue: { summary: 'undefined' },
     },
     name: {
       control: 'text',
-      description: 'Name attribute',
+      description: '',
       defaultValue: { summary: 'undefined' },
     },
     ptcDataEloquaName: {
@@ -34,6 +34,7 @@ export default {
       description: 'Eloqua Data',
       defaultValue: { summary: 'undefined' },
     },
+    selectedValue: { control: 'text', description: '', defaultValue: { summary: '' } },
   },
 };
 
@@ -45,6 +46,7 @@ const Template = args => {
     label=${args.label}
     name=${args.name}
     ptc-data-eloqua-name=${args.ptcDataEloquaName}
+    selected-value=${args.selectedValue}
   >
     <ul class="mdc-list">
       <li class="mdc-list-item" data-value="">
@@ -75,4 +77,5 @@ Example.args = {
   label: 'Lable Name',
   name: 'examplename',
   ptcDataEloquaName: 'data-eloqua-value',
+  selectedValue: '',
 };

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

@@ -4,122 +4,79 @@ export default {
   title: 'Atoms/ptc-textfield',
   tags: [ 'autodocs' ],
   argTypes: {
-    alertText: {
-      control: 'text',
-      description: 'Alert text (blue)',
-      defaultValue: { summary: '' }
-    },
-    alertTextContent: {
-      control: 'text',
-      description: 'Alert text content - below alert text (grey)',
-      defaultValue: { summary: '' }
-    },
     disabled: {
       control: 'boolean',
-      description: 'Disable the field?',
+      description: '',
       defaultValue: { summary: 'false' }
     },
     fieldId: {
       control: 'text',
-      description: 'ID',
-      defaultValue: { summary: '' }
+      description: '',
+      defaultValue: { summary: 'undefined' }
     },
-    fieldName: {
+    helpertext: {
       control: 'text',
-      description: 'input "name" value. e.g.: phone, email, firstname, lastname',
-      defaultValue: { summary: 'email' }
-    },
-    helpertext: { control: 'text', description: 'Validation text (red)', defaultValue: { summary: '' } },
-    ignoreBlindSubmit: {
-      control: 'boolean',
-      description: 'Ignore Blind Submit?',
-      defaultValue: { summary: 'false' }
+      description: '',
+      defaultValue: { summary: 'Please enter a value' }
     },
-    infoText: {
-      control: 'text',
-      description: 'Info Text (black)',
-      defaultValue: { summary: '' }
-    },
-    // inputValue: { control: 'text', description: '', defaultValue: { summary: '' } },
+    inputValue: { control: 'text', description: '', defaultValue: { summary: '' } },
     labelText: {
       control: 'text',
-      description: 'Label Text',
+      description: '',
       defaultValue: { summary: 'Email' }
     },
-    placeholderText: {
+    name: {
       control: 'text',
-      description: 'Place holder Text',
-      defaultValue: { summary: '' }
+      description: '',
+      defaultValue: { summary: 'email' }
     },
     ptcDataEloquaName: {
       control: 'text',
-      description: 'Eloqua Data Name (for the eloqua)',
-      defaultValue: { summary: '' }
-    },
-    ptcDataTargetEloquaName: {
-      control: 'text',
-      description: 'Eloqua Target Data Name (for the eloqua)',
-      defaultValue: { summary: '' }
+      description: '',
+      defaultValue: { summary: 'undefined' }
     },
     ptcMaxLength: {
-      control: 'number',
-      description: 'Text counter limit',
-      defaultValue: { summary: '' }
+      control: '',
+      description: '',
+      defaultValue: { summary: 'undefined' }
     },
     required: {
       control: 'boolean',
-      description: 'Is this a mandatory field?',
+      description: '',
       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',
+      description: 'button, email, file and etc. ',
       defaultValue: { summary: 'text' }
     }
   }
 };
 
 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}
-	ignore-blind-submit=${args.ignoreBlindSubmit}
-	info-text=${args.infoText}
+	input-value=${args.inputValue}
 	label-text=${args.labelText}
-	placeholder-text=${args.placeholderText}
+	name=${args.name}
 	ptc-data-eloqua-name=${args.ptcDataEloquaName}
-	ptc-data-target-eloqua-name=${args.ptcDataTargetEloquaName}
 	ptc-max-length=${args.ptcMaxLength}
 	required=${args.required}
-	styles=${args.styles}
 	type=${args.type}
 ></ptc-textfield>`;}
 
 export const Example = Template.bind({});
 
 Example.args = {
-  alertText: 'Alert text',
-  alertTextContent: 'Alert text content',
   disabled: 'false',
-  fieldId: 'ID',
-  fieldName: 'company field',
-  helpertext: 'Helper text',
-  ignoreBlindSubmit: 'false',
-  infoText: 'Info text',
-  labelText: 'Lable Name',
-  placeholderText: 'Place hoder text goes here',
-  ptcDataEloquaName: 'C_EmailAddress',
-  ptcDataTargetEloquaName: '',
-  ptcMaxLength: '',
+  fieldId: 'ptc-field-name',
+  helpertext: 'Please enter a value',
+  inputValue: '',
+  labelText: 'Email',
+  name: 'email',
+  ptcDataEloquaName: 'data-eloqua-name-value',
+  ptcMaxLength: 'undefined',
   required: 'true',
-  styles: '',
-  type: 'text'
+  type: 'email'
 }

package/dist/collection/stories/Title.stories.js

@@ -1,5 +1,4 @@
 import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 export default {
   title: 'Atoms/ptc-title',
@@ -78,36 +77,26 @@ export default {
     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>`;
+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}"
+  >
+    Title Example
+  </ptc-title>`;
 };
 
 export const Example = Template.bind({});
@@ -123,5 +112,4 @@ Example.args = {
   titleWeight: 'w-8',
   titleShadow: '',
   isPlmHub: false,
-  slotContent:'Lorem ipsum',
 };

package/dist/collection/stories/organisms/eSupport/CaseTracker/preview.stories.js

@@ -0,0 +1,45 @@
+import { html } from 'lit';
+
+export default  {
+    title: 'Organisms/E-Support Organisms/Case Tracker'
+
+}
+const CaseTracker = args => {
+    return html `
+
+    <ptc-spacer></ptc-spacer>
+ <ptc-spacer></ptc-spacer>
+ <ptc-spacer></ptc-spacer>
+ <div class="ptc-container is-grid">
+    <div class="is-col-12 is-col-6-md">
+      <ptc-title upperline="none">Case Tracker - Authorized Use Only</ptc-title>
+      <ptc-spacer></ptc-spacer>
+      <ptc-spacer></ptc-spacer>
+      <ptc-para>If you want to use this application on behalf of a customer use this search from to lookup the customer record. When you have found the customer hit the Next > button</ptc-para>
+      <ptc-textfield field-id="contact-email" label-text="Customer Name" type="text" ptc-data-eloqua-name="C_EmailAddress" field-name="email"></ptc-textfield>
+      <ptc-textfield field-id="contact-email" label-text="Customer Number" type="text" ptc-data-eloqua-name="C_EmailAddress" field-name="email"></ptc-textfield>
+      <ptc-button color="ptc-quaternary" disabled="false" link-href="https://www.ptc.com" link-title="PTC" rel="undefined" tab-nav="0" target="_self" text-align="undefined" type="button">Search</ptc-button>
+      <ptc-button color="ptc-quaternary" disabled="false" link-href="https://www.ptc.com" link-title="PTC" rel="undefined" tab-nav="0" target="_self" text-align="undefined" type="button">Next</ptc-button>
+    </div>
+    <div class="is-col-12 is-col-2-md">
+
+    </div>
+    <div class="is-col-12 is-col-3-md">
+      <ptc-spacer></ptc-spacer>
+      <ptc-spacer></ptc-spacer>
+      <ptc-spacer></ptc-spacer>
+      <ptc-spacer></ptc-spacer>
+      <div  style="border: solid; padding: 5px;">
+      <ptc-title upperline="none" type="h3">search tips</ptc-title>
+      <ul>
+        <li>You can use this search form to use this application on behalf of a customer.</li>
+        <li>You can use this search form to use this application on behalf of a customer.</li>
+      </ul>
+    </div>
+    </div>
+
+
+ </div>
+    `;}
+
+export const Preview = CaseTracker.bind();