@ptcwebops/ptcw-design 6.3.18 → 6.3.19-beta

package/dist/collection/stories/BackgroundImage.stories.js

@@ -6,21 +6,15 @@ export default {
   argTypes: {
     borderRadius: {
       control: 'select',
+      options: ["", "radius-lg", "radius-standard", "radius-sm"],
       description: 'Image border shape',
-      defaultValue: { summary: "'' means no border" },
-      options: [
-        '',
-        'radius-large',
-        'radius-large-top',
-        'radius-standard',
-        'radius-standard-top'
-      ]
+      defaultValue: { summary: '' }
     },
     imageType: {
       control: 'select',
-      description: 'Image type, "smart-bg needs to use with content inside the <ptc-img> tag"',
-      defaultValue: { summary: 'smart-bg' },
-      options: [ 'smart-bg', 'smart-img' ]
+      options: ["smart-bg", "smart-img"],
+      description: 'Image type',
+      defaultValue: { summary: 'smart-bg' }
     },
     imgUrl: {
       control: 'text',
@@ -29,15 +23,35 @@ export default {
     },
     loadMode: {
       control: 'select',
+      options: ["eager-bg", "lazy-bg"],
       description: 'Lazy loading option',
-      defaultValue: { summary: 'lazy-bg' },
-      options: [ 'eager-bg', 'lazy-bg' ]
+      defaultValue: { summary: 'lazy-bg' }
     },
-    styles: {
+    sizeLg: {
       control: 'text',
-      description: '(optional) Injected CSS styles',
-      defaultValue: { summary: 'undefined' }
-    }
+      description: 'Image solution for large screen &gt;=1200px',
+      defaultValue: { summary: '1920x1080' }
+    },
+    sizeMd: {
+      control: 'text',
+      description: 'Image size for medium screen &gt;=992px and &lt;=1199px',
+      defaultValue: { summary: '1366x500' }
+    },
+    sizeSm: {
+      control: 'text',
+      description: 'Image size for small screen &gt;=768px and &lt;=991px',
+      defaultValue: { summary: '1240x496' }
+    },
+    sizeXs: {
+      control: 'text',
+      description: 'Image size for smallest screen &lt;=767px',
+      defaultValue: { summary: '510x340' }
+    },
+    // styles: {
+    //   control: '',
+    //   description: '(optional) Injected CSS styles',
+    //   defaultValue: { summary: 'undefined' }
+    // }
   }
 };
 
@@ -46,15 +60,23 @@ const Template = args => { return html `<ptc-img
 	image-type=${args.imageType}
 	img-url=${args.imgUrl}
 	load-mode=${args.loadMode}
+	size-lg=${args.sizeLg}
+	size-md=${args.sizeMd}
+	size-sm=${args.sizeSm}
+	size-xs=${args.sizeXs}
 	styles=${args.styles}
 ></ptc-img>`;}
 
 export const Example = Template.bind({});
 
 Example.args = {
-  borderRadius: '',
+  borderRadius: 'radius-standard',
   imageType: 'smart-img',
-  imgUrl: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/3c9d7c7c7ca74dd483c4d7ca554ecc38?v=ece57c52',
+  imgUrl: "http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway",
   loadMode: 'lazy-bg',
-  styles: 'undefined'
+  sizeLg: '1920x1080',
+  sizeMd: '1366x500',
+  sizeSm: '1240x496',
+  sizeXs: '510x340',
+  // styles: 'undefined'
 }

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

@@ -1,4 +1,3 @@
-import { ParameterName } from '@storybook/addon-designs/esm/addon';
 import { html } from 'lit';
 
 export default {
@@ -35,16 +34,15 @@ export default {
       description: 'Trigger Name (Mandatory)',
       defaultValue: { summary: 'undefined' }
     },
-    wheelData: {
-      control: 'array',
-      description: "This component is used with <footer-nav> in the back-end solution. If you want to test it, please inject the data through Javascript. Becuase StencilJS doesn't automatically parse string attributes into arrays, developers need to handle the parsing themselves.",
-      defaultValue: { summary: '["test1", "test2", "test3"]' }
-    }
-  },
+    // wheelData: {
+    //   control: 'object',
+    //   description: "Wheel Data (Mandatory) eg: data: [{ id: '1', value: '附近' }],",
+    //   defaultValue: { summary: 'undefined' }
+    // }
+  }
 };
 
-const Template = args => { return html `<ptc-para>This component is optimized for mobile screens. Please use the viewport addon in the "Example", and switch to a small device like a cell phone for correct display.</ptc-para>
-  <div class="demo-with-bgcolor">
+const Template = args => { return html `<div class="demo-with-bgcolor">
   <ptc-mobile-select class="js-mobile-select-1"
     cancel-btn-text=${args.cancelBtnText}
     ensure-btn-text=${args.ensureBtnText}
@@ -52,9 +50,21 @@ const Template = args => { return html `<ptc-para>This component is optimized fo
     selected-id=${args.selectedId}
     selected-text=${args.selectedText}
     trigger-name=${args.triggerName}
-    .wheelData=${args.wheelData}
+    wheel-data=${args.wheelData}
   ></ptc-mobile-select>
 </div>
+
+<script>
+  const ptcSelect = document.querySelector('.js-mobile-select-1');
+  ptcSelect.wheelData = [
+    { id: 'https://www.ptc.com/en', value: 'English'},
+    { id: 'https://www.ptc.com/cn', value: '中文 (简体)'},
+    { id: 'https://www.ptc.com/tw', value: '中文 (繁體)'},
+    { id: 'https://www.ptc.com/fr', value: 'Français'},
+    { id: 'https://www.ptc.com/de', value: 'Deutsch'},
+    { id: 'https://www.ptc.com/it', value: 'Italiano'},
+  ];
+</script>
 `;}
 
 export const Example = Template.bind({});
@@ -66,5 +76,5 @@ Example.args = {
   selectedId: 'en',
   selectedText: 'English',
   triggerName: 'lang-ddl',
-  wheelData: [{id: "https://www.ptc.com/en", value: "English"}, {id: "https://www.ptc.com/fr", value: "Français"}, {id:"https://www.ptc.com/cn", value:"中文 (简体)"}]
+  // wheelData: 'undefined'
 }

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: '',
 };