add readOnly to translation modal

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

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,29 @@ 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
-      }
-    };
-  }, [handleCancel, onConfirm, translate, isConfirmDisabled]);
+    return readOnly
+      ? {
+          cancelButton: {
+            onCancel: handleCancel,
+            label: translate('close')
+          }
+        }
+      : {
+          cancelButton: {
+            onCancel: handleCancel,
+            label: translate('cancel')
+          },
+          confirmButton: {
+            onConfirm: () => {
+              onConfirm();
+            },
+            label: translate('confirm'),
+            iconName: 'plus',
+            disabled: isConfirmDisabled,
+            color: COLORS.cm_primary_blue
+          }
+        };
+  }, [handleCancel, onConfirm, translate, isConfirmDisabled, readOnly]);
 
   if (!isOpen) return null;
 
@@ -109,7 +117,7 @@ const TranslationModal = (props, context) => {
               value: textAreaValue,
               onChange: handleTextAreaChange
             },
-            disabled: false
+            disabled: readOnly
           })}
         </div>
       </div>
@@ -147,7 +155,8 @@ TranslationModal.propTypes = {
       theme: PropTypes.string
     }),
     language: PropTypes.string
-  })
+  }),
+  readOnly: PropTypes.bool
 };
 
 export default TranslationModal;

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,

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
+  }
+};