@openedx/paragon 23.6.0 → 23.7.0

package/dist/Alert/index.scss

@@ -15,10 +15,15 @@
   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;
 
   @include border-radius(var(--pgn-size-alert-border-radius));
   @include pgn-box-shadow(1, "down");
 
+  &:has(.alert-heading:not(:only-child)) {
+    align-items: start;
+  }
+
   .alert-message-content > :last-child {
     margin-bottom: 0;
   }

package/dist/Button/_mixins.scss

@@ -1,7 +1,10 @@
-// OVERRIDE FROM BOOTSTRAP
-// No changes made. We do this to keep all button related mixins together,
 //
+// Includes common mixins related to button styles.
+//
+
 // Button sizes
+// OVERRIDE FROM BOOTSTRAP
+// No changes made. We do this to keep all button related mixins together,
 @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $button-border-radius) {
   padding: $padding-y $padding-x;
 
@@ -12,3 +15,49 @@
   // Manually declare to provide an override to the browser default
   @include border-radius($button-border-radius, 0);
 }
+
+// Mixin for button states that affect border radius
+@mixin button-border-radius-0($side) {
+  @if $side == 'right' {
+    @include border-right-radius(0);
+  }
+
+  @if $side == 'left' {
+    @include border-left-radius(0);
+  }
+  
+  // Handle pseudo-classes
+  &.btn:not(:disabled, .disabled):focus,
+  &.btn:not(:disabled, .disabled):focus::before {
+    @if $side == 'left' {
+      @include border-left-radius(0);
+    }
+
+    @if $side == 'right' {
+      @include border-right-radius(0);
+    }
+  }
+  
+  &.btn:not(:disabled, .disabled):active,
+  &.btn:not(:disabled, .disabled):active::before {
+    @if $side == 'left' {
+      @include border-left-radius(0);
+    }
+
+    @if $side == 'right' {
+      @include border-right-radius(0);
+    }
+  }
+  
+  // Handle .active class
+  &.btn:not(:disabled, .disabled).active,
+  &.btn:not(:disabled, .disabled).active::before {
+    @if $side == 'right' {
+      @include border-right-radius(0);
+    }
+
+    @if $side == 'left' {
+      @include border-left-radius(0);
+    }
+  }
+}

package/dist/Button/button-group.scss

@@ -15,7 +15,7 @@
     &:focus,
     &:active,
     &.active {
-      z-index: 1;
+      z-index: 2;
     }
   }
 }
@@ -36,14 +36,17 @@
     margin-left: calc(var(--pgn-size-btn-border-width) * -1);
   }
 
+  // Right border radius for non-last buttons
+  > .btn:not(:last-child, .dropdown-toggle, :first-child),
   > .btn:not(:last-child, .dropdown-toggle),
   > .btn-group:not(:last-child) > .btn {
-    @include border-right-radius(0);
+    @include button-border-radius-0('right');
   }
 
-  > .btn:not(:first-child),
+  // Left border radius for non-first buttons
+  > .btn:not(:first-child, .dropdown-toggle),
   > .btn-group:not(:first-child) > .btn {
-    @include border-left-radius(0);
+    @include button-border-radius-0('left');
   }
 }
 

package/dist/ProductTour/Checkpoint.js

@@ -6,13 +6,15 @@ import { FormattedMessage } from 'react-intl';
 import breakpoints from '../utils/breakpoints';
 import CheckpointActionRow from './CheckpointActionRow';
 import CheckpointBody from './CheckpointBody';
-import CheckpointBreadcrumbs from './CheckpointBreadcrumbs';
-import CheckpointTitle from './CheckpointTitle';
+import CheckpointHeader from './CheckpointHeader';
 import messages from './messages';
 const Checkpoint = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     body,
+    dismissAltText,
     index,
+    onBack,
+    onDismiss,
     placement,
     target,
     title,
@@ -79,7 +81,6 @@ const Checkpoint = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
   }, [target, checkpointVisible, placement]);
   const isLastCheckpoint = index + 1 === totalCheckpoints;
-  const isOnlyCheckpoint = totalCheckpoints === 1;
   return /*#__PURE__*/React.createElement("div", {
     id: "pgn__checkpoint",
     className: "pgn__checkpoint",
@@ -97,12 +98,15 @@ const Checkpoint = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     values: {
       step: index + 1
     }
-  })), (title || !isOnlyCheckpoint) && /*#__PURE__*/React.createElement("div", {
-    className: "pgn__checkpoint-header"
-  }, /*#__PURE__*/React.createElement(CheckpointTitle, null, title), /*#__PURE__*/React.createElement(CheckpointBreadcrumbs, {
-    currentIndex: index,
+  })), /*#__PURE__*/React.createElement(CheckpointHeader, {
+    dismissAltText: dismissAltText,
+    index: index,
+    onDismiss: onDismiss,
+    title: title,
     totalCheckpoints: totalCheckpoints
-  })), /*#__PURE__*/React.createElement(CheckpointBody, null, body), /*#__PURE__*/React.createElement(CheckpointActionRow, {
+  }), /*#__PURE__*/React.createElement(CheckpointBody, null, body), /*#__PURE__*/React.createElement(CheckpointActionRow, {
+    onBack: onBack,
+    onDismiss: onDismiss,
     isLastCheckpoint: isLastCheckpoint,
     index: index,
     ...props
@@ -120,20 +124,22 @@ const Checkpoint = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 Checkpoint.defaultProps = {
   advanceButtonText: null,
+  backButtonText: null,
   body: null,
-  dismissButtonText: null,
+  dismissAltText: null,
   endButtonText: null,
   placement: 'top',
-  title: null,
-  showDismissButton: undefined
+  title: null
 };
 Checkpoint.propTypes = {
   /** The text displayed on the button used to advance the tour for the given Checkpoint. */
   advanceButtonText: PropTypes.node,
+  /** The text displayed on the button used go back in the tour for the given Checkpoint. */
+  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. */
-  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. */
   endButtonText: PropTypes.node,
   /** The current index of the given Checkpoint */
@@ -141,6 +147,9 @@ Checkpoint.propTypes = {
   /** A function that runs when triggering the `onClick` event of the advance
    * button for the given Checkpoint. */
   onAdvance: PropTypes.func.isRequired,
+  /** A function that runs when triggering the `onBack` event of the back
+   * button for the given Checkpoint. */
+  onBack: PropTypes.func.isRequired,
   /** A function that runs when triggering the `onClick` event of the dismiss
    * button for the given Checkpoint. */
   onDismiss: PropTypes.func.isRequired,
@@ -154,9 +163,7 @@ Checkpoint.propTypes = {
   /** The text displayed in the title of the Checkpoint */
   title: PropTypes.node,
   /** The total number of Checkpoints in a tour */
-  totalCheckpoints: PropTypes.number.isRequired,
-  /** Enforces visibility of the dismiss button under all circumstances */
-  showDismissButton: PropTypes.bool
+  totalCheckpoints: PropTypes.number.isRequired
 };
 export default Checkpoint;
 //# sourceMappingURL=Checkpoint.js.map

package/dist/ProductTour/Checkpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkpoint.js","names":["React","useEffect","useState","useMediaQuery","PropTypes","createPopper","FormattedMessage","breakpoints","CheckpointActionRow","CheckpointBody","CheckpointBreadcrumbs","CheckpointTitle","messages","Checkpoint","forwardRef","_ref","ref","body","index","placement","target","title","totalCheckpoints","props","checkpointVisible","setCheckpointVisible","isMobile","maxWidth","small","targetElement","document","querySelector","checkpoint","checkpointPopper","strategy","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","topPositionText","values","step","currentIndex","bottomPositionText","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';\nimport messages from './messages';\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        strategy: 'fixed',\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          {...messages.topPositionText}\n          values={{ step: index + 1 }}\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      <span className=\"sr-only\">\n        <FormattedMessage\n          {...messages.bottomPositionText}\n          values={{ step: index + 1 }}\n        />\n      </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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","ignoreList":[]}
+{"version":3,"file":"Checkpoint.js","names":["React","useEffect","useState","useMediaQuery","PropTypes","createPopper","FormattedMessage","breakpoints","CheckpointActionRow","CheckpointBody","CheckpointHeader","messages","Checkpoint","forwardRef","_ref","ref","body","dismissAltText","index","onBack","onDismiss","placement","target","title","totalCheckpoints","props","checkpointVisible","setCheckpointVisible","isMobile","maxWidth","small","targetElement","document","querySelector","checkpoint","checkpointPopper","strategy","modifiers","name","options","padding","offset","tetherOffset","forceUpdate","targetOffset","getBoundingClientRect","top","bottom","global","innerHeight","includes","scrollTo","behavior","button","focus","isLastCheckpoint","createElement","id","className","role","style","visibility","pointerEvents","topPositionText","values","step","bottomPositionText","defaultProps","advanceButtonText","backButtonText","endButtonText","propTypes","node","string","number","isRequired","onAdvance","func","onEnd","oneOf"],"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';\nimport CheckpointActionRow from './CheckpointActionRow';\nimport CheckpointBody from './CheckpointBody';\nimport CheckpointHeader from './CheckpointHeader';\nimport messages from './messages';\n\nconst Checkpoint = React.forwardRef(({\n  body,\n  dismissAltText,\n  index,\n  onBack,\n  onDismiss,\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        strategy: 'fixed',\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\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          {...messages.topPositionText}\n          values={{ step: index + 1 }}\n        />\n      </span>\n      <CheckpointHeader\n        dismissAltText={dismissAltText}\n        index={index}\n        onDismiss={onDismiss}\n        title={title}\n        totalCheckpoints={totalCheckpoints}\n      />\n      <CheckpointBody>{body}</CheckpointBody>\n      <CheckpointActionRow\n        onBack={onBack}\n        onDismiss={onDismiss}\n        isLastCheckpoint={isLastCheckpoint}\n        index={index}\n        {...props}\n      />\n      <div id=\"pgn__checkpoint-arrow\" data-popper-arrow />\n      <span className=\"sr-only\">\n        <FormattedMessage\n          {...messages.bottomPositionText}\n          values={{ step: index + 1 }}\n        />\n      </span>\n    </div>\n  );\n});\n\nCheckpoint.defaultProps = {\n  advanceButtonText: null,\n  backButtonText: null,\n  body: null,\n  dismissAltText: null,\n  endButtonText: null,\n  placement: 'top',\n  title: null,\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 on the button used go back in the tour for the given Checkpoint. */\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  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 `onBack` event of the back\n   * button for the given Checkpoint. */\n  onBack: 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};\n\nexport default Checkpoint;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,aAAa,QAAQ,kBAAkB;AAChD,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,gBAAgB,QAAQ,YAAY;AAE7C,OAAOC,WAAW,MAAM,sBAAsB;AAC9C,OAAOC,mBAAmB,MAAM,uBAAuB;AACvD,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,QAAQ,MAAM,YAAY;AAEjC,MAAMC,UAAU,gBAAGZ,KAAK,CAACa,UAAU,CAAC,CAAAC,IAAA,EAWjCC,GAAG,KAAK;EAAA,IAX0B;IACnCC,IAAI;IACJC,cAAc;IACdC,KAAK;IACLC,MAAM;IACNC,SAAS;IACTC,SAAS;IACTC,MAAM;IACNC,KAAK;IACLC,gBAAgB;IAChB,GAAGC;EACL,CAAC,GAAAX,IAAA;EACC,MAAM,CAACY,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGzB,QAAQ,CAAC,KAAK,CAAC;EACjE,MAAM0B,QAAQ,GAAGzB,aAAa,CAAC;IAAE0B,QAAQ,EAAEtB,WAAW,CAACuB,KAAK,CAACD;EAAS,CAAC,CAAC;EAExE5B,SAAS,CAAC,MAAM;IACd,MAAM8B,aAAa,GAAGC,QAAQ,CAACC,aAAa,CAACX,MAAM,CAAC;IACpD,MAAMY,UAAU,GAAGF,QAAQ,CAACC,aAAa,CAAC,kBAAkB,CAAC;IAC7D,IAAIF,aAAa,IAAIG,UAAU,EAAE;MAC/B;MACA,MAAMC,gBAAgB,GAAG9B,YAAY,CAAC0B,aAAa,EAAEG,UAAU,EAAE;QAC/Db,SAAS,EAAEO,QAAQ,GAAG,KAAK,GAAGP,SAAS;QACvCe,QAAQ,EAAE,OAAO;QACjBC,SAAS,EAAE,CACT;UACEC,IAAI,EAAE,OAAO;UACbC,OAAO,EAAE;YACPC,OAAO,EAAE;UACX;QACF,CAAC,EACD;UACEF,IAAI,EAAE,QAAQ;UACdC,OAAO,EAAE;YACPE,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;UAChB;QACF,CAAC,EACD;UACEH,IAAI,EAAE,iBAAiB;UACvBC,OAAO,EAAE;YACPC,OAAO,EAAE,EAAE;YACXE,YAAY,EAAE;UAChB;QACF,CAAC;MAEL,CAAC,CAAC;MACFf,oBAAoB,CAAC,IAAI,CAAC;MAC1B,IAAIQ,gBAAgB,EAAE;QACpBA,gBAAgB,CAACQ,WAAW,CAAC,CAAC;MAChC;IACF;EACF,CAAC,EAAE,CAACrB,MAAM,EAAEM,QAAQ,EAAEP,SAAS,CAAC,CAAC;EAEjCpB,SAAS,CAAC,MAAM;IACd,IAAIyB,iBAAiB,EAAE;MACrB;MACA,MAAMK,aAAa,GAAGC,QAAQ,CAACC,aAAa,CAACX,MAAM,CAAC;MACpD,IAAIsB,YAAY,GAAGb,aAAa,CAACc,qBAAqB,CAAC,CAAC,CAACC,GAAG;MAC5D,IAAKF,YAAY,GAAG,CAAC,IAAMb,aAAa,CAACc,qBAAqB,CAAC,CAAC,CAACE,MAAM,GAAGC,MAAM,CAACC,WAAY,EAAE;QAC7F,IAAI5B,SAAS,CAAC6B,QAAQ,CAAC,KAAK,CAAC,EAAE;UAC7B,IAAIN,YAAY,GAAG,CAAC,EAAE;YACpBA,YAAY,IAAI,CAAC,CAAC;UACpB;UACAA,YAAY,IAAI,GAAG;QACrB,CAAC,MAAM;UACLA,YAAY,IAAI,EAAE;QACpB;QAEAI,MAAM,CAACG,QAAQ,CAAC;UACdL,GAAG,EAAEF,YAAY;UAAEQ,QAAQ,EAAE;QAC/B,CAAC,CAAC;MACJ;MAEA,MAAMC,MAAM,GAAGrB,QAAQ,CAACC,aAAa,CAAC,iCAAiC,CAAC;MACxEoB,MAAM,CAACC,KAAK,CAAC,CAAC;IAChB;EACF,CAAC,EAAE,CAAChC,MAAM,EAAEI,iBAAiB,EAAEL,SAAS,CAAC,CAAC;EAE1C,MAAMkC,gBAAgB,GAAGrC,KAAK,GAAG,CAAC,KAAKM,gBAAgB;EAEvD,oBACExB,KAAA,CAAAwD,aAAA;IACEC,EAAE,EAAC,iBAAiB;IACpBC,SAAS,EAAC,iBAAiB;IAC3B,mBAAgB,uBAAuB;IACvC3C,GAAG,EAAEA,GAAI;IACT4C,IAAI,EAAC,QAAQ;IACbC,KAAK,EAAE;MAAEC,UAAU,EAAEnC,iBAAiB,GAAG,SAAS,GAAG,QAAQ;MAAEoC,aAAa,EAAEpC,iBAAiB,GAAG,MAAM,GAAG;IAAO;EAAE,gBAEpH1B,KAAA,CAAAwD,aAAA;IAAME,SAAS,EAAC;EAAS,gBACvB1D,KAAA,CAAAwD,aAAA,CAAClD,gBAAgB;IAAA,GACXK,QAAQ,CAACoD,eAAe;IAC5BC,MAAM,EAAE;MAAEC,IAAI,EAAE/C,KAAK,GAAG;IAAE;EAAE,CAC7B,CACG,CAAC,eACPlB,KAAA,CAAAwD,aAAA,CAAC9C,gBAAgB;IACfO,cAAc,EAAEA,cAAe;IAC/BC,KAAK,EAAEA,KAAM;IACbE,SAAS,EAAEA,SAAU;IACrBG,KAAK,EAAEA,KAAM;IACbC,gBAAgB,EAAEA;EAAiB,CACpC,CAAC,eACFxB,KAAA,CAAAwD,aAAA,CAAC/C,cAAc,QAAEO,IAAqB,CAAC,eACvChB,KAAA,CAAAwD,aAAA,CAAChD,mBAAmB;IAClBW,MAAM,EAAEA,MAAO;IACfC,SAAS,EAAEA,SAAU;IACrBmC,gBAAgB,EAAEA,gBAAiB;IACnCrC,KAAK,EAAEA,KAAM;IAAA,GACTO;EAAK,CACV,CAAC,eACFzB,KAAA,CAAAwD,aAAA;IAAKC,EAAE,EAAC,uBAAuB;IAAC;EAAiB,CAAE,CAAC,eACpDzD,KAAA,CAAAwD,aAAA;IAAME,SAAS,EAAC;EAAS,gBACvB1D,KAAA,CAAAwD,aAAA,CAAClD,gBAAgB;IAAA,GACXK,QAAQ,CAACuD,kBAAkB;IAC/BF,MAAM,EAAE;MAAEC,IAAI,EAAE/C,KAAK,GAAG;IAAE;EAAE,CAC7B,CACG,CACH,CAAC;AAEV,CAAC,CAAC;AAEFN,UAAU,CAACuD,YAAY,GAAG;EACxBC,iBAAiB,EAAE,IAAI;EACvBC,cAAc,EAAE,IAAI;EACpBrD,IAAI,EAAE,IAAI;EACVC,cAAc,EAAE,IAAI;EACpBqD,aAAa,EAAE,IAAI;EACnBjD,SAAS,EAAE,KAAK;EAChBE,KAAK,EAAE;AACT,CAAC;AAEDX,UAAU,CAAC2D,SAAS,GAAG;EACrB;EACAH,iBAAiB,EAAEhE,SAAS,CAACoE,IAAI;EACjC;EACAH,cAAc,EAAEjE,SAAS,CAACqE,MAAM;EAChC;EACAzD,IAAI,EAAEZ,SAAS,CAACoE,IAAI;EACpB;EACAvD,cAAc,EAAEb,SAAS,CAACqE,MAAM;EAChC;EACAH,aAAa,EAAElE,SAAS,CAACoE,IAAI;EAC7B;EACAtD,KAAK,EAAEd,SAAS,CAACsE,MAAM,CAACC,UAAU;EAClC;AACF;EACEC,SAAS,EAAExE,SAAS,CAACyE,IAAI,CAACF,UAAU;EACpC;AACF;EACExD,MAAM,EAAEf,SAAS,CAACyE,IAAI,CAACF,UAAU;EACjC;AACF;EACEvD,SAAS,EAAEhB,SAAS,CAACyE,IAAI,CAACF,UAAU;EACpC;AACF;EACEG,KAAK,EAAE1E,SAAS,CAACyE,IAAI,CAACF,UAAU;EAChC;EACAtD,SAAS,EAAEjB,SAAS,CAAC2E,KAAK,CAAC,CACzB,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,WAAW,EAClE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,YAAY,CACzE,CAAC;EACF;EACAzD,MAAM,EAAElB,SAAS,CAACqE,MAAM,CAACE,UAAU;EACnC;EACApD,KAAK,EAAEnB,SAAS,CAACoE,IAAI;EACrB;EACAhD,gBAAgB,EAAEpB,SAAS,CAACsE,MAAM,CAACC;AACrC,CAAC;AAED,eAAe/D,UAAU","ignoreList":[]}

package/dist/ProductTour/Checkpoint.scss

@@ -7,7 +7,7 @@
     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 .25rem .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);
@@ -44,39 +44,6 @@
     margin-inline-end: var(--pgn-spacing-spacer-2);
   }
 
-  .pgn__checkpoint-breadcrumb {
-    height: 6px;
-    width: 6px;
-    border-radius: 50%;
-
-    &.pgn__checkpoint-breadcrumb_active {
-      background: var(--pgn-color-product-tour-checkpoint-breadcrumb);
-    }
-
-    &.pgn__checkpoint-breadcrumb_inactive {
-      border: 1px solid var(--pgn-color-product-tour-checkpoint-breadcrumb);
-      background: transparent;
-    }
-
-    &:not(:first-child) {
-      margin-left: map.get($spacers, 1\.5);
-    }
-
-    [dir="rtl"] & {
-      margin-left: map.get($spacers, 1\.5);
-      margin-right: 0;
-
-      &:last-child {
-        margin-left: 0;
-      }
-    }
-  }
-
-  .pgn__checkpoint-breadcrumb-container {
-    display: flex;
-    align-items: center;
-  }
-
   .pgn__checkpoint-body {
     color: var(--pgn-color-product-tour-checkpoint-body);
     margin-bottom: map.get($spacers, 3\.5);
@@ -86,13 +53,18 @@
   .pgn__checkpoint-header {
     display: flex;
     justify-content: space-between;
-    margin-bottom: map.get($spacers, 2\.5);
+    margin-bottom: map.get($spacers, 2);
+    align-items: center;
   }
 
   #pgn__checkpoint-title {
     font-size: var(--pgn-typography-font-size-h3-base);
     margin-inline-end: map.get($spacers, 2\.5);
-    margin-bottom: 0;
+    margin-bottom: map.get($spacers, 2);;
+  }
+
+  .pgn__checkpoint-page-index {
+    font-size: $small-font-size;
   }
 }
 

package/dist/ProductTour/CheckpointActionRow.js

@@ -1,60 +1,56 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import ActionRow from '../ActionRow';
 import Button from '../Button';
-const CheckpointActionRow = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const CheckpointActionRow = /*#__PURE__*/React.forwardRef(_ref => {
   let {
     advanceButtonText,
-    dismissButtonText,
+    backButtonText,
     endButtonText,
     isLastCheckpoint,
     onAdvance,
-    onDismiss,
+    onBack,
     onEnd,
-    showDismissButton,
     index
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "pgn__checkpoint-action-row",
-    ref: ref
-  }, (showDismissButton === undefined ? !isLastCheckpoint : showDismissButton) && /*#__PURE__*/React.createElement(Button, {
+  const isFirstCheckpoint = index === 0;
+  return /*#__PURE__*/React.createElement(ActionRow, {
+    className: "pgn__checkpoint-action-row"
+  }, !isFirstCheckpoint && /*#__PURE__*/React.createElement(Button, {
+    className: "pgn__checkpoint-button-back",
     variant: "tertiary",
-    className: "pgn__checkpoint-button_dismiss",
-    onClick: onDismiss
-  }, dismissButtonText), /*#__PURE__*/React.createElement(Button, {
+    onClick: onBack
+  }, backButtonText), /*#__PURE__*/React.createElement(Button, {
     autoFocus: true,
     className: "pgn__checkpoint-button_advance",
-    variant: "primary",
     onClick: isLastCheckpoint ? () => onEnd(index) : () => onAdvance(index)
   }, isLastCheckpoint ? endButtonText : advanceButtonText));
 });
 CheckpointActionRow.defaultProps = {
   advanceButtonText: '',
-  dismissButtonText: '',
+  backButtonText: '',
   endButtonText: '',
   isLastCheckpoint: false,
   onAdvance: () => {},
-  onDismiss: () => {},
+  onBack: () => {},
   onEnd: () => {},
-  showDismissButton: undefined,
   index: 0
 };
 CheckpointActionRow.propTypes = {
   /** The text displayed on the button used to advance the tour. */
   advanceButtonText: PropTypes.node,
-  /** The text displayed on the button used to dismiss the tour. */
-  dismissButtonText: PropTypes.node,
+  /** The text displayed on the button used to go back on the tour */
+  backButtonText: PropTypes.string,
   /** The text displayed on the button used to end the tour. */
   endButtonText: PropTypes.node,
   /** Whether the parent Checkpoint is the last in the tour. */
   isLastCheckpoint: PropTypes.bool,
   /** A function that runs when triggering the `onClick` event of the advance button. */
   onAdvance: 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 back button. */
+  onBack: PropTypes.func,
   /** A function that runs when triggering the `onClick` event of the advance button if isLastCheckpoint is true. */
   onEnd: PropTypes.func,
-  /** Enforces visibility of the dismiss button under all circumstances */
-  showDismissButton: PropTypes.bool,
   /** Allows visibility of last index value for onEnd checkpoint compatibility */
   index: PropTypes.number
 };

package/dist/ProductTour/CheckpointActionRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckpointActionRow.js","names":["React","PropTypes","Button","CheckpointActionRow","forwardRef","_ref","ref","advanceButtonText","dismissButtonText","endButtonText","isLastCheckpoint","onAdvance","onDismiss","onEnd","showDismissButton","index","createElement","className","undefined","variant","onClick","autoFocus","defaultProps","propTypes","node","bool","func","number"],"sources":["../../src/ProductTour/CheckpointActionRow.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '../Button';\n\nconst CheckpointActionRow = React.forwardRef(({\n  advanceButtonText,\n  dismissButtonText,\n  endButtonText,\n  isLastCheckpoint,\n  onAdvance,\n  onDismiss,\n  onEnd,\n  showDismissButton,\n  index,\n}, ref) => (\n  <div className=\"pgn__checkpoint-action-row\" ref={ref}>\n    {(showDismissButton === undefined ? !isLastCheckpoint : showDismissButton) && (\n      <Button\n        variant=\"tertiary\"\n        className=\"pgn__checkpoint-button_dismiss\"\n        onClick={onDismiss}\n      >\n        {dismissButtonText}\n      </Button>\n    )}\n    <Button\n      autoFocus\n      className=\"pgn__checkpoint-button_advance\"\n      variant=\"primary\"\n      onClick={isLastCheckpoint ? () => onEnd(index) : () => onAdvance(index)}\n    >\n      {isLastCheckpoint ? endButtonText : advanceButtonText}\n    </Button>\n  </div>\n));\n\nCheckpointActionRow.defaultProps = {\n  advanceButtonText: '',\n  dismissButtonText: '',\n  endButtonText: '',\n  isLastCheckpoint: false,\n  onAdvance: () => {},\n  onDismiss: () => {},\n  onEnd: () => {},\n  showDismissButton: undefined,\n  index: 0,\n};\n\nCheckpointActionRow.propTypes = {\n  /** The text displayed on the button used to advance the tour. */\n  advanceButtonText: PropTypes.node,\n  /** The text displayed on the button used to dismiss the tour. */\n  dismissButtonText: PropTypes.node,\n  /** The text displayed on the button used to end the tour. */\n  endButtonText: PropTypes.node,\n  /** Whether the parent Checkpoint is the last in the tour. */\n  isLastCheckpoint: PropTypes.bool,\n  /** A function that runs when triggering the `onClick` event of the advance button. */\n  onAdvance: 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 advance button if isLastCheckpoint is true. */\n  onEnd: PropTypes.func,\n  /** Enforces visibility of the dismiss button under all circumstances */\n  showDismissButton: PropTypes.bool,\n  /** Allows visibility of last index value for onEnd checkpoint compatibility */\n  index: PropTypes.number,\n};\n\nexport default CheckpointActionRow;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,MAAM,MAAM,WAAW;AAE9B,MAAMC,mBAAmB,gBAAGH,KAAK,CAACI,UAAU,CAAC,CAAAC,IAAA,EAU1CC,GAAG;EAAA,IAVwC;IAC5CC,iBAAiB;IACjBC,iBAAiB;IACjBC,aAAa;IACbC,gBAAgB;IAChBC,SAAS;IACTC,SAAS;IACTC,KAAK;IACLC,iBAAiB;IACjBC;EACF,CAAC,GAAAV,IAAA;EAAA,oBACCL,KAAA,CAAAgB,aAAA;IAAKC,SAAS,EAAC,4BAA4B;IAACX,GAAG,EAAEA;EAAI,GAClD,CAACQ,iBAAiB,KAAKI,SAAS,GAAG,CAACR,gBAAgB,GAAGI,iBAAiB,kBACvEd,KAAA,CAAAgB,aAAA,CAACd,MAAM;IACLiB,OAAO,EAAC,UAAU;IAClBF,SAAS,EAAC,gCAAgC;IAC1CG,OAAO,EAAER;EAAU,GAElBJ,iBACK,CACT,eACDR,KAAA,CAAAgB,aAAA,CAACd,MAAM;IACLmB,SAAS;IACTJ,SAAS,EAAC,gCAAgC;IAC1CE,OAAO,EAAC,SAAS;IACjBC,OAAO,EAAEV,gBAAgB,GAAG,MAAMG,KAAK,CAACE,KAAK,CAAC,GAAG,MAAMJ,SAAS,CAACI,KAAK;EAAE,GAEvEL,gBAAgB,GAAGD,aAAa,GAAGF,iBAC9B,CACL,CAAC;AAAA,CACP,CAAC;AAEFJ,mBAAmB,CAACmB,YAAY,GAAG;EACjCf,iBAAiB,EAAE,EAAE;EACrBC,iBAAiB,EAAE,EAAE;EACrBC,aAAa,EAAE,EAAE;EACjBC,gBAAgB,EAAE,KAAK;EACvBC,SAAS,EAAEA,CAAA,KAAM,CAAC,CAAC;EACnBC,SAAS,EAAEA,CAAA,KAAM,CAAC,CAAC;EACnBC,KAAK,EAAEA,CAAA,KAAM,CAAC,CAAC;EACfC,iBAAiB,EAAEI,SAAS;EAC5BH,KAAK,EAAE;AACT,CAAC;AAEDZ,mBAAmB,CAACoB,SAAS,GAAG;EAC9B;EACAhB,iBAAiB,EAAEN,SAAS,CAACuB,IAAI;EACjC;EACAhB,iBAAiB,EAAEP,SAAS,CAACuB,IAAI;EACjC;EACAf,aAAa,EAAER,SAAS,CAACuB,IAAI;EAC7B;EACAd,gBAAgB,EAAET,SAAS,CAACwB,IAAI;EAChC;EACAd,SAAS,EAAEV,SAAS,CAACyB,IAAI;EACzB;EACAd,SAAS,EAAEX,SAAS,CAACyB,IAAI;EACzB;EACAb,KAAK,EAAEZ,SAAS,CAACyB,IAAI;EACrB;EACAZ,iBAAiB,EAAEb,SAAS,CAACwB,IAAI;EACjC;EACAV,KAAK,EAAEd,SAAS,CAAC0B;AACnB,CAAC;AAED,eAAexB,mBAAmB","ignoreList":[]}
+{"version":3,"file":"CheckpointActionRow.js","names":["React","PropTypes","ActionRow","Button","CheckpointActionRow","forwardRef","_ref","advanceButtonText","backButtonText","endButtonText","isLastCheckpoint","onAdvance","onBack","onEnd","index","isFirstCheckpoint","createElement","className","variant","onClick","autoFocus","defaultProps","propTypes","node","string","bool","func","number"],"sources":["../../src/ProductTour/CheckpointActionRow.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport ActionRow from '../ActionRow';\nimport Button from '../Button';\n\nconst CheckpointActionRow = React.forwardRef(({\n  advanceButtonText,\n  backButtonText,\n  endButtonText,\n  isLastCheckpoint,\n  onAdvance,\n  onBack,\n  onEnd,\n  index,\n}) => {\n  const isFirstCheckpoint = index === 0;\n  return (\n    <ActionRow className=\"pgn__checkpoint-action-row\">\n      {!isFirstCheckpoint && (\n        <Button\n          className=\"pgn__checkpoint-button-back\"\n          variant=\"tertiary\"\n          onClick={onBack}\n        >\n          {backButtonText}\n        </Button>\n      )}\n      <Button\n        autoFocus\n        className=\"pgn__checkpoint-button_advance\"\n        onClick={isLastCheckpoint ? () => onEnd(index) : () => onAdvance(index)}\n      >\n        {isLastCheckpoint ? endButtonText : advanceButtonText}\n      </Button>\n    </ActionRow>\n  );\n});\n\nCheckpointActionRow.defaultProps = {\n  advanceButtonText: '',\n  backButtonText: '',\n  endButtonText: '',\n  isLastCheckpoint: false,\n  onAdvance: () => { },\n  onBack: () => { },\n  onEnd: () => { },\n  index: 0,\n};\n\nCheckpointActionRow.propTypes = {\n  /** The text displayed on the button used to advance the tour. */\n  advanceButtonText: PropTypes.node,\n  /** The text displayed on the button used to go back on the tour */\n  backButtonText: PropTypes.string,\n  /** The text displayed on the button used to end the tour. */\n  endButtonText: PropTypes.node,\n  /** Whether the parent Checkpoint is the last in the tour. */\n  isLastCheckpoint: PropTypes.bool,\n  /** A function that runs when triggering the `onClick` event of the advance button. */\n  onAdvance: PropTypes.func,\n  /** A function that runs when triggering the `onClick` event of the back button. */\n  onBack: PropTypes.func,\n  /** A function that runs when triggering the `onClick` event of the advance button if isLastCheckpoint is true. */\n  onEnd: PropTypes.func,\n  /** Allows visibility of last index value for onEnd checkpoint compatibility */\n  index: PropTypes.number,\n};\n\nexport default CheckpointActionRow;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAElC,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,MAAM,MAAM,WAAW;AAE9B,MAAMC,mBAAmB,gBAAGJ,KAAK,CAACK,UAAU,CAACC,IAAA,IASvC;EAAA,IATwC;IAC5CC,iBAAiB;IACjBC,cAAc;IACdC,aAAa;IACbC,gBAAgB;IAChBC,SAAS;IACTC,MAAM;IACNC,KAAK;IACLC;EACF,CAAC,GAAAR,IAAA;EACC,MAAMS,iBAAiB,GAAGD,KAAK,KAAK,CAAC;EACrC,oBACEd,KAAA,CAAAgB,aAAA,CAACd,SAAS;IAACe,SAAS,EAAC;EAA4B,GAC9C,CAACF,iBAAiB,iBACjBf,KAAA,CAAAgB,aAAA,CAACb,MAAM;IACLc,SAAS,EAAC,6BAA6B;IACvCC,OAAO,EAAC,UAAU;IAClBC,OAAO,EAAEP;EAAO,GAEfJ,cACK,CACT,eACDR,KAAA,CAAAgB,aAAA,CAACb,MAAM;IACLiB,SAAS;IACTH,SAAS,EAAC,gCAAgC;IAC1CE,OAAO,EAAET,gBAAgB,GAAG,MAAMG,KAAK,CAACC,KAAK,CAAC,GAAG,MAAMH,SAAS,CAACG,KAAK;EAAE,GAEvEJ,gBAAgB,GAAGD,aAAa,GAAGF,iBAC9B,CACC,CAAC;AAEhB,CAAC,CAAC;AAEFH,mBAAmB,CAACiB,YAAY,GAAG;EACjCd,iBAAiB,EAAE,EAAE;EACrBC,cAAc,EAAE,EAAE;EAClBC,aAAa,EAAE,EAAE;EACjBC,gBAAgB,EAAE,KAAK;EACvBC,SAAS,EAAEA,CAAA,KAAM,CAAE,CAAC;EACpBC,MAAM,EAAEA,CAAA,KAAM,CAAE,CAAC;EACjBC,KAAK,EAAEA,CAAA,KAAM,CAAE,CAAC;EAChBC,KAAK,EAAE;AACT,CAAC;AAEDV,mBAAmB,CAACkB,SAAS,GAAG;EAC9B;EACAf,iBAAiB,EAAEN,SAAS,CAACsB,IAAI;EACjC;EACAf,cAAc,EAAEP,SAAS,CAACuB,MAAM;EAChC;EACAf,aAAa,EAAER,SAAS,CAACsB,IAAI;EAC7B;EACAb,gBAAgB,EAAET,SAAS,CAACwB,IAAI;EAChC;EACAd,SAAS,EAAEV,SAAS,CAACyB,IAAI;EACzB;EACAd,MAAM,EAAEX,SAAS,CAACyB,IAAI;EACtB;EACAb,KAAK,EAAEZ,SAAS,CAACyB,IAAI;EACrB;EACAZ,KAAK,EAAEb,SAAS,CAAC0B;AACnB,CAAC;AAED,eAAevB,mBAAmB","ignoreList":[]}

package/dist/ProductTour/CheckpointHeader.js

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

package/dist/ProductTour/CheckpointHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckpointHeader.js","names":["React","PropTypes","FormattedMessage","useIntl","Icon","IconButton","Close","CheckpointTitle","messages","CheckpointHeader","forwardRef","_ref","dismissAltText","index","onDismiss","title","totalCheckpoints","intl","oneBasedIndex","altText","formatMessage","closeAltText","createElement","Fragment","className","pageIndexText","values","step","totalSteps","size","iconAs","src","alt","onClick","defaultProps","propTypes","string","number","isRequired","func","node"],"sources":["../../src/ProductTour/CheckpointHeader.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\nimport { Close } from '../../icons';\nimport CheckpointTitle from './CheckpointTitle';\nimport messages from './messages';\n\nconst CheckpointHeader = React.forwardRef(({\n  dismissAltText, index, onDismiss, title, totalCheckpoints,\n}) => {\n  const intl = useIntl();\n  const oneBasedIndex = index + 1;\n  const altText = (dismissAltText && typeof dismissAltText === 'string') ? dismissAltText : intl.formatMessage(messages.closeAltText);\n\n  return (\n    <>\n      <header className=\"pgn__checkpoint-header\">\n        <span className=\"pgn__checkpoint-page-index\">\n          <FormattedMessage\n            {...messages.pageIndexText}\n            values={{ step: oneBasedIndex, totalSteps: totalCheckpoints }}\n          />\n        </span>\n        <IconButton\n          size=\"sm\"\n          iconAs={Icon}\n          src={Close}\n          alt={altText}\n          onClick={onDismiss}\n          data-testid=\"dismiss-tour\"\n        />\n      </header>\n      {title && (<CheckpointTitle>{title}</CheckpointTitle>)}\n    </>\n  );\n});\n\nCheckpointHeader.defaultProps = {\n  dismissAltText: null,\n  title: '',\n};\n\nCheckpointHeader.propTypes = {\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 current index of the given Checkpoint */\n  index: PropTypes.number.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  /** 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};\n\nexport default CheckpointHeader;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,gBAAgB,EAAEC,OAAO,QAAQ,YAAY;AAEtD,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,UAAU,MAAM,eAAe;AACtC,SAASC,KAAK,QAAQ,aAAa;AACnC,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,QAAQ,MAAM,YAAY;AAEjC,MAAMC,gBAAgB,gBAAGT,KAAK,CAACU,UAAU,CAACC,IAAA,IAEpC;EAAA,IAFqC;IACzCC,cAAc;IAAEC,KAAK;IAAEC,SAAS;IAAEC,KAAK;IAAEC;EAC3C,CAAC,GAAAL,IAAA;EACC,MAAMM,IAAI,GAAGd,OAAO,CAAC,CAAC;EACtB,MAAMe,aAAa,GAAGL,KAAK,GAAG,CAAC;EAC/B,MAAMM,OAAO,GAAIP,cAAc,IAAI,OAAOA,cAAc,KAAK,QAAQ,GAAIA,cAAc,GAAGK,IAAI,CAACG,aAAa,CAACZ,QAAQ,CAACa,YAAY,CAAC;EAEnI,oBACErB,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAuB,QAAA,qBACEvB,KAAA,CAAAsB,aAAA;IAAQE,SAAS,EAAC;EAAwB,gBACxCxB,KAAA,CAAAsB,aAAA;IAAME,SAAS,EAAC;EAA4B,gBAC1CxB,KAAA,CAAAsB,aAAA,CAACpB,gBAAgB;IAAA,GACXM,QAAQ,CAACiB,aAAa;IAC1BC,MAAM,EAAE;MAAEC,IAAI,EAAET,aAAa;MAAEU,UAAU,EAAEZ;IAAiB;EAAE,CAC/D,CACG,CAAC,eACPhB,KAAA,CAAAsB,aAAA,CAACjB,UAAU;IACTwB,IAAI,EAAC,IAAI;IACTC,MAAM,EAAE1B,IAAK;IACb2B,GAAG,EAAEzB,KAAM;IACX0B,GAAG,EAAEb,OAAQ;IACbc,OAAO,EAAEnB,SAAU;IACnB,eAAY;EAAc,CAC3B,CACK,CAAC,EACRC,KAAK,iBAAKf,KAAA,CAAAsB,aAAA,CAACf,eAAe,QAAEQ,KAAuB,CACpD,CAAC;AAEP,CAAC,CAAC;AAEFN,gBAAgB,CAACyB,YAAY,GAAG;EAC9BtB,cAAc,EAAE,IAAI;EACpBG,KAAK,EAAE;AACT,CAAC;AAEDN,gBAAgB,CAAC0B,SAAS,GAAG;EAC3B;EACAvB,cAAc,EAAEX,SAAS,CAACmC,MAAM;EAChC;EACAvB,KAAK,EAAEZ,SAAS,CAACoC,MAAM,CAACC,UAAU;EAClC;AACF;EACExB,SAAS,EAAEb,SAAS,CAACsC,IAAI,CAACD,UAAU;EACpC;EACAvB,KAAK,EAAEd,SAAS,CAACuC,IAAI;EACrB;EACAxB,gBAAgB,EAAEf,SAAS,CAACoC,MAAM,CAACC;AACrC,CAAC;AAED,eAAe7B,gBAAgB","ignoreList":[]}