okp4/ui

import { ArgsTable, Meta, Story, Canvas } from '@storybook/addon-docs'
import { ThemeProvider } from 'ui/atoms/theme/ThemeProvider'
import { ThemeSwitcher } from 'ui/atoms/theme/ThemeSwitcher'
import { Typography } from 'ui/atoms/typography/Typography'
import { List } from 'ui/atoms/list/List'
import { ListItem } from 'ui/atoms/listItem/ListItem'
import { Icon } from 'ui/atoms/icon/Icon'

<Meta
  title="Atoms/List"
  component={List}
  parameters={{
    actions: { argTypesRegex: '^on.*' },
    docs: {
      source: {
        type: 'code'
      }
    }
  }}
  decorators={[
    Story => (
      <ThemeProvider>
        <div className="story-theme-switcher">
          <ThemeSwitcher />
        </div>
        <div className="component-story-main">
          <Story />
        </div>
      </ThemeProvider>
    )
  ]}
/>

# List

> A primary UI component to display a list of items.

[![stability-unstable](https://img.shields.io/badge/stability-unstable-yellow.svg)](https://github.com/emersion/stability-badges#unstable)

## Description

The `List` allows to display a list or grid of elements and manage them.
These expected elements are [ListItem](/docs/atoms-listitem--overview) components.

## Overview

<Story
  name="Overview"
  argTypes={{
    children: {
      control: false,
      table: {
        type: {
          summary: 'Node'
        }
      }
    }
  }}
  args={{
    layout: 'list'
  }}
>
  {args => (
    <List {...args}>
      <ListItem
        title="Item 1"
        description="Description 1"
        firstElement={
          <div style={{ display: 'grid', alignItems: 'center', height: '100%' }}>
            <Icon name="wallet" invertColor />
          </div>
        }
        lastElement={
          <div style={{ display: 'grid', alignItems: 'center', height: '100%' }}>
            <Icon name="close" invertColor />
          </div>
        }
      />
      <ListItem
        title="Item 2"
        description="Description 2"
        firstElement={
          <div style={{ display: 'grid', alignItems: 'center', height: '100%' }}>
            <Icon name="wallet" invertColor />
          </div>
        }
        lastElement={
          <div style={{ display: 'grid', alignItems: 'center', height: '100%' }}>
            <Icon name="close" invertColor />
          </div>
        }
      />
      <ListItem
        title="Item 3"
        description="Description 3"
        firstElement={
          <div style={{ display: 'grid', alignItems: 'center', height: '100%' }}>
            <Icon name="wallet" invertColor />
          </div>
        }
        lastElement={
          <div style={{ display: 'grid', alignItems: 'center', height: '100%' }}>
            <Icon name="close" invertColor />
          </div>
        }
      />
      <ListItem
        title="Item 4"
        description="Description 4"
        firstElement={
          <div style={{ display: 'grid', alignItems: 'center', height: '100%' }}>
            <Icon name="wallet" invertColor />
          </div>
        }
        lastElement={
          <div style={{ display: 'grid', alignItems: 'center', height: '100%' }}>
            <Icon name="close" invertColor />
          </div>
        }
      />
      <ListItem
        title="Item 5"
        description="Description 5"
        firstElement={
          <div style={{ display: 'grid', alignItems: 'center', height: '100%' }}>
            <Icon name="wallet" invertColor />
          </div>
        }
        lastElement={
          <div style={{ display: 'grid', alignItems: 'center', height: '100%' }}>
            <Icon name="close" invertColor />
          </div>
        }
      />
    </List>
  )}
</Story>

## Properties

<ArgsTable story="Overview" />

## Layout

`layout` has two display modes:

- **list** (default): This is a classic list with items being stacked upon each other tightly.
  It gives the user an easy and fast way of comparing items.
- **grid**: organizes the items in 350px \* 210px grids. The grid `layout` gives the possibility to display items on multiples columns and rows.

<Canvas>
  <Story name="Layout">
    <div style={{ display: 'grid', gap: '50px' }}>
      <List>
        {[...Array(5).keys()].map(item => {
          return (
            <ListItem
              key={`list-${item}`}
              title={`List ${item + 1}`}
              description="Description"
              firstElement={
                <Typography color="inverted-text" fontSize="small">
                  First element
                </Typography>
              }
              lastElement={
                <Typography color="inverted-text" fontSize="small">
                  Last element
                </Typography>
              }
            />
          )
        })}
      </List>
      <List layout="grid">
        {[...Array(5).keys()].map(item => {
          return (
            <ListItem
              key={`grid -${item}`}
              title={`Grid ${item + 1}`}
              description="Description"
              firstElement={
                <Typography color="inverted-text" fontSize="small">
                  First element
                </Typography>
              }
              lastElement={
                <Typography color="inverted-text" fontSize="small">
                  Last element
                </Typography>
              }
            />
          )
        })}
      </List>
    </div>
  </Story>
</Canvas>