@openedx/paragon 23.13.0 → 23.14.1

package/src/Alert/Alert.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IntlProvider } from 'react-intl';
 import renderer, { act } from 'react-test-renderer';
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Context as ResponsiveContext } from 'react-responsive';
 import { Info } from '../../icons';
@@ -112,4 +112,17 @@ describe('<Alert />', () => {
     });
     expect(tree).toMatchSnapshot();
   });
+  it('renders with headings and links', async () => {
+    render(
+      <AlertWrapper>
+        <Alert.Heading>This is the heading</Alert.Heading>
+        And <Alert.Link href="#">here is a link</Alert.Link>.
+      </AlertWrapper>,
+    );
+    const alertDiv = screen.getByRole('alert');
+    const heading = within(alertDiv).getByText(/This is the heading/);
+    expect(heading).toHaveClass('alert-heading', 'h4');
+    const link = within(alertDiv).getByRole('link', { name: 'here is a link' });
+    expect(link).toHaveClass('alert-link');
+  });
 });

package/src/Alert/index.tsx

@@ -11,12 +11,12 @@ import React, {
   RefAttributes,
   cloneElement,
 } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {
   Alert as BaseAlert,
   AlertProps as BaseAlertProps,
 } from 'react-bootstrap';
+import { type TransitionComponent } from 'react-bootstrap/helpers';
 import divWithClassName from 'react-bootstrap/divWithClassName';
 import { FormattedMessage } from 'react-intl';
 import { useMediaQuery } from 'react-responsive';
@@ -33,29 +33,51 @@ export type AlertVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'war
 export type BaseProps = Omit<BaseAlertProps, 'children' | 'variant' | 'closeLabel'>;
 
 export interface AlertProps extends BaseProps {
+  /** Specifies class name to append to the base element */
   className?: string;
+  /** Overrides underlying component base CSS class name */
   bsPrefix?: string;
+  /** Specifies variant to use. */
   variant?: AlertVariant;
+  /**
+   * Animate the entering and exiting of the Alert. `true` will use the `<Fade>` transition,
+   * more detailed customization is also provided.
+   */
+  transition?: boolean | TransitionComponent;
   children?: ReactNode;
+  /** Icon that will be shown in the alert */
   icon?: React.ComponentType<IconProps>;
+  /** Whether the alert is shown. */
   show?: boolean;
+  /** Whether the alert is dismissible. Defaults to false. */
   dismissible?: boolean;
+  /** Optional callback function for when the alert it dismissed. */
   onClose?: () => void;
+  /** Optional list of action elements. May include, at most, 2 actions, or 1 if dismissible is true. */
   actions?: React.ReactElement[];
+  /** Position of the dismiss and call-to-action buttons. Defaults to `false`. */
   stacked?: boolean;
+  /** Sets the text for alert close button, defaults to 'Dismiss'. */
   closeLabel?: string | ReactNode;
 }
 
 export interface AlertHeadingProps {
+  /** Specifies the base element */
   as?: ElementType;
+  /** Overrides underlying component base CSS class name */
   bsPrefix?: string;
+  // eslint-disable-next-line react/no-unused-prop-types
   children?: ReactNode;
 }
 
 export interface AlertLinkProps {
+  /** Specifies the base element */
   as?: ElementType;
+  /** Overrides underlying component base CSS class name */
   bsPrefix?: string;
+  // eslint-disable-next-line react/no-unused-prop-types
   children?: ReactNode;
+  // eslint-disable-next-line react/no-unused-prop-types
   href?: string;
 }
 
@@ -64,16 +86,17 @@ export interface AlertComponent extends ForwardRefExoticComponent<AlertProps & R
   Link: FC<AlertLinkProps>;
 }
 
-const Alert = forwardRef<HTMLDivElement, AlertProps>(({
+const Alert = forwardRef(({
   children,
   icon,
   actions,
-  dismissible,
-  onClose,
+  dismissible = false,
+  onClose = () => {},
   closeLabel,
-  stacked,
+  stacked = false,
+  show = true,
   ...props
-}, ref) => {
+}: AlertProps, ref: React.ForwardedRef<HTMLDivElement>) => {
   const [isStacked, setIsStacked] = useState(stacked);
   const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
   const actionButtonSize = 'sm';
@@ -98,6 +121,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(({
     <BaseAlert
       {...props}
       className={classNames('alert-content', props.className)}
+      show={show}
       ref={ref}
     >
       {icon && <Icon src={icon} className="alert-icon" />}
@@ -142,97 +166,22 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(({
 const DivStyledAsH4 = divWithClassName('h4');
 DivStyledAsH4.displayName = 'DivStyledAsH4';
 
-function AlertHeading(props: AlertHeadingProps): JSX.Element {
-  return <BaseAlert.Heading {...props} />;
+function AlertHeading({
+  as = DivStyledAsH4,
+  bsPrefix = 'alert-heading',
+  ...props
+}: AlertHeadingProps): JSX.Element {
+  return <BaseAlert.Heading {...{ as, bsPrefix, ...props }} />;
 }
 
-function AlertLink(props: AlertLinkProps): JSX.Element {
-  return <BaseAlert.Link {...props} />;
+function AlertLink({
+  as = 'a',
+  bsPrefix = 'alert-link',
+  ...props
+}: AlertLinkProps): JSX.Element {
+  return <BaseAlert.Link {...{ as, bsPrefix, ...props }} />;
 }
 
-AlertLink.propTypes = {
-  /** Specifies the base element */
-  as: PropTypes.elementType as PropTypes.Validator<ElementType>,
-  /** Overrides underlying component base CSS class name */
-  bsPrefix: PropTypes.string,
-};
-
-AlertHeading.propTypes = {
-  /** Specifies the base element */
-  as: PropTypes.elementType as PropTypes.Validator<ElementType>,
-  /** Overrides underlying component base CSS class name */
-  bsPrefix: PropTypes.string,
-};
-
-AlertLink.defaultProps = {
-  as: 'a' as ElementType,
-  bsPrefix: 'alert-link',
-};
-
-AlertHeading.defaultProps = {
-  as: DivStyledAsH4,
-  bsPrefix: 'alert-heading',
-};
-
-Alert.propTypes = {
-  ...BaseAlert.propTypes,
-  /** Specifies class name to append to the base element */
-  className: PropTypes.string,
-  /** Overrides underlying component base CSS class name */
-  bsPrefix: PropTypes.string,
-  /** Specifies variant to use. */
-  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'] as AlertVariant[]),
-  /**
-   * Animate the entering and exiting of the Alert. `true` will use the `<Fade>` transition,
-   * more detailed customization is also provided.
-   */
-  transition: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.shape({
-      in: PropTypes.bool,
-      appear: PropTypes.bool,
-      children: PropTypes.node,
-      onEnter: PropTypes.func,
-      onEntered: PropTypes.func,
-      onEntering: PropTypes.func,
-      onExit: PropTypes.func,
-      onExited: PropTypes.func,
-      onExiting: PropTypes.func,
-    }),
-  ]) as PropTypes.Validator<BaseAlertProps['transition']>,
-  /** Docstring for the children prop */
-  children: PropTypes.node as PropTypes.Validator<ReactNode>,
-  /** Docstring for the icon prop... Icon that will be shown in the alert */
-  icon: PropTypes.func,
-  /** Whether the alert is shown. */
-  show: PropTypes.bool,
-  /** Whether the alert is dismissible. Defaults to true. */
-  dismissible: PropTypes.bool,
-  /** Optional callback function for when the alert it dismissed. */
-  onClose: PropTypes.func,
-  /** Optional list of action elements. May include, at most, 2 actions, or 1 if dismissible is true. */
-  actions: PropTypes.arrayOf(PropTypes.element) as PropTypes.Validator<React.ReactElement[]>,
-  /** Position of the dismiss and call-to-action buttons. Defaults to ``false``. */
-  stacked: PropTypes.bool,
-  /** Sets the text for alert close button, defaults to 'Dismiss'. */
-  closeLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-};
-
-Alert.defaultProps = {
-  ...BaseAlert.defaultProps,
-  children: undefined,
-  icon: undefined,
-  actions: undefined,
-  dismissible: false,
-  onClose: () => {},
-  closeLabel: undefined,
-  show: true,
-  stacked: false,
-  className: undefined,
-  bsPrefix: undefined,
-  variant: undefined,
-};
-
 Alert.Heading = AlertHeading;
 Alert.Link = AlertLink;
 

package/src/ProductTour/ProductTour.test.jsx

@@ -19,6 +19,8 @@ describe('<ProductTour />', () => {
       <div id="target-4">...</div>
     </>
   );
+  const handleAdvance = jest.fn();
+  const handleBack = jest.fn();
   const handleDismiss = jest.fn();
   const handleEnd = jest.fn();
   const handleEscape = jest.fn();
@@ -31,6 +33,8 @@ describe('<ProductTour />', () => {
     advanceButtonText: 'Next',
     enabled: false,
     endButtonText: 'Okay',
+    onAdvance: handleAdvance,
+    onBack: handleBack,
     onDismiss: handleDismiss,
     onEnd: handleEnd,
     tourId: 'disabledTour',
@@ -48,6 +52,8 @@ describe('<ProductTour />', () => {
     backButtonText: 'Back',
     enabled: true,
     endButtonText: 'Okay',
+    onAdvance: handleAdvance,
+    onBack: handleBack,
     onDismiss: handleDismiss,
     onEnd: handleEnd,
     tourId: 'enabledTour',
@@ -60,6 +66,7 @@ describe('<ProductTour />', () => {
       {
         body: 'Checkpoint 2',
         target: '#target-2',
+        onAdvance: customOnAdvance,
       },
       {
         body: 'Checkpoint 3',
@@ -82,6 +89,7 @@ describe('<ProductTour />', () => {
 
   afterEach(() => {
     popperMock.mockReset();
+    jest.resetAllMocks();
   });
 
   // eslint-disable-next-line react/prop-types
@@ -115,6 +123,38 @@ describe('<ProductTour />', () => {
 
         // Verify the second Checkpoint has rendered
         expect(screen.getByText('Checkpoint 2')).toBeInTheDocument();
+        expect(handleAdvance).toHaveBeenCalled();
+
+        await userEvent.click(advanceButton);
+        expect(screen.getByText('Checkpoint 3')).toBeInTheDocument();
+        expect(customOnAdvance).toHaveBeenCalled();
+      });
+
+      it('onClick of back button rewinds to last checkpoint', async () => {
+        render(<ProductTourWrapper tours={[tourData]} />);
+        // Verify the first Checkpoint has rendered
+        expect(screen.getByRole('heading', { name: 'Checkpoint 1' })).toBeInTheDocument();
+
+        // Click the advance button
+        const advanceButton = screen.getByRole('button', { name: 'Next' });
+        await userEvent.click(advanceButton);
+
+        // go forward to the 3rd checkpoint
+        expect(screen.getByText('Checkpoint 2')).toBeInTheDocument();
+        await userEvent.click(advanceButton);
+        expect(screen.getByText('Checkpoint 3')).toBeInTheDocument();
+
+        // First back button should use custom on back function
+        let backButton = screen.getByRole('button', { name: 'Override back' });
+        await userEvent.click(backButton);
+        expect(screen.getByText('Checkpoint 2')).toBeInTheDocument();
+        expect(customOnBack).toHaveBeenCalled();
+
+        // Second back button should use the tour's default back function
+        backButton = screen.getByRole('button', { name: 'Back' });
+        await userEvent.click(backButton);
+        expect(screen.getByText('Checkpoint 1')).toBeInTheDocument();
+        expect(handleBack).toHaveBeenCalled();
       });
 
       it('onClick of dismiss button disables tour', async () => {
@@ -284,7 +324,6 @@ describe('<ProductTour />', () => {
         expect(screen.getByText('Checkpoint 4')).toBeInTheDocument();
         const endButton = screen.getByRole('button', { name: 'Override end' });
         await user.click(endButton);
-        expect(handleEnd).toBeCalledTimes(1);
         expect(customOnEnd).toHaveBeenCalledTimes(1);
         expect(screen.queryByText('Checkpoint 4')).not.toBeInTheDocument();
       });

package/src/ProductTour/index.jsx

@@ -12,7 +12,8 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
     startingIndex,
     onEscape,
     onEnd,
-    onBack,
+    onAdvance: tourOnAdvance,
+    onBack: tourOnBack,
     onDismiss: tourOnDismiss,
     advanceButtonText: tourAdvanceButtonText,
     dismissAltText: tourDismissAltText,
@@ -27,6 +28,7 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
     title,
     body,
     onAdvance,
+    onBack,
     onDismiss,
     advanceButtonText,
     dismissAltText,
@@ -85,6 +87,8 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
     setIndex(index + 1);
     if (onAdvance) {
       onAdvance();
+    } else if (tourOnAdvance) {
+      tourOnAdvance();
     }
   };
 
@@ -92,6 +96,8 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
     setIndex(index - 1);
     if (onBack) {
       onBack();
+    } else if (tourOnBack) {
+      tourOnBack();
     }
   };
 
@@ -100,7 +106,7 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
     setIsTourEnabled(false);
     if (onDismiss) {
       onDismiss();
-    } else {
+    } else if (tourOnDismiss) {
       tourOnDismiss();
     }
     setCurrentCheckpointData(null);