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" >