"use strict";

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

var _react = require("@storybook/react");

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

var _ = require(".");

var _Box = require("../Box");

var _Button = require("../Button");

var _Icon = require("../Icon");

var _Link = require("../Link");

var __jsx = _react2["default"].createElement;
var stories = (0, _react.storiesOf)('Accordion', module).addDecorator(function (story) {
  return __jsx(_Box.Box, {
    maxW: "sm",
    mx: "auto",
    mt: 5
  }, story());
});
stories.add('default', function () {
  return __jsx(_.Accordion, null, __jsx(_.AccordionItem, null, __jsx(_.AccordionHeader, null, __jsx(_Box.Box, {
    flex: "1",
    textAlign: "left"
  }, "Section 1 title"), __jsx(_.AccordionIcon, null)), __jsx(_.AccordionPanel, {
    pb: 4
  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")), __jsx(_.AccordionItem, null, __jsx(_.AccordionHeader, null, __jsx(_Box.Box, {
    flex: "1",
    textAlign: "left"
  }, "Section 2 title"), __jsx(_.AccordionIcon, null)), __jsx(_.AccordionPanel, {
    pb: 4
  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")));
});
stories.add('allow toggle', function () {
  return __jsx(_react2["default"].Fragment, null, __jsx(_.Accordion, {
    allowToggle: true
  }, __jsx(_.AccordionItem, null, __jsx(_.AccordionHeader, null, __jsx(_Box.Box, {
    flex: "1",
    textAlign: "left"
  }, __jsx(_Button.Button, {
    onClick: null
  }, "Link 1")), __jsx(_.AccordionIcon, null)), __jsx(_.AccordionPanel, null, __jsx(_Link.Link, {
    href: "/"
  }, "Link")), __jsx(_.AccordionPanel, null, __jsx(_Link.Link, {
    href: "/"
  }, "Link")))), __jsx(_Box.Box, {
    flex: "1",
    textAlign: "left"
  }, "Menu Item 2"));
});
stories.add('allow multiple', function () {
  return __jsx(_.Accordion, {
    allowMultiple: true
  }, __jsx(_.AccordionItem, null, __jsx(_.AccordionHeader, null, __jsx(_Box.Box, {
    flex: "1",
    textAlign: "left"
  }, "Section 1 title"), __jsx(_.AccordionIcon, null)), __jsx(_.AccordionPanel, {
    pb: 4
  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")), __jsx(_.AccordionItem, null, __jsx(_.AccordionHeader, null, __jsx(_Box.Box, {
    flex: "1",
    textAlign: "left"
  }, "Section 2 title"), __jsx(_.AccordionIcon, null)), __jsx(_.AccordionPanel, {
    pb: 4
  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")));
});
stories.add('styling expanded state', function () {
  return __jsx(_.AccordionItem, null, __jsx(_.AccordionHeader, {
    _expanded: {
      bg: 'red.100',
      color: 'red.500'
    }
  }, "Section title"), __jsx(_.AccordionPanel, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."));
});
stories.add('using render prop with icon', function () {
  return __jsx(_.AccordionItem, null, function (_ref) {
    var isExpanded = _ref.isExpanded;
    return __jsx(_react2["default"].Fragment, null, __jsx(_.AccordionHeader, null, __jsx(_Box.Box, {
      flex: "1",
      textAlign: "left"
    }, "Section 2 title"), __jsx(_Icon.Icon, {
      size: "12px",
      name: isExpanded ? 'minus' : 'add'
    })), __jsx(_.AccordionPanel, {
      pb: 4
    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."));
  });
});
//# sourceMappingURL=examples.js.map