diff --git a/packages/@coorpacademy-components/locales/en/global.json b/packages/@coorpacademy-components/locales/en/global.json index 3c9a6de00f..d20430309b 100644 --- a/packages/@coorpacademy-components/locales/en/global.json +++ b/packages/@coorpacademy-components/locales/en/global.json @@ -54,6 +54,7 @@ "skills_change_focus": "Change skill focus", "skills_choose_focus": "Choose your focus", "cancel": "Cancel", + "close": "Close", "confirm": "Confirm", "Delete": "Delete", "Draft": "Draft", diff --git a/packages/@coorpacademy-components/src/molecule/translation-modal/index.js b/packages/@coorpacademy-components/src/molecule/translation-modal/index.js index 03b53c5688..13ea7ebc3b 100644 --- a/packages/@coorpacademy-components/src/molecule/translation-modal/index.js +++ b/packages/@coorpacademy-components/src/molecule/translation-modal/index.js @@ -24,7 +24,8 @@ const TranslationModal = (props, context) => { onConfirm, onClose, source: {inputText: sourceInputText, textArea: sourceTextArea, inputLanguage}, - target: {inputText: targetInputText, textArea: targetTextArea, language: outputLanguage} + target: {inputText: targetInputText, textArea: targetTextArea, language: outputLanguage}, + readOnly = false } = props; const {translate} = context; @@ -54,22 +55,25 @@ const TranslationModal = (props, context) => { }, [inputValue, textAreaValue]); const footer = useMemo(() => { - return { - cancelButton: { - onCancel: handleCancel, - label: translate('cancel') - }, - confirmButton: { - onConfirm: () => { - onConfirm(); - }, - label: translate('confirm'), - iconName: 'plus', - disabled: isConfirmDisabled, - color: COLORS.cm_primary_blue - } + const cancelButton = { + onCancel: handleCancel, + label: translate(readOnly ? 'close' : 'cancel') }; - }, [handleCancel, onConfirm, translate, isConfirmDisabled]); + return readOnly + ? { + cancelButton + } + : { + cancelButton, + confirmButton: { + onConfirm, + label: translate('confirm'), + iconName: 'plus', + disabled: isConfirmDisabled, + color: COLORS.cm_primary_blue + } + }; + }, [handleCancel, onConfirm, translate, isConfirmDisabled, readOnly]); if (!isOpen) return null; @@ -109,7 +113,7 @@ const TranslationModal = (props, context) => { value: textAreaValue, onChange: handleTextAreaChange }, - disabled: false + disabled: readOnly })} @@ -147,7 +151,8 @@ TranslationModal.propTypes = { theme: PropTypes.string }), language: PropTypes.string - }) + }), + readOnly: PropTypes.bool }; export default TranslationModal; diff --git a/packages/@coorpacademy-components/src/molecule/translation-modal/test/fixtures/default.js b/packages/@coorpacademy-components/src/molecule/translation-modal/test/fixtures/default.js index a1844887a5..ab2e3ae84b 100644 --- a/packages/@coorpacademy-components/src/molecule/translation-modal/test/fixtures/default.js +++ b/packages/@coorpacademy-components/src/molecule/translation-modal/test/fixtures/default.js @@ -13,7 +13,6 @@ export default { theme: 'coorpmanager', description: 'This is the tooltip text', value: 'Agility', - disabled: false, valid: false, error: '', required: true, @@ -28,7 +27,6 @@ export default { description: 'This is the tooltip text', value: 'Agility is the ability to quickly adapt to change, think on your feet, and respond efficiently in dynamic situations, enhancing performance in both individual and team environments.', - disabled: false, valid: false, error: '', required: true, @@ -45,7 +43,6 @@ export default { theme: 'coorpmanager', description: 'This is the tooltip text', value: 'Agilité', - disabled: false, valid: false, error: '', required: true, @@ -60,7 +57,6 @@ export default { theme: 'coorpmanager', description: 'This is the tooltip text', value: `L'agilité est la capacité de s'adapter rapidement aux changements, de penser sur le vif et de répondre efficacement dans des situations dynamiques, améliorant ainsi la performance tant dans des environnements individuels qu'en équipe.`, - disabled: false, valid: false, error: '', required: true, diff --git a/packages/@coorpacademy-components/src/molecule/translation-modal/test/fixtures/read-only.js b/packages/@coorpacademy-components/src/molecule/translation-modal/test/fixtures/read-only.js new file mode 100644 index 0000000000..bb6eeab42d --- /dev/null +++ b/packages/@coorpacademy-components/src/molecule/translation-modal/test/fixtures/read-only.js @@ -0,0 +1,69 @@ +export default { + props: { + isOpen: true, + onCancel: () => {}, + onConfirm: () => {}, + onClose: () => {}, + source: { + inputText: { + type: 'text', + title: 'Title', + hint: '7/80 characters', + placeholder: 'This is an input', + theme: 'coorpmanager', + description: 'This is the tooltip text', + value: 'Agility', + valid: false, + error: '', + required: true, + onChange: value => console.log(value) + }, + textArea: { + type: 'textarea', + title: 'Description', + hint: '181/400 characters', + placeholder: 'This is an input', + theme: 'coorpmanager', + description: 'This is the tooltip text', + value: + 'Agility is the ability to quickly adapt to change, think on your feet, and respond efficiently in dynamic situations, enhancing performance in both individual and team environments.', + valid: false, + error: '', + required: true, + onChange: value => console.log(value) + }, + inputLanguage: '🇬🇧 English (default language)' + }, + target: { + inputText: { + type: 'text', + title: 'Title', + hint: '8/80 characters', + placeholder: 'This is an input', + theme: 'coorpmanager', + description: 'This is the tooltip text', + value: 'Agilité', + valid: false, + error: '', + required: true, + onChange: value => console.log(value) + }, + textArea: { + type: 'textarea', + name: 'Description target', + title: 'Description', + hint: '215/400 characters', + placeholder: 'This is an input', + theme: 'coorpmanager', + description: 'This is the tooltip text', + value: `L'agilité est la capacité de s'adapter rapidement aux changements, de penser sur le vif et de répondre efficacement dans des situations dynamiques, améliorant ainsi la performance tant dans des environnements individuels qu'en équipe.`, + valid: false, + error: '', + required: true, + onChange: value => console.log(value) + }, + language: '🇫🇷 French' + }, + readOnly: true + } +};