Merge pull request #3601 from openedx/ags/release-22-23-sync

Sync release-22.x into release-23.x

Author: brian-smith-tcril

src/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;
   }

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,28 +132,33 @@ 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 */
   index: PropTypes.number.isRequired,
   /** 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;

src/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;
   }
 }
 

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();
-    });
   });
 });