@italia/button 0.0.1-alpha.0 → 0.1.0-alpha.2
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/custom-elements.json +62 -24
- package/dist/src/it-button.d.ts +6 -4
- package/dist/src/it-button.d.ts.map +1 -1
- package/dist/src/it-button.js +994 -73
- package/dist/src/it-button.js.map +1 -1
- package/package.json +17 -14
- package/styles/globals.scss +7 -1
package/custom-elements.json
CHANGED
|
@@ -34,13 +34,11 @@
|
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
"kind": "field",
|
|
37
|
-
"name": "
|
|
37
|
+
"name": "_nativeButton",
|
|
38
38
|
"type": {
|
|
39
|
-
"text": "
|
|
39
|
+
"text": "HTMLButtonElement"
|
|
40
40
|
},
|
|
41
|
-
"privacy": "private"
|
|
42
|
-
"default": "''",
|
|
43
|
-
"attribute": "_buttonClasses"
|
|
41
|
+
"privacy": "private"
|
|
44
42
|
},
|
|
45
43
|
{
|
|
46
44
|
"kind": "field",
|
|
@@ -49,7 +47,8 @@
|
|
|
49
47
|
"text": "string"
|
|
50
48
|
},
|
|
51
49
|
"default": "'button'",
|
|
52
|
-
"attribute": "type"
|
|
50
|
+
"attribute": "type",
|
|
51
|
+
"reflects": true
|
|
53
52
|
},
|
|
54
53
|
{
|
|
55
54
|
"kind": "field",
|
|
@@ -58,7 +57,8 @@
|
|
|
58
57
|
"text": "Variants"
|
|
59
58
|
},
|
|
60
59
|
"default": "''",
|
|
61
|
-
"attribute": "variant"
|
|
60
|
+
"attribute": "variant",
|
|
61
|
+
"reflects": true
|
|
62
62
|
},
|
|
63
63
|
{
|
|
64
64
|
"kind": "field",
|
|
@@ -67,7 +67,8 @@
|
|
|
67
67
|
"text": "Sizes"
|
|
68
68
|
},
|
|
69
69
|
"default": "''",
|
|
70
|
-
"attribute": "size"
|
|
70
|
+
"attribute": "size",
|
|
71
|
+
"reflects": true
|
|
71
72
|
},
|
|
72
73
|
{
|
|
73
74
|
"kind": "field",
|
|
@@ -76,7 +77,8 @@
|
|
|
76
77
|
"text": "boolean"
|
|
77
78
|
},
|
|
78
79
|
"default": "false",
|
|
79
|
-
"attribute": "outline"
|
|
80
|
+
"attribute": "outline",
|
|
81
|
+
"reflects": true
|
|
80
82
|
},
|
|
81
83
|
{
|
|
82
84
|
"kind": "field",
|
|
@@ -85,7 +87,8 @@
|
|
|
85
87
|
"text": "boolean"
|
|
86
88
|
},
|
|
87
89
|
"default": "false",
|
|
88
|
-
"attribute": "block"
|
|
90
|
+
"attribute": "block",
|
|
91
|
+
"reflects": true
|
|
89
92
|
},
|
|
90
93
|
{
|
|
91
94
|
"kind": "field",
|
|
@@ -94,7 +97,8 @@
|
|
|
94
97
|
"text": "boolean"
|
|
95
98
|
},
|
|
96
99
|
"default": "false",
|
|
97
|
-
"attribute": "icon"
|
|
100
|
+
"attribute": "icon",
|
|
101
|
+
"reflects": true
|
|
98
102
|
},
|
|
99
103
|
{
|
|
100
104
|
"kind": "field",
|
|
@@ -110,6 +114,24 @@
|
|
|
110
114
|
"name": "internals",
|
|
111
115
|
"attribute": "internals"
|
|
112
116
|
},
|
|
117
|
+
{
|
|
118
|
+
"kind": "field",
|
|
119
|
+
"name": "disabled",
|
|
120
|
+
"type": {
|
|
121
|
+
"text": "boolean | undefined"
|
|
122
|
+
},
|
|
123
|
+
"attribute": "it-aria-disabled",
|
|
124
|
+
"reflects": true
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"kind": "field",
|
|
128
|
+
"name": "expanded",
|
|
129
|
+
"type": {
|
|
130
|
+
"text": "boolean | undefined"
|
|
131
|
+
},
|
|
132
|
+
"attribute": "it-aria-expanded",
|
|
133
|
+
"reflects": true
|
|
134
|
+
},
|
|
113
135
|
{
|
|
114
136
|
"kind": "method",
|
|
115
137
|
"name": "surfaceSubmitEvent",
|
|
@@ -126,17 +148,19 @@
|
|
|
126
148
|
"kind": "field",
|
|
127
149
|
"name": "form",
|
|
128
150
|
"readonly": true
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"kind": "method",
|
|
154
|
+
"name": "focus",
|
|
155
|
+
"privacy": "public"
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
"kind": "field",
|
|
159
|
+
"name": "_onKeyDown",
|
|
160
|
+
"privacy": "private"
|
|
129
161
|
}
|
|
130
162
|
],
|
|
131
163
|
"attributes": [
|
|
132
|
-
{
|
|
133
|
-
"name": "_buttonClasses",
|
|
134
|
-
"type": {
|
|
135
|
-
"text": "string"
|
|
136
|
-
},
|
|
137
|
-
"default": "''",
|
|
138
|
-
"fieldName": "_buttonClasses"
|
|
139
|
-
},
|
|
140
164
|
{
|
|
141
165
|
"name": "type",
|
|
142
166
|
"type": {
|
|
@@ -196,6 +220,20 @@
|
|
|
196
220
|
{
|
|
197
221
|
"name": "internals",
|
|
198
222
|
"fieldName": "internals"
|
|
223
|
+
},
|
|
224
|
+
{
|
|
225
|
+
"name": "it-aria-disabled",
|
|
226
|
+
"type": {
|
|
227
|
+
"text": "boolean | undefined"
|
|
228
|
+
},
|
|
229
|
+
"fieldName": "disabled"
|
|
230
|
+
},
|
|
231
|
+
{
|
|
232
|
+
"name": "it-aria-expanded",
|
|
233
|
+
"type": {
|
|
234
|
+
"text": "boolean | undefined"
|
|
235
|
+
},
|
|
236
|
+
"fieldName": "expanded"
|
|
199
237
|
}
|
|
200
238
|
],
|
|
201
239
|
"superclass": {
|
|
@@ -272,7 +310,7 @@
|
|
|
272
310
|
{
|
|
273
311
|
"kind": "variable",
|
|
274
312
|
"name": "meta",
|
|
275
|
-
"default": "{ title: 'Componenti/Button', tags: ['autodocs'], component: 'it-button', args: { slot: 'Testo del pulsante', variant: 'primary', size: undefined, block: false, outline: false,
|
|
313
|
+
"default": "{ title: 'Componenti/Button', tags: ['autodocs'], component: 'it-button', args: { slot: 'Testo del pulsante', variant: 'primary', size: undefined, block: false, outline: false, disabled: false, icon: false, type: 'button', value: '', 'aria-label': 'Aria label', }, argTypes: { variant: { control: 'select', description: 'Varianti di colore', options: BUTTON_VARIANTS, }, size: { control: 'select', description: 'Dimensione del pulsante', options: BUTTON_SIZES, }, block: { control: 'boolean', type: 'boolean', description: 'Quando abilitato, estende il componente Button fino a prendere tutta la larghezza disponibile', table: { defaultValue: { summary: 'false' } }, }, disabled: { control: 'boolean', type: 'boolean', name: 'it-aria-disabled', table: { defaultValue: { summary: 'false' } }, }, outline: { control: 'boolean', type: 'boolean', description: 'Applica il colore solamente al bordo, usando il colore di sfondo come colore interno del pulsante.', table: { defaultValue: { summary: 'false' } }, }, icon: { control: 'boolean', type: 'boolean', description: \"Se il pulsante mostra un'icona, è necessario aggiungere questo attributo.\", table: { defaultValue: { summary: 'false' } }, }, slot: { control: 'text', description: 'Testo del pulsante', }, 'aria-label': { control: 'text', description: 'Testo aria-label del pulsante', }, type: { control: 'select', description: 'Tipologia di pulsante', options: ['button', 'submit', 'reset'], table: { defaultValue: { summary: 'button' } }, }, value: { control: 'text', }, }, parameters: { docs: { description: { component: ` <Description>Pulsante con etichetta di testo o icona che al click inizia un'azione o un evento.</Description> Per indicazioni su \"Come e Quando usarlo\" si fa riferimento alla [guida del design-system](https://designers.italia.it/design-system/componenti/buttons/). `, }, }, }, } satisfies Meta<ButtonProps>"
|
|
276
314
|
},
|
|
277
315
|
{
|
|
278
316
|
"kind": "variable",
|
|
@@ -296,7 +334,7 @@
|
|
|
296
334
|
"type": {
|
|
297
335
|
"text": "Story"
|
|
298
336
|
},
|
|
299
|
-
"default": "{ name: 'Varianti di colore', args: { slot: '' }, argTypes: { variant: { table: { disable: true, }, }, outline: { table: { disable: true, }, },
|
|
337
|
+
"default": "{ name: 'Varianti di colore', args: { slot: '' }, argTypes: { variant: { table: { disable: true, }, }, outline: { table: { disable: true, }, }, disabled: { table: { disable: true, }, }, }, parameters: { docs: { description: { story: ` Gli stili definiti da Bootstrap Italia utilizzano un naming consistente con Bootstrap, con alcune personalizzazioni. <div class=\"callout callout-success\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Accessibilità</span></div> <p> Le classi \\`.btn\\` e \\`.btn-\\` conferiscono agli elementi html l’aspetto visivo di un pulsante. Anche elementi \\`<a>\\` o \\`<span>\\` possono subire questa trasformazione provocando discrepanza tra ciò che si rappresenta e la funzione semantica dell’elemento. <br/> Questo può provocare complesse problematiche di accessibilità. <br/><br/> Dove il click sul pulsante non genera un cambio di pagina utilizzare esclusivamente il componente \\`<it-button>\\`. <br/><br/> Qualora non fosse possibile, è necessario applicare in modo appropriato l’attributo \\`role=\"button\"\\` per trasmetterne lo scopo alle tecnologie assistive.</p></div></div> #### Note sullo stato disabilitato I pulsanti disabilitati dovranno avere l'attributo \\`aria-disabled=\"true\"\\` per indicare lo stato dell’elemento alle tecnologie assistive. Quando si utilizza l'attributo \\`aria-disabled\\` è consigliato usare anche l'attributo \\`aria-describedby\\` (o un elemento all'interno del bottone con classe \\`.sr-only\\`) per informare tramite gli screen-reader il motivo per il quale il pulsante è disabilitato. <br/> È sconsigliato l'uso dell'attributo \\`disabled\\`. `, }, }, }, render: (args) => html` ${renderVariant({ ...args, variant: 'primary' }, 'Primary')} ${renderVariant({ ...args, variant: 'secondary' }, 'Secondary')} ${renderVariant({ ...args, variant: 'success' }, 'Success')} ${renderVariant({ ...args, variant: 'danger' }, 'Danger')} ${renderVariant({ ...args, variant: 'warning' }, 'Warning')} ${renderVariant({ ...args, variant: 'link' }, 'Pulsante link')} `, }"
|
|
300
338
|
},
|
|
301
339
|
{
|
|
302
340
|
"kind": "variable",
|
|
@@ -320,7 +358,7 @@
|
|
|
320
358
|
"type": {
|
|
321
359
|
"text": "Story"
|
|
322
360
|
},
|
|
323
|
-
"default": "{ name: 'Sfondo scuro', args: { slot: '' }, argTypes: { variant: { table: { disable: true, }, }, outline: { table: { disable: true, }, },
|
|
361
|
+
"default": "{ name: 'Sfondo scuro', args: { slot: '' }, argTypes: { variant: { table: { disable: true, }, }, outline: { table: { disable: true, }, }, disabled: { table: { disable: true, }, }, }, parameters: { docs: { description: { story: ` <div class=\"callout callout-success\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Trasmettere significato alle tecnologie assistive</span></div> <p> L’uso del colore per aggiungere un significato fornisce solo un’indicazione visiva, che non sarà trasmesso agli utenti di tecnologie assistive – come gli screen reader. Assicurati che le informazioni denotate dal colore siano rese disponibili anche dal contenuto stesso (es.: il testo visibile), o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la classe <code>.visually-hidden</code>.</p></div></div>`, }, }, }, render: (args) => html` <div class=\"bg-dark p-4\"> ${renderVariant({ ...args, variant: 'primary' }, 'Primary')} ${renderVariant({ ...args, variant: 'secondary' }, 'Secondary')} ${renderVariant({ ...args, variant: 'link' }, 'Pulsante link')} </div> `, }"
|
|
324
362
|
},
|
|
325
363
|
{
|
|
326
364
|
"kind": "variable",
|
|
@@ -328,7 +366,7 @@
|
|
|
328
366
|
"type": {
|
|
329
367
|
"text": "Story"
|
|
330
368
|
},
|
|
331
|
-
"default": "{ ...meta, name: 'Con icona', args: {}, argTypes: { variant: { table: { disable: true, }, }, size: { table: { disable: true, }, }, }, parameters: { docs: { description: { story: `
|
|
369
|
+
"default": "{ ...meta, name: 'Con icona', args: {}, argTypes: { variant: { table: { disable: true, }, }, size: { table: { disable: true, }, }, }, parameters: { docs: { description: { story: ` È necessario passare l'attributo \\`icon=\"true\"\\` (o \\`icon=\"\"\\`, o semplicemente \\`icon\\`) a \\`<it-button>\\` per applicargli gli stili corretti. L’icona può essere posizionata a sinistra o a destra del testo, a seconda della posizione in cui viene inserita all’interno del pulsante. <br/><br/> #### Dimensione dell'icona - Nei pulsanti di dimensione \\`lg\\` o default (\\`sm\\`), è necessario passare l'attributo \\`size=\"sm\"\\` all'icona. - Nei pulsanti di dimensione \\`xs\\`, è necessario passare l'attributo \\`size=\"xs\"\\` all'icona . #### Allineamento e spaziatura dell’icona Nel caso si utilizzi un’icona all’interno di un elemento \\`<it-button>\\` è necessario inserire il testo del pulsante all’interno di un tag \\`<span/>\\` al fine di garantire un perfetto allineamento ed una corretta spaziatura tra l’icona e lo stesso testo. <div class=\"callout callout-success\"><div class=\"callout-inner\"><div class=\"callout-title\"><span class=\"text\">Accessibilità</span></div> <p> Le icone sono di default puramente decorative. Nel caso in cui l'icona non debba essere un elemento decorativo, è necessario utilizzare correttamente gli attributi \\`label\\`, \\`role\\` e \\`aria-hidden\\` sul componente \\`<it-icon>\\`. Per maggiori dettagli visita la [guida dedicata](?path=/docs/componenti-icon--documentazione) al componente \\`<it-icon>\\`.</p></div></div> `, }, }, }, render: (params) => { const slot = params.slot?.length > 0 ? params.slot : null; return html` <div class=\"flex\"> <it-button variant=\"success\" size=\"lg\" icon ?outline=\"${params.outline}\" ?block=\"${params.block}\" ?it-aria-disabled=\"${params.disabled}\" type=\"${params.type}\" > <it-icon name=\"it-star-full\" color=\"white\" size=\"sm\"></it-icon> <span>${slot ?? 'Pulsante Large con icona'}</span> </it-button> <it-button variant=\"primary\" icon ?outline=\"${params.outline}\" ?block=\"${params.block}\" ?it-aria-disabled=\"${params.disabled}\" type=\"${params.type}\" > <it-icon name=\"it-star-full\" color=\"white\" size=\"sm\"></it-icon> <span>${slot ?? 'Pulsante con icona'}</span> </it-button> <it-button variant=\"danger\" size=\"xs\" icon ?outline=\"${params.outline}\" ?block=\"${params.block}\" ?it-aria-disabled=\"${params.disabled}\" type=\"${params.type}\" > <it-icon name=\"it-star-full\" color=\"white\" size=\"xs\"></it-icon> <span>${slot ?? 'Pulsante Extra Small con icona'}</span> </it-button> <it-button variant=\"link\" size=\"xs\" icon ?outline=\"${params.outline}\" ?block=\"${params.block}\" ?it-aria-disabled=\"${params.disabled}\" type=\"${params.type}\" > <it-icon name=\"it-star-full\" color=\"primary\" size=\"xs\"></it-icon> <span>${slot ?? 'Pulsante Link Extra Small con icona'}</span> </it-button> </div>`; }, }"
|
|
332
370
|
},
|
|
333
371
|
{
|
|
334
372
|
"kind": "variable",
|
|
@@ -336,7 +374,7 @@
|
|
|
336
374
|
"type": {
|
|
337
375
|
"text": "Story"
|
|
338
376
|
},
|
|
339
|
-
"default": "{ ...meta, name: 'Con icona cerchiata', args: {}, argTypes: { variant: { table: { disable: true, }, }, size: { table: { disable: true, }, }, }, parameters: { docs: { description: { story: `
|
|
377
|
+
"default": "{ ...meta, name: 'Con icona cerchiata', args: {}, argTypes: { variant: { table: { disable: true, }, }, size: { table: { disable: true, }, }, }, parameters: { docs: { description: { story: ` È necessario passare l'attributo \\`icon=\"true\"\\` (o \\`icon=\"\"\\`, o semplicemente \\`icon\\`) a \\`<it-button>\\` per applicargli gli stili corretti. L’icona può essere posizionata a sinistra o a destra del testo, a seconda della posizione in cui viene inserita all’interno del pulsante. <br/>Deve essere contenuta all'interno di uno elemento con classe\\`.rounded-icon\\` per poter avere il contorno circolare. <br/><br/> #### Dimensione dell'icona La dimensione dell'icona deve sempre essere \\`xs\\`, quindi \\`<it-icon>\\` deve avere sempre l'attributo \\`size=\"xs\"\\`. `, }, }, }, render: (params) => { const slot = params.slot?.length > 0 ? params.slot : null; return html` <it-button class=\"me-2\" variant=\"success\" size=\"lg\" icon ?outline=\"${params.outline}\" ?block=\"${params.block}\" ?it-aria-disabled=\"${params.disabled}\" type=\"${params.type}\" > <span class=\"rounded-icon\"> <it-icon name=\"it-user\" color=\"success\" size=\"xs\"></it-icon> </span> <span>${slot ?? 'Pulsante Large con icona'}</span> </it-button> <it-button class=\"me-2\" variant=\"primary\" icon ?outline=\"${params.outline}\" ?block=\"${params.block}\" ?it-aria-disabled=\"${params.disabled}\" type=\"${params.type}\" > <span class=\"rounded-icon\" size=\"sm\"> <it-icon name=\"it-user\" color=\"primary\" size=\"xs\"></it-icon> </span> <span>${slot ?? 'Pulsante con icona'}</span> </it-button> <it-button class=\"me-2\" variant=\"danger\" icon ?outline=\"${params.outline}\" ?block=\"${params.block}\" ?it-aria-disabled=\"${params.disabled}\" type=\"${params.type}\" > <span class=\"rounded-icon\"> <it-icon name=\"it-user\" color=\"danger\" size=\"xs\"></it-icon> </span> <span>${slot ?? 'Pulsante Small con icona'}</span> </it-button> <it-button class=\"me-2\" variant=\"secondary\" size=\"xs\" icon ?outline=\"${params.outline}\" ?block=\"${params.block}\" ?it-aria-disabled=\"${params.disabled}\" type=\"${params.type}\" > <span class=\"rounded-icon\"> <it-icon name=\"it-user\" color=\"secondary\" size=\"xs\"></it-icon> </span> <span>${slot ?? 'Pulsante Link Extra Small con icona'}</span> </it-button> `; }, }"
|
|
340
378
|
}
|
|
341
379
|
],
|
|
342
380
|
"exports": [
|
package/dist/src/it-button.d.ts
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { BaseComponent } from '@italia/globals';
|
|
2
|
-
import { PropertyValues } from 'lit';
|
|
3
2
|
import { type Sizes, type Variants } from './types.js';
|
|
4
3
|
export declare class ItButton extends BaseComponent {
|
|
5
4
|
static styles: import("lit").CSSResultGroup;
|
|
6
5
|
static get formAssociated(): boolean;
|
|
7
|
-
private
|
|
6
|
+
private _nativeButton;
|
|
8
7
|
type: string;
|
|
9
8
|
variant: Variants;
|
|
10
9
|
size: Sizes;
|
|
@@ -13,11 +12,14 @@ export declare class ItButton extends BaseComponent {
|
|
|
13
12
|
icon: boolean;
|
|
14
13
|
value: string;
|
|
15
14
|
internals: ElementInternals;
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
expanded?: boolean;
|
|
18
17
|
surfaceSubmitEvent(event: any): void;
|
|
19
18
|
get form(): HTMLFormElement | null;
|
|
19
|
+
focus(): void;
|
|
20
|
+
private _onKeyDown;
|
|
20
21
|
connectedCallback(): void;
|
|
22
|
+
disconnectedCallback(): void;
|
|
21
23
|
render(): import("lit").TemplateResult<1>;
|
|
22
24
|
}
|
|
23
25
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"it-button.d.ts","sourceRoot":"","sources":["../../src/it-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"it-button.d.ts","sourceRoot":"","sources":["../../src/it-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAI/D,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGvD,qBACa,QAAS,SAAQ,aAAa;IACzC,MAAM,CAAC,MAAM,+BAAU;IAEvB,MAAM,KAAK,cAAc,YAExB;IAEgB,OAAO,CAAC,aAAa,CAAqB;IAEhB,IAAI,SAAY;IAEhB,OAAO,EAAE,QAAQ,CAAM;IAEvB,IAAI,EAAE,KAAK,CAAM;IAEhB,OAAO,UAAS;IAEhB,KAAK,UAAS;IAEd,IAAI,UAAS;IAE7B,KAAK,SAAM;IAE3B,SAAS,mBAA0B;IAE4B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAE9F,kBAAkB,CAAC,KAAK,EAAE,GAAG;IAmC7B,IAAI,IAAI,2BAEP;IAEe,KAAK;IAIrB,OAAO,CAAC,UAAU,CAKhB;IAEF,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAMnB,MAAM;CA6BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
|