"use strict";

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

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

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

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

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

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

var _Heading = require("../Heading");

var _Text = require("../Text");

var _Stack = require("./Stack");

var __jsx = _react2["default"].createElement;
var stories = (0, _react.storiesOf)('Stack', module);
stories.add('vertical stack', function () {
  return __jsx(_Stack.Stack, {
    isInline: true,
    shouldWrapChildren: true
  }, __jsx("span", null, "ooooooo"), __jsx("span", null, "ahhhhh"), __jsx("span", null, "Woah!"));
});
stories.add('Inline Stack', function () {
  return __jsx(_Stack.Stack, {
    w: "100%",
    bg: "blue.500",
    direction: "row"
  }, __jsx(_Box.Box, {
    size: "40px",
    background: "#fff",
    rounded: "full"
  }), __jsx(_Box.Box, {
    size: "40px",
    background: "#fff",
    rounded: "full"
  }), __jsx(_Box.Box, {
    size: "40px",
    background: "#fff",
    rounded: "full"
  }));
});
stories.add('Reversed + Inline Stack', function () {
  return __jsx(_Stack.Stack, {
    isReversed: true,
    isInline: true,
    w: "100%",
    h: "60px"
  }, __jsx(_Box.Box, {
    w: "100%",
    h: "40px",
    bg: "yellow.200"
  }, "1"), __jsx(_Box.Box, {
    w: "100%",
    h: "40px",
    bg: "tomato"
  }, "2"), __jsx(_Box.Box, {
    w: "100%",
    h: "40px",
    bg: "pink.100"
  }, "3"));
});
stories.add('Reverse direction prop', function () {
  return __jsx(_Stack.Stack, {
    direction: "column-reverse",
    w: "100%"
  }, __jsx(_Box.Box, {
    w: "100%",
    h: "40px",
    bg: "yellow.200"
  }, "1"), __jsx(_Box.Box, {
    w: "100%",
    h: "40px",
    bg: "tomato"
  }, "2"), __jsx(_Box.Box, {
    w: "100%",
    h: "40px",
    bg: "pink.100"
  }, "3"));
});

function Feature(_ref) {
  var title = _ref.title,
      desc = _ref.desc,
      rest = (0, _objectWithoutProperties2["default"])(_ref, ["title", "desc"]);
  return __jsx(_Box.Box, (0, _extends2["default"])({
    p: 5,
    shadow: "md",
    borderWidth: "1px",
    flex: "1",
    rounded: "md"
  }, rest), __jsx(_Heading.Heading, {
    kind: "h4"
  }, title), __jsx(_Text.Text, {
    mt: "spacing"
  }, desc));
}

stories.add('Reverse example in docs', function () {
  return __jsx(_Stack.Stack, {
    isReversed: true
  }, __jsx(Feature, {
    title: "Plan Money",
    desc: "The future can be even brighter but a goal without a plan is just a wish"
  }), __jsx(Feature, {
    title: "Save Money",
    desc: "You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings."
  }));
});
//# sourceMappingURL=examples.js.map