@ptcwebops/ptcw-design 6.3.17 → 6.3.18

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

@@ -14,42 +14,17 @@ 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',
@@ -61,144 +36,24 @@ 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-3">
+  <div class="is-col-4">
     <ptc-card 
       card-date=${args.cardDate}
       card-href=${args.cardHref}
@@ -211,7 +66,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="medium" font-weight="w-4" para-line-h="line-height-19">
+          <ptc-para font-size="x-small" 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>
@@ -231,4 +86,4 @@ ListingCard.args = {
   headingTransform: 'none',
   ribbonText: 'eBook',
   target: '_blank',
-}
+}