@ptcwebops/ptcw-design 2.1.9 → 2.2.0

package/dist/collection/stories/Accordian.stories.js

@@ -1,206 +1,206 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Molecules/ptc-accordion',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    multiple: {
-      control: 'boolean',
-      description: 'If multiple <ptc-accordion-item> can open at the same time',
-      defaultValue: { summary: false }
-    }
-  }
-};
-
-// const Template = args => { return html `<ptc-accordion
-// 	multiple=${args.multiple}
-// ></ptc-accordion>`;}
-
-// export const Example = Template.bind({});
-
-// Example.args = { multiple: false }
-
-// ** Single **
-
-const SingleTemplate = args => { return html `<ptc-accordion
-	multiple=${args.multiple}
->
-  <ptc-accordion-item heading="I" active>
-    Add <code>active</code> attribute to open an item by default.
-  </ptc-accordion-item>
-  <ptc-accordion-item heading="Am">
-    Lorem ipsum dolor sit
-  </ptc-accordion-item>
-  <ptc-accordion-item heading="Groot">
-    Lorem ipsum dolor sit
-  </ptc-accordion-item>
-</ptc-accordion>`;}
-
-export const Single = SingleTemplate.bind({});
-
-Single.args = { multiple: false }
-
-// ** Multiple **
-
-const MultipleTemplate = args => { return html `<ptc-accordion
-	multiple=${args.multiple}
->
-  <ptc-accordion-item heading="We">
-    Lorem ipsum dolor sit
-  </ptc-accordion-item>
-  <ptc-accordion-item heading="Are">
-    Lorem ipsum dolor sit
-  </ptc-accordion-item>
-  <ptc-accordion-item heading="Groot">
-    Lorem ipsum dolor sit
-  </ptc-accordion-item>
-</ptc-accordion>`;}
-
-export const Multiple = MultipleTemplate.bind({});
-
-Multiple.args = { multiple: true }
-
-// ** Nested **
-
-const NestedTemplate = args => { return html `<ptc-accordion
-	multiple=${args.multiple}
->
-  <ptc-accordion-item heading="Accordions can be nested too">
-  Lorem ipsum dolor sit
-
-  <ptc-accordion id="inner-accordion">
-    <ptc-accordion-item heading="Nested">
-      Lorem ipsum dolor sit
-    </ptc-accordion-item>
-
-    <ptc-accordion-item heading="Accordions">
-      Lorem ipsum dolor sit
-    </ptc-accordion-item>
-    <ptc-accordion-item heading="Are pretty cool">
-      Lorem ipsum dolor sit
-    </ptc-accordion-item>
-  </ptc-accordion>
-
-  </ptc-accordion-item>
-  <ptc-accordion-item heading="Yayyy"">
-    Lorem ipsum dolor sit
-  </ptc-accordion-item>
-</ptc-accordion>`;}
-
-export const Nested = NestedTemplate.bind({});
-
-Nested.args = { multiple: false }
-
-// ** Customise It **
-
-const CustomiseItTemplate = args => { return html `<ptc-accordion
-	multiple=${args.multiple}
->
-  <ptc-accordion-item>
-  <div slot="heading">
-    <mark>
-      Use <code>slot="heading"</code> to customise heading
-    </mark>
-  </div>
-  Lorem ipsum dolor sit
-  </ptc-accordion-item>
-  <ptc-accordion-item heading="Customise arrow">
-  <div slot="arrow" style="text-align: center; color: red; width: 60px; height: 60px; font-size: 60px; line-height: 60px">
-    &#9775;
-  </div>
-  Use <code>slot="arrow"</code> to customise arrow
-  </ptc-accordion-item>
-</ptc-accordion>`;}
-
-export const CustomiseIt = CustomiseItTemplate.bind({});
-
-CustomiseIt.args = { multiple: false }
-
-// ** Website Examples **
-
-const WebsiteExamplesTemplate = args => { return html `<ptc-accordion
-	multiple=${args.multiple}
->
-  <ptc-accordion-item heading="Section Title ~10 words/60 characters" active>
-  <div class="is-grid has-col has-col-gap-lg has-row-gap-md has-col-gap-lg">
-    <div class="is-col is-col-5-md grid-order-2-md">
-      <ptc-picture alt="image-test" image-type="smart-img" is-full-width="true" image-alignment="left"
-        max-width="550"
-        src="https://www.ptc.com/-/media/Images/new-org/750x500/about/CreoImage-AboutPage.jpg?h=500&w=750&la=en&hash=0F83DBA377226C73EA31DE092ADF60BC"
-        class="js-fade scale-up scale-up-animation">
-      </ptc-picture>
-    </div>
-    <div class="is-col is-col-7-md grid-order-1-md">
-      <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-4" para-style="main">
-        Augmented reality is a highly visual, interactive method of presenting relevant digital information in the
-        context of the physical environment—connecting employees and improving business outcomes.
-      </ptc-para>
-      <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-4" para-style="main">
-        Industrial augmented reality offers a better way to create and deliver easily consumable work instructions
-        by
-        overlaying digital content onto real-world work environments.
-      </ptc-para>
-      <ptc-spacer size="x-large"></ptc-spacer>
-      <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank" tab-nav="-1">
-        Request Free Trial
-      </ptc-button>
-    </div>
-  </div>
-  </ptc-accordion-item>
-  <ptc-accordion-item heading="Section Title ~10 words/60 characters">
-  <div class="is-grid has-col has-col-gap-lg has-row-gap-md has-col-gap-lg">
-    <div class="is-col is-col-5-md grid-order-1-md">
-      <ptc-picture alt="image-test" image-type="smart-img" is-full-width="true" image-alignment="left"
-        max-width="550"
-        src="https://www.ptc.com/-/media/Images/new-org/750x500/about/CreoImage-AboutPage.jpg?h=500&w=750&la=en&hash=0F83DBA377226C73EA31DE092ADF60BC"
-        class="js-fade scale-up scale-up-animation">
-      </ptc-picture>
-    </div>
-    <div class="is-col is-col-7-md grid-order-2-md">
-      <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-4" para-style="main">
-        Augmented reality is a highly visual, interactive method of presenting relevant digital information in the
-        context of the physical environment—connecting employees and improving business outcomes.
-      </ptc-para>
-      <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-4" para-style="main">
-        Industrial augmented reality offers a better way to create and deliver easily consumable work instructions
-        by
-        overlaying digital content onto real-world work environments.
-      </ptc-para>
-      <ptc-spacer size="x-large"></ptc-spacer>
-      <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank" tab-nav="-1">
-        Request Free Trial
-      </ptc-button>
-    </div>
-  </div>
-  </ptc-accordion-item>
-  <ptc-accordion-item heading="Section Title ~10 words/60 characters">
-  <div class="is-grid has-col has-col-gap-lg has-row-gap-md has-col-gap-lg">
-    <div class="is-col is-col-5-md grid-order-2-md">
-      <ptc-picture alt="image-test" image-type="smart-img" is-full-width="true" image-alignment="left"
-        max-width="550"
-        src="https://www.ptc.com/-/media/Images/new-org/750x500/about/CreoImage-AboutPage.jpg?h=500&w=750&la=en&hash=0F83DBA377226C73EA31DE092ADF60BC"
-        class="js-fade scale-up scale-up-animation">
-      </ptc-picture>
-    </div>
-    <div class="is-col is-col-7-md grid-order-1-md">
-      <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-4" para-style="main">
-        Augmented reality is a highly visual, interactive method of presenting relevant digital information in the
-        context of the physical environment—connecting employees and improving business outcomes.
-      </ptc-para>
-      <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-4" para-style="main">
-        Industrial augmented reality offers a better way to create and deliver easily consumable work instructions
-        by
-        overlaying digital content onto real-world work environments.
-      </ptc-para>
-      <ptc-spacer size="x-large"></ptc-spacer>
-      <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank" tab-nav="-1">
-        Request Free Trial
-      </ptc-button>
-    </div>
-  </div>
-  </ptc-accordion-item>
-</ptc-accordion>`;}
-
-export const WebsiteExamples = WebsiteExamplesTemplate.bind({});
-
+import { html } from 'lit';
+
+export default {
+  title: 'Molecules/ptc-accordion',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    multiple: {
+      control: 'boolean',
+      description: 'If multiple <ptc-accordion-item> can open at the same time',
+      defaultValue: { summary: false }
+    }
+  }
+};
+
+// const Template = args => { return html `<ptc-accordion
+// 	multiple=${args.multiple}
+// ></ptc-accordion>`;}
+
+// export const Example = Template.bind({});
+
+// Example.args = { multiple: false }
+
+// ** Single **
+
+const SingleTemplate = args => { return html `<ptc-accordion
+	multiple=${args.multiple}
+>
+  <ptc-accordion-item heading="I" active>
+    Add <code>active</code> attribute to open an item by default.
+  </ptc-accordion-item>
+  <ptc-accordion-item heading="Am">
+    Lorem ipsum dolor sit
+  </ptc-accordion-item>
+  <ptc-accordion-item heading="Groot">
+    Lorem ipsum dolor sit
+  </ptc-accordion-item>
+</ptc-accordion>`;}
+
+export const Single = SingleTemplate.bind({});
+
+Single.args = { multiple: false }
+
+// ** Multiple **
+
+const MultipleTemplate = args => { return html `<ptc-accordion
+	multiple=${args.multiple}
+>
+  <ptc-accordion-item heading="We">
+    Lorem ipsum dolor sit
+  </ptc-accordion-item>
+  <ptc-accordion-item heading="Are">
+    Lorem ipsum dolor sit
+  </ptc-accordion-item>
+  <ptc-accordion-item heading="Groot">
+    Lorem ipsum dolor sit
+  </ptc-accordion-item>
+</ptc-accordion>`;}
+
+export const Multiple = MultipleTemplate.bind({});
+
+Multiple.args = { multiple: true }
+
+// ** Nested **
+
+const NestedTemplate = args => { return html `<ptc-accordion
+	multiple=${args.multiple}
+>
+  <ptc-accordion-item heading="Accordions can be nested too">
+  Lorem ipsum dolor sit
+
+  <ptc-accordion id="inner-accordion">
+    <ptc-accordion-item heading="Nested">
+      Lorem ipsum dolor sit
+    </ptc-accordion-item>
+
+    <ptc-accordion-item heading="Accordions">
+      Lorem ipsum dolor sit
+    </ptc-accordion-item>
+    <ptc-accordion-item heading="Are pretty cool">
+      Lorem ipsum dolor sit
+    </ptc-accordion-item>
+  </ptc-accordion>
+
+  </ptc-accordion-item>
+  <ptc-accordion-item heading="Yayyy"">
+    Lorem ipsum dolor sit
+  </ptc-accordion-item>
+</ptc-accordion>`;}
+
+export const Nested = NestedTemplate.bind({});
+
+Nested.args = { multiple: false }
+
+// ** Customise It **
+
+const CustomiseItTemplate = args => { return html `<ptc-accordion
+	multiple=${args.multiple}
+>
+  <ptc-accordion-item>
+  <div slot="heading">
+    <mark>
+      Use <code>slot="heading"</code> to customise heading
+    </mark>
+  </div>
+  Lorem ipsum dolor sit
+  </ptc-accordion-item>
+  <ptc-accordion-item heading="Customise arrow">
+  <div slot="arrow" style="text-align: center; color: red; width: 60px; height: 60px; font-size: 60px; line-height: 60px">
+    &#9775;
+  </div>
+  Use <code>slot="arrow"</code> to customise arrow
+  </ptc-accordion-item>
+</ptc-accordion>`;}
+
+export const CustomiseIt = CustomiseItTemplate.bind({});
+
+CustomiseIt.args = { multiple: false }
+
+// ** Website Examples **
+
+const WebsiteExamplesTemplate = args => { return html `<ptc-accordion
+	multiple=${args.multiple}
+>
+  <ptc-accordion-item heading="Section Title ~10 words/60 characters" active>
+  <div class="is-grid has-col has-col-gap-lg has-row-gap-md has-col-gap-lg">
+    <div class="is-col is-col-5-md grid-order-2-md">
+      <ptc-picture alt="image-test" image-type="smart-img" is-full-width="true" image-alignment="left"
+        max-width="550"
+        src="https://www.ptc.com/-/media/Images/new-org/750x500/about/CreoImage-AboutPage.jpg?h=500&w=750&la=en&hash=0F83DBA377226C73EA31DE092ADF60BC"
+        class="js-fade scale-up scale-up-animation">
+      </ptc-picture>
+    </div>
+    <div class="is-col is-col-7-md grid-order-1-md">
+      <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-4" para-style="main">
+        Augmented reality is a highly visual, interactive method of presenting relevant digital information in the
+        context of the physical environment—connecting employees and improving business outcomes.
+      </ptc-para>
+      <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-4" para-style="main">
+        Industrial augmented reality offers a better way to create and deliver easily consumable work instructions
+        by
+        overlaying digital content onto real-world work environments.
+      </ptc-para>
+      <ptc-spacer size="x-large"></ptc-spacer>
+      <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank" tab-nav="-1">
+        Request Free Trial
+      </ptc-button>
+    </div>
+  </div>
+  </ptc-accordion-item>
+  <ptc-accordion-item heading="Section Title ~10 words/60 characters">
+  <div class="is-grid has-col has-col-gap-lg has-row-gap-md has-col-gap-lg">
+    <div class="is-col is-col-5-md grid-order-1-md">
+      <ptc-picture alt="image-test" image-type="smart-img" is-full-width="true" image-alignment="left"
+        max-width="550"
+        src="https://www.ptc.com/-/media/Images/new-org/750x500/about/CreoImage-AboutPage.jpg?h=500&w=750&la=en&hash=0F83DBA377226C73EA31DE092ADF60BC"
+        class="js-fade scale-up scale-up-animation">
+      </ptc-picture>
+    </div>
+    <div class="is-col is-col-7-md grid-order-2-md">
+      <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-4" para-style="main">
+        Augmented reality is a highly visual, interactive method of presenting relevant digital information in the
+        context of the physical environment—connecting employees and improving business outcomes.
+      </ptc-para>
+      <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-4" para-style="main">
+        Industrial augmented reality offers a better way to create and deliver easily consumable work instructions
+        by
+        overlaying digital content onto real-world work environments.
+      </ptc-para>
+      <ptc-spacer size="x-large"></ptc-spacer>
+      <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank" tab-nav="-1">
+        Request Free Trial
+      </ptc-button>
+    </div>
+  </div>
+  </ptc-accordion-item>
+  <ptc-accordion-item heading="Section Title ~10 words/60 characters">
+  <div class="is-grid has-col has-col-gap-lg has-row-gap-md has-col-gap-lg">
+    <div class="is-col is-col-5-md grid-order-2-md">
+      <ptc-picture alt="image-test" image-type="smart-img" is-full-width="true" image-alignment="left"
+        max-width="550"
+        src="https://www.ptc.com/-/media/Images/new-org/750x500/about/CreoImage-AboutPage.jpg?h=500&w=750&la=en&hash=0F83DBA377226C73EA31DE092ADF60BC"
+        class="js-fade scale-up scale-up-animation">
+      </ptc-picture>
+    </div>
+    <div class="is-col is-col-7-md grid-order-1-md">
+      <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-4" para-style="main">
+        Augmented reality is a highly visual, interactive method of presenting relevant digital information in the
+        context of the physical environment—connecting employees and improving business outcomes.
+      </ptc-para>
+      <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-4" para-style="main">
+        Industrial augmented reality offers a better way to create and deliver easily consumable work instructions
+        by
+        overlaying digital content onto real-world work environments.
+      </ptc-para>
+      <ptc-spacer size="x-large"></ptc-spacer>
+      <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank" tab-nav="-1">
+        Request Free Trial
+      </ptc-button>
+    </div>
+  </div>
+  </ptc-accordion-item>
+</ptc-accordion>`;}
+
+export const WebsiteExamples = WebsiteExamplesTemplate.bind({});
+
 WebsiteExamples.args = { multiple: false }

package/dist/collection/stories/Announcement.stories.js

@@ -1,65 +1,65 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Molecules/ptc-announcement',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    barTitle: {
-      control: 'text',
-      description: 'bar title',
-      defaultValue: { summary: '' }
-    },
-    description: {
-      control: 'text',
-      description: 'bar description',
-      defaultValue: { summary: '' }
-    },
-    linkText: {
-      control: 'text',
-      description: 'link Text',
-      defaultValue: { summary: 'undefined' }
-    },
-    linkTitle: {
-      control: 'text',
-      description: 'link Title, will use Text if blank',
-      defaultValue: { summary: 'undefined' }
-    },
-    linkUrl: {
-      control: 'text',
-      description: 'Link Url',
-      defaultValue: { summary: '#' }
-    },
-    target: {
-      control: 'text',
-      description: 'Target',
-      defaultValue: { summary: '_self' }
-    },
-    visible: {
-      control: 'boolean',
-      description: 'Mutable Visibility',
-      defaultValue: { summary: false }
-    },
-  }
-};
-
-const Template = args => { return html `<ptc-announcement
-	bar-title=${args.barTitle}
-	description=${args.description}
-	link-text=${args.linkText}
-	link-title=${args.linkTitle}
-	link-url=${args.linkUrl}
-	target=${args.target}
-	visible=${args.visible}
-></ptc-announcement>`;}
-
-export const Example = Template.bind({});
-
-Example.args = {
-  barTitle: 'Title 50 characters Lorem Ipsum',
-  description: 'Description 80 characters lorem ipsum dolor sit amet consecutor',
-  linkText: 'CTA Action 25 characters',
-  linkTitle: 'Text on hover',
-  linkUrl: 'http://www.ptc.com',
-  target: '_blank',
-  visible: true,
+import { html } from 'lit';
+
+export default {
+  title: 'Molecules/ptc-announcement',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    barTitle: {
+      control: 'text',
+      description: 'bar title',
+      defaultValue: { summary: '' }
+    },
+    description: {
+      control: 'text',
+      description: 'bar description',
+      defaultValue: { summary: '' }
+    },
+    linkText: {
+      control: 'text',
+      description: 'link Text',
+      defaultValue: { summary: 'undefined' }
+    },
+    linkTitle: {
+      control: 'text',
+      description: 'link Title, will use Text if blank',
+      defaultValue: { summary: 'undefined' }
+    },
+    linkUrl: {
+      control: 'text',
+      description: 'Link Url',
+      defaultValue: { summary: '#' }
+    },
+    target: {
+      control: 'text',
+      description: 'Target',
+      defaultValue: { summary: '_self' }
+    },
+    visible: {
+      control: 'boolean',
+      description: 'Mutable Visibility',
+      defaultValue: { summary: false }
+    },
+  }
+};
+
+const Template = args => { return html `<ptc-announcement
+	bar-title=${args.barTitle}
+	description=${args.description}
+	link-text=${args.linkText}
+	link-title=${args.linkTitle}
+	link-url=${args.linkUrl}
+	target=${args.target}
+	visible=${args.visible}
+></ptc-announcement>`;}
+
+export const Example = Template.bind({});
+
+Example.args = {
+  barTitle: 'Title 50 characters Lorem Ipsum',
+  description: 'Description 80 characters lorem ipsum dolor sit amet consecutor',
+  linkText: 'CTA Action 25 characters',
+  linkTitle: 'Text on hover',
+  linkUrl: 'http://www.ptc.com',
+  target: '_blank',
+  visible: true,
 }