import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";

import * as ListStories from "./List.stories";

<Meta of={ListStories} />

# List

The List component provides a way to display a collection of items. It's designed to present related content in a consistent and accessible format, with support for various styling options and interactive behaviors.

## Usage

<Canvas of={ListStories.Documentation} source={ { code: `
import React from "react";
import { List } from "@webiny/admin-ui";
import { ReactComponent as UserIcon } from "@webiny/icons/person.svg";
import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";

const ListExample = () => {
return (

<List variant="underline" background="base">
  <List.Item
    icon={<UserIcon />}
    title="User Profile"
    description="View and edit your profile information"
    onClick={() => console.log("User Profile clicked")}
  />
  <List.Item
    icon={<SettingsIcon />}
    title="Settings"
    description="Configure application settings"
    onClick={() => console.log("Settings clicked")}
  />
  <List.Item
    icon={<HelpIcon />}
    title="Help & Support"
    description="Get assistance and view documentation"
    onClick={() => console.log("Help & Support clicked")}
  />
</List>
); };

export default ListExample;

` } }
additionalActions={[
{
title: 'Open in GitHub',
onClick: () => {
window.open(
'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/List/List.tsx',
'_blank'
);
},
}
]}
/>

<Controls of={ListStories.Documentation} />

```tsx
import React from "react";
import { List } from "@webiny/admin-ui";
import { ReactComponent as UserIcon } from "@webiny/icons/person.svg";
import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";

const ListExample = () => {
  return (
    <List variant="underline" background="base">
      <List.Item
        icon={<UserIcon />}
        title="User Profile"
        description="View and edit your profile information"
        onClick={() => console.log("User Profile clicked")}
      />
      <List.Item
        icon={<SettingsIcon />}
        title="Settings"
        description="Configure application settings"
        onClick={() => console.log("Settings clicked")}
      />
      <List.Item
        icon={<HelpIcon />}
        title="Help & Support"
        description="Get assistance and view documentation"
        onClick={() => console.log("Help & Support clicked")}
      />
    </List>
  );
};

export default ListExample;
```

## Examples

### Default

<Canvas of={ListStories.Default} source={ { code: `
import React from "react";
import { List } from "@webiny/admin-ui";

const DefaultListExample = () => {
return (

<List>
  <List.Item title="Item 1" />
  <List.Item title="Item 2" />
  <List.Item title="Item 3" />
</List>
); };

export default DefaultListExample;
` } } />

### With Icons

<Canvas of={ListStories.WithIcon} source={ { code: `
import React from "react";
import { List } from "@webiny/admin-ui";
import { ReactComponent as UserIcon } from "@webiny/icons/person.svg";
import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";

const WithIconsExample = () => {
return (

<List>
  <List.Item icon={<UserIcon />} title="User Profile" />
  <List.Item icon={<SettingsIcon />} title="Settings" />
  <List.Item icon={<HelpIcon />} title="Help & Support" />
</List>
); };

export default WithIconsExample;
` } } />

### With Descriptions

<Canvas of={ListStories.WithDescription} source={ { code: `
import React from "react";
import { List } from "@webiny/admin-ui";

const WithDescriptionsExample = () => {
return (

<List>
  <List.Item title="User Profile" description="View and edit your profile information" />
  <List.Item title="Settings" description="Configure application settings" />
  <List.Item title="Help & Support" description="Get assistance and view documentation" />
</List>
); };

export default WithDescriptionsExample;
` } } />

### With Icons and Descriptions

<Canvas of={ListStories.WithIconsAndDescriptions} source={ { code: `
import React from "react";
import { List } from "@webiny/admin-ui";
import { ReactComponent as UserIcon } from "@webiny/icons/person.svg";
import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";

const WithIconsAndDescriptionsExample = () => {
return (

<List>
  <List.Item
    icon={<UserIcon />}
    title="User Profile"
    description="View and edit your profile information"
  />
  <List.Item
    icon={<SettingsIcon />}
    title="Settings"
    description="Configure application settings"
  />
  <List.Item
    icon={<HelpIcon />}
    title="Help & Support"
    description="Get assistance and view documentation"
  />
</List>
); };

export default WithIconsAndDescriptionsExample;
` } } />

### Container Variant

<Canvas of={ListStories.WithContainerVariant} source={ { code: `
import React from "react";
import { List } from "@webiny/admin-ui";
import { ReactComponent as UserIcon } from "@webiny/icons/person.svg";
import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";

const ContainerVariantExample = () => {
return (

<List variant="container">
  <List.Item
    icon={<UserIcon />}
    title="User Profile"
    description="View and edit your profile information"
  />
  <List.Item
    icon={<SettingsIcon />}
    title="Settings"
    description="Configure application settings"
  />
  <List.Item
    icon={<HelpIcon />}
    title="Help & Support"
    description="Get assistance and view documentation"
  />
</List>
); };

export default ContainerVariantExample;
` } } />

### Light Background

<Canvas of={ListStories.WithLightBackground} source={ { code: `
import React from "react";
import { List } from "@webiny/admin-ui";
import { ReactComponent as UserIcon } from "@webiny/icons/person.svg";
import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";

const LightBackgroundExample = () => {
return (

<List background="light">
  <List.Item
    icon={<UserIcon />}
    title="User Profile"
    description="View and edit your profile information"
  />
  <List.Item
    icon={<SettingsIcon />}
    title="Settings"
    description="Configure application settings"
  />
  <List.Item
    icon={<HelpIcon />}
    title="Help & Support"
    description="Get assistance and view documentation"
  />
</List>
); };

export default LightBackgroundExample;
` } } />

### Transparent Background

<Canvas of={ListStories.WithTransparentBackground} source={ { code: `
import React from "react";
import { List } from "@webiny/admin-ui";
import { ReactComponent as UserIcon } from "@webiny/icons/person.svg";
import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";

const TransparentBackgroundExample = () => {
return (

<div className="bg-neutral-light p-md">
  <List background="transparent">
    <List.Item
      icon={<UserIcon />}
      title="User Profile"
      description="View and edit your profile information"
    />
    <List.Item
      icon={<SettingsIcon />}
      title="Settings"
      description="Configure application settings"
    />
    <List.Item
      icon={<HelpIcon />}
      title="Help & Support"
      description="Get assistance and view documentation"
    />
  </List>
</div>
); };

export default TransparentBackgroundExample;
` } } />

### With Click Handlers

<Canvas of={ListStories.WithClickHandlers} source={ { code: `
import React from "react";
import { List } from "@webiny/admin-ui";

const WithClickHandlersExample = () => {
return (

<List>
  <List.Item
    title="User Profile"
    description="View and edit your profile information"
    onClick={() => alert("User Profile clicked")}
  />
  <List.Item
    title="Settings"
    description="Configure application settings"
    onClick={() => alert("Settings clicked")}
  />
  <List.Item
    title="Help & Support"
    description="Get assistance and view documentation"
    onClick={() => alert("Help & Support clicked")}
  />
</List>
); };

export default WithClickHandlersExample;
` } } />

### With Selected Item

<Canvas of={ListStories.WithSelectedItem} source={ { code: `
import React, { useState } from "react";
import { List } from "@webiny/admin-ui";

const WithSelectedItemExample = () => {
const [selectedIndex, setSelectedIndex] = useState(0);

    return (
        <List>
            <List.Item
                title="User Profile"
                description="View and edit your profile information"
                selected={selectedIndex === 0}
                onClick={() => setSelectedIndex(0)}
            />
            <List.Item
                title="Settings"
                description="Configure application settings"
                selected={selectedIndex === 1}
                onClick={() => setSelectedIndex(1)}
            />
            <List.Item
                title="Help & Support"
                description="Get assistance and view documentation"
                selected={selectedIndex === 2}
                onClick={() => setSelectedIndex(2)}
            />
        </List>
    );

};

export default WithSelectedItemExample;
` } } />

### With Disabled Item

<Canvas of={ListStories.WithDisabled} source={ { code: `
import React from "react";
import { List } from "@webiny/admin-ui";

const WithDisabledItemExample = () => {
return (

<List>
  <List.Item
    title="User Profile"
    description="View and edit your profile information"
    onClick={() => alert("User Profile clicked")}
  />
  <List.Item
    title="Settings"
    description="Configure application settings"
    disabled={true}
    onClick={() => alert("This alert won't show because the item is disabled")}
  />
  <List.Item
    title="Help & Support"
    description="Get assistance and view documentation"
    onClick={() => alert("Help & Support clicked")}
  />
</List>
); };

export default WithDisabledItemExample;
` } } />

### With Activated Item

<Canvas of={ListStories.WithActivated} source={ { code: `
import React from "react";
import { List } from "@webiny/admin-ui";

const WithActivatedItemExample = () => {
return (

<List>
  <List.Item
    title="User Profile"
    description="View and edit your profile information"
    activated={true}
    onClick={() => console.log("User Profile clicked")}
  />
  <List.Item
    title="Settings"
    description="Configure application settings"
    onClick={() => console.log("Settings clicked")}
  />
  <List.Item
    title="Help & Support"
    description="Get assistance and view documentation"
    onClick={() => console.log("Help & Support clicked")}
  />
</List>
); };

export default WithActivatedItemExample;
` } } />

### With Avatar

<Canvas of={ListStories.WithAvatar} source={ { code: `
import React from "react";
import { List } from "@webiny/admin-ui";
import { Avatar } from "@webiny/admin-ui";

const WithAvatarExample = () => {
return (

<List>
  <List.Item
    title="List item 1"
    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    icon={
      <Avatar
        image={<Avatar.Image src="https://i.pravatar.cc/300?img=1" alt="@webiny" />}
        fallback={<Avatar.Fallback>W</Avatar.Fallback>}
      />
    }
  />
  <List.Item
    title="List item 2"
    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    icon={
      <Avatar
        image={<Avatar.Image src="https://i.pravatar.cc/300?img=2" alt="@webiny" />}
        fallback={<Avatar.Fallback>W</Avatar.Fallback>}
      />
    }
  />
</List>
); };

export default WithAvatarExample;
` } } />

### With Handle

<Canvas of={ListStories.WithHandle} source={ { code: `
import React from "react";
import { List } from "@webiny/admin-ui";

const WithHandleExample = () => {
return (

<List>
  <List.Item
    title="List Item 1"
    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    handle={<List.Item.Handle />}
  />
  <List.Item
    title="List Item 2"
    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    handle={<List.Item.Handle />}
  />
</List>
); };

export default WithHandleExample;
` } } />

### With Actions

<Canvas of={ListStories.WithActions} source={ { code: `
import React from "react";
import { List } from "@webiny/admin-ui";
import { ReactComponent as EditIcon } from "@webiny/icons/edit.svg";
import { ReactComponent as TrashIcon } from "@webiny/icons/delete.svg";
import { ReactComponent as OpenIcon } from "@webiny/icons/visibility.svg";
import { ReactComponent as MoreIcon } from "@webiny/icons/more_vert.svg";
import { ReactComponent as ChartIcon } from "@webiny/icons/insert_chart.svg";

const WithActionsExample = () => {
return (

<List>
  <List.Item
    title="List Item 1"
    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    icon={<List.Item.Icon icon={<ChartIcon />} label={"Chart"} />}
    actions={
      <>
        <List.Item.Action icon={<EditIcon />} />
        <List.Item.Action icon={<TrashIcon />} />
        <List.Item.Action.Separator />
        <List.Item.Action icon={<OpenIcon />} />
        <List.Item.Action icon={<MoreIcon />} />
      </>
    }
  />
  <List.Item
    title="List Item 2"
    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    icon={<List.Item.Icon icon={<ChartIcon />} label={"Chart"} />}
    actions={
      <>
        <List.Item.Action icon={<EditIcon />} />
        <List.Item.Action icon={<TrashIcon />} />
        <List.Item.Action.Separator />
        <List.Item.Action icon={<OpenIcon />} />
        <List.Item.Action icon={<MoreIcon />} />
      </>
    }
  />
</List>
); };

export default WithActionsExample;
` } } />

### With Base Background

<Canvas of={ListStories.WithBaseBackground} source={ { code: `
import React from "react";
import { List } from "@webiny/admin-ui";

const WithBaseBackgroundExample = () => {
return (

<List background="base">
  <List.Item title="List Item 1" />
  <List.Item title="List Item 2" />
  <List.Item title="List Item 3" />
</List>
); };

export default WithBaseBackgroundExample;
` } } />

### With Underline Variant

<Canvas of={ListStories.WithUnderlineVariant} source={ { code: `
import React from "react";
import { List } from "@webiny/admin-ui";

const WithUnderlineVariantExample = () => {
return (

<List variant="underline">
  <List.Item title="List Item 1" />
  <List.Item title="List Item 2" />
  <List.Item title="List Item 3" />
</List>
); };

export default WithUnderlineVariantExample;
` } } />