From 4a8a3bcba52d434a3bb247fe26f08ca3192061ac Mon Sep 17 00:00:00 2001 From: Monu Simon M Date: Sat, 20 Jan 2024 15:51:46 +0530 Subject: [PATCH] Improvement/Tooltips on question type --- locales/en/common.json | 7 ++ package-lock.json | 67 +++++++++++++++++++ package.json | 1 + .../QuestionBlockWrapper.tsx | 4 +- .../QuestionTypeIcons/QuestionTypeIcons.tsx | 37 ++++++++-- 5 files changed, 107 insertions(+), 9 deletions(-) diff --git a/locales/en/common.json b/locales/en/common.json index 12ceebd3..52138050 100644 --- a/locales/en/common.json +++ b/locales/en/common.json @@ -30,5 +30,12 @@ "title": "Display options", "OneQuestionPerStep": "One question per step", "DisplayTitle": "Display title" + }, + "questionType": { + "question": "Question", + "emoji": "Emoji", + "input": "Input", + "choice": "Choice", + "rate": "Rate" } } diff --git a/package-lock.json b/package-lock.json index 86e0b9db..ae7cf659 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,6 +30,7 @@ "react-beautiful-dnd": "^13.1.1", "react-dom": "^18.2.0", "react-hot-toast": "^2.2.0", + "react-tooltip": "^5.25.1", "recharts": "^2.4.3", "sass": "^1.52.1", "typescript": "^5.0.2", @@ -2383,6 +2384,28 @@ "npm": ">=6.0.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.3.tgz", + "integrity": "sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==", + "dependencies": { + "@floating-ui/utils": "^0.2.0" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz", + "integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==", + "dependencies": { + "@floating-ui/core": "^1.5.3", + "@floating-ui/utils": "^0.2.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", + "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -11512,6 +11535,19 @@ "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-tooltip": { + "version": "5.25.1", + "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.25.1.tgz", + "integrity": "sha512-GDD0hrfbwGr2C6zEzVzzDzXSKeHM55cRFZQv2/EFmiFKVxWZk8hzOO5FNcwCpPyqVxQKUtYckReU5bXMd63alQ==", + "dependencies": { + "@floating-ui/dom": "^1.0.0", + "classnames": "^2.3.0" + }, + "peerDependencies": { + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + } + }, "node_modules/react-transition-group": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", @@ -15263,6 +15299,28 @@ "integrity": "sha512-XK6BTq1NDMo9Xqw/YkYyGjSsg44fbNwYRx7QK2CuoQgyy+f1rrTDHoExVM5PsyXCtfl2vs2vVJ0MN0yN6LppRw==", "dev": true }, + "@floating-ui/core": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.3.tgz", + "integrity": "sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==", + "requires": { + "@floating-ui/utils": "^0.2.0" + } + }, + "@floating-ui/dom": { + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz", + "integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==", + "requires": { + "@floating-ui/core": "^1.5.3", + "@floating-ui/utils": "^0.2.0" + } + }, + "@floating-ui/utils": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", + "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" + }, "@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -22001,6 +22059,15 @@ "react-transition-group": "2.9.0" } }, + "react-tooltip": { + "version": "5.25.1", + "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.25.1.tgz", + "integrity": "sha512-GDD0hrfbwGr2C6zEzVzzDzXSKeHM55cRFZQv2/EFmiFKVxWZk8hzOO5FNcwCpPyqVxQKUtYckReU5bXMd63alQ==", + "requires": { + "@floating-ui/dom": "^1.0.0", + "classnames": "^2.3.0" + } + }, "react-transition-group": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", diff --git a/package.json b/package.json index 70bb35fd..ab5fd76f 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "react-beautiful-dnd": "^13.1.1", "react-dom": "^18.2.0", "react-hot-toast": "^2.2.0", + "react-tooltip": "^5.25.1", "recharts": "^2.4.3", "sass": "^1.52.1", "typescript": "^5.0.2", diff --git a/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper.tsx b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper.tsx index b5670f32..29a3310b 100644 --- a/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper.tsx +++ b/src/features/surveys/features/SurveyCreator/components/QuestionBlocks/QuestionBlockWrapper/QuestionBlockWrapper.tsx @@ -77,7 +77,7 @@ export default function QuestionBlockWrapper({
- +
@@ -97,7 +97,7 @@ export default function QuestionBlockWrapper({
- +
{(isDraggingPossible || isRemovingPossible) && ( diff --git a/src/shared/components/QuestionTypeIcons/QuestionTypeIcons.tsx b/src/shared/components/QuestionTypeIcons/QuestionTypeIcons.tsx index 057aec2a..9f5371ad 100644 --- a/src/shared/components/QuestionTypeIcons/QuestionTypeIcons.tsx +++ b/src/shared/components/QuestionTypeIcons/QuestionTypeIcons.tsx @@ -4,18 +4,41 @@ import ChoiceIcon from 'shared/components/QuestionTypeIcons/ChoiceIcon'; import EmojiIcon from 'shared/components/QuestionTypeIcons/EmojiIcon'; import InputIcon from 'shared/components/QuestionTypeIcons/InputIcon'; import RateIcon from 'shared/components/QuestionTypeIcons/RateIcon'; +import { Tooltip } from 'react-tooltip'; +import useTranslation from 'next-translate/useTranslation'; interface QuestionTypeIconsProps { + index: number; type: QuestionType; } -export default function QuestionTypeIcons({ type }: QuestionTypeIconsProps) { +export default function QuestionTypeIcons({ + type, + index, +}: QuestionTypeIconsProps) { + const { t } = useTranslation('common'); + return ( -
- {type === QuestionType.EMOJI && } - {type === QuestionType.INPUT && } - {type === QuestionType.CHOICE && } - {type === QuestionType.RATE && } -
+ <> + + {`${t(`questionType.${type.toLowerCase()}`)} ${t( + 'questionType.question' + )}`} + +
+ {type === QuestionType.EMOJI && } + {type === QuestionType.INPUT && } + {type === QuestionType.CHOICE && } + {type === QuestionType.RATE && } +
+ ); }