function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React, { useState } from 'react';
import styled from 'styled-components';
import { action } from '@storybook/addon-actions';
import { Box, CardWithTabs, FadedScroll, Typography } from '../..';
var mockedText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nulla tincidunt\ninterdum ornare. Duis blandit nibh nec dui varius lobortis. Sed viverra, metus quis\nvulputate accumsan, eros lacus semper nisl, in commodo risus lacus ut libero. Aliquam augue\nquam, sollicitudin quis lectus quis, viverra gravida nibh. Quisque vel mi non tortor\nsollicitudin sodales id eget odio. Sed mollis eleifend leo, et sagittis mi. Curabitur\ncursus, elit ut porta vehicula, elit ipsum sagittis erat, in dapibus sapien ipsum ut purus.\nAliquam sit amet egestas lacus. Aenean leo augue, malesuada id nibh ac, malesuada fermentum\ntortor. Vivamus dolor ante, fringilla vel consequat in, hendrerit vel metus. Quisque eget\nornare turpis. Suspendisse a lectus tortor. Sed ultrices lorem nibh, ultrices pulvinar eros\ndictum sit amet. Quisque et ipsum in tellus pharetra tempus. Morbi non nunc rhoncus nisi\npellentesque sagittis. Ut eu sem et ante facilisis consequat. Aliquam lorem ligula, laoreet\nquis maximus vel, rhoncus ut odio. Mauris interdum aliquet dolor ac efficitur. Maecenas\negestas porttitor tempor. In at dui tellus. Praesent at lorem metus. Quisque ultricies,\nnulla sed pulvinar volutpat, libero enim auctor erat, nec consectetur purus lacus sed orci.\nIn eleifend a risus at pulvinar. Donec ultricies justo et ligula venenatis, sed ultrices\nnunc dignissim.";
var HeightOnCardWithTabs = styled(CardWithTabs).withConfig({
  displayName: "CardWithTabsstories__HeightOnCardWithTabs",
  componentId: "sc-11n6k03-0"
})(["", "{height:200px;}"], function (p) {
  return p.theme.media.greaterThan(p.theme.breakpoints.md);
});
export default {
  title: 'Organisms / CardWithTabs'
};
export var WithInitialActiveTabIndex = {
  render: function render() {
    return React.createElement(CardWithTabs, {
      title: React.createElement(Typography, {
        type: "title3",
        as: "h2"
      }, "Title for the card"),
      initialActiveTabIndex: 1
    }, React.createElement(CardWithTabs.Tab, {
      title: "Tab title 1",
      onTitleClick: action('Clicked title1')
    }, "1"), React.createElement(CardWithTabs.Tab, {
      title: "Tab title 2"
    }, "2"));
  },
  name: 'with initialActiveTabIndex'
};
export var WithVariantBig = {
  render: function render() {
    return React.createElement(CardWithTabs, {
      variant: "big",
      title: "Title for the card",
      initialActiveTabIndex: 0
    }, React.createElement(CardWithTabs.Tab, {
      title: "Tab title 1",
      onTitleClick: action('Clicked title1')
    }, "1"), React.createElement(CardWithTabs.Tab, {
      title: "Tab title 2",
      onTitleClick: action('Clicked title2')
    }, "2"));
  }
};
export var ControlledBehaviour = {
  render: function render() {
    var ControlledComponent = function ControlledComponent() {
      var _useState = useState(0),
        _useState2 = _slicedToArray(_useState, 2),
        active = _useState2[0],
        setActive = _useState2[1];
      return React.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: function onClick() {
          return setActive(active === 0 ? 1 : 0);
        }
      }, "Change state outside"), React.createElement(CardWithTabs, {
        title: React.createElement(Typography, {
          type: "title3",
          as: "h2"
        }, "Title for the card"),
        activeTabIndex: active
      }, React.createElement(CardWithTabs.Tab, {
        title: "Tab title 1",
        onTitleClick: function onTitleClick() {
          return setActive(0);
        }
      }, "Tab content 1"), React.createElement(CardWithTabs.Tab, {
        title: "Tab title 2",
        onTitleClick: function onTitleClick() {
          return setActive(1);
        }
      }, "Tab content 2")));
    };
    return React.createElement(ControlledComponent, null);
  }
};
export var IntegrationWithTypographyAndExtraSpaceInside = {
  render: function render() {
    return React.createElement(CardWithTabs, {
      title: React.createElement(Typography, {
        type: "title3",
        as: "h2"
      }, "Title for the card")
    }, React.createElement(CardWithTabs.Tab, {
      title: "Tab title 1"
    }, React.createElement(Box, {
      pt: 4,
      px: 5,
      pb: 5
    }, mockedText)), React.createElement(CardWithTabs.Tab, {
      title: React.createElement("span", {
        style: {
          color: 'red'
        }
      }, "Custom title component")
    }, React.createElement(Box, {
      pt: 4,
      px: 5,
      pb: 5
    }, "Some stuff for Tab 2")));
  },
  name: 'Integration: with Typography and extra space inside'
};
export var IntegrationWithFadedScroll = {
  render: function render() {
    return React.createElement(CardWithTabs, {
      title: React.createElement(Typography, {
        type: "title3",
        as: "h2"
      }, "Title for the card")
    }, React.createElement(CardWithTabs.Tab, {
      title: "Tab title 1"
    }, React.createElement(FadedScroll, {
      maxHeight: 20
    }, React.createElement(Box, {
      pt: 4,
      px: 5
    }, mockedText))), React.createElement(CardWithTabs.Tab, {
      title: "Tab title 2"
    }, React.createElement(Box, {
      pt: 4,
      px: 5,
      pb: 5
    }, "Some stuff for Tab 2")));
  },
  name: 'Integration: with FadedScroll'
};
export var IntegrationWithFadedScrollWithHeightFromParent = {
  render: function render() {
    return React.createElement(HeightOnCardWithTabs, {
      title: React.createElement(Typography, {
        type: "title3",
        as: "h2"
      }, "Title for the card")
    }, React.createElement(CardWithTabs.Tab, {
      title: "Tab title 1"
    }, React.createElement(FadedScroll, null, React.createElement(Box, {
      pt: 4,
      px: 5
    }, mockedText))), React.createElement(CardWithTabs.Tab, {
      title: "Tab title 2"
    }, React.createElement(Box, {
      pt: 4,
      px: 5,
      pb: 5
    }, "Some stuff for Tab 2")));
  },
  name: 'Integration: with FadedScroll of content and height being whatever is available left of parents height.'
};