import React from 'react';
import markdown from './README.mdx';
import { action } from '@storybook/addon-actions';
import { List, ListItem } from '../List';
export default {
  title: 'Components/UI Elements/List',
  component: List,
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: markdown,
    subcomponents: {
      ListItem: ListItem
    }
  }
};
export var Regular = function Regular(args) {
  return /*#__PURE__*/React.createElement(List, args, /*#__PURE__*/React.createElement(ListItem, {
    title: "List item with title"
  }, "First item"), /*#__PURE__*/React.createElement(ListItem, {
    title: "Another item with title"
  }, "Second item"), /*#__PURE__*/React.createElement(ListItem, null, "Third item"), /*#__PURE__*/React.createElement(ListItem, null, "Fourth item"), /*#__PURE__*/React.createElement(ListItem, null, "Fifth item"));
};
Regular.args = {
  colon: true
};
export var SimpleInline = function SimpleInline(args) {
  return /*#__PURE__*/React.createElement(List, args, /*#__PURE__*/React.createElement(ListItem, {
    title: "List item with title"
  }, "First item"), /*#__PURE__*/React.createElement(ListItem, {
    title: "Another item with title"
  }, "Second item"), /*#__PURE__*/React.createElement(ListItem, null, "Third item"), /*#__PURE__*/React.createElement(ListItem, null, "Fourth item"), /*#__PURE__*/React.createElement(ListItem, null, "Fifth item"));
};
SimpleInline.args = {
  kind: 'simple-inline'
};
var msg = " `simple-inline` `kind` shows listed items next to each other";
SimpleInline.story = {
  parameters: {
    docs: {
      storyDescription: msg
    }
  }
};
export var Details = function Details(args) {
  return /*#__PURE__*/React.createElement(List, args, /*#__PURE__*/React.createElement(ListItem, {
    title: "List item with title"
  }, "First item"), /*#__PURE__*/React.createElement(ListItem, {
    title: "Another item with title"
  }, "Second item"), /*#__PURE__*/React.createElement(ListItem, null, "Third item"), /*#__PURE__*/React.createElement(ListItem, null, "Fourth item"), /*#__PURE__*/React.createElement(ListItem, null, "Fifth item"));
};
Details.args = {
  kind: 'details'
};
var msghere = " `details` `kind` shows listed items on different blocks";
Details.story = {
  parameters: {
    docs: {
      storyDescription: msghere
    }
  }
};
export var Bullet = function Bullet(args) {
  return /*#__PURE__*/React.createElement(List, args, /*#__PURE__*/React.createElement(ListItem, {
    title: "List item with title"
  }, "First item"), /*#__PURE__*/React.createElement(ListItem, {
    title: "Another item with title"
  }, "Second item"), /*#__PURE__*/React.createElement(ListItem, null, "Third item"), /*#__PURE__*/React.createElement(ListItem, null, "Fourth item"), /*#__PURE__*/React.createElement(ListItem, null, "Fifth item"));
};
Bullet.args = {
  kind: 'unordered'
};
var msgg = " `undordered` `kind` shows bulleted list items";
Bullet.story = {
  parameters: {
    docs: {
      storyDescription: msgg
    }
  }
}; // export const ListColumns = (args) => (
//   <List kind="details" style={{ columnCount: 3 }}>
//     <ListItem title="Strategic Outcome">
//       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
//       eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
//       voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
//       clita kasd gubergren, no sea takimata sanctus est Lorem ipsum d Stet clita
//       kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
//     </ListItem>
//     <ListItem title="Financial Outcome and a very long and detailed list title with more content that fits on a line">
//       Dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
//       sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
//       erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
//       rebum.
//     </ListItem>
//     <ListItem title="Financial Outcome">
//       Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
//       sit amet.
//     </ListItem>
//     <ListItem title="Financial Outcome">
//       At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
//       gubergren, no sea takimata sanctus est Lorem ipsum d Stet clita kasd
//       gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Dolor
//       sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
//       diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
//       erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
//       rebum.
//     </ListItem>
//   </List>
// );
// const description = `
// Lists can have multiple columns by using the \`columnCount\` attribute in \`style\` prop.
// `;
// ListColumns.story = {
//   parameters: {
//     docs: {
//       storyDescription: description,
//     },
//   },
// };

export var ListitemBullets = function ListitemBullets(args) {
  return /*#__PURE__*/React.createElement(List, {
    kind: "unordered"
  }, /*#__PURE__*/React.createElement(ListItem, {
    kind: "checkmark"
  }, "checkmark"), /*#__PURE__*/React.createElement(ListItem, {
    kind: "cross"
  }, "cross"), /*#__PURE__*/React.createElement(ListItem, null, "hello"));
};
var listItemDescription = " `unordered` List with ListItems can have `checkmark` and `cross` kinds";
ListitemBullets.story = {
  parameters: {
    docs: {
      storyDescription: listItemDescription
    }
  }
};
export var NestedListItems = function NestedListItems(args) {
  return /*#__PURE__*/React.createElement(List, {
    kind: "unordered"
  }, /*#__PURE__*/React.createElement(ListItem, null, "Item label"), /*#__PURE__*/React.createElement(ListItem, null, "Item label"), /*#__PURE__*/React.createElement(List, {
    kind: "ordered"
  }, /*#__PURE__*/React.createElement(ListItem, null, "Item label 2"), /*#__PURE__*/React.createElement(ListItem, null, "Item label 2"), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(ListItem, null, "Item label 3"), /*#__PURE__*/React.createElement(ListItem, null, "Item label 3"))));
};
var nestedItemDescription = " `unordered` List with ListItems can have `checkmark` and `cross` kinds";
NestedListItems.story = {
  parameters: {
    docs: {
      storyDescription: listItemDescription
    }
  }
};