From f43609cd243c3de4a675adba13802ccd78354c10 Mon Sep 17 00:00:00 2001 From: Gbacc Date: Tue, 21 Nov 2023 10:36:44 +0100 Subject: [PATCH 1/3] fix(TDOPS-5671): fix tooltip display when empty title (#4999) * fix(TDOPS-5671): fix tooltip display when empty title * changeset * improve accessibility --- .changeset/blue-kings-switch.md | 5 ++++ .../src/components/Tooltip/Tooltip.cy.tsx | 13 ++++++++ .../src/components/Tooltip/Tooltip.tsx | 30 ++++++++++--------- 3 files changed, 34 insertions(+), 14 deletions(-) create mode 100644 .changeset/blue-kings-switch.md diff --git a/.changeset/blue-kings-switch.md b/.changeset/blue-kings-switch.md new file mode 100644 index 00000000000..409b0760dba --- /dev/null +++ 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/packages/design-system/src/components/Tooltip/Tooltip.cy.tsx b/packages/design-system/src/components/Tooltip/Tooltip.cy.tsx index 8e1c7f90ca1..3792732d748 100644 --- a/packages/design-system/src/components/Tooltip/Tooltip.cy.tsx +++ b/packages/design-system/src/components/Tooltip/Tooltip.cy.tsx @@ -1,4 +1,5 @@ /* eslint-disable testing-library/prefer-screen-queries */ + /* eslint-disable testing-library/await-async-queries */ import { Tooltip } from './Tooltip'; @@ -16,6 +17,18 @@ context('', () => { cy.findByTestId('my.tooltip').should('be.visible'); }); + it('should not show a tooltip when empty title', () => { + cy.mount( + + + , + ); + + cy.findByTestId('my.tooltip').should('not.exist'); + cy.get('button').click(); + cy.findByTestId('my.tooltip').should('not.exist'); + }); + it('Should be able to override baseId', () => { const tooltipBaseId = 'base-id'; cy.mount( diff --git a/packages/design-system/src/components/Tooltip/Tooltip.tsx b/packages/design-system/src/components/Tooltip/Tooltip.tsx index bf8348fe8e6..57f91d7c928 100644 --- a/packages/design-system/src/components/Tooltip/Tooltip.tsx +++ b/packages/design-system/src/components/Tooltip/Tooltip.tsx @@ -91,23 +91,25 @@ export const Tooltip = ({ id, children, title, placement = 'top', ...rest }: Too children, { ...getReferenceProps(), - 'aria-describedby': safeId, + ...(title && { 'aria-describedby': safeId }), }, floating.refs.setReference, )} - -
- - {title} -
- + {!!title && ( + +
+ + {title} +
+ + )} ); }; From e77b32c35821a75fe24e29b654a69b4011c85e2c Mon Sep 17 00:00:00 2001 From: Sebastien LE MOUILLOUR <32456736+smouillour@users.noreply.github.com> Date: Tue, 21 Nov 2023 10:39:16 +0100 Subject: [PATCH 2/3] fix(TDOPS-5707): Move lint-merge-report to scripts-core (#4996) --- .changeset/five-games-watch.md | 5 + .changeset/rotten-scissors-obey.md | 5 + package.json | 131 +++++++-------- talend-scripts.json | 5 + tools/scripts-core/README.md | 3 +- tools/scripts-core/doc/getting-started.md | 13 ++ tools/scripts-core/src/index.js | 11 +- .../src/scripts/lint-merge-report.js | 156 ++++++++++++++++++ tools/scripts-yarn-workspace/src/index.js | 4 +- .../src/merge-report.js | 74 --------- 10 files changed, 261 insertions(+), 146 deletions(-) create mode 100644 .changeset/five-games-watch.md create mode 100644 .changeset/rotten-scissors-obey.md create mode 100644 talend-scripts.json create mode 100644 tools/scripts-core/src/scripts/lint-merge-report.js delete mode 100644 tools/scripts-yarn-workspace/src/merge-report.js diff --git a/.changeset/five-games-watch.md b/.changeset/five-games-watch.md new file mode 100644 index 00000000000..aaefa30db97 --- /dev/null +++ b/.changeset/five-games-watch.md @@ -0,0 +1,5 @@ +--- +'@talend/scripts-core': minor +--- + +Add option lint-merge-report diff --git a/.changeset/rotten-scissors-obey.md b/.changeset/rotten-scissors-obey.md new file mode 100644 index 00000000000..85ad7672d0c --- /dev/null +++ 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 index 8471b0d4644..0866d44a91a 100644 --- 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/talend-scripts.json b/talend-scripts.json new file mode 100644 index 00000000000..2b31dfdc2af --- /dev/null +++ b/talend-scripts.json @@ -0,0 +1,5 @@ +{ + "lintMergeReport": { + "packageDirs": ["fork", "packages", "tools"] + } +} diff --git a/tools/scripts-core/README.md b/tools/scripts-core/README.md index e0cce326e79..6295c333dc5 100644 --- a/tools/scripts-core/README.md +++ b/tools/scripts-core/README.md @@ -10,8 +10,9 @@ It will expose basic scripts: - test - build - lint +- lint-merge-report -By default no configuration is needed but you can at any time create a configuration file and extends from the default config. +By default no configuration is needed (except for lint-merge-report) but you can at any time create a configuration file and extends from the default config. `talend-scripts` will detect the kind of package you are in. diff --git a/tools/scripts-core/doc/getting-started.md b/tools/scripts-core/doc/getting-started.md index a81e7fe1f5f..40fe2077c18 100644 --- a/tools/scripts-core/doc/getting-started.md +++ b/tools/scripts-core/doc/getting-started.md @@ -27,6 +27,7 @@ With the cli you have multiple commands: - **build** build a project using webpack (src/app/index.js) - **start** start your project using webpack-dev-server or storyook - **lint** execute eslint and stylelint on your project +- **lint-merge-report** merge eslint and stylelint report (made to be used in GHA to display lint issue with a monorepo) - **extends** generate configuration files which extend the talend-scripts ones 5. Define the npm scripts you need. @@ -106,3 +107,15 @@ _--fix_: fix the corresponding issues that can be automatically fixed. ## tests options This command is a pass through jest / karma. So you can pass anything you want. + +## lint-merge-report config + +To be able to use lint-merge-report, you will have to add config in talend-scripts.json. As example, for tui, we have this: + +``` +{ + "lintMergeReport": { + "packageDirs": ["fork", "packages", "tools"] + } +} +``` diff --git a/tools/scripts-core/src/index.js b/tools/scripts-core/src/index.js index c12a562467a..c4cf52df8b2 100755 --- a/tools/scripts-core/src/index.js +++ b/tools/scripts-core/src/index.js @@ -1,6 +1,7 @@ #!/usr/bin/env node /* eslint-disable no-console */ +import mergeReport from './scripts/lint-merge-report.js'; import { getEnv } from './utils/env.js'; import { printSeparator } from './utils/log.js'; import { getPresetApi } from './utils/preset.js'; @@ -12,11 +13,12 @@ if (command === '--help' || command === '-h' || command === 'help') { console.log(`Please use one of the following commands: * start * build -* build:lib:umd +* build-storybook +* lint +* lint-merge-report * test * extends * start-storybook -* build-storybook `); process.exit(0); } @@ -62,7 +64,7 @@ async function runScript() { console.error(e); } - if (result.then) { + if (result?.then) { result .then(() => { process.exit(0); @@ -85,6 +87,9 @@ switch (command) { case 'test': runScript(command, options); break; + case 'lint-merge-report': + mergeReport(options); + break; case 'build:lib': case 'build:lib:umd': console.log('This command do not exists anymore, please use just "build" command'); diff --git a/tools/scripts-core/src/scripts/lint-merge-report.js b/tools/scripts-core/src/scripts/lint-merge-report.js new file mode 100644 index 00000000000..d3235aced8c --- /dev/null +++ b/tools/scripts-core/src/scripts/lint-merge-report.js @@ -0,0 +1,156 @@ +/* eslint-disable no-console */ +import { spawn } from 'child_process'; + +/* eslint-disable no-param-reassign */ +import fs from 'fs'; + +import { getEnv } from '../utils/env.js'; +import { getPresetApi } from '../utils/preset.js'; + +const reports = ['eslint-report.json', 'stylelint-report.json']; + +let buff = []; + +async function run(cmd, opts = {}) { + if (opts.verbose) { + console.log(`\n#### RUNNER: ${cmd.name} ${cmd.args.join(' ')}`); + } + const start = Date.now(); + return new Promise(async (resolve, reject) => { + const out = spawn(cmd.name, cmd.args); + let stdout = ''; + let stderr = ''; + out.on('error', error => { + console.error(error); + reject(error); + }); + out.on('close', () => { + resolve(stdout); + }); + out.on('exit', code => { + if (opts.verbose && stderr) { + console.error(`#### RUNNER: Child Process STDERR: ${stderr}`); + } + if (opts.verbose && stdout) { + console.error(`#### RUNNER: Child Process STDOUT: ${stdout}`); + } + if (code > 0) { + run.exitCode += 1; + console.error(`#### RUNNER: ${cmd.name} ${cmd.args.join(' ')} exit code ${code}`); + reject(`STDOUT: ${stdout}\n\nSTDERR: ${stderr}`); + return; + } + const end = Date.now(); + console.log( + `#### RUNNER: ${cmd.name} ${cmd.args.join(' ')} exit code ${code} in ${ + (end - start) / 1000 + } seconds`, + ); + resolve(stdout); + }); + out.stdout.on('data', data => { + const datastr = data.toString(); + if (data && datastr) { + stdout += datastr; + } + }); + + out.stderr.on('data', data => { + const datastr = data.toString(); + if (data && datastr) { + stderr += datastr; + } + }); + }); +} + +function transform(item) { + if (item.source && !item.filePath) { + item.filePath = item.source; + delete item.source; + } + if (item.warnings && !item.messages) { + item.messages = item.warnings.map(w => ({ + ...w, + severity: 1, + message: w.text, + ruleId: w.rule, + })); + item.warningCount = item.warnings.length; + delete item.warning; + } else if (item.messages) { + item.messages = item.messages.map(w => ({ ...w, severity: 1 })); + item.warningCount += item.errorCount; + item.errorCount = 0; + } + return item; +} + +function getPackages(packageDirs = []) { + return packageDirs.flatMap(dir => + fs.readdirSync(dir).map(subDir => ({ + name: subDir, + location: `${dir}/${subDir}`, + })), + ); +} + +export default function mergeReport(options) { + // current env vars and talend scripts configuration in /talend-scripts.(js/json) + const env = getEnv(options); + env.TALEND_MODE = 'production'; + console.log(`Talend scripts mode : ${env.TALEND_MODE}`); + if (env.TALEND_SCRIPTS_CONFIG) { + console.log('Talend scripts configuration file found and loaded'); + } else { + console.log('Talend scripts configuration file not found'); + } + const presetApi = getPresetApi(env); + const rootPackageDirs = presetApi.getUserConfig('lintMergeReport', {})?.packageDirs || []; + const packages = getPackages(rootPackageDirs); + + if (packages.length === 0) { + throw new Error( + 'No packages has been retrieved, check if the talend-scripts.json is well configured', + ); + } + + // https://stackoverflow.com/questions/65944700/how-to-run-git-diff-in-github-actions + const diff = run({ + name: 'git', + args: ['diff', '--name-only', `origin/${options[0]}`, `origin/${options[1]}`], + }) + .then(out => + out + .split('\n') + .map(str => str.trim()) + .filter(Boolean), + ) + .catch(e => console.error(e)); + + diff.then(files => { + function onlyIfInDiff(lint) { + return !!files.find(f => lint.filePath.endsWith(`/${f}`)); + } + + packages.forEach(pkg => { + reports.forEach(report => { + const fpath = `${pkg.location}/${report}`; + if (fs.existsSync(fpath)) { + try { + buff = buff.concat( + JSON.parse(fs.readFileSync(fpath)).map(transform).filter(onlyIfInDiff), + ); + } catch (e) { + console.error(e); + } + } + }); + }); + const target = `${process.cwd()}/eslint-report.json`; + + // eslint-disable-next-line no-console + console.log(`report merge into ${target}`); + fs.writeFileSync(target, JSON.stringify(buff, null, 2)); + }); +} diff --git a/tools/scripts-yarn-workspace/src/index.js b/tools/scripts-yarn-workspace/src/index.js index cc90e08ba4a..528e435de6c 100755 --- a/tools/scripts-yarn-workspace/src/index.js +++ b/tools/scripts-yarn-workspace/src/index.js @@ -1,13 +1,11 @@ #!/usr/bin/env node import { workspaceRun } from './workspace-run.js'; -import { mergeReport } from './merge-report.js'; + const command = process.argv[2]; const args = process.argv.slice(3); if (command === 'run') { workspaceRun(args); -} else if (command === 'lint-merge-report') { - mergeReport(args); } else { console.error(`Command ${command} not found`); process.exit(1); diff --git a/tools/scripts-yarn-workspace/src/merge-report.js b/tools/scripts-yarn-workspace/src/merge-report.js deleted file mode 100644 index 3889fab58ab..00000000000 --- a/tools/scripts-yarn-workspace/src/merge-report.js +++ /dev/null @@ -1,74 +0,0 @@ -/* eslint-disable no-param-reassign */ -import fs from 'fs'; -import { run } from './run.js'; - -const reports = ['eslint-report.json', 'stylelint-report.json']; - -let buff = []; - -function transform(item) { - if (item.source && !item.filePath) { - item.filePath = item.source; - delete item.source; - } - if (item.warnings && !item.messages) { - item.messages = item.warnings.map(w => ({ - ...w, - severity: 1, - message: w.text, - ruleId: w.rule, - })); - item.warningCount = item.warnings.length; - delete item.warning; - } else if (item.messages) { - item.messages = item.messages.map(w => ({ ...w, severity: 1 })); - item.warningCount += item.errorCount; - item.errorCount = 0; - } - return item; -} - -export function mergeReport(args) { - const info = run({ name: 'yarn', args: ['workspaces', '--silent', 'info'] }).then(info => - JSON.parse(info), - ); - //https://stackoverflow.com/questions/65944700/how-to-run-git-diff-in-github-actions - const diff = run({ - name: 'git', - args: ['diff', '--name-only', `origin/${args[0]}`, `origin/${args[1]}`], - }) - .then(out => - out - .split('\n') - .map(str => str.trim()) - .filter(Boolean), - ) - .catch(e => console.error(e)); - Promise.all([info, diff]).then(results => { - const [infos, files = []] = results; - // eslint-disable-next-line no-console - console.log({ files }); - function onlyIfInDiff(lint) { - return !!files.find(f => lint.filePath.endsWith(`/${f}`)); - } - Object.keys(infos).forEach(pkg => { - reports.forEach(report => { - const fpath = `${infos[pkg].location}/${report}`; - if (fs.existsSync(fpath)) { - try { - buff = buff.concat( - JSON.parse(fs.readFileSync(fpath)).map(transform).filter(onlyIfInDiff), - ); - } catch (e) { - console.error(e); - } - } - }); - }); - const target = `${process.cwd()}/eslint-report.json`; - - // eslint-disable-next-line no-console - console.log(`report merge into ${target}`); - fs.writeFileSync(target, JSON.stringify(buff, null, 2)); - }); -} From e87f8e0913c285820ceef43ded1d8a249514d427 Mon Sep 17 00:00:00 2001 From: Guillaume NICOLAS Date: Tue, 21 Nov 2023 12:28:08 +0100 Subject: [PATCH 3/3] feat(TDP-12694): add pendo trackers to guided-tour actions (#4982) --- .changeset/green-drinks-remain.md | 5 +++ .../AppGuidedTour/AppGuidedTour.component.js | 4 ++ .../AppGuidedTour/AppGuidedTour.stories.js | 1 + .../src/GuidedTour/GuidedTour.component.js | 34 +++++++++++--- .../src/GuidedTour/GuidedTour.module.scss | 2 +- .../src/GuidedTour/GuidedTour.stories.js | 1 + packages/components/src/GuidedTour/README.md | 32 +++++++------- .../__snapshots__/GuidedTour.test.js.snap | 44 +++++++++---------- 8 files changed, 77 insertions(+), 46 deletions(-) create mode 100644 .changeset/green-drinks-remain.md 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" >