"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.NestedListItems = exports.ListitemBullets = exports.Bullet = exports.Details = exports.SimpleInline = exports.Regular = exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _README = _interopRequireDefault(require("./README.mdx"));

var _addonActions = require("@storybook/addon-actions");

var _List = require("../List");

var _default = {
  title: 'Components/UI Elements/List',
  component: _List.List,
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: _README.default,
    subcomponents: {
      ListItem: _List.ListItem
    }
  }
};
exports.default = _default;

var Regular = function Regular(args) {
  return /*#__PURE__*/_react.default.createElement(_List.List, args, /*#__PURE__*/_react.default.createElement(_List.ListItem, {
    title: "List item with title"
  }, "First item"), /*#__PURE__*/_react.default.createElement(_List.ListItem, {
    title: "Another item with title"
  }, "Second item"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Third item"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Fourth item"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Fifth item"));
};

exports.Regular = Regular;
Regular.args = {
  colon: true
};

var SimpleInline = function SimpleInline(args) {
  return /*#__PURE__*/_react.default.createElement(_List.List, args, /*#__PURE__*/_react.default.createElement(_List.ListItem, {
    title: "List item with title"
  }, "First item"), /*#__PURE__*/_react.default.createElement(_List.ListItem, {
    title: "Another item with title"
  }, "Second item"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Third item"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Fourth item"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Fifth item"));
};

exports.SimpleInline = SimpleInline;
SimpleInline.args = {
  kind: 'simple-inline'
};
var msg = " `simple-inline` `kind` shows listed items next to each other";
SimpleInline.story = {
  parameters: {
    docs: {
      storyDescription: msg
    }
  }
};

var Details = function Details(args) {
  return /*#__PURE__*/_react.default.createElement(_List.List, args, /*#__PURE__*/_react.default.createElement(_List.ListItem, {
    title: "List item with title"
  }, "First item"), /*#__PURE__*/_react.default.createElement(_List.ListItem, {
    title: "Another item with title"
  }, "Second item"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Third item"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Fourth item"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Fifth item"));
};

exports.Details = Details;
Details.args = {
  kind: 'details'
};
var msghere = " `details` `kind` shows listed items on different blocks";
Details.story = {
  parameters: {
    docs: {
      storyDescription: msghere
    }
  }
};

var Bullet = function Bullet(args) {
  return /*#__PURE__*/_react.default.createElement(_List.List, args, /*#__PURE__*/_react.default.createElement(_List.ListItem, {
    title: "List item with title"
  }, "First item"), /*#__PURE__*/_react.default.createElement(_List.ListItem, {
    title: "Another item with title"
  }, "Second item"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Third item"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Fourth item"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Fifth item"));
};

exports.Bullet = Bullet;
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,
//     },
//   },
// };

var ListitemBullets = function ListitemBullets(args) {
  return /*#__PURE__*/_react.default.createElement(_List.List, {
    kind: "unordered"
  }, /*#__PURE__*/_react.default.createElement(_List.ListItem, {
    kind: "checkmark"
  }, "checkmark"), /*#__PURE__*/_react.default.createElement(_List.ListItem, {
    kind: "cross"
  }, "cross"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "hello"));
};

exports.ListitemBullets = ListitemBullets;
var listItemDescription = " `unordered` List with ListItems can have `checkmark` and `cross` kinds";
ListitemBullets.story = {
  parameters: {
    docs: {
      storyDescription: listItemDescription
    }
  }
};

var NestedListItems = function NestedListItems(args) {
  return /*#__PURE__*/_react.default.createElement(_List.List, {
    kind: "unordered"
  }, /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Item label"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Item label"), /*#__PURE__*/_react.default.createElement(_List.List, {
    kind: "ordered"
  }, /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Item label 2"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Item label 2"), /*#__PURE__*/_react.default.createElement(_List.List, null, /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Item label 3"), /*#__PURE__*/_react.default.createElement(_List.ListItem, null, "Item label 3"))));
};

exports.NestedListItems = NestedListItems;
var nestedItemDescription = " `unordered` List with ListItems can have `checkmark` and `cross` kinds";
NestedListItems.story = {
  parameters: {
    docs: {
      storyDescription: listItemDescription
    }
  }
};