@openedx/paragon 22.16.2 → 22.18.0

package/src/ProductTour/CheckpointHeader.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import Icon from '../Icon';
+import IconButton from '../IconButton';
+import { Close } from '../../icons';
+import CheckpointTitle from './CheckpointTitle';
+import messages from './messages';
+
+const CheckpointHeader = React.forwardRef(({
+  dismissAltText, index, onDismiss, title, totalCheckpoints,
+}) => {
+  const intl = useIntl();
+  const oneBasedIndex = index + 1;
+  const altText = (dismissAltText && typeof dismissAltText === 'string') ? dismissAltText : intl.formatMessage(messages.closeAltText);
+
+  return (
+    <>
+      <header className="pgn__checkpoint-header">
+        <span className="pgn__checkpoint-page-index">
+          <FormattedMessage
+            {...messages.pageIndexText}
+            values={{ step: oneBasedIndex, totalSteps: totalCheckpoints }}
+          />
+        </span>
+        <IconButton
+          size="sm"
+          iconAs={Icon}
+          src={Close}
+          alt={altText}
+          onClick={onDismiss}
+          data-testid="dismiss-tour"
+        />
+      </header>
+      {title && (<CheckpointTitle>{title}</CheckpointTitle>)}
+    </>
+  );
+});
+
+CheckpointHeader.defaultProps = {
+  dismissAltText: null,
+  title: '',
+};
+
+CheckpointHeader.propTypes = {
+  /** The text used in the alt for the icon used to dismiss the tour for the given Checkpoint */
+  dismissAltText: PropTypes.string,
+  /** The current index of the given Checkpoint */
+  index: PropTypes.number.isRequired,
+  /** A function that runs when triggering the `onClick` event of the dismiss
+   * button for the given Checkpoint. */
+  onDismiss: PropTypes.func.isRequired,
+  /** The text displayed in the title of the Checkpoint */
+  title: PropTypes.node,
+  /** The total number of Checkpoints in a tour */
+  totalCheckpoints: PropTypes.number.isRequired,
+};
+
+export default CheckpointHeader;

package/src/ProductTour/ProductTour.test.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { render, screen, act } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';
 
 import * as popper from '@popperjs/core';
 
 import ProductTour from '.';
+import messages from './messages';
 
 const popperMock = jest.spyOn(popper, 'createPopper');
 
@@ -24,10 +25,10 @@ describe('<ProductTour />', () => {
   const customOnEnd = jest.fn();
   const customOnDismiss = jest.fn();
   const customOnAdvance = jest.fn();
+  const customOnBack = jest.fn();
 
   const disabledTourData = {
     advanceButtonText: 'Next',
-    dismissButtonText: 'Dismiss',
     enabled: false,
     endButtonText: 'Okay',
     onDismiss: handleDismiss,
@@ -44,7 +45,7 @@ describe('<ProductTour />', () => {
 
   const tourData = {
     advanceButtonText: 'Next',
-    dismissButtonText: 'Dismiss',
+    backButtonText: 'Back',
     enabled: true,
     endButtonText: 'Okay',
     onDismiss: handleDismiss,
@@ -57,22 +58,19 @@ describe('<ProductTour />', () => {
         title: 'Checkpoint 1',
       },
       {
-        body: 'Lorem ipsum body',
+        body: 'Checkpoint 2',
         target: '#target-2',
-        title: 'Checkpoint 2',
       },
       {
-        body: 'Lorem ipsum body',
+        body: 'Checkpoint 3',
         target: '#target-3',
-        title: 'Checkpoint 3',
-        onDismiss: customOnDismiss,
+        onBack: customOnBack,
         advanceButtonText: 'Override advance',
-        dismissButtonText: 'Override dismiss',
-
+        backButtonText: 'Override back',
       },
       {
         target: '#target-3',
-        title: 'Checkpoint 4',
+        body: 'Checkpoint 4',
         endButtonText: 'End',
       },
     ],
@@ -98,31 +96,25 @@ describe('<ProductTour />', () => {
 
   describe('one enabled tour', () => {
     describe('with default settings', () => {
-      it('renders checkpoint with correct title, body, and breadcrumbs', () => {
+      it('renders checkpoint with correct title, body, and page index', () => {
         render(<ProductTourWrapper tours={[tourData]} />);
 
         expect(screen.getByRole('dialog', { name: 'Checkpoint 1' })).toBeInTheDocument();
         expect(screen.getByText('Checkpoint 1')).toBeInTheDocument();
-        expect(screen.getByTestId('pgn__checkpoint-breadcrumb_active')).toBeInTheDocument();
+        expect(screen.getByText('1 of 4')).toBeInTheDocument();
       });
 
       it('onClick of advance button advances to next checkpoint', async () => {
-        const { rerender } = render(<ProductTourWrapper tours={[tourData]} />);
+        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 act(async () => {
-          await userEvent.click(advanceButton);
-        });
-
-        rerender(<ProductTourWrapper tours={[tourData]} />);
-
-        const heading = screen.getByRole('heading', { name: 'Checkpoint 2' });
+        await userEvent.click(advanceButton);
 
         // Verify the second Checkpoint has rendered
-        expect(heading).toBeInTheDocument();
+        expect(screen.getByText('Checkpoint 2')).toBeInTheDocument();
       });
 
       it('onClick of dismiss button disables tour', async () => {
@@ -132,20 +124,53 @@ describe('<ProductTour />', () => {
         expect(screen.getByRole('dialog', { name: 'Checkpoint 1' })).toBeInTheDocument();
 
         // Click the dismiss button
-        const dismissButton = screen.getByRole('button', { name: 'Dismiss' });
-        expect(dismissButton).toBeInTheDocument();
+        const closeButton = screen.getByRole('button', { name: 'Close tour' });
+        expect(closeButton).toBeInTheDocument();
 
-        await act(async () => {
-          await userEvent.click(dismissButton);
-        });
+        await userEvent.click(closeButton);
 
         // Verify no Checkpoints have rendered
         expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
       });
 
+      it('onClick of close icon button disables tour', async () => {
+        const user = userEvent.setup();
+        render(<ProductTourWrapper tours={[tourData]} />);
+        // Advance the tour, close icon only appears after first step
+
+        await user.click(screen.getByRole('button', { name: 'Next' }));
+
+        const closeIcon = screen.getByRole('button', { name: messages.closeAltText.defaultMessage });
+        expect(closeIcon).toBeInTheDocument();
+
+        await user.click(closeIcon);
+
+        expect(handleDismiss).toHaveBeenCalled();
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      });
+
+      it('onClick of back button going to the previous checkpoint', async () => {
+        const user = userEvent.setup();
+        render(<ProductTourWrapper tours={[tourData]} />);
+        // Back button only appears when you are not on the first step of the tour
+        expect(screen.getByRole('heading', { name: 'Checkpoint 1' })).toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: 'Back' })).not.toBeInTheDocument();
+        // Advance the tour
+        await user.click(screen.getByRole('button', { name: 'Next' }));
+
+        expect(screen.getByText('Checkpoint 2')).toBeInTheDocument();
+
+        // Go back in the tour
+        const backButton = screen.getByRole('button', { name: 'Back' });
+        expect(backButton).toBeInTheDocument();
+        await user.click(backButton);
+
+        expect(screen.getByText('Checkpoint 1')).toBeInTheDocument();
+      });
+
       it('onClick of end button disables tour', async () => {
         const user = userEvent.setup();
-        const { rerender } = render(<ProductTourWrapper tours={[tourData]} />);
+        render(<ProductTourWrapper tours={[tourData]} />);
 
         // Verify a Checkpoint has rendered
         expect(screen.getByRole('dialog', { name: 'Checkpoint 1' })).toBeInTheDocument();
@@ -157,13 +182,9 @@ describe('<ProductTour />', () => {
         const advanceButton2 = screen.getByRole('button', { name: 'Next' });
         await user.click(advanceButton2);
 
-        rerender(<ProductTourWrapper tours={[tourData]} />);
-
         const advanceButton3 = screen.getByRole('button', { name: 'Override advance' });
         await user.click(advanceButton3);
 
-        rerender(<ProductTourWrapper tours={[tourData]} />);
-
         // Click the end button
         const endButton = screen.getByRole('button', { name: 'End' });
         await user.click(endButton);
@@ -191,7 +212,7 @@ describe('<ProductTour />', () => {
     describe('with Checkpoint override settings', () => {
       const overrideTourData = {
         advanceButtonText: 'Next',
-        dismissButtonText: 'Dismiss',
+        backButtonText: 'Back',
         enabled: true,
         endButtonText: 'Okay',
         onDismiss: handleDismiss,
@@ -206,23 +227,21 @@ describe('<ProductTour />', () => {
             title: 'Checkpoint 1',
           },
           {
-            body: 'Lorem ipsum body',
             target: '#target-2',
-            title: 'Checkpoint 2',
+            body: 'Checkpoint 2',
           },
           {
-            body: 'Lorem ipsum body',
             target: '#target-3',
-            title: 'Checkpoint 3',
+            body: 'Checkpoint 3',
+            onBack: customOnBack,
             onDismiss: customOnDismiss,
             onAdvance: customOnAdvance,
             advanceButtonText: 'Override advance',
-            dismissButtonText: 'Override dismiss',
-
+            backButtonText: 'Override back',
           },
           {
             target: '#target-4',
-            title: 'Checkpoint 4',
+            body: 'Checkpoint 4',
             endButtonText: 'Override end',
             onEnd: customOnEnd,
           },
@@ -230,45 +249,38 @@ describe('<ProductTour />', () => {
       };
       it('renders correct checkpoint on index override', () => {
         render(<ProductTourWrapper tours={[overrideTourData]} />);
-        expect(screen.getByRole('dialog', { name: 'Checkpoint 3' })).toBeInTheDocument();
-        expect(screen.getByRole('heading', { name: 'Checkpoint 3' })).toBeInTheDocument();
+        expect(screen.getByText('Checkpoint 3')).toBeInTheDocument();
       });
 
       it('applies override for advanceButtonText', async () => {
-        const { rerender } = render(<ProductTourWrapper tours={[overrideTourData]} />);
+        render(<ProductTourWrapper tours={[overrideTourData]} />);
         expect(screen.getByRole('button', { name: 'Override advance' })).toBeInTheDocument();
         const advanceButton = screen.getByRole('button', { name: 'Override advance' });
-        await act(async () => {
-          await userEvent.click(advanceButton);
-        });
+        await userEvent.click(advanceButton);
         expect(screen.queryByRole('button', { name: 'Override advance' })).not.toBeInTheDocument();
         expect(customOnAdvance).toHaveBeenCalledTimes(1);
 
-        rerender(<ProductTourWrapper tours={[overrideTourData]} />);
-
         expect(screen.getByText('Checkpoint 4')).toBeInTheDocument();
       });
-      it('applies override for dismissButtonText', () => {
+      it('applies override for backButtonText', () => {
         render(<ProductTourWrapper tours={[overrideTourData]} />);
-        expect(screen.getByRole('button', { name: 'Override dismiss' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Override back' })).toBeInTheDocument();
       });
+
       it('calls customHandleDismiss onClick of dismiss button', async () => {
         render(<ProductTourWrapper tours={[overrideTourData]} />);
-        const dismissButton = screen.getByRole('button', { name: 'Override dismiss' });
-        await act(async () => {
-          await userEvent.click(dismissButton);
-        });
+        const closeButton = screen.getByRole('button', { name: 'Close tour' });
+        await userEvent.click(closeButton);
+
         expect(customOnDismiss).toHaveBeenCalledTimes(1);
         expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
       });
       it('calls customHandleOnEnd onClick of end button', async () => {
         const user = userEvent.setup();
-        const { rerender } = render(<ProductTourWrapper tours={[overrideTourData]} />);
+        render(<ProductTourWrapper tours={[overrideTourData]} />);
         const advanceButton = screen.getByRole('button', { name: 'Override advance' });
         await user.click(advanceButton);
 
-        rerender(<ProductTourWrapper tours={[overrideTourData]} />);
-
         expect(screen.getByText('Checkpoint 4')).toBeInTheDocument();
         const endButton = screen.getByRole('button', { name: 'Override end' });
         await user.click(endButton);
@@ -292,7 +304,6 @@ describe('<ProductTour />', () => {
       it('does not render', () => {
         const badTourData = {
           advanceButtonText: 'Next',
-          dismissButtonText: 'Dismiss',
           enabled: true,
           endButtonText: 'Okay',
           onDismiss: handleDismiss,
@@ -315,7 +326,6 @@ describe('<ProductTour />', () => {
       it('advances to next valid Checkpoint', () => {
         const badTourData = {
           advanceButtonText: 'Next',
-          dismissButtonText: 'Dismiss',
           enabled: true,
           endButtonText: 'Okay',
           onDismiss: handleDismiss,
@@ -348,7 +358,6 @@ describe('<ProductTour />', () => {
     it('renders first enabled tour', () => {
       const secondEnabledTourData = {
         advanceButtonText: 'Next',
-        dismissButtonText: 'Dismiss',
         enabled: true,
         endButtonText: 'Okay',
         onDismiss: handleDismiss,

package/src/ProductTour/README.md

@@ -16,6 +16,12 @@ tours are enabled, `ProductTour` will only render the first enabled in the `tour
 `Checkpoints` are rendered in the order they're listed in the checkpoint array.
 The checkpoint objects themselves have additional props that can override the props defined in `ProductTour`.
 
+## Usage guidelines
+Best practices for ProductTour includes not overloading the user with a large amount of steps. 
+Paragon recommends keeping to no more than 5 steps, as well as any overriden button names to be 
+descriptive and readable. Also, we recommend using a title at every step or only at the first step for a
+consistent and accessible experience.
+
 ## Basic Usage
 
 ```jsx live
@@ -24,11 +30,12 @@ The checkpoint objects themselves have additional props that can override the pr
     const myFirstTour = {
       tourId: 'myFirstTour',
       advanceButtonText: 'Next',
-      dismissButtonText: 'Dismiss',
+      backButtonText: 'Back',
       endButtonText: 'Okay',
       enabled: isTourEnabled,
       onDismiss: () => setIsTourEnabled(false),
       onEnd: () => setIsTourEnabled(false),
+      dismissAltText: '',
       checkpoints: [
         {
           advanceButtonText: 'Onward', // Override the default advanceButtonText above
@@ -36,6 +43,7 @@ The checkpoint objects themselves have additional props that can override the pr
           placement: 'top',
           target: '#checkpoint-1',
           title: 'First checkpoint',
+          dismissAltText: '',
         },
         {
           body: "Here's the second checkpoint!",
@@ -46,12 +54,12 @@ The checkpoint objects themselves have additional props that can override the pr
           placement: 'right',
           target: '#checkpoint-2',
           title: 'Second checkpoint',
+          backButtonText: 'Rewind', 
         },
         {
-          body: "Here's the third checkpoint!",
+          body: "The third checkpoint without a title",
           placement: 'bottom',
           target: '#checkpoint-3',
-          title: 'Third checkpoint',
           onEnd: () => {
             console.log('Ended the third checkpoint');
             setIsTourEnabled(false);

package/src/ProductTour/index.jsx

@@ -1,22 +1,39 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
 
 import Checkpoint from './Checkpoint';
 
 const ProductTour = React.forwardRef(({ tours }, ref) => {
   const tourValue = tours.find((tour) => tour.enabled);
   const {
-    enabled, checkpoints = [], startingIndex, onEscape, onEnd, onDismiss: tourOnDismiss,
-    advanceButtonText: tourAdvanceButtonText, dismissButtonText: tourDismissButtonText,
+    enabled,
+    checkpoints = [],
+    startingIndex,
+    onEscape,
+    onEnd,
+    onBack,
+    onDismiss: tourOnDismiss,
+    advanceButtonText: tourAdvanceButtonText,
+    dismissAltText: tourDismissAltText,
     endButtonText: tourEndButtonText,
+    backButtonText: tourBackButtonText,
   } = tourValue || {};
   const [currentCheckpointData, setCurrentCheckpointData] = useState(null);
   const [index, setIndex] = useState(0);
   const [isTourEnabled, setIsTourEnabled] = useState(false);
   const [prunedCheckpoints, setPrunedCheckpoints] = useState([]);
   const {
-    title, body, onAdvance, onDismiss, advanceButtonText, dismissButtonText,
-    endButtonText, placement, target, showDismissButton,
+    title,
+    body,
+    onAdvance,
+    onDismiss,
+    advanceButtonText,
+    dismissAltText,
+    endButtonText,
+    backButtonText,
+    placement,
+    target,
   } = currentCheckpointData || {};
 
   /**
@@ -71,6 +88,13 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
     }
   };
 
+  const handleBack = () => {
+    setIndex(index - 1);
+    if (onBack) {
+      onBack();
+    }
+  };
+
   const handleDismiss = () => {
     setIndex(0);
     setIsTourEnabled(false);
@@ -106,9 +130,11 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
       advanceButtonText={advanceButtonText || tourAdvanceButtonText}
       body={body}
       currentCheckpointData={currentCheckpointData}
-      dismissButtonText={dismissButtonText || tourDismissButtonText}
+      dismissAltText={dismissAltText || tourDismissAltText}
       endButtonText={endButtonText || tourEndButtonText}
+      backButtonText={backButtonText || tourBackButtonText}
       index={index}
+      onBack={handleBack}
       onAdvance={handleAdvance}
       onDismiss={handleDismiss}
       onEnd={handleEnd}
@@ -116,7 +142,6 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
       target={target}
       title={title}
       totalCheckpoints={prunedCheckpoints.length}
-      showDismissButton={showDismissButton}
       ref={ref}
     />
   );
@@ -125,19 +150,22 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
 ProductTour.defaultProps = {
   tours: {
     advanceButtonText: '',
+    backButtonText: '',
     checkpoints: {
       advanceButtonText: '',
+      backButtonText: '',
       body: '',
-      dismissButtonText: '',
+      dismissAltText: '',
       endButtonText: '',
       onAdvance: () => {},
       onDismiss: () => {},
+      onBack: () => {},
       placement: 'top',
       title: '',
-      showDismissButton: undefined,
     },
-    dismissButtonText: '',
+    dismissAltText: '',
     endButtonText: '',
+    onBack: () => {},
     onDismiss: () => {},
     onEnd: () => {},
     onEscape: () => {},
@@ -149,16 +177,20 @@ ProductTour.propTypes = {
   tours: PropTypes.arrayOf(PropTypes.shape({
     /** The text displayed on all buttons used to advance the tour. */
     advanceButtonText: PropTypes.node,
+    /** The text displayed on all buttons used to go back in the tour */
+    backButtonText: PropTypes.string,
     /** An array comprised of checkpoint objects supporting the following values: */
     checkpoints: PropTypes.arrayOf(PropTypes.shape({
       /** The text displayed on the button used to advance the tour for the given Checkpoint
        * (overrides the* `advanceButtonText` defined in the parent tour object). */
       advanceButtonText: PropTypes.node,
+      /** The text displayed on the button used to go back in the tour for the given Checkpoint
+       * (overrides the* `backButtonText` defined in the parent tour object). */
+      backButtonText: PropTypes.string,
       /** The text displayed in the body of the Checkpoint */
       body: PropTypes.node,
-      /** The text displayed on the button used to dismiss the tour for the given Checkpoint
-       * (overrides the `dismissButtonText` defined in the parent tour object). */
-      dismissButtonText: PropTypes.node,
+      /** The text used in the alt for the icon used to dismiss the tour for the given Checkpoint */
+      dismissAltText: PropTypes.string,
       /** The text displayed on the button used to end the tour for the given Checkpoint
        * (overrides the `endButtonText` defined in the parent tour object). */
       endButtonText: PropTypes.node,
@@ -180,15 +212,15 @@ ProductTour.propTypes = {
       target: PropTypes.string.isRequired,
       /** The text displayed in the title of the Checkpoint */
       title: PropTypes.node,
-      /** Enforces visibility of the dismiss button under all circumstances */
-      showDismissButton: PropTypes.bool,
     })),
-    /** The text displayed on the button used to dismiss the tour. */
-    dismissButtonText: PropTypes.node,
+    /** The text used in the alt for the icon used to dismiss the tour for the given Checkpoint */
+    dismissAltText: PropTypes.string,
     /** Whether the tour is enabled. If there are multiple tours defined, only one should be enabled at a time. */
     enabled: PropTypes.bool.isRequired,
     /** The text displayed on the button used to end the tour. */
     endButtonText: PropTypes.node,
+    /** A function that runs when triggering the `onBack` event of the back button. */
+    onBack: PropTypes.func,
     /** A function that runs when triggering the `onClick` event of the dismiss button. */
     onDismiss: PropTypes.func,
     /** A function that runs when triggering the `onClick` event of the end button. */
@@ -202,4 +234,80 @@ ProductTour.propTypes = {
   })),
 };
 
-export default ProductTour;
+/**
+ * Checks if the given object has a deprecated/legacy `dismissButtonText` property.
+ * @param {Object} obj - The object to check
+ * @returns {boolean} - True if the object has a deprecated/legacy `dismissButtonText` property, false otherwise
+ */
+const hasDismissButtonText = (obj) => {
+  if ('dismissButtonText' in obj && !!obj.dismissButtonText) {
+    return true;
+  }
+  return false;
+};
+
+export default withDeprecatedProps(ProductTour, 'ProductTour', {
+  tours: {
+    deprType: DeprTypes.FORMAT,
+    message: "The dismissButtonText options in the 'tours' prop have been moved to 'dismissAltText'.",
+    /**
+     * Determines whether the given prop value contains the deprecated/legacy `dismissButtonText` property.
+     * @param {Object[]} propValue - The tours prop value to check
+     * @returns {boolean} True if the prop value contains the deprecated/legacy `dismissButtonText`
+     *  property, false otherwise
+     */
+    expect: (propValue) => {
+      if (!Array.isArray(propValue)) {
+        return true;
+      }
+      return !propValue.some((tour) => {
+        if (hasDismissButtonText(tour)) {
+          return true;
+        }
+        return Array.isArray(tour.checkpoints)
+          && tour.checkpoints.some(hasDismissButtonText);
+      });
+    },
+    /**
+     * Transforms the given prop value by updating the
+     * deprecated/legacy `dismissButtonText` property to
+     * `dismissAltText`, if the prop value is a string. Otherwise,
+     * the original `dismissButtonText` property is ignored.
+     * @param {Object[]} propValue - The tours prop value to transform
+     * @returns {Object[]} The transformed prop value
+     */
+    transform: (propValue) => {
+      const tours = propValue.map((tour) => {
+        const updatedTour = { ...tour };
+
+        // Replace tour level dismissButtonText with dismissAltText
+        if (hasDismissButtonText(tour)) {
+          if (typeof tour.dismissButtonText === 'string') {
+            updatedTour.dismissAltText = tour.dismissButtonText;
+          } else {
+            const warningMessage = "[Deprecated] ProductTour: The 'dismissButtonText' options within the 'tours' prop now expects a string";
+            // eslint-disable-next-line no-console
+            console.warn(warningMessage);
+          }
+        }
+
+        // Replace checkpoint level dismissButtonText with dismissAltText
+        if (Array.isArray(tour.checkpoints)) {
+          updatedTour.checkpoints = tour.checkpoints.map((checkpoint) => {
+            if (hasDismissButtonText(checkpoint)) {
+              const { dismissButtonText, ...rest } = checkpoint;
+              if (typeof dismissButtonText === 'string') {
+                return { ...rest, dismissAltText: dismissButtonText };
+              }
+            }
+            return checkpoint;
+          });
+        }
+        return updatedTour;
+      });
+
+      // Return the transformed tours
+      return tours;
+    },
+  },
+});

package/src/ProductTour/messages.js

@@ -11,6 +11,16 @@ const messages = defineMessages({
     defaultMessage: 'Bottom of step {step}',
     description: 'Screen-reader message to notify user that they are located at the bottom of the product tour step.',
   },
+  pageIndexText: {
+    id: 'pgn.ProductTour.Checkpoint.page-index-text',
+    defaultMessage: '{step} of {totalSteps}',
+    description: 'Page index showing your place in the ProductTour',
+  },
+  closeAltText: {
+    id: 'pgn.ProductTour.checkpointHeader.close',
+    defaultMessage: 'Close tour',
+    description: 'Close alternative text for ProductTour component',
+  },
 });
 
 export default messages;

package/src/withDeprecatedProps.tsx

@@ -66,10 +66,17 @@ function withDeprecatedProps<T extends Record<string, any>>(
             acc[propName] = this.props[propName];
           }
           break;
-        case DeprTypes.MOVED_AND_FORMAT:
-          this.warn(`${componentName}: The prop '${propName}' has been moved to '${newName}' and expects a new format. ${message}`);
-          acc[newName!] = transform!(this.props[propName], this.props);
+        case DeprTypes.MOVED_AND_FORMAT: {
+          const propValue = this.props[propName];
+          let warningMessage = `${componentName}: The prop '${propName}' has been moved to '${newName}'`;
+          if (expect && !expect(propValue)) {
+            warningMessage += ' and expects a new format';
+          }
+          warningMessage += message ? `. ${message}` : '';
+          this.warn(warningMessage);
+          acc[newName!] = transform ? transform(propValue, this.props) : propValue;
           break;
+        }
         default:
           acc[propName] = this.props[propName];
           break;