odaptos_design_system 1.4.269 → 1.4.270

package/package.json

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

package/src/Interviews/Chat.tsx

@@ -185,9 +185,10 @@ export const Chat = ({
                       url={realTask.url}
                       notes={realTask.notes}
                       state={
-                        (idsTasksAlreadySent.includes(realTask._id) &&
-                          realCurrentTask._id !== realTask._id) ||
-                        disabledTask
+                        idsTasksAlreadySent.includes(realTask._id) &&
+                        realCurrentTask._id !== realTask._id
+                          ? 'done'
+                          : disabledTask
                           ? 'disabled'
                           : realCurrentTask &&
                             realCurrentTask._id === realTask._id
@@ -218,6 +219,7 @@ export const Chat = ({
                   return (
                     <Scenario
                       title={`Scenario #${scenario.index}`}
+                      scenarioName={scenario.name}
                       description={scenario.description}
                       buttonText={
                         scenario.url ? startInterviewBtnTitle : undefined

package/src/Interviews/Scenario.modules.scss

@@ -7,11 +7,15 @@
   border-radius: 0.5rem;
   border: 1px solid #66adff;
   background: #e5f1ff;
-  gap: 0.5rem;
-  a {
+  .name {
+    margin-top: 0.37rem;
+  }
+  .description {
+    margin-top: 0.37rem;
+  }
+
+  button {
     width: 100%;
-    button {
-      width: 100%;
-    }
+    margin-top: 0.5rem;
   }
 }

package/src/Interviews/Scenario.tsx

@@ -4,7 +4,8 @@ import { Button, Text, SendIcon } from '..';
 
 export interface ScenarioProps extends HTMLAttributes<HTMLDivElement> {
   title: string;
-  description: string;
+  scenarioName?: string;
+  description?: string;
   buttonText?: string;
   buttonIcon?: JSX.Element;
   url: string;
@@ -14,6 +15,7 @@ export interface ScenarioProps extends HTMLAttributes<HTMLDivElement> {
 
 export const Scenario = ({
   title,
+  scenarioName,
   description,
   buttonText,
   buttonIcon,
@@ -24,8 +26,13 @@ export const Scenario = ({
 }: ScenarioProps) => {
   return (
     <div className={styles.start_interview_container} {...props}>
-      <Text text={title} weight="bold" />
-      <Text text={description} size="sm" />
+      <Text text={title} size="xs" />
+      {scenarioName && (
+        <Text text={scenarioName} weight="bold" className={styles.name} />
+      )}
+      {description && (
+        <Text text={description} size="sm" className={styles.description} />
+      )}
       {buttonIcon && buttonText && (
         <Button
           text={buttonText}

package/src/Interviews/Task.modules.scss

@@ -73,7 +73,7 @@
 }
 .header_right {
   display: flex;
-  padding: 1.4rem 0.75rem;
+  padding: 1.1rem 0.75rem;
   justify-content: center;
   align-items: center;
   gap: 0.5rem;
@@ -122,6 +122,38 @@
     }
   }
 }
+.done_task {
+  display: flex;
+  flex-direction: column;
+  padding: 0px;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 0.5rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--Color-Neutral-Dark-Shades-950, #26292e);
+  background: var(--Color-Extended-Green-100, #e8f5ea);
+  cursor: not-allowed;
+  max-width: 100%;
+  .header {
+    width: 100%;
+    max-width: 100%;
+    .header_left {
+      border: 1px solid var(--Color-Neutral-Dark-Shades-950, #26292e);
+      cursor: not-allowed;
+      width: 100%;
+    }
+    .header_right {
+      border-color: #26292e;
+      background: var(--Color-Extended-Green-200, #d5edd8);
+      cursor: not-allowed;
+      svg {
+        height: 1rem;
+        width: 1rem;
+        fill: black;
+      }
+    }
+  }
+}
 .active_task {
   display: flex;
   flex-direction: column;
@@ -164,6 +196,7 @@
   overflow: hidden;
   border: 1px solid var(--color-neutral-dark-shades-950, #26292e);
   background: var(--color-neutral-basics-white, #fff);
+  margin-top: 1rem;
 }
 .notesContainer {
   display: flex;

package/src/Interviews/Task.tsx

@@ -1,20 +1,6 @@
-import React, { HTMLAttributes, useState, useRef } from 'react';
+import React, { HTMLAttributes, useState } from 'react';
 import styles from './Task.modules.scss';
 import { Button, CheckedIcon, IconButton, Text, SendIcon, colors } from '../';
-import { Tooltip as MTooltip } from '@mui/material';
-import { styled } from '@mui/material/styles';
-
-const StyledTooltip = styled(MTooltip)({
-  '& .MuiPopover-root': {
-    borderRadius: '0.5rem',
-    background: 'transparent',
-  },
-  '& .MuiPopover-paper': {
-    borderRadius: '0.5rem',
-    background: 'transparent',
-  },
-});
-
 interface TaskItem {
   _id: string;
   description: string;
@@ -35,7 +21,7 @@ export interface TaskProps extends HTMLAttributes<HTMLDivElement> {
   taskTitleTooltip: string;
   url?: string;
   notes?: string;
-  state: 'idle' | 'active' | 'disabled';
+  state: 'idle' | 'active' | 'disabled' | 'done';
   isDone: boolean;
   task: TaskItem;
   sendTask: (task: TaskItem) => void;
@@ -72,19 +58,19 @@ export const Task = ({
   isInterviewer,
   ...props
 }: TaskProps) => {
-  const [open, setOpen] = useState(false);
-  const taskRef = useRef<any>(null);
+  const [isHovered, setIsHovered] = useState(false);
   const handleClose = () => {
-    setOpen(false);
+    setIsHovered(false);
   };
 
   const handleOpen = () => {
-    setOpen(true);
+    setIsHovered(true);
   };
 
   const getContainerStyle = () => {
     if (state === 'active') return styles.active_task;
     else if (state === 'disabled') return styles.disabled_task;
+    else if (state === 'done') return styles.done_task;
     else return styles.task_container;
   };
 
@@ -168,102 +154,73 @@ export const Task = ({
   else
     return (
       <>
-        <StyledTooltip
-          id="mouse-over-popover"
-          open={open}
-          onClose={handleClose}
-          onOpen={handleOpen}
-          placement="bottom-start"
-          title={
+        <div
+          className={`${getContainerStyle()} ${className ?? ''}`}
+          {...props}
+          onMouseEnter={handleOpen}
+          onMouseLeave={handleClose}
+        >
+          <div className={styles.header}>
             <div
-              className={styles.taskPopover}
-              style={{
-                width: taskRef.current
-                  ? taskRef.current.getBoundingClientRect().width
-                  : 'unset',
-                maxWidth: taskRef.current
-                  ? taskRef.current.getBoundingClientRect().width
-                  : 'unset',
-              }}
+              className={
+                isInterviewer
+                  ? styles.header_left_interviewer
+                  : styles.header_left_interviewee
+              }
             >
-              <Text text={taskTitleTooltip} size="sm" weight="bold" />
-              {url && (
-                <div className={styles.notesContainer}>
-                  <Text text="URL" size="xs" italic />
-                  <Text
-                    text={url}
-                    textDecoration="underline"
-                    size="sm"
-                    color={colors.blue_500}
-                    style={{ cursor: 'pointer !important' }}
-                    onClick={() =>
-                      window.open(
-                        url.includes('https://') ? url : `https://${url}`,
-                        '_blank'
-                      )
-                    }
-                  />
-                </div>
-              )}
-              {notes && isInterviewer && (
-                <div className={styles.notesContainer}>
-                  <Text text="Notes" size="xs" italic />
-                  <Text text={notes} size="sm" />
-                </div>
-              )}
+              <Text text={taskNumber} color={'#64666A'} size="xs" />
+
+              <Text
+                text={taskTitle}
+                size="sm"
+                weight="bold"
+                className={styles.title}
+              />
             </div>
-          }
-          componentsProps={{
-            tooltip: {
-              sx: {
-                bgcolor: 'transparent',
-                padding: 0,
-                borderRadius: '0.5rem',
-                '& .MuiTooltip-arrow': {
-                  color: 'transparent',
-                },
-              },
-            },
-          }}
-        >
-          <div
-            className={`${getContainerStyle()} ${className ?? ''}`}
-            ref={taskRef}
-            {...props}
-          >
-            <div className={styles.header}>
-              <div
-                className={
-                  isInterviewer
-                    ? styles.header_left_interviewer
-                    : styles.header_left_interviewee
-                }
+            {isInterviewer && (
+              <button
+                className={`${styles.header_right} ${
+                  state === 'idle' && styles.clickable
+                }`}
+                onClick={() => {
+                  if (state === 'idle') sendTask(task);
+                }}
+                disabled={state === 'disabled' || state === 'done'}
               >
-                <Text text={taskNumber} color={'#64666A'} size="xs" />
-
+                {isDone ? <CheckedIcon /> : <SendIcon />}
+              </button>
+            )}
+          </div>
+        </div>
+        {isHovered && (
+          <div className={styles.taskPopover}>
+            <Text text={taskTitleTooltip} size="sm" weight="bold" />
+            {url && (
+              <div className={styles.notesContainer}>
+                <Text text="URL" size="xs" italic />
                 <Text
-                  text={taskTitle}
+                  text={url}
+                  textDecoration="underline"
                   size="sm"
-                  weight="bold"
-                  className={styles.title}
+                  color={colors.blue_500}
+                  style={{ cursor: 'pointer !important' }}
+                  onClick={() =>
+                    window.open(
+                      url.includes('https://') ? url : `https://${url}`,
+                      '_blank'
+                    )
+                  }
                 />
               </div>
-              {isInterviewer && (
-                <button
-                  className={`${styles.header_right} ${
-                    state === 'idle' && styles.clickable
-                  }`}
-                  onClick={() => {
-                    if (state === 'idle') sendTask(task);
-                  }}
-                  disabled={state === 'disabled'}
-                >
-                  {isDone ? <CheckedIcon /> : <SendIcon />}
-                </button>
-              )}
-            </div>
+            )}
+            {notes && isInterviewer && (
+              <div className={styles.notesContainer}>
+                <Text text="Notes" size="xs" italic />
+                <Text text={notes} size="sm" />
+              </div>
+            )}
           </div>
-        </StyledTooltip>
+        )}
       </>
     );
 };