"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.SeparatorsWithDifferentColor = exports.SeparatorVertical = exports.SeparatorFullWidth = exports.SeparatorDefault = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _ = require("../..");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var StyledContainer = _styledComponents.default.div.withConfig({
  displayName: "Separatorstories__StyledContainer",
  componentId: "sc-12j0h8a-0"
})(["padding:50px;height:1200px;width:500px;background-color:offwhite;"]);
var StyledCard = (0, _styledComponents.default)(_.Card).withConfig({
  displayName: "Separatorstories__StyledCard",
  componentId: "sc-12j0h8a-1"
})(["background-color:white;height:300px;width:300px;"]);
var StyledCardWithTitle = (0, _styledComponents.default)(_.CardWithTitle).withConfig({
  displayName: "Separatorstories__StyledCardWithTitle",
  componentId: "sc-12j0h8a-2"
})(["height:300px;width:300px;"]);
var StyledCardWithTabs = (0, _styledComponents.default)(_.CardWithTabs).withConfig({
  displayName: "Separatorstories__StyledCardWithTabs",
  componentId: "sc-12j0h8a-3"
})(["height:300px;width:300px;"]);
var Container = function Container(_ref) {
  var children = _ref.children;
  return _react.default.createElement(StyledContainer, null, _react.default.createElement(StyledCard, null, children));
};
var _default = exports.default = {
  title: 'Atoms / Separator',
  parameters: {
    component: _.Separator
  }
};
var SeparatorDefault = exports.SeparatorDefault = {
  render: function render() {
    return _react.default.createElement(Container, null, _react.default.createElement(_.Separator, null));
  },
  name: 'Separator default'
};
var SeparatorsWithDifferentColor = exports.SeparatorsWithDifferentColor = {
  render: function render() {
    return _react.default.createElement(Container, null, _react.default.createElement(_.Separator, {
      color: function color(t) {
        return t.color.negative;
      }
    }), _react.default.createElement("br", null), _react.default.createElement(_.Separator, {
      color: function color(t) {
        return t.color.separator;
      }
    }));
  },
  name: 'Separators with different color'
};
var SeparatorVertical = exports.SeparatorVertical = {
  render: function render() {
    return _react.default.createElement(Container, null, _react.default.createElement(_.Separator, {
      vertical: true
    }));
  },
  name: 'Separator vertical'
};
var SeparatorFullWidth = exports.SeparatorFullWidth = {
  render: function render() {
    return _react.default.createElement(StyledContainer, null, _react.default.createElement(StyledCardWithTitle, {
      title: "card with title"
    }, "separator", _react.default.createElement(_.Separator, null), _react.default.createElement("br", null), _react.default.createElement("br", null), _react.default.createElement("br", null), "full width separator", _react.default.createElement(_.Separator, {
      fullWidth: true
    })), _react.default.createElement("br", null), _react.default.createElement("br", null), _react.default.createElement("br", null), _react.default.createElement(StyledCardWithTabs, {
      title: "card with tabs",
      activeTabIndex: 0
    }, _react.default.createElement(_.CardWithTabs.Tab, {
      title: "tab0"
    }, "tab0"), _react.default.createElement(_.CardWithTabs.Tab, {
      title: "tab1"
    }, "tab1")), _react.default.createElement("br", null), _react.default.createElement("br", null), _react.default.createElement("br", null), _react.default.createElement(StyledCardWithTabs, {
      title: "card with tabs fullwidth separator",
      activeTabIndex: 0,
      fullWidthSeparator: true
    }, _react.default.createElement(_.CardWithTabs.Tab, {
      title: "tab0"
    }, "tab0"), _react.default.createElement(_.CardWithTabs.Tab, {
      title: "tab1"
    }, "tab1")));
  },
  name: 'Separator fullWidth'
};