odaptos_design_system 2.0.7 → 2.0.9

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.7",
+  "version": "2.0.9",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/Molecules/Interviews/Chat.modules.scss

@@ -8,6 +8,7 @@
   gap: 0.5rem;
   border-radius: 0.5rem;
   background: #fff;
+
   .scrolling_content {
     display: flex;
     flex-direction: column;
@@ -16,6 +17,7 @@
     width: 100%;
     overflow: hidden;
     height: 100%;
+
     .tasks_container {
       display: flex;
       flex-direction: column;
@@ -33,6 +35,21 @@
         gap: 0.25rem;
       }
 
+      .nm_message_container {
+        background-color: #E5F1FF;
+        display: flex;
+        flex-direction: column;
+        padding: 0.25rem 0.5rem 0.5rem 0.5rem;
+        gap: 0.25rem;
+        border-radius: 0.5rem;
+        border: 1px solid #66ADFF;
+
+        .nm_button {
+        width: 100%;
+        }
+      }
+
+
       .user_message_container {
         display: flex;
         flex-direction: row;
@@ -53,6 +70,7 @@
             transform: translateY(0.875rem);
             opacity: 0;
           }
+
           to {
             transform: translateY(0px);
             opacity: 1;
@@ -72,6 +90,7 @@
         border-radius: 0rem 0.5rem 0.5rem 0.5rem;
         border: 1px solid #d5d5d6;
         background: #fafafa;
+
         .user_text {
           color: var(--Color-Neutral-Dark-Shades-950, #26292e);
           font-family: 'OpenSans';
@@ -81,6 +100,7 @@
           line-height: 1.225rem;
           margin: 0;
         }
+
         .blue {
           color: #004799;
         }
@@ -99,6 +119,7 @@
         border: 1px solid var(--color-primary-200, #99c9ff);
         background: var(--color-primary-100, #e5f1ff);
         max-width: 85%;
+
         .user_text {
           color: var(--Color-Neutral-Dark-Shades-950, #26292e);
           font-family: 'OpenSans';
@@ -108,6 +129,7 @@
           line-height: 1.225rem;
           margin: 0;
         }
+
         .blue {
           color: #004799;
         }
@@ -118,6 +140,7 @@
         width: fit-content;
         margin-left: auto;
       }
+
       .user_text_message_username {
         display: flex;
         width: fit-content;
@@ -131,10 +154,9 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        background: var(
-          --color-gradients-003,
-          linear-gradient(135deg, #07f 0%, #9024f6 100%)
-        );
+        background: var(--color-gradients-003,
+            linear-gradient(135deg, #07f 0%, #9024f6 100%));
+
         p {
           padding: 0;
         }
@@ -147,11 +169,13 @@
         width: 100%;
         animation: floatup 0.5s forwards;
         margin: auto 0 0.5rem 0;
+
         @keyframes floatup {
           from {
             transform: translateY(0.875rem);
             opacity: 0;
           }
+
           to {
             transform: translateY(0px);
             opacity: 1;
@@ -167,10 +191,9 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        background: var(
-          --color-gradients-003,
-          linear-gradient(135deg, #07f 0%, #9024f6 100%)
-        );
+        background: var(--color-gradients-003,
+            linear-gradient(135deg, #07f 0%, #9024f6 100%));
+
         p {
           padding: 0;
         }
@@ -181,6 +204,7 @@
         flex-direction: column;
         width: 100%;
         gap: 0.25rem;
+
         .user_text {
           color: var(--Color-Neutral-Dark-Shades-950, #26292e);
           font-family: 'OpenSans';
@@ -211,11 +235,14 @@
 }
 
 .no_scrollbar {
+
   /* Hide scrollbar for Chrome, Safari and Opera */
   &::-webkit-scrollbar {
     display: none;
   }
 
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}

package/src/Molecules/Interviews/Chat.tsx

@@ -9,6 +9,9 @@ import {
   Task,
   EndRecording,
   SusExplanation,
+  Button,
+  TvIcon,
+  SendIcon,
 } from '../../';
 import Grid from '@mui/material/Grid';
 
@@ -46,6 +49,8 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
   SusExplanationDescription: string;
   isSus: boolean;
   stopRecording: () => void;
+  isInterviewNonModerated?: boolean;
+  startNMScreenSharing: () => void; //Non-Moderated Screen Sharing
 }
 
 export const Chat = ({
@@ -81,6 +86,8 @@ export const Chat = ({
   SusExplanationDescription,
   isSus,
   stopRecording,
+  startNMScreenSharing,
+  isInterviewNonModerated = false,
   ...props
 }: ChatProps) => {
   const replaceURLs = (message: string) => {
@@ -143,6 +150,24 @@ export const Chat = ({
             className={`${styles.tasks_container}
           ${customScrollingClassname}`}
           >
+            {isInterviewNonModerated && (
+              <div className={styles.nm_message_container}>
+                <Text text={'Share your screen'} weight="bold" size="base" />
+                <Text
+                  text={
+                    'In order to participate to this test you need to share your screen before the first task is sent'
+                  }
+                  size="sm"
+                />
+                <Button
+                  id="start_screen_share"
+                  text={'Share my screen'}
+                  onClick={() => startNMScreenSharing()}
+                  iconRight={<TvIcon />}
+                  className={styles.nm_button}
+                />
+              </div>
+            )}
             {tasks.map((task) => {
               if (
                 task.type === 'question' ||
@@ -208,7 +233,11 @@ export const Chat = ({
                     isInterviewer={isInterviewer}
                   />
                 );
-              } else if (task.type === 'scenario' && !isInterviewer) {
+              } else if (
+                task.type === 'scenario' &&
+                !isInterviewer &&
+                !isInterviewNonModerated
+              ) {
                 const scenario = isInterviewer ? task : JSON.parse(task.body);
 
                 return (
@@ -225,6 +254,21 @@ export const Chat = ({
                     isInterviewer={isInterviewer}
                   />
                 );
+              }
+              if (task.type === 'scenario' && isInterviewNonModerated) {
+                return (
+                  <div className={styles.nm_message_container}>
+                    <Text text={task.name} weight="bold" size="base" />
+                    <Text text={task.description} size="sm" />
+                    <Button
+                      id="start_scenario"
+                      text={'Start Now'}
+                      onClick={() => sendTask(task)}
+                      iconRight={<SendIcon />}
+                      className={styles.nm_button}
+                    />
+                  </div>
+                );
               } else return <></>;
             })}
             {isInterviewer && areAllTasksSend && !isRecordingFinished && (