@ptcwebops/ptcw-design 1.9.7 → 2.0.1

package/dist/collection/stories/Hero.stories.js

@@ -1,120 +1,120 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Molecules/ptc-hero',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    bgUrl: {
-      control: 'text',
-      description: 'Hero Background Image URL',
-      defaultValue: { summary: 'undefined' }
-    },
-    contentAlignment: {
-      control: 'select',
-      options: ['left', 'right', 'center'],
-      description: 'Content Alignment',
-      defaultValue: { summary: 'undefined' }
-    },
-    heroType: {
-      control: 'select',
-      options: ["footer-cta", "jumbotron", "simple"],
-      description: 'Hero Type',
-      defaultValue: { summary: 'undefined' }
-    }
-  }
-};
-
-// const Template = args => { return html `<ptc-hero
-// 	bg-url=${args.bgUrl}
-// 	content-alignment=${args.contentAlignment}
-// 	hero-type=${args.heroType}
-// ></ptc-hero>`;}
-
-// export const Example = Template.bind({});
-
-// Example.args = {
-//   bgUrl: 'undefined',
-//   contentAlignment: 'undefined',
-//   heroType: 'undefined'
-// }
-
-// ** Dark Theme Jumbotron **
-
-const DarkThemeJumbotronTemplate = args => { return html `<ptc-hero 
-	bg-url=${args.bgUrl}
-	content-alignment=${args.contentAlignment}
-	hero-type=${args.heroType}
->
-  <div class="ptc-container is-grid has-col-12">
-    <div class="u-hero-width is-grid  has-row-gap-sm">
-      <div class="is-col-12">
-        <ptc-spacer breakpoint="x-small" size="space-128"></ptc-spacer>
-        <ptc-spacer breakpoint="small" size="space-128"></ptc-spacer>
-      </div>
-      <ptc-span span-style="plm-hub-style" display="block" exportparts="part-ptc-span" class="is-col-12">Featured
-        Video</ptc-span>
-      <ptc-title type="h1" upperline="no-upperline" is-plm-hub title-size="xxxx-large" title-height="densest" title-weight="w-8" class="is-col-12">Making Industrial Innovation a
-        Reality</ptc-title>
-      <ptc-para font-size="x-small" font-weight="w-5" para-margin="margin-flush" para-color="white"
-        para-line-h="line-height-19" class="is-col-12">
-        See how Polaris and Whirlpool Corporation are driving digital transformation and industrial innovation for
-        their customers.
-      </ptc-para>
-      <ptc-link class="has-m-top is-col-12" target="_blank" href="https://www.ptc.com" link-title="PTC" theme="arrow-plm">Watch
-        Now
-      </ptc-link>
-      <div class="is-col-12">
-        <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
-        <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
-        <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
-        <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
-        <ptc-spacer breakpoint="small" size="xxxx-large"></ptc-spacer>
-        <ptc-spacer breakpoint="small" size="xxxx-large"></ptc-spacer>
-        <ptc-spacer breakpoint="small" size="xxxx-large"></ptc-spacer>
-      </div>
-    </div>
-  </div>
-</ptc-hero>`;}
-
-export const DarkThemeJumbotron = DarkThemeJumbotronTemplate.bind({});
-
-DarkThemeJumbotron.args = {
-  bgUrl: 'http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway',
-  contentAlignment: 'left',
-  heroType: 'jumbotron'
-}
-
-// ** Dark Theme Footer CTA **
-
-const DarkThemeFooterCTATemplate = args => { return html `<ptc-hero
-	bg-url=${args.bgUrl}
-	content-alignment=${args.contentAlignment}
-	hero-type=${args.heroType}
->
-  <div class="ptc-container is-grid has-p-lg">
-    <div class="u-hero-width u-margin-center is-col-12 is-grid has-row-gap-sm">
-      <ptc-span class="is-col-12" span-style="plm-hub-style" display="block" exportparts="part-ptc-span">Featured
-        Video</ptc-span>
-      <ptc-title class="is-col-12" type="h2" upperline="no-upperline" text-align="center" is-plm-hub title-size="xxxx-large" title-height="densest" title-weight="w-8">Making
-        Industrial
-        Innovation a
-        Reality</ptc-title>
-      <ptc-para class="is-col-12" font-size="x-small" font-weight="w-5" para-margin="margin-flush" 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-link class="has-m-top is-col-12" href="https://www.ptc.com" target="_blank" link-title="PTC" theme="arrow-plm">Watch
-        Now
-      </ptc-link>
-    </div>
-  </div>
-</ptc-hero>`;}
-
-export const DarkThemeFooterCTA = DarkThemeFooterCTATemplate.bind({});
-
-DarkThemeFooterCTA.args = {
-  bgUrl: 'https://s7d1.scene7.com/is/image/ptcinc/slts-access-real-time-data-service-compliance',
-  contentAlignment: undefined,
-  heroType: 'footer-cta'
+import { html } from 'lit';
+
+export default {
+  title: 'Molecules/ptc-hero',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    bgUrl: {
+      control: 'text',
+      description: 'Hero Background Image URL',
+      defaultValue: { summary: 'undefined' }
+    },
+    contentAlignment: {
+      control: 'select',
+      options: ['left', 'right', 'center'],
+      description: 'Content Alignment',
+      defaultValue: { summary: 'undefined' }
+    },
+    heroType: {
+      control: 'select',
+      options: ["footer-cta", "jumbotron", "simple"],
+      description: 'Hero Type',
+      defaultValue: { summary: 'undefined' }
+    }
+  }
+};
+
+// const Template = args => { return html `<ptc-hero
+// 	bg-url=${args.bgUrl}
+// 	content-alignment=${args.contentAlignment}
+// 	hero-type=${args.heroType}
+// ></ptc-hero>`;}
+
+// export const Example = Template.bind({});
+
+// Example.args = {
+//   bgUrl: 'undefined',
+//   contentAlignment: 'undefined',
+//   heroType: 'undefined'
+// }
+
+// ** Dark Theme Jumbotron **
+
+const DarkThemeJumbotronTemplate = args => { return html `<ptc-hero 
+	bg-url=${args.bgUrl}
+	content-alignment=${args.contentAlignment}
+	hero-type=${args.heroType}
+>
+  <div class="ptc-container is-grid has-col-12">
+    <div class="u-hero-width is-grid  has-row-gap-sm">
+      <div class="is-col-12">
+        <ptc-spacer breakpoint="x-small" size="space-128"></ptc-spacer>
+        <ptc-spacer breakpoint="small" size="space-128"></ptc-spacer>
+      </div>
+      <ptc-span span-style="plm-hub-style" display="block" exportparts="part-ptc-span" class="is-col-12">Featured
+        Video</ptc-span>
+      <ptc-title type="h1" upperline="no-upperline" is-plm-hub title-size="xxxx-large" title-height="densest" title-weight="w-8" class="is-col-12">Making Industrial Innovation a
+        Reality</ptc-title>
+      <ptc-para font-size="x-small" font-weight="w-5" para-margin="margin-flush" para-color="white"
+        para-line-h="line-height-19" class="is-col-12">
+        See how Polaris and Whirlpool Corporation are driving digital transformation and industrial innovation for
+        their customers.
+      </ptc-para>
+      <ptc-link class="has-m-top is-col-12" target="_blank" href="https://www.ptc.com" link-title="PTC" theme="arrow-plm">Watch
+        Now
+      </ptc-link>
+      <div class="is-col-12">
+        <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
+        <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
+        <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
+        <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
+        <ptc-spacer breakpoint="small" size="xxxx-large"></ptc-spacer>
+        <ptc-spacer breakpoint="small" size="xxxx-large"></ptc-spacer>
+        <ptc-spacer breakpoint="small" size="xxxx-large"></ptc-spacer>
+      </div>
+    </div>
+  </div>
+</ptc-hero>`;}
+
+export const DarkThemeJumbotron = DarkThemeJumbotronTemplate.bind({});
+
+DarkThemeJumbotron.args = {
+  bgUrl: 'http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway',
+  contentAlignment: 'left',
+  heroType: 'jumbotron'
+}
+
+// ** Dark Theme Footer CTA **
+
+const DarkThemeFooterCTATemplate = args => { return html `<ptc-hero
+	bg-url=${args.bgUrl}
+	content-alignment=${args.contentAlignment}
+	hero-type=${args.heroType}
+>
+  <div class="ptc-container is-grid has-p-lg">
+    <div class="u-hero-width u-margin-center is-col-12 is-grid has-row-gap-sm">
+      <ptc-span class="is-col-12" span-style="plm-hub-style" display="block" exportparts="part-ptc-span">Featured
+        Video</ptc-span>
+      <ptc-title class="is-col-12" type="h2" upperline="no-upperline" text-align="center" is-plm-hub title-size="xxxx-large" title-height="densest" title-weight="w-8">Making
+        Industrial
+        Innovation a
+        Reality</ptc-title>
+      <ptc-para class="is-col-12" font-size="x-small" font-weight="w-5" para-margin="margin-flush" 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-link class="has-m-top is-col-12" href="https://www.ptc.com" target="_blank" link-title="PTC" theme="arrow-plm">Watch
+        Now
+      </ptc-link>
+    </div>
+  </div>
+</ptc-hero>`;}
+
+export const DarkThemeFooterCTA = DarkThemeFooterCTATemplate.bind({});
+
+DarkThemeFooterCTA.args = {
+  bgUrl: 'https://s7d1.scene7.com/is/image/ptcinc/slts-access-real-time-data-service-compliance',
+  contentAlignment: undefined,
+  heroType: 'footer-cta'
 }

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

@@ -1,72 +1,72 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Atoms/icon-asset',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    color: {
-      control: 'select',
-      options: ["black", "default", "gray", "inherit", "ptc-green", "white"],
-      description: 'Icon Color',
-      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' }
-    },
-    // 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"],
-      description: 'Icon Type',
-      defaultValue: { summary: 'regular' }
-    }
-  }
-};
-
-const Template = args => { return html `<icon-asset
-	name=${args.name}
-	size=${args.size}
-	color=${args.color}
-	type=${args.type}
-></icon-asset>`;}
-
-export const Example = Template.bind({});
-
-Example.args = {
-  color: 'ptc-green',
-  // injectedStyle: 'undefined',
-  // isMobileSelect: 'undefined',
-  name: 'footer-facebook-icon',
-  // pulse: '',
-  size: 'medium',
-  // spin: 'fa-spin',
-  type: 'ptc'
+import { html } from 'lit';
+
+export default {
+  title: 'Atoms/icon-asset',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ["black", "default", "gray", "inherit", "ptc-green", "white"],
+      description: 'Icon Color',
+      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' }
+    },
+    // 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"],
+      description: 'Icon Type',
+      defaultValue: { summary: 'regular' }
+    }
+  }
+};
+
+const Template = args => { return html `<icon-asset
+	name=${args.name}
+	size=${args.size}
+	color=${args.color}
+	type=${args.type}
+></icon-asset>`;}
+
+export const Example = Template.bind({});
+
+Example.args = {
+  color: 'ptc-green',
+  // injectedStyle: 'undefined',
+  // isMobileSelect: 'undefined',
+  name: 'footer-facebook-icon',
+  // pulse: '',
+  size: 'medium',
+  // spin: 'fa-spin',
+  type: 'ptc'
 }

package/dist/collection/stories/IconList.stories.js

@@ -1,114 +1,114 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Molecules/ptc-icon-list',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    isLastItem: {
-      control: 'boolean',
-      description: '',
-      defaultValue: { summary: false }
-    },
-    listContent: {
-      control: 'text',
-      description: 'List value with unit Example: Increase in Operator Productivity',
-      defaultValue: { summary: '' }
-    },
-    listType: {
-      control: 'select',
-      options: ['simple-icon-list', 'stat-icon-list', 'icon-top-align-list'],
-      description: 'List item type',
-      defaultValue: { summary: 'simple-icon-list' }
-    },
-    valueText: {
-      control: 'text',
-      description: 'List value text Example: up to',
-      defaultValue: { summary: '' }
-    },
-    valueWithUnit: {
-      control: 'text',
-      description: 'List value with unit Example: 60%',
-      defaultValue: { summary: '' }
-    }
-  }
-};
-
-// const Template = args => { return html `<ptc-icon-list
-// 	is-last-item=${args.isLastItem}
-// 	list-content=${args.listContent}
-// 	list-type=${args.listType}
-// 	value-text=${args.valueText}
-// 	value-with-unit=${args.valueWithUnit}
-// ></ptc-icon-list>`;}
-
-// export const Example = Template.bind({});
-
-// Example.args = {
-//   isLastItem: 'false',
-//   listContent: '',
-//   listType: 'simple-icon-list',
-//   valueText: '',
-//   valueWithUnit: ''
-// }
-
-// ** SimpleListWithIcon **
-
-const SimpleListWithIconTemplate = args => { return html `<ptc-icon-list
-	is-last-item=${args.isLastItem}
-	list-content=${args.listContent}
-	list-type=${args.listType}
-	value-text=${args.valueText}
-	value-with-unit=${args.valueWithUnit}
->
-  <icon-asset slot="icon" type="ptc" size="large" name="icon-3d-cube" color="ptc-green"></icon-asset>
-</ptc-icon-list>`;}
-
-export const SimpleListWithIcon = SimpleListWithIconTemplate.bind({});
-
-SimpleListWithIcon.args = {
-  isLastItem: false,
-  listContent: 'Create precise geometry, regardless of model complexity',
-  listType: 'simple-icon-list',
-  valueText: '',
-  valueWithUnit: ''
-}
-
-// ** StatisticsListWithIcon **
-
-const StatisticsListWithIconTemplate = args => { return html `<ptc-icon-list
-	is-last-item=${args.isLastItem}
-	list-content=${args.listContent}
-	list-type=${args.listType}
-	value-text=${args.valueText}
-	value-with-unit=${args.valueWithUnit}
-></ptc-icon-list>`;}
-
-export const StatisticsListWithIcon = StatisticsListWithIconTemplate.bind({});
-
-StatisticsListWithIcon.args = {
-  isLastItem: false,
-  listContent: 'Increase in Operator Productivity',
-  listType: 'stat-icon-list',
-  valueText: 'up to',
-  valueWithUnit: '60%'
-}
-
-// ** LargeBulletedList **
-
-const LargeBulletedListTemplate = args => { return html `<ptc-icon-list
-	is-last-item=${args.isLastItem}
-	list-content=${args.listContent}
-	list-type=${args.listType}
-	value-text=${args.valueText}
-	value-with-unit=${args.valueWithUnit}
-></ptc-icon-list>`;}
-
-export const LargeBulletedList = LargeBulletedListTemplate.bind({});
-
-LargeBulletedList.args = {
-  isLastItem: false,
-  listContent: 'Powerful concurrent assembly environment enables parallel design activities for large engineering teams.',
-  listType: 'icon-top-align-list',
-  valueText: '',
-  valueWithUnit: ''
-}
+import { html } from 'lit';
+
+export default {
+  title: 'Molecules/ptc-icon-list',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    isLastItem: {
+      control: 'boolean',
+      description: '',
+      defaultValue: { summary: false }
+    },
+    listContent: {
+      control: 'text',
+      description: 'List value with unit Example: Increase in Operator Productivity',
+      defaultValue: { summary: '' }
+    },
+    listType: {
+      control: 'select',
+      options: ['simple-icon-list', 'stat-icon-list', 'icon-top-align-list'],
+      description: 'List item type',
+      defaultValue: { summary: 'simple-icon-list' }
+    },
+    valueText: {
+      control: 'text',
+      description: 'List value text Example: up to',
+      defaultValue: { summary: '' }
+    },
+    valueWithUnit: {
+      control: 'text',
+      description: 'List value with unit Example: 60%',
+      defaultValue: { summary: '' }
+    }
+  }
+};
+
+// const Template = args => { return html `<ptc-icon-list
+// 	is-last-item=${args.isLastItem}
+// 	list-content=${args.listContent}
+// 	list-type=${args.listType}
+// 	value-text=${args.valueText}
+// 	value-with-unit=${args.valueWithUnit}
+// ></ptc-icon-list>`;}
+
+// export const Example = Template.bind({});
+
+// Example.args = {
+//   isLastItem: 'false',
+//   listContent: '',
+//   listType: 'simple-icon-list',
+//   valueText: '',
+//   valueWithUnit: ''
+// }
+
+// ** SimpleListWithIcon **
+
+const SimpleListWithIconTemplate = args => { return html `<ptc-icon-list
+	is-last-item=${args.isLastItem}
+	list-content=${args.listContent}
+	list-type=${args.listType}
+	value-text=${args.valueText}
+	value-with-unit=${args.valueWithUnit}
+>
+  <icon-asset slot="icon" type="ptc" size="large" name="icon-3d-cube" color="ptc-green"></icon-asset>
+</ptc-icon-list>`;}
+
+export const SimpleListWithIcon = SimpleListWithIconTemplate.bind({});
+
+SimpleListWithIcon.args = {
+  isLastItem: false,
+  listContent: 'Create precise geometry, regardless of model complexity',
+  listType: 'simple-icon-list',
+  valueText: '',
+  valueWithUnit: ''
+}
+
+// ** StatisticsListWithIcon **
+
+const StatisticsListWithIconTemplate = args => { return html `<ptc-icon-list
+	is-last-item=${args.isLastItem}
+	list-content=${args.listContent}
+	list-type=${args.listType}
+	value-text=${args.valueText}
+	value-with-unit=${args.valueWithUnit}
+></ptc-icon-list>`;}
+
+export const StatisticsListWithIcon = StatisticsListWithIconTemplate.bind({});
+
+StatisticsListWithIcon.args = {
+  isLastItem: false,
+  listContent: 'Increase in Operator Productivity',
+  listType: 'stat-icon-list',
+  valueText: 'up to',
+  valueWithUnit: '60%'
+}
+
+// ** LargeBulletedList **
+
+const LargeBulletedListTemplate = args => { return html `<ptc-icon-list
+	is-last-item=${args.isLastItem}
+	list-content=${args.listContent}
+	list-type=${args.listType}
+	value-text=${args.valueText}
+	value-with-unit=${args.valueWithUnit}
+></ptc-icon-list>`;}
+
+export const LargeBulletedList = LargeBulletedListTemplate.bind({});
+
+LargeBulletedList.args = {
+  isLastItem: false,
+  listContent: 'Powerful concurrent assembly environment enables parallel design activities for large engineering teams.',
+  listType: 'icon-top-align-list',
+  valueText: '',
+  valueWithUnit: ''
+}