@openedx/paragon 22.20.2 → 22.20.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/ProductTour/index.js +8 -2
  2. package/dist/ProductTour/index.js.map +1 -1
  3. package/package.json +1 -1
  4. package/src/ProductTour/ProductTour.test.jsx +40 -2
  5. package/src/ProductTour/index.jsx +8 -2
package/dist/ProductTour/index.js CHANGED
@@ -13,7 +13,8 @@ const ProductTour = /*#__PURE__*/React.forwardRef((_ref, ref) => {
13
13
  startingIndex,
14
14
  onEscape,
15
15
  onEnd,
16
- onBack,
16
+ onAdvance: tourOnAdvance,
17
+ onBack: tourOnBack,
17
18
  onDismiss: tourOnDismiss,
18
19
  advanceButtonText: tourAdvanceButtonText,
19
20
  dismissAltText: tourDismissAltText,
@@ -28,6 +29,7 @@ const ProductTour = /*#__PURE__*/React.forwardRef((_ref, ref) => {
28
29
  title,
29
30
  body,
30
31
  onAdvance,
32
+ onBack,
31
33
  onDismiss,
32
34
  advanceButtonText,
33
35
  dismissAltText,
@@ -78,12 +80,16 @@ const ProductTour = /*#__PURE__*/React.forwardRef((_ref, ref) => {
78
80
  setIndex(index + 1);
79
81
  if (onAdvance) {
80
82
  onAdvance();
83
+ } else if (tourOnAdvance) {
84
+ tourOnAdvance();
81
85
  }
82
86
  };
83
87
  const handleBack = () => {
84
88
  setIndex(index - 1);
85
89
  if (onBack) {
86
90
  onBack();
91
+ } else if (tourOnBack) {
92
+ tourOnBack();
87
93
  }
88
94
  };
89
95
  const handleDismiss = () => {
@@ -91,7 +97,7 @@ const ProductTour = /*#__PURE__*/React.forwardRef((_ref, ref) => {
91
97
  setIsTourEnabled(false);
92
98
  if (onDismiss) {
93
99
  onDismiss();
94
- } else {
100
+ } else if (tourOnDismiss) {
95
101
  tourOnDismiss();
96
102
  }
97
103
  setCurrentCheckpointData(null);
package/dist/ProductTour/index.js.map CHANGED
@@ -1 +1 @@
1
- {"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":[]}
1
+ {"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","onAdvance","tourOnAdvance","onBack","tourOnBack","onDismiss","tourOnDismiss","advanceButtonText","tourAdvanceButtonText","dismissAltText","tourDismissAltText","endButtonText","tourEndButtonText","backButtonText","tourBackButtonText","currentCheckpointData","setCurrentCheckpointData","index","setIndex","isTourEnabled","setIsTourEnabled","prunedCheckpoints","setPrunedCheckpoints","title","body","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 onAdvance: tourOnAdvance,\n onBack: tourOnBack,\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 onBack,\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 } else if (tourOnAdvance) {\n tourOnAdvance();\n }\n };\n\n const handleBack = () => {\n setIndex(index - 1);\n if (onBack) {\n onBack();\n } else if (tourOnBack) {\n tourOnBack();\n }\n };\n\n const handleDismiss = () => {\n setIndex(0);\n setIsTourEnabled(false);\n if (onDismiss) {\n onDismiss();\n } else if (tourOnDismiss) {\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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openedx/paragon",
3
- "version": "22.20.2",
3
+ "version": "22.20.3",
4
4
  "description": "Accessible, responsive UI component library based on Bootstrap.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",
package/src/ProductTour/ProductTour.test.jsx CHANGED
@@ -19,6 +19,8 @@ describe('<ProductTour />', () => {
19
19
  <div id="target-4">...</div>
20
20
  </>
21
21
  );
22
+ const handleAdvance = jest.fn();
23
+ const handleBack = jest.fn();
22
24
  const handleDismiss = jest.fn();
23
25
  const handleEnd = jest.fn();
24
26
  const handleEscape = jest.fn();
@@ -31,6 +33,8 @@ describe('<ProductTour />', () => {
31
33
  advanceButtonText: 'Next',
32
34
  enabled: false,
33
35
  endButtonText: 'Okay',
36
+ onAdvance: handleAdvance,
37
+ onBack: handleBack,
34
38
  onDismiss: handleDismiss,
35
39
  onEnd: handleEnd,
36
40
  tourId: 'disabledTour',
@@ -48,6 +52,8 @@ describe('<ProductTour />', () => {
48
52
  backButtonText: 'Back',
49
53
  enabled: true,
50
54
  endButtonText: 'Okay',
55
+ onAdvance: handleAdvance,
56
+ onBack: handleBack,
51
57
  onDismiss: handleDismiss,
52
58
  onEnd: handleEnd,
53
59
  tourId: 'enabledTour',
@@ -60,6 +66,7 @@ describe('<ProductTour />', () => {
60
66
  {
61
67
  body: 'Checkpoint 2',
62
68
  target: '#target-2',
69
+ onAdvance: customOnAdvance,
63
70
  },
64
71
  {
65
72
  body: 'Checkpoint 3',
@@ -82,6 +89,7 @@ describe('<ProductTour />', () => {
82
89
 
83
90
  afterEach(() => {
84
91
  popperMock.mockReset();
92
+ jest.resetAllMocks();
85
93
  });
86
94
 
87
95
  // eslint-disable-next-line react/prop-types
@@ -115,6 +123,38 @@ describe('<ProductTour />', () => {
115
123
 
116
124
  // Verify the second Checkpoint has rendered
117
125
  expect(screen.getByText('Checkpoint 2')).toBeInTheDocument();
126
+ expect(handleAdvance).toHaveBeenCalled();
127
+
128
+ await userEvent.click(advanceButton);
129
+ expect(screen.getByText('Checkpoint 3')).toBeInTheDocument();
130
+ expect(customOnAdvance).toHaveBeenCalled();
131
+ });
132
+
133
+ it('onClick of back button rewinds to last checkpoint', async () => {
134
+ render(<ProductTourWrapper tours={[tourData]} />);
135
+ // Verify the first Checkpoint has rendered
136
+ expect(screen.getByRole('heading', { name: 'Checkpoint 1' })).toBeInTheDocument();
137
+
138
+ // Click the advance button
139
+ const advanceButton = screen.getByRole('button', { name: 'Next' });
140
+ await userEvent.click(advanceButton);
141
+
142
+ // go forward to the 3rd checkpoint
143
+ expect(screen.getByText('Checkpoint 2')).toBeInTheDocument();
144
+ await userEvent.click(advanceButton);
145
+ expect(screen.getByText('Checkpoint 3')).toBeInTheDocument();
146
+
147
+ // First back button should use custom on back function
148
+ let backButton = screen.getByRole('button', { name: 'Override back' });
149
+ await userEvent.click(backButton);
150
+ expect(screen.getByText('Checkpoint 2')).toBeInTheDocument();
151
+ expect(customOnBack).toHaveBeenCalled();
152
+
153
+ // Second back button should use the tour's default back function
154
+ backButton = screen.getByRole('button', { name: 'Back' });
155
+ await userEvent.click(backButton);
156
+ expect(screen.getByText('Checkpoint 1')).toBeInTheDocument();
157
+ expect(handleBack).toHaveBeenCalled();
118
158
  });
119
159
 
120
160
  it('onClick of dismiss button disables tour', async () => {
@@ -191,7 +231,6 @@ describe('<ProductTour />', () => {
191
231
 
192
232
  // Verify no Checkpoints have rendered
193
233
  expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
194
- expect(handleEnd).toHaveBeenCalledTimes(1);
195
234
  expect(customOnEnd).not.toHaveBeenCalled();
196
235
  });
197
236
 
@@ -284,7 +323,6 @@ describe('<ProductTour />', () => {
284
323
  expect(screen.getByText('Checkpoint 4')).toBeInTheDocument();
285
324
  const endButton = screen.getByRole('button', { name: 'Override end' });
286
325
  await user.click(endButton);
287
- expect(handleEnd).toBeCalledTimes(1);
288
326
  expect(customOnEnd).toHaveBeenCalledTimes(1);
289
327
  expect(screen.queryByText('Checkpoint 4')).not.toBeInTheDocument();
290
328
  });
package/src/ProductTour/index.jsx CHANGED
@@ -12,7 +12,8 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
12
12
  startingIndex,
13
13
  onEscape,
14
14
  onEnd,
15
- onBack,
15
+ onAdvance: tourOnAdvance,
16
+ onBack: tourOnBack,
16
17
  onDismiss: tourOnDismiss,
17
18
  advanceButtonText: tourAdvanceButtonText,
18
19
  dismissAltText: tourDismissAltText,
@@ -27,6 +28,7 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
27
28
  title,
28
29
  body,
29
30
  onAdvance,
31
+ onBack,
30
32
  onDismiss,
31
33
  advanceButtonText,
32
34
  dismissAltText,
@@ -85,6 +87,8 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
85
87
  setIndex(index + 1);
86
88
  if (onAdvance) {
87
89
  onAdvance();
90
+ } else if (tourOnAdvance) {
91
+ tourOnAdvance();
88
92
  }
89
93
  };
90
94
 
@@ -92,6 +96,8 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
92
96
  setIndex(index - 1);
93
97
  if (onBack) {
94
98
  onBack();
99
+ } else if (tourOnBack) {
100
+ tourOnBack();
95
101
  }
96
102
  };
97
103
 
@@ -100,7 +106,7 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
100
106
  setIsTourEnabled(false);
101
107
  if (onDismiss) {
102
108
  onDismiss();
103
- } else {
109
+ } else if (tourOnDismiss) {
104
110
  tourOnDismiss();
105
111
  }
106
112
  setCurrentCheckpointData(null);