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 { action } from '@storybook/addon-actions';
import React, { useState } from 'react';
import styled from 'styled-components';
import { Button, CollapsibleCard, Flexbox, Icon, Typography } from '../..';
var styledText = styled.p.withConfig({
  displayName: "CollapsibleCardstories__styledText",
  componentId: "sc-zzyqmg-0"
})(["margin:0;"]);
var ExampleWithOnClick = function ExampleWithOnClick() {
  var _useState = useState(0),
    _useState2 = _slicedToArray(_useState, 2),
    clicked = _useState2[0],
    setClicked = _useState2[1];
  return React.createElement(CollapsibleCard, {
    title: "I've been clicked ".concat(clicked, " times"),
    onClick: function onClick() {
      return setClicked(clicked + 1);
    }
  }, React.createElement(Typography, {
    type: "primary",
    as: styledText
  }, "On mobile the onClick event should fire for onTouchStart and not onClick."));
};
export default {
  title: 'Molecules / CollapsibleCard',
  parameters: {
    component: CollapsibleCard
  }
};
export var DefaultStory = {
  render: function render() {
    return React.createElement(CollapsibleCard, {
      title: "Collapsible"
    }, React.createElement(Typography, {
      type: "primary",
      as: styledText
    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."));
  },
  name: 'Default'
};
var Settings = React.createElement(Button, {
  variant: "neutral",
  onClick: action('Action Component Clicked')
}, React.createElement(Icon.Settings24, {
  color: function color(t) {
    return t.color.text;
  },
  inline: true
}));
export var WithActionComponentThatDoesNotTriggerCollapse = {
  render: function render() {
    return React.createElement(CollapsibleCard, {
      title: "Collapsible",
      action: Settings
    }, React.createElement(Typography, {
      type: "primary",
      as: styledText
    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."));
  },
  name: "With an action component that doesn't trigger collapse"
};
export var CollapsedInitially = {
  render: function render() {
    return React.createElement(CollapsibleCard, {
      title: "Collapsed initially",
      collapsedInitial: true
    }, React.createElement(Typography, {
      type: "primary",
      as: styledText
    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."));
  },
  name: 'Collapsed initially'
};
export var CollapsibleWithCustomComponentAsTitle = {
  render: function render() {
    return React.createElement(CollapsibleCard, {
      title: React.createElement(React.Fragment, null, "Custom title")
    }, React.createElement(Typography, {
      type: "primary",
      as: styledText
    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."));
  },
  name: 'Collapsible with custom component as title'
};
export var CollapsibleWithOnClickListener = {
  render: function render() {
    return React.createElement(ExampleWithOnClick, null);
  },
  name: 'Collapsible with onClick listener'
};
var CollapsibleWithoutIndicatorComponent = function CollapsibleWithoutIndicatorComponent() {
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    extraText = _useState4[0],
    setExtraText = _useState4[1];
  var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n          ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\n          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.";
  return React.createElement(React.Fragment, null, React.createElement(Button, {
    onClick: function onClick() {
      return setExtraText(!extraText);
    }
  }, "Toggle collapse"), React.createElement(CollapsibleCard, {
    title: "Collapsible without indicator",
    noIndicator: true
  }, React.createElement(Typography, {
    type: "primary",
    as: styledText
  }, text, extraText && text)));
};
export var CollapsibleWithoutIndicator = {
  render: function render() {
    return React.createElement(CollapsibleWithoutIndicatorComponent, null);
  },
  name: 'Collapsible without indicator'
};
export var CollapsibleWithCustomExpandElementAsAFunction = {
  render: function render() {
    return React.createElement(CollapsibleCard, {
      title: "Custom expand element (function)",
      expandElement: function expandElement(collapsed) {
        return React.createElement(Typography, {
          type: "secondary"
        }, collapsed ? 'Expand' : 'Close');
      }
    }, React.createElement(Typography, {
      type: "primary",
      as: styledText
    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."));
  },
  name: 'Collapsible with custom expand element as a function'
};
export var CollapsibleWithCustomExpandElement = {
  render: function render() {
    return React.createElement(CollapsibleCard, {
      title: "Custom expand element (ReactNode)",
      expandElement: React.createElement(Typography, {
        type: "secondary"
      }, "Toggle expand")
    }, React.createElement(Typography, {
      type: "primary",
      as: styledText
    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."));
  },
  name: 'Collapsible with custom expand element'
};
export var CollapsibleCardWithNoPadding = {
  render: function render() {
    return React.createElement(CollapsibleCard, {
      title: "Collapsible card with no title row padding",
      titleRowPaddingX: 0,
      titleRowPaddingY: 0,
      noIndicator: true
    }, React.createElement(Typography, {
      type: "primary",
      as: styledText
    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."));
  },
  name: 'Collapsible card with no title row padding'
};
export var CollapsibleCardWithLotsOfTopAndBottomPadding = {
  render: function render() {
    return React.createElement(CollapsibleCard, {
      title: "Collapsible card with lots of top and bottom padding",
      titleRowPaddingY: 10
    }, React.createElement(Typography, {
      type: "primary",
      as: styledText
    }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."));
  },
  name: 'Collapsible card with lots of top and bottom padding'
};
export var CollapsibleWithCustomFullWidthTitle = function CollapsibleWithCustomFullWidthTitle() {
  return React.createElement(CollapsibleCard, {
    fullWidthTitle: true,
    title: React.createElement(Flexbox, {
      container: true,
      direction: "row",
      justifyContent: "space-between"
    }, React.createElement(Flexbox, {
      item: true
    }, "Custom title"), React.createElement(Flexbox, {
      item: true
    }, "Status"))
  }, React.createElement(Typography, {
    type: "primary",
    as: styledText
  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."));
};