odaptos_design_system 1.2.8 → 1.3.1

package/src/Icons/MediaControl/MeetingIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function MeetingIcon({
   stroke,

package/src/Icons/MediaControl/MicrophoneIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function MicrophoneIcon({
   stroke,

package/src/Icons/MediaControl/MoveInIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function MoveInIcon({
   stroke,

package/src/Icons/MediaControl/MuteIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function MuteIcon({
   stroke,

package/src/Icons/MediaControl/PauseIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function PauseIcon({
   stroke,

package/src/Icons/MediaControl/PlayIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function PlayIcon({
   stroke,

package/src/Icons/MediaControl/PreviousIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function PreviousIcon({
   stroke,

package/src/Icons/MediaControl/RecordingIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function RecordingIcon({
   stroke,

package/src/Icons/MediaControl/VolumeIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function VolumeIcon({
   stroke,

package/src/Icons/Miscellaneous/AddSeatIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function AddSeatIcon({
   stroke,

package/src/Icons/Miscellaneous/AddUsersIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function AddUsersIcon({
   stroke,

package/src/Icons/Miscellaneous/BillPdfIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function BillPdfIcon({
   stroke,

package/src/Icons/Miscellaneous/BinocularIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function BinocularIcon({
   stroke,

package/src/Icons/Miscellaneous/BrainIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function BrainIcon({
   stroke,

package/src/Icons/Miscellaneous/ChatBubbleIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ChatBubbleIcon({
   stroke,

package/src/Icons/Miscellaneous/ChatIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ChatIcon({
   stroke,

package/src/Icons/Miscellaneous/CheckoutIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function CheckoutIcon({
   stroke,

package/src/Icons/Miscellaneous/ClipIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ClipIcon({
   stroke,

package/src/Icons/Miscellaneous/CreditCardIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function CreditCardIcon({
   stroke,

package/src/Icons/Miscellaneous/DownloadIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function DownloadIcon({
   stroke,

package/src/Icons/Miscellaneous/EarthIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function EarthIcon({
   stroke,

package/src/Icons/Miscellaneous/FaceCenterIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function FaceCenterIcon({
   stroke,

package/src/Icons/Miscellaneous/FaceRecognitionIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function FaceRecognitionIcon({
   stroke,

package/src/Icons/Miscellaneous/FilesIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function FilesIcon({
   stroke,

package/src/Icons/Miscellaneous/FillRecordIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function FillRecordIcon({
   stroke,

package/src/Icons/Miscellaneous/FolderIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function FolderIcon({
   stroke,

package/src/Icons/Miscellaneous/GoogleIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function GoogleIcon({
   stroke = 'none',

package/src/Icons/Miscellaneous/HardDriveIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function HardDriveIcon({
   stroke,

package/src/Icons/Miscellaneous/HelpIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function HelpIcon({
   stroke,

package/src/Icons/Miscellaneous/LanguageIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function LanguageIcon({
   stroke,

package/src/Icons/Miscellaneous/LinkIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function LinkIcon({
   stroke,

package/src/Icons/Miscellaneous/MetaAnalyseIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function MetaAnalyseIcon({
   stroke,

package/src/Icons/Miscellaneous/ModeratedIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ModeratedIcon({
   stroke,

package/src/Icons/Miscellaneous/NbOfUsersIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function NbOfUsersIcon({
   stroke,

package/src/Icons/Miscellaneous/NeutralBackgroudIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function NeutralBackgroudIcon({
   stroke,

package/src/Icons/Miscellaneous/ReportIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ReportIcon({
   stroke,

package/src/Icons/Miscellaneous/SeatIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function SeatIcon({
   stroke,

package/src/Icons/Miscellaneous/SendEmailIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function SendEmailIcon({
   stroke,

package/src/Icons/Miscellaneous/SendIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function SendIcon({
   stroke,

package/src/Icons/Miscellaneous/SmartBrainIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function SmartBrainIcon({
   stroke,

package/src/Icons/Miscellaneous/TasksIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function TasksIcon({
   stroke,

package/src/Icons/Miscellaneous/TestDetailsIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function TestDetailsIcon({
   stroke,

package/src/Icons/Miscellaneous/TestIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function TestIcon({
   stroke,

package/src/Icons/Miscellaneous/UnmoderatedIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function UnmoderatedIcon({
   stroke,

package/src/Icons/Notifications/AlamBellIdleIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function CopyPasteIcon({
   stroke,

package/src/Icons/Notifications/AlarmBellStatusIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function AlarmBellStatusIcon({
   stroke,

package/src/Icons/Notifications/NotifAlertIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function NotifAlertIcon({
   stroke,

package/src/Interviews/ChatInput.tsx

@@ -1,7 +1,6 @@
+import React from 'react';
 import { SendEmailIcon } from '../';
 import styles from './ChatInput.modules.scss';
-import React from 'react';
-
 interface ChatInputProps {
   className?: string;
   value: string;

package/src/Interviews/ControlsBar.tsx

@@ -35,8 +35,8 @@ export const ControlsBar = ({
   enableScreenSharing,
   enableMicrophone,
   enableCamera,
-  displayTasks,
   displayChat,
+  displayTasks,
   isChatOpen,
   areTasksOpen,
   isNewTask,
@@ -81,7 +81,7 @@ export const ControlsBar = ({
           variant="protocol"
           icon={<TasksIcon />}
           onClick={() => {
-            if (displayTasks) return displayTasks();
+            if (displayTasks) displayTasks();
           }}
           isActive={areTasksOpen}
           isNotif={isNewTask}
@@ -92,7 +92,7 @@ export const ControlsBar = ({
           variant="protocol"
           icon={<TasksIcon />}
           onClick={() => {
-            if (displayTasks) return displayTasks();
+            if (displayTasks) displayTasks();
           }}
           isActive={areTasksOpen}
           isNotif={isNewTask}

package/src/Interviews/MarkUpBar.tsx

@@ -9,9 +9,9 @@ export interface MarkUpBarProps {
 /**
  * TODO : Be sure that we want to keep the 'QWERTY' selection system
  */
-export const MarkUpBar = ({ className, onClick }: MarkUpBarProps) => {
+export const MarkUpBar = ({ className, onClick, ...props }: MarkUpBarProps) => {
   return (
-    <div className={`${styles.markup_bar} ${className ?? ''}`}>
+    <div className={`${styles.markup_bar} ${className ?? ''}`} {...props}>
       <div className={styles.smiley_list}>
         <button className={styles.smiley_btn} onClick={() => onClick('Y')}>
           🏳

package/src/LateralMenu/LateralMenu.tsx

@@ -1,8 +1,7 @@
+import React from 'react';
 import styles from './LateralMenu.modules.scss';
 import { LogoNormal as Logo } from '../Icons';
 import Grid from '@mui/material/Grid';
-import React from 'react';
-
 interface LateralMenuProps {
   content: JSX.Element;
   isLogoDisplay?: boolean;

package/src/Modal/Modal.tsx

@@ -58,7 +58,7 @@ export const Modal = ({
       <MuiModal
         aria-labelledby="transition-modal-title"
         aria-describedby="transition-modal-description"
-        className={`${styles.modal_overlay} ${className}`}
+        className={`${styles.modal_overlay} ${className ?? ''}`}
         open={open}
         onClose={onClose}
         closeAfterTransition

package/src/MultiSelect/{MultiSelect.scss → MultiSelect.modules.scss}

@@ -32,7 +32,7 @@
     gap: 0.5rem;
   }
 
-  .tags-container {
+  .tags_container {
     display: flex;
     max-width: 80%;
     flex-wrap: nowrap;
@@ -64,3 +64,17 @@
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 }
+
+.input_top_label {
+  margin-bottom: 0.625rem;
+}
+
+.text_below {
+  margin: 0.25rem 0.5rem 0.25rem 0.75rem;
+}
+
+.icon {
+  width: 1rem !important;
+  height: 1rem !important;
+  margin-left: 0.25rem;
+}

package/src/MultiSelect/MultiSelect.tsx

@@ -6,7 +6,7 @@ import { ArrowLineDownIcon, RemoveCircledIcon } from '../Icons';
 import { Text } from '../Typography/Text';
 import { TextForButton } from '../Typography/TextForButton';
 import { Checkbox } from '../Checkbox/Checkbox';
-import './MultiSelect.scss';
+import styles from './MultiSelect.modules.scss';
 import Chip from '@mui/material/Chip';
 
 const CssTextField = styled(TextField)({
@@ -112,6 +112,9 @@ interface MultiSelectProps {
   required?: boolean;
   defaultValue: any;
   options: any[];
+  error?: boolean;
+  helperText?: string;
+  errorText?: string;
   onChange: (value: any) => void;
   deleteOption: (value: any) => void;
 }
@@ -131,6 +134,9 @@ export const MultiSelect = ({
   topLabel,
   id,
   required,
+  error,
+  helperText,
+  errorText,
   deleteOption,
   ...props
 }: MultiSelectProps) => {
@@ -150,7 +156,7 @@ export const MultiSelect = ({
           text={`${topLabel ? topLabel : ''} ${required ? '*' : ''}`}
           weight="bold"
           size="base"
-          className={'input_top_label'}
+          className={styles.input_top_label}
           required={required}
         />
       )}
@@ -192,11 +198,12 @@ export const MultiSelect = ({
             size="small"
             required={required}
             name={name}
+            error={error}
           />
         )}
         renderTags={(value) => {
           return (
-            <div className="tags-container no_scrollbar">
+            <div className={`${styles.tags_container} ${styles.no_scrollbar}`}>
               {value.map((option, index) => (
                 <Chip
                   label={option.label}
@@ -216,11 +223,32 @@ export const MultiSelect = ({
             </li>
           );
         }}
-        clearIcon={<RemoveCircledIcon fill="black" />}
-        popupIcon={<ArrowLineDownIcon fill="black" />}
-        className={`newAutocomplete ${className}`}
+        clearIcon={
+          <RemoveCircledIcon fill="black" className={`${styles.icon}`} />
+        }
+        popupIcon={
+          <ArrowLineDownIcon fill="black" className={`${styles.icon}`} />
+        }
+        className={`${styles.newAutocomplete}`}
         {...props}
       />
+      {errorText && (
+        <Text
+          size="xs"
+          color="#F54C4C"
+          italic
+          text={errorText}
+          className={styles.text_below}
+        />
+      )}
+      {helperText && (
+        <Text
+          size="xs"
+          italic
+          text={helperText}
+          className={styles.text_below}
+        />
+      )}
     </div>
   );
 };

package/src/Radio/Radio.tsx

@@ -1,8 +1,8 @@
+import React from 'react';
 import { styled } from '@mui/material/styles';
 import { Radio as MuiRadio } from '@mui/material';
 import { Text } from '../Typography/Text';
 import styles from './Radio.module.scss';
-import React from 'react';
 
 const BpIcon = styled('span')(() => ({
   borderRadius: '50%',

package/src/Search/Search.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import { SearchCircledIcon } from '../Icons';
 import { TextInput } from '../TextInput/TextInput';
-import React from 'react';
 
 interface RadioProps {
   searchInput: string | number;

package/src/SingleSelect/{SingleSelect.scss → SingleSelect.modules.scss}

@@ -24,10 +24,6 @@
   }
 
   .MuiAutocomplete-endAdornment {
-    svg {
-      width: 1rem;
-      height: 1rem;
-    }
     display: flex;
     gap: 0.5rem;
     margin-top: -0.35rem !important;
@@ -57,6 +53,12 @@
   align-items: center;
 }
 
-.text-below {
+.text_below {
   margin: 0.25rem 0.5rem 0.25rem 0.75rem;
 }
+
+.icon {
+  width: 1rem !important;
+  height: 1rem !important;
+  margin-left: 0.25rem;
+}