@openedx/paragon 22.0.0-alpha.24 → 22.1.0

package/src/Modal/index.scss

@@ -1,3 +1,5 @@
+@import "variables";
+@import "~bootstrap/scss/modal";
 @import "ModalDialog";
 
 .pgn__hidden-scroll-padding-right {
@@ -11,15 +13,15 @@
   position: fixed;
   top: 0;
   width: 100vw;
-  z-index: var(--pgn-elevation-modal-zindex);
+  z-index: $zindex-modal;
   -webkit-overflow-scrolling: touch;
 }
 
 .pgn__modal-backdrop {
-  background: var(--pgn-color-modal-backdrop-bg);
+  background: $modal-backdrop-bg;
   bottom: 0;
   left: 0;
-  opacity: var(--pgn-other-modal-opacity);
+  opacity: $modal-backdrop-opacity;
   position: fixed;
   right: 0;
   top: 0;
@@ -47,6 +49,71 @@
   }
 }
 
+// Bootstrap modal styles
+
+.modal.show {
+  position: fixed;
+  background-color: transparent;
+  max-height: 100%;
+  width: 100%;
+
+  &:focus {
+    .modal-dialog {
+      box-shadow: $btn-focus-box-shadow;
+    }
+  }
+}
+
+.modal.is-ie11 {
+  // fix browser that likes to do things its own way
+  overflow-y: scroll;
+  height: auto;
+
+  .modal-content {
+    height: auto;
+    max-height: none;
+  }
+}
+
+.modal-backdrop {
+  background-color: rgba(0, 0, 0, .3);
+
+  // Fade for backdrop
+  &.fade { opacity: 0; }
+  &.show { opacity: 1; }
+}
+
+.modal-dialog {
+  height: 100%;
+  margin: auto;
+  padding: calc($spacer / 2);
+
+  @media (min-width: map-get($grid-breakpoints, "sm")) {
+    padding: $spacer;
+  }
+}
+
+.modal-content {
+  max-height: calc(100vh - (#{$spacer} * 2));
+
+  &:focus {
+    outline: 1px dotted;
+    outline: 5px auto -webkit-focus-ring-color;
+  }
+}
+
+.modal-header {
+  flex: 0 0 auto;
+}
+
+.modal-body {
+  overflow: auto;
+}
+
+.modal-footer {
+  flex: 0 0 auto;
+}
+
 .pgn__modal-popup__arrow {
   position: absolute;
   width: 1rem;
@@ -62,7 +129,7 @@
   }
 
   &::before {
-    border-top-color: rgba(0, 0, 0, .2);
+    border-top-color: rgba($black, 20%);
   }
 }
 
@@ -97,8 +164,8 @@
 .pgn__modal-popup__arrow::after,
 .pgn__modal-popup__arrow-top-start::after,
 .pgn__modal-popup__arrow-top::after {
-  bottom: var(--pgn-size-border-width);
-  border-top-color: var(--pgn-color-white);
+  bottom: $border-width;
+  border-top-color: $white;
 }
 
 [data-popper-placement^="right"] .pgn__modal-popup__arrow-auto,

package/src/Modal/tests/Modal.test.jsx

@@ -0,0 +1,261 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import Modal from '..';
+import { Button } from '../..';
+import Variant from '../../utils/constants';
+
+const modalOpen = (isOpen, container) => {
+  if (!isOpen) {
+    expect(container.getByTestId('modal').classList).not.toContain('d-block');
+    expect(container.getByTestId('modal').classList).not.toContain('show');
+    expect(container.getByTestId('modal').classList).toContain('fade');
+    expect(container.queryByTestId('modal-backdrop').classList).not.toContain('modal-backdrop');
+  } else {
+    expect(container.getByTestId('modal').classList).toContain('d-block');
+    expect(container.getByTestId('modal').classList).toContain('show');
+    expect(container.queryByTestId('modal').classList).not.toContain('fade');
+    expect(container.queryByTestId('modal-backdrop').classList).toContain('modal-backdrop');
+  }
+};
+
+const title = 'Modal title';
+const body = 'Modal body';
+const defaultProps = {
+  title,
+  body,
+  open: true,
+  onClose: () => { },
+};
+const closeText = 'GO AWAY!';
+
+describe('<Modal />', () => {
+  describe('correct rendering', () => {
+    const buttons = [
+      <Button.Deprecated buttonType="primary">Blue button!</Button.Deprecated>,
+      {
+        label: 'Red button!',
+        buttonType: 'danger',
+      },
+      <Button.Deprecated buttonType="success">Green button!</Button.Deprecated>,
+    ];
+
+    it('renders default buttons', () => {
+      render(<Modal {...defaultProps} />);
+      const modalTitle = screen.getByText(title);
+      const modalBody = screen.getByText(body);
+
+      expect(modalTitle).toBeInTheDocument();
+      expect(modalBody).toBeInTheDocument();
+      expect(screen.queryAllByRole('button')).toHaveLength(2);
+    });
+
+    it('renders custom buttons', () => {
+      render(<Modal {...defaultProps} buttons={buttons} />);
+      expect(screen.queryAllByRole('button')).toHaveLength(buttons.length + 2);
+    });
+
+    it('renders Warning Variant', () => {
+      render(
+        <Modal {...defaultProps} variant={{ status: Variant.status.WARNING }} />,
+      );
+
+      const modalBody = screen.getByTestId('modal-body');
+
+      expect(modalBody.firstChild.classList).toContain('container-fluid');
+      expect(screen.getByText(body)).toBeInTheDocument();
+
+      const icon = screen.getByTestId('modal-icon').firstChild;
+      expect(icon.classList).toContain('fa-exclamation-triangle');
+      expect(icon.classList).toContain('fa-3x');
+      expect(icon.classList).toContain('text-warning');
+    });
+
+    it('renders invalid Variant properly', () => {
+      render(<Modal {...defaultProps} variant={{ status: 'foo' }} />);
+      const modalTitle = screen.getByText(title);
+      const modalBody = screen.getByText(body);
+
+      expect(modalTitle).toBeInTheDocument();
+      expect(modalBody).toBeInTheDocument();
+      expect(screen.queryAllByRole('button')).toHaveLength(2);
+    });
+
+    it('render of the header close button is optional', () => {
+      render(<Modal {...defaultProps} renderHeaderCloseButton={false} />);
+      const modalHeaderBtn = screen.queryByTestId('modal-header-btn');
+      const modalFooterBtn = screen.getByTestId('modal-footer-btn');
+
+      expect(modalHeaderBtn).not.toBeInTheDocument();
+      expect(modalFooterBtn).toBeInTheDocument();
+    });
+
+    it('render of the default footer close button is optional', () => {
+      render(<Modal {...defaultProps} renderDefaultCloseButton={false} />);
+      const modalHeaderBtn = screen.getByTestId('modal-header-btn');
+      const modalFooterBtn = screen.queryByTestId('modal-footer-btn');
+
+      expect(modalHeaderBtn).toBeInTheDocument();
+      expect(modalFooterBtn).not.toBeInTheDocument();
+    });
+
+    it('renders custom close button string', () => {
+      render(<Modal {...defaultProps} closeText={closeText} />);
+      const modalFooterBtn = screen.getByTestId('modal-footer-btn');
+      expect(modalFooterBtn).toBeInTheDocument();
+      expect(modalFooterBtn).toHaveTextContent(closeText);
+    });
+
+    it('renders custom close button element', () => {
+      const closeElem = <span className="is-close-text">{closeText}</span>;
+      render(<Modal {...defaultProps} closeText={closeElem} />);
+      const modalFooterBtn = screen.getByTestId('modal-footer-btn');
+
+      expect(modalFooterBtn).toBeInTheDocument();
+      expect(modalFooterBtn.firstChild.classList).toContain('is-close-text');
+      expect(modalFooterBtn.firstChild).toHaveTextContent(closeText);
+    });
+
+    it('renders with IE11-specific styling when IE11 is detected', () => {
+      const { MSInputMethodContext } = global;
+      const { documentMode } = global.document;
+
+      // mimic IE11
+      global.MSInputMethodContext = true;
+      global.document.documentMode = true;
+      render(<Modal {...defaultProps} />);
+      const modal = screen.queryByTestId('modal');
+      expect(modal.classList).toContain('is-ie11');
+
+      global.MSInputMethodContext = MSInputMethodContext;
+      global.document.documentMode = documentMode;
+    });
+
+    it('renders without IE11-specific styling when IE11 is not detected', () => {
+      const { MSInputMethodContext } = global;
+      const { documentMode } = global.document;
+
+      // mimic non-IE11 browser
+      global.MSInputMethodContext = false;
+      global.document.documentMode = false;
+      render(<Modal {...defaultProps} />);
+      const modal = screen.queryByTestId('modal');
+      expect(modal).not.toContain('is-ie11');
+
+      global.MSInputMethodContext = MSInputMethodContext;
+      global.document.documentMode = documentMode;
+    });
+  });
+
+  describe('props received correctly', () => {
+    it('component receives props', () => {
+      const { rerender } = render(<Modal {...defaultProps} open={false} />);
+
+      modalOpen(false, screen);
+      rerender(<Modal {...defaultProps} open />);
+      modalOpen(true, screen);
+    });
+
+    it('component receives props and ignores prop change', () => {
+      const { rerender } = render(<Modal {...defaultProps} />);
+
+      modalOpen(true, screen);
+      rerender(<Modal {...defaultProps} title="Changed modal title" />);
+      modalOpen(true, screen);
+    });
+
+    it('throws an error when an invalid parentSelector prop is passed', () => {
+      expect(() => render(
+        <Modal
+          {...defaultProps}
+          parentSelector=".this-selector-does-not-exist"
+        />,
+      )).toThrow('Modal received invalid parentSelector: .this-selector-does-not-exist, no matching element found');
+    });
+  });
+
+  describe('close functions properly', () => {
+    it('closes when x button pressed', async () => {
+      render(<Modal {...defaultProps} />);
+
+      modalOpen(true, screen);
+      await userEvent.click(screen.queryAllByRole('button')[0]);
+      modalOpen(false, screen);
+    });
+
+    it('closes when Close button pressed', async () => {
+      render(<Modal {...defaultProps} />);
+
+      modalOpen(true, screen);
+      await userEvent.click(screen.queryAllByRole('button')[1]);
+      modalOpen(false, screen);
+    });
+
+    it('calls callback function on close', async () => {
+      const spy = jest.fn();
+      render(<Modal {...defaultProps} onClose={spy} />);
+
+      expect(spy).toHaveBeenCalledTimes(0);
+
+      // press X button
+      await userEvent.click(screen.queryAllByRole('button')[0]);
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it('reopens after closed', async () => {
+      const { rerender } = render(<Modal {...defaultProps} />);
+
+      modalOpen(true, screen);
+      await userEvent.click(screen.queryAllByRole('button')[0]);
+      modalOpen(false, screen);
+      rerender(<Modal {...defaultProps} open />);
+      modalOpen(true, screen);
+    });
+  });
+
+  describe('focus changes correctly', () => {
+    it('has correct initial focus', () => {
+      render(<Modal {...defaultProps} />);
+      const buttons = screen.queryAllByRole('button');
+      expect(buttons[0]).toHaveFocus();
+    });
+
+    it('has reset focus after close and reopen', () => {
+      const { rerender } = render(<Modal {...defaultProps} />);
+      const buttons = screen.queryAllByRole('button');
+      expect(buttons[0]).toHaveFocus();
+      rerender(<Modal {...defaultProps} open={false} />);
+      modalOpen(false, screen);
+      rerender(<Modal {...defaultProps} open />);
+      modalOpen(true, screen);
+      expect(buttons[0]).toHaveFocus();
+    });
+
+    it('has focus on input in modal body', () => {
+      const { getByTestId } = render(
+        <Modal
+          {...defaultProps}
+          open
+          renderDefaultCloseButton={false}
+          renderHeaderCloseButton={false}
+          body={<div><input data-testid="modal-input" /></div>}
+        />,
+      );
+      const input = getByTestId('modal-input');
+      expect(input).toHaveFocus();
+    });
+
+    it('has focus on `.modal-content` when nothing else is tabbable', () => {
+      const { getByTestId } = render(
+        <Modal
+          {...defaultProps}
+          renderDefaultCloseButton={false}
+          renderHeaderCloseButton={false}
+        />,
+      );
+      const modalContent = getByTestId('modal-content');
+      expect(modalContent).toHaveFocus();
+    });
+  });
+});

package/src/Nav/_mixins.scss

@@ -1,7 +1,7 @@
 @mixin nav-tabs-link-focus(
-  $tabs-border-color,
-  $radius: var(--pgn-size-nav-tabs-border-radius),
-  $distance: var(--pgn-spacing-nav-link-distance-to-border)
+  $border-color,
+  $radius: $nav-tabs-border-radius,
+  $distance: $nav-tabs-link-distance-to-border
 ) {
   position: relative;
   outline: 0;
@@ -14,7 +14,7 @@
     right: calc(#{$distance} * -1);
     bottom: calc(#{$distance} * -1);
     left: calc(#{$distance} * -1);
-    border: solid var(--pgn-size-nav-tabs-border-width) $tabs-border-color;
+    border: solid $nav-tabs-border-width $border-color;
     border-radius: $radius;
   }
 }

package/src/Nav/_variables.scss

@@ -0,0 +1,58 @@
+// Navs
+
+$nav-link-padding-y:                               .5rem !default;
+$nav-link-padding-x:                               1rem !default;
+$nav-link-color:                                   $gray-700 !default;
+$nav-link-disabled-color:                          $gray-300 !default;
+$nav-link-font-weight:                             500 !default;
+
+$nav-tabs-border-color:                            $light-400 !default;
+$nav-tabs-border-width:                            2px !default;
+$nav-tabs-border-radius:                           0 !default;
+$nav-tabs-hover-bg:                                transparent !default;
+$nav-tabs-focus-border-color:                      $nav-tabs-hover-bg !default;
+$nav-tabs-disabled-bg:                             $nav-tabs-hover-bg !default;
+$nav-tabs-link-hover-border-color:                 transparent transparent $nav-tabs-border-color !default;
+$nav-tabs-link-hover-bg:                           $light-400 !default;
+$nav-tabs-link-active-color:                       $primary-500 !default;
+$nav-tabs-link-active-border-color:                $nav-tabs-link-active-color !default;
+$nav-tabs-link-active-bg:                          transparent !default;
+$nav-tabs-link-focus-border-color:                 $nav-tabs-link-active-color !default;
+$nav-tabs-link-distance-to-border:                 4px !default;
+$nav-tabs-link-border-color:                       transparent !default;
+$nav-tabs-link-disabled-border-color:              $nav-tabs-link-border-color !default;
+
+$nav-pills-border-radius:                          $border-radius !default;
+$nav-pills-link-active-color:                      $component-active-color !default;
+$nav-pills-link-active-bg:                         $component-active-bg !default;
+$nav-pills-link-active-border-color:               $white !default;
+$nav-pills-link-border-color:                      $nav-tabs-border-color !default;
+$nav-pills-link-border-width:                      1px !default;
+
+$nav-inverse-pills-link-color:                     $white !default;
+$nav-inverse-pills-link-border-color:              $dark-300 !default;
+$nav-inverse-pills-link-hover-bg:                  $nav-inverse-pills-link-border-color !default;
+$nav-inverse-pills-link-focus-color:               $nav-inverse-pills-link-color !default;
+$nav-inverse-pills-link-active-bg:                 $nav-inverse-pills-link-color !default;
+$nav-inverse-pills-link-active-color:              $primary-500 !default;
+$nav-inverse-pills-link-active-border-color:       $nav-inverse-pills-link-color !default;
+$nav-inverse-pills-link-active-hover-bg:           $nav-inverse-pills-link-border-color !default;
+$nav-inverse-pills-link-active-hover-color:        $nav-inverse-pills-link-color !default;
+$nav-inverse-pills-link-active-hover-border-color: $nav-inverse-pills-link-border-color !default;
+$nav-inverse-pills-link-active-focus-hover-bg:     $nav-inverse-pills-link-color !default;
+$nav-inverse-pills-link-active-focus-color:        $nav-inverse-pills-link-active-color !default;
+$nav-inverse-pills-link-active-focus-border-color: $primary !default;
+$nav-inverse-pills-link-active-focus-hover-border-color: $nav-inverse-pills-link-active-focus-border-color !default;
+$nav-inverse-pills-link-border-width:              $nav-pills-link-border-width !default;
+$nav-inverse-pills-tab-content-color:              $nav-inverse-pills-link-color !default;
+
+$nav-inverse-tabs-link-color:                      $white !default;
+$nav-inverse-tabs-link-border-bottom-color:        $dark-300 !default;
+$nav-inverse-tabs-link-hover-bg:                   $nav-inverse-tabs-link-border-bottom-color !default;
+$nav-inverse-tabs-link-active-hover-bg:            transparent !default;
+$nav-inverse-tabs-link-focus-bg:                   $nav-inverse-tabs-link-color !default;
+$nav-inverse-tabs-link-active-border-color:        $nav-inverse-tabs-link-color !default;
+$nav-inverse-tabs-link-active-bg:                  $nav-inverse-tabs-link-hover-bg !default;
+$nav-inverse-tabs-link-active-border-bottom-width: $nav-tabs-border-width !default;
+$nav-inverse-tabs-tab-content-color:               $nav-inverse-tabs-link-color !default;
+$nav-inverse-tabs-dropdown-border-color:           $nav-inverse-tabs-link-active-hover-bg !default;