@ptcwebops/ptcw-design 1.8.1 → 1.8.3

package/dist/collection/stories/Breadcrumb.stories.js

@@ -0,0 +1,51 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Molecules/ptc-breadcrumb',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    // color: {
+    //   control: 'select',
+    //   options: ['black', 'white', 'ptc-green', 'gray', 'light-gray', 'primary-gray', 'default', 'inherit'],
+    //   description: 'Theme Color',
+    //   defaultValue: { summary: 'white' }
+    // },
+    position: {
+      control: 'select',
+      options: ['left', 'center', 'right'],    
+      description: 'breadcrumb position',
+      defaultValue: { summary: 'undefined' }
+    },
+    removeTopMargin: {
+      control: 'boolean',
+      description: 'remove topMargin',
+      defaultValue: { summary: 'false' }
+    },
+    // styles: {
+    //   control: '',
+    //   description: '(optional) Injected CSS styles',
+    //   defaultValue: { summary: 'undefined' }
+    // }
+  }
+};
+
+const Template = args => { return html `<div class="demo-with-bgcolor">
+  <ptc-breadcrumb
+    color=${args.color}
+    position=${args.position}
+    remove-top-margin=${args.removeTopMargin}
+    styles=${args.styles}
+  >
+    <list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us">PLM Video Hub</list-item>
+    <list-item list-type="breadcrumb">Current Page</list-item>
+  </ptc-breadcrumb>
+</div>`;}
+
+export const Example = Template.bind({});
+
+Example.args = {
+  // color: 'white',
+  position: 'undefined',
+  removeTopMargin: 'false',
+  // styles: 'undefined'
+}

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

@@ -0,0 +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',
+}

package/dist/collection/stories/CardWrapper.stories.js

@@ -0,0 +1,270 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Molecules/ptc-card/ptc-card-wrapper',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    cardLink: {
+      control: 'text',
+      description: 'Card link',
+      defaultValue: { summary: 'undefined' }
+    },
+    cardType: {
+      control: 'select',
+      options: [
+        "card-playlist",
+        "card-tall",
+        "card-video",
+        "card-video-intro",
+        // "card-wide",
+        "speed-bump"
+      ],
+      description: 'Card Type',
+      defaultValue: { summary: 'undefined' }
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Internal Screen Size State',
+      defaultValue: { summary: 'false' }
+    },
+    linkTarget: {
+      control: '',
+      description: 'link Target',
+      defaultValue: { summary: '_self' }
+    },
+    linkTitle: {
+      control: '',
+      description: 'link Title',
+      defaultValue: { summary: 'undefined' }
+    }
+  }
+};
+
+// const Template = args => { return html `<ptc-card-wrapper
+// 	card-link=${args.cardLink}
+// 	card-type=${args.cardType}
+// 	is-loading=${args.isLoading}
+// 	link-target=${args.linkTarget}
+// 	link-title=${args.linkTitle}
+// ></ptc-card-wrapper>`;}
+
+// export const Example = Template.bind({});
+
+// Example.args = {
+//   cardLink: 'undefined',
+//   cardType: 'undefined',
+//   isLoading: 'false',
+//   linkTarget: '_self',
+//   linkTitle: 'undefined'
+// }
+
+// ** 16x9 Card **
+
+const _16x9CardTemplate = args => { return html `
+<div class="is-grid">
+  <ptc-card-wrapper class="is-col-4"
+    card-link=${args.cardLink}
+    card-type=${args.cardType}
+    is-loading=${args.isLoading}
+    link-target=${args.linkTarget}
+    link-title=${args.linkTitle}
+  >
+    <ptc-card-content card-type="card-video">
+      <ptc-picture alt="image-test" border-radius="radius-large" is-full-height is-full-width
+        src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data">
+      </ptc-picture>
+    </ptc-card-content>
+    <ptc-card-bottom card-type="card-video">
+      <ptc-para font-size="x-small" font-weight="w-7" para-line-h="line-height-19" para-color="primary-grey" para-margin="margin-top-3">
+        3 Reasons Why Engineering and Manufacturing are Disjointed
+      </ptc-para>
+    </ptc-card-bottom>
+  </ptc-card-wrapper>
+</div>
+`;}
+
+export const _16x9Card = _16x9CardTemplate.bind({});
+
+_16x9Card.args = {
+  cardLink: 'https://www.ptc.com/',
+  cardType: 'card-video',
+  isLoading: 'false',
+  linkTarget: '_blank',
+  linkTitle: 'Link title on hover'
+}
+
+// ** Tall Card **
+
+const TallCardTemplate = args => { return html `
+  <div class="is-grid">
+    <ptc-card-wrapper class="is-col-6"
+      card-link=${args.cardLink}
+      card-type=${args.cardType}
+      is-loading=${args.isLoading}
+      link-target=${args.linkTarget}
+      link-title=${args.linkTitle}
+    >
+      <ptc-card-content card-type="card-tall">
+        <ptc-picture alt="image-test" border-radius="radius-large" image-position="relative" is-full-height
+          src="https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" size-xs="435x480" size-sm="435x480" size-md="878x655" size-lg="878x655">
+          <ptc-overlay filter-color="green" border-radius="radius-large"></ptc-overlay>
+        </ptc-picture>
+      </ptc-card-content>
+      <ptc-card-bottom card-type="card-tall">
+        <ptc-title type="h3" upperline="no-upperline" title-shadow="green" is-plm-hub title-size="large" title-weight="w-8" title-l-height="lh-23">
+          Collaborative Approach Between Design and Manufacturing
+        </ptc-title>
+      </ptc-card-bottom>
+    </ptc-card-wrapper>
+</div>
+`;}
+
+export const TallCard = TallCardTemplate.bind({});
+
+TallCard.args = {
+  cardLink: 'https://www.ptc.com/',
+  cardType: 'card-tall',
+  isLoading: 'false',
+  linkTarget: '_blank',
+  linkTitle: 'Link title on hover'
+}
+
+// ** Speed Bump **
+
+const SpeedBumpTemplate = args => { return html `
+<div class="demo-plm-bgcolor">
+  <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
+  <ptc-spacer breakpoint="small" size="xxxx-large"></ptc-spacer>
+  <div class="is-col-12 is-grid">
+    <ptc-card-wrapper class="is-col-12"
+      card-link=${args.cardLink}
+      card-type=${args.cardType}
+      is-loading=${args.isLoading}
+      link-target=${args.linkTarget}
+      link-title=${args.linkTitle}
+    >
+      <ptc-card-content card-type="speed-bump">
+        <div class="is-grid has-no-col-gap has-no-row-gap">
+          <div class="is-col-12 is-row-1 is-col-9-md">
+            <ptc-para font-size="large" font-weight="w-8" para-margin="margin-flush" para-color="white">
+              Leaders Use PLM to Drive Innovation
+            </ptc-para>
+            <ptc-para font-size="small" font-weight="w-5" para-margin="margin-flush" para-color="white"
+              para-line-h="line-height-19">
+              See how global manufacturers are effectively using PLM to drive their digital transformation
+              journey.
+            </ptc-para>
+            <ptc-spacer breakpoint="x-small" size="large"></ptc-spacer>
+            <ptc-spacer breakpoint="small" size="xx-small"></ptc-spacer>
+          </div>
+          <div class="is-col-12 is-row-1 is-col-3-md u-justify-self-end">
+            <ptc-button type="link" color="ptc-quaternary" link-href="https://www.ptc.com" target="_blank"
+              class="has-m-top">
+              Learn More
+            </ptc-button>
+          </div>
+        </div>
+      </ptc-card-content>
+    </ptc-card-wrapper>
+  </div>
+  <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
+  <ptc-spacer breakpoint="small" size="xxxx-large"></ptc-spacer>
+</div>
+`;}
+
+export const SpeedBump = SpeedBumpTemplate.bind({});
+
+SpeedBump.args = {
+  cardLink: 'https://www.ptc.com/',
+  cardType: 'speed-bump',
+  isLoading: 'true',
+  linkTarget: '_blank',
+  linkTitle: 'Link title on hover'
+}
+
+// ** Video Intro Card **
+
+const VideoIntroCardTemplate = args => { return html `
+<ptc-card-wrapper class="background-grey-10 has-p-md"
+  card-link=${args.cardLink}
+  card-type=${args.cardType}
+  is-loading=${args.isLoading}
+  link-target=${args.linkTarget}
+  link-title=${args.linkTitle}
+>
+  <ptc-card-content card-type="card-video-intro">
+  <ptc-title type="h3" upperline="no-upperline" is-plm-hub title-size="large" title-weight="w-8" title-l-height="lh-23">
+    Collaborative Approach Between Design and Manufacturing
+  </ptc-title>
+  <ptc-date date-color="white" year="2021" month="8" day="15" country="de-DE" data-size="medium" class="has-m-bottom-md"></ptc-date>
+  <ptc-para font-size="medium" font-weight="w-4" para-margin="margin-bottom-1" para-color="white"
+    para-line-h="line-height-19">
+    See how Polaris and Whirlpool Corporation are driving digital transformation and industrial innovation
+    for
+    their customers.
+  </ptc-para>
+  </ptc-card-content>
+  <ptc-card-bottom card-type="card-video-intro">
+  <div class="is-flex">
+    <ptc-social-share class="has-m-left" display="inline-block" share-type="mail" text="summary" url="https://www.ptc.com" share-title="title goes here" source="linkedin source" recipient="yqiantest@ptc.com"></ptc-social-share>
+    <ptc-social-share class="has-m-left" display="inline-block" share-type="linkedin" text="summary" url="https://www.ptc.com" share-title="title goes here" source="linkedin source" recipient="yqiantest@ptc.com"></ptc-social-share>
+    <ptc-social-share class="has-m-left" display="inline-block" share-type="twitter" text="summary" url="https://www.ptc.com" share-title="title goes here" source="linkedin source" recipient="yqiantest@ptc.com"></ptc-social-share>
+    <ptc-social-share class="has-m-left" display="inline-block" share-type="facebook" text="summary" url="https://www.ptc.com" share-title="title goes here" source="linkedin source" recipient="yqiantest@ptc.com"></ptc-social-share>
+  </div>
+  </ptc-card-bottom>
+</ptc-card-wrapper>
+`;}
+
+export const VideoIntroCard = VideoIntroCardTemplate.bind({});
+
+VideoIntroCard.args = {
+  cardLink: 'https://www.ptc.com/',
+  cardType: 'card-video-intro',
+  isLoading: 'false',
+  linkTarget: '_blank',
+  linkTitle: 'Link title on hover'
+}
+
+// ** Playlist Card **
+
+const PlaylistCardTemplate = args => { return html `
+<div class="demo-plm-bgcolor">
+  <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
+  <ptc-spacer breakpoint="small" size="xxxx-large"></ptc-spacer>
+  <div class="is-grid has-row-gap-md">
+    <ptc-card-wrapper class="is-col-6"
+      card-link=${args.cardLink}
+      card-type=${args.cardType}
+      is-loading=${args.isLoading}
+      link-target=${args.linkTarget}
+      link-title=${args.linkTitle}
+    >
+      <ptc-card-content card-type="card-playlist">
+        <ptc-picture alt="image-test" border-radius="radius-large"
+          src="http://s7d1.scene7.com/is/image/ptcinc/slts-optimize-product-design-female-engineers"
+          size-xs="200x200" size-sm="200x200" size-md="200x200" size-lg="200x200" width="88"></ptc-picture>
+      </ptc-card-content>
+      <ptc-card-bottom card-type="card-playlist">
+        <ptc-para font-size="small" font-weight="w-6" para-margin="margin-flush" para-color="white"
+          para-line-h="line-height-17">
+          See how Polaris and Whirlpool Corporation are driving digital transformation and industrial innovation
+          for
+          their customers.
+        </ptc-para>
+      </ptc-card-bottom>
+    </ptc-card-wrapper>
+  </div>
+  <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
+  <ptc-spacer breakpoint="small" size="xxxx-large"></ptc-spacer>
+</div>
+`;}
+
+export const PlaylistCard = PlaylistCardTemplate.bind({});
+
+PlaylistCard.args = {
+  cardLink: 'https://www.ptc.com/',
+  cardType: 'card-playlist',
+  isLoading: 'false',
+  linkTarget: '_blank',
+  linkTitle: 'Link title on hover'
+}

package/dist/collection/stories/Checkbox.stories.js

@@ -0,0 +1,53 @@
+import { html } from 'lit';
+import {action} from '@storybook/addon-actions'
+
+export default {
+  title: 'Molecules/ptc-checkbox',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    checked: {
+      control: 'select',
+      options: ["checked", "unchecked"],
+      description: 'Whether checkbox state is checked or not',
+      defaultValue: { summary: 'unchecked' }
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether checkbox is disabled or not',
+      defaultValue: { summary: 'undefined' }
+    },
+    inputName: {
+      control: 'text',
+      description: 'The name of the underlying form input',
+      defaultValue: { summary: 'undefined' }
+    },
+    value: {
+      control: 'text',
+      description: 'The name of the underlying form input',
+      defaultValue: { summary: 'undefined' }
+    },
+  },
+};
+
+const Template = args => { 
+  const handleClick = (e) => {
+    e.stopPropagation();
+    action('onClick')(e);
+  };
+
+  return html `<ptc-checkbox
+	checked=${args.checked}
+	disabled=${args.disabled}
+	input-name=${args.inputName}
+	value=${args.value}
+  @click=${handleClick}
+>Checkbox item</ptc-checkbox>`;}
+
+export const Example = Template.bind({});
+
+Example.args = {
+  checked: 'unchecked',
+  disabled: 'false',
+  inputName: 'undefined',
+  value: 'undefined'
+}

package/dist/collection/stories/Date.stories.js

@@ -0,0 +1,81 @@
+import { html } from 'lit';
+
+const getNumberRange = (start, end) => {
+    let numberRange = [];
+    for(let i = start; i <= end; i++) {
+        numberRange.push(i);
+    }
+    return numberRange;
+}
+
+export default {
+    title: 'Atoms/ptc-date',
+    tags: ['autodocs'],
+
+    argTypes: {
+        country: {
+            control: 'select',
+            options: ["en-US", "zh-CN", "zh-TW", "fr-FR", "ja-JP", "ru-RU", "de-DE", "ko-KR", "it-IT", "es-ES"],
+            description: "Country",
+            defaultValue: { summary: "en-US" }
+        },
+        dataSize: {
+            control: 'select',
+            options: ["medium", "small"],
+            description: "Date Font Size",
+            defaultValue: { summary: "small" }
+        },
+        dateColor: {
+            control: 'select',
+            options: ["primary-grey", "white"],
+            description: "Date Color",
+            defaultValue: { summary: "undefined" }
+        },  
+        dateString: {
+            control: 'text',
+            description: "Date examples: 2000-1-1 or 2000/01/01",
+            defaultValue: { summary: "undefined" }
+        },
+        day: {
+            control: 'select', 
+            options: getNumberRange(1, 31),
+            description: "Day",
+            defaultValue: { summary: 1 }
+        },
+        month: {
+            control: 'select', 
+            options: getNumberRange(1, 12),
+            description: "Month",
+            defaultValue: { summary: 1 }
+        },
+        year: {
+            control: 'select', 
+            options: getNumberRange(1900, (new Date).getFullYear()),
+            description: "Year",
+            defaultValue: { summary: 1900 }
+        },
+    }
+}
+
+const Template = args => {
+    return html `<ptc-date 
+        country="${args.country}"
+        data-size="${args.dataSize}"
+        date-color="${args.dateColor}"
+        date-string="${args.dateString}"
+        day="${args.day}"
+        month="${args.month}" 
+        year="${args.year}" 
+    ></ptc-date>`;
+}
+
+export const Example = Template.bind({});
+Example.args = {
+    country: "en-US",
+    dataSize: "small",
+    dateColor: undefined,
+    dateString: undefined,
+    day: 1,
+    month: 1,
+    year: 1900,
+}