@openedx/paragon 23.6.1 → 23.8.0

package/dist/ProductTour/index.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
 import Checkpoint from './Checkpoint';
 const ProductTour = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -12,10 +13,12 @@ const ProductTour = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     startingIndex,
     onEscape,
     onEnd,
+    onBack,
     onDismiss: tourOnDismiss,
     advanceButtonText: tourAdvanceButtonText,
-    dismissButtonText: tourDismissButtonText,
-    endButtonText: tourEndButtonText
+    dismissAltText: tourDismissAltText,
+    endButtonText: tourEndButtonText,
+    backButtonText: tourBackButtonText
   } = tourValue || {};
   const [currentCheckpointData, setCurrentCheckpointData] = useState(null);
   const [index, setIndex] = useState(0);
@@ -27,11 +30,11 @@ const ProductTour = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onAdvance,
     onDismiss,
     advanceButtonText,
-    dismissButtonText,
+    dismissAltText,
     endButtonText,
+    backButtonText,
     placement,
-    target,
-    showDismissButton
+    target
   } = currentCheckpointData || {};
 
   /**
@@ -77,6 +80,12 @@ const ProductTour = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       onAdvance();
     }
   };
+  const handleBack = () => {
+    setIndex(index - 1);
+    if (onBack) {
+      onBack();
+    }
+  };
   const handleDismiss = () => {
     setIndex(0);
     setIsTourEnabled(false);
@@ -111,9 +120,11 @@ const ProductTour = /*#__PURE__*/React.forwardRef((_ref, 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,
@@ -121,26 +132,28 @@ const ProductTour = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     target: target,
     title: title,
     totalCheckpoints: prunedCheckpoints.length,
-    showDismissButton: showDismissButton,
     ref: ref
   });
 });
 ProductTour.defaultProps = {
   tours: {
     advanceButtonText: '',
+    backButtonText: '',
     checkpoints: {
       advanceButtonText: '',
+      backButtonText: '',
       body: '',
-      dismissButtonText: '',
+      dismissAltText: '',
       endButtonText: '',
       onAdvance: () => {},
       onDismiss: () => {},
+      onBack: () => {},
       placement: 'top',
-      title: '',
-      showDismissButton: undefined
+      title: ''
     },
-    dismissButtonText: '',
+    dismissAltText: '',
     endButtonText: '',
+    onBack: () => {},
     onDismiss: () => {},
     onEnd: () => {},
     onEscape: () => {},
@@ -151,16 +164,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,
@@ -178,16 +195,16 @@ ProductTour.propTypes = {
       /** The CSS selector for the Checkpoint's desired target. */
       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
+      title: PropTypes.node
     })),
-    /** 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. */
@@ -200,5 +217,88 @@ ProductTour.propTypes = {
     tourId: PropTypes.string.isRequired
   }))
 };
-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;
+    }
+  }
+});
 //# sourceMappingURL=index.js.map

package/dist/ProductTour/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useEffect","useState","PropTypes","Checkpoint","ProductTour","forwardRef","_ref","ref","tours","tourValue","find","tour","enabled","checkpoints","startingIndex","onEscape","onEnd","onDismiss","tourOnDismiss","advanceButtonText","tourAdvanceButtonText","dismissButtonText","tourDismissButtonText","endButtonText","tourEndButtonText","currentCheckpointData","setCurrentCheckpointData","index","setIndex","isTourEnabled","setIsTourEnabled","prunedCheckpoints","setPrunedCheckpoints","title","body","onAdvance","placement","target","showDismissButton","pruneCheckpoints","checkpointList","checkpointsWithRenderedTargets","filter","checkpoint","document","querySelector","length","handleEsc","event","key","global","addEventListener","removeEventListener","handleAdvance","handleDismiss","handleEnd","checkpointIndex","createElement","totalCheckpoints","defaultProps","undefined","propTypes","arrayOf","shape","node","func","oneOf","string","isRequired","bool","number","tourId"],"sources":["../../src/ProductTour/index.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Checkpoint from './Checkpoint';\n\nconst ProductTour = React.forwardRef(({ tours }, ref) => {\n  const tourValue = tours.find((tour) => tour.enabled);\n  const {\n    enabled, checkpoints = [], startingIndex, onEscape, onEnd, onDismiss: tourOnDismiss,\n    advanceButtonText: tourAdvanceButtonText, dismissButtonText: tourDismissButtonText,\n    endButtonText: tourEndButtonText,\n  } = tourValue || {};\n  const [currentCheckpointData, setCurrentCheckpointData] = useState(null);\n  const [index, setIndex] = useState(0);\n  const [isTourEnabled, setIsTourEnabled] = useState(false);\n  const [prunedCheckpoints, setPrunedCheckpoints] = useState([]);\n  const {\n    title, body, onAdvance, onDismiss, advanceButtonText, dismissButtonText,\n    endButtonText, placement, target, showDismissButton,\n  } = currentCheckpointData || {};\n\n  /**\n   * Takes a list of checkpoints and verifies that each target string provided is\n   * an element in the DOM.\n   */\n  const pruneCheckpoints = (checkpointList) => {\n    const checkpointsWithRenderedTargets = checkpointList.filter(\n      (checkpoint) => !!document.querySelector(checkpoint.target),\n    );\n    setPrunedCheckpoints(checkpointsWithRenderedTargets);\n  };\n\n  useEffect(() => {\n    if (enabled && checkpoints) {\n      setIsTourEnabled(enabled);\n      pruneCheckpoints(checkpoints);\n      setIndex(startingIndex || 0);\n    }\n  }, [enabled, checkpoints, startingIndex]);\n\n  useEffect(() => {\n    if (isTourEnabled && prunedCheckpoints.length) {\n      setCurrentCheckpointData(prunedCheckpoints[index]);\n    }\n  }, [index, isTourEnabled, prunedCheckpoints]);\n\n  useEffect(() => {\n    const handleEsc = (event) => {\n      if (event.key === 'Escape') {\n        setIsTourEnabled(false);\n        if (onEscape) {\n          onEscape();\n        }\n      }\n    };\n    global.addEventListener('keydown', handleEsc);\n\n    return () => {\n      global.removeEventListener('keydown', handleEsc);\n    };\n  }, [onEscape]);\n\n  if (!tourValue || !currentCheckpointData || !isTourEnabled) {\n    return null;\n  }\n\n  const handleAdvance = () => {\n    setIndex(index + 1);\n    if (onAdvance) {\n      onAdvance();\n    }\n  };\n\n  const handleDismiss = () => {\n    setIndex(0);\n    setIsTourEnabled(false);\n    if (onDismiss) {\n      onDismiss();\n    } else {\n      tourOnDismiss();\n    }\n    setCurrentCheckpointData(null);\n  };\n  /* eslint-disable */\n  /**\n   * Takes the final checkpoint array index value and looks for an existing onEnd callback.\n   * \n   * If an onEnd callback exist on checkpointIndex value and it is the final checkpoint \n   * in the array, the onEnd callback will be called for the parent, and individual onEnd object. \n   * \n   * @param {Integer} checkpointIndex \n   */\n  /* eslint-enable */\n  const handleEnd = (checkpointIndex) => {\n    setIndex(0);\n    setIsTourEnabled(false);\n    if (prunedCheckpoints[checkpointIndex].onEnd) {\n      prunedCheckpoints[checkpointIndex].onEnd();\n    } else if (onEnd) {\n      onEnd(prunedCheckpoints[checkpointIndex]);\n    }\n    setCurrentCheckpointData(null);\n  };\n  return (\n    <Checkpoint\n      advanceButtonText={advanceButtonText || tourAdvanceButtonText}\n      body={body}\n      currentCheckpointData={currentCheckpointData}\n      dismissButtonText={dismissButtonText || tourDismissButtonText}\n      endButtonText={endButtonText || tourEndButtonText}\n      index={index}\n      onAdvance={handleAdvance}\n      onDismiss={handleDismiss}\n      onEnd={handleEnd}\n      placement={placement}\n      target={target}\n      title={title}\n      totalCheckpoints={prunedCheckpoints.length}\n      showDismissButton={showDismissButton}\n      ref={ref}\n    />\n  );\n});\n\nProductTour.defaultProps = {\n  tours: {\n    advanceButtonText: '',\n    checkpoints: {\n      advanceButtonText: '',\n      body: '',\n      dismissButtonText: '',\n      endButtonText: '',\n      onAdvance: () => {},\n      onDismiss: () => {},\n      placement: 'top',\n      title: '',\n      showDismissButton: undefined,\n    },\n    dismissButtonText: '',\n    endButtonText: '',\n    onDismiss: () => {},\n    onEnd: () => {},\n    onEscape: () => {},\n    startingIndex: 0,\n  },\n};\n\nProductTour.propTypes = {\n  tours: PropTypes.arrayOf(PropTypes.shape({\n    /** The text displayed on all buttons used to advance the tour. */\n    advanceButtonText: PropTypes.node,\n    /** An array comprised of checkpoint objects supporting the following values: */\n    checkpoints: PropTypes.arrayOf(PropTypes.shape({\n      /** The text displayed on the button used to advance the tour for the given Checkpoint\n       * (overrides the* `advanceButtonText` defined in the parent tour object). */\n      advanceButtonText: PropTypes.node,\n      /** The text displayed in the body of the Checkpoint */\n      body: PropTypes.node,\n      /** The text displayed on the button used to dismiss the tour for the given Checkpoint\n       * (overrides the `dismissButtonText` defined in the parent tour object). */\n      dismissButtonText: PropTypes.node,\n      /** The text displayed on the button used to end the tour for the given Checkpoint\n       * (overrides the `endButtonText` defined in the parent tour object). */\n      endButtonText: PropTypes.node,\n      /** A function that runs when triggering the `onClick` event of the advance\n       * button for the given Checkpoint. */\n      onAdvance: PropTypes.func,\n      /** A function that runs when triggering the `onClick` event of the dismiss\n       * button for the given Checkpoint (overrides the `onDismiss` function defined in the parent tour object). */\n      onDismiss: PropTypes.func,\n      /** A function that runs when triggering the `onClick` event of the advance\n      * button if the given Checkpoint is the only or last Checkpoint in a tour. */\n      onEnd: PropTypes.func,\n      /** A string that dictates the alignment of the Checkpoint around its target. */\n      placement: PropTypes.oneOf([\n        'top', 'top-start', 'top-end', 'right-start', 'right', 'right-end',\n        'left-start', 'left', 'left-end', 'bottom', 'bottom-start', 'bottom-end',\n      ]),\n      /** The CSS selector for the Checkpoint's desired target. */\n      target: PropTypes.string.isRequired,\n      /** The text displayed in the title of the Checkpoint */\n      title: PropTypes.node,\n      /** Enforces visibility of the dismiss button under all circumstances */\n      showDismissButton: PropTypes.bool,\n    })),\n    /** The text displayed on the button used to dismiss the tour. */\n    dismissButtonText: PropTypes.node,\n    /** Whether the tour is enabled. If there are multiple tours defined, only one should be enabled at a time. */\n    enabled: PropTypes.bool.isRequired,\n    /** The text displayed on the button used to end the tour. */\n    endButtonText: PropTypes.node,\n    /** A function that runs when triggering the `onClick` event of the dismiss button. */\n    onDismiss: PropTypes.func,\n    /** A function that runs when triggering the `onClick` event of the end button. */\n    onEnd: PropTypes.func,\n    /** A function that runs when pressing the Escape key. */\n    onEscape: PropTypes.func,\n    /** The index of the desired `Checkpoint` to render when the tour starts. */\n    startingIndex: PropTypes.number,\n    /** The ID of the tour */\n    tourId: PropTypes.string.isRequired,\n  })),\n};\n\nexport default ProductTour;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useEffect","useState","PropTypes","withDeprecatedProps","DeprTypes","Checkpoint","ProductTour","forwardRef","_ref","ref","tours","tourValue","find","tour","enabled","checkpoints","startingIndex","onEscape","onEnd","onBack","onDismiss","tourOnDismiss","advanceButtonText","tourAdvanceButtonText","dismissAltText","tourDismissAltText","endButtonText","tourEndButtonText","backButtonText","tourBackButtonText","currentCheckpointData","setCurrentCheckpointData","index","setIndex","isTourEnabled","setIsTourEnabled","prunedCheckpoints","setPrunedCheckpoints","title","body","onAdvance","placement","target","pruneCheckpoints","checkpointList","checkpointsWithRenderedTargets","filter","checkpoint","document","querySelector","length","handleEsc","event","key","global","addEventListener","removeEventListener","handleAdvance","handleBack","handleDismiss","handleEnd","checkpointIndex","createElement","totalCheckpoints","defaultProps","propTypes","arrayOf","shape","node","string","func","oneOf","isRequired","bool","number","tourId","hasDismissButtonText","obj","dismissButtonText","deprType","FORMAT","message","expect","propValue","Array","isArray","some","transform","map","updatedTour","warningMessage","console","warn","rest"],"sources":["../../src/ProductTour/index.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\nimport Checkpoint from './Checkpoint';\n\nconst ProductTour = React.forwardRef(({ tours }, ref) => {\n  const tourValue = tours.find((tour) => tour.enabled);\n  const {\n    enabled,\n    checkpoints = [],\n    startingIndex,\n    onEscape,\n    onEnd,\n    onBack,\n    onDismiss: tourOnDismiss,\n    advanceButtonText: tourAdvanceButtonText,\n    dismissAltText: tourDismissAltText,\n    endButtonText: tourEndButtonText,\n    backButtonText: tourBackButtonText,\n  } = tourValue || {};\n  const [currentCheckpointData, setCurrentCheckpointData] = useState(null);\n  const [index, setIndex] = useState(0);\n  const [isTourEnabled, setIsTourEnabled] = useState(false);\n  const [prunedCheckpoints, setPrunedCheckpoints] = useState([]);\n  const {\n    title,\n    body,\n    onAdvance,\n    onDismiss,\n    advanceButtonText,\n    dismissAltText,\n    endButtonText,\n    backButtonText,\n    placement,\n    target,\n  } = currentCheckpointData || {};\n\n  /**\n   * Takes a list of checkpoints and verifies that each target string provided is\n   * an element in the DOM.\n   */\n  const pruneCheckpoints = (checkpointList) => {\n    const checkpointsWithRenderedTargets = checkpointList.filter(\n      (checkpoint) => !!document.querySelector(checkpoint.target),\n    );\n    setPrunedCheckpoints(checkpointsWithRenderedTargets);\n  };\n\n  useEffect(() => {\n    if (enabled && checkpoints) {\n      setIsTourEnabled(enabled);\n      pruneCheckpoints(checkpoints);\n      setIndex(startingIndex || 0);\n    }\n  }, [enabled, checkpoints, startingIndex]);\n\n  useEffect(() => {\n    if (isTourEnabled && prunedCheckpoints.length) {\n      setCurrentCheckpointData(prunedCheckpoints[index]);\n    }\n  }, [index, isTourEnabled, prunedCheckpoints]);\n\n  useEffect(() => {\n    const handleEsc = (event) => {\n      if (event.key === 'Escape') {\n        setIsTourEnabled(false);\n        if (onEscape) {\n          onEscape();\n        }\n      }\n    };\n    global.addEventListener('keydown', handleEsc);\n\n    return () => {\n      global.removeEventListener('keydown', handleEsc);\n    };\n  }, [onEscape]);\n\n  if (!tourValue || !currentCheckpointData || !isTourEnabled) {\n    return null;\n  }\n\n  const handleAdvance = () => {\n    setIndex(index + 1);\n    if (onAdvance) {\n      onAdvance();\n    }\n  };\n\n  const handleBack = () => {\n    setIndex(index - 1);\n    if (onBack) {\n      onBack();\n    }\n  };\n\n  const handleDismiss = () => {\n    setIndex(0);\n    setIsTourEnabled(false);\n    if (onDismiss) {\n      onDismiss();\n    } else {\n      tourOnDismiss();\n    }\n    setCurrentCheckpointData(null);\n  };\n  /* eslint-disable */\n  /**\n   * Takes the final checkpoint array index value and looks for an existing onEnd callback.\n   * \n   * If an onEnd callback exist on checkpointIndex value and it is the final checkpoint \n   * in the array, the onEnd callback will be called for the parent, and individual onEnd object. \n   * \n   * @param {Integer} checkpointIndex \n   */\n  /* eslint-enable */\n  const handleEnd = (checkpointIndex) => {\n    setIndex(0);\n    setIsTourEnabled(false);\n    if (prunedCheckpoints[checkpointIndex].onEnd) {\n      prunedCheckpoints[checkpointIndex].onEnd();\n    } else if (onEnd) {\n      onEnd(prunedCheckpoints[checkpointIndex]);\n    }\n    setCurrentCheckpointData(null);\n  };\n  return (\n    <Checkpoint\n      advanceButtonText={advanceButtonText || tourAdvanceButtonText}\n      body={body}\n      currentCheckpointData={currentCheckpointData}\n      dismissAltText={dismissAltText || tourDismissAltText}\n      endButtonText={endButtonText || tourEndButtonText}\n      backButtonText={backButtonText || tourBackButtonText}\n      index={index}\n      onBack={handleBack}\n      onAdvance={handleAdvance}\n      onDismiss={handleDismiss}\n      onEnd={handleEnd}\n      placement={placement}\n      target={target}\n      title={title}\n      totalCheckpoints={prunedCheckpoints.length}\n      ref={ref}\n    />\n  );\n});\n\nProductTour.defaultProps = {\n  tours: {\n    advanceButtonText: '',\n    backButtonText: '',\n    checkpoints: {\n      advanceButtonText: '',\n      backButtonText: '',\n      body: '',\n      dismissAltText: '',\n      endButtonText: '',\n      onAdvance: () => {},\n      onDismiss: () => {},\n      onBack: () => {},\n      placement: 'top',\n      title: '',\n    },\n    dismissAltText: '',\n    endButtonText: '',\n    onBack: () => {},\n    onDismiss: () => {},\n    onEnd: () => {},\n    onEscape: () => {},\n    startingIndex: 0,\n  },\n};\n\nProductTour.propTypes = {\n  tours: PropTypes.arrayOf(PropTypes.shape({\n    /** The text displayed on all buttons used to advance the tour. */\n    advanceButtonText: PropTypes.node,\n    /** The text displayed on all buttons used to go back in the tour */\n    backButtonText: PropTypes.string,\n    /** An array comprised of checkpoint objects supporting the following values: */\n    checkpoints: PropTypes.arrayOf(PropTypes.shape({\n      /** The text displayed on the button used to advance the tour for the given Checkpoint\n       * (overrides the* `advanceButtonText` defined in the parent tour object). */\n      advanceButtonText: PropTypes.node,\n      /** The text displayed on the button used to go back in the tour for the given Checkpoint\n       * (overrides the* `backButtonText` defined in the parent tour object). */\n      backButtonText: PropTypes.string,\n      /** The text displayed in the body of the Checkpoint */\n      body: PropTypes.node,\n      /** The text used in the alt for the icon used to dismiss the tour for the given Checkpoint */\n      dismissAltText: PropTypes.string,\n      /** The text displayed on the button used to end the tour for the given Checkpoint\n       * (overrides the `endButtonText` defined in the parent tour object). */\n      endButtonText: PropTypes.node,\n      /** A function that runs when triggering the `onClick` event of the advance\n       * button for the given Checkpoint. */\n      onAdvance: PropTypes.func,\n      /** A function that runs when triggering the `onClick` event of the dismiss\n       * button for the given Checkpoint (overrides the `onDismiss` function defined in the parent tour object). */\n      onDismiss: PropTypes.func,\n      /** A function that runs when triggering the `onClick` event of the advance\n      * button if the given Checkpoint is the only or last Checkpoint in a tour. */\n      onEnd: PropTypes.func,\n      /** A string that dictates the alignment of the Checkpoint around its target. */\n      placement: PropTypes.oneOf([\n        'top', 'top-start', 'top-end', 'right-start', 'right', 'right-end',\n        'left-start', 'left', 'left-end', 'bottom', 'bottom-start', 'bottom-end',\n      ]),\n      /** The CSS selector for the Checkpoint's desired target. */\n      target: PropTypes.string.isRequired,\n      /** The text displayed in the title of the Checkpoint */\n      title: PropTypes.node,\n    })),\n    /** The text used in the alt for the icon used to dismiss the tour for the given Checkpoint */\n    dismissAltText: PropTypes.string,\n    /** Whether the tour is enabled. If there are multiple tours defined, only one should be enabled at a time. */\n    enabled: PropTypes.bool.isRequired,\n    /** The text displayed on the button used to end the tour. */\n    endButtonText: PropTypes.node,\n    /** A function that runs when triggering the `onBack` event of the back button. */\n    onBack: PropTypes.func,\n    /** A function that runs when triggering the `onClick` event of the dismiss button. */\n    onDismiss: PropTypes.func,\n    /** A function that runs when triggering the `onClick` event of the end button. */\n    onEnd: PropTypes.func,\n    /** A function that runs when pressing the Escape key. */\n    onEscape: PropTypes.func,\n    /** The index of the desired `Checkpoint` to render when the tour starts. */\n    startingIndex: PropTypes.number,\n    /** The ID of the tour */\n    tourId: PropTypes.string.isRequired,\n  })),\n};\n\n/**\n * Checks if the given object has a deprecated/legacy `dismissButtonText` property.\n * @param {Object} obj - The object to check\n * @returns {boolean} - True if the object has a deprecated/legacy `dismissButtonText` property, false otherwise\n */\nconst hasDismissButtonText = (obj) => {\n  if ('dismissButtonText' in obj && !!obj.dismissButtonText) {\n    return true;\n  }\n  return false;\n};\n\nexport default withDeprecatedProps(ProductTour, 'ProductTour', {\n  tours: {\n    deprType: DeprTypes.FORMAT,\n    message: \"The dismissButtonText options in the 'tours' prop have been moved to 'dismissAltText'.\",\n    /**\n     * Determines whether the given prop value contains the deprecated/legacy `dismissButtonText` property.\n     * @param {Object[]} propValue - The tours prop value to check\n     * @returns {boolean} True if the prop value contains the deprecated/legacy `dismissButtonText`\n     *  property, false otherwise\n     */\n    expect: (propValue) => {\n      if (!Array.isArray(propValue)) {\n        return true;\n      }\n      return !propValue.some((tour) => {\n        if (hasDismissButtonText(tour)) {\n          return true;\n        }\n        return Array.isArray(tour.checkpoints)\n          && tour.checkpoints.some(hasDismissButtonText);\n      });\n    },\n    /**\n     * Transforms the given prop value by updating the\n     * deprecated/legacy `dismissButtonText` property to\n     * `dismissAltText`, if the prop value is a string. Otherwise,\n     * the original `dismissButtonText` property is ignored.\n     * @param {Object[]} propValue - The tours prop value to transform\n     * @returns {Object[]} The transformed prop value\n     */\n    transform: (propValue) => {\n      const tours = propValue.map((tour) => {\n        const updatedTour = { ...tour };\n\n        // Replace tour level dismissButtonText with dismissAltText\n        if (hasDismissButtonText(tour)) {\n          if (typeof tour.dismissButtonText === 'string') {\n            updatedTour.dismissAltText = tour.dismissButtonText;\n          } else {\n            const warningMessage = \"[Deprecated] ProductTour: The 'dismissButtonText' options within the 'tours' prop now expects a string\";\n            // eslint-disable-next-line no-console\n            console.warn(warningMessage);\n          }\n        }\n\n        // Replace checkpoint level dismissButtonText with dismissAltText\n        if (Array.isArray(tour.checkpoints)) {\n          updatedTour.checkpoints = tour.checkpoints.map((checkpoint) => {\n            if (hasDismissButtonText(checkpoint)) {\n              const { dismissButtonText, ...rest } = checkpoint;\n              if (typeof dismissButtonText === 'string') {\n                return { ...rest, dismissAltText: dismissButtonText };\n              }\n            }\n            return checkpoint;\n          });\n        }\n        return updatedTour;\n      });\n\n      // Return the transformed tours\n      return tours;\n    },\n  },\n});\n"],"mappings":"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","ignoreList":[]}

package/dist/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/dist/core.css

@@ -8999,9 +8999,13 @@ p > a.brand-link[href]:not(.btn):hover, a.brand-link.inline-link:hover {
   border: var(--pgn-size-alert-border-width) solid var(--pgn-alert-border-color, transparent);
   color: inherit;
   background-color: var(--pgn-alert-bg, transparent);
+  align-items: center;
   border-radius: var(--pgn-size-alert-border-radius);
   box-shadow: var(--pgn-elevation-box-shadow-down-1);
 }
+.alert:has(.alert-heading:not(:only-child)) {
+  align-items: start;
+}
 .alert .alert-message-content > :last-child {
   margin-bottom: 0;
 }
@@ -16771,7 +16775,7 @@ select.form-control {
   background: var(--pgn-color-product-tour-checkpoint-bg);
   border-top: var(--pgn-size-product-tour-checkpoint-width-border) solid var(--pgn-color-product-tour-checkpoint-border);
   border-radius: var(--pgn-size-border-radius-base);
-  padding: var(--pgn-spacing-spacer-4);
+  padding: var(--pgn-spacing-spacer-3-5);
   box-shadow: 0 0.25rem 0.5rem var(--pgn-color-product-tour-checkpoint-box-shadow);
   z-index: var(--pgn-elevation-product-tour-checkpoint-zindex);
   max-width: var(--pgn-size-product-tour-checkpoint-width-max);
@@ -16810,32 +16814,6 @@ select.form-control {
 .pgn__checkpoint .pgn__checkpoint-button_dismiss {
   margin-inline-end: var(--pgn-spacing-spacer-2);
 }
-.pgn__checkpoint .pgn__checkpoint-breadcrumb {
-  height: 6px;
-  width: 6px;
-  border-radius: 50%;
-}
-.pgn__checkpoint .pgn__checkpoint-breadcrumb.pgn__checkpoint-breadcrumb_active {
-  background: var(--pgn-color-product-tour-checkpoint-breadcrumb);
-}
-.pgn__checkpoint .pgn__checkpoint-breadcrumb.pgn__checkpoint-breadcrumb_inactive {
-  border: 1px solid var(--pgn-color-product-tour-checkpoint-breadcrumb);
-  background: transparent;
-}
-.pgn__checkpoint .pgn__checkpoint-breadcrumb:not(:first-child) {
-  margin-left: calc(var(--pgn-spacing-spacer-base) * 0.375);
-}
-[dir=rtl] .pgn__checkpoint .pgn__checkpoint-breadcrumb {
-  margin-left: calc(var(--pgn-spacing-spacer-base) * 0.375);
-  margin-right: 0;
-}
-[dir=rtl] .pgn__checkpoint .pgn__checkpoint-breadcrumb:last-child {
-  margin-left: 0;
-}
-.pgn__checkpoint .pgn__checkpoint-breadcrumb-container {
-  display: flex;
-  align-items: center;
-}
 .pgn__checkpoint .pgn__checkpoint-body {
   color: var(--pgn-color-product-tour-checkpoint-body);
   margin-bottom: calc(var(--pgn-spacing-spacer-base) * 1.25);
@@ -16844,12 +16822,16 @@ select.form-control {
 .pgn__checkpoint .pgn__checkpoint-header {
   display: flex;
   justify-content: space-between;
-  margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.75);
+  margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.5);
+  align-items: center;
 }
 .pgn__checkpoint #pgn__checkpoint-title {
   font-size: var(--pgn-typography-font-size-h3-base);
   margin-inline-end: calc(var(--pgn-spacing-spacer-base) * 0.75);
-  margin-bottom: 0;
+  margin-bottom: calc(var(--pgn-spacing-spacer-base) * 0.5);
+}
+.pgn__checkpoint .pgn__checkpoint-page-index {
+  font-size: var(--pgn-typography-font-size-sm);
 }
 .pgn__checkpoint[data-popper-placement^=top] > #pgn__checkpoint-arrow {
   left: calc(var(--pgn-size-product-tour-checkpoint-width-arrow) * -1) !important;