@openedx/paragon 21.6.1 → 21.7.0

package/dist/ProductTour/Checkpoint.js

@@ -6,6 +6,7 @@ import React, { useEffect, useState } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import PropTypes from 'prop-types';
 import { createPopper } from '@popperjs/core';
+import { FormattedMessage } from 'react-intl';
 import breakpoints from '../utils/breakpoints';
 import CheckpointActionRow from './CheckpointActionRow';
 import CheckpointBody from './CheckpointBody';
@@ -93,7 +94,14 @@ const Checkpoint = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
   }, /*#__PURE__*/React.createElement("span", {
     className: "sr-only"
-  }, "Top of step ", index + 1), (title || !isOnlyCheckpoint) && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "pgn.ProductTour.Checkpoint.position-text",
+    defaultMessage: "Top of step {step}",
+    value: {
+      step: index + 1
+    },
+    description: "Screen-reader message to indicate the user's position in a sequence of checkpoints."
+  })), (title || !isOnlyCheckpoint) && /*#__PURE__*/React.createElement("div", {
     className: "pgn__checkpoint-header"
   }, /*#__PURE__*/React.createElement(CheckpointTitle, null, title), /*#__PURE__*/React.createElement(CheckpointBreadcrumbs, {
     currentIndex: index,

package/dist/ProductTour/Checkpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkpoint.js","names":["React","useEffect","useState","useMediaQuery","PropTypes","createPopper","breakpoints","CheckpointActionRow","CheckpointBody","CheckpointBreadcrumbs","CheckpointTitle","Checkpoint","forwardRef","_ref","ref","body","index","placement","target","title","totalCheckpoints","props","_objectWithoutProperties","_excluded","checkpointVisible","setCheckpointVisible","isMobile","maxWidth","small","targetElement","document","querySelector","checkpoint","checkpointPopper","modifiers","name","options","padding","offset","tetherOffset","forceUpdate","targetOffset","getBoundingClientRect","top","bottom","global","innerHeight","includes","scrollTo","behavior","button","focus","isLastCheckpoint","isOnlyCheckpoint","createElement","id","className","role","style","visibility","pointerEvents","currentIndex","_extends","defaultProps","advanceButtonText","dismissButtonText","endButtonText","showDismissButton","undefined","propTypes","node","number","isRequired","onAdvance","func","onDismiss","onEnd","oneOf","string","bool"],"sources":["../../src/ProductTour/Checkpoint.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { useMediaQuery } from 'react-responsive';\nimport PropTypes from 'prop-types';\nimport { createPopper } from '@popperjs/core';\n\nimport breakpoints from '../utils/breakpoints';\n\nimport CheckpointActionRow from './CheckpointActionRow';\nimport CheckpointBody from './CheckpointBody';\nimport CheckpointBreadcrumbs from './CheckpointBreadcrumbs';\nimport CheckpointTitle from './CheckpointTitle';\n\nconst Checkpoint = React.forwardRef(({\n  body,\n  index,\n  placement,\n  target,\n  title,\n  totalCheckpoints,\n  ...props\n}, ref) => {\n  const [checkpointVisible, setCheckpointVisible] = useState(false);\n  const isMobile = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });\n\n  useEffect(() => {\n    const targetElement = document.querySelector(target);\n    const checkpoint = document.querySelector('#pgn__checkpoint');\n    if (targetElement && checkpoint) {\n      // Use the Popper library to translate the Checkpoint to its target's coordinates\n      const checkpointPopper = createPopper(targetElement, checkpoint, {\n        placement: isMobile ? 'top' : placement,\n        modifiers: [\n          {\n            name: 'arrow',\n            options: {\n              padding: 25,\n            },\n          },\n          {\n            name: 'offset',\n            options: {\n              offset: [0, 20],\n            },\n          },\n          {\n            name: 'preventOverflow',\n            options: {\n              padding: 20,\n              tetherOffset: 35,\n            },\n          },\n        ],\n      });\n      setCheckpointVisible(true);\n      if (checkpointPopper) {\n        checkpointPopper.forceUpdate();\n      }\n    }\n  }, [target, isMobile, placement]);\n\n  useEffect(() => {\n    if (checkpointVisible) {\n      // Scroll the Checkpoint into view once its rendered\n      const targetElement = document.querySelector(target);\n      let targetOffset = targetElement.getBoundingClientRect().top;\n      if ((targetOffset < 0) || (targetElement.getBoundingClientRect().bottom > global.innerHeight)) {\n        if (placement.includes('top')) {\n          if (targetOffset < 0) {\n            targetOffset *= -1;\n          }\n          targetOffset -= 280;\n        } else {\n          targetOffset -= 80;\n        }\n\n        global.scrollTo({\n          top: targetOffset, behavior: 'smooth',\n        });\n      }\n\n      const button = document.querySelector('.pgn__checkpoint-button_advance');\n      button.focus();\n    }\n  }, [target, checkpointVisible, placement]);\n\n  const isLastCheckpoint = index + 1 === totalCheckpoints;\n  const isOnlyCheckpoint = totalCheckpoints === 1;\n\n  return (\n    <div\n      id=\"pgn__checkpoint\"\n      className=\"pgn__checkpoint\"\n      aria-labelledby=\"pgn__checkpoint-title\"\n      ref={ref}\n      role=\"dialog\"\n      style={{ visibility: checkpointVisible ? 'visible' : 'hidden', pointerEvents: checkpointVisible ? 'auto' : 'none' }}\n    >\n      {/* This text is not translated due to Paragon's lack of i18n support */}\n      <span className=\"sr-only\">Top of step {index + 1}</span>\n      {(title || !isOnlyCheckpoint) && (\n        <div className=\"pgn__checkpoint-header\">\n          <CheckpointTitle>{title}</CheckpointTitle>\n          <CheckpointBreadcrumbs currentIndex={index} totalCheckpoints={totalCheckpoints} />\n        </div>\n      )}\n      <CheckpointBody>{body}</CheckpointBody>\n      <CheckpointActionRow\n        isLastCheckpoint={isLastCheckpoint}\n        index={index}\n        {...props}\n      />\n      <div id=\"pgn__checkpoint-arrow\" data-popper-arrow />\n      {/* This text is not translated due to Paragon's lack of i18n support */}\n      <span className=\"sr-only\">Bottom of step {index + 1}</span>\n    </div>\n  );\n});\n\nCheckpoint.defaultProps = {\n  advanceButtonText: null,\n  body: null,\n  dismissButtonText: null,\n  endButtonText: null,\n  placement: 'top',\n  title: null,\n  showDismissButton: undefined,\n};\n\nCheckpoint.propTypes = {\n  /** The text displayed on the button used to advance the tour for the given Checkpoint. */\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  dismissButtonText: PropTypes.node,\n  /** The text displayed on the button used to end the tour for the given Checkpoint. */\n  endButtonText: PropTypes.node,\n  /** The current index of the given Checkpoint */\n  index: PropTypes.number.isRequired,\n  /** A function that runs when triggering the `onClick` event of the advance\n   * button for the given Checkpoint. */\n  onAdvance: PropTypes.func.isRequired,\n  /** A function that runs when triggering the `onClick` event of the dismiss\n   * button for the given Checkpoint. */\n  onDismiss: PropTypes.func.isRequired,\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.isRequired,\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  /** The total number of Checkpoints in a tour */\n  totalCheckpoints: PropTypes.number.isRequired,\n  /** Enforces visibility of the dismiss button under all circumstances */\n  showDismissButton: PropTypes.bool,\n};\n\nexport default Checkpoint;\n"],"mappings":"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"}
+{"version":3,"file":"Checkpoint.js","names":["React","useEffect","useState","useMediaQuery","PropTypes","createPopper","FormattedMessage","breakpoints","CheckpointActionRow","CheckpointBody","CheckpointBreadcrumbs","CheckpointTitle","Checkpoint","forwardRef","_ref","ref","body","index","placement","target","title","totalCheckpoints","props","_objectWithoutProperties","_excluded","checkpointVisible","setCheckpointVisible","isMobile","maxWidth","small","targetElement","document","querySelector","checkpoint","checkpointPopper","modifiers","name","options","padding","offset","tetherOffset","forceUpdate","targetOffset","getBoundingClientRect","top","bottom","global","innerHeight","includes","scrollTo","behavior","button","focus","isLastCheckpoint","isOnlyCheckpoint","createElement","id","className","role","style","visibility","pointerEvents","defaultMessage","value","step","description","currentIndex","_extends","defaultProps","advanceButtonText","dismissButtonText","endButtonText","showDismissButton","undefined","propTypes","node","number","isRequired","onAdvance","func","onDismiss","onEnd","oneOf","string","bool"],"sources":["../../src/ProductTour/Checkpoint.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { useMediaQuery } from 'react-responsive';\nimport PropTypes from 'prop-types';\nimport { createPopper } from '@popperjs/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport breakpoints from '../utils/breakpoints';\n\nimport CheckpointActionRow from './CheckpointActionRow';\nimport CheckpointBody from './CheckpointBody';\nimport CheckpointBreadcrumbs from './CheckpointBreadcrumbs';\nimport CheckpointTitle from './CheckpointTitle';\n\nconst Checkpoint = React.forwardRef(({\n  body,\n  index,\n  placement,\n  target,\n  title,\n  totalCheckpoints,\n  ...props\n}, ref) => {\n  const [checkpointVisible, setCheckpointVisible] = useState(false);\n  const isMobile = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });\n\n  useEffect(() => {\n    const targetElement = document.querySelector(target);\n    const checkpoint = document.querySelector('#pgn__checkpoint');\n    if (targetElement && checkpoint) {\n      // Use the Popper library to translate the Checkpoint to its target's coordinates\n      const checkpointPopper = createPopper(targetElement, checkpoint, {\n        placement: isMobile ? 'top' : placement,\n        modifiers: [\n          {\n            name: 'arrow',\n            options: {\n              padding: 25,\n            },\n          },\n          {\n            name: 'offset',\n            options: {\n              offset: [0, 20],\n            },\n          },\n          {\n            name: 'preventOverflow',\n            options: {\n              padding: 20,\n              tetherOffset: 35,\n            },\n          },\n        ],\n      });\n      setCheckpointVisible(true);\n      if (checkpointPopper) {\n        checkpointPopper.forceUpdate();\n      }\n    }\n  }, [target, isMobile, placement]);\n\n  useEffect(() => {\n    if (checkpointVisible) {\n      // Scroll the Checkpoint into view once its rendered\n      const targetElement = document.querySelector(target);\n      let targetOffset = targetElement.getBoundingClientRect().top;\n      if ((targetOffset < 0) || (targetElement.getBoundingClientRect().bottom > global.innerHeight)) {\n        if (placement.includes('top')) {\n          if (targetOffset < 0) {\n            targetOffset *= -1;\n          }\n          targetOffset -= 280;\n        } else {\n          targetOffset -= 80;\n        }\n\n        global.scrollTo({\n          top: targetOffset, behavior: 'smooth',\n        });\n      }\n\n      const button = document.querySelector('.pgn__checkpoint-button_advance');\n      button.focus();\n    }\n  }, [target, checkpointVisible, placement]);\n\n  const isLastCheckpoint = index + 1 === totalCheckpoints;\n  const isOnlyCheckpoint = totalCheckpoints === 1;\n\n  return (\n    <div\n      id=\"pgn__checkpoint\"\n      className=\"pgn__checkpoint\"\n      aria-labelledby=\"pgn__checkpoint-title\"\n      ref={ref}\n      role=\"dialog\"\n      style={{ visibility: checkpointVisible ? 'visible' : 'hidden', pointerEvents: checkpointVisible ? 'auto' : 'none' }}\n    >\n      <span className=\"sr-only\">\n        <FormattedMessage\n          id=\"pgn.ProductTour.Checkpoint.position-text\"\n          defaultMessage=\"Top of step {step}\"\n          value={{ step: index + 1 }}\n          description=\"Screen-reader message to indicate the user's position in a sequence of checkpoints.\"\n        />\n      </span>\n      {(title || !isOnlyCheckpoint) && (\n        <div className=\"pgn__checkpoint-header\">\n          <CheckpointTitle>{title}</CheckpointTitle>\n          <CheckpointBreadcrumbs currentIndex={index} totalCheckpoints={totalCheckpoints} />\n        </div>\n      )}\n      <CheckpointBody>{body}</CheckpointBody>\n      <CheckpointActionRow\n        isLastCheckpoint={isLastCheckpoint}\n        index={index}\n        {...props}\n      />\n      <div id=\"pgn__checkpoint-arrow\" data-popper-arrow />\n      {/* This text is not translated due to Paragon's lack of i18n support */}\n      <span className=\"sr-only\">Bottom of step {index + 1}</span>\n    </div>\n  );\n});\n\nCheckpoint.defaultProps = {\n  advanceButtonText: null,\n  body: null,\n  dismissButtonText: null,\n  endButtonText: null,\n  placement: 'top',\n  title: null,\n  showDismissButton: undefined,\n};\n\nCheckpoint.propTypes = {\n  /** The text displayed on the button used to advance the tour for the given Checkpoint. */\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  dismissButtonText: PropTypes.node,\n  /** The text displayed on the button used to end the tour for the given Checkpoint. */\n  endButtonText: PropTypes.node,\n  /** The current index of the given Checkpoint */\n  index: PropTypes.number.isRequired,\n  /** A function that runs when triggering the `onClick` event of the advance\n   * button for the given Checkpoint. */\n  onAdvance: PropTypes.func.isRequired,\n  /** A function that runs when triggering the `onClick` event of the dismiss\n   * button for the given Checkpoint. */\n  onDismiss: PropTypes.func.isRequired,\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.isRequired,\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  /** The total number of Checkpoints in a tour */\n  totalCheckpoints: PropTypes.number.isRequired,\n  /** Enforces visibility of the dismiss button under all circumstances */\n  showDismissButton: PropTypes.bool,\n};\n\nexport default Checkpoint;\n"],"mappings":"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"}

package/dist/i18n/messages/ar.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "رفع {filename} جارٍ.",
   "pgn.FormAutosuggest.iconButtonClosed": "إغلاق قائمة الخيارات",
   "pgn.FormAutosuggest.iconButtonOpened": "فتح قائمة الخيارات",
-  "pgn.Toast.closeLabel": "إغلاق "
+  "pgn.Toast.closeLabel": "إغلاق ",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/dist/i18n/messages/ca.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close"
+  "pgn.Toast.closeLabel": "Close",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/dist/i18n/messages/es_419.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Subiendo {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
   "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
-  "pgn.Toast.closeLabel": "Cerrar"
+  "pgn.Toast.closeLabel": "Cerrar",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/dist/i18n/messages/es_AR.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Subiendo {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
   "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
-  "pgn.Toast.closeLabel": "Cerrar"
+  "pgn.Toast.closeLabel": "Cerrar",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/dist/i18n/messages/es_ES.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Subiendo {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
   "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
-  "pgn.Toast.closeLabel": "Cerrar"
+  "pgn.Toast.closeLabel": "Cerrar",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/dist/i18n/messages/fr.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close"
+  "pgn.Toast.closeLabel": "Close",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/dist/i18n/messages/he.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close"
+  "pgn.Toast.closeLabel": "Close",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/dist/i18n/messages/id.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close"
+  "pgn.Toast.closeLabel": "Close",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/dist/i18n/messages/it_IT.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Caricamento {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Chiudi"
+  "pgn.Toast.closeLabel": "Chiudi",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/dist/i18n/messages/ko_KR.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close"
+  "pgn.Toast.closeLabel": "Close",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/dist/i18n/messages/pl.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Zamknij"
+  "pgn.Toast.closeLabel": "Zamknij",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/dist/i18n/messages/pt_BR.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close"
+  "pgn.Toast.closeLabel": "Close",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/dist/i18n/messages/pt_PT.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Carregando {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Fechar o menu de opções",
   "pgn.FormAutosuggest.iconButtonOpened": "Abrir o menu de opções",
-  "pgn.Toast.closeLabel": "Fechar"
+  "pgn.Toast.closeLabel": "Fechar",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/dist/i18n/messages/ru.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close"
+  "pgn.Toast.closeLabel": "Close",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/dist/i18n/messages/th.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close"
+  "pgn.Toast.closeLabel": "Close",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/dist/i18n/messages/tr_TR.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "{filename} yükleniyor.",
   "pgn.FormAutosuggest.iconButtonClosed": "Seçenekler menüsünü kapat",
   "pgn.FormAutosuggest.iconButtonOpened": "Seçenekler menüsünü aç",
-  "pgn.Toast.closeLabel": "Kapat"
+  "pgn.Toast.closeLabel": "Kapat",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/dist/i18n/messages/uk.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close"
+  "pgn.Toast.closeLabel": "Close",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/dist/i18n/messages/zh_CN.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close"
+  "pgn.Toast.closeLabel": "Close",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "21.6.1",
+  "version": "21.7.0",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -41,7 +41,7 @@
     "example:start:with-theme": "npm run start:with-theme --workspace=example",
     "generate-changelog": "node generate-changelog.js",
     "i18n_compile": "formatjs compile-folder --format transifex ./src/i18n/messages ./src/i18n/messages",
-    "i18n_extract": "formatjs extract 'src/**/*.{jsx,js,tsx,ts}' --out-file ./src/i18n/transifex_input.json --format transifex",
+    "i18n_extract": "formatjs extract 'src/**/*.{jsx,js,tsx,ts}' --out-file ./src/i18n/transifex_input.json --ignore='**/*.d.ts' --format transifex",
     "type-check": "tsc --noEmit && tsc --project www --noEmit",
     "type-check:watch": "npm run type-check -- --watch",
     "build-types": "tsc --emitDeclarationOnly",

package/src/ProductTour/Checkpoint.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import PropTypes from 'prop-types';
 import { createPopper } from '@popperjs/core';
+import { FormattedMessage } from 'react-intl';
 
 import breakpoints from '../utils/breakpoints';
 
@@ -95,8 +96,14 @@ const Checkpoint = React.forwardRef(({
       role="dialog"
       style={{ visibility: checkpointVisible ? 'visible' : 'hidden', pointerEvents: checkpointVisible ? 'auto' : 'none' }}
     >
-      {/* This text is not translated due to Paragon's lack of i18n support */}
-      <span className="sr-only">Top of step {index + 1}</span>
+      <span className="sr-only">
+        <FormattedMessage
+          id="pgn.ProductTour.Checkpoint.position-text"
+          defaultMessage="Top of step {step}"
+          value={{ step: index + 1 }}
+          description="Screen-reader message to indicate the user's position in a sequence of checkpoints."
+        />
+      </span>
       {(title || !isOnlyCheckpoint) && (
         <div className="pgn__checkpoint-header">
           <CheckpointTitle>{title}</CheckpointTitle>

package/src/ProductTour/Checkpoint.test.jsx

@@ -1,6 +1,7 @@
 import React from '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';
 
@@ -24,7 +25,7 @@ describe('Checkpoint', () => {
   describe('second Checkpoint in Tour', () => {
     beforeEach(() => {
       render(
-        <>
+        <IntlProvider locale="en" messages={{}}>
           <div id="target-element">...</div>
           <Checkpoint
             advanceButtonText="Next"
@@ -39,7 +40,7 @@ describe('Checkpoint', () => {
             title="Checkpoint title"
             totalCheckpoints={5}
           />
-        </>,
+        </IntlProvider>,
       );
     });
 
@@ -75,7 +76,7 @@ describe('Checkpoint', () => {
   describe('last Checkpoint in Tour', () => {
     beforeEach(() => {
       render(
-        <>
+        <IntlProvider locale="en" messages={{}}>
           <div id="#last-element" />
           <Checkpoint
             advanceButtonText="Next"
@@ -90,7 +91,7 @@ describe('Checkpoint', () => {
             title="Checkpoint title"
             totalCheckpoints={5}
           />
-        </>,
+        </IntlProvider>,
       );
     });
 
@@ -108,7 +109,7 @@ describe('Checkpoint', () => {
   describe('only one Checkpoint in Tour', () => {
     beforeEach(() => {
       render(
-        <>
+        <IntlProvider locale="en" messages={{}}>
           <div id="#target-element" />
           <Checkpoint
             advanceButtonText="Next"
@@ -123,7 +124,7 @@ describe('Checkpoint', () => {
             title="Checkpoint title"
             totalCheckpoints={1}
           />
-        </>,
+        </IntlProvider>,
       );
     });
 
@@ -140,7 +141,7 @@ describe('Checkpoint', () => {
   describe('only one Checkpoint in Tour and showDismissButton set to true', () => {
     it('it renders dismiss button and end button', () => {
       render(
-        <>
+        <IntlProvider locale="en" messages={{}}>
           <div id="#target-element" />
           <Checkpoint
             advanceButtonText="Next"
@@ -156,7 +157,7 @@ describe('Checkpoint', () => {
             totalCheckpoints={1}
             showDismissButton
           />
-        </>,
+        </IntlProvider>,
       );
       expect(screen.getByText('Dismiss', { selector: 'button' })).toBeInTheDocument();
       expect(screen.getByText('End', { selector: 'button' })).toBeInTheDocument();

package/src/ProductTour/ProductTour.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { IntlProvider } from 'react-intl';
 
 import * as popper from '@popperjs/core';
 
@@ -85,17 +86,20 @@ describe('<ProductTour />', () => {
     popperMock.mockReset();
   });
 
+  // eslint-disable-next-line react/prop-types
+  function ProductTourWrapper({ tours }) {
+    return (
+      <IntlProvider locale="en" messages={{}}>
+        <ProductTour tours={tours} />
+        {targets}
+      </IntlProvider>
+    );
+  }
+
   describe('one enabled tour', () => {
     describe('with default settings', () => {
       it('renders checkpoint with correct title, body, and breadcrumbs', () => {
-        render(
-          <>
-            <ProductTour
-              tours={[tourData]}
-            />
-            {targets}
-          </>,
-        );
+        render(<ProductTourWrapper tours={[tourData]} />);
 
         expect(screen.getByRole('dialog', { name: 'Checkpoint 1' })).toBeInTheDocument();
         expect(screen.getByText('Checkpoint 1')).toBeInTheDocument();
@@ -103,14 +107,7 @@ describe('<ProductTour />', () => {
       });
 
       it('onClick of advance button advances to next checkpoint', async () => {
-        const { rerender } = render(
-          <>
-            <ProductTour
-              tours={[tourData]}
-            />
-            {targets}
-          </>,
-        );
+        const { rerender } = render(<ProductTourWrapper tours={[tourData]} />);
         // Verify the first Checkpoint has rendered
         expect(screen.getByRole('heading', { name: 'Checkpoint 1' })).toBeInTheDocument();
 
@@ -120,14 +117,7 @@ describe('<ProductTour />', () => {
           await userEvent.click(advanceButton);
         });
 
-        rerender(
-          <>
-            <ProductTour
-              tours={[tourData]}
-            />
-            {targets}
-          </>,
-        );
+        rerender(<ProductTourWrapper tours={[tourData]} />);
 
         const heading = screen.getByRole('heading', { name: 'Checkpoint 2' });
 
@@ -136,14 +126,7 @@ describe('<ProductTour />', () => {
       });
 
       it('onClick of dismiss button disables tour', async () => {
-        render(
-          <>
-            <ProductTour
-              tours={[tourData]}
-            />
-            {targets}
-          </>,
-        );
+        render(<ProductTourWrapper tours={[tourData]} />);
 
         // Verify a Checkpoint has rendered
         expect(screen.getByRole('dialog', { name: 'Checkpoint 1' })).toBeInTheDocument();
@@ -161,14 +144,7 @@ describe('<ProductTour />', () => {
       });
 
       it('onClick of end button disables tour', async () => {
-        const { rerender } = render(
-          <>
-            <ProductTour
-              tours={[tourData]}
-            />
-            {targets}
-          </>,
-        );
+        const { rerender } = render(<ProductTourWrapper tours={[tourData]} />);
 
         // Verify a Checkpoint has rendered
         expect(screen.getByRole('dialog', { name: 'Checkpoint 1' })).toBeInTheDocument();
@@ -184,28 +160,14 @@ describe('<ProductTour />', () => {
           await userEvent.click(advanceButton2);
         });
 
-        rerender(
-          <>
-            <ProductTour
-              tours={[tourData]}
-            />
-            {targets}
-          </>,
-        );
+        rerender(<ProductTourWrapper tours={[tourData]} />);
 
         const advanceButton3 = screen.getByRole('button', { name: 'Override advance' });
         await act(async () => {
           await userEvent.click(advanceButton3);
         });
 
-        rerender(
-          <>
-            <ProductTour
-              tours={[tourData]}
-            />
-            {targets}
-          </>,
-        );
+        rerender(<ProductTourWrapper tours={[tourData]} />);
 
         // Click the end button
         const endButton = screen.getByRole('button', { name: 'End' });
@@ -220,14 +182,7 @@ describe('<ProductTour />', () => {
       });
 
       it('onClick of escape key disables tour', async () => {
-        render(
-          <>
-            <ProductTour
-              tours={[tourData]}
-            />
-            {targets}
-          </>,
-        );
+        render(<ProductTourWrapper tours={[tourData]} />);
 
         // Verify a Checkpoint has rendered
         expect(screen.getByRole('dialog', { name: 'Checkpoint 1' })).toBeInTheDocument();
@@ -283,27 +238,13 @@ describe('<ProductTour />', () => {
         ],
       };
       it('renders correct checkpoint on index override', () => {
-        render(
-          <>
-            <ProductTour
-              tours={[overrideTourData]}
-            />
-            {targets}
-          </>,
-        );
+        render(<ProductTourWrapper tours={[overrideTourData]} />);
         expect(screen.getByRole('dialog', { name: 'Checkpoint 3' })).toBeInTheDocument();
         expect(screen.getByRole('heading', { name: 'Checkpoint 3' })).toBeInTheDocument();
       });
 
       it('applies override for advanceButtonText', async () => {
-        const { rerender } = render(
-          <>
-            <ProductTour
-              tours={[overrideTourData]}
-            />
-            {targets}
-          </>,
-        );
+        const { rerender } = render(<ProductTourWrapper tours={[overrideTourData]} />);
         expect(screen.getByRole('button', { name: 'Override advance' })).toBeInTheDocument();
         const advanceButton = screen.getByRole('button', { name: 'Override advance' });
         await act(async () => {
@@ -312,37 +253,16 @@ describe('<ProductTour />', () => {
         expect(screen.queryByRole('button', { name: 'Override advance' })).not.toBeInTheDocument();
         expect(customOnAdvance).toHaveBeenCalledTimes(1);
 
-        rerender(
-          <>
-            <ProductTour
-              tours={[overrideTourData]}
-            />
-            {targets}
-          </>,
-        );
+        rerender(<ProductTourWrapper tours={[overrideTourData]} />);
 
         expect(screen.getByText('Checkpoint 4')).toBeInTheDocument();
       });
       it('applies override for dismissButtonText', () => {
-        render(
-          <>
-            <ProductTour
-              tours={[overrideTourData]}
-            />
-            {targets}
-          </>,
-        );
+        render(<ProductTourWrapper tours={[overrideTourData]} />);
         expect(screen.getByRole('button', { name: 'Override dismiss' })).toBeInTheDocument();
       });
       it('calls customHandleDismiss onClick of dismiss button', async () => {
-        render(
-          <>
-            <ProductTour
-              tours={[overrideTourData]}
-            />
-            {targets}
-          </>,
-        );
+        render(<ProductTourWrapper tours={[overrideTourData]} />);
         const dismissButton = screen.getByRole('button', { name: 'Override dismiss' });
         await act(async () => {
           await userEvent.click(dismissButton);
@@ -351,27 +271,13 @@ describe('<ProductTour />', () => {
         expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
       });
       it('calls customHandleOnEnd onClick of end button', async () => {
-        const { rerender } = render(
-          <>
-            <ProductTour
-              tours={[overrideTourData]}
-            />
-            {targets}
-          </>,
-        );
+        const { rerender } = render(<ProductTourWrapper tours={[overrideTourData]} />);
         const advanceButton = screen.getByRole('button', { name: 'Override advance' });
         await act(async () => {
           await userEvent.click(advanceButton);
         });
 
-        rerender(
-          <>
-            <ProductTour
-              tours={[overrideTourData]}
-            />
-            {targets}
-          </>,
-        );
+        rerender(<ProductTourWrapper tours={[overrideTourData]} />);
 
         expect(screen.getByText('Checkpoint 4')).toBeInTheDocument();
         const endButton = screen.getByRole('button', { name: 'Override end' });
@@ -383,14 +289,7 @@ describe('<ProductTour />', () => {
         expect(screen.queryByText('Checkpoint 4')).not.toBeInTheDocument();
       });
       it('calls onEscape on escape button key press', async () => {
-        render(
-          <>
-            <ProductTour
-              tours={[overrideTourData]}
-            />
-            {targets}
-          </>,
-        );
+        render(<ProductTourWrapper tours={[overrideTourData]} />);
         expect(screen.getByText('Checkpoint 3')).toBeInTheDocument();
         const container = screen.getByRole('dialog');
         container.focus();
@@ -421,14 +320,7 @@ describe('<ProductTour />', () => {
           ],
         };
 
-        render(
-          <>
-            <ProductTour
-              tours={[badTourData]}
-            />
-            {targets}
-          </>,
-        );
+        render(<ProductTourWrapper tours={[badTourData]} />);
 
         expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
       });
@@ -456,14 +348,7 @@ describe('<ProductTour />', () => {
           ],
         };
 
-        render(
-          <>
-            <ProductTour
-              tours={[badTourData]}
-            />
-            {targets}
-          </>,
-        );
+        render(<ProductTourWrapper tours={[badTourData]} />);
 
         expect(screen.queryByRole('dialog', { name: 'Checkpoint 1' })).not.toBeInTheDocument();
         expect(screen.getByRole('dialog', { name: 'Checkpoint 2' })).toBeInTheDocument();
@@ -491,14 +376,7 @@ describe('<ProductTour />', () => {
         ],
       };
 
-      render(
-        <>
-          <ProductTour
-            tours={[disabledTourData, tourData, secondEnabledTourData]}
-          />
-          {targets}
-        </>,
-      );
+      render(<ProductTourWrapper tours={[disabledTourData, tourData, secondEnabledTourData]} />);
 
       expect(screen.getByText('Checkpoint 1')).toBeInTheDocument();
       expect(screen.queryByText('Second enabled tour')).not.toBeInTheDocument();
@@ -507,14 +385,7 @@ describe('<ProductTour />', () => {
 
   describe('disabled tour', () => {
     it('does not render', () => {
-      render(
-        <>
-          <ProductTour
-            tours={[disabledTourData]}
-          />
-          {targets}
-        </>,
-      );
+      render(<ProductTourWrapper tours={[disabledTourData]} />);
 
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
     });

package/src/i18n/messages/ar.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "رفع {filename} جارٍ.",
   "pgn.FormAutosuggest.iconButtonClosed": "إغلاق قائمة الخيارات",
   "pgn.FormAutosuggest.iconButtonOpened": "فتح قائمة الخيارات",
-  "pgn.Toast.closeLabel": "إغلاق "
+  "pgn.Toast.closeLabel": "إغلاق ",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/src/i18n/messages/ca.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close"
+  "pgn.Toast.closeLabel": "Close",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/src/i18n/messages/es_419.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Subiendo {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
   "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
-  "pgn.Toast.closeLabel": "Cerrar"
+  "pgn.Toast.closeLabel": "Cerrar",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/src/i18n/messages/es_AR.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Subiendo {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
   "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
-  "pgn.Toast.closeLabel": "Cerrar"
+  "pgn.Toast.closeLabel": "Cerrar",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/src/i18n/messages/es_ES.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Subiendo {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
   "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
-  "pgn.Toast.closeLabel": "Cerrar"
+  "pgn.Toast.closeLabel": "Cerrar",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/src/i18n/messages/fr.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close"
+  "pgn.Toast.closeLabel": "Close",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/src/i18n/messages/he.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close"
+  "pgn.Toast.closeLabel": "Close",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/src/i18n/messages/id.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close"
+  "pgn.Toast.closeLabel": "Close",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/src/i18n/messages/it_IT.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Caricamento {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Chiudi"
+  "pgn.Toast.closeLabel": "Chiudi",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/src/i18n/messages/ko_KR.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close"
+  "pgn.Toast.closeLabel": "Close",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/src/i18n/messages/pl.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Zamknij"
+  "pgn.Toast.closeLabel": "Zamknij",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/src/i18n/messages/pt_BR.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close"
+  "pgn.Toast.closeLabel": "Close",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/src/i18n/messages/pt_PT.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Carregando {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Fechar o menu de opções",
   "pgn.FormAutosuggest.iconButtonOpened": "Abrir o menu de opções",
-  "pgn.Toast.closeLabel": "Fechar"
+  "pgn.Toast.closeLabel": "Fechar",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/src/i18n/messages/ru.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close"
+  "pgn.Toast.closeLabel": "Close",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/src/i18n/messages/th.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close"
+  "pgn.Toast.closeLabel": "Close",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/src/i18n/messages/tr_TR.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "{filename} yükleniyor.",
   "pgn.FormAutosuggest.iconButtonClosed": "Seçenekler menüsünü kapat",
   "pgn.FormAutosuggest.iconButtonOpened": "Seçenekler menüsünü aç",
-  "pgn.Toast.closeLabel": "Kapat"
+  "pgn.Toast.closeLabel": "Kapat",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/src/i18n/messages/uk.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close"
+  "pgn.Toast.closeLabel": "Close",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }

package/src/i18n/messages/zh_CN.json

@@ -27,5 +27,6 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close"
+  "pgn.Toast.closeLabel": "Close",
+  "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
 }