@ptcwebops/ptcw-design 2.2.0 → 2.2.2

package/dist/collection/stories/Title.stories.js

@@ -1,115 +1,115 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Atoms/ptc-title',
-  tags: ['autodocs'],
-
-  argTypes: {
-    type: {
-      control: { type: 'inline-radio' },
-      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-      description: 'H tag',
-      defaultValue: { summary: 'h2' },
-    },
-    textAlign: {
-      control: { type: 'inline-radio' },
-      options: ['left', 'center', 'right', 'inherit'],
-      description: 'Title alignment',
-    },
-    titleDisplay: {
-      control: { type: 'select' },
-      options: ['block', 'inline-block'],
-      description: 'Title heading display',
-      defaultValue: { summary: 'inline-block' },
-    },
-    titleSize: {
-      control: { type: 'select' },
-      options: [
-        'xx-small',
-        'x-small',
-        'small',
-        'medium',
-        'large',
-        'x-large',
-        'xx-large',
-        'xxx-large',
-        'xxxx-large',
-        'xxxx-large-allbp',
-        'xx-large-allbp',
-        'xxxx-large-desktop',
-        'xxxx-large-store',
-      ],
-      description: 'Title size',
-    },
-    titleColor: {
-      control: { type: 'select' },
-      options: ['black', 'white', 'gray', 'gray-darker', 'gray-1'],
-      description: 'Title color',
-      defaultValue: { summary: 'gray' },
-    },
-    upperline: {
-      control: { type: 'inline-radio' },
-      options: ['dotted', 'solid', 'no-upperline'],
-      description: 'The style of the decorative upperline',
-      defaultValue: { summary: 'dotted' },
-    },
-    titleShadow: {
-      control: { type: 'inline-radio' },
-      options: ['blue', 'red', 'green', 'orange', 'slate-grey'],
-      description: 'Shadow Color',
-    },
-    titleHeight: {
-      control: { type: 'select' },
-      options: ['densest', 'denser', 'dense', 'normal', 'loose', 'looser', 'paragraph'],
-      description: 'Title Height',
-      defaultValue: { summary: 'paragraph' },
-    },
-    titleWeight: {
-      control: { type: 'select' },
-      options: ['w-3', 'w-4', 'w-5', 'w-6', 'w-7', 'w-8', 'w-9'],
-      description: 'Title Weight',
-    },
-    titleMargin: {
-        control: {type: 'select'},
-        options: ['margin-flush' ,'margin-top-3', 'margin-top-4', 'margin-top-5', 'margin-top-6', 'margin-bottom-3', 'margin-bottom-4', 'margin-bottom-5', 'margin-bottom-6', 'margin-3', 'margin-4', 'margin-5', 'margin-6'],
-        description: 'title margins'
-    },
-    isPlmHub: {
-        description: "is it a title for PLM Hub page?",
-        defaultValue: {summary: false}
-    }
-  },
-};
-
-const Template = args => {
-  return html`<ptc-title
-    type="${args.type}"
-    text-align="${args.textAlign}"
-    title-size="${args.titleSize}"
-    title-color="${args.titleColor}"
-    upperline="${args.upperline}"
-    title-display="${args.titleDisplay}"
-    title-shadow="${args.titleShadow}"
-    title-height="${args.titleHeight}"
-    title-margin="${args.titleMargin}"
-    title-weight="${args.titleWeight}"
-    is-plm-hub="${args.isPlmHub}"
-  >
-    Title Example
-  </ptc-title>`;
-};
-
-export const Example = Template.bind({});
-Example.args = {
-  type: 'h2',
-  titleDisplay: 'inline-block',
-  titleSize: 'x-large',
-  textAlign: 'center',
-  titleHeight: 'densest',
-  titleMargin: 'margin-3',
-  titleColor: 'gray',
-  upperline: 'no-upperline',
-  titleWeight: 'w-8',
-  titleShadow: '',
-  isPlmHub: false,
-};
+import { html } from 'lit';
+
+export default {
+  title: 'Atoms/ptc-title',
+  tags: ['autodocs'],
+
+  argTypes: {
+    type: {
+      control: { type: 'inline-radio' },
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      description: 'H tag',
+      defaultValue: { summary: 'h2' },
+    },
+    textAlign: {
+      control: { type: 'inline-radio' },
+      options: ['left', 'center', 'right', 'inherit'],
+      description: 'Title alignment',
+    },
+    titleDisplay: {
+      control: { type: 'select' },
+      options: ['block', 'inline-block'],
+      description: 'Title heading display',
+      defaultValue: { summary: 'inline-block' },
+    },
+    titleSize: {
+      control: { type: 'select' },
+      options: [
+        'xx-small',
+        'x-small',
+        'small',
+        'medium',
+        'large',
+        'x-large',
+        'xx-large',
+        'xxx-large',
+        'xxxx-large',
+        'xxxx-large-allbp',
+        'xx-large-allbp',
+        'xxxx-large-desktop',
+        'xxxx-large-store',
+      ],
+      description: 'Title size',
+    },
+    titleColor: {
+      control: { type: 'select' },
+      options: ['black', 'white', 'gray', 'gray-darker', 'gray-1'],
+      description: 'Title color',
+      defaultValue: { summary: 'gray' },
+    },
+    upperline: {
+      control: { type: 'inline-radio' },
+      options: ['dotted', 'solid', 'no-upperline'],
+      description: 'The style of the decorative upperline',
+      defaultValue: { summary: 'dotted' },
+    },
+    titleShadow: {
+      control: { type: 'inline-radio' },
+      options: ['blue', 'red', 'green', 'orange', 'slate-grey'],
+      description: 'Shadow Color',
+    },
+    titleHeight: {
+      control: { type: 'select' },
+      options: ['densest', 'denser', 'dense', 'normal', 'loose', 'looser', 'paragraph'],
+      description: 'Title Height',
+      defaultValue: { summary: 'paragraph' },
+    },
+    titleWeight: {
+      control: { type: 'select' },
+      options: ['w-3', 'w-4', 'w-5', 'w-6', 'w-7', 'w-8', 'w-9'],
+      description: 'Title Weight',
+    },
+    titleMargin: {
+        control: {type: 'select'},
+        options: ['margin-flush' ,'margin-top-3', 'margin-top-4', 'margin-top-5', 'margin-top-6', 'margin-bottom-3', 'margin-bottom-4', 'margin-bottom-5', 'margin-bottom-6', 'margin-3', 'margin-4', 'margin-5', 'margin-6'],
+        description: 'title margins'
+    },
+    isPlmHub: {
+        description: "is it a title for PLM Hub page?",
+        defaultValue: {summary: false}
+    }
+  },
+};
+
+const Template = args => {
+  return html`<ptc-title
+    type="${args.type}"
+    text-align="${args.textAlign}"
+    title-size="${args.titleSize}"
+    title-color="${args.titleColor}"
+    upperline="${args.upperline}"
+    title-display="${args.titleDisplay}"
+    title-shadow="${args.titleShadow}"
+    title-height="${args.titleHeight}"
+    title-margin="${args.titleMargin}"
+    title-weight="${args.titleWeight}"
+    is-plm-hub="${args.isPlmHub}"
+  >
+    Title Example
+  </ptc-title>`;
+};
+
+export const Example = Template.bind({});
+Example.args = {
+  type: 'h2',
+  titleDisplay: 'inline-block',
+  titleSize: 'x-large',
+  textAlign: 'center',
+  titleHeight: 'densest',
+  titleMargin: 'margin-3',
+  titleColor: 'gray',
+  upperline: 'no-upperline',
+  titleWeight: 'w-8',
+  titleShadow: '',
+  isPlmHub: false,
+};

package/dist/collection/stories/Tooltip.stories.js

@@ -1,112 +1,112 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Atoms/ptc-tooltip',
-  tags: ['autodocs'],
-  argTypes: {
-    textLines: {
-      name: 'Maximum lines',
-      description: "Set maximum length in lines of content",
-
-    },
-    maxLength: {
-      name: 'Maximum chars',
-      description: "Set maximum length in chars of content",
-      defaultValue: { summary: 45 }
-    },
-    position: {
-      name: 'Position',
-      description: "Set position of the the tooltip box",
-      control: { type: 'select' },
-      options: ['left', 'right', 'bottom', 'bottom-right', 'top'],
-      defaultValue: { summary: 'bottom' }
-    },
-    width: {
-      name: 'width',
-      description: "Fill-width will make the tooltip box full-width relative to its parent",
-      control: { type: 'select' },
-      options: ['full-width', 'default'],
-      defaultValue: { summary: 'default' }
-
-    },
-    theme: {
-      name: 'Theme',
-      description: "Set the theme",
-      control: { type: 'select' },
-      options: ['standard', 'danger'],
-      defaultValue: { summary: 'standard' },
-    },
-    zIndex: {
-      name: 'zIndex',
-      description: "Set the zIndex of tooltip box",
-      control: { type: 'select' },
-      options: ['z-auto', 'z-1', 'z-2', 'z-3', 'z-999'],
-      defaultValue: { summary: 'z-auto' },
-    },
-    hideOnMobile: {
-      name: 'Hide tooltip box on mobile',
-      description: "Set true to hide the tooltip on mobile",
-      control: { type: 'boolean' },
-      defaultValue: { summary: false },
-    },
-    textDisplay: {
-      name: 'Text Display css property',
-      description: "Set textDisplay propety inline or block for tooltip text",
-      control: { type: 'select' },
-      options: ['inline', 'block'],
-      defaultValue: { summary: 'inline' },
-    },
-    description: {
-      name: 'Tooltip content',
-      description: "Set content in the follwing textarea",
-      defaultValue: { summary: 'This is a tooltip text placeholder' },
-    },
-
-  }
-};
-
-const Template = args => {
-  return html  `<ptc-tooltip
-  text-display="${args.textDisplay}"
-  text-lines="${args.textLines}"
-  max-length="${args.maxLength}"
-  description="${args.description}"
-  position="${args.position}"
-  width="${args.width}"
-  zIndex="${args.zIndex}"
-  theme="${args.theme}"
-  hide-on-mobile="${args.hideOnMobile}"
-  ></ptc-tooltip>`
-};
-
-
-export const TooltipWithLinesLimit = Template.bind({});
-TooltipWithLinesLimit.args = {
-  textLines: 2,
-  position: 'bottom',
-  width: "default",
-  theme: "standard",
-  hideOnMobile: false,
-  zIndex: "z-auto",
-  textDisplay: "inline",
-  description: "Nulla ut nunc id nulla aliquam feugiat. Maecenas quis dui rhoncus, mattis risus ac, tincidunt massa. Cras dictum aliquet eleifend. Etiam condimentum suscipit vulputate. In tempus ante at eros elementum volutpat. Ut aliquam mattis velit, sed malesuada lorem. Donec eu posuere nisl, eget scelerisque lectus. Donec id nibh quis lectus euismod semper eget in sem. Ut vulputate cursus libero ut pharetra. Aliquam convallis vulputate dignissim. Mauris vel elit sit amet nibh porta cursus eu id urna.",
-
-}
-
-
-export const TooltipWithCharLimit = Template.bind({});
-TooltipWithCharLimit.args = {
-  maxLength: 45,
-  position: 'bottom',
-  width: "default",
-  theme: "standard",
-  hideOnMobile: false,
-  zIndex: "z-auto",
-  textDisplay: "inline",
-  description: "Nulla ut nunc id nulla aliquam feugiat. Maecenas quis dui rhoncus, mattis risus ac, tincidunt massa. Cras dictum ",
-
-}
-
-
-
-
+import { html } from 'lit';
+
+export default {
+  title: 'Atoms/ptc-tooltip',
+  tags: ['autodocs'],
+  argTypes: {
+    textLines: {
+      name: 'Maximum lines',
+      description: "Set maximum length in lines of content",
+
+    },
+    maxLength: {
+      name: 'Maximum chars',
+      description: "Set maximum length in chars of content",
+      defaultValue: { summary: 45 }
+    },
+    position: {
+      name: 'Position',
+      description: "Set position of the the tooltip box",
+      control: { type: 'select' },
+      options: ['left', 'right', 'bottom', 'bottom-right', 'top'],
+      defaultValue: { summary: 'bottom' }
+    },
+    width: {
+      name: 'width',
+      description: "Fill-width will make the tooltip box full-width relative to its parent",
+      control: { type: 'select' },
+      options: ['full-width', 'default'],
+      defaultValue: { summary: 'default' }
+
+    },
+    theme: {
+      name: 'Theme',
+      description: "Set the theme",
+      control: { type: 'select' },
+      options: ['standard', 'danger'],
+      defaultValue: { summary: 'standard' },
+    },
+    zIndex: {
+      name: 'zIndex',
+      description: "Set the zIndex of tooltip box",
+      control: { type: 'select' },
+      options: ['z-auto', 'z-1', 'z-2', 'z-3', 'z-999'],
+      defaultValue: { summary: 'z-auto' },
+    },
+    hideOnMobile: {
+      name: 'Hide tooltip box on mobile',
+      description: "Set true to hide the tooltip on mobile",
+      control: { type: 'boolean' },
+      defaultValue: { summary: false },
+    },
+    textDisplay: {
+      name: 'Text Display css property',
+      description: "Set textDisplay propety inline or block for tooltip text",
+      control: { type: 'select' },
+      options: ['inline', 'block'],
+      defaultValue: { summary: 'inline' },
+    },
+    description: {
+      name: 'Tooltip content',
+      description: "Set content in the follwing textarea",
+      defaultValue: { summary: 'This is a tooltip text placeholder' },
+    },
+
+  }
+};
+
+const Template = args => {
+  return html  `<ptc-tooltip
+  text-display="${args.textDisplay}"
+  text-lines="${args.textLines}"
+  max-length="${args.maxLength}"
+  description="${args.description}"
+  position="${args.position}"
+  width="${args.width}"
+  zIndex="${args.zIndex}"
+  theme="${args.theme}"
+  hide-on-mobile="${args.hideOnMobile}"
+  ></ptc-tooltip>`
+};
+
+
+export const TooltipWithLinesLimit = Template.bind({});
+TooltipWithLinesLimit.args = {
+  textLines: 2,
+  position: 'bottom',
+  width: "default",
+  theme: "standard",
+  hideOnMobile: false,
+  zIndex: "z-auto",
+  textDisplay: "inline",
+  description: "Nulla ut nunc id nulla aliquam feugiat. Maecenas quis dui rhoncus, mattis risus ac, tincidunt massa. Cras dictum aliquet eleifend. Etiam condimentum suscipit vulputate. In tempus ante at eros elementum volutpat. Ut aliquam mattis velit, sed malesuada lorem. Donec eu posuere nisl, eget scelerisque lectus. Donec id nibh quis lectus euismod semper eget in sem. Ut vulputate cursus libero ut pharetra. Aliquam convallis vulputate dignissim. Mauris vel elit sit amet nibh porta cursus eu id urna.",
+
+}
+
+
+export const TooltipWithCharLimit = Template.bind({});
+TooltipWithCharLimit.args = {
+  maxLength: 45,
+  position: 'bottom',
+  width: "default",
+  theme: "standard",
+  hideOnMobile: false,
+  zIndex: "z-auto",
+  textDisplay: "inline",
+  description: "Nulla ut nunc id nulla aliquam feugiat. Maecenas quis dui rhoncus, mattis risus ac, tincidunt massa. Cras dictum ",
+
+}
+
+
+
+

package/dist/collection/utils/component.js

@@ -1,3 +1,3 @@
-export const hasSlot = (parentEl, slotName) => {
-  return !!parentEl.querySelector(':scope > [slot="' + slotName + '"'); // cast boolean
-};
+export const hasSlot = (parentEl, slotName) => {
+  return !!parentEl.querySelector(':scope > [slot="' + slotName + '"'); // cast boolean
+};

package/dist/collection/utils/interfaces.js

@@ -1,11 +1,11 @@
-let ResponsiveBgVariables = {
-  envs: ['xs', 'sm', 'md', 'lg'],
-  selector: '.ptc-img',
-  interval: 250
-};
-let ResponsivePictureVariables = {
-  envs: ['xs', 'sm', 'md', 'lg'],
-  selector: '.ptc-picture',
-  interval: 250
-};
-export { ResponsiveBgVariables, ResponsivePictureVariables };
+let ResponsiveBgVariables = {
+  envs: ['xs', 'sm', 'md', 'lg'],
+  selector: '.ptc-img',
+  interval: 250
+};
+let ResponsivePictureVariables = {
+  envs: ['xs', 'sm', 'md', 'lg'],
+  selector: '.ptc-picture',
+  interval: 250
+};
+export { ResponsiveBgVariables, ResponsivePictureVariables };