feat(TDP-12694): add pendo trackers to guided-tour actions

.changeset/green-drinks-remain.md

@@ -0,0 +1,5 @@
+---
+'@talend/react-components': minor
+---
+
+feat(TDP-12694): add pendo trackers to guided-tour actions

packages/components/src/AppGuidedTour/AppGuidedTour.component.js

@@ -1,10 +1,10 @@
 import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
 import { useTranslation } from 'react-i18next';
 import GuidedTour from '../GuidedTour';
 import Toggle from '../Toggle';
 import Stepper from '../Stepper';
 import I18N_DOMAIN_COMPONENTS from '../constants';
 import DemoContentStep from './DemoContentStep.component';
 
@@ -21,6 +21,7 @@
 	onImportDemoContent,
 	onRequestClose,
 	welcomeStepBody = null,
+	tourId,
 	...rest
 }) {
 	const { t } = useTranslation(I18N_DOMAIN_COMPONENTS);
@@ -52,6 +53,7 @@
 
 	return (
 		<GuidedTour
+			tourId={tourId}
 			isOpen={isOpen}
 			showButtons={!isNavigationDisabled}
 			showCloseButton={!isNavigationDisabled}
@@ -100,6 +102,7 @@
 														setImportDemoContent(event.target.checked);
 													}}
 													checked={importDemoContent}
+													data-feature={tourId && `guidedtour.${tourId}.demo`}
 												/>
 											</form>
 										)}
@@ -134,6 +137,7 @@
 	onRequestOpen: PropTypes.func.isRequired,
 	onImportDemoContent: PropTypes.func,
 	onRequestClose: PropTypes.func.isRequired,
+	tourId: PropTypes.string,
 };
 
 export default AppGuidedTour;

packages/components/src/AppGuidedTour/AppGuidedTour.stories.js

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import AppGuidedTour from './AppGuidedTour.component';
 import Stepper from '../Stepper';
 
 // eslint-disable-next-line react/prop-types
 function AppGuidedTourContainer({ withDemoContent = false }) {
@@ -22,6 +22,7 @@
 
 	return (
 		<AppGuidedTour
+			tourId="preparation"
 			isOpen
 			appName="Data Preparation"
 			steps={[

packages/components/src/GuidedTour/GuidedTour.component.js

@@ -1,10 +1,10 @@
 import { Fragment } from 'react';
 import Tour from 'reactour';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
+import { ButtonIcon, ButtonPrimary } from '@talend/design-system';
 
-import Action from '../Actions/Action';
 import I18N_DOMAIN_COMPONENTS from '../constants';
 
 import theme from './GuidedTour.module.scss';
@@ -35,13 +35,16 @@
 	disableAllInteractions,
 	steps,
 	lastStepNextButtonDataFeature,
+	tourId,
 	...rest
 }) {
 	const { t } = useTranslation(I18N_DOMAIN_COMPONENTS);
 	if (!steps.length) {
 		return null;
 	}
 
+	const dataFeature = action => tourId && `guidedtour.${tourId}.${action}`;
+
 	return (
 		<Tour
 			className={classNames(
@@ -56,11 +59,29 @@
 			disableInteraction
 			highlightedMaskClassName="tc-guided-tour__highlighted-mask"
 			lastStepNextButton={
-				<Action
-					bsStyle="info"
-					label={t('GUIDEDTOUR_LAST_STEP', { defaultValue: 'Let me try' })}
-					data-feature={lastStepNextButtonDataFeature}
-				/>
+				<ButtonPrimary data-feature={lastStepNextButtonDataFeature ?? dataFeature('last')}>
+					{t('GUIDEDTOUR_LAST_STEP', 'Let me try')}
+				</ButtonPrimary>
+			}
+			nextButton={
+				<ButtonIcon
+					size="S"
+					onClick={() => {}}
+					icon="arrow-right"
+					data-feature={dataFeature('next')}
+				>
+					{t('GUIDEDTOUR_NEXT_STEP', 'Next')}
+				</ButtonIcon>
+			}
+			prevButton={
+				<ButtonIcon
+					size="S"
+					onClick={() => {}}
+					icon="arrow-left"
+					data-feature={dataFeature('prev')}
+				>
+					{t('GUIDEDTOUR_PREV_STEP', 'Previous')}
+				</ButtonIcon>
 			}
 			maskSpace={10}
 			rounded={4}
@@ -98,6 +119,7 @@
 	onRequestClose: PropTypes.func,
 	disableAllInteractions: PropTypes.bool,
 	lastStepNextButtonDataFeature: PropTypes.string,
+	tourId: PropTypes.string,
 };
 
 export default GuidedTour;

packages/components/src/GuidedTour/GuidedTour.module.scss

@@ -6,7 +6,7 @@ $tc-guidedtour-tooltip-padding: $padding-large !default;
 $tc-guidedtour-mask-opactiy: 0.25 !default;
 $tc-guidedtour-close-button-size: $svg-sm-size !default;
 $tc-guidedtour-nav-button-size: $svg-md-size !default;
-$tc-guidedtour-controls-color: tokens.$coral-color-neutral-text !default;
+$tc-guidedtour-controls-color: tokens.$coral-color-accent-text !default;
 $tc-guidedtour-width: 40rem !default;
 
 /* stylelint-disable-next-line selector-id-pattern*/

packages/components/src/GuidedTour/GuidedTour.stories.js

@@ -1,11 +1,11 @@
 /* eslint-disable react/prop-types */
 import { Component, Fragment } from 'react';
 import { action } from '@storybook/addon-actions';
 import tokens from '@talend/design-tokens';
 import { withTranslation } from 'react-i18next';
 
 import GuidedTour from './GuidedTour.component';
 import I18N_DOMAIN_COMPONENTS from '../constants';
 
 class ImportDemo extends Component {
 	state = {
@@ -76,6 +76,7 @@
 					t: this.props.t,
 				})}
 				lastStepNextButtonDataFeature="HOHOOO"
+				tourId="my-tour"
 				onRequestClose={this.closeTour}
 				isOpen={isOpen}
 				showCloseButton={controls}

packages/components/src/GuidedTour/README.md

@@ -6,23 +6,25 @@ The guided tour is based on [reactour](https://github.com/elrumordelaluz/reactou
 
 ## Props
 
-| Props | Type | Description |
-| ----- | ---- | ----------- |
-| `className` | string | CSS classes for guided tour component |
-| `steps` | array of object or function | Array of steps to construct the guided tour |
-| `isOpen` | boolean | If true, guided tour will start |
-| `onRequestClose` | function | Callback when user close i.e. to toggle `isOpen` |
-| `disableAllInteractions` | boolean | If true, all controls will disappear |
+| Props                           | Type                        | Description                                                               |
+| ------------------------------- | --------------------------- | ------------------------------------------------------------------------- |
+|  `className`                    | string                      | CSS classes for guided tour component                                     |
+|  `steps`                        | array of object or function | Array of steps to construct the guided tour                               |
+|  `isOpen`                       |  boolean                    |  If true, guided tour will start                                          |
+|  `onRequestClose`               | function                    | Callback when user close i.e. to toggle `isOpen`                          |
+| `disableAllInteractions`        |  boolean                    | If true, all controls will disappear                                      |
+| `lastStepNextButtonDataFeature` | string                      | value to data-feature attribute of last step next button                  |
+| `tourId`                        | string                      | tour identifier to be used in data-feature attribute of prev/next buttons |
 
 ## Style
 
 Those classes are accessible from outside.
 
-| CSS class | Type | Description |
-| --------- | ---- | ----------- |
-| `.tc-react-tour` | block | The guided tour |
-| `.tc-react-tour__mask` | element | The dark overlay |
-| `.tc-react-tour__highlighted-mask` | element | The light overlay to highlight element |
-| `.tc-react-tour__header` | element | The header of the tooltip |
-| `.tc-react-tour__body` | element | The body of the tooltip |
-| `.tc-react-tour--no-interaction` | modifier | The guided tour without any controls |
+| CSS class                          | Type     | Description                            |
+| ---------------------------------- | -------- | -------------------------------------- |
+| `.tc-react-tour`                   | block    | The guided tour                        |
+| `.tc-react-tour__mask`             | element  | The dark overlay                       |
+| `.tc-react-tour__highlighted-mask` | element  | The light overlay to highlight element |
+| `.tc-react-tour__header`           | element  | The header of the tooltip              |
+| `.tc-react-tour__body`             | element  | The body of the tooltip                |
+| `.tc-react-tour--no-interaction`   | modifier | The guided tour without any controls   |

packages/containers/src/GuidedTour/__snapshots__/GuidedTour.test.js.snap

@@ -171,22 +171,20 @@ exports[`Guided Tour Container should render 1`] = `
         data-tour-elem="controls"
       >
         <button
-          class="sc-aXZVg cdorhc sc-eqUAAy cTnNMO"
+          class="sc-aXZVg cdorhc sc-eqUAAy jLJOIm"
           data-tour-elem="left-arrow"
           disabled=""
         >
-          <svg
-            viewBox="0 0 18.4 14.4"
+          <span
+            class="sc-gEvEer fZNxWp"
           >
-            <path
-              d="M1.4 7.2h16M7.6 1L1.4 7.2l6.2 6.2"
-              fill="none"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-miterlimit="10"
-              stroke-width="2"
-            />
-          </svg>
+            <span
+              class="CoralButtonIcon"
+              icon="arrow-left"
+            >
+              Previous
+            </span>
+          </span>
         </button>
         <nav
           class="sc-kAyceB cIhnUi"
@@ -209,21 +207,19 @@ exports[`Guided Tour Container should render 1`] = `
           />
         </nav>
         <button
-          class="sc-aXZVg dbJwZj sc-eqUAAy eqHGdD"
+          class="sc-aXZVg dbJwZj sc-eqUAAy gcKufz"
           data-tour-elem="right-arrow"
         >
-          <svg
-            viewBox="0 0 18.4 14.4"
+          <span
+            class="sc-gEvEer fZNxWp"
           >
-            <path
-              d="M17 7.2H1M10.8 1L17 7.2l-6.2 6.2"
-              fill="none"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-miterlimit="10"
-              stroke-width="2"
-            />
-          </svg>
+            <span
+              class="CoralButtonIcon"
+              icon="arrow-right"
+            >
+              Next
+            </span>
+          </span>
         </button>
       </div>
       <button