import React from 'react';
import styled from 'styled-components';
import { Flexbox, TabTitle } from '../..';
var Container = styled.div.withConfig({
  displayName: "TabTitlestories__Container",
  componentId: "sc-kfnrg2-0"
})(["display:inline-flex;"]);
export default {
  title: 'Atoms / TabTitle',
  parameters: {
    component: TabTitle
  }
};
export var DefaultStory = {
  render: function render() {
    return React.createElement(Container, null, React.createElement(TabTitle, null, "This is tab title"));
  },
  name: 'Default'
};
export var LargeStory = {
  render: function render() {
    return React.createElement(Container, null, React.createElement(TabTitle, {
      variant: "large"
    }, "This is large tab title"));
  },
  name: 'Large'
};
export var ActiveStory = {
  render: function render() {
    return React.createElement(Container, null, React.createElement(TabTitle, {
      active: true
    }, "This is tab title"));
  },
  name: 'Active'
};
export var WithHeightModified = {
  render: function render() {
    return React.createElement(Container, null, React.createElement(TabTitle, {
      height: 11,
      active: true
    }, "This is tab title"));
  },
  name: 'With height modified'
};
export var IntegrationWithFlexbox = {
  render: function render() {
    return React.createElement(Flexbox, {
      container: true,
      direction: "row"
    }, React.createElement(Flexbox, {
      item: true
    }, React.createElement(Container, null, React.createElement(TabTitle, null, "TabTitle1"))), React.createElement(Flexbox, {
      item: true
    }, React.createElement(Container, null, React.createElement(TabTitle, {
      active: true
    }, "TabTitle2"))), React.createElement(Flexbox, {
      item: true
    }, React.createElement(Container, null, React.createElement(TabTitle, null, "TabTitle3"))));
  },
  name: 'Integration: with Flexbox'
};