@jumpgroup/jump-design-system 0.2.2 → 0.2.3

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

@@ -0,0 +1,236 @@
+import feather from "feather-icons";
+import { generateAttributesFromArgs } from "../../utils/utils";
+export default {
+    title: 'Components/Button/Dimension',
+    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',
+                'neutral',
+                'white'
+            ],
+        },
+        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'
+            }
+        },
+        id: {
+            name: 'ID',
+            description: 'Imposta l\'id del bottone',
+            control: 'text'
+        },
+    }
+};
+const Template = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return `<jump-button ${attributes} ${!args.label ? ' 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>`;
+};
+export const Small = Template.bind({});
+Small.args = {
+    label: 'Small',
+    variant: 'primary',
+    outline: false,
+    pill: false,
+    size: 'small',
+    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 Medium = Template.bind({});
+Medium.args = {
+    label: 'Medium',
+    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 Large = Template.bind({});
+Large.args = {
+    label: 'Large',
+    variant: 'primary',
+    outline: false,
+    pill: false,
+    size: 'large',
+    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'
+};
+//# sourceMappingURL=jump-button-dimension.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jump-button-dimension.stories.js","sourceRoot":"","sources":["../../../src/components/jump-button/jump-button-dimension.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import feather from 'feather-icons';\nimport { generateAttributesFromArgs} from '../../utils/utils';\n\nexport default {\n  title: 'Components/Button/Dimension',\n  tags: ['autodocs'],\n  argTypes: {\n    label: {\n      name: 'Etichetta',\n      description: 'Imposta il testo del bottone',\n      control: 'text'\n    },\n    variant: {\n      name: 'Variante',\n      description: 'Imposta la variante di colore del bottone',\n      control: 'select',\n      options: [\n        'primary',\n        'secondary',\n        'neutral',\n        'white'\n      ],\n    },\n    outline : {\n      name: 'Outline',\n      description: 'Imposta se il bottone deve avere il solo bordo',\n      control: 'boolean'\n    },\n    size: {\n      name: 'Dimensione',\n      description: 'Imposta la dimensione del bottone',\n      control: 'select',\n      options: [\n        'small',\n        'medium',\n        'large'\n      ],\n      labels: {\n        small: 'Piccolo',\n        medium: 'Medio',\n        large: 'Grande'\n      }\n    },\n    pill: {\n      name: 'Bordo a Pillola',\n      description: 'Imposta se il bottone deve avere il bordo completamente stondato a pillola',\n      control: 'boolean'\n    },\n    disabled: {\n      name: 'Disabilitato',\n      description: 'Imposta se il bottone deve essere disabilitato',\n      control: 'boolean'\n    },\n    text: {\n      name: 'Testo',\n      description: 'Imposta se il bottone è solo testo, quindi senza bordo, sfondo e padding',\n      control: 'boolean'\n    },\n    showIcon: {\n      name: 'Mostra Icona',\n      description: 'Imposta se il bottone deve mostrare un\\'icona',\n      control: 'boolean'\n    },\n    iconOnly: {\n      name: 'Mostra solo Icona',\n      description: 'Imposta se il bottone deve mostrare solo l\\'icona',\n      control: 'boolean',\n      if: {\n        arg: 'showIcon',\n        eq: true\n      },\n    },\n    iconName: {\n      name: 'Nome Icona',\n      control: 'select',\n      options: Object.keys(feather.icons),\n      description: 'Seleziona il nome dell\\'icona dal menu a tendina',\n      defaultValue: Object.keys(feather.icons)[0],\n      if: {\n        arg: 'showIcon',\n        eq: true\n      },\n    },\n    iconPosition: {\n      name: 'Posizione Icona',\n      description: 'Imposta la posizione dell\\'icona',\n      defaultValue: 'left',\n      control: 'select',\n      options: [\n        'left',\n        'right'\n      ],\n      if: {\n        arg: 'showIcon',\n        eq: true\n      },\n      labels: {\n        left: 'Sinistra',\n        right: 'Destra'\n      }\n    },\n    type: {\n      name: 'Tipo di bottone',\n      description: 'Imposta il tipo di bottone',\n      default: 'button',\n      control: 'select',\n      if:{\n        arg: 'href',\n        exists: false\n      },\n      options: [\n        'button',\n        'submit',\n        'reset'\n      ],\n      labels: {\n        button: 'button',\n        submit: 'submit',\n        reset: 'reset',\n      }\n    },\n    name: {\n      name: 'Nome del bottone',\n      description: 'Imposta il nome del bottone',\n      control: 'text',\n      if:{\n        arg: 'href',\n        exists: false\n      }\n    },\n    value: {\n      name: 'Value del bottone',\n      description: 'Imposta il value del bottone',\n      control: 'text',\n      if:{\n        arg: 'href',\n        exists: false\n      }\n    },\n    ariaLabel: {\n      name: 'Aria Label',\n      description: 'Imposta aria label',\n      control: 'text',\n    },\n    href: {\n      name: 'Href',\n      description: 'Imposta l\\'href del link',\n      control: 'text',\n    },\n    target: {\n      name: 'Target',\n      description: 'Imposta il target del link',\n      default: '_self',\n      control: 'select',\n      if:{\n        arg: 'href',\n        exists: true\n      },\n      options: [\n        '_blank',\n        '_parent',\n        '_self',\n        '_top'\n      ],\n      labels: {\n        _blank: '_blank',\n        _parent: '_parent',\n        _self: '_self',\n        _top: '_top'\n      }\n    },\n    id: {\n      name: 'ID',\n      description: 'Imposta l\\'id del bottone',\n      control: 'text'\n    },\n  }\n};\n\nconst Template = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return `<jump-button ${attributes} ${ !args.label ? ' 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>`\n}\n\nexport const Small = Template.bind({});\nSmall.args = {\n  label: 'Small',\n  variant: 'primary',\n  outline: false,\n  pill: false,\n  size: 'small',\n  disabled: false,\n  text: false,\n  showIcon: false,\n  iconOnly: false,\n  iconName: Object.keys(feather.icons)[0],\n  iconPosition: 'left',\n  type: 'button',\n  name: 'nome bottone',\n  value: 'value bottone',\n  ariaLabel: 'sono un bottone'\n};\n\nexport const Medium = Template.bind({});\nMedium.args = {\n  label: 'Medium',\n  variant: 'primary',\n  outline: false,\n  pill: false,\n  size: 'medium',\n  disabled: false,\n  text: false,\n  showIcon: false,\n  iconOnly: false,\n  iconName: Object.keys(feather.icons)[0],\n  iconPosition: 'left',\n  type: 'button',\n  name: 'nome bottone',\n  value: 'value bottone',\n  ariaLabel: 'sono un bottone'\n};\n\nexport const Large = Template.bind({});\nLarge.args = {\n  label: 'Large',\n  variant: 'primary',\n  outline: false,\n  pill: false,\n  size: 'large',\n  disabled: false,\n  text: false,\n  showIcon: false,\n  iconOnly: false,\n  iconName: Object.keys(feather.icons)[0],\n  iconPosition: 'left',\n  type: 'button',\n  name: 'nome bottone',\n  value: 'value bottone',\n  ariaLabel: 'sono un bottone'\n};\n"]}

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

@@ -1,4 +1,5 @@
 import feather from "feather-icons";
+import { generateAttributesFromArgs } from "../../utils/utils";
 export default {
     title: 'Components/Button/Filled',
     tags: ['autodocs'],
@@ -174,18 +175,10 @@ export default {
         },
     }
 };
-// TODO: non far passare gli undefined
-const Anchor = (args) => {
-    var _a;
-    return `<jump-button id="${args.id}" class="${(_a = args.class) !== null && _a !== void 0 ? _a : ''}" "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 Template = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return `<jump-button ${attributes} ${!args.label ? ' 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) => {
-    var _a;
-    return `<jump-button id="${args.id}" class="${(_a = args.class) !== null && _a !== void 0 ? _a : ''}" "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',
@@ -258,78 +251,6 @@ White.args = {
     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',
-    type: 'button',
-    name: 'nome bottone',
-    value: 'value bottone',
-    ariaLabel: 'sono un bottone'
-};
-export const OutlineSecondary = Template.bind({});
-OutlineSecondary.args = {
-    label: 'Outline Secondary',
-    variant: 'secondary',
-    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 OutlineGrey = Template.bind({});
-OutlineGrey.args = {
-    label: 'Outline Neutral',
-    variant: 'neutral',
-    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 OutlineWhite = Template.bind({});
-OutlineWhite.args = {
-    label: 'Outline White',
-    variant: 'white',
-    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',
@@ -348,98 +269,7 @@ PillPrimary.args = {
     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',
-    type: 'button',
-    name: 'nome bottone',
-    value: 'value bottone',
-    ariaLabel: 'sono un bottone'
-};
-export const TextPrimary = Template.bind({});
-TextPrimary.args = {
-    label: 'Button Text Primary',
-    variant: 'primary',
-    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 TextSecondary = Template.bind({});
-TextSecondary.args = {
-    label: 'Button Text Secondary',
-    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 TextGrey = Template.bind({});
-TextGrey.args = {
-    label: 'Button Text Neutral',
-    variant: 'neutral',
-    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 TextWhite = Template.bind({});
-TextWhite.args = {
-    label: 'Button Text White',
-    variant: 'white',
-    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'
-};
-const TemplateWithIcon = (args) => `<jump-button id="${args.id}" 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.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({});
+export const ButtonWithIcon = Template.bind({});
 ButtonWithIcon.args = {
     label: 'Primary',
     variant: 'primary',
@@ -456,90 +286,6 @@ ButtonWithIcon.args = {
     value: 'value bottone',
     ariaLabel: 'sono un bottone'
 };
-const TemplateWithOnlyIcon = (args) => `<jump-button
-  id="${args.id}"
-  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 ? ' 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 ButtonWithOnlyIconSquare = TemplateWithOnlyIcon.bind({});
-ButtonWithOnlyIconSquare.args = {
-    label: '',
-    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'
-};
-export const ButtonWithOnlyIconPill = TemplateWithOnlyIcon.bind({});
-ButtonWithOnlyIconPill.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 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'
-};
 export const Disabled = Template.bind({});
 Disabled.args = {
     label: 'Disabled',