"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.WithoutCloseOnSpecificElementClick = exports.WithoutCloseOnClickOutside = exports.WithNoTitle = exports.WithFooterAndintegrationWithFadedScroll = exports.WithCustomTitle = exports.WithCloseButtonTitle = exports.WithAccordion = exports.OnAnimationCompleteStory = exports.NoInitialAnimationStory = exports.IntegrationWithFadedScroll = exports.DefaultStory = void 0;
var _react = _interopRequireWildcard(require("react"));
var _addonActions = require("@storybook/addon-actions");
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _Box = _interopRequireDefault(require("../../Atoms/Box"));
var _index = require("../../index");
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 _default = exports.default = {
  title: 'Molecules / Drawer',
  parameters: {
    component: _index.Drawer
  }
};
var contentSmall = _react.default.createElement(_index.Typography, {
  type: "primary",
  as: "p"
}, "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.");
var contentLarge = _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_index.Typography, {
  type: "primary",
  as: "p"
}, "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo."), _react.default.createElement(_index.Typography, {
  type: "primary"
}, _react.default.createElement("ul", null, _react.default.createElement("li", null, "Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat."), _react.default.createElement("li", null, "Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus."), _react.default.createElement("li", null, "Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi."), _react.default.createElement("li", null, "Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc."))), _react.default.createElement(_index.Typography, {
  type: "primary",
  as: "p"
}, "Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus"));
var ExampleContent = function ExampleContent() {
  return _react.default.createElement(_index.Typography, {
    as: "p",
    type: "secondary",
    color: function color(t) {
      return t.color.accordionText;
    }
  }, "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");
};
var contentWithAccordion = _react.default.createElement(_index.Accordion, null, _react.default.createElement(_index.AccordionItem, {
  title: "L\xE5g CO\u2082 risk"
}, _react.default.createElement(ExampleContent, null)), _react.default.createElement(_index.AccordionItem, {
  title: "Sustainability score"
}, _react.default.createElement(ExampleContent, null)));
var DefaultStory = exports.DefaultStory = {
  render: function render() {
    var Example = function Example() {
      var _useState = (0, _react.useState)(true),
        _useState2 = _slicedToArray(_useState, 2),
        open = _useState2[0],
        setOpen = _useState2[1];
      var toggle = function toggle() {
        setOpen(!open);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      return _react.default.createElement(_index.PageWrapper, {
        background: function background(t) {
          return t.color.card;
        }
      }, _react.default.createElement(_Box.default, {
        py: 100
      }, _react.default.createElement("button", {
        type: "button",
        onClick: toggle
      }, "Toggle drawer"), _react.default.createElement(_index.Drawer, {
        onClose: onClose,
        title: "Drawer title",
        open: open
      }, contentLarge)));
    };
    return _react.default.createElement(Example, null);
  },
  name: 'Default'
};
var WithCustomTitle = exports.WithCustomTitle = {
  render: function render() {
    var Example = function Example() {
      var _useState3 = (0, _react.useState)(true),
        _useState4 = _slicedToArray(_useState3, 2),
        open = _useState4[0],
        setOpen = _useState4[1];
      var toggle = function toggle() {
        setOpen(!open);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
        type: "button",
        onClick: toggle
      }, "Toggle drawer"), _react.default.createElement(_index.Drawer, {
        onClose: onClose,
        title: _react.default.createElement(_index.Flexbox, {
          container: true,
          gap: 2,
          alignItems: "center"
        }, _react.default.createElement(_index.OldIcon.Bank, null), _react.default.createElement(_index.Typography, {
          type: "title2",
          as: "h2"
        }, "Custom title")),
        open: open
      }, contentSmall));
    };
    return _react.default.createElement(Example, null);
  },
  name: 'With a custom title'
};
var WithNoTitle = exports.WithNoTitle = {
  render: function render() {
    var Example = function Example() {
      var _useState5 = (0, _react.useState)(true),
        _useState6 = _slicedToArray(_useState5, 2),
        open = _useState6[0],
        setOpen = _useState6[1];
      var toggle = function toggle() {
        setOpen(!open);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
        type: "button",
        onClick: toggle
      }, "Toggle drawer"), _react.default.createElement(_index.Drawer, {
        onClose: onClose,
        open: open
      }, contentSmall));
    };
    return _react.default.createElement(Example, null);
  },
  name: 'With no title'
};
var WithCloseButtonTitleExample = function WithCloseButtonTitleExample() {
  var _useState7 = (0, _react.useState)(true),
    _useState8 = _slicedToArray(_useState7, 2),
    open = _useState8[0],
    setOpen = _useState8[1];
  var toggle = function toggle() {
    setOpen(!open);
  };
  var onClose = function onClose() {
    setOpen(false);
  };
  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
    type: "button",
    onClick: toggle
  }, "Toggle drawer"), _react.default.createElement(_index.Drawer, {
    onClose: onClose,
    title: "Drawer title",
    closeButtonTitle: "Close",
    open: open
  }, contentLarge));
};
var WithCloseButtonTitle = exports.WithCloseButtonTitle = {
  render: function render() {
    return _react.default.createElement(WithCloseButtonTitleExample, null);
  }
};
var IntegrationWithFadedScroll = exports.IntegrationWithFadedScroll = {
  render: function render() {
    var Example = function Example() {
      var _useState9 = (0, _react.useState)(true),
        _useState10 = _slicedToArray(_useState9, 2),
        open = _useState10[0],
        setOpen = _useState10[1];
      var toggle = function toggle() {
        setOpen(!open);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
        type: "button",
        onClick: toggle
      }, "Toggle drawer"), _react.default.createElement(_index.Drawer, {
        onClose: onClose,
        title: "Drawer title",
        open: open
      }, _react.default.createElement(_index.FadedScroll, {
        enableMobileFade: true
      }, contentLarge)));
    };
    return _react.default.createElement(Example, null);
  },
  name: 'Integration: With FadedScroll'
};
var WithFooterAndintegrationWithFadedScroll = exports.WithFooterAndintegrationWithFadedScroll = {
  render: function render() {
    var Example = function Example() {
      var _useState11 = (0, _react.useState)(true),
        _useState12 = _slicedToArray(_useState11, 2),
        open = _useState12[0],
        setOpen = _useState12[1];
      var toggle = function toggle() {
        setOpen(!open);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
        type: "button",
        onClick: toggle
      }, "Toggle drawer"), _react.default.createElement(_index.Drawer, {
        onClose: onClose,
        title: "Drawer title",
        open: open,
        footer: _react.default.createElement(_index.Button, {
          variant: "secondary",
          fullWidth: true
        }, "Agree")
      }, _react.default.createElement(_index.FadedScroll, {
        enableMobileFade: true
      }, contentLarge)));
    };
    return _react.default.createElement(Example, null);
  },
  name: 'Integration: FadedScroll with sticky footer'
};
var WithoutCloseOnClickOutside = exports.WithoutCloseOnClickOutside = {
  render: function render() {
    var Example = function Example() {
      var _useState13 = (0, _react.useState)(true),
        _useState14 = _slicedToArray(_useState13, 2),
        open = _useState14[0],
        setOpen = _useState14[1];
      var toggle = function toggle() {
        setOpen(!open);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
        type: "button",
        onClick: toggle
      }, "Toggle drawer"), _react.default.createElement(_index.Drawer, {
        onClose: onClose,
        title: "Drawer title",
        open: open,
        closeOnClickOutside: false
      }, _react.default.createElement(_index.Typography, null, "This Drawer uses a forwardRef. The ref is used with useOnClickOutside hook. Try to click outside the Drawer to close it.")));
    };
    return _react.default.createElement(Example, null);
  },
  name: 'Without closing the drawer when clicking outside'
};
var StyledBoxBlue = (0, _styledComponents.default)(_Box.default).withConfig({
  displayName: "Drawerstories__StyledBoxBlue",
  componentId: "sc-1vreffx-0"
})(["background:", ";"], function (p) {
  return p.theme.color.paletteBlue[3];
});
var StyledBoxGreen = (0, _styledComponents.default)(_Box.default).withConfig({
  displayName: "Drawerstories__StyledBoxGreen",
  componentId: "sc-1vreffx-1"
})(["background:", ";"], function (p) {
  return p.theme.color.paletteGreen[4];
});
var WithoutCloseOnSpecificElementClick = exports.WithoutCloseOnSpecificElementClick = {
  render: function render() {
    var Example = function Example() {
      var _useState15 = (0, _react.useState)(true),
        _useState16 = _slicedToArray(_useState15, 2),
        open = _useState16[0],
        setOpen = _useState16[1];
      var toggle = function toggle() {
        setOpen(!open);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Box.default, null, _react.default.createElement("button", {
        type: "button",
        onClick: toggle
      }, "Toggle drawer (Buggy with close on click outside)")), _react.default.createElement(_Box.default, null, _react.default.createElement("button", {
        type: "button",
        onClick: toggle,
        "data-drawer-prevent-click-outside": true
      }, "Toggle drawer (Drawer click outside disabled on this element)")), _react.default.createElement(_Box.default, null, _react.default.createElement("button", {
        type: "button"
      }, "Random button")), _react.default.createElement(StyledBoxBlue, {
        "data-drawer-prevent-click-outside": true,
        p: 8
      }, _react.default.createElement(_index.Typography, {
        type: "title3"
      }, "Random area"), _react.default.createElement(_Box.default, null, _react.default.createElement(_index.Typography, {
        type: "primary"
      }, "Clicking anywhere here does not close the drawer, using the default", ' ', _react.default.createElement(_index.Typography, {
        weight: "bold"
      }, "\"data-drawer-prevent-click-outside\""), "-attribute.")), _react.default.createElement(_Box.default, {
        mt: 4
      }, _react.default.createElement("button", {
        type: "button"
      }, "Random button"))), _react.default.createElement(StyledBoxGreen, {
        "data-custom-prevent-click-outside": true,
        p: 8
      }, _react.default.createElement(_index.Typography, {
        type: "title3"
      }, "Another random area"), _react.default.createElement(_index.Typography, {
        type: "primary"
      }, "Clicking anywhere here does not close the drawer as well. But this area uses a custom \"data-custom-prevent-click-outside\"-attribute, which is passed to the Drawer to recognize it."), _react.default.createElement(_Box.default, {
        mt: 4
      }, _react.default.createElement(_index.Typography, {
        type: "primary"
      }, "Useful for when multiple drawers might be open but only one should remain open while clicking this area.")), _react.default.createElement(_Box.default, {
        mt: 4
      }, _react.default.createElement("input", {
        placeholder: "Random text input"
      }))), _react.default.createElement(_Box.default, null, _react.default.createElement(_index.Link, {
        "data-custom-prevent-click-outside": true
      }, "Buy")), _react.default.createElement(_Box.default, null, _react.default.createElement(_index.Button, {
        "data-custom-prevent-click-outside": true
      }, "Buy Button")), _react.default.createElement(_Box.default, null, _react.default.createElement(_index.LinkBuy, {
        "data-custom-prevent-click-outside": true
      }, "Buy Link")), _react.default.createElement(_Box.default, null, _react.default.createElement(_index.LinkSell, {
        "data-custom-prevent-click-outside": true
      }, "Sell Link")), _react.default.createElement(_index.Drawer, {
        onClose: onClose,
        title: "Drawer title",
        open: open,
        preventOnClickOutsideDataAttributes: ['data-custom-prevent-click-outside']
      }, _react.default.createElement(_Box.default, null, _react.default.createElement(_index.Typography, null, "Certain elements on this page has special data-attributes attached to them, which prevents the Drawer from closing. Try clicking on those elements and compare with clicking somewhere else.")), _react.default.createElement(_Box.default, {
        mt: 4
      }, _react.default.createElement(_index.Typography, {
        type: "primary"
      }, "Warning: ALL drawers' remain open when clicking on elements with the default attribute (", _react.default.createElement(_index.Typography, {
        weight: "bold"
      }, "\"data-drawer-prevent-click-outside\""), ")."))));
    };
    return _react.default.createElement(Example, null);
  },
  name: 'Without closing the drawer when clicking outside on specified elements'
};
var NoInitialAnimationStory = exports.NoInitialAnimationStory = {
  render: function render() {
    var Example = function Example() {
      var _useState17 = (0, _react.useState)(true),
        _useState18 = _slicedToArray(_useState17, 2),
        open = _useState18[0],
        setOpen = _useState18[1];
      var toggle = function toggle() {
        setOpen(!open);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
        type: "button",
        onClick: toggle
      }, "Toggle drawer"), _react.default.createElement(_index.Drawer, {
        onClose: onClose,
        title: "Drawer title",
        open: open,
        disableInitialAnimation: true
      }, contentLarge));
    };
    return _react.default.createElement(Example, null);
  },
  name: 'No initial animation'
};
var OnAnimationCompleteStory = exports.OnAnimationCompleteStory = {
  render: function render() {
    var Example = function Example() {
      var _useState19 = (0, _react.useState)(true),
        _useState20 = _slicedToArray(_useState19, 2),
        open = _useState20[0],
        setOpen = _useState20[1];
      var toggle = function toggle() {
        setOpen(!open);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
        type: "button",
        onClick: toggle
      }, "Toggle drawer"), _react.default.createElement(_index.Drawer, {
        onClose: onClose,
        title: "Drawer title",
        open: open,
        onAnimationComplete: (0, _addonActions.action)('Animation complete')
      }, contentLarge));
    };
    return _react.default.createElement(Example, null);
  },
  name: 'With on animation complete'
};
var WithAccordionComponent = function WithAccordionComponent() {
  var _useState21 = (0, _react.useState)(true),
    _useState22 = _slicedToArray(_useState21, 2),
    open = _useState22[0],
    setOpen = _useState22[1];
  var toggle = function toggle() {
    setOpen(!open);
  };
  var onClose = function onClose() {
    setOpen(false);
  };
  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("button", {
    type: "button",
    onClick: toggle
  }, "Toggle drawer"), _react.default.createElement(_index.Drawer, {
    onClose: onClose,
    title: "Drawer title",
    open: open
  }, contentWithAccordion));
};
var WithAccordion = exports.WithAccordion = {
  render: function render() {
    return _react.default.createElement(WithAccordionComponent, null);
  }
};