@wix/design-system/dist/docs/components/ListItemSelectIconExamples.md

@wix/design-system

## Feature Examples


### Selected
- description: <p>Indicate which item is chosed with <code>selected</code> prop.</p>
- example: 
```jsx 
() => {
  const [selectedId, setSelectedId] = React.useState("favorite");

  const icons = [
    { id: "favorite", icon: <Icons.Favorite />, label: "Favorite" },
    { id: "heart", icon: <Icons.Heart />, label: "Heart" },

  ];

  return (
    <Box width="200px" direction="vertical" padding="20px" gap="4px">
      {icons.map(({ id, icon, label }) => (
        <ListItemSelectIcon
          key={id}
          icon={icon}
          label={label}
          selected={selectedId === id}
          onClick={() => setSelectedId(id)}
        />
      ))}
    </Box>
  );
};
```

### Size
- description: <p>Item size depends on the icon provided. If a small icon is used, the list item will automatically adjust its size to fit.</p>
- example: 
```jsx 
() => {
  const icons = [
    { id: 'favorite', icon: <Icons.Favorite />, label: 'Favorite' },
    { id: 'heart', icon: <Icons.HeartSmall />, label: 'Heart' },
  ];

  return (
    <Box width="200px" direction="vertical" padding="20px" gap="4px">
      {icons.map(({ id, icon, label }) => (
        <ListItemSelectIcon
          key={id}
          icon={icon}
          label={label}
          onClick={() => setSelectedId(id)}
        />
      ))}
    </Box>
  );
};
```

### Disabled
- description: <p>Component can be disabled, it automatically changes color of all areas if used as text or icon.</p>
- example: 
```jsx 
() => {
  const [selectedId, setSelectedId] = React.useState("favorite");

  const icons = [
    { id: "favorite", icon: <Icons.Favorite />, label: "Favorite" },
    { id: "heart", icon: <Icons.Heart />, label: "Heart", disabled: true },
  ];

  return (
    <Box width="200px" direction="vertical" padding="20px" gap="4px">
      {icons.map(({ id, icon, label, disabled }) => (
        <ListItemSelectIcon
          key={id}
          icon={icon}
          label={label}
          disabled={disabled}
          selected={selectedId === id}
          onClick={() => setSelectedId(id)}
        />
      ))}
    </Box>
  );
};
```

### Custom content
- description: <p>Pass custom content in the item depending on your use-case. You can construct any dropdown based selection list, from status selector with <Badges/> or color selector when needed.</p>
- example: 
```jsx 
() => {
  const [selectedId, setSelectedId] = React.useState("icon");

  const items = [
    {
      id: "icon",
      icon: <Icons.Favorite />,
      label: "Favorite icon",
    },
    {
      id: "avatar",
      icon: <Avatar size="size24" name="John Doe" />,
      label: "User avatar",
    },
    {
      id: "badge",
      icon: <Badge skin="standard">Badge</Badge>,
      label: "Notifications badge",
    },
  ];

  return (
    <Box width="200" direction="vertical" padding="20px" gap="4px">
      {items.map(({ id, icon, label }) => (
        <ListItemSelectIcon
          key={id}
          icon={icon}
          label={label}
          onClick={() => setSelectedId(id)}
        />
      ))}
    </Box>
  );
};
```