@jumpgroup/jump-design-system 0.1.4 → 0.1.6

package/dist/collection/components/jump-button/jump-button.stories.js

@@ -1,227 +1,392 @@
 import feather from "feather-icons";
 export default {
-  title: 'Components/Atoms/Button',
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      name: 'Etichetta',
-      description: 'Imposta il testo del bottone',
-      control: 'text'
-    },
-    variant: {
-      name: 'Variante',
-      description: 'Imposta la variante di colore del bottone',
-      control: 'select',
-      options: [
-        'primary',
-        'secondary'
-      ],
-    },
-    outline: {
-      name: 'Outline',
-      description: 'Imposta se il bottone deve avere il solo bordo',
-      control: 'boolean'
-    },
-    size: {
-      name: 'Dimensione',
-      description: 'Imposta la dimensione del bottone',
-      control: 'select',
-      options: [
-        'small',
-        'medium',
-        'large'
-      ],
-      labels: {
-        small: 'Piccolo',
-        medium: 'Medio',
-        large: 'Grande'
-      }
-    },
-    pill: {
-      name: 'Bordo a Pillola',
-      description: 'Imposta se il bottone deve avere il bordo completamente stondato a pillola',
-      control: 'boolean'
-    },
-    disabled: {
-      name: 'Disabilitato',
-      description: 'Imposta se il bottone deve essere disabilitato',
-      control: 'boolean'
-    },
-    text: {
-      name: 'Testo',
-      description: 'Imposta se il bottone essere solo testo, quindi senza bordo, sfondo e padding',
-      control: 'boolean'
-    },
-    showIcon: {
-      name: 'Mostra Icona',
-      description: 'Imposta se il bottone deve mostrare un\'icona',
-      control: 'boolean'
-    },
-    iconOnly: {
-      name: 'Mostra solo Icona',
-      description: 'Imposta se il bottone deve mostrare solo l\'icona',
-      control: 'boolean',
-      if: {
-        arg: 'showIcon',
-        eq: true
-      },
-    },
-    iconName: {
-      name: 'Nome Icona',
-      control: 'select',
-      options: Object.keys(feather.icons),
-      description: 'Seleziona il nome dell\'icona dal menu a tendina',
-      defaultValue: Object.keys(feather.icons)[0],
-      if: {
-        arg: 'showIcon',
-        eq: true
-      },
-    },
-    iconPosition: {
-      name: 'Posizione Icona',
-      description: 'Imposta la posizione dell\'icona',
-      defaultValue: 'left',
-      control: 'select',
-      options: [
-        'left',
-        'right'
-      ],
-      if: {
-        arg: 'showIcon',
-        eq: true
-      },
-      labels: {
-        left: 'Sinistra',
-        right: 'Destra'
-      }
+    title: 'Components/Atoms/Button',
+    tags: ['autodocs'],
+    argTypes: {
+        label: {
+            name: 'Etichetta',
+            description: 'Imposta il testo del bottone',
+            control: 'text'
+        },
+        variant: {
+            name: 'Variante',
+            description: 'Imposta la variante di colore del bottone',
+            control: 'select',
+            options: [
+                'primary',
+                'secondary'
+            ],
+        },
+        outline: {
+            name: 'Outline',
+            description: 'Imposta se il bottone deve avere il solo bordo',
+            control: 'boolean'
+        },
+        size: {
+            name: 'Dimensione',
+            description: 'Imposta la dimensione del bottone',
+            control: 'select',
+            options: [
+                'small',
+                'medium',
+                'large'
+            ],
+            labels: {
+                small: 'Piccolo',
+                medium: 'Medio',
+                large: 'Grande'
+            }
+        },
+        pill: {
+            name: 'Bordo a Pillola',
+            description: 'Imposta se il bottone deve avere il bordo completamente stondato a pillola',
+            control: 'boolean'
+        },
+        disabled: {
+            name: 'Disabilitato',
+            description: 'Imposta se il bottone deve essere disabilitato',
+            control: 'boolean'
+        },
+        text: {
+            name: 'Testo',
+            description: 'Imposta se il bottone è solo testo, quindi senza bordo, sfondo e padding',
+            control: 'boolean'
+        },
+        showIcon: {
+            name: 'Mostra Icona',
+            description: 'Imposta se il bottone deve mostrare un\'icona',
+            control: 'boolean'
+        },
+        iconOnly: {
+            name: 'Mostra solo Icona',
+            description: 'Imposta se il bottone deve mostrare solo l\'icona',
+            control: 'boolean',
+            if: {
+                arg: 'showIcon',
+                eq: true
+            },
+        },
+        iconName: {
+            name: 'Nome Icona',
+            control: 'select',
+            options: Object.keys(feather.icons),
+            description: 'Seleziona il nome dell\'icona dal menu a tendina',
+            defaultValue: Object.keys(feather.icons)[0],
+            if: {
+                arg: 'showIcon',
+                eq: true
+            },
+        },
+        iconPosition: {
+            name: 'Posizione Icona',
+            description: 'Imposta la posizione dell\'icona',
+            defaultValue: 'left',
+            control: 'select',
+            options: [
+                'left',
+                'right'
+            ],
+            if: {
+                arg: 'showIcon',
+                eq: true
+            },
+            labels: {
+                left: 'Sinistra',
+                right: 'Destra'
+            }
+        },
+        type: {
+            name: 'Tipo di bottone',
+            description: 'Imposta il tipo di bottone',
+            default: 'button',
+            control: 'select',
+            if: {
+                arg: 'href',
+                exists: false
+            },
+            options: [
+                'button',
+                'submit',
+                'reset'
+            ],
+            labels: {
+                button: 'button',
+                submit: 'submit',
+                reset: 'reset',
+            }
+        },
+        name: {
+            name: 'Nome del bottone',
+            description: 'Imposta il nome del bottone',
+            control: 'text',
+            if: {
+                arg: 'href',
+                exists: false
+            }
+        },
+        value: {
+            name: 'Value del bottone',
+            description: 'Imposta il value del bottone',
+            control: 'text',
+            if: {
+                arg: 'href',
+                exists: false
+            }
+        },
+        ariaLabel: {
+            name: 'Aria Label',
+            description: 'Imposta aria label',
+            control: 'text',
+        },
+        href: {
+            name: 'Href',
+            description: 'Imposta l\'href del link',
+            control: 'text',
+        },
+        target: {
+            name: 'Target',
+            description: 'Imposta il target del link',
+            default: '_self',
+            control: 'select',
+            if: {
+                arg: 'href',
+                exists: true
+            },
+            options: [
+                '_blank',
+                '_parent',
+                '_self',
+                '_top'
+            ],
+            labels: {
+                _blank: '_blank',
+                _parent: '_parent',
+                _self: '_self',
+                _top: '_top'
+            }
+        },
     }
-  }
 };
-// regular expression to remove all the spaces indenting the template string
-const Template = (args) => `${!args.label && !args.showIcon ? 'Errore nella configurazione del bottone' :
-  `<jump-button variant="${args.variant}" size="${args.size}"${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}${!args.label || args.iconOnly ? ' only-icon' : ''}>
-  ${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}
-  ${!args.iconOnly ? args.label : ''}
-  ${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}
-  </jump-button>`.replace(/\s\s+/g, '')}`;
+// TODO: non far passare gli undefined
+const Anchor = (args) => {
+    return `<jump-button class="${args.class} "variant="${args.variant}" size="${args.size}" href="${args.href}" target="${args.target}" ariaLabel="${args.ariaLabel}" ${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}${!args.label || args.iconOnly ? ' only-icon' : ''}>${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}${!args.iconOnly ? args.label : ''}${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}</jump-button>`;
+};
+const Button = (args) => {
+    return `<jump-button class="${args.class} "variant="${args.variant}" size="${args.size}" type="${args.type}" ariaLabel="${args.ariaLabel}" name="${args.name}" value="${args.value}" ${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''} ${!args.label || args.iconOnly ? ' only-icon' : ''}>${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}${!args.iconOnly ? args.label : ''}${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}</jump-button>`;
+};
+const Template = (args) => `${args.href ? Anchor(args) : !args.label && !args.showIcon ? 'Errore nella configurazione del bottone' : Button(args)}`;
+// TODO: gestire la prop che è opzione: cmq se copio il codice e tolgo le props undefined dovrebbe andare tutto
 export const Primary = Template.bind({});
 Primary.args = {
-  label: 'Primary',
-  variant: 'primary',
-  outline: false,
-  pill: false,
-  size: 'medium',
-  disabled: false,
-  text: false,
-  showIcon: false,
-  iconOnly: false,
-  iconName: Object.keys(feather.icons)[0],
-  iconPosition: 'left'
+    label: 'Primary',
+    variant: 'primary',
+    outline: false,
+    pill: false,
+    size: 'medium',
+    disabled: false,
+    text: false,
+    showIcon: false,
+    iconOnly: false,
+    iconName: Object.keys(feather.icons)[0],
+    iconPosition: 'left',
+    type: 'button',
+    name: 'nome bottone',
+    value: 'value bottone',
+    ariaLabel: 'sono un bottone'
 };
 export const OutlinePrimary = Template.bind({});
 OutlinePrimary.args = {
-  label: 'Outline Primary',
-  variant: 'primary',
-  outline: true,
-  pill: false,
-  size: 'medium',
-  disabled: false,
-  text: false,
-  showIcon: false,
-  iconOnly: false,
-  iconName: Object.keys(feather.icons)[0],
-  iconPosition: 'left'
+    label: 'Outline Primary',
+    variant: 'primary',
+    outline: true,
+    pill: false,
+    size: 'medium',
+    disabled: false,
+    text: false,
+    showIcon: false,
+    iconOnly: false,
+    iconName: Object.keys(feather.icons)[0],
+    iconPosition: 'left',
+    type: 'button',
+    name: 'nome bottone',
+    value: 'value bottone',
+    ariaLabel: 'sono un bottone'
 };
 export const PillPrimary = Template.bind({});
 PillPrimary.args = {
-  label: 'Pill Primary',
-  variant: 'primary',
-  outline: false,
-  pill: true,
-  size: 'medium',
-  disabled: false,
-  text: false,
-  showIcon: false,
-  iconOnly: false,
-  iconName: Object.keys(feather.icons)[0],
-  iconPosition: 'left'
+    label: 'Pill Primary',
+    variant: 'primary',
+    outline: false,
+    pill: true,
+    size: 'medium',
+    disabled: false,
+    text: false,
+    showIcon: false,
+    iconOnly: false,
+    iconName: Object.keys(feather.icons)[0],
+    iconPosition: 'left',
+    type: 'button',
+    name: 'nome bottone',
+    value: 'value bottone',
+    ariaLabel: 'sono un bottone'
 };
 export const OutlinePillPrimary = Template.bind({});
 OutlinePillPrimary.args = {
-  label: 'Pill Primary',
-  variant: 'primary',
-  outline: true,
-  pill: true,
-  size: 'medium',
-  disabled: false,
-  text: false,
-  showIcon: false,
-  iconOnly: false,
-  iconName: Object.keys(feather.icons)[0],
-  iconPosition: 'left'
+    label: 'Pill Primary',
+    variant: 'primary',
+    outline: true,
+    pill: true,
+    size: 'medium',
+    disabled: false,
+    text: false,
+    showIcon: false,
+    iconOnly: false,
+    iconName: Object.keys(feather.icons)[0],
+    iconPosition: 'left',
+    type: 'button',
+    name: 'nome bottone',
+    value: 'value bottone',
+    ariaLabel: 'sono un bottone'
 };
 export const Disabled = Template.bind({});
 Disabled.args = {
-  label: 'Disabled',
-  variant: 'primary',
-  outline: false,
-  pill: false,
-  size: 'medium',
-  disabled: true,
-  text: false,
-  showIcon: false,
-  iconOnly: false,
-  iconName: Object.keys(feather.icons)[0],
-  iconPosition: 'left'
+    label: 'Disabled',
+    variant: 'primary',
+    outline: false,
+    pill: false,
+    size: 'medium',
+    disabled: true,
+    text: false,
+    showIcon: false,
+    iconOnly: false,
+    iconName: Object.keys(feather.icons)[0],
+    iconPosition: 'left',
+    type: 'button',
+    name: 'nome bottone',
+    value: 'value bottone',
+    ariaLabel: 'sono un bottone'
+};
+export const TextSecondary = Template.bind({});
+TextSecondary.args = {
+    label: 'Button Text',
+    variant: 'secondary',
+    outline: false,
+    pill: false,
+    size: 'medium',
+    disabled: false,
+    text: true,
+    showIcon: false,
+    iconOnly: false,
+    iconName: Object.keys(feather.icons)[0],
+    iconPosition: 'left',
+    type: 'button',
+    name: 'nome bottone',
+    value: 'value bottone',
+    ariaLabel: 'sono un bottone'
+};
+export const CustomButton = Template.bind({});
+CustomButton.args = {
+    label: 'Sono un bottone custom',
+    outline: false,
+    pill: true,
+    size: 'small',
+    disabled: false,
+    text: false,
+    showIcon: true,
+    iconOnly: false,
+    iconName: 'message-circle',
+    iconPosition: 'left',
+    type: 'button',
+    name: 'nome bottone',
+    value: 'value bottone',
+    ariaLabel: 'sono un bottone',
+    class: 'chat'
+};
+// const TemplateOriginalWithIcon = (args) => `<jump-button variant="${args.variant}" size="${args.size}" type="${args.type}" ariaLabel="${args.ariaLabel}" name="${args.name}" value="${args.value}" ${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}>${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''${args.label${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}</jump-button>`;
+const TemplateWithIcon = (args) => `<jump-button variant="${args.variant}" size="${args.size}" type="${args.type}" ariaLabel="${args.ariaLabel}" name="${args.name}" value="${args.value}" ${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}> ${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}${args.label}${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}</jump-button>`;
+export const ButtonWithIcon = TemplateWithIcon.bind({});
+ButtonWithIcon.args = {
+    label: 'Primary',
+    variant: 'primary',
+    outline: false,
+    pill: false,
+    size: 'medium',
+    disabled: false,
+    text: false,
+    showIcon: true,
+    iconName: 'home',
+    iconPosition: 'left',
+    type: 'button',
+    name: 'nome bottone',
+    value: 'value bottone',
+    ariaLabel: 'sono un bottone'
+};
+// const Template2WithOnlyIcon = (args) => `<jump-button variant="${args.variant}" size="${args.size}"${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}
+// ${ !args.label ? ' only-icon' : ''}>${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}${args.label}${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}</jump-button>`;
+const TemplateWithOnlyIcon = (args) => `<jump-button 
+  variant="${args.variant}" 
+  size="${args.size}" 
+  type="${args.type}" 
+  ariaLabel="${args.ariaLabel}" 
+  name="${args.name}" 
+  value="${args.value}" 
+  ${args.disabled == true ? ' disabled' : ''}
+  ${args.pill == true ? ' pill' : ''}
+  ${args.outline == true ? ' outline' : ''}
+  ${args.text == true ? ' text' : ''}
+  ${!args.label ? ' only-icon' : ''}>
+
+    ${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}
+    ${args.label}
+    ${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}
+    
+  </jump-button>`;
+export const ButtonWithOnlyIcon = TemplateWithOnlyIcon.bind({});
+ButtonWithOnlyIcon.args = {
+    label: '',
+    variant: 'primary',
+    outline: false,
+    pill: true,
+    size: 'medium',
+    disabled: false,
+    text: false,
+    showIcon: true,
+    iconName: 'home',
+    iconPosition: 'left',
+    type: 'button',
+    name: 'nome bottone',
+    value: 'value bottone',
+    ariaLabel: 'sono un bottone'
+};
+export const Link = Template.bind({});
+Link.args = {
+    label: 'Link',
+    variant: 'primary',
+    outline: false,
+    pill: false,
+    size: 'medium',
+    disabled: false,
+    text: true,
+    showIcon: false,
+    iconOnly: false,
+    iconName: Object.keys(feather.icons)[0],
+    iconPosition: 'left',
+    href: 'www.jumpgroup.it',
+    target: '_blank',
 };
-export const Text = Template.bind({});
-Text.args = {
-  label: 'Text',
-  variant: 'secondary',
-  outline: false,
-  pill: false,
-  size: 'medium',
-  disabled: false,
-  text: true,
-  showIcon: false,
-  iconOnly: false,
-  iconName: Object.keys(feather.icons)[0],
-  iconPosition: 'left'
+export const AnchorWithIcon = TemplateWithIcon.bind({});
+AnchorWithIcon.args = {
+    label: 'Link with icon',
+    variant: 'primary',
+    outline: false,
+    pill: false,
+    size: 'medium',
+    disabled: false,
+    text: true,
+    showIcon: true,
+    iconName: 'arrow-right',
+    iconPosition: 'right',
+    href: 'www.google.it',
+    ariaLabel: 'sono un bottone'
 };
-// const TemplateWithIcon = (args) => `<jump-button variant="${args.variant}" size="${args.size}"${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}>
-//   ${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}
-//   ${args.label}
-//   ${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}
-// </jump-button>`;
-// export const WithIcon = TemplateWithIcon.bind({});
-// WithIcon.args = {
-//   label: 'Primary',
-//   variant: 'primary',
-//   outline: false,
-//   pill: false,
-//   size: 'medium',
-//   disabled: false,
-//   text: false,
-//   showIcon: true,
-//   iconName: 'home',
-//   iconPosition: 'left'
-// };
-// const TemplateWithOnlyIcon = (args) => `<jump-button variant="${args.variant}" size="${args.size}"${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}${ !args.label ? ' only-icon' : ''}>
-//   ${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}
-//   ${args.label}
-//   ${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}
-// </jump-button>`;
-// export const WithOnlyIcon = TemplateWithOnlyIcon.bind({});
-// WithOnlyIcon.args = {
-//   label: '',
-//   variant: 'primary',
-//   outline: false,
-//   pill: true,
-//   size: 'medium',
-//   disabled: false,
-//   text: false,
-//   showIcon: true,
-//   iconName: 'home',
-//   iconPosition: 'left',
-// };
 //# sourceMappingURL=jump-button.stories.js.map