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

package/lib/components/Modal/ModalHeader.test.js

@@ -0,0 +1,93 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import ModalHeader from './ModalHeader';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var defaultProps = {
+  hasCloseButton: true
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(ModalHeader, _extends({}, defaultProps, props)));
+};
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(ModalHeader, props);
+  }
+});
+describe('ModalHeader', function () {
+  test('rendered', function () {
+    getComponent({
+      title: 'Lorem Ipsum'
+    });
+    screen.getByRole('heading', {
+      name: /lorem ipsum/i
+    });
+    screen.getByRole('button', {
+      name: /close modal window/i
+    });
+  });
+  test('trigger on close', function () {
+    var mockOnClose = jest.fn();
+    getComponent({
+      title: 'Lorem Ipsum',
+      onClose: mockOnClose
+    });
+    var closeButton = screen.getByRole('button', {
+      name: /close modal window/i
+    });
+    userEvent.click(closeButton);
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+  test('does not render close button', function () {
+    getComponent({
+      title: 'Lorem Ipsum',
+      hasCloseButton: false
+    });
+    screen.getByRole('heading', {
+      name: /lorem ipsum/i
+    });
+    var closeButton = screen.queryByRole('button', {
+      name: /close modal window/i
+    });
+    expect(closeButton).not.toBeInTheDocument();
+  });
+  test('custom close button', function () {
+    var CustomCloseButton = function CustomCloseButton() {
+      return ___EmotionJSX("button", {
+        type: "button"
+      }, "Custom Close");
+    };
+    getComponent({
+      title: 'Lorem Ipsum',
+      closeButton: ___EmotionJSX(CustomCloseButton, null)
+    });
+    screen.getByRole('heading', {
+      name: /lorem ipsum/i
+    });
+    screen.getByRole('button', {
+      name: /custom close/i
+    });
+    expect(screen.getByRole('button', {
+      name: /custom close/i
+    })).toBeInTheDocument();
+    expect(screen.getByRole('button', {
+      name: /custom close/i
+    })).toHaveAttribute('type', 'button');
+  });
+  test('title as React node', function () {
+    var TitleNode = function TitleNode() {
+      return ___EmotionJSX("div", {
+        "data-testid": "custom-node"
+      }, "Custom Node");
+    };
+    getComponent({
+      title: ___EmotionJSX(TitleNode, null)
+    });
+    screen.getByTestId('custom-node');
+    screen.getByText(/custom node/i);
+  });
+});

package/lib/components/Modal/index.js

@@ -1 +1,4 @@
-export { default } from './Modal';
+export { default } from './Modal';
+export { default as ModalBody } from './ModalBody';
+export { default as ModalFooter } from './ModalFooter';
+export { default as ModalHeader } from './ModalHeader';

package/lib/components/Modal/tests/Modal.integration.test.js

@@ -78,6 +78,8 @@ test('keyboard interaction with the trigger should open the modal', function ()
 test('close button should close the modal', function () {
   getComposedComponent({
     isDefaultOpen: true
+  }, {
+    title: 'Lorem Ipsum'
   });
 
   // Target the close button
@@ -87,6 +89,8 @@ test('close button should close the modal', function () {
 test('keyboard interactions on the close button should close the modal', function () {
   getComposedComponent({
     isDefaultOpen: true
+  }, {
+    title: 'Lorem Ipsum'
   });
 
   // Target the close button

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

@@ -198,6 +198,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(screen.queryByRole('button')).toBeInTheDocument();
@@ -209,6 +210,7 @@ test('should render a custom close button if hasCloseButton is true and custom b
     });
   };
   getComponent({
+    title: 'Lorem Ipsum',
     hasCloseButton: true,
     closeButton: ___EmotionJSX(MyButton, null)
   });
@@ -217,6 +219,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 = screen.queryByRole('button');
@@ -224,6 +227,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/styles/themeOverrides/nextGenDarkMode/variants/buttons.js

@@ -35,6 +35,7 @@ var baseIconButton = {
   }
 };
 var hintButton = _objectSpread({}, baseIconButton);
+var modalCloseButton = _objectSpread({}, baseIconButton);
 var iconButtons = {
   base: _objectSpread({}, baseIconButton),
   inverted: _objectSpread(_objectSpread({}, baseIconButton), {}, {
@@ -78,6 +79,7 @@ var iconButtons = {
     }
   }),
   modalCloseButton: _objectSpread({}, baseIconButton),
+  modalHeaderCloseButton: _objectSpread({}, baseIconButton),
   messageCloseButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     '&.is-hovered': {
       backgroundColor: '#455469'
@@ -276,6 +278,7 @@ var buttons = {
     }
   },
   iconButtons: iconButtons,
+  modalCloseButton: modalCloseButton,
   listBoxLink: {
     color: 'blue-400',
     '&.is-pressed': {

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

@@ -46,9 +46,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/styles/themes/next-gen/variants/button.js

@@ -348,11 +348,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'
@@ -443,6 +439,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/styles/themes/next-gen/variants/variants.js

@@ -71,17 +71,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'
@@ -111,13 +104,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.148.0-alpha.0",
+  "version": "2.148.0-alpha.2",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",