diff --git a/.changeset/green-drinks-remain.md b/.changeset/green-drinks-remain.md
new file mode 100644
index 00000000000..5e49560d5b8
--- /dev/null
+++ b/.changeset/green-drinks-remain.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-components': minor
+---
+
+feat(TDP-12694): add pendo trackers to guided-tour actions
diff --git a/packages/components/src/AppGuidedTour/AppGuidedTour.component.js b/packages/components/src/AppGuidedTour/AppGuidedTour.component.js
index b6bcbc4fce4..a64bbd22b51 100644
--- a/packages/components/src/AppGuidedTour/AppGuidedTour.component.js
+++ b/packages/components/src/AppGuidedTour/AppGuidedTour.component.js
@@ -21,6 +21,7 @@ function AppGuidedTour({
onImportDemoContent,
onRequestClose,
welcomeStepBody = null,
+ tourId,
...rest
}) {
const { t } = useTranslation(I18N_DOMAIN_COMPONENTS);
@@ -52,6 +53,7 @@ function AppGuidedTour({
return (
)}
@@ -134,6 +137,7 @@ AppGuidedTour.propTypes = {
onRequestOpen: PropTypes.func.isRequired,
onImportDemoContent: PropTypes.func,
onRequestClose: PropTypes.func.isRequired,
+ tourId: PropTypes.string,
};
export default AppGuidedTour;
diff --git a/packages/components/src/AppGuidedTour/AppGuidedTour.stories.js b/packages/components/src/AppGuidedTour/AppGuidedTour.stories.js
index 018c2914fd8..7ab6201524a 100644
--- a/packages/components/src/AppGuidedTour/AppGuidedTour.stories.js
+++ b/packages/components/src/AppGuidedTour/AppGuidedTour.stories.js
@@ -22,6 +22,7 @@ function AppGuidedTourContainer({ withDemoContent = false }) {
return (
tourId && `guidedtour.${tourId}.${action}`;
+
return (
+
+ {t('GUIDEDTOUR_LAST_STEP', 'Let me try')}
+
+ }
+ nextButton={
+ {}}
+ icon="arrow-right"
+ data-feature={dataFeature('next')}
+ >
+ {t('GUIDEDTOUR_NEXT_STEP', 'Next')}
+
+ }
+ prevButton={
+ {}}
+ icon="arrow-left"
+ data-feature={dataFeature('prev')}
+ >
+ {t('GUIDEDTOUR_PREV_STEP', 'Previous')}
+
}
maskSpace={10}
rounded={4}
@@ -98,6 +119,7 @@ GuidedTour.propTypes = {
onRequestClose: PropTypes.func,
disableAllInteractions: PropTypes.bool,
lastStepNextButtonDataFeature: PropTypes.string,
+ tourId: PropTypes.string,
};
export default GuidedTour;
diff --git a/packages/components/src/GuidedTour/GuidedTour.module.scss b/packages/components/src/GuidedTour/GuidedTour.module.scss
index 0d43208b007..52dc00caa4b 100644
--- a/packages/components/src/GuidedTour/GuidedTour.module.scss
+++ b/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*/
diff --git a/packages/components/src/GuidedTour/GuidedTour.stories.js b/packages/components/src/GuidedTour/GuidedTour.stories.js
index dee01d8c5b3..f920999dabb 100644
--- a/packages/components/src/GuidedTour/GuidedTour.stories.js
+++ b/packages/components/src/GuidedTour/GuidedTour.stories.js
@@ -76,6 +76,7 @@ class GuidedTourContainer extends Component {
t: this.props.t,
})}
lastStepNextButtonDataFeature="HOHOOO"
+ tourId="my-tour"
onRequestClose={this.closeTour}
isOpen={isOpen}
showCloseButton={controls}
diff --git a/packages/components/src/GuidedTour/README.md b/packages/components/src/GuidedTour/README.md
index 6be8405fdaa..798991b4ed3 100644
--- a/packages/components/src/GuidedTour/README.md
+++ b/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 |
diff --git a/packages/containers/src/GuidedTour/__snapshots__/GuidedTour.test.js.snap b/packages/containers/src/GuidedTour/__snapshots__/GuidedTour.test.js.snap
index 5c48a16bc7d..c445458d045 100644
--- a/packages/containers/src/GuidedTour/__snapshots__/GuidedTour.test.js.snap
+++ b/packages/containers/src/GuidedTour/__snapshots__/GuidedTour.test.js.snap
@@ -171,22 +171,20 @@ exports[`Guided Tour Container should render 1`] = `
data-tour-elem="controls"
>