"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithActionComponentThatDoesNotTriggerCollapse = exports.DefaultStory = exports.CollapsibleWithoutIndicator = exports.CollapsibleWithOnClickListener = exports.CollapsibleWithCustomFullWidthTitle = exports.CollapsibleWithCustomExpandElementAsAFunction = exports.CollapsibleWithCustomExpandElement = exports.CollapsibleWithCustomComponentAsTitle = exports.CollapsibleCardWithNoPadding = exports.CollapsibleCardWithLotsOfTopAndBottomPadding = exports.CollapsedInitially = void 0;
var _addonActions = require("@storybook/addon-actions");
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _ = require("../..");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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; }
var styledText = _styledComponents.default.p.withConfig({
  displayName: "CollapsibleCardstories__styledText",
  componentId: "sc-zzyqmg-0"
})(["margin:0;"]);
var ExampleWithOnClick = function ExampleWithOnClick() {
  var _useState = (0, _react.useState)(0),
    _useState2 = _slicedToArray(_useState, 2),
    clicked = _useState2[0],
    setClicked = _useState2[1];
  return _react.default.createElement(_.CollapsibleCard, {
    title: "I've been clicked ".concat(clicked, " times"),
    onClick: function onClick() {
      return setClicked(clicked + 1);
    }
  }, _react.default.createElement(_.Typography, {
    type: "primary",
    as: styledText
  }, "On mobile the onClick event should fire for onTouchStart and not onClick."));
};
var _default = exports.default = {
  title: 'Molecules / CollapsibleCard',
  parameters: {
    component: _.CollapsibleCard
  }
};
var DefaultStory = exports.DefaultStory = {
  render: function render() {
    return _react.default.createElement(_.CollapsibleCard, {
      title: "Collapsible"
    }, _react.default.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.default.createElement(_.Button, {
  variant: "neutral",
  onClick: (0, _addonActions.action)('Action Component Clicked')
}, _react.default.createElement(_.Icon.Settings24, {
  color: function color(t) {
    return t.color.text;
  },
  inline: true
}));
var WithActionComponentThatDoesNotTriggerCollapse = exports.WithActionComponentThatDoesNotTriggerCollapse = {
  render: function render() {
    return _react.default.createElement(_.CollapsibleCard, {
      title: "Collapsible",
      action: Settings
    }, _react.default.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"
};
var CollapsedInitially = exports.CollapsedInitially = {
  render: function render() {
    return _react.default.createElement(_.CollapsibleCard, {
      title: "Collapsed initially",
      collapsedInitial: true
    }, _react.default.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'
};
var CollapsibleWithCustomComponentAsTitle = exports.CollapsibleWithCustomComponentAsTitle = {
  render: function render() {
    return _react.default.createElement(_.CollapsibleCard, {
      title: _react.default.createElement(_react.default.Fragment, null, "Custom title")
    }, _react.default.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'
};
var CollapsibleWithOnClickListener = exports.CollapsibleWithOnClickListener = {
  render: function render() {
    return _react.default.createElement(ExampleWithOnClick, null);
  },
  name: 'Collapsible with onClick listener'
};
var CollapsibleWithoutIndicatorComponent = function CollapsibleWithoutIndicatorComponent() {
  var _useState3 = (0, _react.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.default.createElement(_react.default.Fragment, null, _react.default.createElement(_.Button, {
    onClick: function onClick() {
      return setExtraText(!extraText);
    }
  }, "Toggle collapse"), _react.default.createElement(_.CollapsibleCard, {
    title: "Collapsible without indicator",
    noIndicator: true
  }, _react.default.createElement(_.Typography, {
    type: "primary",
    as: styledText
  }, text, extraText && text)));
};
var CollapsibleWithoutIndicator = exports.CollapsibleWithoutIndicator = {
  render: function render() {
    return _react.default.createElement(CollapsibleWithoutIndicatorComponent, null);
  },
  name: 'Collapsible without indicator'
};
var CollapsibleWithCustomExpandElementAsAFunction = exports.CollapsibleWithCustomExpandElementAsAFunction = {
  render: function render() {
    return _react.default.createElement(_.CollapsibleCard, {
      title: "Custom expand element (function)",
      expandElement: function expandElement(collapsed) {
        return _react.default.createElement(_.Typography, {
          type: "secondary"
        }, collapsed ? 'Expand' : 'Close');
      }
    }, _react.default.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'
};
var CollapsibleWithCustomExpandElement = exports.CollapsibleWithCustomExpandElement = {
  render: function render() {
    return _react.default.createElement(_.CollapsibleCard, {
      title: "Custom expand element (ReactNode)",
      expandElement: _react.default.createElement(_.Typography, {
        type: "secondary"
      }, "Toggle expand")
    }, _react.default.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'
};
var CollapsibleCardWithNoPadding = exports.CollapsibleCardWithNoPadding = {
  render: function render() {
    return _react.default.createElement(_.CollapsibleCard, {
      title: "Collapsible card with no title row padding",
      titleRowPaddingX: 0,
      titleRowPaddingY: 0,
      noIndicator: true
    }, _react.default.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'
};
var CollapsibleCardWithLotsOfTopAndBottomPadding = exports.CollapsibleCardWithLotsOfTopAndBottomPadding = {
  render: function render() {
    return _react.default.createElement(_.CollapsibleCard, {
      title: "Collapsible card with lots of top and bottom padding",
      titleRowPaddingY: 10
    }, _react.default.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'
};
var CollapsibleWithCustomFullWidthTitle = exports.CollapsibleWithCustomFullWidthTitle = function CollapsibleWithCustomFullWidthTitle() {
  return _react.default.createElement(_.CollapsibleCard, {
    fullWidthTitle: true,
    title: _react.default.createElement(_.Flexbox, {
      container: true,
      direction: "row",
      justifyContent: "space-between"
    }, _react.default.createElement(_.Flexbox, {
      item: true
    }, "Custom title"), _react.default.createElement(_.Flexbox, {
      item: true
    }, "Status"))
  }, _react.default.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."));
};