@pingux/astro 2.148.0-alpha.0 → 2.148.0-alpha.1

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

@@ -318,6 +318,29 @@ declare const buttons: {
                 };
             };
         };
+        modalHeaderCloseButton: {
+            path: {
+                fill: string;
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+            '&.is-hovered': {
+                path: {
+                    fill: string;
+                };
+                backgroundColor: string;
+            };
+            '&.is-pressed': {
+                backgroundColor: string;
+                borderColor: string;
+                path: {
+                    fill: string;
+                };
+            };
+        };
         messageCloseButton: {
             '&.is-hovered': {
                 backgroundColor: string;
@@ -339,6 +362,29 @@ declare const buttons: {
             };
         };
     };
+    modalCloseButton: {
+        path: {
+            fill: string;
+        };
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: 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

@@ -42,6 +42,7 @@ var baseIconButton = {
   }
 };
 var hintButton = _objectSpread({}, baseIconButton);
+var modalCloseButton = _objectSpread({}, baseIconButton);
 var iconButtons = {
   base: _objectSpread({}, baseIconButton),
   inverted: _objectSpread(_objectSpread({}, baseIconButton), {}, {
@@ -85,6 +86,7 @@ var iconButtons = {
     }
   }),
   modalCloseButton: _objectSpread({}, baseIconButton),
+  modalHeaderCloseButton: _objectSpread({}, baseIconButton),
   messageCloseButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     '&.is-hovered': {
       backgroundColor: '#455469'
@@ -283,6 +285,7 @@ var buttons = {
     }
   },
   iconButtons: iconButtons,
+  modalCloseButton: modalCloseButton,
   listBoxLink: {
     color: 'blue-400',
     '&.is-pressed': {

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

@@ -377,9 +377,26 @@ declare const _default: {
             bg: string;
         };
         headingContainer: {
+            borderBottom: string;
+            borderBottomColor: string;
             bg: string;
         };
-        buttonsContainer: {
+        header: {
+            borderBottom: string;
+            borderBottomColor: string;
+            bg: string;
+        };
+        body: {
+            bg: string;
+        };
+        footer: {
+            borderTop: string;
+            borderTopColor: string;
+            bg: string;
+        };
+        footerContainer: {
+            borderTop: string;
+            borderTopColor: string;
             bg: string;
         };
     };

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

@@ -54,9 +54,26 @@ var modal = {
     bg: 'background.base'
   },
   headingContainer: {
+    borderBottom: '1px solid',
+    borderBottomColor: 'border.base',
     bg: 'background.base'
   },
-  buttonsContainer: {
+  header: {
+    borderBottom: '1px solid',
+    borderBottomColor: 'border.base',
+    bg: 'background.base'
+  },
+  body: {
+    bg: 'background.base'
+  },
+  footer: {
+    borderTop: '1px solid',
+    borderTopColor: 'border.base',
+    bg: 'background.base'
+  },
+  footerContainer: {
+    borderTop: '1px solid',
+    borderTopColor: 'border.base',
     bg: 'background.base'
   }
 };

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

@@ -1296,9 +1296,38 @@ declare const _default: {
                 };
             };
             modalCloseButton: {
-                position: string;
-                top: number;
-                right: number;
+                cursor: string;
+                transition: string;
+                outline: string;
+                borderRadius: string;
+                border: string;
+                borderColor: string;
+                path: {
+                    fill: string;
+                };
+                '&.is-focused': {
+                    outline: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                };
+                '&.is-hovered': {
+                    backgroundColor: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+                '&.is-pressed': {
+                    backgroundColor: string;
+                    borderColor: string;
+                    path: {
+                        fill: string;
+                    };
+                };
+            };
+            modalHeaderCloseButton: {
+                top: string;
+                transform: string;
+                right: string;
                 cursor: string;
                 transition: string;
                 outline: string;
@@ -1578,9 +1607,6 @@ declare const _default: {
             };
         };
         modalCloseButton: {
-            position: string;
-            top: number;
-            right: number;
             cursor: string;
             transition: string;
             outline: string;
@@ -4243,17 +4269,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;
@@ -4283,13 +4302,35 @@ declare const _default: {
                     maxWidth: string[];
                 };
             };
-            container: {
-                justifyContent: string;
+            headingContainer: {
+                borderBottom: string;
+                borderBottomColor: string;
+                bg: string;
+                borderRadius: 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

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

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

@@ -356,11 +356,7 @@ var baseIconButton = {
     }
   }
 };
-var modalCloseButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
-  position: 'absolute',
-  top: 32,
-  right: 18
-});
+var modalCloseButton = _objectSpread({}, baseIconButton);
 var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButton), secondary), {}, {
   path: {
     fill: 'blue'
@@ -451,6 +447,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

@@ -749,17 +749,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;
@@ -789,13 +782,35 @@ declare const _default: {
                 maxWidth: string[];
             };
         };
-        container: {
-            justifyContent: string;
+        headingContainer: {
+            borderBottom: string;
+            borderBottomColor: string;
+            bg: string;
+            borderRadius: 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'
@@ -123,13 +116,35 @@ var modal = {
       maxWidth: modalSize.full
     }
   },
-  container: {
-    justifyContent: 'start'
+  headingContainer: {
+    borderBottom: '1px solid',
+    borderBottomColor: 'gray-200',
+    bg: 'background.base',
+    borderRadius: '1em 1em 0px 0px'
   },
   header: {
-    pt: 'lg',
-    bg: 'background.base',
-    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"
+  });
+};