@ptcwebops/ptcw-design 6.4.4-beta → 6.4.4

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

@@ -22,11 +22,6 @@ export default {
       description: 'Card Type',
       defaultValue: { summary: 'undefined' }
     },
-    isLoading: {
-      control: 'boolean',
-      description: 'Internal Screen Size State',
-      defaultValue: { summary: 'false' }
-    },
     linkTarget: {
       control: '',
       description: 'link Target',
@@ -40,23 +35,6 @@ export default {
   }
 };
 
-// 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 **
 
@@ -65,7 +43,6 @@ const _16x9CardTemplate = args => { return html `
   <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}
   >
@@ -88,7 +65,6 @@ export const _16x9Card = _16x9CardTemplate.bind({});
 _16x9Card.args = {
   cardLink: 'https://www.ptc.com/',
   cardType: 'card-video',
-  isLoading: 'false',
   linkTarget: '_blank',
   linkTitle: 'Link title on hover'
 }
@@ -100,7 +76,6 @@ const TallCardTemplate = args => { return html `
     <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}
     >
@@ -124,7 +99,6 @@ export const TallCard = TallCardTemplate.bind({});
 TallCard.args = {
   cardLink: 'https://www.ptc.com/',
   cardType: 'card-tall',
-  isLoading: 'false',
   linkTarget: '_blank',
   linkTitle: 'Link title on hover'
 }
@@ -139,7 +113,6 @@ const SpeedBumpTemplate = args => { return html `
     <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}
     >
@@ -177,7 +150,6 @@ export const SpeedBump = SpeedBumpTemplate.bind({});
 SpeedBump.args = {
   cardLink: 'https://www.ptc.com/',
   cardType: 'speed-bump',
-  isLoading: 'true',
   linkTarget: '_blank',
   linkTitle: 'Link title on hover'
 }
@@ -188,7 +160,6 @@ 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}
 >
@@ -220,7 +191,6 @@ 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'
 }
@@ -235,7 +205,6 @@ const PlaylistCardTemplate = args => { return html `
     <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}
     >
@@ -264,7 +233,6 @@ 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/Countdown.stories.js

@@ -1,10 +1,71 @@
 import { html } from 'lit';
 
-export default { title: 'New/ptc-countdown', tags: [ 'autodocs' ], argTypes: {} };
-const Template = (args) => {
-  return html`<ptc-countdown
->
-</ptc-countdown>`;
+export default {
+  title: 'Molecules/ptc-countdown',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    countdownTitle: { control: 'text', description: '', defaultValue: { summary: '' } },
+    daysText: {
+      control: 'text',
+      description: '',
+      defaultValue: { summary: 'days' }
+    },
+    eventTime: { control: 'text', description: '', defaultValue: { summary: '' } },
+    eventTimeZone: {
+      control: 'text',
+      description: '',
+      defaultValue: { summary: 'EST' }
+    },
+    expiredText: {
+      control: 'text',
+      description: '',
+      defaultValue: { summary: 'This event has started on' }
+    },
+    hoursText: {
+      control: 'text',
+      description: '',
+      defaultValue: { summary: 'hours' }
+    },
+    minutesText: {
+      control: 'text',
+      description: '',
+      defaultValue: { summary: 'minutes' }
+    },
+    secondsText: {
+      control: 'text',
+      description: '',
+      defaultValue: { summary: 'seconds' }
+    },
+    useHourFormat: {
+      control: 'boolean',
+      description: '',
+      defaultValue: { summary: 'true' }
+    }
+  }
 };
+
+const Template = args => { return html `<ptc-countdown
+	countdown-title=${args.countdownTitle}
+	days-text=${args.daysText}
+	event-time=${args.eventTime}
+	event-time-zone=${args.eventTimeZone}
+	expired-text=${args.expiredText}
+	hours-text=${args.hoursText}
+	minutes-text=${args.minutesText}
+	seconds-text=${args.secondsText}
+	use-hour-format=${args.useHourFormat}
+></ptc-countdown>`;}
+
 export const Example = Template.bind({});
-Example.args = {};
+
+Example.args = {
+  countdownTitle: 'Countdown Title',
+  daysText: 'days',
+  eventTime: '10/30/2025 18:00:00',
+  eventTimeZone: 'EST',
+  expiredText: 'This event has started on',
+  hoursText: 'hours',
+  minutesText: 'minutes',
+  secondsText: 'seconds',
+  useHourFormat: 'true'
+}

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

@@ -6,46 +6,40 @@ export default {
   argTypes: {
     year: { description: ' Year', defaultValue: { summary: '1900' } },
     month: {
-      description: ' Month An integer between 1 (January) and 12 (December) representing the month.If omitted, defaults to 0.',
-      defaultValue: { summary: '0' }
+      description: ' Month An integer between 1 (January) and 12 (December) representing the month.If omitted, defaults to 1.',
+      defaultValue: { summary: '1' },
+      control: 'select',
+      options: ['1','2','3','4','5','6','7','8','9','10','11','12'],
     },
     day: {
       description: ' Day An integer between 1 and 31 representing the day of the month. If omitted, defaults to 1.',
-      defaultValue: { summary: '1' }
+      defaultValue: { summary: '1' },
+      control: 'select',
+      options: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
     },
     country: {
       description: ' Country examples: en-US, zh-CN, zh-TW, fr-FR, ja-JP, ru-RU, de-DE, ko-KR, it-IT, es-ES',
       defaultValue: { summary: 'en-US' },
-      control: 'select',
+      control: 'text',
       options: [ 'string', 'undefined' ]
     },
-    dateString: {
-      description: ' Date examples: 2000-1-1 or 2000/01/01',
-      defaultValue: { summary: '' },
-      control: 'text'
-    },
-    dateColor: {
-      description: ' Date Color',
-      defaultValue: { summary: '' },
-      control: 'select',
-      options: [ 'white', 'primary-grey' ]
-    },
-    dateStyles: {
-      description: ' Injected styles',
-      defaultValue: { summary: '' },
-      control: 'text'
-    },
-    dataSize: {
-      description: ' Date Font Size',
-      defaultValue: { summary: 'small' },
-      control: 'select',
-      options: [ 'medium', 'small' ]
-    },
-    formatOptions: {
-      description: ' Custom object for formatting date e.i. { weekday: "long", year: "numeric", month: "long", day: "numeric" }',
-      defaultValue: { summary: '' },
-      control: 'text'
-    }
+    // dateString: {
+    //   description: ' Date examples: 2000-1-1 or 2000/01/01',
+    //   defaultValue: { summary: '' },
+    //   control: 'text'
+    // },
+    // dateColor: {
+    //   description: ' Date Color',
+    //   defaultValue: { summary: '' },
+    //   control: 'select',
+    //   options: [ 'white', 'primary-grey' ]
+    // },
+    // dataSize: {
+    //   description: ' Date Font Size',
+    //   defaultValue: { summary: 'small' },
+    //   control: 'select',
+    //   options: [ 'medium', 'small' ]
+    // },
   }
 };
 const Template = (args) => {
@@ -54,23 +48,13 @@ const Template = (args) => {
     month=${args.month}
     day=${args.day}
     country=${args.country}
-    dateString=${args.dateString}
-    dateColor=${args.dateColor}
-    dateStyles=${args.dateStyles}
-    dataSize=${args.dataSize}
-    formatOptions=${args.formatOptions}
 >
 </ptc-date>`;
 };
 export const Example = Template.bind({});
 Example.args = {
   year: '1900',
-  month: '0',
+  month: '1',
   day: '1',
   country: 'en-US',
-  dateString: '',
-  dateColor: '',
-  dateStyles: '',
-  dataSize: 'small',
-  formatOptions: ''
 };

package/dist/collection/stories/FormCheckbox.stories.js

@@ -29,7 +29,7 @@ export default {
       description: '',
       defaultValue: { summary: 'undefined' }
     },
-    required: {
+    isRequired: {
       control: 'boolean',
       description: '',
       defaultValue: { summary: 'true' }
@@ -43,7 +43,7 @@ const Template = args => { return html `<ptc-form-checkbox
 	is-checked=${args.isChecked}
 	label=${args.label}
 	name=${args.name}
-	required=${args.required}
+	is-required=${args.isRequired}
 ></ptc-form-checkbox>`;}
 
 export const Example = Template.bind({});
@@ -54,5 +54,5 @@ Example.args = {
   isChecked: 'false',
   label: 'checkbox content goes here',
   name: 'labelname',
-  required: 'false'
+  isRequired: 'false'
 }

package/dist/collection/stories/FormRadioButton.stories.js

@@ -23,9 +23,9 @@ export default {
 };
 
 const Template = args => { return html `<ptc-form-radio-button
-	name=${args.name}
-	is-checked=${args.isChecked}
-	is-disabled=${args.isDisabled}
+	name= "${args.name}"
+	is-checked= "${args.isChecked}"
+	is-disabled= "${args.isDisabled}"
 >Radio Button</ptc-form-radio-button>`;}
 
 export const Example = Template.bind({});

package/dist/collection/stories/Icon.stories.js

@@ -7,51 +7,31 @@ export default {
     color: {
       control: 'select',
       options: ["black", "default", "gray", "inherit", "ptc-green", "white"],
-      description: 'Icon Color',
+      description: 'Icon Color. Please turn on dark theme when you select white',
       defaultValue: { summary: 'default' }
     },
-    // injectedStyle: {
-    //   control: '',
-    //   description: '(optional) Injected CSS Styles',
-    //   defaultValue: { summary: 'undefined' }
-    // },
-    // isMobileSelect: {
-    //   control: '',
-    //   description: '(optional) is it for the ptc mobile select',
-    //   defaultValue: { summary: 'undefined' }
-    // },
     name: {
       control: 'select',
-      options: ["new-search", "arrow-right-nav", "vuforia-icon-logo-1", "thingworx-icon-logo-1", "onshape-icon-logo-1", "creo-icon-logo-1", "arena-icon-logo1"],
       description: 'Icon ID name',
-      defaultValue: { summary: 'undefined' }
+      defaultValue: { summary: 'undefined' },
+      options: ['button-arrow-right', 'arrow-right-nav','arrow_ascending','button-arrow-down','icon-3d-cube','icon-chart-down-arrow','icon-clock-checkmark','icon-clock-minus','search1', 'chevron-down', 'quotation-mark']
     },
-    // pulse: {
-    //   control: '',
-    //   description: 'Icon Pulse Animation (not valid for ptc type)',
-    //   defaultValue: { summary: '' }
-    // },
     size: {
       control: 'select',
       options: ["large", "medium", "small", "x-large", "x-small", "xx-large", "xx-small", "xxx-large", "xxx-small", "xxxx-large"],
       description: 'Icon Size',
       defaultValue: { summary: 'xx-small' }
     },
-    // spin: {
-    //   control: '',
-    //   description: 'Icon Spin Animation (not valid for ptc type)',
-    //   defaultValue: { summary: '' }
-    // },
     type: {
       control: 'select',
-      options: ["brands", "ptc", "regular", "solid"],
+      options: ["ptc"],
       description: 'Icon Type',
       defaultValue: { summary: 'regular' }
     }
   }
 };
 
-const Template = args => { return html `<icon-asset
+const Template = args => { return html `<ptc-para>For more examples, please check: <ptc-link href="../../examples/ptc-icon-sprites.html" external="" link-title="ptc-icon" class="hydrated">View PTC Icon Library</ptc-link></ptc-para><br/><icon-asset
 	name=${args.name}
 	size=${args.size}
 	color=${args.color}
@@ -62,11 +42,7 @@ export const Example = Template.bind({});
 
 Example.args = {
   color: 'ptc-green',
-  // injectedStyle: 'undefined',
-  // isMobileSelect: 'undefined',
-  name: 'footer-facebook-icon',
-  // pulse: '',
+  name: 'icon-3d-cube',
   size: 'medium',
-  // spin: 'fa-spin',
   type: 'ptc'
 }

package/dist/collection/stories/Jumbotron.stories.js

@@ -29,7 +29,6 @@ Light.args = {
   jumbotronType: 'light',
   hasCountdown: 'false',
   logo: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/4699dab90e6f476b8a70902b58d7d3db?h=827&w=1550&la=en',
-  styles: 'undefined',
   subTitle: 'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo',
   slotContent: `<ptc-breadcrumb slot="breadcrumb" color="primary-gray">
         <list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us" color="primary-gray"> PLM Video Hub </list-item>
@@ -76,11 +75,6 @@ Light.argTypes = {
     control: 'text',
     description: 'Optional - set a logo by adding an URL to this property',
   },
-  styles: {
-    control: 'text',
-    description: '(optional) Injected CSS styles',
-    defaultValue: { summary: 'undefined' },
-  },
   subTitle: {
     control: 'text',
     description: 'Set the sub title',
@@ -115,7 +109,6 @@ Dark.args = {
   hasCountdown: 'false',
   jumbotronType: 'dark',
   logo: '',
-  styles: 'undefined',
   subTitle: 'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo',
   slotContent: `
   <ptc-breadcrumb slot="breadcrumb" color="white">
@@ -158,11 +151,6 @@ Dark.argTypes = {
     control: 'text',
     description: 'Optional - set a logo by adding an URL to this property',
   },
-  styles: {
-    control: 'text',
-    description: '(optional) Injected CSS styles',
-    defaultValue: { summary: 'undefined' },
-  },
   subTitle: {
     control: 'text',
     description: 'Set the sub title',
@@ -190,7 +178,6 @@ const TextJumbotronTemplate = args => {
 export const Text = TextJumbotronTemplate.bind({});
 Text.args = {
   jumbotronType: 'text',
-  styles: 'undefined',
   subTitle: 'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo',
   slotContent: `
   <ptc-breadcrumb slot="breadcrumb" color="primary-gray" position="center" styles=":host{margin-top: var(--ptc-element-spacing-06)!important;align-items: baseline;}">
@@ -230,11 +217,6 @@ Text.argTypes = {
     description: 'jumbotron types. light, dark, light-video, dark-video, png, text, blog, gif',
     defaultValue: { summary: 'light' },
   },
-  styles: {
-    control: 'text',
-    description: '(optional) Injected CSS styles',
-    defaultValue: { summary: 'undefined' },
-  },
   slotContent: {
     name: 'Default Slot',
     description: 'Text Content between the <ptc-link> tags.',
@@ -269,7 +251,6 @@ DarkVideo.args = {
   jumbotronType: 'dark-video',
   pauseButtonTitle: 'pause text',
   playButtonTitle: 'play text',
-  styles: 'undefined',
   subTitle: 'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo',
   slotContent: `
   <ptc-breadcrumb slot="breadcrumb" color="white" is-dark-mode>
@@ -326,11 +307,6 @@ DarkVideo.argTypes = {
     description: 'paly button text when bg-video-src has a value',
     defaultValue: { summary: 'undefined' },
   },
-  styles: {
-    control: 'text',
-    description: '(optional) Injected CSS styles',
-    defaultValue: { summary: 'undefined' },
-  },
   subTitle: {
     control: 'text',
     description: 'Set the sub title',
@@ -372,7 +348,6 @@ LightVideo.args = {
   jumbotronType: 'light-video',
   pauseButtonTitle: 'pause text',
   playButtonTitle: 'play text',
-  styles: 'undefined',
   subTitle: 'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo',
   slotContent: `
   <ptc-breadcrumb slot="breadcrumb" color="primary-gray" is-dark-mode>
@@ -429,11 +404,6 @@ LightVideo.argTypes = {
     description: 'paly button text when bg-video-src has a value',
     defaultValue: { summary: 'undefined' },
   },
-  styles: {
-    control: 'text',
-    description: '(optional) Injected CSS styles',
-    defaultValue: { summary: 'undefined' },
-  },
   subTitle: {
     control: 'text',
     description: 'Set the sub title',
@@ -481,7 +451,6 @@ BlogVideo.args = {
   blogAuthorName: 'Simone Biles',
   blogAuthorQueryHref: 'https://www.ptc.com/blogs',
   blogAuthorQueryTarget: '_blank',
-  styles: 'undefined',
   slotContent: `
   <ptc-breadcrumb slot="breadcrumb" color="primary-gray" remove-top-margin="true">
                 <list-item list-type="breadcrumb" link-href="https://www-dev.ptc.com/blogs" color="primary-gray">Blogs</list-item>
@@ -553,11 +522,6 @@ BlogVideo.argTypes = {
     description: 'jumbotron types. light, dark, light-video, dark-video, png, text, blog, gif',
     defaultValue: { summary: 'light' },
   },
-  styles: {
-    control: 'text',
-    description: '(optional) Injected CSS styles',
-    defaultValue: { summary: 'undefined' },
-  },
   slotContent: {
     name: 'Default Slot',
     description: 'Text Content between the <ptc-link> tags.',

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

@@ -12,12 +12,12 @@ export default {
   argTypes: {
     disabled: {
       control: 'boolean',
-      description: 'Disabled link',
+      description: 'Disabled link. Open the code editor to see the difference.',
       defaultValue: { summary: 'false' },
     },
     external: {
       control: 'boolean',
-      description: 'Is it an external link',
+      description: 'Is it an external link. Open the code editor to see the difference.',
       defaultValue: { summary: 'false' },
     },
     fontSize: {
@@ -111,7 +111,7 @@ Example.args = {
   fontSize: 'medium',
   fontWeight: 'undefined',
   href: 'https://www.ptc.com',
-  linkArea: 'undefined',
+  linkArea: 'link-area-cover-parent',
   linkTitle: 'Title attribute goes here',
   target: '_blank',
   theme: 'simple',

package/dist/collection/stories/ListItem.stories.js

@@ -10,11 +10,6 @@ export default {
       control: 'select',
       options: [ 'white', 'primary-gray', 'light-gray' ]
     },
-    styles: {
-      description: ' (optional) Injected CSS styles ',
-      defaultValue: { summary: '' },
-      control: 'text'
-    },
     default: {
       description: 'Default slot content',
       control: 'text',
@@ -25,10 +20,9 @@ export default {
 const Template = (args) => {
   return html`<list-item
   color=${args.color}
-  styles=${args.styles}
 >
   ${args.default}
 </list-item>`;
 };
 export const Example = Template.bind({});
-Example.args = { color: '', styles: '', default: 'Lorem ipsum text' };
+Example.args = { color: '', default: 'Lorem ipsum text' };

package/dist/collection/stories/MobileSelect.stories.js

@@ -43,7 +43,7 @@ export default {
   },
 };
 
-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>
+const Template = args => { return html `<ptc-para>This component is optimized for <b>mobile screens</b>. 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">
   <ptc-mobile-select class="js-mobile-select-1"
     cancel-btn-text=${args.cancelBtnText}

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

@@ -1,27 +1,39 @@
-import { html } from 'lit';
+import { html } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 export default {
-  title: 'New/ptc-select',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    ptcDataEloquaName: {
-      description: ' Eloqua Data',
-      defaultValue: { summary: '' },
-      control: 'text'
-    },
-    default: {
-      description: 'Default slot content',
-      control: 'text',
-      table: { category: 'slots' }
-    }
-  }
+	title: "Atoms/ptc-select",
+	tags: ["autodocs"],
+	argTypes: {
+		ptcDataEloquaName: {
+			description: " Eloqua Data. Please open the editor to see the changes.",
+			defaultValue: { summary: "" },
+			control: "text",
+		},
+	},
 };
 const Template = (args) => {
-  return html`<ptc-select
-	ptcDataEloquaName=${args.ptcDataEloquaName}
->
-	${args.default}
-</ptc-select>`;
+	return html`<ptc-select
+		field-id="contact-country"
+		label="Country*"
+		field-name="country"
+		default-value="USA"
+		ptcDataEloquaName=${args.ptcDataEloquaName}
+	>
+		<ul class="mdc-list">
+			<li class="mdc-list-item" data-value="">
+				<span class="mdc-list-item__ripple"></span>
+			</li>
+			<li class="mdc-list-item" data-value="USA">
+				<span class="mdc-list-item__ripple"></span>
+				<span class="mdc-list-item__text"> USA </span>
+			</li>
+			<li class="mdc-list-item" data-value="Canada">
+				<span class="mdc-list-item__ripple"></span>
+				<span class="mdc-list-item__text"> Canada </span>
+			</li>
+		</ul>
+	</ptc-select>`;
 };
 export const Example = Template.bind({});
-Example.args = { ptcDataEloquaName: '', default: 'Lorem ipsum text' };
+Example.args = { ptcDataEloquaName: "C_Country" };

package/dist/collection/stories/Span.stories.js

@@ -5,7 +5,7 @@ export default {
   tags: [ 'autodocs' ],
   argTypes: {
     display: {
-      description: "Display",
+      description: "Display, please open the code editor to see the changes",
       defaultValue: { summary: 'inline' },
       control: 'select',
       options: [ 'block', 'inline-block', 'inline' ]
@@ -21,11 +21,6 @@ export default {
         'w-9'
       ]
     },
-    styles: {
-      description: ' Injected Styles',
-      defaultValue: { summary: '' },
-      control: 'text'
-    },
     default: {
       description: 'Default slot content',
       control: 'text',
@@ -35,9 +30,9 @@ export default {
 };
 const Template = (args) => {
   return html`<ptc-span
-    display=${args.display}
-    fontWeight=${args.fontWeight}
-    styles=${args.styles}
+  .key=${args.fontWeight}
+    display= "${args.display}"
+    font-weight= "${args.fontWeight}"
 >
     ${args.default}
 </ptc-span>`;
@@ -46,6 +41,5 @@ export const Example = Template.bind({});
 Example.args = {
   display: 'inline',
   fontWeight: 'w-4',
-  styles: '',
   default: 'Lorem ipsum text'
 };