Merge remote-tracking branch 'origin/master' into jmfrancois/chore/up…

…grade-testing-library
Talend · Nov 21, 2023 · ae06047 · ae06047
2 parents 9a6c5c8 + e87f8e0
commit ae06047
Show file tree

Hide file tree

Showing 21 changed files with 372 additions and 206 deletions.
diff --git a/.changeset/blue-kings-switch.md b/.changeset/blue-kings-switch.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+TDOPS-5671 - Fix Design System tooltip display in case of empty value
diff --git a/.changeset/five-games-watch.md b/.changeset/five-games-watch.md
@@ -0,0 +1,5 @@
+---
+'@talend/scripts-core': minor
+---
+
+Add option lint-merge-report
diff --git a/.changeset/green-drinks-remain.md 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/.changeset/rotten-scissors-obey.md b/.changeset/rotten-scissors-obey.md
@@ -0,0 +1,5 @@
+---
+'@talend/scripts-yarn-workspace': major
+---
+
+[BREAKING CHANGE]Remove option lint-merge-report
diff --git a/package.json b/package.json
@@ -1,67 +1,68 @@
 {
-  "devDependencies": {
-    "@changesets/cli": "^2.26.2",
-    "@talend/scripts-config-babel": "^13.2.0",
-    "@talend/scripts-config-prettier": "^12.1.0",
-    "@talend/scripts-yarn-workspace": "^1.3.0",
-    "cross-env": "^7.0.3",
-    "cross-spawn": "^7.0.3",
-    "eslint": "^8.53.0",
-    "husky": "^8.0.3",
-    "i18next-scanner": "^4.4.0",
-    "lint-staged": "^13.3.0",
-    "prettier": "^3.1.0",
-    "rimraf": "^3.0.2",
-    "typescript": "^5.2.2"
-  },
-  "scripts": {
-    "postinstall": "talend-yarn-workspace run build:lib",
-    "pre-release": "talend-yarn-workspace run pre-release",
-    "start": "yarn workspace @talend/ui-playground run start",
-    "start-storybook": "yarn workspace @talend/ui-storybook-one run start",
-    "release": "yarn pre-release && yarn changeset publish",
-    "lint-staged": "lint-staged",
-    "lint": "cross-env WORKSPACE_RUN_FAIL=no-bail talend-yarn-workspace run lint",
-    "lint-merge-report": "talend-yarn-workspace lint-merge-report",
-    "test": "cross-env TZ=UTC talend-yarn-workspace run test --silent",
-    "test:update": "cross-env TZ=UTC yarn workspaces run test --silent -u",
-    "test:cov": "cross-env TZ=UTC talend-yarn-workspace run test:cov",
-    "test:demo": "talend-yarn-workspace run test:demo",
-    "test:cron": "talend-yarn-workspace run test:cron",
-    "start-components": "yarn workspace @talend/react-components run start",
-    "start-containers": "yarn workspace  @talend/react-containers run start",
-    "start-stepper": "yarn workspace  @talend/react-stepper run start",
-    "start-forms": "yarn workspace  @talend/react-forms run start",
-    "start-theme": "yarn workspace @talend/bootstrap-theme run start",
-    "changelog": "git log --pretty=\"format:%C(bold green)%ad%C(reset) %s\" --date=short --color",
-    "prepare": "husky install"
-  },
-  "resolutions": {
-    "**/cypress": "^12.17.4",
-    "**/@types/react": "^18.2.7",
-    "**/@types/react-dom": "^18.2.7",
-    "**/i18next-scanner-typescript/typescript": "^5.0.4",
-    "**/browser-sync-client/typescript": "^5.0.4",
-    "**/vinyl-fs/glob-parent": "^5.1.2",
-    "**/fast-glob/glob-parent": "^5.1.2",
-    "**/trim": "^1.0.1",
-    "**/x-default-browser": "^0.5.2",
-    "**/reactour/prop-types": "^15.7.2"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Talend/ui.git"
-  },
-  "version": "0.0.0",
-  "private": true,
-  "workspaces": [
-    "packages/*",
-    "tools/*",
-    "fork/*"
-  ],
-  "lint-staged": {
-    "*.{json,md,mdx,html,js,jsx,ts,tsx}": [
-      "prettier --write"
-    ]
-  }
+	"devDependencies": {
+		"@changesets/cli": "^2.26.2",
+		"@talend/scripts-config-babel": "^13.2.0",
+		"@talend/scripts-config-prettier": "^12.1.0",
+		"@talend/scripts-core": "^16.2.0",
+		"@talend/scripts-yarn-workspace": "^1.3.0",
+		"cross-env": "^7.0.3",
+		"cross-spawn": "^7.0.3",
+		"eslint": "^8.53.0",
+		"husky": "^8.0.3",
+		"i18next-scanner": "^4.4.0",
+		"lint-staged": "^13.3.0",
+		"prettier": "^3.1.0",
+		"rimraf": "^3.0.2",
+		"typescript": "^5.2.2"
+	},
+	"scripts": {
+		"postinstall": "talend-yarn-workspace run build:lib",
+		"pre-release": "talend-yarn-workspace run pre-release",
+		"start": "yarn workspace @talend/ui-playground run start",
+		"start-storybook": "yarn workspace @talend/ui-storybook-one run start",
+		"release": "yarn pre-release && yarn changeset publish",
+		"lint-staged": "lint-staged",
+		"lint": "cross-env WORKSPACE_RUN_FAIL=no-bail talend-yarn-workspace run lint",
+		"lint-merge-report": "talend-scripts lint-merge-report",
+		"test": "cross-env TZ=UTC talend-yarn-workspace run test --silent",
+		"test:update": "cross-env TZ=UTC yarn workspaces run test --silent -u",
+		"test:cov": "cross-env TZ=UTC talend-yarn-workspace run test:cov",
+		"test:demo": "talend-yarn-workspace run test:demo",
+		"test:cron": "talend-yarn-workspace run test:cron",
+		"start-components": "yarn workspace @talend/react-components run start",
+		"start-containers": "yarn workspace  @talend/react-containers run start",
+		"start-stepper": "yarn workspace  @talend/react-stepper run start",
+		"start-forms": "yarn workspace  @talend/react-forms run start",
+		"start-theme": "yarn workspace @talend/bootstrap-theme run start",
+		"changelog": "git log --pretty=\"format:%C(bold green)%ad%C(reset) %s\" --date=short --color",
+		"prepare": "husky install"
+	},
+	"resolutions": {
+		"**/cypress": "^12.17.4",
+		"**/@types/react": "^18.2.7",
+		"**/@types/react-dom": "^18.2.7",
+		"**/i18next-scanner-typescript/typescript": "^5.0.4",
+		"**/browser-sync-client/typescript": "^5.0.4",
+		"**/vinyl-fs/glob-parent": "^5.1.2",
+		"**/fast-glob/glob-parent": "^5.1.2",
+		"**/trim": "^1.0.1",
+		"**/x-default-browser": "^0.5.2",
+		"**/reactour/prop-types": "^15.7.2"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Talend/ui.git"
+	},
+	"version": "0.0.0",
+	"private": true,
+	"workspaces": [
+		"packages/*",
+		"tools/*",
+		"fork/*"
+	],
+	"lint-staged": {
+		"*.{json,md,mdx,html,js,jsx,ts,tsx}": [
+			"prettier --write"
+		]
+	}
 }
diff --git 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 (
 		<GuidedTour
+			tourId={tourId}
 			isOpen={isOpen}
 			showButtons={!isNavigationDisabled}
 			showCloseButton={!isNavigationDisabled}
@@ -100,6 +102,7 @@ function AppGuidedTour({
 														setImportDemoContent(event.target.checked);
 													}}
 													checked={importDemoContent}
+													data-feature={tourId && `guidedtour.${tourId}.demo`}
 												/>
 											</form>
 										)}
@@ -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
@@ -22,6 +22,7 @@ function AppGuidedTourContainer({ withDemoContent = false }) {
 
 	return (
 		<AppGuidedTour
+			tourId="preparation"
 			isOpen
 			appName="Data Preparation"
 			steps={[

diff --git a/packages/components/src/GuidedTour/GuidedTour.component.js b/packages/components/src/GuidedTour/GuidedTour.component.js
@@ -3,8 +3,8 @@ 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 @@ function GuidedTour({
 	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 @@ function GuidedTour({
 			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 @@ 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
@@ -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
@@ -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
@@ -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
@@ -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