@openedx/paragon 22.17.0 → 22.18.1

package/dist/withDeprecatedProps.js

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

package/dist/withDeprecatedProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"withDeprecatedProps.js","names":["React","DeprTypes","withDeprecatedProps","WrappedComponent","componentName","deprecatedProps","WithDeprecatedProps","Component","displayName","constructor","props","transformProps","bind","warn","message","process","env","NODE_ENV","console","acc","propName","undefined","deprType","newName","expect","transform","MOVED","REMOVED","FORMAT","MOVED_AND_FORMAT","render","children","transformedProps","Object","keys","reduce","createElement"],"sources":["../src/withDeprecatedProps.tsx"],"sourcesContent":["/* eslint no-console: 0 */\nimport React from 'react';\n\nexport enum DeprTypes {\n  MOVED = 'MOVED',\n  REMOVED = 'REMOVED',\n  FORMAT = 'FORMAT',\n  MOVED_AND_FORMAT = 'MOVED_AND_FORMAT',\n}\n\nexport interface DeprecatedProps extends Record<string, any> {\n  deprType: DeprTypes,\n  newName?: string,\n  expect?: (propValue: any) => boolean,\n  transform?: (propValue: any, allProps: Record<string, any>) => any,\n  message?: string,\n}\n\nfunction withDeprecatedProps<T extends Record<string, any>>(\n  WrappedComponent: React.ComponentType<any>,\n  componentName: string,\n  deprecatedProps: Record<string, DeprecatedProps>,\n) : any {\n  class WithDeprecatedProps extends React.Component<T> {\n    // eslint-disable-next-line react/static-property-placement\n    public static displayName = `withDeprecatedProps(${componentName})`;\n\n    constructor(props: T) {\n      super(props);\n      this.transformProps = this.transformProps.bind(this);\n    }\n\n    warn(message: string) {\n      if (process.env.NODE_ENV === 'development') {\n        if (console) { console.warn(`[Deprecated] ${message}`); }\n      }\n    }\n\n    transformProps(acc: Record<string, any>, propName: string) : Record<string, any> {\n      if (deprecatedProps[propName] === undefined) {\n        acc[propName] = this.props[propName];\n        return acc;\n      }\n\n      const {\n        deprType,\n        newName,\n        expect,\n        transform,\n        message,\n      } = deprecatedProps[propName];\n\n      switch (deprType) {\n        case DeprTypes.MOVED:\n          this.warn(`${componentName}: The prop '${propName}' has been moved to '${newName}'.`);\n          acc[newName!] = this.props[propName];\n          break;\n        case DeprTypes.REMOVED:\n          this.warn(`${componentName}: The prop '${propName}' has been removed. '${message}'`);\n          break;\n        case DeprTypes.FORMAT:\n          if (!expect!(this.props[propName])) {\n            this.warn(`${componentName}: The prop '${propName}' expects a new format. ${message}`);\n            acc[propName] = transform!(this.props[propName], this.props);\n          } else {\n            acc[propName] = this.props[propName];\n          }\n          break;\n        case DeprTypes.MOVED_AND_FORMAT:\n          this.warn(`${componentName}: The prop '${propName}' has been moved to '${newName}' and expects a new format. ${message}`);\n          acc[newName!] = transform!(this.props[propName], this.props);\n          break;\n        default:\n          acc[propName] = this.props[propName];\n          break;\n      }\n\n      return acc;\n    }\n\n    render() {\n      const { children, ...transformedProps } = Object\n        .keys(this.props)\n        .reduce(this.transformProps, {});\n\n      return (\n        <WrappedComponent {...transformedProps as T}>\n          {this.props.children || children}\n        </WrappedComponent>\n      );\n    }\n  }\n\n  return WithDeprecatedProps;\n}\n\nexport default withDeprecatedProps;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"withDeprecatedProps.js","names":["React","DeprTypes","withDeprecatedProps","WrappedComponent","componentName","deprecatedProps","WithDeprecatedProps","Component","displayName","constructor","props","transformProps","bind","warn","message","process","env","NODE_ENV","console","acc","propName","undefined","deprType","newName","expect","transform","MOVED","REMOVED","FORMAT","MOVED_AND_FORMAT","propValue","warningMessage","render","children","transformedProps","Object","keys","reduce","createElement"],"sources":["../src/withDeprecatedProps.tsx"],"sourcesContent":["/* eslint no-console: 0 */\nimport React from 'react';\n\nexport enum DeprTypes {\n  MOVED = 'MOVED',\n  REMOVED = 'REMOVED',\n  FORMAT = 'FORMAT',\n  MOVED_AND_FORMAT = 'MOVED_AND_FORMAT',\n}\n\nexport interface DeprecatedProps extends Record<string, any> {\n  deprType: DeprTypes,\n  newName?: string,\n  expect?: (propValue: any) => boolean,\n  transform?: (propValue: any, allProps: Record<string, any>) => any,\n  message?: string,\n}\n\nfunction withDeprecatedProps<T extends Record<string, any>>(\n  WrappedComponent: React.ComponentType<any>,\n  componentName: string,\n  deprecatedProps: Record<string, DeprecatedProps>,\n) : any {\n  class WithDeprecatedProps extends React.Component<T> {\n    // eslint-disable-next-line react/static-property-placement\n    public static displayName = `withDeprecatedProps(${componentName})`;\n\n    constructor(props: T) {\n      super(props);\n      this.transformProps = this.transformProps.bind(this);\n    }\n\n    warn(message: string) {\n      if (process.env.NODE_ENV === 'development') {\n        if (console) { console.warn(`[Deprecated] ${message}`); }\n      }\n    }\n\n    transformProps(acc: Record<string, any>, propName: string) : Record<string, any> {\n      if (deprecatedProps[propName] === undefined) {\n        acc[propName] = this.props[propName];\n        return acc;\n      }\n\n      const {\n        deprType,\n        newName,\n        expect,\n        transform,\n        message,\n      } = deprecatedProps[propName];\n\n      switch (deprType) {\n        case DeprTypes.MOVED:\n          this.warn(`${componentName}: The prop '${propName}' has been moved to '${newName}'.`);\n          acc[newName!] = this.props[propName];\n          break;\n        case DeprTypes.REMOVED:\n          this.warn(`${componentName}: The prop '${propName}' has been removed. '${message}'`);\n          break;\n        case DeprTypes.FORMAT:\n          if (!expect!(this.props[propName])) {\n            this.warn(`${componentName}: The prop '${propName}' expects a new format. ${message}`);\n            acc[propName] = transform!(this.props[propName], this.props);\n          } else {\n            acc[propName] = this.props[propName];\n          }\n          break;\n        case DeprTypes.MOVED_AND_FORMAT: {\n          const propValue = this.props[propName];\n          let warningMessage = `${componentName}: The prop '${propName}' has been moved to '${newName}'`;\n          if (expect && !expect(propValue)) {\n            warningMessage += ' and expects a new format';\n          }\n          warningMessage += message ? `. ${message}` : '';\n          this.warn(warningMessage);\n          acc[newName!] = transform ? transform(propValue, this.props) : propValue;\n          break;\n        }\n        default:\n          acc[propName] = this.props[propName];\n          break;\n      }\n\n      return acc;\n    }\n\n    render() {\n      const { children, ...transformedProps } = Object\n        .keys(this.props)\n        .reduce(this.transformProps, {});\n\n      return (\n        <WrappedComponent {...transformedProps as T}>\n          {this.props.children || children}\n        </WrappedComponent>\n      );\n    }\n  }\n\n  return WithDeprecatedProps;\n}\n\nexport default withDeprecatedProps;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "22.17.0",
+  "version": "22.18.1",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/Alert/index.scss

@@ -15,10 +15,15 @@
   padding: $alert-padding-y $alert-padding-x;
   margin-bottom: $alert-margin-bottom;
   border: $alert-border-width solid transparent;
+  align-items: center;
 
   @include border-radius($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/src/ProductTour/Checkpoint.jsx

@@ -5,16 +5,17 @@ import { createPopper } from '@popperjs/core';
 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 = React.forwardRef(({
   body,
+  dismissAltText,
   index,
+  onBack,
+  onDismiss,
   placement,
   target,
   title,
@@ -87,7 +88,6 @@ const Checkpoint = React.forwardRef(({
   }, [target, checkpointVisible, placement]);
 
   const isLastCheckpoint = index + 1 === totalCheckpoints;
-  const isOnlyCheckpoint = totalCheckpoints === 1;
 
   return (
     <div
@@ -104,14 +104,17 @@ const Checkpoint = React.forwardRef(({
           values={{ step: index + 1 }}
         />
       </span>
-      {(title || !isOnlyCheckpoint) && (
-        <div className="pgn__checkpoint-header">
-          <CheckpointTitle>{title}</CheckpointTitle>
-          <CheckpointBreadcrumbs currentIndex={index} totalCheckpoints={totalCheckpoints} />
-        </div>
-      )}
+      <CheckpointHeader
+        dismissAltText={dismissAltText}
+        index={index}
+        onDismiss={onDismiss}
+        title={title}
+        totalCheckpoints={totalCheckpoints}
+      />
       <CheckpointBody>{body}</CheckpointBody>
       <CheckpointActionRow
+        onBack={onBack}
+        onDismiss={onDismiss}
         isLastCheckpoint={isLastCheckpoint}
         index={index}
         {...props}
@@ -129,21 +132,23 @@ const Checkpoint = React.forwardRef(({
 
 Checkpoint.defaultProps = {
   advanceButtonText: null,
+  backButtonText: null,
   body: null,
-  dismissButtonText: null,
+  dismissAltText: null,
   endButtonText: null,
   placement: 'top',
   title: null,
-  showDismissButton: undefined,
 };
 
 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 */
@@ -151,6 +156,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,
@@ -168,8 +176,6 @@ Checkpoint.propTypes = {
   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,
 };
 
 export default Checkpoint;

package/src/ProductTour/Checkpoint.scss

@@ -10,7 +10,7 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
   background: $checkpoint-background-color;
   border-top: $checkpoint-border-width solid $checkpoint-border-color;
   border-radius: $border-radius;
-  padding: map.get($spacers, 4);
+  padding: map.get($spacers, 3\.5);
   box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .3);
   z-index: $checkpoint-z-index;
   max-width: $checkpoint-max-width;
@@ -47,39 +47,6 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
     margin-inline-end: map.get($spacers, 2);
   }
 
-  .pgn__checkpoint-breadcrumb {
-    height: 6px;
-    width: 6px;
-    border-radius: 50%;
-
-    &.pgn__checkpoint-breadcrumb_active {
-      background: $checkpoint-breadcrumb-color;
-    }
-
-    &.pgn__checkpoint-breadcrumb_inactive {
-      border: 1px solid $checkpoint-breadcrumb-color;
-      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: $checkpoint-body-color;
     margin-bottom: map.get($spacers, 3\.5);
@@ -89,13 +56,18 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
   .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: $h3-font-size;
     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/src/ProductTour/Checkpoint.test.jsx

@@ -11,6 +11,7 @@ const popperMock = jest.spyOn(popper, 'createPopper');
 
 describe('Checkpoint', () => {
   const handleAdvance = jest.fn();
+  const handleBack = jest.fn();
   const handleDismiss = jest.fn();
   const handleEnd = jest.fn();
 
@@ -29,11 +30,12 @@ describe('Checkpoint', () => {
           <div id="target-element">...</div>
           <Checkpoint
             advanceButtonText="Next"
+            backButtonText="Back"
             body="Lorem ipsum checkpoint body"
-            dismissButtonText="Dismiss"
             endButtonText="End"
             index={1}
             onAdvance={handleAdvance}
+            onBack={handleBack}
             onDismiss={handleDismiss}
             onEnd={handleEnd}
             target="#target-element"
@@ -44,31 +46,22 @@ describe('Checkpoint', () => {
       );
     });
 
-    it('renders correct active breadcrumb', () => {
-      expect(screen.getByText('Checkpoint title')).toBeInTheDocument();
-      const breadcrumbs = screen.getAllByTestId('pgn__checkpoint-breadcrumb_', { exact: false });
-      expect(breadcrumbs.length).toEqual(5);
-      expect(breadcrumbs[0].classList).toContain('pgn__checkpoint-breadcrumb_inactive');
-      expect(breadcrumbs[1].classList).toContain('pgn__checkpoint-breadcrumb_active');
-      expect(breadcrumbs[2].classList).toContain('pgn__checkpoint-breadcrumb_inactive');
-      expect(breadcrumbs[3].classList).toContain('pgn__checkpoint-breadcrumb_inactive');
-      expect(breadcrumbs[4].classList).toContain('pgn__checkpoint-breadcrumb_inactive');
-    });
-
-    it('only renders advance and dismiss buttons (i.e. does not render end button)', () => {
-      expect(screen.getByRole('button', { name: 'Dismiss' })).toBeInTheDocument();
+    it('only renders advance and back buttons (i.e. does not render end button)', () => {
+      expect(screen.getByRole('button', { name: 'Back' })).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Next' })).toBeInTheDocument();
     });
 
-    it('dismiss button onClick calls handleDismiss', async () => {
-      const dismissButton = screen.getByRole('button', { name: 'Dismiss' });
-      await userEvent.click(dismissButton);
-      expect(handleDismiss).toHaveBeenCalledTimes(1);
+    it('back button onClick calls handleBack', async () => {
+      const user = userEvent.setup();
+      const backButton = screen.getByRole('button', { name: 'Back' });
+      await user.click(backButton);
+      expect(handleBack).toHaveBeenCalledTimes(1);
     });
 
     it('advance button onClick calls handleAdvance', async () => {
+      const user = userEvent.setup();
       const advanceButton = screen.getByRole('button', { name: 'Next' });
-      await userEvent.click(advanceButton);
+      await user.click(advanceButton);
       expect(handleAdvance).toHaveBeenCalledTimes(1);
     });
   });
@@ -80,8 +73,9 @@ describe('Checkpoint', () => {
           <div id="#last-element" />
           <Checkpoint
             advanceButtonText="Next"
+            backButtonText="Back"
             body="Lorem ipsum checkpoint body"
-            dismissButtonText="Dismiss"
+            dismissAltText="Escape"
             endButtonText="End"
             index={4}
             onAdvance={handleAdvance}
@@ -95,10 +89,15 @@ describe('Checkpoint', () => {
       );
     });
 
-    it('only renders end button (i.e. neither advance nor dismiss buttons)', () => {
+    it('only renders end button (i.e. neither advance nor back buttons)', () => {
       expect(screen.getByText('End', { selector: 'button' })).toBeInTheDocument();
     });
 
+    it('uses customized alt text on the close icon', () => {
+      const closeButton = screen.getByTestId('dismiss-tour');
+      expect(closeButton).toHaveAttribute('aria-label', 'Escape');
+    });
+
     it('end button onClick calls handleEnd', async () => {
       const user = userEvent.setup({ pointerEventsCheck: PointerEventsCheckLevel.Never });
       const endButton = screen.getByText('End', { selector: 'button' });
@@ -115,7 +114,6 @@ describe('Checkpoint', () => {
           <Checkpoint
             advanceButtonText="Next"
             body="Lorem ipsum checkpoint body"
-            dismissButtonText="Dismiss"
             endButtonText="End"
             index={0}
             onAdvance={handleAdvance}
@@ -132,36 +130,5 @@ describe('Checkpoint', () => {
     it('only renders end button (i.e. neither advance nor dismiss buttons)', () => {
       expect(screen.getByText('End', { selector: 'button' })).toBeInTheDocument();
     });
-
-    it('does not render breadcrumbs', () => {
-      const breadcrumbs = screen.queryAllByTestId('pgn__checkpoint-breadcrumb_', { exact: false });
-      expect(breadcrumbs.length).toEqual(0);
-    });
-  });
-
-  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"
-            body="Lorem ipsum checkpoint body"
-            dismissButtonText="Dismiss"
-            endButtonText="End"
-            index={0}
-            onAdvance={handleAdvance}
-            onDismiss={handleDismiss}
-            onEnd={handleEnd}
-            target="#target-element"
-            title="Checkpoint title"
-            totalCheckpoints={1}
-            showDismissButton
-          />
-        </IntlProvider>,
-      );
-      expect(screen.getByText('Dismiss', { selector: 'button' })).toBeInTheDocument();
-      expect(screen.getByText('End', { selector: 'button' })).toBeInTheDocument();
-    });
   });
 });

package/src/ProductTour/CheckpointActionRow.jsx

@@ -1,68 +1,68 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
+import ActionRow from '../ActionRow';
 import Button from '../Button';
 
 const CheckpointActionRow = React.forwardRef(({
   advanceButtonText,
-  dismissButtonText,
+  backButtonText,
   endButtonText,
   isLastCheckpoint,
   onAdvance,
-  onDismiss,
+  onBack,
   onEnd,
-  showDismissButton,
   index,
-}, ref) => (
-  <div className="pgn__checkpoint-action-row" ref={ref}>
-    {(showDismissButton === undefined ? !isLastCheckpoint : showDismissButton) && (
+}) => {
+  const isFirstCheckpoint = index === 0;
+  return (
+    <ActionRow className="pgn__checkpoint-action-row">
+      {!isFirstCheckpoint && (
+        <Button
+          className="pgn__checkpoint-button-back"
+          variant="tertiary"
+          onClick={onBack}
+        >
+          {backButtonText}
+        </Button>
+      )}
       <Button
-        variant="tertiary"
-        className="pgn__checkpoint-button_dismiss"
-        onClick={onDismiss}
+        autoFocus
+        className="pgn__checkpoint-button_advance"
+        onClick={isLastCheckpoint ? () => onEnd(index) : () => onAdvance(index)}
       >
-        {dismissButtonText}
+        {isLastCheckpoint ? endButtonText : advanceButtonText}
       </Button>
-    )}
-    <Button
-      autoFocus
-      className="pgn__checkpoint-button_advance"
-      variant="primary"
-      onClick={isLastCheckpoint ? () => onEnd(index) : () => onAdvance(index)}
-    >
-      {isLastCheckpoint ? endButtonText : advanceButtonText}
-    </Button>
-  </div>
-));
+    </ActionRow>
+  );
+});
 
 CheckpointActionRow.defaultProps = {
   advanceButtonText: '',
-  dismissButtonText: '',
+  backButtonText: '',
   endButtonText: '',
   isLastCheckpoint: false,
-  onAdvance: () => {},
-  onDismiss: () => {},
-  onEnd: () => {},
-  showDismissButton: undefined,
+  onAdvance: () => { },
+  onBack: () => { },
+  onEnd: () => { },
   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/src/ProductTour/CheckpointHeader.jsx

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