Skip to content

Commit 5021fd1

Browse files
astagiastagi
committed
feat: new lists
1 parent 99cf472 commit 5021fd1

File tree

2 files changed

+48
-50
lines changed

2 files changed

+48
-50
lines changed

‎src/List/ListItem.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,9 @@ export const ListItem: FC<ListItemProps> & {
5555
if (href) {
5656
return (
5757
<li className={wrapperClassName} data-testid={testId}>
58-
<Tag>
59-
<a href={href || '#'} {...attributes} className={classes}>
60-
{children}
61-
</a>
62-
</Tag>
58+
<a href={href || '#'} {...attributes} className={classes}>
59+
<div className="it-right-zone">{children}</div>
60+
</a>
6361
</li>
6462
);
6563
}

‎stories/Components/List.stories.tsx

+45-45
Original file line numberDiff line numberDiff line change
@@ -58,15 +58,15 @@ export const ListaFreccia: Story = {
5858
<List>
5959
<ListItem>
6060
<span className='text'>Testo</span>
61-
<Icon icon='it-chevron-right' />
61+
<Icon icon='it-chevron-right' title='Freccia destra' />
6262
</ListItem>
63-
<ListItem tag={'a'}>
63+
<ListItem href="#">
6464
<span className='text'>Link</span>
65-
<Icon icon='it-chevron-right' />
65+
<Icon icon='it-chevron-right' title='Freccia destra' />
6666
</ListItem>
67-
<ListItem active tag={'a'}>
67+
<ListItem active href="#">
6868
<span className='text'>Link attivo</span>
69-
<Icon icon='it-chevron-right' />
69+
<Icon icon='it-chevron-right' title='Freccia destra' />
7070
</ListItem>
7171
</List>
7272
)
@@ -78,14 +78,14 @@ export const ListaAzioniMultiple: Story = {
7878
<ListItem>
7979
<span className='text'>Testo</span>
8080
<ListItem.MultipleAction>
81-
<a href='#' aria-label='Testo - Azione '>
82-
<Icon icon='it-code-circle' />
81+
<a href='#' aria-label='Testo - Azione 1'>
82+
<Icon icon='it-code-circle' title='Codice' />
8383
</a>
84-
<a href='#' aria-label='Testo - Azione '>
85-
<Icon icon='it-code-circle' />
84+
<a href='#' aria-label='Testo - Azione 2'>
85+
<Icon icon='it-code-circle' title='Codice' />
8686
</a>
87-
<a href='#' aria-label='Testo - Azione '>
88-
<Icon icon='it-code-circle' />
87+
<a href='#' aria-label='Testo - Azione 3'>
88+
<Icon icon='it-code-circle' title='Codice' />
8989
</a>
9090
</ListItem.MultipleAction>
9191
</ListItem>
@@ -95,13 +95,13 @@ export const ListaAzioniMultiple: Story = {
9595
</a>
9696
<ListItem.MultipleAction>
9797
<a href='#' aria-label='Testo - Azione '>
98-
<Icon icon='it-code-circle' />
98+
<Icon icon='it-code-circle' title='Codice' />
9999
</a>
100100
<a href='#' aria-label='Testo - Azione '>
101-
<Icon icon='it-code-circle' />
101+
<Icon icon='it-code-circle' title='Codice' />
102102
</a>
103103
<a href='#' aria-label='Testo - Azione '>
104-
<Icon icon='it-code-circle' />
104+
<Icon icon='it-code-circle' title='Codice' />
105105
</a>
106106
</ListItem.MultipleAction>
107107
</ListItem>
@@ -111,13 +111,13 @@ export const ListaAzioniMultiple: Story = {
111111
</a>
112112
<ListItem.MultipleAction>
113113
<a href='#' aria-label='Testo - Azione '>
114-
<Icon icon='it-code-circle' />
114+
<Icon icon='it-code-circle' title='Codice' />
115115
</a>
116116
<a href='#' aria-label='Testo - Azione '>
117-
<Icon icon='it-code-circle' />
117+
<Icon icon='it-code-circle' title='Codice' />
118118
</a>
119119
<a href='#' aria-label='Testo - Azione '>
120-
<Icon icon='it-code-circle' />
120+
<Icon icon='it-code-circle' title='Codice' />
121121
</a>
122122
</ListItem.MultipleAction>
123123
</ListItem>
@@ -184,78 +184,78 @@ export const ListaTestoAzioniMultipleMetadata: Story = {
184184
render: () => (
185185
<List>
186186
<ListItem>
187-
<span className='text'>
188-
Testo<em>Lorem ipsum dolor sit amet.</em>
189-
</span>
187+
<div className='text'>
188+
<h4 className='text m-0'>Testo</h4>
189+
<p className='small m-0'>Lorem ipsum dolor sit amet.</p>
190+
</div>
190191
<ListItem.MultipleAction>
191192
<span className='metadata'>metadata testo</span>
192193
<a href='#' aria-label='Testo - Azione '>
193-
<Icon icon='it-code-circle' />
194+
<Icon icon='it-code-circle' title='Codice' />
194195
</a>
195196
<a href='#' aria-label='Testo - Azione '>
196-
<Icon icon='it-code-circle' />
197+
<Icon icon='it-code-circle' title='Codice' />
197198
</a>
198199
<a href='#' aria-label='Testo - Azione '>
199-
<Icon icon='it-code-circle' />
200+
<Icon icon='it-code-circle' title='Codice' />
200201
</a>
201202
</ListItem.MultipleAction>
202203
</ListItem>
203204
<ListItem>
204-
<span className='text'>
205-
Testo 2<em>Lorem ipsum dolor sit amet.</em>
206-
</span>
205+
<div className='text'>
206+
<h4 className='text m-0'>Testo</h4>
207+
<p className='small m-0'>Lorem ipsum dolor sit amet.</p>
208+
</div>
207209
<ListItem.MultipleAction>
208210
<span className='metadata'>
209211
<a href='#'>metadata link</a>
210212
</span>
211213
<a href='#' aria-label='Testo - Azione '>
212-
<Icon icon='it-code-circle' />
214+
<Icon icon='it-code-circle' title='Codice' />
213215
</a>
214216
<a href='#' aria-label='Testo - Azione '>
215-
<Icon icon='it-code-circle' />
217+
<Icon icon='it-code-circle' title='Codice' />
216218
</a>
217219
<a href='#' aria-label='Testo - Azione '>
218-
<Icon icon='it-code-circle' />
220+
<Icon icon='it-code-circle' title='Codice' />
219221
</a>
220222
</ListItem.MultipleAction>
221223
</ListItem>
222224
<ListItem>
223-
<a href='#'>
224-
<span className='text'>
225-
Link<em>Lorem ipsum dolor sit amet.</em>
226-
</span>
227-
</a>
225+
<div>
226+
<h4 className='text m-0'><a href='#'>Testo</a></h4>
227+
<p className='small m-0'>Lorem ipsum dolor sit amet.</p>
228+
</div>
228229
<ListItem.MultipleAction>
229230
<span className='metadata'>
230231
<a href='#'>metadata link</a>
231232
</span>
232233
<a href='#' aria-label='Testo - Azione '>
233-
<Icon icon='it-code-circle' />
234+
<Icon icon='it-code-circle' title='Codice' />
234235
</a>
235236
<a href='#' aria-label='Testo - Azione '>
236-
<Icon icon='it-code-circle' />
237+
<Icon icon='it-code-circle' title='Codice' />
237238
</a>
238239
<a href='#' aria-label='Testo - Azione '>
239-
<Icon icon='it-code-circle' />
240+
<Icon icon='it-code-circle' title='Codice' />
240241
</a>
241242
</ListItem.MultipleAction>
242243
</ListItem>
243244
<ListItem active>
244-
<a href='#'>
245-
<span className='text'>
246-
Link attivo<em>Lorem ipsum dolor sit amet.</em>
247-
</span>
248-
</a>
245+
<div>
246+
<h4 className='text m-0'><a href='#'>Testo</a></h4>
247+
<p className='small m-0'>Lorem ipsum dolor sit amet.</p>
248+
</div>
249249
<ListItem.MultipleAction>
250250
<span className='metadata'>metadata testo</span>
251251
<a href='#' aria-label='Testo - Azione '>
252-
<Icon icon='it-code-circle' />
252+
<Icon icon='it-code-circle' title='Codice' />
253253
</a>
254254
<a href='#' aria-label='Testo - Azione '>
255-
<Icon icon='it-code-circle' />
255+
<Icon icon='it-code-circle' title='Codice' />
256256
</a>
257257
<a href='#' aria-label='Testo - Azione '>
258-
<Icon icon='it-code-circle' />
258+
<Icon icon='it-code-circle' title='Codice' />
259259
</a>
260260
</ListItem.MultipleAction>
261261
</ListItem>

0 commit comments

Comments
 (0)