@omniumretail/component-library 1.1.51 → 1.1.53

package/dist/main.css

@@ -18,8 +18,8 @@
 .gER2xKwlnobsIz4BLhGJ{background-color:var(--color-grey) !important}.gER2xKwlnobsIz4BLhGJ[aria-checked=true]{background:var(--color-orange) !important}
 .lOKzfPUFf3ukLT2wGZaY{display:grid;grid-template-columns:300px auto;gap:16px}.OIrZOBn2f036M5MGzc61,.adDQP_uvIYgNFVC4VdHj{background:#fff;padding:20px;overflow:auto}
 .yBjbWkudwA_AOwhHrnlc .ant-tree-title{font-weight:var(--font-weight-semibold)}.yBjbWkudwA_AOwhHrnlc button{margin-top:32px;width:100%}.yBjbWkudwA_AOwhHrnlc button:nth-child(3){margin-top:12px}.je000VEfsPqZupGr8ymu{font-size:var(--font-size-body-4);font-weight:600;line-height:100%;color:var(--color-blue);text-transform:uppercase}.tUDGWNXopUejF6zWJloy{margin-top:20px}
-.O0Juh2loT1HHb612gOA4 .ant-form-item{margin-bottom:0}.O0Juh2loT1HHb612gOA4 .ant-space{display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--color-blue);padding:16px 10px}.O0Juh2loT1HHb612gOA4 .ant-space-item{width:100%}.hg7oiINfKCZSUt6dEq4A{display:none}.BAso_dbeoowN7VtxWiKx{display:grid;grid-template-columns:minmax(18px, auto) 1fr 90px;gap:20px;color:var(--color-black);font-size:var(--font-size-body-4);line-height:100%;font-weight:var(--font-weight-medium);align-items:center}.qg_bZXG9dQdJvLBRGuqw{display:grid;grid-template-columns:minmax(18px, auto) 1fr 90px;gap:20px;color:var(--color-grey-dark);font-size:var(--font-size-body-3);align-items:center}.y8UJFmCyGQzEQk4XjnI9{display:none}.kknDal3CIbUXI7Lu2wPV{display:flex;align-items:center;justify-content:flex-start;gap:20px}.upuPapYjj1uGowukEEIi{display:none;align-items:center;justify-content:center}.KfrJPVKxY4b6bmXeJL5U{display:flex;align-items:center;justify-content:center;gap:16px}.zRPlv7rfSSACHPLZLs16,.EHyxN8DmDHOLkQDROSV5,.NLIlnBPfo09cpWYzpZ_J{font-size:var(--font-size-body-5);cursor:pointer}.AHIc83P7PkYUr3no83sO{margin-top:24px}
-.vw302ajYc4_7bIROncyM{font-size:var(--font-size-body-4);font-weight:600;line-height:100%;color:var(--color-blue);text-transform:uppercase;margin-bottom:32px}.DrsaZTs1Ny6wZ76RwDR9{font-size:var(--font-size-body-2);color:var(--color-black);font-weight:700;text-transform:uppercase}.HVSssNqaNxLcYT_1lxBL{display:grid;grid-template-columns:minmax(200px, 1fr) auto auto auto auto;gap:46px}.ACPbYsV0wNkissVLHcFh{margin-top:16px}Label{margin-bottom:8px}.g19LZsD26yzPPjBtV31w .ant-select{width:100%}.g19LZsD26yzPPjBtV31w .ant-select-selector{border-color:rgba(var(--color-black-rgb), 0.5) !important;height:50px !important;display:flex;align-items:center}.g19LZsD26yzPPjBtV31w .ant-select-arrow{color:var(--color-black)}.g19LZsD26yzPPjBtV31w .ant-switch{width:30px}
+.O0Juh2loT1HHb612gOA4 .ant-form-item{margin-bottom:0}.O0Juh2loT1HHb612gOA4 .ant-space{display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--color-blue);padding:16px 10px}.O0Juh2loT1HHb612gOA4 .ant-space-item{width:100%}.hg7oiINfKCZSUt6dEq4A{display:none}.BAso_dbeoowN7VtxWiKx{display:grid;grid-template-columns:minmax(18px, auto) 1fr 90px;gap:20px;color:var(--color-black);font-size:var(--font-size-body-4);line-height:100%;font-weight:var(--font-weight-medium);align-items:center}.qg_bZXG9dQdJvLBRGuqw{display:grid;grid-template-columns:minmax(18px, auto) 1fr 90px;gap:20px;color:var(--color-grey-dark);font-size:var(--font-size-body-3);align-items:center}.GbZVOtcaUURjn4CweVjF{display:flex;gap:40px;font-size:var(--font-size-body-3);align-items:center}.C3Qrjv76hDipL39fyfzf{display:flex;align-items:center;gap:8px}.y8UJFmCyGQzEQk4XjnI9{display:none}.kknDal3CIbUXI7Lu2wPV{display:flex;align-items:center;justify-content:flex-start;gap:20px}.CIMvcFtQWcBY31wttg2C{min-width:250px}@media(max-width: 768px){.CIMvcFtQWcBY31wttg2C{min-width:150px}}.upuPapYjj1uGowukEEIi{display:none;align-items:center;justify-content:center}.KfrJPVKxY4b6bmXeJL5U{display:flex;align-items:center;justify-content:center;gap:16px}.zRPlv7rfSSACHPLZLs16,.EHyxN8DmDHOLkQDROSV5,.NLIlnBPfo09cpWYzpZ_J{font-size:var(--font-size-body-5);cursor:pointer}.AHIc83P7PkYUr3no83sO{margin-top:24px}
+.vw302ajYc4_7bIROncyM{font-size:var(--font-size-body-4);font-weight:600;line-height:100%;color:var(--color-blue);text-transform:uppercase;margin-bottom:32px}.DrsaZTs1Ny6wZ76RwDR9{font-size:var(--font-size-body-2);color:var(--color-black);font-weight:700;text-transform:uppercase}.HVSssNqaNxLcYT_1lxBL{display:grid;grid-template-columns:minmax(200px, 1fr) auto auto auto auto;gap:46px}.ACPbYsV0wNkissVLHcFh{margin-top:16px}Label{margin-bottom:8px}.mIHYAri6ebHm4Oeb1ogj{min-width:200px}@media(max-width: 768px){.mIHYAri6ebHm4Oeb1ogj{min-width:150px}}.g19LZsD26yzPPjBtV31w .ant-select{width:100%}.g19LZsD26yzPPjBtV31w .ant-select-selector{border-color:rgba(var(--color-black-rgb), 0.5) !important;height:50px !important;display:flex;align-items:center}.g19LZsD26yzPPjBtV31w .ant-select-arrow{color:var(--color-black)}.g19LZsD26yzPPjBtV31w .ant-switch{width:30px}
 .j8_c3JHTX0JOkT36fF6A{contain:inline-size}.j8_c3JHTX0JOkT36fF6A .HgmGSts5FIH3osmekIYG{height:50px;width:300px}@media(min-width: 1024px){.j8_c3JHTX0JOkT36fF6A .HgmGSts5FIH3osmekIYG{width:450px}}.j8_c3JHTX0JOkT36fF6A .xlaG0XsJDRR9AClqXzzC .ant-tag{background-color:var(--color-orange);color:var(--color-white);padding:6px 16px;max-width:240px}.j8_c3JHTX0JOkT36fF6A .xlaG0XsJDRR9AClqXzzC .anticon-close{color:var(--color-white);font-size:12px}.j8_c3JHTX0JOkT36fF6A .xlaG0XsJDRR9AClqXzzC .anticon-close:hover{color:var(--color-black)}
 .BWmwZ5nFKyctBZyOAXzg{width:100%}.GWTSauaAl_v9W8o4YPxW{background:rgba(44,45,46,.0509803922);height:100%;position:relative}.GWTSauaAl_v9W8o4YPxW .ant-menu-light{background-color:rgba(0,0,0,0) !important;border-inline-end:none !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-title-content{font-size:17px;line-height:20px;font-weight:var(--font-weight-semibold)}.GWTSauaAl_v9W8o4YPxW .ant-menu-title-content:hover{color:var(--color-orange)}.GWTSauaAl_v9W8o4YPxW .ant-menu-sub .ant-menu-title-content{font-size:15px;line-height:18px;font-weight:var(--font-weight-medium)}.GWTSauaAl_v9W8o4YPxW .ant-menu-sub .ant-menu-item{height:30px;line-height:30px;margin-bottom:16px}.GWTSauaAl_v9W8o4YPxW .ant-menu-sub .ant-menu-item:first-child{margin-top:-10px}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu{border-top:1px solid var(--color-orange);border-radius:0}.GWTSauaAl_v9W8o4YPxW .ant-menu-item:hover{background-color:initial !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-item-selected,.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-selected>.ant-menu-submenu-title{color:var(--color-orange);background-color:initial}.GWTSauaAl_v9W8o4YPxW .ant-menu-inline .ant-menu-sub.ant-menu-inline{background:initial}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-title{height:50px !important;line-height:50px !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-title:hover{background-color:initial !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-title .anticon{color:var(--color-orange)}.GWTSauaAl_v9W8o4YPxW .ant-menu-inline.ant-menu-root .ant-menu-item>.ant-menu-title-content{overflow-x:auto;text-overflow:unset}.hWGer1IJ7RdkfQWwYfsw{position:absolute;top:24px;left:24px;right:24px;height:144px}.MD1FhirslDDwd2izGwai{font-size:var(--font-size-body-2);line-height:14px;font-weight:var(--font-weight-light);display:inline-block;padding:12px;cursor:pointer;position:absolute;right:0;top:60px}.RxGn4c38kNq8Ai4ypW_x{position:absolute;top:144px;left:24px;right:24px;bottom:0;overflow-y:auto;overflow-x:hidden;padding-bottom:24px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{border-radius:10px;background:rgba(0,0,0,.1)}::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(0,0,0,.2)}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.9)}
 .rdjN4ln3xiUoa6Q0NMMm{display:flex;flex-direction:column;gap:16px;height:100%}@media(min-width: 600px){.rdjN4ln3xiUoa6Q0NMMm{display:grid;grid-template-columns:220px auto}}@media(min-width: 768px){.rdjN4ln3xiUoa6Q0NMMm{grid-template-columns:300px auto}}.Q4flbvKEPN6Jx9Cob22I{background:#ebeced;overflow:auto;padding:20px}@media(max-width: 599px){.Q4flbvKEPN6Jx9Cob22I{padding:20px 20px 0 20px;max-height:80px}}.hK3soC6m563VuiLnNutq{background:var(--color-white);overflow:auto;padding:20px}@media(max-width: 599px){.hK3soC6m563VuiLnNutq{height:100%}}.guqqOMHeZE56Bg2p5Ad8{font-size:var(--font-size-body-2);color:var(--color-blue);margin-bottom:12px;font-weight:var(--font-weight-semibold);text-transform:uppercase}@media(min-width: 768px){.guqqOMHeZE56Bg2p5Ad8{font-size:var(--font-size-body-4);margin-bottom:36px}}.wRCQxnQc_MZGDeiY1bcL{padding-bottom:15px;font-weight:var(--font-weight-bold);font-size:var(--font-size-body-2)}@media(min-width: 768px){.wRCQxnQc_MZGDeiY1bcL{font-size:var(--font-size-body-4)}}.JRmeFBsSP1f1HJwarMpc{cursor:pointer}.Y6yF3VITdrKdQzDtqTZX{padding-left:16px}.Y6yF3VITdrKdQzDtqTZX .wRCQxnQc_MZGDeiY1bcL{font-weight:var(--font-weight-semibold)}.Y6yF3VITdrKdQzDtqTZX .aKZCkmPsc0LiPdj3sEeG .Y6yF3VITdrKdQzDtqTZX .wRCQxnQc_MZGDeiY1bcL{font-weight:var(--font-weight-light)}.aKZCkmPsc0LiPdj3sEeG{display:block}.U_3frSKmaOQyTCb9oBkg{color:var(--color-orange)}.GEZDeWAneRLnZQyf4y9l{margin-bottom:16px}@media(min-width: 768px){.GEZDeWAneRLnZQyf4y9l{margin-bottom:24px}}.YcOvMLXE7vKR2Y0_BPRr{font-size:var(--font-size-body-3);color:var(--color-blue);font-weight:var(--font-weight-semibold);margin-bottom:8px}@media(min-width: 768px){.YcOvMLXE7vKR2Y0_BPRr{font-size:var(--font-size-body-4)}}.vlMh_CCr45wbKV4fMhJx{font-size:var(--font-size-body-2);font-weight:var(--font-weight-light);color:var(--color-black)}@media(min-width: 768px){.vlMh_CCr45wbKV4fMhJx{font-size:var(--font-size-body-3)}}.NZ_ohAxNxhxZsCBr2PRA{display:flex;flex-direction:row;gap:12px;margin-bottom:24px}@media(min-width: 768px){.NZ_ohAxNxhxZsCBr2PRA{margin-bottom:36px}}.CArVrMs2ac6JvM1VGLSw{flex-direction:column;border-bottom:1px solid rgba(var(--color-blue-rgb), 0.2);margin-bottom:24px}.CArVrMs2ac6JvM1VGLSw .OpqJ6gab6fPIq3KyckPO{width:100%;border-bottom:none}.CArVrMs2ac6JvM1VGLSw .E9TXHxbgaI6LGMZHG9bV{width:100%;height:auto}.CArVrMs2ac6JvM1VGLSw .E9TXHxbgaI6LGMZHG9bV .ant-input{min-height:140px}.CArVrMs2ac6JvM1VGLSw .E9TXHxbgaI6LGMZHG9bV .ant-form-item{margin-bottom:16px}.OpqJ6gab6fPIq3KyckPO{width:calc(100% - 112px);border-bottom:1px solid rgba(var(--color-blue-rgb), 0.2)}.E9TXHxbgaI6LGMZHG9bV{width:100px;height:50px;align-self:flex-end}.xdLvKgnXC4tm2aa6tAap{font-size:var(--font-size-body-2);font-weight:var(--font-weight-semibold);margin-bottom:8px}@media(min-width: 768px){.xdLvKgnXC4tm2aa6tAap{font-size:var(--font-size-body-3)}}.r5obiTduSUBq1uL7oceW{font-weight:var(--font-weight-light);margin-bottom:4px}

package/dist/types/components/Category/CategoryContent/index.d.ts

@@ -2,6 +2,8 @@ interface categoryContent {
     categoryContentShow: boolean;
     categoryContentInfo: any;
     categorySidebarData: any;
+    chooseResponseType?: boolean;
+    responseTypeOptions?: any;
 }
 export declare const CategoryContent: (props: categoryContent) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/Category/index.d.ts

@@ -2,6 +2,8 @@ import { DataNode } from './CategorySidebar';
 interface Category {
     data: DataNode[];
     serverReadyData: any;
+    chooseResponse?: boolean;
+    responseTypeOptions?: any;
 }
 export declare const Category: (props: Category) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/Questions/SingleQuestion/index.d.ts

@@ -1 +1 @@
-export declare const SingleQuestion: ({ key, provided, snapshot, remove, name, showGrade, handleChanges, ...restField }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const SingleQuestion: ({ key, provided, snapshot, remove, name, showGrade, handleChanges, showCheckbox, responseTypeOptions, ...restField }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Questions/index.d.ts

@@ -1,5 +1,7 @@
 export interface QuestionsProps {
     showGrade?: boolean;
+    showCheckbox?: boolean;
     handleChanges: any;
+    responseTypeOptions: any;
 }
 export declare const Questions: (props: QuestionsProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.1.51",
+  "version": "1.1.53",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",

package/src/components/Category/Category.stories.tsx

@@ -13,8 +13,8 @@ const Template: Story<any> = (args) => {
     useEffect(() => {
         console.log(serverData);
     }, [serverData])
-    
-    return <Category {...args} serverReadyData={setServerData} data={[
+
+    return <Category {...args} chooseResponse serverReadyData={setServerData} data={[
         {
             "title": "2 (Q: 0) (G: 2)",
             "key": "0",
@@ -24,7 +24,14 @@ const Template: Story<any> = (args) => {
                 "isYesOrNo": true,
                 "generalEvaluationLevel": "0",
                 "grade": "2",
-                "questions": []
+                "questions": [
+                    {
+                        "emphasis": true,
+                        "info": "lol",
+                        "mandatory": false,
+                        "question": ""
+                    }
+                ]
             },
             "children": []
         },
@@ -82,6 +89,19 @@ const Template: Story<any> = (args) => {
             },
             "children": []
         }
+    ]} responseTypeOptions={[
+        {
+            "value": "B867BEA8-E0A4-44D2-BBDA-7CB89334D80E",
+            "label": "teste3Update",
+        },
+        {
+            "value": "B8267BEA8-E0A4-44D2-BBDA-7CB89334D80E",
+            "label": "test2eUpdate",
+        },
+        {
+            "value": "B867B4EA8-E0A4-44D2-BBDA-7CB89334D80E",
+            "label": "testeU4pdate",
+        }
     ]}></Category>
 };
 

package/src/components/Category/CategoryContent/index.tsx

@@ -5,7 +5,7 @@ import { InputField } from '../../Input';
 import { Label } from '../../Label';
 import { Questions } from '../../Questions';
 import { Switch } from '../../Switch';
-import { useCallback, useEffect, useState } from 'react';
+import { SetStateAction, useCallback, useEffect, useState } from 'react';
 import styles from './styles.module.scss';
 import { t } from 'i18next';
 
@@ -13,19 +13,24 @@ interface categoryContent {
     categoryContentShow: boolean;
     categoryContentInfo: any;
     categorySidebarData: any;
+    chooseResponseType?: boolean;
+    responseTypeOptions?: any;
 }
 
 const defaultInitialValues = {
     generalEvaluationLevel: "0",
     questions: [],
     openAnswer: false,
-    isYesOrNo: false
+    isYesOrNo: false,
+    emphasis: false
 };
 
 export const CategoryContent = (props: categoryContent) => {
     const {
         categoryContentShow,
-        categorySidebarData
+        categorySidebarData,
+        chooseResponseType,
+        responseTypeOptions
     } = props;
 
     const [contentInfo, setContentInfo] = useState<any>(defaultInitialValues);
@@ -76,7 +81,7 @@ export const CategoryContent = (props: categoryContent) => {
 
     return (
         <div className={styles.categoryContent}>
-            <div className={styles.title}>Editar Categoria</div>
+            <div className={styles.title}>{t('components.categoryContent.editCategory')}</div>
 
             {
                 !categoryContentShow
@@ -121,7 +126,7 @@ export const CategoryContent = (props: categoryContent) => {
 
                                 {!categorySidebarData?.data?.children?.length &&
                                     <>
-                                        {!switchYesOrNoAnswStatus &&
+                                        {(!switchYesOrNoAnswStatus && !chooseResponseType) &&
                                             <div className={styles.openAnswer}>
                                                 <Label isUppercase>
                                                     {t('components.categoryContent.openAnswer')}
@@ -135,7 +140,7 @@ export const CategoryContent = (props: categoryContent) => {
                                             </div>
                                         }
 
-                                        {!switchOpenAnswStatus &&
+                                        {(!switchOpenAnswStatus && !chooseResponseType) &&
                                             <div className={styles.yesNoAnswer}>
                                                 <Label isUppercase>
                                                     {t('components.categoryContent.yesNoAnswer')}
@@ -150,7 +155,7 @@ export const CategoryContent = (props: categoryContent) => {
                                         }
 
                                         {
-                                            !switchOpenAnswStatus && !switchYesOrNoAnswStatus &&
+                                            (!switchOpenAnswStatus && !switchYesOrNoAnswStatus && !chooseResponseType) &&
                                             <>
                                                 <div className={styles.generalEvaluationLevel}>
                                                     <Label isUppercase>
@@ -159,34 +164,39 @@ export const CategoryContent = (props: categoryContent) => {
                                                     <Form.Item
                                                         name={['generalEvaluationLevel']}
                                                     >
-                                                        <Select options={[
-                                                            {
-                                                                value: '0',
-                                                                label: '1 a 5',
-                                                            },
-                                                            {
-                                                                value: '1',
-                                                                label: '1 a 4',
-                                                            },
-                                                            {
-                                                                value: '2',
-                                                                label: '1 a 5 ou “Não Aplicável”',
-                                                            },
-                                                        ]} onBlur={handleInputChange}
+                                                        < Select
+                                                            options={[
+                                                                {
+                                                                    value: '0',
+                                                                    label: '1 a 5',
+                                                                },
+                                                                {
+                                                                    value: '1',
+                                                                    label: '1 a 4',
+                                                                },
+                                                                {
+                                                                    value: '2',
+                                                                    label: '1 a 5 ou “Não Aplicável”',
+                                                                },
+                                                            ]}
+                                                            onBlur={handleInputChange}
                                                         />
                                                     </Form.Item>
                                                 </div>
 
-                                                <div className={styles.grade}>
-                                                    <Label isUppercase>
-                                                        {t('components.categoryContent.weighting')}
-                                                    </Label>
-                                                    <Form.Item
-                                                        name={['grade']}
-                                                    >
-                                                        <InputField placeholder={'EX: 15%'} onBlur={handleInputChange} />
-                                                    </Form.Item>
-                                                </div>
+                                                {!chooseResponseType &&
+                                                    <div className={styles.grade}>
+                                                        <Label isUppercase>
+                                                            {t('components.categoryContent.weighting')}
+                                                        </Label>
+                                                        <Form.Item
+                                                            name={['grade']}
+                                                        >
+                                                            <InputField placeholder={'EX: 15%'} onBlur={handleInputChange} />
+                                                        </Form.Item>
+                                                    </div>
+                                                }
+
                                             </>
                                         }
                                     </>
@@ -200,8 +210,10 @@ export const CategoryContent = (props: categoryContent) => {
                                     </Label>
                                     <Form.Item>
                                         <Questions
-                                            showGrade={(switchOpenAnswStatus || switchYesOrNoAnswStatus) === true ? false : true}
+                                            showGrade={(switchOpenAnswStatus || switchYesOrNoAnswStatus || chooseResponseType) === true ? false : true}
+                                            showCheckbox={chooseResponseType && true}
                                             handleChanges={handleInputChange}
+                                            responseTypeOptions={responseTypeOptions}
                                         />
                                     </Form.Item>
                                 </div>

package/src/components/Category/CategoryContent/styles.module.scss

@@ -28,6 +28,14 @@ Label {
     margin-bottom: 8px;
 }
 
+.selectResponseType {
+    min-width: 200px;
+
+    @media(max-width: 768px) {
+        min-width: 150px;
+    }
+}
+
 .categoryContent {
     :global {
         .ant-select {
@@ -40,6 +48,7 @@ Label {
             display: flex;
             align-items: center;
         }
+        
         .ant-select-arrow {
             color: var(--color-black);
         }

package/src/components/Category/index.tsx

@@ -6,11 +6,15 @@ import { CategoryContent } from './CategoryContent';
 interface Category {
     data: DataNode[];
     serverReadyData: any;
+    chooseResponse?: boolean;
+    responseTypeOptions?: any;
 }
 
 export const Category = (props: Category) => {
     const {
-        data
+        data,
+        chooseResponse,
+        responseTypeOptions
     } = props;
 
     const [categoryContentInfo, setCategoryContentInfo] = useState<any>();
@@ -29,10 +33,21 @@ export const Category = (props: Category) => {
     return (
         <div className={styles.category}>
             <div className={styles.sidebarWrapper}>
-                <CategorySidebar categorySidebarInfo={setCategorySidebarInfo} categoryContentData={categoryContentInfo} data={data} categoryContentFinalData={setFinalData}/>
+                <CategorySidebar
+                    categorySidebarInfo={setCategorySidebarInfo}
+                    categoryContentData={categoryContentInfo}
+                    data={data}
+                    categoryContentFinalData={setFinalData}
+                />
             </div>
             <div className={styles.contentWrapper}>
-                <CategoryContent categoryContentInfo={setCategoryContentInfo} categoryContentShow={showContent} categorySidebarData={categorySidebarInfo} />
+                <CategoryContent
+                    chooseResponseType={chooseResponse}
+                    responseTypeOptions={responseTypeOptions}
+                    categoryContentInfo={setCategoryContentInfo}
+                    categoryContentShow={showContent}
+                    categorySidebarData={categorySidebarInfo}
+                />
             </div>
         </div>
     )

package/src/components/Questions/SingleQuestion/index.tsx

@@ -1,11 +1,26 @@
 import { DeleteOutlined, HolderOutlined, InfoCircleOutlined } from '@ant-design/icons';
-import { Form, Input, Space } from 'antd';
+import { Checkbox, Form, Input, Space } from 'antd';
 import { t } from 'i18next';
 import styles from './styles.module.scss';
+import { useState } from 'react';
+import { Select } from 'antd';
+
+export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrade, handleChanges, showCheckbox, responseTypeOptions, ...restField }: any) => {
+    const [mandatoryCheckbox, setMandatoryCheckbox] = useState<boolean>(false);
+    const [emphasisCheckbox, setEmphasisCheckbox] = useState<boolean>(false);
+
+    const onCheckboxMandatoryHandler = (checked: boolean) => {
+        setMandatoryCheckbox(checked);
+        handleChanges();
+    }
+
+    const onCheckboxEmphasisHandler = (checked: boolean) => {
+        setEmphasisCheckbox(checked);
+        handleChanges();
+    }
 
-export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrade, handleChanges, ...restField }: any) => {    
     return (
-        <div 
+        <div
             key={key}
             ref={provided.innerRef}
             snapshot={snapshot}
@@ -18,10 +33,12 @@ export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrad
                     <div className={styles.drag}>
                         <HolderOutlined />
                     </div>
+
                     <div className={styles.content}>
                         <div className={styles.label}>
                             abc
                         </div>
+
                         <Form.Item
                             {...restField}
                             name={[name, 'question']}
@@ -29,44 +46,33 @@ export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrad
                             <Input placeholder={`${t('components.category.placeholderQuestion')}`} onBlur={handleChanges} />
                         </Form.Item>
                     </div>
-                    <div className={styles.actions}>
-                         {/* <div className={styles.edit}>
-                            <div className={styles.notEditing} 
-                            // onClick={() => handleStartEdit(index)}
-                            >
-                                <EditOutlined />
-                            </div>
 
-                            <div className={styles.editing}>
-                                <CheckOutlined style={{ color: 'var( --color-confirmation-600)' }} 
-                                onClick={() => handleSaveEdit()} 
-                                />
-                                <CloseOutlined style={{ color: 'var( --color-warning-500)' }}     
-                                //onClick={() => handleCancelEdit(index)} 
-                                />
-                            </div>
-                        </div> */}
+                    <div className={styles.actions}>
                         <div className={styles.delete}>
                             <DeleteOutlined onClick={() => remove(name)} />
                         </div>
                     </div>
                 </div>
+
                 <div className={styles.information}>
                     <div className={styles.infoIcon}>
                         <InfoCircleOutlined />
                     </div>
+
                     <div className={styles.content}>
                         <div className={styles.label}>
                             xpto
                         </div>
+
                         <Form.Item
                             {...restField}
                             name={[name, 'info']}
                         >
-                            <Input placeholder={`${t('components.category.placeholderInfo')}`} onBlur={handleChanges}/>
+                            <Input placeholder={`${t('components.category.placeholderInfo')}`} onBlur={handleChanges} />
                         </Form.Item>
                     </div>
-                    {showGrade && 
+
+                    {showGrade &&
                         <div className={styles.grade}>
                             <Form.Item
                                 {...restField}
@@ -76,8 +82,53 @@ export const SingleQuestion = ({ key, provided, snapshot, remove, name, showGrad
                             </Form.Item>
                         </div>
                     }
-
                 </div>
+
+                {showCheckbox &&
+                    <div className={styles.questionFooter}>
+                        <div />
+
+                        <div className={styles.checkboxContainer}>
+                            <Form.Item
+                                {...restField}
+                                name={[name, 'mandatory']}
+                                valuePropName='checked'
+                            >
+                                <Checkbox onChange={(e) => onCheckboxMandatoryHandler(e.target.checked)} checked={mandatoryCheckbox} />
+                            </Form.Item>
+
+                            <span>{t('components.category.mandatoryAnswer')}</span>
+                        </div>
+
+                        <div className={styles.checkboxContainer}>
+                            <Form.Item
+                                {...restField}
+                                name={[name, 'emphasis']}
+                                valuePropName='checked'
+                            >
+                                <Checkbox onChange={(e) => onCheckboxEmphasisHandler(e.target.checked)} checked={emphasisCheckbox} />
+                            </Form.Item>
+
+                            <span>{t('components.category.emphasisAnswer')}</span>
+                        </div>
+
+                        <div className={styles.checkboxContainer}>
+                            <Form.Item
+                                {...restField}
+                                name={[name, 'responseType']}
+                                rules={[{ required: true, message: t('components.category.errorResponseType')! }]}
+                            >
+                                <Select
+                                    options={responseTypeOptions}
+                                    onBlur={handleChanges}
+                                    className={styles.selectResponseType}
+                                />
+                            </Form.Item>
+
+                            <span>{t('components.category.responseType')}</span>
+                        </div>
+                    </div>
+                }
             </Space>
         </div>
     );

package/src/components/Questions/SingleQuestion/styles.module.scss

@@ -45,6 +45,19 @@ $questionAndInformationGap: 20px;
     align-items: center;
 }
 
+.questionFooter {
+    display: flex;
+    gap: 40px;
+    font-size: var(--font-size-body-3);
+    align-items: center;
+}
+
+.checkboxContainer {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
 .input {
     display: none;
 }
@@ -56,6 +69,14 @@ $questionAndInformationGap: 20px;
     gap: 20px;
 }
 
+.selectResponseType {
+    min-width: 250px;
+
+    @media(max-width: 768px) {
+        min-width: 150px;
+    }
+}
+
 .notEditing {
     display: none;
     align-items: center;

package/src/components/Questions/index.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { Dispatch, SetStateAction, useContext } from 'react';
 import { PlusOutlined } from '@ant-design/icons';
 import { Form } from 'antd';
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
@@ -9,13 +9,17 @@ import { t } from 'i18next';
 
 export interface QuestionsProps {
     showGrade?: boolean;
+    showCheckbox?: boolean;
     handleChanges: any;
+    responseTypeOptions: any;
 }
 
 export const Questions = (props: QuestionsProps) => {
     const {
         showGrade = true,
+        showCheckbox,
         handleChanges,
+        responseTypeOptions
     } = props;
 
     const formContext = useContext(FieldContext);
@@ -54,7 +58,9 @@ export const Questions = (props: QuestionsProps) => {
                                                                 remove={remove}
                                                                 name={name}
                                                                 showGrade={showGrade}
+                                                                showCheckbox={showCheckbox}
                                                                 handleChanges={handleChanges}
+                                                                responseTypeOptions={responseTypeOptions}                                                          
                                                             />
                                                         </>
                                                     )}

package/src/locales/en.json

@@ -44,7 +44,11 @@
             "errorQuestion": "Error/Missing Question",
             "placeholderGrade": "Grade",
             "errorGrade": "Error/Missing Grade",
-            "newCategory": "New Category"
+            "newCategory": "New Category",
+            "mandatoryAnswer": "Mandatory answer",
+            "emphasisAnswer": "Highlight",
+            "responseType": "Response Type",
+            "errorResponseType": "Response type missing"
         },
         "categorySidBar": {
             "addCategory": "Add Category",
@@ -53,6 +57,7 @@
         "categoryContent": {
             "message": "Please select a category in the sidebar",
             "categoryName": "Category Name",
+            "editCategory": "Edit Category",
             "categoryNameError": "Error/Missing Category Name",
             "weighting": "Weighting",
             "openAnswer": "Open Answer",

package/src/locales/es.json

@@ -44,7 +44,11 @@
             "errorQuestion": "Error/Pregunta Faltante",
             "placeholderGrade": "Calificación",
             "errorGrade": "Error/Calificación Faltante",
-            "newCategory": "Nueva Categoría"
+            "newCategory": "Nueva Categoría",
+            "mandatoryAnswer": "Respuesta obligatoria",
+            "emphasisAnswer": "Resaltar",
+            "responseType": "Tipo de respuesta",
+            "errorResponseType": "Tipo de respuesta faltante"
         },
         "categorySidBar": {
             "addCategory": "Agregar Categoría",
@@ -53,6 +57,7 @@
         "categoryContent": {
             "message": "Por favor, seleccione una categoría en la barra lateral",
             "categoryName": "Nombre de la Categoría",
+            "editCategory": "Editar Categoría",
             "categoryNameError": "Error/Nombre de Categoría Faltante",
             "weighting": "Ponderación",
             "openAnswer": "Respuesta Abierta",

package/src/locales/pt.json

@@ -44,7 +44,11 @@
             "errorQuestion": "Questão em falta",
             "placeholderGrade": "Ponderação",
             "errorGrade": "Ponderação em falta",
-            "newCategory": "Nova categoria"
+            "newCategory": "Nova categoria",
+            "mandatoryAnswer": "Resposta obrigatória",
+            "emphasisAnswer": "Destaque",
+            "responseType": "Tipo de resposta",
+            "errorResponseType": "Tipo de resposta em falta"
         },
         "categorySidBar": {
             "addCategory": "Adicionar categoria",
@@ -53,6 +57,7 @@
         "categoryContent": {
             "message": "Por favor selecione uma categoria na barra lateral",
             "categoryName": "Nome da categoria",
+            "editCategory": "Editar Categoria",
             "categoryNameError": "Nome categoria em falta",
             "weighting": "Ponderação",
             "openAnswer": "Resposta aberta",