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