import React from 'react';
import ListItem from '../ListItem';
import { CardWithTitle, Flexbox, List, Typography } from '../..';
export default {
  title: 'Atoms / List',
  parameters: {
    component: List
  }
};
export var BasicUnorderedList = {
  render: function render() {
    return React.createElement(List, null, React.createElement(ListItem, null, React.createElement(Typography, null, "List item")), React.createElement(ListItem, null, React.createElement(Typography, null, "List item")), React.createElement(ListItem, null, React.createElement(Typography, null, "List item")));
  },
  name: 'Basic unordered list'
};
export var BasicOrderedList = {
  render: function render() {
    return React.createElement(List, {
      as: "ol"
    }, React.createElement(ListItem, null, React.createElement(Typography, null, "List item 1")), React.createElement(ListItem, null, React.createElement(Typography, null, "List item 2")), React.createElement(ListItem, null, React.createElement(Typography, null, "List item 3")));
  },
  name: 'Basic ordered list'
};
export var SeparatedList = {
  render: function render() {
    return React.createElement(List, {
      separated: true
    }, React.createElement(ListItem, null, React.createElement(Typography, null, "List item 1")), React.createElement(ListItem, null, React.createElement(Typography, null, "List item 2")), React.createElement(ListItem, null, React.createElement(Typography, null, "List item 3")));
  },
  name: 'With separators between each li'
};
export var FullWidthSeparatedList = {
  render: function render() {
    return React.createElement("div", {
      style: {
        margin: '40px'
      }
    }, React.createElement(CardWithTitle, {
      title: "Card",
      p: 5
    }, React.createElement(List, {
      fullWidthSeparator: true
    }, React.createElement(ListItem, null, React.createElement(Typography, null, "List item 1")), React.createElement(ListItem, null, React.createElement(Flexbox, {
      container: true,
      justifyContent: "flex-start"
    }, React.createElement(Typography, null, "List item 2"))), React.createElement(ListItem, null, React.createElement(Flexbox, {
      container: true,
      justifyContent: "center"
    }, React.createElement(Typography, null, "List item 3"))), React.createElement(ListItem, null, React.createElement(Flexbox, {
      container: true,
      justifyContent: "flex-end"
    }, React.createElement(Typography, null, "List item 4"))), React.createElement(ListItem, null, React.createElement(Typography, null, "List item 5")))));
  },
  name: 'With full width separators between each li'
};