@pingux/astro 2.152.0 → 2.153.0-alpha.0

package/lib/cjs/components/Modal/tests/Modal.unit.test.js

@@ -199,6 +199,7 @@ test('should only hide the top-most overlay', function () {
 });
 test('should render a close button if hasCloseButton is true', function () {
   getComponent({
+    title: 'Lorem Ipsum',
     hasCloseButton: true
   });
   expect(_testWrapper.screen.queryByRole('button')).toBeInTheDocument();
@@ -210,6 +211,7 @@ test('should render a custom close button if hasCloseButton is true and custom b
     });
   };
   getComponent({
+    title: 'Lorem Ipsum',
     hasCloseButton: true,
     closeButton: (0, _react2.jsx)(MyButton, null)
   });
@@ -218,6 +220,7 @@ test('should render a custom close button if hasCloseButton is true and custom b
 });
 test('shouldn\'t auto focus the first tabbable element', function () {
   getComponent({
+    title: 'Lorem Ipsum',
     hasCloseButton: true
   });
   var button = _testWrapper.screen.queryByRole('button');
@@ -225,6 +228,7 @@ test('shouldn\'t auto focus the first tabbable element', function () {
 });
 test('should auto focus the first tabbable element if "hasAutoFocus" is true', function () {
   getComponent({
+    title: 'Lorem Ipsum',
     hasCloseButton: true,
     hasAutoFocus: true
   });

package/lib/cjs/index.d.ts

@@ -225,5 +225,5 @@ export { default as OnyxDarkTheme } from './styles/themeOverrides/nextGenDarkMod
 export { default as NextGenTheme } from './styles/themes/next-gen';
 export { default as OnyxTheme } from './styles/themes/next-gen';
 export * from './types';
-export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from 'react-aria';
+export { OverlayProvider, useOverlayPosition, useOverlayTrigger, } from 'react-aria';
 export { Cell, Column, TableBody as DataTableBody, Cell as DataTableCell, Column as DataTableColumn, TableHeader as DataTableHeader, Row as DataTableRow, Item, Row, Section, TableBody as TBody, TableHeader as THead, useOverlayTriggerState, useTreeData, } from 'react-stately';

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/buttons.d.ts

@@ -285,6 +285,24 @@ declare const buttons: {
                 };
             };
         };
+        modalHeaderCloseButton: {
+            path: {
+                fill: string;
+            };
+            '&.is-hovered': {
+                path: {
+                    fill: string;
+                };
+                backgroundColor: string;
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                borderColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+        };
         messageCloseButton: {
             '&.is-hovered': {
                 backgroundColor: string;
@@ -301,6 +319,24 @@ declare const buttons: {
             };
         };
     };
+    modalCloseButton: {
+        path: {
+            fill: string;
+        };
+        '&.is-hovered': {
+            path: {
+                fill: string;
+            };
+            backgroundColor: string;
+        };
+        '&.is-pressed': {
+            backgroundColor: string;
+            borderColor: string;
+            path: {
+                fill: string;
+            };
+        };
+    };
     listBoxLink: {
         color: string;
         '&.is-pressed': {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/buttons.js

@@ -37,6 +37,7 @@ var baseIconButton = {
   }
 };
 var hintButton = _objectSpread({}, baseIconButton);
+var modalCloseButton = _objectSpread({}, baseIconButton);
 var iconButtons = {
   base: _objectSpread({}, baseIconButton),
   inverted: {
@@ -72,6 +73,7 @@ var iconButtons = {
     }
   }),
   modalCloseButton: _objectSpread({}, baseIconButton),
+  modalHeaderCloseButton: _objectSpread({}, baseIconButton),
   messageCloseButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     '&.is-hovered': {
       backgroundColor: '#455469'
@@ -270,6 +272,7 @@ var buttons = {
     }
   },
   iconButtons: iconButtons,
+  modalCloseButton: modalCloseButton,
   listBoxLink: {
     color: 'blue-400',
     '&.is-pressed': {

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -1223,9 +1223,38 @@ declare const _default: {
                 boxShadow: string;
             };
             modalCloseButton: {
-                position: string;
-                top: number;
-                right: number;
+                path: {
+                    fill: string;
+                };
+                '&.is-hovered': {
+                    backgroundColor: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+                '&.is-pressed': {
+                    backgroundColor: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+                '&.is-focused': {
+                    outline: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                };
+                p: string;
+                transition: string;
+                outline: string;
+                borderRadius: string;
+                border: string;
+                cursor: string;
+                boxShadow: string;
+            };
+            modalHeaderCloseButton: {
+                top: string;
+                transform: string;
+                right: string;
                 path: {
                     fill: string;
                 };
@@ -1540,9 +1569,6 @@ declare const _default: {
             };
         };
         modalCloseButton: {
-            position: string;
-            top: number;
-            right: number;
             path: {
                 fill: string;
             };
@@ -4561,17 +4587,10 @@ declare const _default: {
         modal: {
             content: {
                 boxShadow: string;
-                px: string;
-                pb: string;
-                pt: number;
                 borderRadius: string;
                 opacity: number;
-                top: string;
-                transform: string;
                 transition: string;
                 m: string[];
-                maxHeight: string;
-                overflowY: string;
                 '&.is-open-no-transition': {
                     opacity: string;
                     transform: string;
@@ -4607,13 +4626,30 @@ declare const _default: {
                 bg: string;
                 borderRadius: string;
             };
-            container: {
-                justifyContent: string;
-            };
             header: {
-                pt: string;
                 bg: string;
-                mb: string;
+                borderBottom: string;
+                borderBottomColor: string;
+                borderRadius: string;
+                px: string;
+                py: string;
+            };
+            bodyContainer: {
+                p: string;
+            };
+            body: {
+                p: string;
+            };
+            footer: {
+                borderTop: string;
+                borderTopColor: string;
+                borderRadius: string;
+                p: string;
+            };
+            footerContainer: {
+                borderTop: string;
+                borderTopColor: string;
+                borderRadius: string;
             };
         };
         navBar: {

package/lib/cjs/styles/themes/next-gen/variants/button.d.ts

@@ -926,9 +926,38 @@ declare const buttons: {
             boxShadow: string;
         };
         modalCloseButton: {
-            position: string;
-            top: number;
-            right: number;
+            path: {
+                fill: string;
+            };
+            '&.is-hovered': {
+                backgroundColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+            p: string;
+            transition: string;
+            outline: string;
+            borderRadius: string;
+            border: string;
+            cursor: string;
+            boxShadow: string;
+        };
+        modalHeaderCloseButton: {
+            top: string;
+            transform: string;
+            right: string;
             path: {
                 fill: string;
             };
@@ -1243,9 +1272,6 @@ declare const buttons: {
         };
     };
     modalCloseButton: {
-        position: string;
-        top: number;
-        right: number;
         path: {
             fill: string;
         };

package/lib/cjs/styles/themes/next-gen/variants/button.js

@@ -381,11 +381,7 @@ var invertedIconButton = _objectSpread(_objectSpread({}, baseIconButtonStyle), {
   },
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
-var modalCloseButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
-  position: 'absolute',
-  top: 32,
-  right: 18
-});
+var modalCloseButton = _objectSpread({}, baseIconButton);
 var onyxIconButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
   path: {
     fill: 'blue'
@@ -461,6 +457,11 @@ var iconButtons = {
     display: 'inline-flex'
   }),
   modalCloseButton: modalCloseButton,
+  modalHeaderCloseButton: _objectSpread(_objectSpread({}, modalCloseButton), {}, {
+    top: '50%',
+    transform: 'translateY(-50%)',
+    right: '16px'
+  }),
   badge: {
     deleteButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
       borderRadius: '50%',

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -1015,17 +1015,10 @@ declare const _default: {
     modal: {
         content: {
             boxShadow: string;
-            px: string;
-            pb: string;
-            pt: number;
             borderRadius: string;
             opacity: number;
-            top: string;
-            transform: string;
             transition: string;
             m: string[];
-            maxHeight: string;
-            overflowY: string;
             '&.is-open-no-transition': {
                 opacity: string;
                 transform: string;
@@ -1061,13 +1054,30 @@ declare const _default: {
             bg: string;
             borderRadius: string;
         };
-        container: {
-            justifyContent: string;
-        };
         header: {
-            pt: string;
             bg: string;
-            mb: string;
+            borderBottom: string;
+            borderBottomColor: string;
+            borderRadius: string;
+            px: string;
+            py: string;
+        };
+        bodyContainer: {
+            p: string;
+        };
+        body: {
+            p: string;
+        };
+        footer: {
+            borderTop: string;
+            borderTopColor: string;
+            borderRadius: string;
+            p: string;
+        };
+        footerContainer: {
+            borderTop: string;
+            borderTopColor: string;
+            borderRadius: string;
         };
     };
     navBar: {

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -83,17 +83,10 @@ var modalSize = {
 var modal = {
   content: {
     boxShadow: '0px 8px 16px 0px rgba(0, 0, 0, 0.5)',
-    px: 'lg',
-    pb: 'lg',
-    pt: 0,
-    borderRadius: '4px',
+    borderRadius: '1em',
     opacity: 0,
-    top: '0',
-    transform: 'translate(0, -50px)',
     transition: 'opacity 300ms ease, transform 500ms ease-out',
     m: ['sm', 'sm', '1.75rem auto'],
-    maxHeight: 'calc(100vh - 3.5rem)',
-    overflowY: 'auto',
     '&.is-open-no-transition': {
       opacity: '100%',
       transform: 'none'
@@ -129,13 +122,30 @@ var modal = {
     bg: 'backgroundBase',
     borderRadius: '1em 1em 0px 0px'
   },
-  container: {
-    justifyContent: 'start'
-  },
   header: {
-    pt: 'lg',
     bg: 'backgroundBase',
-    mb: 'lg'
+    borderBottom: '1px solid',
+    borderBottomColor: 'gray-200',
+    borderRadius: '1em 1em 0px 0px',
+    px: 'lg',
+    py: 'md'
+  },
+  bodyContainer: {
+    p: 'lg'
+  },
+  body: {
+    p: 'lg'
+  },
+  footer: {
+    borderTop: '1px solid',
+    borderTopColor: 'gray-200',
+    borderRadius: '0px 0px 1em 1em',
+    p: 'lg'
+  },
+  footerContainer: {
+    borderTop: '1px solid',
+    borderTopColor: 'gray-200',
+    borderRadius: '0px 0px 1em 1em'
   }
 };
 var listBox = {

package/lib/cjs/types/Modal.d.ts

@@ -33,6 +33,8 @@ export interface ModalProps extends DOMAttributes, TestingAttributes {
      * `() => void`
      */
     onClose?: () => void;
+    onSubmit?: () => void;
+    onCancel?: () => void;
     /**
      * When a user interacts with the argument element outside of the overlay ref, return true if
      * onClose should be called. This gives you a chance to filter out interaction with elements that
@@ -59,3 +61,20 @@ export interface ModalProps extends DOMAttributes, TestingAttributes {
     containerProps?: object;
     headerContainerProps?: object;
 }
+export type ModalHeaderProps = {
+    titleProps?: object;
+    containerProps?: object;
+    closeButton?: ReactNode;
+    hasCloseButton?: boolean;
+    onClose?: () => void;
+    title?: ReactNode;
+    hasNoSeparator?: boolean;
+};
+export type ModalFooterProps = {
+    onSubmit?: () => void;
+    onCancel?: () => void;
+    children?: ReactNode;
+    footerProps?: object;
+    primaryButtonText?: string;
+    secondaryButtonText?: string;
+};

package/lib/components/IconButton/IconButton.styles.js

@@ -17,7 +17,7 @@ import { copyButton } from '../CopyText/CopyText.styles';
 import { containedIcon } from '../DatePicker/DatePicker.styles';
 import { hintButton } from '../HelpHint/HelpHint.styles';
 import { messageCloseButton } from '../Messages/Message.styles';
-import { modalCloseButton } from '../Modal/Modal.styles';
+import { closeButton, modalCloseButton } from '../Modal/Modal.styles';
 import { button } from '../TooltipTrigger/Tooltip.styles';
 export var base = {
   justifyContent: 'center',
@@ -43,7 +43,7 @@ export var base = {
     boxShadow: 'standard'
   },
   '&.is-pressed': {
-    'path': {
+    path: {
       fill: 'white'
     },
     bg: 'active',
@@ -71,7 +71,7 @@ var bidirectional = {
 var inverted = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'active',
   borderColor: 'active',
-  'path': {
+  path: {
     fill: 'white'
   },
   '&.is-hovered': {
@@ -108,29 +108,29 @@ var applicationPortal = _objectSpread(_objectSpread({}, base), {}, {
   background: 'transparent',
   '&.is-focused': _objectSpread({}, defaultFocus),
   '&.is-hovered': {
-    'path': {
+    path: {
       fill: 'active'
     }
   },
   '&.is-pressed': {
-    'path': {
+    path: {
       fill: 'active'
     }
   }
 });
 var applicationPortalPinned = _objectSpread(_objectSpread({}, base), {}, {
-  'path': {
+  path: {
     fill: 'success.bright'
   },
   background: 'transparent',
   '&.is-focused': _objectSpread({}, defaultFocus),
   '&.is-hovered': {
-    'path': {
+    path: {
       fill: 'active'
     }
   },
   '&.is-pressed': {
-    'path': {
+    path: {
       fill: 'active'
     }
   }
@@ -187,6 +187,7 @@ export default {
   inverted: inverted,
   messageCloseButton: _objectSpread(_objectSpread({}, base), messageCloseButton),
   modalCloseButton: _objectSpread(_objectSpread({}, base), modalCloseButton),
+  modalHeaderCloseButton: _objectSpread(_objectSpread({}, base), closeButton),
   invertedBadgeDeleteButton: invertedBadgeDeleteButton,
   invertedSquare: invertedSquare,
   square: square,

package/lib/components/Modal/Convenience/ModalBody.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { withDesign } from 'storybook-addon-designs';
+import DocsLayout from '../../../../.storybook/storybookDocsLayout';
+import { Box, ModalBody, Text } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Components/Modal/Convenience/ModalBody',
+  component: ModalBody,
+  decorators: [withDesign],
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(DocsLayout, null);
+      }
+    }
+  }
+};
+export var Default = function Default() {
+  return ___EmotionJSX(ModalBody, null, ___EmotionJSX(Box, null, ___EmotionJSX(Text, null, "Do you want to continue with this action that you\u2018re performing?")));
+};

package/lib/components/Modal/Convenience/ModalFooter.stories.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { withDesign } from 'storybook-addon-designs';
+import DocsLayout from '../../../../.storybook/storybookDocsLayout';
+import { useModalState } from '../../../hooks';
+import { ModalFooter } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Components/Modal/Convenience/ModalFooter',
+  component: ModalFooter,
+  decorators: [withDesign],
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(DocsLayout, null);
+      }
+    }
+  }
+};
+export var Default = function Default() {
+  var state = useModalState();
+  return ___EmotionJSX(ModalFooter, {
+    onSubmit: state.close,
+    onCancel: state.close
+  });
+};

package/lib/components/Modal/Convenience/ModalHeader.stories.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { withDesign } from 'storybook-addon-designs';
+import DocsLayout from '../../../../.storybook/storybookDocsLayout';
+import { useModalState } from '../../../hooks';
+import { ModalHeader } from '../../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Components/Modal/Convenience/ModalHeader',
+  component: ModalHeader,
+  decorators: [withDesign],
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(DocsLayout, null);
+      }
+    }
+  }
+};
+export var Default = function Default() {
+  var state = useModalState();
+  return ___EmotionJSX(ModalHeader, {
+    hasCloseButton: true,
+    onClose: state.close,
+    title: "Continue"
+  });
+};

package/lib/components/Modal/Modal.js

@@ -7,9 +7,11 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _toArray from "@babel/runtime-corejs3/helpers/esm/toArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "size", "state", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps", "headerContainerProps"];
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef } from 'react';
@@ -21,6 +23,7 @@ import Box from '../Box';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
 import Text from '../Text';
+import ModalHeader from './ModalHeader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useStatusClasses2;
@@ -84,7 +87,12 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   var isOpenNoTransition = (state === null || state === void 0 ? void 0 : state.isTransitioning) === undefined && isOpen === true;
   var _useStatusClasses = useStatusClasses(className, (_useStatusClasses2 = {}, _defineProperty(_useStatusClasses2, "is-".concat(size || 'custom'), size), _defineProperty(_useStatusClasses2, "isOpen", isOpen), _defineProperty(_useStatusClasses2, "isTransitioning", state === null || state === void 0 ? void 0 : state.isTransitioning), _defineProperty(_useStatusClasses2, "isOpenNoTransition", isOpenNoTransition), _useStatusClasses2)),
     classNames = _useStatusClasses.classNames;
-  var titleContent = title && (isOnyx ? ___EmotionJSX(Box, {
+  var _React$Children$toArr = React.Children.toArray(children),
+    _React$Children$toArr2 = _toArray(_React$Children$toArr),
+    header = _React$Children$toArr2[0],
+    siblings = _sliceInstanceProperty(_React$Children$toArr2).call(_React$Children$toArr2, 1);
+  var hasHeaderConvenienceComponent = /*#__PURE__*/React.isValidElement(header) && header.type === ModalHeader;
+  var titleContent = !hasHeaderConvenienceComponent && title && (isOnyx ? ___EmotionJSX(Box, {
     variant: "modal.header"
   }, ___EmotionJSX(Text, _extends({}, titleProps, {
     variant: "modalTitle",
@@ -107,7 +115,7 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   }, propsContentProps, dialogProps, modalProps, {
     ref: modalRef,
     "aria-modal": true
-  }), ___EmotionJSX(Box, _extends({
+  }), titleContent && ___EmotionJSX(Box, _extends({
     variant: "modal.headingContainer"
   }, headerContainerProps), hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : ___EmotionJSX(IconButton, {
     "aria-label": "Close modal window",
@@ -119,8 +127,10 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
     title: {
       name: 'Close Icon'
     }
-  }))), titleContent), ___EmotionJSX(Box, {
-    pt: "md"
+  }))), titleContent), isOnyx ? children : ___EmotionJSX(Box, {
+    pt: "md",
+    px: "lg",
+    pb: "lg"
   }, children)))));
 });
 Modal.defaultProps = {