npm - @ptcwebops/ptcw-design - Versions diffs - 2.2.0 → 2.2.2 - Mend

@ptcwebops/ptcw-design 2.2.0 → 2.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (631) hide show

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

@@ -1,234 +1,234 @@
-import { html } from 'lit';
-export default {
-  title: 'Molecules/ptc-card/ptc-card',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    cardDate: {
-      control: 'text',
-      description: 'Card Date',
-      defaultValue: { summary: 'undefined' }
-    },
-    cardHref: {
-      control: '',
-      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',
-      defaultValue: { summary: 'undefined' }
-    },
-    headingTransform: {
-      control: 'select',
-      options: ["capitalize", "lowercase", "none", "uppercase"],
-      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-3">
-    <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}
-      ribbon-text=${args.ribbonText}
-      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>
-      <div slot="slot-description">
-          <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>
-    </ptc-card>
-  </div>
-</div>
-`;}
-export const ListingCard = ListingCardTemplate.bind({});
-ListingCard.args = {
-  cardDate: '2022-1-2',
-  cardHref: 'http://www.google.com',
-  cardType: 'listing-card',
-  hasImage: true,
-  heading: '2022 SoCal RUG Event',
-  headingTransform: 'none',
-  ribbonText: 'eBook',
-  target: '_blank',
-}
+import { html } from 'lit';
+export default {
+  title: 'Molecules/ptc-card/ptc-card',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    cardDate: {
+      control: 'text',
+      description: 'Card Date',
+      defaultValue: { summary: 'undefined' }
+    },
+    cardHref: {
+      control: '',
+      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',
+      defaultValue: { summary: 'undefined' }
+    },
+    headingTransform: {
+      control: 'select',
+      options: ["capitalize", "lowercase", "none", "uppercase"],
+      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-3">
+    <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}
+      ribbon-text=${args.ribbonText}
+      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>
+      <div slot="slot-description">
+          <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>
+    </ptc-card>
+  </div>
+</div>
+`;}
+export const ListingCard = ListingCardTemplate.bind({});
+ListingCard.args = {
+  cardDate: '2022-1-2',
+  cardHref: 'http://www.google.com',
+  cardType: 'listing-card',
+  hasImage: true,
+  heading: '2022 SoCal RUG Event',
+  headingTransform: 'none',
+  ribbonText: 'eBook',
+  target: '_blank',
+}