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 { action } from '@storybook/addon-actions';
import styled from 'styled-components';
import Box from '../../Atoms/Box';
import { Accordion, AccordionItem, Button, Drawer, FadedScroll, Flexbox, OldIcon, Typography, Link, LinkBuy, LinkSell, PageWrapper } from '../../index';
export default {
  title: 'Molecules / Drawer',
  parameters: {
    component: Drawer
  }
};
var contentSmall = React.createElement(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.createElement(React.Fragment, null, React.createElement(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.createElement(Typography, {
  type: "primary"
}, React.createElement("ul", null, React.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.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.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.createElement("li", null, "Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc."))), React.createElement(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.createElement(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.createElement(Accordion, null, React.createElement(AccordionItem, {
  title: "L\xE5g CO\u2082 risk"
}, React.createElement(ExampleContent, null)), React.createElement(AccordionItem, {
  title: "Sustainability score"
}, React.createElement(ExampleContent, null)));
export var DefaultStory = {
  render: function render() {
    var Example = function Example() {
      var _useState = 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.createElement(PageWrapper, {
        background: function background(t) {
          return t.color.card;
        }
      }, React.createElement(Box, {
        py: 100
      }, React.createElement("button", {
        type: "button",
        onClick: toggle
      }, "Toggle drawer"), React.createElement(Drawer, {
        onClose: onClose,
        title: "Drawer title",
        open: open
      }, contentLarge)));
    };
    return React.createElement(Example, null);
  },
  name: 'Default'
};
export var WithCustomTitle = {
  render: function render() {
    var Example = function Example() {
      var _useState3 = 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.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: toggle
      }, "Toggle drawer"), React.createElement(Drawer, {
        onClose: onClose,
        title: React.createElement(Flexbox, {
          container: true,
          gap: 2,
          alignItems: "center"
        }, React.createElement(OldIcon.Bank, null), React.createElement(Typography, {
          type: "title2",
          as: "h2"
        }, "Custom title")),
        open: open
      }, contentSmall));
    };
    return React.createElement(Example, null);
  },
  name: 'With a custom title'
};
export var WithNoTitle = {
  render: function render() {
    var Example = function Example() {
      var _useState5 = 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.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: toggle
      }, "Toggle drawer"), React.createElement(Drawer, {
        onClose: onClose,
        open: open
      }, contentSmall));
    };
    return React.createElement(Example, null);
  },
  name: 'With no title'
};
var WithCloseButtonTitleExample = function WithCloseButtonTitleExample() {
  var _useState7 = 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.createElement(React.Fragment, null, React.createElement("button", {
    type: "button",
    onClick: toggle
  }, "Toggle drawer"), React.createElement(Drawer, {
    onClose: onClose,
    title: "Drawer title",
    closeButtonTitle: "Close",
    open: open
  }, contentLarge));
};
export var WithCloseButtonTitle = {
  render: function render() {
    return React.createElement(WithCloseButtonTitleExample, null);
  }
};
export var IntegrationWithFadedScroll = {
  render: function render() {
    var Example = function Example() {
      var _useState9 = 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.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: toggle
      }, "Toggle drawer"), React.createElement(Drawer, {
        onClose: onClose,
        title: "Drawer title",
        open: open
      }, React.createElement(FadedScroll, {
        enableMobileFade: true
      }, contentLarge)));
    };
    return React.createElement(Example, null);
  },
  name: 'Integration: With FadedScroll'
};
export var WithFooterAndintegrationWithFadedScroll = {
  render: function render() {
    var Example = function Example() {
      var _useState11 = 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.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: toggle
      }, "Toggle drawer"), React.createElement(Drawer, {
        onClose: onClose,
        title: "Drawer title",
        open: open,
        footer: React.createElement(Button, {
          variant: "secondary",
          fullWidth: true
        }, "Agree")
      }, React.createElement(FadedScroll, {
        enableMobileFade: true
      }, contentLarge)));
    };
    return React.createElement(Example, null);
  },
  name: 'Integration: FadedScroll with sticky footer'
};
export var WithoutCloseOnClickOutside = {
  render: function render() {
    var Example = function Example() {
      var _useState13 = 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.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: toggle
      }, "Toggle drawer"), React.createElement(Drawer, {
        onClose: onClose,
        title: "Drawer title",
        open: open,
        closeOnClickOutside: false
      }, React.createElement(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.createElement(Example, null);
  },
  name: 'Without closing the drawer when clicking outside'
};
var StyledBoxBlue = styled(Box).withConfig({
  displayName: "Drawerstories__StyledBoxBlue",
  componentId: "sc-1vreffx-0"
})(["background:", ";"], function (p) {
  return p.theme.color.paletteBlue[3];
});
var StyledBoxGreen = styled(Box).withConfig({
  displayName: "Drawerstories__StyledBoxGreen",
  componentId: "sc-1vreffx-1"
})(["background:", ";"], function (p) {
  return p.theme.color.paletteGreen[4];
});
export var WithoutCloseOnSpecificElementClick = {
  render: function render() {
    var Example = function Example() {
      var _useState15 = 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.createElement(React.Fragment, null, React.createElement(Box, null, React.createElement("button", {
        type: "button",
        onClick: toggle
      }, "Toggle drawer (Buggy with close on click outside)")), React.createElement(Box, null, React.createElement("button", {
        type: "button",
        onClick: toggle,
        "data-drawer-prevent-click-outside": true
      }, "Toggle drawer (Drawer click outside disabled on this element)")), React.createElement(Box, null, React.createElement("button", {
        type: "button"
      }, "Random button")), React.createElement(StyledBoxBlue, {
        "data-drawer-prevent-click-outside": true,
        p: 8
      }, React.createElement(Typography, {
        type: "title3"
      }, "Random area"), React.createElement(Box, null, React.createElement(Typography, {
        type: "primary"
      }, "Clicking anywhere here does not close the drawer, using the default", ' ', React.createElement(Typography, {
        weight: "bold"
      }, "\"data-drawer-prevent-click-outside\""), "-attribute.")), React.createElement(Box, {
        mt: 4
      }, React.createElement("button", {
        type: "button"
      }, "Random button"))), React.createElement(StyledBoxGreen, {
        "data-custom-prevent-click-outside": true,
        p: 8
      }, React.createElement(Typography, {
        type: "title3"
      }, "Another random area"), React.createElement(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.createElement(Box, {
        mt: 4
      }, React.createElement(Typography, {
        type: "primary"
      }, "Useful for when multiple drawers might be open but only one should remain open while clicking this area.")), React.createElement(Box, {
        mt: 4
      }, React.createElement("input", {
        placeholder: "Random text input"
      }))), React.createElement(Box, null, React.createElement(Link, {
        "data-custom-prevent-click-outside": true
      }, "Buy")), React.createElement(Box, null, React.createElement(Button, {
        "data-custom-prevent-click-outside": true
      }, "Buy Button")), React.createElement(Box, null, React.createElement(LinkBuy, {
        "data-custom-prevent-click-outside": true
      }, "Buy Link")), React.createElement(Box, null, React.createElement(LinkSell, {
        "data-custom-prevent-click-outside": true
      }, "Sell Link")), React.createElement(Drawer, {
        onClose: onClose,
        title: "Drawer title",
        open: open,
        preventOnClickOutsideDataAttributes: ['data-custom-prevent-click-outside']
      }, React.createElement(Box, null, React.createElement(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.createElement(Box, {
        mt: 4
      }, React.createElement(Typography, {
        type: "primary"
      }, "Warning: ALL drawers' remain open when clicking on elements with the default attribute (", React.createElement(Typography, {
        weight: "bold"
      }, "\"data-drawer-prevent-click-outside\""), ")."))));
    };
    return React.createElement(Example, null);
  },
  name: 'Without closing the drawer when clicking outside on specified elements'
};
export var NoInitialAnimationStory = {
  render: function render() {
    var Example = function Example() {
      var _useState17 = 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.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: toggle
      }, "Toggle drawer"), React.createElement(Drawer, {
        onClose: onClose,
        title: "Drawer title",
        open: open,
        disableInitialAnimation: true
      }, contentLarge));
    };
    return React.createElement(Example, null);
  },
  name: 'No initial animation'
};
export var OnAnimationCompleteStory = {
  render: function render() {
    var Example = function Example() {
      var _useState19 = 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.createElement(React.Fragment, null, React.createElement("button", {
        type: "button",
        onClick: toggle
      }, "Toggle drawer"), React.createElement(Drawer, {
        onClose: onClose,
        title: "Drawer title",
        open: open,
        onAnimationComplete: action('Animation complete')
      }, contentLarge));
    };
    return React.createElement(Example, null);
  },
  name: 'With on animation complete'
};
var WithAccordionComponent = function WithAccordionComponent() {
  var _useState21 = 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.createElement(React.Fragment, null, React.createElement("button", {
    type: "button",
    onClick: toggle
  }, "Toggle drawer"), React.createElement(Drawer, {
    onClose: onClose,
    title: "Drawer title",
    open: open
  }, contentWithAccordion));
};
export var WithAccordion = {
  render: function render() {
    return React.createElement(WithAccordionComponent, null);
  }
};