@jumpgroup/jump-design-system 0.0.1

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.
Files changed (92) hide show
  1. package/LICENSE +21 -0
  2. package/dist/cjs/app-button.cjs.entry.js +29 -0
  3. package/dist/cjs/app-button.cjs.entry.js.map +1 -0
  4. package/dist/cjs/app-icon.cjs.entry.js +2432 -0
  5. package/dist/cjs/app-icon.cjs.entry.js.map +1 -0
  6. package/dist/cjs/index-95f2f619.js +1750 -0
  7. package/dist/cjs/index-95f2f619.js.map +1 -0
  8. package/dist/cjs/index.cjs.js +4 -0
  9. package/dist/cjs/index.cjs.js.map +1 -0
  10. package/dist/cjs/jump-design-system.cjs.js +28 -0
  11. package/dist/cjs/jump-design-system.cjs.js.map +1 -0
  12. package/dist/cjs/loader.cjs.js +24 -0
  13. package/dist/cjs/loader.cjs.js.map +1 -0
  14. package/dist/collection/collection-manifest.json +13 -0
  15. package/dist/collection/components/app-button/app-button.css +107 -0
  16. package/dist/collection/components/app-button/app-button.js +158 -0
  17. package/dist/collection/components/app-button/app-button.js.map +1 -0
  18. package/dist/collection/components/app-button/app-button.stories.js +227 -0
  19. package/dist/collection/components/app-button/app-button.stories.js.map +1 -0
  20. package/dist/collection/components/app-icon/app-icon.css +7 -0
  21. package/dist/collection/components/app-icon/app-icon.js +64 -0
  22. package/dist/collection/components/app-icon/app-icon.js.map +1 -0
  23. package/dist/collection/components/app-icon/app-icon.stories.js +25 -0
  24. package/dist/collection/components/app-icon/app-icon.stories.js.map +1 -0
  25. package/dist/collection/index.js +2 -0
  26. package/dist/collection/index.js.map +1 -0
  27. package/dist/collection/stories/Colors.js +14 -0
  28. package/dist/collection/stories/assets/code-brackets.svg +1 -0
  29. package/dist/collection/stories/assets/colors.svg +1 -0
  30. package/dist/collection/stories/assets/comments.svg +1 -0
  31. package/dist/collection/stories/assets/direction.svg +1 -0
  32. package/dist/collection/stories/assets/flow.svg +1 -0
  33. package/dist/collection/stories/assets/plugin.svg +1 -0
  34. package/dist/collection/stories/assets/repo.svg +1 -0
  35. package/dist/collection/stories/assets/stackalt.svg +1 -0
  36. package/dist/collection/utils/utils.js +4 -0
  37. package/dist/collection/utils/utils.js.map +1 -0
  38. package/dist/components/app-button.d.ts +11 -0
  39. package/dist/components/app-button.js +50 -0
  40. package/dist/components/app-button.js.map +1 -0
  41. package/dist/components/app-icon.d.ts +11 -0
  42. package/dist/components/app-icon.js +2448 -0
  43. package/dist/components/app-icon.js.map +1 -0
  44. package/dist/components/index.d.ts +27 -0
  45. package/dist/components/index.js +3 -0
  46. package/dist/components/index.js.map +1 -0
  47. package/dist/esm/app-button.entry.js +25 -0
  48. package/dist/esm/app-button.entry.js.map +1 -0
  49. package/dist/esm/app-icon.entry.js +2428 -0
  50. package/dist/esm/app-icon.entry.js.map +1 -0
  51. package/dist/esm/index-4c9cac2b.js +1723 -0
  52. package/dist/esm/index-4c9cac2b.js.map +1 -0
  53. package/dist/esm/index.js +3 -0
  54. package/dist/esm/index.js.map +1 -0
  55. package/dist/esm/jump-design-system.js +23 -0
  56. package/dist/esm/jump-design-system.js.map +1 -0
  57. package/dist/esm/loader.js +20 -0
  58. package/dist/esm/loader.js.map +1 -0
  59. package/dist/esm/polyfills/core-js.js +11 -0
  60. package/dist/esm/polyfills/css-shim.js +1 -0
  61. package/dist/esm/polyfills/dom.js +79 -0
  62. package/dist/esm/polyfills/es5-html-element.js +1 -0
  63. package/dist/esm/polyfills/index.js +34 -0
  64. package/dist/esm/polyfills/system.js +6 -0
  65. package/dist/index.cjs.js +1 -0
  66. package/dist/index.js +1 -0
  67. package/dist/jump-design-system/index.esm.js +2 -0
  68. package/dist/jump-design-system/index.esm.js.map +1 -0
  69. package/dist/jump-design-system/jump-design-system.esm.js +2 -0
  70. package/dist/jump-design-system/jump-design-system.esm.js.map +1 -0
  71. package/dist/jump-design-system/p-08fde855.entry.js +2 -0
  72. package/dist/jump-design-system/p-08fde855.entry.js.map +1 -0
  73. package/dist/jump-design-system/p-771ebb2a.entry.js +331 -0
  74. package/dist/jump-design-system/p-771ebb2a.entry.js.map +1 -0
  75. package/dist/jump-design-system/p-fce83307.js +3 -0
  76. package/dist/jump-design-system/p-fce83307.js.map +1 -0
  77. package/dist/types/components/app-button/app-button.d.ts +31 -0
  78. package/dist/types/components/app-button/app-button.stories.d.ts +95 -0
  79. package/dist/types/components/app-icon/app-icon.d.ts +12 -0
  80. package/dist/types/components/app-icon/app-icon.stories.d.ts +19 -0
  81. package/dist/types/components.d.ts +122 -0
  82. package/dist/types/index.d.ts +1 -0
  83. package/dist/types/stencil-public-runtime.d.ts +1638 -0
  84. package/dist/types/utils/utils.d.ts +1 -0
  85. package/loader/cdn.js +3 -0
  86. package/loader/index.cjs.js +3 -0
  87. package/loader/index.d.ts +21 -0
  88. package/loader/index.es2017.js +3 -0
  89. package/loader/index.js +4 -0
  90. package/loader/package.json +11 -0
  91. package/package.json +61 -0
  92. package/readme.md +91 -0
@@ -0,0 +1 @@
1
+ {"file":"loader.cjs.js","mappings":";;;;;;AAAA;AACA;AACA;AAGA,MAAM,QAAQ,GAAG,MAAM;AAiBvB,IAAI,OAAOA,oBAAc,EAAE,CAAC;AAC5B,CAAC;;ACnBW,MAAC,oBAAoB,GAAG,CAAC,GAAG,EAAE,OAAO,KAAK;AACtD,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;AAC9D,EAAE,OAAO,QAAQ,EAAE,CAAC,IAAI,CAAC,MAAM;AAE/B,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,GAAG,CAAC,CAAC;AACL;;;;;","names":["promiseResolve","bootstrapLazy"],"sources":["./node_modules/@stencil/core/internal/client/patch-esm.js","@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Esm v3.2.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD } from '@stencil/core/internal/app-data';\nimport { CSS, plt, win, promiseResolve } from '@stencil/core';\nconst patchEsm = () => {\n // NOTE!! This fn cannot use async/await!\n // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n // @ts-ignore\n if (BUILD.cssVarShim && !(CSS && CSS.supports && CSS.supports('color', 'var(--c)'))) {\n // @ts-ignore\n return import(/* webpackChunkName: \"polyfills-css-shim\" */ './css-shim.js').then(() => {\n if ((plt.$cssShim$ = win.__cssshim)) {\n // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n return plt.$cssShim$.i();\n }\n else {\n // for better minification\n return 0;\n }\n });\n }\n return promiseResolve();\n};\nexport { patchEsm };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchEsm } from '@stencil/core/internal/client/patch-esm';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = (win, options) => {\n if (typeof window === 'undefined') return Promise.resolve();\n return patchEsm().then(() => {\n globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n });\n};\n"],"version":3}
@@ -0,0 +1,13 @@
1
+ {
2
+ "entries": [
3
+ "./components/app-button/app-button.js",
4
+ "./components/app-icon/app-icon.js"
5
+ ],
6
+ "compiler": {
7
+ "name": "@stencil/core",
8
+ "version": "3.2.2",
9
+ "typescriptVersion": "4.9.5"
10
+ },
11
+ "collections": [],
12
+ "bundles": []
13
+ }
@@ -0,0 +1,107 @@
1
+ app-button button {
2
+ background-color: transparent;
3
+ border: none;
4
+ padding: 0;
5
+ margin: 0;
6
+ font: inherit;
7
+ color: inherit;
8
+ cursor: pointer;
9
+ }
10
+
11
+ app-button {
12
+ display: inline-flex;
13
+ align-items: center;
14
+ --app-button-color: #ffffff;
15
+ --app-button-color-disabled: #cbcbcb;
16
+ --app-button-background: blue;
17
+ --app-button-background-outline: transparent;
18
+ --app-button-color-hover: #ffffff;
19
+ --app-button-background-hover: darkblue;
20
+ --app-button-border-radius: var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);
21
+ --app-button-padding: 1rem 1.25rem;
22
+ }
23
+ app-button button {
24
+ background-color: var(--app-button-background);
25
+ border-radius: var(--app-button-border-radius);
26
+ color: var(--app-button-color);
27
+ position: relative;
28
+ font-family: var(--ff-primary, "Arial"), sans-serif;
29
+ font-weight: var(--fw-400, 400);
30
+ font-size: var(--fs-400, 1rem);
31
+ line-height: var(--lh-400, 1.3);
32
+ display: flex;
33
+ align-items: center;
34
+ gap: var(--app-button-gap, 0.5rem);
35
+ padding: var(--app-button-padding);
36
+ }
37
+ app-button button:hover {
38
+ background-color: var(--app-button-background-hover);
39
+ color: var(--app-button-color-hover);
40
+ }
41
+ app-button button[data-variant=primary] {
42
+ --app-button-color: var(--neutral-white);
43
+ --app-button-background: var(--primary-standard);
44
+ --app-button-color-hover: var(--neutral-white);
45
+ --app-button-background-hover: var(--primary-hard);
46
+ }
47
+ app-button button[data-variant=secondary] {
48
+ --app-button-color: var(--neutral-white);
49
+ --app-button-background: var(--secondary-standard);
50
+ --app-button-color-hover: var(--neutral-white);
51
+ --app-button-background-hover: var(--secondary-hard);
52
+ }
53
+ app-button button[disabled] {
54
+ --app-button-background: var(--app-button-color-disabled);
55
+ --app-button-background-hover: var(--app-button-color-disabled);
56
+ cursor: not-allowed;
57
+ }
58
+ app-button button[data-pill] {
59
+ border-radius: 100rem;
60
+ }
61
+ app-button button[data-size=small] {
62
+ font-size: var(--fs-300, 0.875rem);
63
+ line-height: var(--lh-300, 1.2);
64
+ --app-button-padding: 0.5rem 1rem;
65
+ }
66
+ app-button button[data-size=medium] {
67
+ font-size: var(--fs-400, 1rem);
68
+ line-height: var(--lh-400, 1.3);
69
+ }
70
+ app-button button[data-size=large] {
71
+ font-size: var(--fs-500, 1.125rem);
72
+ line-height: var(--lh-500, 1.4);
73
+ --app-button-padding: 1.125rem 1.5rem;
74
+ }
75
+ app-button button[data-outline] {
76
+ background-color: var(--app-button-background-outline);
77
+ border: 1px solid var(--app-button-background);
78
+ color: var(--app-button-background);
79
+ }
80
+ app-button button[data-outline]:hover {
81
+ background-color: var(--app-button-background-hover);
82
+ border: 1px solid var(--app-button-background-hover);
83
+ color: var(--app-button-background-hover);
84
+ }
85
+ app-button button[data-text] {
86
+ background-color: transparent;
87
+ border: none;
88
+ color: var(--app-button-background);
89
+ padding: 0;
90
+ }
91
+ app-button button[data-text]:hover {
92
+ background-color: transparent;
93
+ border: none;
94
+ color: var(--app-button-background-hover);
95
+ }
96
+ app-button button[data-only-icon] {
97
+ --app-button-padding: 1.125rem;
98
+ }
99
+ app-button button[data-only-icon][data-size=small] {
100
+ --app-button-padding: 0.5rem;
101
+ }
102
+ app-button button[data-only-icon][data-size=medium] {
103
+ --app-button-padding: 1rem;
104
+ }
105
+ app-button button[data-only-icon][data-size=large] {
106
+ --app-button-padding: 1.125rem;
107
+ }
@@ -0,0 +1,158 @@
1
+ import { Host, h } from '@stencil/core';
2
+ export class AppButton {
3
+ constructor() {
4
+ this.disabled = false;
5
+ this.variant = 'primary';
6
+ this.outline = false;
7
+ this.size = 'medium';
8
+ this.pill = false;
9
+ this.text = false;
10
+ this.onlyIcon = false;
11
+ }
12
+ render() {
13
+ console.log(this);
14
+ return (h(Host, null, h("button", { "data-variant": this.variant, "data-outline": this.outline, "data-size": this.size, "data-pill": this.pill, "data-text": this.text, "data-only-icon": this.onlyIcon, disabled: this.disabled }, h("slot", { name: "prefix" }), !this.onlyIcon && h("slot", null), h("slot", { name: "suffix" }))));
15
+ }
16
+ static get is() { return "app-button"; }
17
+ static get originalStyleUrls() {
18
+ return {
19
+ "$": ["app-button.scss"]
20
+ };
21
+ }
22
+ static get styleUrls() {
23
+ return {
24
+ "$": ["app-button.css"]
25
+ };
26
+ }
27
+ static get properties() {
28
+ return {
29
+ "disabled": {
30
+ "type": "boolean",
31
+ "mutable": false,
32
+ "complexType": {
33
+ "original": "boolean",
34
+ "resolved": "boolean",
35
+ "references": {}
36
+ },
37
+ "required": false,
38
+ "optional": false,
39
+ "docs": {
40
+ "tags": [],
41
+ "text": "Set the button as disabled"
42
+ },
43
+ "attribute": "disabled",
44
+ "reflect": false,
45
+ "defaultValue": "false"
46
+ },
47
+ "variant": {
48
+ "type": "string",
49
+ "mutable": false,
50
+ "complexType": {
51
+ "original": "'primary'|'secondary'|'tertiary'",
52
+ "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
53
+ "references": {}
54
+ },
55
+ "required": false,
56
+ "optional": false,
57
+ "docs": {
58
+ "tags": [],
59
+ "text": "Indicates the variant of the button"
60
+ },
61
+ "attribute": "variant",
62
+ "reflect": true,
63
+ "defaultValue": "'primary'"
64
+ },
65
+ "outline": {
66
+ "type": "boolean",
67
+ "mutable": false,
68
+ "complexType": {
69
+ "original": "boolean",
70
+ "resolved": "boolean",
71
+ "references": {}
72
+ },
73
+ "required": false,
74
+ "optional": false,
75
+ "docs": {
76
+ "tags": [],
77
+ "text": "Indicates the button as outline"
78
+ },
79
+ "attribute": "outline",
80
+ "reflect": true,
81
+ "defaultValue": "false"
82
+ },
83
+ "size": {
84
+ "type": "string",
85
+ "mutable": false,
86
+ "complexType": {
87
+ "original": "string",
88
+ "resolved": "string",
89
+ "references": {}
90
+ },
91
+ "required": false,
92
+ "optional": false,
93
+ "docs": {
94
+ "tags": [],
95
+ "text": "Indicates the size of the button"
96
+ },
97
+ "attribute": "size",
98
+ "reflect": true,
99
+ "defaultValue": "'medium'"
100
+ },
101
+ "pill": {
102
+ "type": "boolean",
103
+ "mutable": false,
104
+ "complexType": {
105
+ "original": "boolean",
106
+ "resolved": "boolean",
107
+ "references": {}
108
+ },
109
+ "required": false,
110
+ "optional": false,
111
+ "docs": {
112
+ "tags": [],
113
+ "text": "Indicates the button as pill"
114
+ },
115
+ "attribute": "pill",
116
+ "reflect": true,
117
+ "defaultValue": "false"
118
+ },
119
+ "text": {
120
+ "type": "boolean",
121
+ "mutable": false,
122
+ "complexType": {
123
+ "original": "boolean",
124
+ "resolved": "boolean",
125
+ "references": {}
126
+ },
127
+ "required": false,
128
+ "optional": false,
129
+ "docs": {
130
+ "tags": [],
131
+ "text": "Indicates the button as text"
132
+ },
133
+ "attribute": "text",
134
+ "reflect": true,
135
+ "defaultValue": "false"
136
+ },
137
+ "onlyIcon": {
138
+ "type": "boolean",
139
+ "mutable": false,
140
+ "complexType": {
141
+ "original": "boolean",
142
+ "resolved": "boolean",
143
+ "references": {}
144
+ },
145
+ "required": false,
146
+ "optional": false,
147
+ "docs": {
148
+ "tags": [],
149
+ "text": "Indicates the button as only icon"
150
+ },
151
+ "attribute": "only-icon",
152
+ "reflect": true,
153
+ "defaultValue": "false"
154
+ }
155
+ };
156
+ }
157
+ }
158
+ //# sourceMappingURL=app-button.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"app-button.js","sourceRoot":"","sources":["../../../src/components/app-button/app-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,SAAS;;oBAIQ,KAAK;mBAKkC,SAAS;mBAKlC,KAAK;gBAKT,QAAQ;gBAKP,KAAK;gBAKL,KAAK;oBAKD,KAAK;;EAEhD,MAAM;IACJ,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAClB,OAAO,CACL,EAAC,IAAI;MACH,8BAAsB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACtL,YAAM,IAAI,EAAC,QAAQ,GAAQ;QAEzB,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa;QAEjC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'app-button',\n styleUrl: 'app-button.scss',\n shadow: false,\n})\nexport class AppButton {\n /**\n * Set the button as disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Indicates the variant of the button\n */\n @Prop({reflect: true}) variant: 'primary'|'secondary'|'tertiary' = 'primary';\n\n /**\n * Indicates the button as outline\n */\n @Prop({reflect: true}) outline: boolean = false;\n\n /**\n * Indicates the size of the button\n */\n @Prop({reflect: true}) size: string = 'medium';\n\n /**\n * Indicates the button as pill\n */\n @Prop({reflect: true}) pill: boolean = false;\n\n /**\n * Indicates the button as text\n */\n @Prop({reflect: true}) text: boolean = false;\n\n /**\n * Indicates the button as only icon\n **/\n @Prop({reflect: true}) onlyIcon: boolean = false;\n\n render() {\n console.log(this);\n return (\n <Host>\n <button data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} disabled={this.disabled} >\n <slot name=\"prefix\"></slot>\n {\n !this.onlyIcon && <slot></slot>\n }\n <slot name=\"suffix\"></slot>\n </button>\n </Host>\n );\n }\n\n}\n"]}
@@ -0,0 +1,227 @@
1
+ import feather from 'feather-icons';
2
+ export default {
3
+ title: 'Components/Atoms/Button',
4
+ tags: ['autodocs'],
5
+ argTypes: {
6
+ label: {
7
+ name: 'Etichetta',
8
+ description: 'Imposta il testo del bottone',
9
+ control: 'text'
10
+ },
11
+ variant: {
12
+ name: 'Variante',
13
+ description: 'Imposta la variante di colore del bottone',
14
+ control: 'select',
15
+ options: [
16
+ 'primary',
17
+ 'secondary'
18
+ ],
19
+ },
20
+ outline: {
21
+ name: 'Outline',
22
+ description: 'Imposta se il bottone deve avere il solo bordo',
23
+ control: 'boolean'
24
+ },
25
+ size: {
26
+ name: 'Dimensione',
27
+ description: 'Imposta la dimensione del bottone',
28
+ control: 'select',
29
+ options: [
30
+ 'small',
31
+ 'medium',
32
+ 'large'
33
+ ],
34
+ labels: {
35
+ small: 'Piccolo',
36
+ medium: 'Medio',
37
+ large: 'Grande'
38
+ }
39
+ },
40
+ pill: {
41
+ name: 'Bordo a Pillola',
42
+ description: 'Imposta se il bottone deve avere il bordo completamente stondato a pillola',
43
+ control: 'boolean'
44
+ },
45
+ disabled: {
46
+ name: 'Disabilitato',
47
+ description: 'Imposta se il bottone deve essere disabilitato',
48
+ control: 'boolean'
49
+ },
50
+ text: {
51
+ name: 'Testo',
52
+ description: 'Imposta se il bottone essere solo testo, quindi senza bordo, sfondo e padding',
53
+ control: 'boolean'
54
+ },
55
+ showIcon: {
56
+ name: 'Mostra Icona',
57
+ description: 'Imposta se il bottone deve mostrare un\'icona',
58
+ control: 'boolean'
59
+ },
60
+ iconOnly: {
61
+ name: 'Mostra solo Icona',
62
+ description: 'Imposta se il bottone deve mostrare solo l\'icona',
63
+ control: 'boolean',
64
+ if: {
65
+ arg: 'showIcon',
66
+ eq: true
67
+ },
68
+ },
69
+ iconName: {
70
+ name: 'Nome Icona',
71
+ control: 'select',
72
+ options: Object.keys(feather.icons),
73
+ description: 'Seleziona il nome dell\'icona dal menu a tendina',
74
+ defaultValue: Object.keys(feather.icons)[0],
75
+ if: {
76
+ arg: 'showIcon',
77
+ eq: true
78
+ },
79
+ },
80
+ iconPosition: {
81
+ name: 'Posizione Icona',
82
+ description: 'Imposta la posizione dell\'icona',
83
+ defaultValue: 'left',
84
+ control: 'select',
85
+ options: [
86
+ 'left',
87
+ 'right'
88
+ ],
89
+ if: {
90
+ arg: 'showIcon',
91
+ eq: true
92
+ },
93
+ labels: {
94
+ left: 'Sinistra',
95
+ right: 'Destra'
96
+ }
97
+ }
98
+ }
99
+ };
100
+ // regular expression to remove all the spaces indenting the template string
101
+ const Template = (args) => `${!args.label && !args.showIcon ? 'Errore nella configurazione del bottone' :
102
+ `<app-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' : ''}>
103
+ ${args.iconPosition == 'left' && args.showIcon ? `<app-icon slot="prefix" name="${args.iconName}"></app-icon>` : ''}
104
+ ${!args.iconOnly ? args.label : ''}
105
+ ${args.iconPosition == 'right' && args.showIcon ? `<app-icon slot="suffix" name="${args.iconName}"></app-icon>` : ''}
106
+ </app-button>`.replace(/\s\s+/g, '')}`;
107
+ export const Primary = Template.bind({});
108
+ Primary.args = {
109
+ label: 'Primary',
110
+ variant: 'primary',
111
+ outline: false,
112
+ pill: false,
113
+ size: 'medium',
114
+ disabled: false,
115
+ text: false,
116
+ showIcon: false,
117
+ iconOnly: false,
118
+ iconName: Object.keys(feather.icons)[0],
119
+ iconPosition: 'left'
120
+ };
121
+ export const OutlinePrimary = Template.bind({});
122
+ OutlinePrimary.args = {
123
+ label: 'Outline Primary',
124
+ variant: 'primary',
125
+ outline: true,
126
+ pill: false,
127
+ size: 'medium',
128
+ disabled: false,
129
+ text: false,
130
+ showIcon: false,
131
+ iconOnly: false,
132
+ iconName: Object.keys(feather.icons)[0],
133
+ iconPosition: 'left'
134
+ };
135
+ export const PillPrimary = Template.bind({});
136
+ PillPrimary.args = {
137
+ label: 'Pill Primary',
138
+ variant: 'primary',
139
+ outline: false,
140
+ pill: true,
141
+ size: 'medium',
142
+ disabled: false,
143
+ text: false,
144
+ showIcon: false,
145
+ iconOnly: false,
146
+ iconName: Object.keys(feather.icons)[0],
147
+ iconPosition: 'left'
148
+ };
149
+ export const OutlinePillPrimary = Template.bind({});
150
+ OutlinePillPrimary.args = {
151
+ label: 'Pill Primary',
152
+ variant: 'primary',
153
+ outline: true,
154
+ pill: true,
155
+ size: 'medium',
156
+ disabled: false,
157
+ text: false,
158
+ showIcon: false,
159
+ iconOnly: false,
160
+ iconName: Object.keys(feather.icons)[0],
161
+ iconPosition: 'left'
162
+ };
163
+ export const Disabled = Template.bind({});
164
+ Disabled.args = {
165
+ label: 'Disabled',
166
+ variant: 'primary',
167
+ outline: false,
168
+ pill: false,
169
+ size: 'medium',
170
+ disabled: true,
171
+ text: false,
172
+ showIcon: false,
173
+ iconOnly: false,
174
+ iconName: Object.keys(feather.icons)[0],
175
+ iconPosition: 'left'
176
+ };
177
+ export const Text = Template.bind({});
178
+ Text.args = {
179
+ label: 'Text',
180
+ variant: 'secondary',
181
+ outline: false,
182
+ pill: false,
183
+ size: 'medium',
184
+ disabled: false,
185
+ text: true,
186
+ showIcon: false,
187
+ iconOnly: false,
188
+ iconName: Object.keys(feather.icons)[0],
189
+ iconPosition: 'left'
190
+ };
191
+ // const TemplateWithIcon = (args) => `<app-button variant="${args.variant}" size="${args.size}"${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}>
192
+ // ${args.iconPosition == 'left' && args.showIcon ? `<app-icon slot="prefix" name="${args.iconName}"></app-icon>` : ''}
193
+ // ${args.label}
194
+ // ${args.iconPosition == 'right' && args.showIcon ? `<app-icon slot="suffix" name="${args.iconName}"></app-icon>` : ''}
195
+ // </app-button>`;
196
+ // export const WithIcon = TemplateWithIcon.bind({});
197
+ // WithIcon.args = {
198
+ // label: 'Primary',
199
+ // variant: 'primary',
200
+ // outline: false,
201
+ // pill: false,
202
+ // size: 'medium',
203
+ // disabled: false,
204
+ // text: false,
205
+ // showIcon: true,
206
+ // iconName: 'home',
207
+ // iconPosition: 'left'
208
+ // };
209
+ // const TemplateWithOnlyIcon = (args) => `<app-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' : ''}>
210
+ // ${args.iconPosition == 'left' && args.showIcon ? `<app-icon slot="prefix" name="${args.iconName}"></app-icon>` : ''}
211
+ // ${args.label}
212
+ // ${args.iconPosition == 'right' && args.showIcon ? `<app-icon slot="suffix" name="${args.iconName}"></app-icon>` : ''}
213
+ // </app-button>`;
214
+ // export const WithOnlyIcon = TemplateWithOnlyIcon.bind({});
215
+ // WithOnlyIcon.args = {
216
+ // label: '',
217
+ // variant: 'primary',
218
+ // outline: false,
219
+ // pill: true,
220
+ // size: 'medium',
221
+ // disabled: false,
222
+ // text: false,
223
+ // showIcon: true,
224
+ // iconName: 'home',
225
+ // iconPosition: 'left',
226
+ // };
227
+ //# sourceMappingURL=app-button.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"app-button.stories.js","sourceRoot":"","sources":["../../../src/components/app-button/app-button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import feather from 'feather-icons';\n\nexport default {\n title: 'Components/Atoms/Button',\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 ],\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 essere 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\n }\n};\n\n// regular expression to remove all the spaces indenting the template string\n\nconst Template = (args) => `${ !args.label && !args.showIcon ? 'Errore nella configurazione del bottone' : \n `<app-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' : ''}>\n ${args.iconPosition == 'left' && args.showIcon ? `<app-icon slot=\"prefix\" name=\"${args.iconName}\"></app-icon>` : ''}\n ${ !args.iconOnly ? args.label : ''}\n ${args.iconPosition == 'right' && args.showIcon ? `<app-icon slot=\"suffix\" name=\"${args.iconName}\"></app-icon>` : ''}\n </app-button>`.replace(/\\s\\s+/g, '')\n}`;\n\nexport const Primary = Template.bind({});\nPrimary.args = {\n label: 'Primary',\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};\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};\n\nexport const PillPrimary = Template.bind({});\nPillPrimary.args = {\n label: 'Pill Primary',\n variant: 'primary',\n outline: false,\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};\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};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n label: 'Disabled',\n variant: 'primary',\n outline: false,\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};\n\nexport const Text = Template.bind({});\nText.args = {\n label: 'Text',\n variant: 'secondary',\n outline: false,\n pill: false,\n size: 'medium',\n disabled: false,\n text: true,\n showIcon: false,\n iconOnly: false,\n iconName: Object.keys(feather.icons)[0],\n iconPosition: 'left'\n};\n\n// const TemplateWithIcon = (args) => `<app-button variant=\"${args.variant}\" size=\"${args.size}\"${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}>\n// ${args.iconPosition == 'left' && args.showIcon ? `<app-icon slot=\"prefix\" name=\"${args.iconName}\"></app-icon>` : ''}\n// ${args.label}\n// ${args.iconPosition == 'right' && args.showIcon ? `<app-icon slot=\"suffix\" name=\"${args.iconName}\"></app-icon>` : ''}\n// </app-button>`;\n// export const WithIcon = TemplateWithIcon.bind({});\n// WithIcon.args = {\n// label: 'Primary',\n// variant: 'primary',\n// outline: false,\n// pill: false,\n// size: 'medium',\n// disabled: false,\n// text: false,\n// showIcon: true,\n// iconName: 'home',\n// iconPosition: 'left'\n// };\n\n// const TemplateWithOnlyIcon = (args) => `<app-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' : ''}>\n// ${args.iconPosition == 'left' && args.showIcon ? `<app-icon slot=\"prefix\" name=\"${args.iconName}\"></app-icon>` : ''}\n// ${args.label}\n// ${args.iconPosition == 'right' && args.showIcon ? `<app-icon slot=\"suffix\" name=\"${args.iconName}\"></app-icon>` : ''}\n// </app-button>`;\n// export const WithOnlyIcon = TemplateWithOnlyIcon.bind({});\n// WithOnlyIcon.args = {\n// label: '',\n// variant: 'primary',\n// outline: false,\n// pill: true,\n// size: 'medium',\n// disabled: false,\n// text: false,\n// showIcon: true,\n// iconName: 'home',\n// iconPosition: 'left',\n// };\n"]}
@@ -0,0 +1,7 @@
1
+ app-icon {
2
+ display: inline-flex;
3
+ }
4
+ app-icon svg {
5
+ width: 1em;
6
+ height: 1em;
7
+ }
@@ -0,0 +1,64 @@
1
+ import { Host, h } from '@stencil/core';
2
+ import feather from 'feather-icons';
3
+ export class AppIcon {
4
+ constructor() {
5
+ this.name = undefined;
6
+ this.class = undefined;
7
+ }
8
+ componentDidLoad() {
9
+ feather.replace();
10
+ }
11
+ render() {
12
+ return (h(Host, null, h("i", { "data-feather": this.name, class: this.class })));
13
+ }
14
+ static get is() { return "app-icon"; }
15
+ static get originalStyleUrls() {
16
+ return {
17
+ "$": ["app-icon.scss"]
18
+ };
19
+ }
20
+ static get styleUrls() {
21
+ return {
22
+ "$": ["app-icon.css"]
23
+ };
24
+ }
25
+ static get properties() {
26
+ return {
27
+ "name": {
28
+ "type": "string",
29
+ "mutable": false,
30
+ "complexType": {
31
+ "original": "string",
32
+ "resolved": "string",
33
+ "references": {}
34
+ },
35
+ "required": false,
36
+ "optional": false,
37
+ "docs": {
38
+ "tags": [],
39
+ "text": "Name of the icon"
40
+ },
41
+ "attribute": "name",
42
+ "reflect": false
43
+ },
44
+ "class": {
45
+ "type": "string",
46
+ "mutable": false,
47
+ "complexType": {
48
+ "original": "string",
49
+ "resolved": "string",
50
+ "references": {}
51
+ },
52
+ "required": false,
53
+ "optional": false,
54
+ "docs": {
55
+ "tags": [],
56
+ "text": "Additional classes"
57
+ },
58
+ "attribute": "class",
59
+ "reflect": false
60
+ }
61
+ };
62
+ }
63
+ }
64
+ //# sourceMappingURL=app-icon.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"app-icon.js","sourceRoot":"","sources":["../../../src/components/app-icon/app-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,OAAO,MAAM,eAAe,CAAC;AAOpC,MAAM,OAAO,OAAO;;;;;EAYlB,gBAAgB;IACd,OAAO,CAAC,OAAO,EAAE,CAAC;EACpB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,yBAAiB,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAM,CAC9C,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport feather from 'feather-icons';\n\n@Component({\n tag: 'app-icon',\n styleUrl: 'app-icon.scss',\n shadow: false,\n})\nexport class AppIcon {\n /**\n * Name of the icon\n **/\n @Prop() name: string;\n\n /**\n * Additional classes\n **/\n @Prop() class: string;\n\n\n componentDidLoad() {\n feather.replace();\n }\n\n render() {\n return (\n <Host>\n <i data-feather={this.name} class={this.class}></i>\n </Host>\n );\n }\n\n}\n"]}
@@ -0,0 +1,25 @@
1
+ import feather from 'feather-icons';
2
+ export default {
3
+ title: 'Components/Atoms/Icon',
4
+ tags: ['autodocs'],
5
+ argTypes: {
6
+ name: {
7
+ name: 'Nome Icona',
8
+ control: 'select',
9
+ options: Object.keys(feather.icons),
10
+ description: 'Seleziona il nome dell\'icona dal menu a tendina'
11
+ },
12
+ class: {
13
+ name: 'Classi aggiuntive',
14
+ control: 'text',
15
+ description: 'Aggiungi classi aggiuntive all\'icona (separate da spazio)'
16
+ }
17
+ }
18
+ };
19
+ const Template = (args) => `<app-icon class="${args.class}" name="${args.name}"></app-icon>`;
20
+ export const Icon = Template.bind({});
21
+ Icon.args = {
22
+ name: Object.keys(feather.icons)[0],
23
+ class: '',
24
+ };
25
+ //# sourceMappingURL=app-icon.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"app-icon.stories.js","sourceRoot":"","sources":["../../../src/components/app-icon/app-icon.stories.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,eAAe,CAAC;AAEpC,eAAe;EACb,KAAK,EAAE,uBAAuB;EAC9B,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,IAAI,EAAE,YAAY;MAClB,OAAO,EAAE,QAAQ;MACjB,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;MACnC,WAAW,EAAE,kDAAkD;KAChE;IACD,KAAK,EAAE;MACL,IAAI,EAAE,mBAAmB;MACzB,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,4DAA4D;KAC1E;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAoB,IAAI,CAAC,KAAK,WAAW,IAAI,CAAC,IAAI,eAAe,CAAC;AAE7F,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtC,IAAI,CAAC,IAAI,GAAG;EACV,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;EACnC,KAAK,EAAE,EAAE;CACV,CAAC","sourcesContent":["import feather from 'feather-icons';\n\nexport default {\n title: 'Components/Atoms/Icon',\n tags: ['autodocs'],\n argTypes: {\n name: {\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 },\n class: {\n name: 'Classi aggiuntive',\n control: 'text',\n description: 'Aggiungi classi aggiuntive all\\'icona (separate da spazio)'\n }\n }\n};\n\nconst Template = (args) => `<app-icon class=\"${args.class}\" name=\"${args.name}\"></app-icon>`;\n\nexport const Icon = Template.bind({});\nIcon.args = {\n name: Object.keys(feather.icons)[0],\n class: '',\n};"]}
@@ -0,0 +1,2 @@
1
+ export * from './components';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './components';\n"]}