feat(list-item): onClick event

Author: louistiti

src/App.tsx

@@ -781,31 +781,51 @@ export const App: React.FC = () => {
           <WidgetWrapper noPadding>
             <List>
               <ListHeader align="center">Select your music provider</ListHeader>
-              <ListItem align="center" onClick={() => alert('Spotify')}>
+              <ListItem
+                align="center"
+                name="music-provider"
+                value="spotify"
+                onClick={(data) => alert(JSON.stringify(data))}
+              >
                 <Image
                   src="/spotify.svg"
                   width={110}
                   height={31}
                   backgroundSize="contain"
                 />
               </ListItem>
-              <ListItem align="center" onClick={() => alert('Apple Music')}>
+              <ListItem
+                align="center"
+                name="music-provider"
+                value="apple-music"
+                onClick={(data) => alert(JSON.stringify(data))}
+              >
                 <Image
                   src="/apple-music.svg"
                   width={110}
                   height={31}
                   backgroundSize="contain"
                 />
               </ListItem>
-              <ListItem align="center" onClick={() => alert('YouTube Music')}>
+              <ListItem
+                align="center"
+                name="music-provider"
+                value="youtube-music"
+                onClick={(data) => alert(JSON.stringify(data))}
+              >
                 <Image
                   src="/youtube-music.svg"
                   width={110}
                   height={31}
                   backgroundSize="contain"
                 />
               </ListItem>
-              <ListItem align="center" onClick={() => alert('Deezer')}>
+              <ListItem
+                align="center"
+                name="music-provider"
+                value="deezer"
+                onClick={(data) => alert(JSON.stringify(data))}
+              >
                 <Image
                   src="/deezer.svg"
                   width={110}

src/components/lists/list-item/list-item.tsx

@@ -2,15 +2,28 @@ import classNames from 'clsx'
 
 import { Icon } from '../../..'
 
+interface ListItemOnClickData {
+  name: string | undefined
+  value: string | number | undefined
+}
+
 export interface ListItemProps {
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   children: any
   // children: React.ReactNode
   align?: 'left' | 'center'
-  onClick?: () => void
+  name?: string
+  value?: string | number | undefined
+  onClick?: (data: ListItemOnClickData) => void
 }
 
-export function ListItem({ children, align, onClick }: ListItemProps) {
+export function ListItem({
+  children,
+  align,
+  name,
+  value,
+  onClick
+}: ListItemProps) {
   let isClickable = false
 
   if (onClick) {
@@ -19,11 +32,28 @@ export function ListItem({ children, align, onClick }: ListItemProps) {
 
   return (
     <li
+      data-aurora-name={name}
+      value={value}
       className={classNames('aurora-list-item', {
         'aurora-list-item--clickable': isClickable,
         [`aurora-list-item--${align}`]: align
       })}
-      onClick={isClickable ? onClick : undefined}
+      onClick={(event) => {
+        if (!isClickable) {
+          return
+        }
+
+        event.preventDefault()
+
+        const data = {
+          name,
+          value
+        }
+
+        if (onClick) {
+          onClick(data)
+        }
+      }}
     >
       {isClickable ? (
         <>