@ptcwebops/ptcw-design 2.2.0 → 2.2.2

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

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

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