@jumpgroup/jump-design-system 0.2.2 → 0.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{index-79e97f36.js → index-41aaa52a.js} +181 -11
- package/dist/cjs/index-41aaa52a.js.map +1 -0
- package/dist/cjs/jump-badge.cjs.entry.js +6 -6
- package/dist/cjs/jump-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-button.cjs.entry.js +10 -6
- package/dist/cjs/jump-button.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-card.cjs.entry.js +4 -4
- package/dist/cjs/jump-card.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-design-system.cjs.js +3 -3
- package/dist/cjs/jump-design-system.cjs.js.map +1 -1
- package/dist/cjs/jump-icon.cjs.entry.js +5 -5
- package/dist/cjs/jump-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-pagination.cjs.entry.js +32 -10
- package/dist/cjs/jump-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-tab.cjs.entry.js +29 -0
- package/dist/cjs/jump-tab.cjs.entry.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +5 -4
- package/dist/collection/components/jump-badge/jump-badge.css +1 -1
- package/dist/collection/components/jump-badge/jump-badge.js +4 -4
- package/dist/collection/components/jump-badge/jump-badge.js.map +1 -1
- package/dist/collection/components/jump-badge/test/jump-badge.spec.js +2 -2
- package/dist/collection/components/jump-badge/test/jump-badge.spec.js.map +1 -1
- package/dist/collection/components/jump-button/jump-button-anchor.stories.js +87 -0
- package/dist/collection/components/jump-button/jump-button-anchor.stories.js.map +1 -0
- package/dist/collection/components/jump-button/jump-button-dimension.stories.js +74 -0
- package/dist/collection/components/jump-button/jump-button-dimension.stories.js.map +1 -0
- package/dist/collection/components/jump-button/jump-button-filled.stories.js +14 -482
- package/dist/collection/components/jump-button/jump-button-filled.stories.js.map +1 -1
- package/dist/collection/components/jump-button/jump-button-only-icon.stories.js +109 -0
- package/dist/collection/components/jump-button/jump-button-only-icon.stories.js.map +1 -0
- package/dist/collection/components/jump-button/jump-button-outline.stories.js +20 -285
- package/dist/collection/components/jump-button/jump-button-outline.stories.js.map +1 -1
- package/dist/collection/components/jump-button/jump-button-text.stories.js +83 -0
- package/dist/collection/components/jump-button/jump-button-text.stories.js.map +1 -0
- package/dist/collection/components/jump-button/jump-button.css +103 -50
- package/dist/collection/components/jump-button/jump-button.js +41 -19
- package/dist/collection/components/jump-button/jump-button.js.map +1 -1
- package/dist/collection/components/jump-button/test/jump-button.spec.js +2 -2
- package/dist/collection/components/jump-button/test/jump-button.spec.js.map +1 -1
- package/dist/collection/components/jump-card/jump-card-border-radius.stories.js +2 -14
- package/dist/collection/components/jump-card/jump-card-border-radius.stories.js.map +1 -1
- package/dist/collection/components/jump-card/jump-card-top-border-content-radius.stories.js +1 -2
- package/dist/collection/components/jump-card/jump-card-top-border-content-radius.stories.js.map +1 -1
- package/dist/collection/components/jump-card/jump-card.css +50 -1
- package/dist/collection/components/jump-card/jump-card.js +13 -13
- package/dist/collection/components/jump-card/jump-card.js.map +1 -1
- package/dist/collection/components/{app-icon → jump-icon}/jump-icon.js +2 -2
- package/dist/collection/components/jump-icon/jump-icon.js.map +1 -0
- package/dist/collection/components/{app-icon → jump-icon}/jump-icon.stories.js +1 -1
- package/dist/collection/components/jump-icon/jump-icon.stories.js.map +1 -0
- package/dist/collection/components/jump-icon/test/jump-icon.e2e.js.map +1 -0
- package/dist/collection/components/{app-icon → jump-icon}/test/jump-icon.spec.js +2 -2
- package/dist/collection/components/jump-icon/test/jump-icon.spec.js.map +1 -0
- package/dist/collection/components/jump-pagination/jump-pagination-pages.stories.js +41 -24
- package/dist/collection/components/jump-pagination/jump-pagination-pages.stories.js.map +1 -1
- package/dist/collection/components/jump-pagination/jump-pagination-products.stories.js +19 -40
- package/dist/collection/components/jump-pagination/jump-pagination-products.stories.js.map +1 -1
- package/dist/collection/components/jump-pagination/jump-pagination.css +13 -0
- package/dist/collection/components/jump-pagination/jump-pagination.js +64 -31
- package/dist/collection/components/jump-pagination/jump-pagination.js.map +1 -1
- package/dist/collection/components/jump-tab/jump-tab-inline.stories.js +28 -0
- package/dist/collection/components/jump-tab/jump-tab-inline.stories.js.map +1 -0
- package/dist/collection/components/jump-tab/jump-tab.css +3 -0
- package/dist/collection/components/jump-tab/jump-tab.js +71 -0
- package/dist/collection/components/jump-tab/jump-tab.js.map +1 -0
- package/dist/collection/components/jump-tab/test/jump-tab.e2e.js +10 -0
- package/dist/collection/components/jump-tab/test/jump-tab.e2e.js.map +1 -0
- package/dist/collection/components/jump-tab/test/jump-tab.spec.js +18 -0
- package/dist/collection/components/jump-tab/test/jump-tab.spec.js.map +1 -0
- package/dist/collection/utils/utils.js +29 -3
- package/dist/collection/utils/utils.js.map +1 -1
- package/dist/components/jump-badge.js +7 -7
- package/dist/components/jump-badge.js.map +1 -1
- package/dist/components/jump-button.js +26 -20
- package/dist/components/jump-button.js.map +1 -1
- package/dist/components/jump-card.js +14 -14
- package/dist/components/jump-card.js.map +1 -1
- package/dist/components/jump-icon.js +2 -2
- package/dist/components/jump-icon2.js +4 -4
- package/dist/components/jump-icon2.js.map +1 -1
- package/dist/components/jump-pagination.js +38 -13
- package/dist/components/jump-pagination.js.map +1 -1
- package/dist/components/jump-tab.d.ts +11 -0
- package/dist/components/jump-tab.js +46 -0
- package/dist/components/jump-tab.js.map +1 -0
- package/dist/esm/{index-7feee8ea.js → index-192aeaf1.js} +181 -12
- package/dist/esm/index-192aeaf1.js.map +1 -0
- package/dist/esm/jump-badge.entry.js +6 -6
- package/dist/esm/jump-badge.entry.js.map +1 -1
- package/dist/esm/jump-button.entry.js +10 -6
- package/dist/esm/jump-button.entry.js.map +1 -1
- package/dist/esm/jump-card.entry.js +4 -4
- package/dist/esm/jump-card.entry.js.map +1 -1
- package/dist/esm/jump-design-system.js +4 -4
- package/dist/esm/jump-design-system.js.map +1 -1
- package/dist/esm/jump-icon.entry.js +5 -5
- package/dist/esm/jump-icon.entry.js.map +1 -1
- package/dist/esm/jump-pagination.entry.js +32 -10
- package/dist/esm/jump-pagination.entry.js.map +1 -1
- package/dist/esm/jump-tab.entry.js +25 -0
- package/dist/esm/jump-tab.entry.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/jump-design-system/jump-design-system.esm.js +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js.map +1 -1
- package/dist/jump-design-system/p-20ceb40c.js +3 -0
- package/dist/jump-design-system/p-20ceb40c.js.map +1 -0
- package/dist/jump-design-system/{p-bc02e346.entry.js → p-511d4425.entry.js} +3 -3
- package/dist/jump-design-system/p-511d4425.entry.js.map +1 -0
- package/dist/jump-design-system/p-61729377.entry.js +2 -0
- package/dist/jump-design-system/p-61729377.entry.js.map +1 -0
- package/dist/jump-design-system/p-700b96b4.entry.js +2 -0
- package/dist/jump-design-system/p-700b96b4.entry.js.map +1 -0
- package/dist/jump-design-system/p-87256ed6.entry.js +2 -0
- package/dist/jump-design-system/p-87256ed6.entry.js.map +1 -0
- package/dist/jump-design-system/{p-99238e3f.entry.js → p-8f5caf32.entry.js} +2 -2
- package/dist/jump-design-system/p-8f5caf32.entry.js.map +1 -0
- package/dist/jump-design-system/p-9e47f451.entry.js +2 -0
- package/dist/jump-design-system/p-9e47f451.entry.js.map +1 -0
- package/dist/jump-design-system-elements.json +20 -7
- package/dist/types/components/jump-badge/jump-badge.d.ts +1 -1
- package/dist/types/components/jump-button/jump-button-anchor.stories.d.ts +44 -0
- package/dist/types/components/jump-button/jump-button-dimension.stories.d.ts +43 -0
- package/dist/types/components/jump-button/jump-button-filled.stories.d.ts +1 -120
- package/dist/types/components/jump-button/jump-button-only-icon.stories.d.ts +53 -0
- package/dist/types/components/jump-button/jump-button-outline.stories.d.ts +4 -112
- package/dist/types/components/jump-button/jump-button-text.stories.d.ts +40 -0
- package/dist/types/components/jump-button/jump-button.d.ts +7 -2
- package/dist/types/components/{app-icon → jump-icon}/jump-icon.d.ts +1 -1
- package/dist/types/components/jump-pagination/jump-pagination-pages.stories.d.ts +2 -1
- package/dist/types/components/jump-pagination/jump-pagination-products.stories.d.ts +2 -2
- package/dist/types/components/jump-pagination/jump-pagination.d.ts +10 -8
- package/dist/types/components/jump-tab/jump-tab-inline.stories.d.ts +18 -0
- package/dist/types/components/jump-tab/jump-tab.d.ts +6 -0
- package/dist/types/components.d.ts +47 -14
- package/dist/types/utils/utils.d.ts +2 -1
- package/package.json +3 -2
- package/dist/cjs/index-79e97f36.js.map +0 -1
- package/dist/collection/components/app-icon/jump-icon.js.map +0 -1
- package/dist/collection/components/app-icon/jump-icon.stories.js.map +0 -1
- package/dist/collection/components/app-icon/test/jump-icon.e2e.js.map +0 -1
- package/dist/collection/components/app-icon/test/jump-icon.spec.js.map +0 -1
- package/dist/collection/utils/utils.spec.js +0 -16
- package/dist/collection/utils/utils.spec.js.map +0 -1
- package/dist/esm/index-7feee8ea.js.map +0 -1
- package/dist/jump-design-system/p-7cfed9c6.entry.js +0 -2
- package/dist/jump-design-system/p-7cfed9c6.entry.js.map +0 -1
- package/dist/jump-design-system/p-99238e3f.entry.js.map +0 -1
- package/dist/jump-design-system/p-9fd6e0a0.entry.js +0 -2
- package/dist/jump-design-system/p-9fd6e0a0.entry.js.map +0 -1
- package/dist/jump-design-system/p-bc02e346.entry.js.map +0 -1
- package/dist/jump-design-system/p-c560071a.js +0 -3
- package/dist/jump-design-system/p-c560071a.js.map +0 -1
- package/dist/jump-design-system/p-ddb6c98c.entry.js +0 -2
- package/dist/jump-design-system/p-ddb6c98c.entry.js.map +0 -1
- /package/dist/collection/components/{app-icon → jump-icon}/jump-icon.css +0 -0
- /package/dist/collection/components/{app-icon → jump-icon}/test/jump-icon.e2e.js +0 -0
- /package/dist/types/components/{app-icon → jump-icon}/jump-icon.stories.d.ts +0 -0
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import { generateAttributesFromArgs } from "../../utils/utils";
|
|
2
|
+
export default {
|
|
3
|
+
title: 'Components/Button/OnlyIcon',
|
|
4
|
+
tags: ['autodocs'],
|
|
5
|
+
argTypes: {
|
|
6
|
+
variant: {
|
|
7
|
+
name: 'Variante',
|
|
8
|
+
description: 'Imposta la variante di colore del bottone',
|
|
9
|
+
control: 'select',
|
|
10
|
+
options: [
|
|
11
|
+
'primary',
|
|
12
|
+
'secondary',
|
|
13
|
+
'neutral',
|
|
14
|
+
'white'
|
|
15
|
+
],
|
|
16
|
+
},
|
|
17
|
+
outline: {
|
|
18
|
+
name: 'Outline',
|
|
19
|
+
description: 'Imposta se il bottone deve avere il solo bordo',
|
|
20
|
+
control: 'boolean'
|
|
21
|
+
},
|
|
22
|
+
size: {
|
|
23
|
+
name: 'Dimensione',
|
|
24
|
+
description: 'Imposta la dimensione del bottone',
|
|
25
|
+
control: 'select',
|
|
26
|
+
options: [
|
|
27
|
+
'small',
|
|
28
|
+
'medium',
|
|
29
|
+
'large'
|
|
30
|
+
],
|
|
31
|
+
labels: {
|
|
32
|
+
small: 'Piccolo',
|
|
33
|
+
medium: 'Medio',
|
|
34
|
+
large: 'Grande'
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
pill: {
|
|
38
|
+
name: 'Bordo a Pillola',
|
|
39
|
+
description: 'Imposta se il bottone deve avere il bordo completamente stondato a pillola',
|
|
40
|
+
control: 'boolean'
|
|
41
|
+
},
|
|
42
|
+
disabled: {
|
|
43
|
+
name: 'Disabilitato',
|
|
44
|
+
description: 'Imposta se il bottone deve essere disabilitato',
|
|
45
|
+
control: 'boolean'
|
|
46
|
+
},
|
|
47
|
+
id: {
|
|
48
|
+
name: 'ID',
|
|
49
|
+
description: 'Imposta l\'id del bottone',
|
|
50
|
+
control: 'text'
|
|
51
|
+
},
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
const Template = (args) => {
|
|
55
|
+
const attributes = generateAttributesFromArgs(args);
|
|
56
|
+
return `<jump-button ${attributes} only-icon> <jump-icon slot="suffix" name="arrow-right"></jump-icon> </jump-button>`;
|
|
57
|
+
};
|
|
58
|
+
export const Primary = Template.bind({});
|
|
59
|
+
Primary.args = {
|
|
60
|
+
variant: 'primary',
|
|
61
|
+
size: 'small',
|
|
62
|
+
};
|
|
63
|
+
export const Secondary = Template.bind({});
|
|
64
|
+
Secondary.args = {
|
|
65
|
+
variant: 'secondary',
|
|
66
|
+
size: 'medium',
|
|
67
|
+
};
|
|
68
|
+
export const Neutral = Template.bind({});
|
|
69
|
+
Neutral.args = {
|
|
70
|
+
variant: 'neutral',
|
|
71
|
+
size: 'large',
|
|
72
|
+
};
|
|
73
|
+
export const White = Template.bind({});
|
|
74
|
+
White.args = {
|
|
75
|
+
variant: 'white',
|
|
76
|
+
size: 'medium',
|
|
77
|
+
};
|
|
78
|
+
export const Pill = Template.bind({});
|
|
79
|
+
Pill.args = {
|
|
80
|
+
variant: 'primary',
|
|
81
|
+
pill: true,
|
|
82
|
+
size: 'medium',
|
|
83
|
+
};
|
|
84
|
+
export const noBackground = Template.bind({});
|
|
85
|
+
noBackground.args = {
|
|
86
|
+
variant: 'primary',
|
|
87
|
+
text: true,
|
|
88
|
+
size: 'medium',
|
|
89
|
+
};
|
|
90
|
+
export const outline = Template.bind({});
|
|
91
|
+
outline.args = {
|
|
92
|
+
variant: 'primary',
|
|
93
|
+
outline: true,
|
|
94
|
+
size: 'medium',
|
|
95
|
+
};
|
|
96
|
+
export const outlinePill = Template.bind({});
|
|
97
|
+
outlinePill.args = {
|
|
98
|
+
variant: 'primary',
|
|
99
|
+
outline: true,
|
|
100
|
+
pill: true,
|
|
101
|
+
size: 'medium',
|
|
102
|
+
};
|
|
103
|
+
export const Disabled = Template.bind({});
|
|
104
|
+
Disabled.args = {
|
|
105
|
+
variant: 'primary',
|
|
106
|
+
size: 'medium',
|
|
107
|
+
disabled: true,
|
|
108
|
+
};
|
|
109
|
+
//# sourceMappingURL=jump-button-only-icon.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"jump-button-only-icon.stories.js","sourceRoot":"","sources":["../../../src/components/jump-button/jump-button-only-icon.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs} from '../../utils/utils';\n\nexport default {\n title: 'Components/Button/OnlyIcon',\n tags: ['autodocs'],\n argTypes: {\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 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} only-icon> <jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon> </jump-button>`\n}\n\nexport const Primary = Template.bind({});\nPrimary.args = {\n variant: 'primary',\n size: 'small',\n};\n\nexport const Secondary = Template.bind({});\nSecondary.args = {\n variant: 'secondary',\n size: 'medium',\n};\n\nexport const Neutral = Template.bind({});\nNeutral.args = {\n variant: 'neutral',\n size: 'large',\n};\n\nexport const White = Template.bind({});\nWhite.args = {\n variant: 'white',\n size: 'medium',\n};\n\nexport const Pill = Template.bind({});\nPill.args = {\n variant: 'primary',\n pill: true,\n size: 'medium',\n};\n\nexport const noBackground = Template.bind({});\nnoBackground.args = {\n variant: 'primary',\n text: true,\n size: 'medium',\n};\n\n\nexport const outline = Template.bind({});\noutline.args = {\n variant: 'primary',\n outline: true,\n size: 'medium',\n};\n\nexport const outlinePill = Template.bind({});\noutlinePill.args = {\n variant: 'primary',\n outline: true,\n pill: true,\n size: 'medium',\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n variant: 'primary',\n size: 'medium',\n disabled: true,\n};\n\n"]}
|
|
@@ -1,13 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { generateAttributesFromArgs } from "../../utils/utils";
|
|
2
2
|
export default {
|
|
3
3
|
title: 'Components/Button/Outline',
|
|
4
4
|
tags: ['autodocs'],
|
|
5
5
|
argTypes: {
|
|
6
|
-
label: {
|
|
7
|
-
name: 'Etichetta',
|
|
8
|
-
description: 'Imposta il testo del bottone',
|
|
9
|
-
control: 'text'
|
|
10
|
-
},
|
|
11
6
|
variant: {
|
|
12
7
|
name: 'Variante',
|
|
13
8
|
description: 'Imposta la variante di colore del bottone',
|
|
@@ -19,11 +14,6 @@ export default {
|
|
|
19
14
|
'white'
|
|
20
15
|
],
|
|
21
16
|
},
|
|
22
|
-
outline: {
|
|
23
|
-
name: 'Outline',
|
|
24
|
-
description: 'Imposta se il bottone deve avere il solo bordo',
|
|
25
|
-
control: 'boolean'
|
|
26
|
-
},
|
|
27
17
|
size: {
|
|
28
18
|
name: 'Dimensione',
|
|
29
19
|
description: 'Imposta la dimensione del bottone',
|
|
@@ -49,124 +39,16 @@ export default {
|
|
|
49
39
|
description: 'Imposta se il bottone deve essere disabilitato',
|
|
50
40
|
control: 'boolean'
|
|
51
41
|
},
|
|
42
|
+
full: {
|
|
43
|
+
name: 'Full Width',
|
|
44
|
+
description: 'Imposta se il bottone sarà largo tutto lo spazio che può occupare',
|
|
45
|
+
control: 'boolean'
|
|
46
|
+
},
|
|
52
47
|
text: {
|
|
53
48
|
name: 'Testo',
|
|
54
49
|
description: 'Imposta se il bottone è solo testo, quindi senza bordo, sfondo e padding',
|
|
55
50
|
control: 'boolean'
|
|
56
51
|
},
|
|
57
|
-
showIcon: {
|
|
58
|
-
name: 'Mostra Icona',
|
|
59
|
-
description: 'Imposta se il bottone deve mostrare un\'icona',
|
|
60
|
-
control: 'boolean'
|
|
61
|
-
},
|
|
62
|
-
iconOnly: {
|
|
63
|
-
name: 'Mostra solo Icona',
|
|
64
|
-
description: 'Imposta se il bottone deve mostrare solo l\'icona',
|
|
65
|
-
control: 'boolean',
|
|
66
|
-
if: {
|
|
67
|
-
arg: 'showIcon',
|
|
68
|
-
eq: true
|
|
69
|
-
},
|
|
70
|
-
},
|
|
71
|
-
iconName: {
|
|
72
|
-
name: 'Nome Icona',
|
|
73
|
-
control: 'select',
|
|
74
|
-
options: Object.keys(feather.icons),
|
|
75
|
-
description: 'Seleziona il nome dell\'icona dal menu a tendina',
|
|
76
|
-
defaultValue: Object.keys(feather.icons)[0],
|
|
77
|
-
if: {
|
|
78
|
-
arg: 'showIcon',
|
|
79
|
-
eq: true
|
|
80
|
-
},
|
|
81
|
-
},
|
|
82
|
-
iconPosition: {
|
|
83
|
-
name: 'Posizione Icona',
|
|
84
|
-
description: 'Imposta la posizione dell\'icona',
|
|
85
|
-
defaultValue: 'left',
|
|
86
|
-
control: 'select',
|
|
87
|
-
options: [
|
|
88
|
-
'left',
|
|
89
|
-
'right'
|
|
90
|
-
],
|
|
91
|
-
if: {
|
|
92
|
-
arg: 'showIcon',
|
|
93
|
-
eq: true
|
|
94
|
-
},
|
|
95
|
-
labels: {
|
|
96
|
-
left: 'Sinistra',
|
|
97
|
-
right: 'Destra'
|
|
98
|
-
}
|
|
99
|
-
},
|
|
100
|
-
type: {
|
|
101
|
-
name: 'Tipo di bottone',
|
|
102
|
-
description: 'Imposta il tipo di bottone',
|
|
103
|
-
default: 'button',
|
|
104
|
-
control: 'select',
|
|
105
|
-
if: {
|
|
106
|
-
arg: 'href',
|
|
107
|
-
exists: false
|
|
108
|
-
},
|
|
109
|
-
options: [
|
|
110
|
-
'button',
|
|
111
|
-
'submit',
|
|
112
|
-
'reset'
|
|
113
|
-
],
|
|
114
|
-
labels: {
|
|
115
|
-
button: 'button',
|
|
116
|
-
submit: 'submit',
|
|
117
|
-
reset: 'reset',
|
|
118
|
-
}
|
|
119
|
-
},
|
|
120
|
-
name: {
|
|
121
|
-
name: 'Nome del bottone',
|
|
122
|
-
description: 'Imposta il nome del bottone',
|
|
123
|
-
control: 'text',
|
|
124
|
-
if: {
|
|
125
|
-
arg: 'href',
|
|
126
|
-
exists: false
|
|
127
|
-
}
|
|
128
|
-
},
|
|
129
|
-
value: {
|
|
130
|
-
name: 'Value del bottone',
|
|
131
|
-
description: 'Imposta il value del bottone',
|
|
132
|
-
control: 'text',
|
|
133
|
-
if: {
|
|
134
|
-
arg: 'href',
|
|
135
|
-
exists: false
|
|
136
|
-
}
|
|
137
|
-
},
|
|
138
|
-
ariaLabel: {
|
|
139
|
-
name: 'Aria Label',
|
|
140
|
-
description: 'Imposta aria label',
|
|
141
|
-
control: 'text',
|
|
142
|
-
},
|
|
143
|
-
href: {
|
|
144
|
-
name: 'Href',
|
|
145
|
-
description: 'Imposta l\'href del link',
|
|
146
|
-
control: 'text',
|
|
147
|
-
},
|
|
148
|
-
target: {
|
|
149
|
-
name: 'Target',
|
|
150
|
-
description: 'Imposta il target del link',
|
|
151
|
-
default: '_self',
|
|
152
|
-
control: 'select',
|
|
153
|
-
if: {
|
|
154
|
-
arg: 'href',
|
|
155
|
-
exists: true
|
|
156
|
-
},
|
|
157
|
-
options: [
|
|
158
|
-
'_blank',
|
|
159
|
-
'_parent',
|
|
160
|
-
'_self',
|
|
161
|
-
'_top'
|
|
162
|
-
],
|
|
163
|
-
labels: {
|
|
164
|
-
_blank: '_blank',
|
|
165
|
-
_parent: '_parent',
|
|
166
|
-
_self: '_self',
|
|
167
|
-
_top: '_top'
|
|
168
|
-
}
|
|
169
|
-
},
|
|
170
52
|
id: {
|
|
171
53
|
name: 'ID',
|
|
172
54
|
description: 'Imposta l\'id del bottone',
|
|
@@ -174,203 +56,56 @@ export default {
|
|
|
174
56
|
},
|
|
175
57
|
}
|
|
176
58
|
};
|
|
177
|
-
|
|
178
|
-
const
|
|
179
|
-
return `<jump-button
|
|
59
|
+
const Template = (args) => {
|
|
60
|
+
const attributes = generateAttributesFromArgs(args);
|
|
61
|
+
return `<jump-button ${attributes} outline name="scopri" value="value" aria-label="Scopri di più"> Scopri di più </jump-button>`;
|
|
180
62
|
};
|
|
181
|
-
const
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
variant="${args.variant}"
|
|
185
|
-
size="${args.size}"
|
|
186
|
-
type="${args.type}"
|
|
187
|
-
ariaLabel="${args.ariaLabel}"
|
|
188
|
-
name="${args.name}"
|
|
189
|
-
value="${args.value}" ${args.disabled == true ? ' disabled' : ''}"
|
|
190
|
-
${args.pill == true ? ' pill' : ''}
|
|
191
|
-
${args.outline == true ? ' outline' : ''}
|
|
192
|
-
${args.text == true ? ' text' : ''}
|
|
193
|
-
${!args.label || args.iconOnly ? ' only-icon' : ''}>
|
|
194
|
-
|
|
195
|
-
${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>`;
|
|
63
|
+
const TemplateWithIcon = (args) => {
|
|
64
|
+
const attributes = generateAttributesFromArgs(args);
|
|
65
|
+
return `<jump-button ${attributes} outline name="scopri" value="value" aria-label="Scopri di più"> <jump-icon slot="suffix" name="arrow-right"></jump-icon> Scopri di più </jump-button>`;
|
|
196
66
|
};
|
|
197
|
-
const Template = (args) => `${args.href ? Anchor(args) : !args.label && !args.showIcon ? 'Errore nella configurazione del bottone' : Button(args)}`;
|
|
198
67
|
export const OutlinePrimary = Template.bind({});
|
|
199
68
|
OutlinePrimary.args = {
|
|
200
|
-
label: 'Outline Primary',
|
|
201
69
|
variant: 'primary',
|
|
202
|
-
|
|
203
|
-
pill: false,
|
|
204
|
-
size: 'medium',
|
|
205
|
-
disabled: false,
|
|
206
|
-
text: false,
|
|
207
|
-
showIcon: false,
|
|
208
|
-
iconOnly: false,
|
|
209
|
-
iconName: Object.keys(feather.icons)[0],
|
|
210
|
-
iconPosition: 'left',
|
|
211
|
-
type: 'button',
|
|
212
|
-
name: 'nome bottone',
|
|
213
|
-
value: 'value bottone',
|
|
214
|
-
ariaLabel: 'sono un bottone'
|
|
70
|
+
size: 'small',
|
|
215
71
|
};
|
|
216
72
|
export const OutlineSecondary = Template.bind({});
|
|
217
73
|
OutlineSecondary.args = {
|
|
218
74
|
label: 'Outline Secondary',
|
|
219
75
|
variant: 'secondary',
|
|
220
|
-
outline: true,
|
|
221
|
-
pill: false,
|
|
222
76
|
size: 'medium',
|
|
223
|
-
disabled: false,
|
|
224
|
-
text: false,
|
|
225
|
-
showIcon: false,
|
|
226
|
-
iconOnly: false,
|
|
227
|
-
iconName: Object.keys(feather.icons)[0],
|
|
228
|
-
iconPosition: 'left',
|
|
229
|
-
type: 'button',
|
|
230
|
-
name: 'nome bottone',
|
|
231
|
-
value: 'value bottone',
|
|
232
|
-
ariaLabel: 'sono un bottone'
|
|
233
77
|
};
|
|
234
78
|
export const OutlineGrey = Template.bind({});
|
|
235
79
|
OutlineGrey.args = {
|
|
236
80
|
label: 'Outline Neutral',
|
|
237
81
|
variant: 'neutral',
|
|
238
|
-
|
|
239
|
-
pill: false,
|
|
240
|
-
size: 'medium',
|
|
241
|
-
disabled: false,
|
|
242
|
-
text: false,
|
|
243
|
-
showIcon: false,
|
|
244
|
-
iconOnly: false,
|
|
245
|
-
iconName: Object.keys(feather.icons)[0],
|
|
246
|
-
iconPosition: 'left',
|
|
247
|
-
type: 'button',
|
|
248
|
-
name: 'nome bottone',
|
|
249
|
-
value: 'value bottone',
|
|
250
|
-
ariaLabel: 'sono un bottone'
|
|
82
|
+
size: 'large',
|
|
251
83
|
};
|
|
252
84
|
export const OutlineWhite = Template.bind({});
|
|
253
85
|
OutlineWhite.args = {
|
|
254
86
|
label: 'Outline White',
|
|
255
87
|
variant: 'white',
|
|
256
|
-
outline: true,
|
|
257
|
-
pill: false,
|
|
258
88
|
size: 'medium',
|
|
259
|
-
disabled: false,
|
|
260
|
-
text: false,
|
|
261
|
-
showIcon: false,
|
|
262
|
-
iconOnly: false,
|
|
263
|
-
iconName: Object.keys(feather.icons)[0],
|
|
264
|
-
iconPosition: 'left',
|
|
265
|
-
type: 'button',
|
|
266
|
-
name: 'nome bottone',
|
|
267
|
-
value: 'value bottone',
|
|
268
|
-
ariaLabel: 'sono un bottone'
|
|
269
89
|
};
|
|
270
|
-
export const
|
|
271
|
-
|
|
90
|
+
export const outlinePill = Template.bind({});
|
|
91
|
+
outlinePill.args = {
|
|
272
92
|
label: 'Pill Primary',
|
|
273
93
|
variant: 'primary',
|
|
274
|
-
outline: true,
|
|
275
94
|
pill: true,
|
|
276
95
|
size: 'medium',
|
|
277
|
-
disabled: false,
|
|
278
|
-
text: false,
|
|
279
|
-
showIcon: false,
|
|
280
|
-
iconOnly: false,
|
|
281
|
-
iconName: Object.keys(feather.icons)[0],
|
|
282
|
-
iconPosition: 'left',
|
|
283
|
-
type: 'button',
|
|
284
|
-
name: 'nome bottone',
|
|
285
|
-
value: 'value bottone',
|
|
286
|
-
ariaLabel: 'sono un bottone'
|
|
287
96
|
};
|
|
288
|
-
const
|
|
289
|
-
|
|
290
|
-
ButtonWithIcon.args = {
|
|
97
|
+
export const withIcon = TemplateWithIcon.bind({});
|
|
98
|
+
withIcon.args = {
|
|
291
99
|
label: 'Primary',
|
|
292
100
|
variant: 'primary',
|
|
293
|
-
outline: true,
|
|
294
|
-
pill: false,
|
|
295
|
-
size: 'medium',
|
|
296
|
-
disabled: false,
|
|
297
|
-
text: false,
|
|
298
|
-
showIcon: true,
|
|
299
|
-
iconName: 'home',
|
|
300
|
-
iconPosition: 'left',
|
|
301
|
-
type: 'button',
|
|
302
|
-
name: 'nome bottone',
|
|
303
|
-
value: 'value bottone',
|
|
304
|
-
ariaLabel: 'sono un bottone'
|
|
305
|
-
};
|
|
306
|
-
const TemplateWithOnlyIcon = (args) => `<jump-button
|
|
307
|
-
id="${args.id}"
|
|
308
|
-
class="${args.class}"
|
|
309
|
-
variant="${args.variant}"
|
|
310
|
-
size="${args.size}"
|
|
311
|
-
type="${args.type}"
|
|
312
|
-
ariaLabel="${args.ariaLabel}"
|
|
313
|
-
name="${args.name}"
|
|
314
|
-
value="${args.value}"
|
|
315
|
-
${args.disabled == true ? ' disabled' : ''}
|
|
316
|
-
${args.pill == true ? ' pill' : ''}
|
|
317
|
-
${args.outline == true ? ' outline' : ''}
|
|
318
|
-
${args.text == true ? ' text' : ''}
|
|
319
|
-
${!args.label ? ' only-icon' : ''}>
|
|
320
|
-
${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}
|
|
321
|
-
${args.label}
|
|
322
|
-
${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}
|
|
323
|
-
</jump-button>`;
|
|
324
|
-
export const ButtonWithOnlyIconSquare = TemplateWithOnlyIcon.bind({});
|
|
325
|
-
ButtonWithOnlyIconSquare.args = {
|
|
326
|
-
label: '',
|
|
327
|
-
variant: 'primary',
|
|
328
|
-
outline: true,
|
|
329
|
-
pill: false,
|
|
330
101
|
size: 'medium',
|
|
331
|
-
|
|
332
|
-
text: false,
|
|
333
|
-
showIcon: true,
|
|
334
|
-
iconName: 'home',
|
|
335
|
-
iconPosition: 'left',
|
|
336
|
-
type: 'button',
|
|
337
|
-
name: 'nome bottone',
|
|
338
|
-
value: 'value bottone',
|
|
339
|
-
ariaLabel: 'sono un bottone'
|
|
340
|
-
};
|
|
341
|
-
export const ButtonWithOnlyIconPill = TemplateWithOnlyIcon.bind({});
|
|
342
|
-
ButtonWithOnlyIconPill.args = {
|
|
343
|
-
label: '',
|
|
344
|
-
variant: 'primary',
|
|
345
|
-
outline: true,
|
|
346
|
-
pill: true,
|
|
347
|
-
size: 'medium',
|
|
348
|
-
disabled: false,
|
|
349
|
-
text: false,
|
|
350
|
-
showIcon: true,
|
|
351
|
-
iconName: 'home',
|
|
352
|
-
iconPosition: 'left',
|
|
353
|
-
type: 'button',
|
|
354
|
-
name: 'nome bottone',
|
|
355
|
-
value: 'value bottone',
|
|
356
|
-
ariaLabel: 'sono un bottone'
|
|
102
|
+
full: true,
|
|
357
103
|
};
|
|
358
104
|
export const Disabled = Template.bind({});
|
|
359
105
|
Disabled.args = {
|
|
360
106
|
label: 'Disabled',
|
|
361
107
|
variant: 'primary',
|
|
362
|
-
outline: true,
|
|
363
|
-
pill: false,
|
|
364
|
-
size: 'medium',
|
|
365
108
|
disabled: true,
|
|
366
|
-
|
|
367
|
-
showIcon: false,
|
|
368
|
-
iconOnly: false,
|
|
369
|
-
iconName: Object.keys(feather.icons)[0],
|
|
370
|
-
iconPosition: 'left',
|
|
371
|
-
type: 'button',
|
|
372
|
-
name: 'nome bottone',
|
|
373
|
-
value: 'value bottone',
|
|
374
|
-
ariaLabel: 'sono un bottone'
|
|
109
|
+
size: 'medium',
|
|
375
110
|
};
|
|
376
111
|
//# sourceMappingURL=jump-button-outline.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-button-outline.stories.js","sourceRoot":"","sources":["../../../src/components/jump-button/jump-button-outline.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import feather from 'feather-icons';\n\nexport default {\n title: 'Components/Button/Outline',\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\n// TODO: non far passare gli undefined\n\nconst Anchor = (args) => {\n return `<jump-button id=\"${args.id}\" 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>`\n}\n\nconst Button = (args) => {\n return `<jump-button id=\"${args.id}\" \n class=\"${args.class}\"\n variant=\"${args.variant}\" \n size=\"${args.size}\" \n type=\"${args.type}\" \n ariaLabel=\"${args.ariaLabel}\" \n name=\"${args.name}\" \n value=\"${args.value}\" ${args.disabled == true ? ' disabled' : ''}\"\n ${args.pill == true ? ' pill' : ''}\n ${args.outline == true ? ' outline' : ''}\n ${args.text == true ? ' text' : ''} \n ${ !args.label || args.iconOnly ? ' only-icon' : ''}>\n \n ${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\nconst Template = (args) => \n`${ args.href ? Anchor(args) : !args.label && !args.showIcon ? 'Errore nella configurazione del bottone' : Button(args)}`;\n\nexport const OutlinePrimary = Template.bind({});\nOutlinePrimary.args = {\n label: 'Outline Primary',\n variant: 'primary',\n outline: true,\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 OutlineSecondary = Template.bind({});\nOutlineSecondary.args = {\n label: 'Outline Secondary',\n variant: 'secondary',\n outline: true,\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 OutlineGrey = Template.bind({});\nOutlineGrey.args = {\n label: 'Outline Neutral',\n variant: 'neutral',\n outline: true,\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 OutlineWhite = Template.bind({});\nOutlineWhite.args = {\n label: 'Outline White',\n variant: 'white',\n outline: true,\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 OutlinePillPrimary = Template.bind({});\nOutlinePillPrimary.args = {\n label: 'Pill Primary',\n variant: 'primary',\n outline: true,\n pill: true,\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\nconst 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>`\n\nexport const ButtonWithIcon = TemplateWithIcon.bind({});\nButtonWithIcon.args = {\n label: 'Primary',\n variant: 'primary',\n outline: true,\n pill: false,\n size: 'medium',\n disabled: false,\n text: false,\n showIcon: true,\n iconName: 'home',\n iconPosition: 'left',\n type: 'button',\n name: 'nome bottone',\n value: 'value bottone',\n ariaLabel: 'sono un bottone'\n};\n\nconst TemplateWithOnlyIcon = (args) => \n `<jump-button\n id=\"${args.id}\"\n class=\"${args.class}\"\n variant=\"${args.variant}\" \n size=\"${args.size}\" \n type=\"${args.type}\" \n ariaLabel=\"${args.ariaLabel}\" \n name=\"${args.name}\" \n value=\"${args.value}\" \n ${args.disabled == true ? ' disabled' : ''}\n ${args.pill == true ? ' pill' : ''}\n ${args.outline == true ? ' outline' : ''}\n ${args.text == true ? ' text' : ''}\n ${ !args.label ? ' only-icon' : ''}>\n ${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot=\"prefix\" name=\"${args.iconName}\"></jump-icon>` : ''}\n ${ args.label }\n ${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot=\"suffix\" name=\"${args.iconName}\"></jump-icon>` : ''}\n </jump-button>`\n\nexport const ButtonWithOnlyIconSquare = TemplateWithOnlyIcon.bind({});\nButtonWithOnlyIconSquare.args = {\n label: '',\n variant: 'primary',\n outline: true,\n pill: false,\n size: 'medium',\n disabled: false,\n text: false,\n showIcon: true,\n iconName: 'home',\n iconPosition: 'left',\n type: 'button',\n name: 'nome bottone',\n value: 'value bottone',\n ariaLabel: 'sono un bottone'\n};\n\nexport const ButtonWithOnlyIconPill = TemplateWithOnlyIcon.bind({});\nButtonWithOnlyIconPill.args = {\n label: '',\n variant: 'primary',\n outline: true,\n pill: true,\n size: 'medium',\n disabled: false,\n text: false,\n showIcon: true,\n iconName: 'home',\n iconPosition: 'left',\n type: 'button',\n name: 'nome bottone',\n value: 'value bottone',\n ariaLabel: 'sono un bottone'\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n label: 'Disabled',\n variant: 'primary',\n outline: true,\n pill: false,\n size: 'medium',\n disabled: true,\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"]}
|
|
1
|
+
{"version":3,"file":"jump-button-outline.stories.js","sourceRoot":"","sources":["../../../src/components/jump-button/jump-button-outline.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/Outline',\n tags: ['autodocs'],\n argTypes: {\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 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 full: {\n name: 'Full Width',\n description: 'Imposta se il bottone sarà largo tutto lo spazio che può occupare',\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 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} outline name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\"> Scopri di più </jump-button>`\n}\n\nconst TemplateWithIcon = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return `<jump-button ${attributes} outline name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\"> <jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon> Scopri di più </jump-button>`\n}\n\nexport const OutlinePrimary = Template.bind({});\nOutlinePrimary.args = {\n variant: 'primary',\n size: 'small',\n};\n\nexport const OutlineSecondary = Template.bind({});\nOutlineSecondary.args = {\n label: 'Outline Secondary',\n variant: 'secondary',\n size: 'medium',\n};\n\nexport const OutlineGrey = Template.bind({});\nOutlineGrey.args = {\n label: 'Outline Neutral',\n variant: 'neutral',\n size: 'large',\n};\n\nexport const OutlineWhite = Template.bind({});\nOutlineWhite.args = {\n label: 'Outline White',\n variant: 'white',\n size: 'medium',\n};\n\nexport const outlinePill = Template.bind({});\noutlinePill.args = {\n label: 'Pill Primary',\n variant: 'primary',\n pill: true,\n size: 'medium',\n};\n\nexport const withIcon = TemplateWithIcon.bind({});\nwithIcon.args = {\n label: 'Primary',\n variant: 'primary',\n size: 'medium',\n full: true,\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n label: 'Disabled',\n variant: 'primary',\n disabled: true,\n size: 'medium',\n};\n"]}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { generateAttributesFromArgs } from "../../utils/utils";
|
|
2
|
+
export default {
|
|
3
|
+
title: 'Components/Button/Text',
|
|
4
|
+
tags: ['autodocs'],
|
|
5
|
+
argTypes: {
|
|
6
|
+
variant: {
|
|
7
|
+
name: 'Variante',
|
|
8
|
+
description: 'Imposta la variante di colore del bottone',
|
|
9
|
+
control: 'select',
|
|
10
|
+
options: [
|
|
11
|
+
'primary',
|
|
12
|
+
'secondary',
|
|
13
|
+
'neutral',
|
|
14
|
+
'white'
|
|
15
|
+
],
|
|
16
|
+
},
|
|
17
|
+
size: {
|
|
18
|
+
name: 'Dimensione',
|
|
19
|
+
description: 'Imposta la dimensione del bottone',
|
|
20
|
+
control: 'select',
|
|
21
|
+
options: [
|
|
22
|
+
'small',
|
|
23
|
+
'medium',
|
|
24
|
+
'large'
|
|
25
|
+
],
|
|
26
|
+
labels: {
|
|
27
|
+
small: 'Piccolo',
|
|
28
|
+
medium: 'Medio',
|
|
29
|
+
large: 'Grande'
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
disabled: {
|
|
33
|
+
name: 'Disabilitato',
|
|
34
|
+
description: 'Imposta se il bottone deve essere disabilitato',
|
|
35
|
+
control: 'boolean'
|
|
36
|
+
},
|
|
37
|
+
id: {
|
|
38
|
+
name: 'ID',
|
|
39
|
+
description: 'Imposta l\'id del bottone',
|
|
40
|
+
control: 'text'
|
|
41
|
+
},
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
const Template = (args) => {
|
|
45
|
+
const attributes = generateAttributesFromArgs(args);
|
|
46
|
+
return `<jump-button ${attributes} text name="scopri" value="value" aria-label="Scopri di più"> Scopri di più </jump-button>`;
|
|
47
|
+
};
|
|
48
|
+
const TemplateWithIcon = (args) => {
|
|
49
|
+
const attributes = generateAttributesFromArgs(args);
|
|
50
|
+
return `<jump-button ${attributes} text name="scopri" value="value" aria-label="Scopri di più"> <jump-icon slot="suffix" name="arrow-right"></jump-icon> Scopri di più </jump-button>`;
|
|
51
|
+
};
|
|
52
|
+
export const TextPrimary = Template.bind({});
|
|
53
|
+
TextPrimary.args = {
|
|
54
|
+
variant: 'primary',
|
|
55
|
+
size: 'medium',
|
|
56
|
+
};
|
|
57
|
+
export const TextSecondary = Template.bind({});
|
|
58
|
+
TextSecondary.args = {
|
|
59
|
+
variant: 'secondary',
|
|
60
|
+
size: 'medium',
|
|
61
|
+
};
|
|
62
|
+
export const TextGrey = Template.bind({});
|
|
63
|
+
TextGrey.args = {
|
|
64
|
+
variant: 'neutral',
|
|
65
|
+
size: 'medium',
|
|
66
|
+
};
|
|
67
|
+
export const TextWhite = Template.bind({});
|
|
68
|
+
TextWhite.args = {
|
|
69
|
+
variant: 'white',
|
|
70
|
+
size: 'medium',
|
|
71
|
+
};
|
|
72
|
+
export const withIcon = TemplateWithIcon.bind({});
|
|
73
|
+
withIcon.args = {
|
|
74
|
+
variant: 'primary',
|
|
75
|
+
size: 'medium',
|
|
76
|
+
};
|
|
77
|
+
export const disabled = Template.bind({});
|
|
78
|
+
disabled.args = {
|
|
79
|
+
variant: 'primary',
|
|
80
|
+
size: 'medium',
|
|
81
|
+
disabled: true
|
|
82
|
+
};
|
|
83
|
+
//# sourceMappingURL=jump-button-text.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"jump-button-text.stories.js","sourceRoot":"","sources":["../../../src/components/jump-button/jump-button-text.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAC,MAAM,mBAAmB,CAAC;AAE9D,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,2CAA2C;YACxD,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE;gBACP,SAAS;gBACT,WAAW;gBACX,SAAS;gBACT,OAAO;aACR;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,YAAY;YAClB,WAAW,EAAE,mCAAmC;YAChD,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE;gBACP,OAAO;gBACP,QAAQ;gBACR,OAAO;aACR;YACD,MAAM,EAAE;gBACN,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,OAAO;gBACf,KAAK,EAAE,QAAQ;aAChB;SACF;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,cAAc;YACpB,WAAW,EAAE,gDAAgD;YAC7D,OAAO,EAAE,SAAS;SACnB;QACD,EAAE,EAAE;YACF,IAAI,EAAE,IAAI;YACV,WAAW,EAAE,2BAA2B;YACxC,OAAO,EAAE,MAAM;SAChB;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,gBAAgB,UAAU,4FAA4F,CAAA;AAC/H,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE,EAAE;IAChC,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,gBAAgB,UAAU,qJAAqJ,CAAA;AACxL,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7C,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/C,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,WAAW;IACpB,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,OAAO,EAAE,OAAO;IAChB,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAClD,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,QAAQ;IACd,QAAQ,EAAE,IAAI;CACf,CAAC","sourcesContent":["import { generateAttributesFromArgs} from '../../utils/utils';\n\nexport default {\n title: 'Components/Button/Text',\n tags: ['autodocs'],\n argTypes: {\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 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 disabled: {\n name: 'Disabilitato',\n description: 'Imposta se il bottone deve essere disabilitato',\n control: 'boolean'\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} text name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\"> Scopri di più </jump-button>`\n}\n\nconst TemplateWithIcon = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return `<jump-button ${attributes} text name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\"> <jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon> Scopri di più </jump-button>`\n}\n\nexport const TextPrimary = Template.bind({});\nTextPrimary.args = {\n variant: 'primary',\n size: 'medium',\n};\n\nexport const TextSecondary = Template.bind({});\nTextSecondary.args = {\n variant: 'secondary',\n size: 'medium',\n};\n\nexport const TextGrey = Template.bind({});\nTextGrey.args = {\n variant: 'neutral',\n size: 'medium',\n};\n\nexport const TextWhite = Template.bind({});\nTextWhite.args = {\n variant: 'white',\n size: 'medium',\n};\n\nexport const withIcon = TemplateWithIcon.bind({});\nwithIcon.args = {\n variant: 'primary',\n size: 'medium',\n};\n\nexport const disabled = Template.bind({});\ndisabled.args = {\n variant: 'primary',\n size: 'medium',\n disabled: true\n};\n"]}
|