@openedx/paragon 22.15.3 → 22.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "22.15.3",
+  "version": "22.16.0",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/Toast/README.md

@@ -5,7 +5,7 @@ components:
 - Toast
 categories:
 - Overlays
-status: 'New'
+status: 'Stable'
 designStatus: 'Done'
 devStatus: 'Done'
 notes: ''
@@ -39,7 +39,7 @@ notes: ''
         Example of a basic Toast.
       </Toast>
 
-      <Button variant="primary" onClick={() => setShow(true)}>Show Toast</Button>
+      <Button onClick={() => setShow(true)}>Show Toast</Button>
     </>
   );
 }
@@ -64,7 +64,7 @@ notes: ''
         Success! Example of a Toast with a button.
       </Toast>
 
-      <Button variant="primary" onClick={() => setShow(true)}>Show Toast</Button>
+      <Button onClick={() => setShow(true)}>Show Toast</Button>
     </>
   );
 }
@@ -89,7 +89,7 @@ notes: ''
         Success! Example of a Toast with a link.
       </Toast>
 
-      <Button variant="primary" onClick={() => setShow(true)}>Show Toast</Button>
+      <Button onClick={() => setShow(true)}>Show Toast</Button>
     </>
   );
 }

package/src/Toast/{Toast.test.jsx → Toast.test.tsx}

@@ -1,12 +1,10 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import userEvent from '@testing-library/user-event';
 
 import Toast from '.';
 
-/* eslint-disable-next-line react/prop-types */
-function ToastWrapper({ children, ...props }) {
+function ToastWrapper({ children, ...props }: React.ComponentProps<typeof Toast>) {
   return (
     <IntlProvider locale="en">
       <Toast {...props}>
@@ -17,7 +15,7 @@ function ToastWrapper({ children, ...props }) {
 }
 
 describe('<Toast />', () => {
-  const onCloseHandler = () => {};
+  const onCloseHandler = jest.fn();
   const props = {
     onClose: onCloseHandler,
     show: true,
@@ -44,7 +42,7 @@ describe('<Toast />', () => {
         {...props}
         action={{
           label: 'Optional action',
-          onClick: () => {},
+          onClick: jest.fn(),
         }}
       >
         Success message.
@@ -55,38 +53,50 @@ describe('<Toast />', () => {
   });
   it('autohide is set to false on onMouseOver and true on onMouseLeave', async () => {
     render(
-      <ToastWrapper data-testid="toast" {...props}>
+      <ToastWrapper {...props}>
         Success message.
       </ToastWrapper>,
     );
-    const toast = screen.getByTestId('toast');
+    const toast = screen.getByRole('alert');
     await userEvent.hover(toast);
     setTimeout(() => {
-      expect(screen.getByText('Success message.')).toEqual(true);
+      expect(screen.getByText('Success message.')).toBeTruthy();
       expect(toast).toHaveLength(1);
     }, 6000);
     await userEvent.unhover(toast);
     setTimeout(() => {
-      expect(screen.getByText('Success message.')).toEqual(false);
+      expect(screen.getByText('Success message.')).toBeTruthy();
       expect(toast).toHaveLength(1);
     }, 6000);
   });
   it('autohide is set to false onFocus and true onBlur', async () => {
     render(
-      <ToastWrapper data-testid="toast" {...props}>
+      <ToastWrapper {...props}>
         Success message.
       </ToastWrapper>,
     );
-    const toast = screen.getByTestId('toast');
+    const toast = screen.getByRole('alert');
     toast.focus();
     setTimeout(() => {
-      expect(screen.getByText('Success message.')).toEqual(true);
+      expect(screen.getByText('Success message.')).toBeTruthy();
       expect(toast).toHaveLength(1);
     }, 6000);
     await userEvent.tab();
     setTimeout(() => {
-      expect(screen.getByText('Success message.')).toEqual(false);
+      expect(screen.getByText('Success message.')).toBeTruthy();
       expect(toast).toHaveLength(1);
     }, 6000);
   });
+  it('should contain aria-atomic and aria-live', async () => {
+    render(
+      <ToastWrapper {...props}>
+        Success message.
+      </ToastWrapper>,
+    );
+
+    const toast = screen.getByRole('alert');
+
+    expect(toast).toHaveAttribute('aria-atomic', 'true');
+    expect(toast).toHaveAttribute('aria-live', 'assertive');
+  });
 });

package/src/Toast/ToastContainer.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "variables";
 
 .toast-container {
@@ -11,7 +12,7 @@
     left: 0;
   }
 
-  @media only screen and (width <= 768px) {
+  @media (max-width: map.get($grid-breakpoints, "md")) {
     bottom: $toast-container-gutter-sm;
     right: $toast-container-gutter-sm;
     left: $toast-container-gutter-sm;

package/src/Toast/ToastContainer.tsx

@@ -0,0 +1,30 @@
+import { ReactNode, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+
+interface ToastContainerProps {
+  children: ReactNode;
+}
+
+const TOAST_ROOT_ID = 'toast-root';
+
+function ToastContainer({ children }: ToastContainerProps) {
+  const [rootElement, setRootElement] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      let existingElement = document.getElementById(TOAST_ROOT_ID);
+
+      if (!existingElement) {
+        existingElement = document.createElement('div');
+        existingElement.id = TOAST_ROOT_ID;
+        existingElement.className = 'toast-container';
+        document.body.appendChild(existingElement);
+      }
+      setRootElement(existingElement);
+    }
+  }, []);
+
+  return rootElement ? ReactDOM.createPortal(children, rootElement) : null;
+}
+
+export default ToastContainer;

package/src/Toast/index.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "variables";
 @import "~bootstrap/scss/toasts";
 
@@ -5,7 +6,7 @@
   background-color: $toast-background-color;
   box-shadow: $toast-box-shadow;
   margin: 0;
-  padding: 1rem;
+  padding: $spacer;
   position: relative;
   border-radius: $toast-border-radius;
   z-index: 2;
@@ -38,15 +39,15 @@
     }
 
     & + .btn {
-      margin-top: 1rem;
+      margin-top: $spacer;
     }
   }
 
-  @media only screen and (width <= 768px) {
+  @media (max-width: map.get($grid-breakpoints, "md")) {
     max-width: 100%;
   }
 
-  @media only screen and (width >= 768px) {
+  @media (min-width: map.get($grid-breakpoints, "md")) {
     min-width: $toast-max-width;
     max-width: $toast-max-width;
   }

package/src/Toast/{index.jsx → index.tsx}

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-
 import BaseToast from 'react-bootstrap/Toast';
 import { useIntl } from 'react-intl';
 
@@ -14,16 +13,40 @@ import IconButton from '../IconButton';
 export const TOAST_CLOSE_LABEL_TEXT = 'Close';
 export const TOAST_DELAY = 5000;
 
+interface ToastAction {
+  label: string;
+  href?: string;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+}
+
+interface ToastProps {
+  children: string;
+  onClose: () => void;
+  show: boolean;
+  action?: ToastAction;
+  closeLabel?: string;
+  delay?: number;
+  className?: string;
+}
+
 function Toast({
-  action, children, className, closeLabel, onClose, show, ...rest
-}) {
+  action,
+  children,
+  className,
+  closeLabel,
+  onClose,
+  show,
+  ...rest
+}: ToastProps) {
   const intl = useIntl();
   const [autoHide, setAutoHide] = useState(true);
+
   const intlCloseLabel = closeLabel || intl.formatMessage({
     id: 'pgn.Toast.closeLabel',
     defaultMessage: 'Close',
     description: 'Close label for Toast component',
   });
+
   return (
     <ToastContainer>
       <BaseToast
@@ -37,9 +60,7 @@ function Toast({
         show={show}
         {...rest}
       >
-        <div
-          className="toast-header"
-        >
+        <div className="toast-header">
           <p className="small">{children}</p>
           <div className="toast-header-btn-container">
             <IconButton

package/src/index.d.ts

@@ -39,6 +39,7 @@ export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalD
 export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
+export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
 export { default as Tooltip } from './Tooltip';
 export { default as useWindowSize, type WindowSizeData } from './hooks/useWindowSizeHook';
 export { default as useToggle, type Toggler, type ToggleHandlers } from './hooks/useToggleHook';
@@ -163,7 +164,6 @@ export const
 // from './Tabs';
 /** @deprecated Replaced by `Form.Control`. */
 export const TextArea: any; // from './TextArea';
-export const Toast: any, TOAST_CLOSE_LABEL_TEXT: string, TOAST_DELAY: number; // from './Toast';
 /** @deprecated Replaced by `Form.Group`. */
 export const ValidationFormGroup: any; // from './ValidationFormGroup';
 export const TransitionReplace: any; // from './TransitionReplace';

package/src/index.js

@@ -39,6 +39,7 @@ export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalD
 export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
+export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
 export { default as Tooltip } from './Tooltip';
 export { default as useWindowSize } from './hooks/useWindowSizeHook';
 export { default as useToggle } from './hooks/useToggleHook';
@@ -163,7 +164,6 @@ export {
 } from './Tabs';
 /** @deprecated Replaced by `Form.Control`. */
 export { default as TextArea } from './TextArea';
-export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
 /** @deprecated Replaced by `Form.Group`. */
 export { default as ValidationFormGroup } from './ValidationFormGroup';
 export { default as TransitionReplace } from './TransitionReplace';

package/src/Toast/ToastContainer.jsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-
-class ToastContainer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.toastRootName = 'toast-root';
-    if (typeof document === 'undefined') {
-      this.rootElement = null;
-    } else if (document.getElementById(this.toastRootName)) {
-      this.rootElement = document.getElementById(this.toastRootName);
-    } else {
-      const rootElement = document.createElement('div');
-      rootElement.setAttribute('id', this.toastRootName);
-      rootElement.setAttribute('class', 'toast-container');
-      rootElement.setAttribute('role', 'alert');
-      rootElement.setAttribute('aria-live', 'polite');
-      rootElement.setAttribute('aria-atomic', 'true');
-      this.rootElement = document.body.appendChild(rootElement);
-    }
-  }
-
-  render() {
-    if (this.rootElement) {
-      return ReactDOM.createPortal(
-        this.props.children,
-        this.rootElement,
-      );
-    }
-    return null;
-  }
-}
-
-ToastContainer.propTypes = {
-  /** Specifies contents of the component. */
-  children: PropTypes.node.isRequired,
-};
-
-export default ToastContainer;