glints-aries 4.0.159 → 4.0.161

package/README.md

@@ -83,6 +83,23 @@ Currently there is an issue where the above leads to react complaining about mul
 4. Open terminal in `glints-aries`.
 5. Run `yarn link react`.
 
+### Adding visual test
+
+We use [playwright](https://playwright.dev/docs/test-snapshots) visual comparison test for components to check for regressions, since images in every browser and machine can be rendered differently we'll use docker image to generate and compare the screenshots.
+
+All visual test and screenshots can be found in `test/e2e` directory
+
+To generate new screenshots locally:
+
+Create docker image with `docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.29.0-focal /bin/bash`
+
+Run following commands in that image:
+
+1. Install the dependencies `yarn install` or `npm install`
+2. Run storybook `yarn storybook`
+3. Generate screenshot of your tests with `npx playwright test --update-snapshots`
+4. Commit and push your test screenshots
+
 ### Code structure in glints-aries
 
 1. Always do alphabetically when importing file.

package/es/Display/Accordion/Accordion.js

@@ -1,46 +1,35 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["label", "content"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import * as React from 'react';
 import classNames from 'classnames';
 import { AddIcon, MinusIcon, ArrowDownSolidIcon } from '../../General/Icon/components';
 import AccordionPanel from './AccordionPanel';
 import { Container } from './AccordionStyle';
-
 var Accordion = function Accordion(_ref) {
   var children = _ref.children,
-      className = _ref.className,
-      _ref$iconPosition = _ref.iconPosition,
-      iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition;
-
+    className = _ref.className,
+    _ref$iconPosition = _ref.iconPosition,
+    iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition;
   var _React$useState = React.useState(-1),
-      currIndex = _React$useState[0],
-      setCurrIndex = _React$useState[1];
-
+    currIndex = _React$useState[0],
+    setCurrIndex = _React$useState[1];
   var iconOptions = {
     activeIcon: iconPosition === 'left' ? /*#__PURE__*/React.createElement(MinusIcon, null) : /*#__PURE__*/React.createElement(ArrowDownSolidIcon, null),
     inactiveIcon: iconPosition === 'left' ? /*#__PURE__*/React.createElement(AddIcon, null) : /*#__PURE__*/React.createElement(ArrowDownSolidIcon, null),
     position: iconPosition
   };
-
   var handleOpen = function handleOpen(index) {
     setCurrIndex(currIndex === index ? -1 : index);
   };
-
   return /*#__PURE__*/React.createElement(Container, {
     className: classNames('aries-accordion', className)
   }, React.Children.map(children, function (child, index) {
     var _child$props = child.props,
-        label = _child$props.label,
-        content = _child$props.content,
-        restChildProps = _objectWithoutPropertiesLoose(_child$props, _excluded);
-
-    return /*#__PURE__*/React.cloneElement(child, _objectSpread({
+      label = _child$props.label,
+      content = _child$props.content,
+      restChildProps = _objectWithoutPropertiesLoose(_child$props, _excluded);
+    return /*#__PURE__*/React.cloneElement(child, _extends({
       key: index,
       label: label,
       content: content,
@@ -52,7 +41,6 @@ var Accordion = function Accordion(_ref) {
     }, restChildProps));
   }));
 };
-
 Accordion.Panel = AccordionPanel;
 Accordion.Panel.displayName = 'Accordion.Panel'; // To show the correct name in code sample
 

package/es/Display/Accordion/Accordion.stories.js

@@ -31,17 +31,16 @@ var defaultPanels = [{
   label: 'What is Lorem Ipsum?',
   content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.'
 }];
-
 var Template = function Template(_ref) {
   var _ref$iconPosition = _ref.iconPosition,
-      iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
-      _ref$panels = _ref.panels,
-      panels = _ref$panels === void 0 ? defaultPanels : _ref$panels;
+    iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
+    _ref$panels = _ref.panels,
+    panels = _ref$panels === void 0 ? defaultPanels : _ref$panels;
   return /*#__PURE__*/React.createElement(Accordion, {
     iconPosition: iconPosition
   }, panels.map(function (_ref2) {
     var label = _ref2.label,
-        content = _ref2.content;
+      content = _ref2.content;
     return /*#__PURE__*/React.createElement(Accordion.Panel, {
       key: label,
       label: label,
@@ -49,7 +48,6 @@ var Template = function Template(_ref) {
     });
   }));
 };
-
 export var Interactive = Template.bind({});
 export var DifferentIconPosition = Template.bind({});
 DifferentIconPosition.args = {

package/es/Display/Accordion/AccordionPanel.js

@@ -4,35 +4,30 @@ var _excluded = ["className", "content", "label", "active", "iconOptions", "onOp
 import * as React from 'react';
 import classNames from 'classnames';
 import { PanelWrapper, IconWrapper, IconLabelWrapper, ContentWrapper, Content, Label } from './AccordionStyle';
-
 var AccordionPanel = function AccordionPanel(props) {
   var className = props.className,
-      content = props.content,
-      label = props.label,
-      active = props.active,
-      _props$iconOptions = props.iconOptions,
-      activeIcon = _props$iconOptions.activeIcon,
-      inactiveIcon = _props$iconOptions.inactiveIcon,
-      position = _props$iconOptions.position,
-      onOpen = props.onOpen,
-      onClick = props.onClick,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded);
-
+    content = props.content,
+    label = props.label,
+    active = props.active,
+    _props$iconOptions = props.iconOptions,
+    activeIcon = _props$iconOptions.activeIcon,
+    inactiveIcon = _props$iconOptions.inactiveIcon,
+    position = _props$iconOptions.position,
+    onOpen = props.onOpen,
+    onClick = props.onClick,
+    restProps = _objectWithoutPropertiesLoose(props, _excluded);
   var handleClick = function handleClick(e) {
     onOpen();
-
     if (onClick) {
       onClick(e);
     }
   };
-
   var renderIcon = function renderIcon() {
     return /*#__PURE__*/React.createElement(IconWrapper, {
       position: position,
       active: active
     }, active ? activeIcon : inactiveIcon);
   };
-
   return /*#__PURE__*/React.createElement(PanelWrapper, _extends({
     className: classNames('panel-wrapper', className),
     role: "tab",
@@ -51,5 +46,4 @@ var AccordionPanel = function AccordionPanel(props) {
     position: position
   }, content)));
 };
-
 export default AccordionPanel;

package/es/Display/Accordion/AccordionStyle.js

@@ -11,9 +11,7 @@ export var PanelWrapper = styled.div.withConfig({
 export var Container = styled.div.withConfig({
   displayName: "AccordionStyle__Container",
   componentId: "sc-7hk6zs-1"
-})(["", ":first-child{border-top:none;}"],
-/* sc-selector */
-PanelWrapper);
+})(["", ":first-child{border-top:none;}"], /* sc-selector */PanelWrapper);
 export var IconLabelWrapper = styled.div.withConfig({
   displayName: "AccordionStyle__IconLabelWrapper",
   componentId: "sc-7hk6zs-2"
@@ -56,11 +54,9 @@ export var IconWrapper = styled.div.withConfig({
   componentId: "sc-7hk6zs-6"
 })(["display:flex;align-items:center;svg{width:", ";height:", ";}", ""], iconSize + "px", iconSize + "px", function (_ref8) {
   var position = _ref8.position,
-      active = _ref8.active;
-
+    active = _ref8.active;
   if (position === 'right') {
     return css(["transform:", ";transition:transform ", ";"], active ? 'rotate(180deg)' : 'none', transitionTiming);
   }
-
   return css(["margin-right:", ";"], iconMargin + "px");
 });

package/es/Display/Collapsible/Collapsible.js

@@ -8,19 +8,16 @@ import { ArrowDownIcon } from '../../General/Icon/components';
 import { CollapsibleContainer, CollapsibleContent, CollapsibleHeader, CollapsibleBody } from './CollapsibleStyle';
 export var Collapsible = function Collapsible(_ref) {
   var label = _ref.label,
-      children = _ref.children,
-      className = _ref.className,
-      isOpen = _ref.isOpen,
-      defaultProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    children = _ref.children,
+    className = _ref.className,
+    isOpen = _ref.isOpen,
+    defaultProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useState = useState(isUndefined(isOpen) ? true : isOpen),
-      isOpenInternal = _useState[0],
-      setIsOpenInternal = _useState[1];
-
+    isOpenInternal = _useState[0],
+    setIsOpenInternal = _useState[1];
   var toggle = function toggle() {
     setIsOpenInternal(!isOpenInternal);
   };
-
   return /*#__PURE__*/React.createElement(CollapsibleContainer, _extends({
     className: classNames('aries-collapsible', className),
     tabIndex: 0,

package/es/Display/Collapsible/Collapsible.stories.js

@@ -11,14 +11,11 @@ export default {
   }]
 };
 var defaultText = 'Lorem ipsum dolor sit amet consectetur adipisicing elit.';
-
 var Template = function Template(_ref) {
   var children = _ref.children,
-      args = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    args = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Collapsible, args, children || defaultText);
 };
-
 export var Interactive = Template.bind({});
 Interactive.args = {
   label: 'Lorem Ipsum',

package/es/Display/Collapsible/CollapsibleStyle.js

@@ -14,7 +14,6 @@ export var CollapsibleHeader = styled.div.withConfig({
   componentId: "sc-133mwvh-2"
 })(["background:", ";display:flex;justify-content:space-between;align-items:center;padding:1.2em;&:hover{color:", ";}svg{transform:rotate(0);transition:transform 0.5s;", "}"], Greyscale.white, SecondaryColor.actionblue, function (_ref) {
   var isOpen = _ref.isOpen;
-
   if (isOpen) {
     return "\n        transform: rotate(180deg);\n        transition: transform .5s;\n      ";
   }

package/es/Display/Gallery/Gallery.js

@@ -1,56 +1,47 @@
 /* eslint-disable react/no-array-index-key */
+
 import * as React from 'react';
 import Modal from '../../Display/Modal';
 import Slider from '../../Display/Slider';
 import { GalleryContainer, GalleryItemWrapper, GalleryItem, GalleryImageWrapper, GalleryThumbnailWrapper } from './GalleryStyle';
-
 var Gallery = function Gallery(_ref) {
   var _ref$initialVisibilit = _ref.initialVisibility,
-      initialVisibility = _ref$initialVisibilit === void 0 ? false : _ref$initialVisibilit,
-      children = _ref.children,
-      _ref$imagesDisplayed = _ref.imagesDisplayed,
-      imagesDisplayed = _ref$imagesDisplayed === void 0 ? 8 : _ref$imagesDisplayed;
+    initialVisibility = _ref$initialVisibilit === void 0 ? false : _ref$initialVisibilit,
+    children = _ref.children,
+    _ref$imagesDisplayed = _ref.imagesDisplayed,
+    imagesDisplayed = _ref$imagesDisplayed === void 0 ? 8 : _ref$imagesDisplayed;
   var sliderRef = React.useRef();
-
   var _React$useState = React.useState(initialVisibility),
-      visible = _React$useState[0],
-      setVisible = _React$useState[1];
-
+    visible = _React$useState[0],
+    setVisible = _React$useState[1];
   var _React$useState2 = React.useState(0),
-      currentIndex = _React$useState2[0],
-      setCurrentIndex = _React$useState2[1];
-
+    currentIndex = _React$useState2[0],
+    setCurrentIndex = _React$useState2[1];
   var _React$useState3 = React.useState(0),
-      imageLeft = _React$useState3[0],
-      setImageLeft = _React$useState3[1];
-
+    imageLeft = _React$useState3[0],
+    setImageLeft = _React$useState3[1];
   var closeModal = function closeModal() {
     return setVisible(false);
   };
-
   var handleClick = function handleClick(index) {
     setVisible(true);
     setCurrentIndex(index);
   };
-
   var handleClickThumbs = function handleClickThumbs(index) {
     return setCurrentIndex(index);
   };
-
   var getCurrentIndex = function getCurrentIndex(index) {
     return setCurrentIndex(index - 1);
   };
-
   var hasImage = React.Children.toArray(children).some(function (child) {
     return /*#__PURE__*/React.isValidElement(child) && child.type === 'img';
   });
-
   if (!hasImage) {
     console.error('Only img components allowed as children.');
   }
-
   React.useEffect(function componentDidMount() {
-    if (React.Children.count(children) > imagesDisplayed) setImageLeft(React.Children.count(children) - imagesDisplayed); // Disabling this warning because we want to preserver some legacy
+    if (React.Children.count(children) > imagesDisplayed) setImageLeft(React.Children.count(children) - imagesDisplayed);
+    // Disabling this warning because we want to preserver some legacy
     // behaviour here.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -105,5 +96,4 @@ var Gallery = function Gallery(_ref) {
     }));
   }))));
 };
-
 export default Gallery;

package/es/Display/Gallery/Gallery.stories.js

@@ -1,3 +1,4 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Gallery from './Gallery';
@@ -16,10 +17,8 @@ export default {
     }
   }
 };
-
 var Template = function Template(_ref) {
-  var args = _extends({}, _ref);
-
+  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/React.createElement(Gallery, args, /*#__PURE__*/React.createElement("img", {
     src: "https://images.unsplash.com/photo-1512979797260-1a645592b48f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2fc2ca84d8c407bd48ab15ea27c87eaf&auto=format&fit=crop&h=500&q=80",
     alt: "Profile Picture"
@@ -49,7 +48,6 @@ var Template = function Template(_ref) {
     alt: "Keyboard"
   }));
 };
-
 export var Interactive = Template.bind({});
 Interactive.args = {};
 export var ImagesDisplayed = Template.bind({});

package/es/Display/Gallery/GalleryStyle.js

@@ -13,7 +13,6 @@ export var GalleryItem = styled.div.withConfig({
   componentId: "sc-mrr504-2"
 })(["position:relative;margin:5px;", ""], function (_ref) {
   var imageLeft = _ref.imageLeft;
-
   if (imageLeft !== 0) {
     return "\n        &:last-child:after {\n          content: '+" + imageLeft + "';\n          position: absolute;\n          top: 0;\n          left: 0;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          color: #0869C2;\n          height: 100%;\n          width: 100%;\n          font-size: 18px;\n          background: rgba(255, 255, 255, 0.75);\n          cursor: pointer;\n        }\n      ";
   }

package/es/Display/Modal/Modal.js

@@ -11,29 +11,26 @@ import { checkIsChildrenInMultiLines } from './utils';
 import { ModalContainer, ModalDialog, ModalContentArea, ModalHeader, ModalBody, ModalFooter } from './ModalStyle';
 export var Modal = function Modal(_ref) {
   var isVisible = _ref.isVisible,
-      title = _ref.title,
-      onClose = _ref.onClose,
-      children = _ref.children,
-      className = _ref.className,
-      hideContentArea = _ref.hideContentArea,
-      centering = _ref.centering,
-      fullscreen = _ref.fullscreen,
-      removeAnimation = _ref.removeAnimation,
-      footer = _ref.footer,
-      size = _ref.size,
-      hideHeader = _ref.hideHeader,
-      keepChildrenMountedOnClose = _ref.keepChildrenMountedOnClose,
-      restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    title = _ref.title,
+    onClose = _ref.onClose,
+    children = _ref.children,
+    className = _ref.className,
+    hideContentArea = _ref.hideContentArea,
+    centering = _ref.centering,
+    fullscreen = _ref.fullscreen,
+    removeAnimation = _ref.removeAnimation,
+    footer = _ref.footer,
+    size = _ref.size,
+    hideHeader = _ref.hideHeader,
+    keepChildrenMountedOnClose = _ref.keepChildrenMountedOnClose,
+    restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   var modalContentAreaRef = useRef(null);
   var modalContainerRef = useRef(null);
   var modalBodyRef = useRef(null);
   var modalFooterRef = useRef(null);
-
   var _useState = useState(false),
-      isFooterChildrenInMultiLines = _useState[0],
-      setIsFooterChildrenInMultiLines = _useState[1];
-
+    isFooterChildrenInMultiLines = _useState[0],
+    setIsFooterChildrenInMultiLines = _useState[1];
   var handleClose = React.useCallback(function () {
     if (typeof onClose === 'function') {
       onClose();
@@ -42,13 +39,12 @@ export var Modal = function Modal(_ref) {
   useLayoutEffect(function () {
     var scrollableTarget = centering ? modalBodyRef.current : modalContainerRef.current;
     if (!scrollableTarget) return;
+
     /**
      * this tricks mobile safari into thinking the overlay is scrollable, thus
      * intercepting the touch event from the body to prevent background scrolling
      */
-
     scrollableTarget.style['-webkit-overflow-scrolling'] = 'touch';
-
     if (isVisible) {
       // On modal open
       modalContentAreaRef.current.focus();
@@ -57,7 +53,6 @@ export var Modal = function Modal(_ref) {
       // On modal close
       enableBodyScroll(scrollableTarget);
     }
-
     return function () {
       clearAllBodyScrollLocks();
     };
@@ -66,10 +61,11 @@ export var Modal = function Modal(_ref) {
     var escapeKeyEventListener = createEscapeKeyEventListener(function () {
       if (isVisible) handleClose();
     });
-    document.addEventListener('keydown', escapeKeyEventListener, false); // This function will be called on unmount and _before_ this effect is
+    document.addEventListener('keydown', escapeKeyEventListener, false);
+
+    // This function will be called on unmount and _before_ this effect is
     // re-executed because its dependencies changed. This gives us the chance
     // to clean up the existing escape key event listener.
-
     return function () {
       return document.removeEventListener('keydown', escapeKeyEventListener, false);
     };
@@ -79,17 +75,17 @@ export var Modal = function Modal(_ref) {
       var isChildrenInMultiLines = checkIsChildrenInMultiLines(modalFooterRef);
       setIsFooterChildrenInMultiLines(isChildrenInMultiLines);
     };
-
     var debouncedCheckFooter = debounce(checkIsFooterChildrenInMultiLines, 500);
     debouncedCheckFooter();
     window.addEventListener('resize', debouncedCheckFooter);
     return function () {
       return window.removeEventListener('resize', debouncedCheckFooter);
     };
-  }, []); // To prevent the modal from closing
+  }, []);
+
+  // To prevent the modal from closing
   // when a mousedown event occurs inside the ModalContentArea
   // but the subsequent mouseup event occurs outside
-
   var mouseDownTarget = useRef(null);
   var handleMouseDown = useCallback(function (e) {
     var element = e.target;
@@ -97,7 +93,6 @@ export var Modal = function Modal(_ref) {
   }, [mouseDownTarget]);
   var handleClick = useCallback(function (e) {
     var element = e.target;
-
     if (mouseDownTarget.current === element) {
       handleClose();
     }

package/es/Display/Modal/Modal.stories.js

@@ -15,18 +15,15 @@ export default {
 };
 var defaultTitle = 'Lorem Ipsum';
 var defaultChildren = 'Lorem ipsum dolor sit amet consectetur adipisicing elit.';
-
 var Template = function Template(_ref) {
   var children = _ref.children,
-      title = _ref.title,
-      _ref$buttonTexts = _ref.buttonTexts,
-      buttonTexts = _ref$buttonTexts === void 0 ? [] : _ref$buttonTexts,
-      args = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    title = _ref.title,
+    _ref$buttonTexts = _ref.buttonTexts,
+    buttonTexts = _ref$buttonTexts === void 0 ? [] : _ref$buttonTexts,
+    args = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useState = useState(false),
-      isModalVisible = _useState[0],
-      setIsModalVisible = _useState[1];
-
+    isModalVisible = _useState[0],
+    setIsModalVisible = _useState[1];
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
     variant: "solid-blue",
     onClick: function onClick() {
@@ -53,7 +50,6 @@ var Template = function Template(_ref) {
     }, buttonTexts[1] || 'Save')]
   }), children || defaultChildren));
 };
-
 export var Interactive = Template.bind({});
 Interactive.args = {
   title: defaultTitle,

package/es/Display/Modal/ModalStyle.js

@@ -19,8 +19,7 @@ export var ModalContainer = styled.div.withConfig({
   return centering && 'center';
 }, function (_ref3) {
   var removeAnimation = _ref3.removeAnimation,
-      isOpen = _ref3.isOpen;
-
+    isOpen = _ref3.isOpen;
   if (!removeAnimation) {
     return "\n        opacity: " + (isOpen ? '1' : '0') + ";\n        transform: " + (isOpen ? 'scale(1)' : 'scale(0.98)') + ";\n        transform-origin: center;\n        transition: " + (isOpen ? 'all .2s ease-in' : 'all .15s ease-out') + ";\n      ";
   }
@@ -38,7 +37,6 @@ export var ModalBody = styled.section.withConfig({
   componentId: "sc-bg1vyz-3"
 })(["position:relative;", " padding:", ";@media ", "{padding:", ";}"], function (_ref4) {
   var centering = _ref4.centering;
-
   if (centering) {
     return "\n        max-height: 300px;\n        overflow: auto;\n      ";
   }
@@ -54,11 +52,9 @@ export var ModalFooter = styled.footer.withConfig({
   componentId: "sc-bg1vyz-4"
 })(["position:relative;display:flex;flex-direction:row;flex-wrap:wrap;padding:16px 30px;justify-content:flex-end;border-top:1px solid ", ";@media ", "{padding:16px;}", ""], Greyscale.lightgrey, Device.mobileM, function (_ref7) {
   var isChildrenInMultiLines = _ref7.isChildrenInMultiLines;
-
   if (isChildrenInMultiLines) {
     return "\n        flex-direction: column-reverse;\n\n        > * {\n          flex-grow: 1;\n\n          &:nth-child(2) {\n            margin-bottom: 10px; \n          }\n\n          button {\n            width: 100%;\n          }\n        }\n      ";
   }
-
   return "\n      > *:nth-child(2) {\n        margin-left: 10px;\n      }\n    ";
 });
 export var ModalContentArea = styled.div.withConfig({
@@ -69,39 +65,31 @@ export var ModalContentArea = styled.div.withConfig({
   return hideContentArea ? 'transparent' : "" + Greyscale.white;
 }, function (_ref9) {
   var size = _ref9.size;
-
   switch (size) {
     case 's':
       return "\n          width: " + SIZES.s + "px;\n        ";
-
     case 'm':
       return "\n          width: " + SIZES.m + "px;\n        ";
-
     case 'l':
       return "\n          width: " + SIZES.l + "px;\n        ";
-
     case 'xl':
       return "\n          width: " + SIZES.xl + "px;\n        ";
-
     default:
       return "\n          width: " + SIZES["default"] + "px;\n        ";
   }
 }, function (_ref10) {
   var centering = _ref10.centering;
-
   if (centering) {
     return "\n        display: flex;\n        flex-direction: column;\n        max-height: 85vh;\n      ";
   }
 }, function (_ref11) {
   var fullscreen = _ref11.fullscreen;
-
   if (fullscreen) {
     return "\n        display: flex;\n        flex-direction: column;\n        max-width: none;\n        max-height: none;\n        min-width: 100vw;\n        min-height: 100vh;\n        margin: 0;\n\n        " + ModalBody + " {\n          overflow: auto;\n        }\n\n        " + ModalFooter + " {\n          margin-top: auto;\n        }\n      ";
   }
 }, Device.mobileM, function (_ref12) {
   var removeAnimation = _ref12.removeAnimation,
-      isOpen = _ref12.isOpen;
-
+    isOpen = _ref12.isOpen;
   if (!removeAnimation) {
     return "\n        opacity: " + (isOpen ? '1' : '0') + ";\n        transform: " + (isOpen ? 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' : 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 30, 0, 1)') + ";\n        transition: " + (isOpen ? 'all .25s ease-in' : 'all .25s ease-out') + ";\n      ";
   }

package/es/Display/Modal/utils.js

@@ -7,13 +7,10 @@ export var checkIsChildrenInMultiLines = function checkIsChildrenInMultiLines(re
   if (!ref.current) {
     return false;
   }
-
   var childNodes = ref.current.childNodes;
-
   if (childNodes.length < 2) {
     return false;
   }
-
   var firstElement = childNodes[0];
   var secondElement = childNodes[1];
   return firstElement.offsetTop !== secondElement.offsetTop;

package/es/Display/PointingModal/PointingModal.js

@@ -8,12 +8,10 @@ import PointingModalHeader from './PointingModalHeader';
 import PointingModalBody from './PointingModalBody';
 import PointingModalItem from './PointingModalItem';
 import PointingModalFooter from './PointingModalFooter';
-
 var PointingModal = function PointingModal(props) {
   var children = props.children,
-      className = props.className,
-      defaultProps = _objectWithoutPropertiesLoose(props, _excluded);
-
+    className = props.className,
+    defaultProps = _objectWithoutPropertiesLoose(props, _excluded);
   return /*#__PURE__*/React.createElement(PointingModalContainer, _extends({
     className: classNames('aries-pointingmodal', className),
     role: "dialog",
@@ -22,7 +20,6 @@ var PointingModal = function PointingModal(props) {
     role: "presentation"
   }), children);
 };
-
 PointingModal.Header = PointingModalHeader;
 PointingModal.Header.displayName = 'PointingModal.Header';
 PointingModal.Body = PointingModalBody;

package/es/Display/PointingModal/PointingModal.stories.js

@@ -1,3 +1,4 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import PointingModal from './PointingModal';
@@ -11,10 +12,8 @@ export default {
     return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
   }]
 };
-
 var Template = function Template(_ref) {
-  var args = _extends({}, _ref);
-
+  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/React.createElement(PointingModal, args, /*#__PURE__*/React.createElement(PointingModal.Header, null, /*#__PURE__*/React.createElement(ProfilePicture, {
     editable: true
   }, /*#__PURE__*/React.createElement("img", {
@@ -28,6 +27,5 @@ var Template = function Template(_ref) {
     theme: "grey"
   }), /*#__PURE__*/React.createElement(PointingModal.Body, null, /*#__PURE__*/React.createElement(PointingModal.Item, null, "View Profile"), /*#__PURE__*/React.createElement(PointingModal.Item, null, "Edit Profile"), /*#__PURE__*/React.createElement(PointingModal.Item, null, "Sign Out")), /*#__PURE__*/React.createElement(PointingModal.Footer, null, "Have a nice day"));
 };
-
 export var Interactive = Template.bind({});
 Interactive.args = {};

package/es/Display/PointingModal/PointingModalBody.js

@@ -4,16 +4,13 @@ var _excluded = ["children", "className"];
 import * as React from 'react';
 import classNames from 'classnames';
 import { PointingModalBodyWrapper } from './PointingModalStyle';
-
 var PointingModalBody = function PointingModalBody(props) {
   var children = props.children,
-      className = props.className,
-      defaultProps = _objectWithoutPropertiesLoose(props, _excluded);
-
+    className = props.className,
+    defaultProps = _objectWithoutPropertiesLoose(props, _excluded);
   return /*#__PURE__*/React.createElement(PointingModalBodyWrapper, _extends({
     className: classNames('pointingmodal-body', className),
     role: "list"
   }, defaultProps), /*#__PURE__*/React.createElement("ul", null, children));
 };
-
 export default PointingModalBody;