import _styled3 from "styled-components";
import _styled2 from "styled-components";
import _styled from "styled-components";
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from 'react';
import { TabSetItem, TabSet } from '.';
export default {
  component: TabSet,
  subcomponents: {
    TabSetItem: TabSetItem
  },
  title: 'Tab Set',
  parameters: {
    actions: {
      argTypesRegex: '^on.*'
    },
    docs: {
      description: {
        component: 'Use this component to switch between visible areas within the confines of a page.'
      }
    },
    layout: 'fullscreen'
  }
};
export var Default = function Default(props) {
  return /*#__PURE__*/React.createElement(TabSet, props, /*#__PURE__*/React.createElement(TabSetItem, {
    title: "Example Tab 1"
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 1 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: "Example Tab 2"
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 2 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: "Example Tab 3"
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 3 content")));
};
Default.args = {};
export var InitialActiveTab = function InitialActiveTab(props) {
  return /*#__PURE__*/React.createElement(TabSet, props, /*#__PURE__*/React.createElement(TabSetItem, {
    title: "Example Tab 1"
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 1 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: "Example Tab 2",
    isActive: true
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 2 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: "Example Tab 3"
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 3 content")));
};
InitialActiveTab.storyName = 'Initial active tab';
export var FullWidth = function FullWidth(props) {
  return /*#__PURE__*/React.createElement(TabSet, _extends({}, props, {
    isFullWidth: true
  }), /*#__PURE__*/React.createElement(TabSetItem, {
    title: "Example Tab 1"
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 1 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: "Example Tab 2"
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 2 content")));
};
FullWidth.storyName = 'Full width';
export var ScrollableBody = function ScrollableBody(props) {
  return /*#__PURE__*/React.createElement(_StyledDiv, null, /*#__PURE__*/React.createElement(TabSet, props, /*#__PURE__*/React.createElement(TabSetItem, {
    title: "Example Tab 1"
  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Scrollable tab 1 content"), /*#__PURE__*/React.createElement("p", null, "Scrollable tab 1 content"), /*#__PURE__*/React.createElement("p", null, "Scrollable tab 1 content"), /*#__PURE__*/React.createElement("p", null, "Scrollable tab 1 content"), /*#__PURE__*/React.createElement("p", null, "Scrollable tab 1 content"), /*#__PURE__*/React.createElement("p", null, "Scrollable tab 1 content"), /*#__PURE__*/React.createElement("p", null, "Scrollable tab 1 content"), /*#__PURE__*/React.createElement("p", null, "Scrollable tab 1 content"))), /*#__PURE__*/React.createElement(TabSetItem, {
    title: "Example Tab 2"
  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Scrollable tab 2 content"), /*#__PURE__*/React.createElement("p", null, "Scrollable tab 2 content"), /*#__PURE__*/React.createElement("p", null, "Scrollable tab 2 content"), /*#__PURE__*/React.createElement("p", null, "Scrollable tab 2 content"), /*#__PURE__*/React.createElement("p", null, "Scrollable tab 2 content"), /*#__PURE__*/React.createElement("p", null, "Scrollable tab 2 content"), /*#__PURE__*/React.createElement("p", null, "Scrollable tab 2 content"), /*#__PURE__*/React.createElement("p", null, "Scrollable tab 2 content")))));
};
ScrollableBody.storyName = 'Scrollable body content';
var TabTitle = function TabTitle(_ref) {
  var year = _ref.year,
    children = _ref.children;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_StyledDiv2, null, children), /*#__PURE__*/React.createElement(_StyledDiv3, null, year));
};
export var Scrollable = function Scrollable(props) {
  return /*#__PURE__*/React.createElement(TabSet, _extends({}, props, {
    isScrollable: true
  }), /*#__PURE__*/React.createElement(TabSetItem, {
    title: /*#__PURE__*/React.createElement(TabTitle, {
      year: 2019
    }, "01/02")
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 1 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: /*#__PURE__*/React.createElement(TabTitle, {
      year: 2019
    }, "02/02")
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 2 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: /*#__PURE__*/React.createElement(TabTitle, {
      year: 2019
    }, "03/02")
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 3 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: /*#__PURE__*/React.createElement(TabTitle, {
      year: 2019
    }, "04/02")
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 4 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: /*#__PURE__*/React.createElement(TabTitle, {
      year: 2019
    }, "05/02")
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 5 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: /*#__PURE__*/React.createElement(TabTitle, {
      year: 2019
    }, "06/02")
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 6 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: /*#__PURE__*/React.createElement(TabTitle, {
      year: 2019
    }, "07/02")
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 7 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: /*#__PURE__*/React.createElement(TabTitle, {
      year: 2019
    }, "08/02")
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 8 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: /*#__PURE__*/React.createElement(TabTitle, {
      year: 2019
    }, "09/02")
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 9 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: /*#__PURE__*/React.createElement(TabTitle, {
      year: 2019
    }, "10/02")
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 10 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: /*#__PURE__*/React.createElement(TabTitle, {
      year: 2019
    }, "11/02")
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 11 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: /*#__PURE__*/React.createElement(TabTitle, {
      year: 2019
    }, "12/02")
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 12 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: /*#__PURE__*/React.createElement(TabTitle, {
      year: 2019
    }, "13/02")
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 13 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: /*#__PURE__*/React.createElement(TabTitle, {
      year: 2019
    }, "14/02")
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 14 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: /*#__PURE__*/React.createElement(TabTitle, {
      year: 2019
    }, "15/02")
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 15 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: /*#__PURE__*/React.createElement(TabTitle, {
      year: 2019
    }, "16/02")
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 16 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: /*#__PURE__*/React.createElement(TabTitle, {
      year: 2019
    }, "17/02")
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 17 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: /*#__PURE__*/React.createElement(TabTitle, {
      year: 2019
    }, "18/02")
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 18 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: /*#__PURE__*/React.createElement(TabTitle, {
      year: 2019
    }, "19/02")
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 19 content")), /*#__PURE__*/React.createElement(TabSetItem, {
    title: /*#__PURE__*/React.createElement(TabTitle, {
      year: 2019
    }, "20/02")
  }, /*#__PURE__*/React.createElement("p", null, "Example tab 20 content")));
};
Scrollable.storyName = 'Scrollable paged tabs';
var _StyledDiv = _styled("div").withConfig({
  displayName: "TabSetstories___StyledDiv",
  componentId: "sc-1uxk3u0-0"
})({
  height: '200px'
});
var _StyledDiv2 = _styled("div").withConfig({
  displayName: "TabSetstories___StyledDiv2",
  componentId: "sc-1uxk3u0-1"
})({
  fontSize: '14px'
});
var _StyledDiv3 = _styled("div").withConfig({
  displayName: "TabSetstories___StyledDiv3",
  componentId: "sc-1uxk3u0-2"
})({
  fontSize: '12px'
});