odaptos_design_system 2.0.5 → 2.0.6

package/src/Molecules/Interviews/Task.tsx

@@ -1,258 +1,258 @@
-import React, { HTMLAttributes, useState, useRef } from 'react';
-import styles from './Task.modules.scss';
-import { Button, CheckedIcon, IconButton, Text, SendIcon } from '../../';
-import { Tooltip } from '@mui/material';
-
-interface TaskItem {
-  _id: string;
-  description: string;
-  url: string;
-  name: string;
-  notes: string;
-  type: 'task' | 'question';
-  timedTask: boolean;
-  totalSeconds: number;
-  successSeconds: number;
-  failureSeconds: number;
-}
-
-export interface TaskProps extends HTMLAttributes<HTMLDivElement> {
-  className?: string;
-  taskNumber: string;
-  taskTitle: string;
-  taskTitleTooltip: string;
-  url?: string;
-  notes?: string;
-  state: 'idle' | 'active' | 'disabled' | 'done';
-  isDone: boolean;
-  task: TaskItem;
-  sendTask: (task: TaskItem) => void;
-  iconAction1?: JSX.Element;
-  iconAction2?: JSX.Element;
-  iconAction3?: JSX.Element;
-  action1?: () => void;
-  action2?: () => void;
-  action3?: () => void;
-  mainActionText?: string;
-  mainAction?: () => void;
-  isInterviewer?: boolean;
-}
-
-export const Task = ({
-  taskNumber,
-  taskTitle,
-  taskTitleTooltip,
-  notes,
-  url,
-  className,
-  task,
-  sendTask,
-  state = 'idle',
-  isDone,
-  iconAction1,
-  iconAction2,
-  iconAction3,
-  action1,
-  action2,
-  action3,
-  mainActionText,
-  mainAction,
-  isInterviewer,
-  ...props
-}: TaskProps) => {
-  const [open, setOpen] = useState(false);
-  const taskRef = useRef<any>(null);
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  const handleOpen = () => {
-    setOpen(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;
-  };
-
-  const areActionsDisplay =
-    iconAction1 || iconAction2 || iconAction3 || action1 || action2 || action3;
-  if (state === 'active')
-    return (
-      <div className={`${getContainerStyle()} ${className ?? ''}`} {...props}>
-        <div className={styles.header}>
-          <div
-            className={
-              isInterviewer
-                ? styles.header_left_interviewer
-                : styles.header_left_interviewee
-            }
-          >
-            <Text text={taskNumber} color={'#26292E'} size="xs" />
-          </div>
-          {isInterviewer && (
-            <button className={styles.header_right}>
-              <CheckedIcon />
-            </button>
-          )}
-        </div>
-
-        <>
-          <div className={styles.taskContent}>
-            <Text text={taskTitle} size="sm" weight="bold" />
-            {url && (
-              <button
-                className={styles.urlButton}
-                onClick={() =>
-                  window.open(
-                    url.includes('https://') ? url : `https://${url}`,
-                    '_blank'
-                  )
-                }
-              >
-                <p>{url}</p> <SendIcon fill="#fafafa" stroke="#fafafa" />
-              </button>
-            )}
-            {notes && isInterviewer && (
-              <div className={styles.notesContainer}>
-                <Text text="Notes" size="xs" italic />
-                <Text text={notes} size="sm" />
-              </div>
-            )}
-          </div>
-          {areActionsDisplay && (
-            <div className={styles.taskContent}>
-              <Text text="Actions:" size="xs" italic />
-              <div className={styles.actionBtnsContainer}>
-                {action1 && iconAction1 && (
-                  <IconButton onClick={action1} icon={iconAction1} />
-                )}
-                {action2 && iconAction2 && (
-                  <IconButton onClick={action2} icon={iconAction2} />
-                )}
-                {action3 && iconAction3 && (
-                  <IconButton onClick={action3} icon={iconAction3} />
-                )}
-                {mainAction && mainActionText && (
-                  <Button
-                    variant="secondary"
-                    iconRight={<SendIcon />}
-                    text={mainActionText}
-                    onClick={mainAction}
-                  />
-                )}
-              </div>
-            </div>
-          )}
-        </>
-      </div>
-    );
-  else
-    return (
-      <>
-        <Tooltip
-          id="mouse-over-popover"
-          open={open}
-          onClose={handleClose}
-          onOpen={handleOpen}
-          arrow
-          placement="left"
-          title={
-            <div className={styles.taskPopover}>
-              <Text text={taskNumber} color={'#64666A'} size="xs" />
-              <Text
-                text={taskTitle}
-                size="sm"
-                weight="bold"
-                className={styles.title}
-              />
-              {url && (
-                <button
-                  className={styles.urlButton}
-                  onClick={() =>
-                    window.open(
-                      url.includes('https://') ? url : `https://${url}`,
-                      '_blank'
-                    )
-                  }
-                >
-                  <p>{url}</p> <SendIcon fill="#fafafa" stroke="#fafafa" />
-                </button>
-              )}
-              {notes && isInterviewer && (
-                <div className={styles.notesContainer}>
-                  <Text text="Notes" size="xs" italic />
-                  <Text text={notes} size="sm" />
-                </div>
-              )}
-            </div>
-          }
-          componentsProps={{
-            tooltip: {
-              sx: {
-                margin: 0,
-                boxShadow: `0px 4px 4px 0px rgba(0, 0, 0, 0.25)`,
-                bgcolor: '#ffffff',
-                padding: 0,
-                border: '1px solid #000',
-                '& .MuiTooltip-arrow': {
-                  color: '#ffffff',
-                  fontSize: 'large',
-                  margin: '-1px',
-                  '&::before': {
-                    backgroundColor: '#ffffff',
-                    border: '1px solid #000',
-                    borderRadius: 0.75,
-                  },
-                },
-              },
-            },
-          }}
-        >
-          <div
-            className={`${getContainerStyle()} ${className ?? ''}`}
-            ref={taskRef}
-            {...props}
-          >
-            <div className={styles.header}>
-              <div
-                className={
-                  isInterviewer
-                    ? styles.header_left_interviewer
-                    : styles.header_left_interviewee
-                }
-              >
-                <Text text={taskNumber} color={'#64666A'} size="xs" />
-
-                <Text
-                  text={taskTitle}
-                  size="sm"
-                  weight="bold"
-                  className={styles.title}
-                />
-              </div>
-              {isInterviewer && (
-                <button
-                  className={`${styles.header_right} ${
-                    state === 'idle' && styles.clickable
-                  }`}
-                  onClick={() => {
-                    if (state === 'idle') {
-                      sendTask(task);
-                      //close tooltip
-                      setOpen(false);
-                    }
-                  }}
-                  disabled={state === 'disabled' || state === 'done'}
-                >
-                  {isDone ? <CheckedIcon /> : <SendIcon />}
-                </button>
-              )}
-            </div>
-          </div>
-        </Tooltip>
-      </>
-    );
-};
+import React, { HTMLAttributes, useState, useRef } from 'react';
+import styles from './Task.modules.scss';
+import { Button, CheckedIcon, IconButton, Text, SendIcon } from '../../';
+import { Tooltip } from '@mui/material';
+
+interface TaskItem {
+  _id: string;
+  description: string;
+  url: string;
+  name: string;
+  notes: string;
+  type: 'task' | 'question';
+  timedTask: boolean;
+  totalSeconds: number;
+  successSeconds: number;
+  failureSeconds: number;
+}
+
+export interface TaskProps extends HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  taskNumber: string;
+  taskTitle: string;
+  taskTitleTooltip: string;
+  url?: string;
+  notes?: string;
+  state: 'idle' | 'active' | 'disabled' | 'done';
+  isDone: boolean;
+  task: TaskItem;
+  sendTask: (task: TaskItem) => void;
+  iconAction1?: JSX.Element;
+  iconAction2?: JSX.Element;
+  iconAction3?: JSX.Element;
+  action1?: () => void;
+  action2?: () => void;
+  action3?: () => void;
+  mainActionText?: string;
+  mainAction?: () => void;
+  isInterviewer?: boolean;
+}
+
+export const Task = ({
+  taskNumber,
+  taskTitle,
+  taskTitleTooltip,
+  notes,
+  url,
+  className,
+  task,
+  sendTask,
+  state = 'idle',
+  isDone,
+  iconAction1,
+  iconAction2,
+  iconAction3,
+  action1,
+  action2,
+  action3,
+  mainActionText,
+  mainAction,
+  isInterviewer,
+  ...props
+}: TaskProps) => {
+  const [open, setOpen] = useState(false);
+  const taskRef = useRef<any>(null);
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleOpen = () => {
+    setOpen(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;
+  };
+
+  const areActionsDisplay =
+    iconAction1 || iconAction2 || iconAction3 || action1 || action2 || action3;
+  if (state === 'active')
+    return (
+      <div className={`${getContainerStyle()} ${className ?? ''}`} {...props}>
+        <div className={styles.header}>
+          <div
+            className={
+              isInterviewer
+                ? styles.header_left_interviewer
+                : styles.header_left_interviewee
+            }
+          >
+            <Text text={taskNumber} color={'#26292E'} size="xs" />
+          </div>
+          {isInterviewer && (
+            <button className={styles.header_right}>
+              <CheckedIcon />
+            </button>
+          )}
+        </div>
+
+        <>
+          <div className={styles.taskContent}>
+            <Text text={taskTitle} size="sm" weight="bold" />
+            {url && (
+              <button
+                className={styles.urlButton}
+                onClick={() =>
+                  window.open(
+                    url.includes('https://') ? url : `https://${url}`,
+                    '_blank'
+                  )
+                }
+              >
+                <p>{url}</p> <SendIcon fill="#fafafa" stroke="#fafafa" />
+              </button>
+            )}
+            {notes && isInterviewer && (
+              <div className={styles.notesContainer}>
+                <Text text="Notes" size="xs" italic />
+                <Text text={notes} size="sm" />
+              </div>
+            )}
+          </div>
+          {areActionsDisplay && (
+            <div className={styles.taskContent}>
+              <Text text="Actions:" size="xs" italic />
+              <div className={styles.actionBtnsContainer}>
+                {action1 && iconAction1 && (
+                  <IconButton onClick={action1} icon={iconAction1} />
+                )}
+                {action2 && iconAction2 && (
+                  <IconButton onClick={action2} icon={iconAction2} />
+                )}
+                {action3 && iconAction3 && (
+                  <IconButton onClick={action3} icon={iconAction3} />
+                )}
+                {mainAction && mainActionText && (
+                  <Button
+                    variant="secondary"
+                    iconRight={<SendIcon />}
+                    text={mainActionText}
+                    onClick={mainAction}
+                  />
+                )}
+              </div>
+            </div>
+          )}
+        </>
+      </div>
+    );
+  else
+    return (
+      <>
+        <Tooltip
+          id="mouse-over-popover"
+          open={open}
+          onClose={handleClose}
+          onOpen={handleOpen}
+          arrow
+          placement="left"
+          title={
+            <div className={styles.taskPopover}>
+              <Text text={taskNumber} color={'#64666A'} size="xs" />
+              <Text
+                text={taskTitle}
+                size="sm"
+                weight="bold"
+                className={styles.title}
+              />
+              {url && (
+                <button
+                  className={styles.urlButton}
+                  onClick={() =>
+                    window.open(
+                      url.includes('https://') ? url : `https://${url}`,
+                      '_blank'
+                    )
+                  }
+                >
+                  <p>{url}</p> <SendIcon fill="#fafafa" stroke="#fafafa" />
+                </button>
+              )}
+              {notes && isInterviewer && (
+                <div className={styles.notesContainer}>
+                  <Text text="Notes" size="xs" italic />
+                  <Text text={notes} size="sm" />
+                </div>
+              )}
+            </div>
+          }
+          componentsProps={{
+            tooltip: {
+              sx: {
+                margin: 0,
+                boxShadow: `0px 4px 4px 0px rgba(0, 0, 0, 0.25)`,
+                bgcolor: '#ffffff',
+                padding: 0,
+                border: '1px solid #000',
+                '& .MuiTooltip-arrow': {
+                  color: '#ffffff',
+                  fontSize: 'large',
+                  margin: '-1px',
+                  '&::before': {
+                    backgroundColor: '#ffffff',
+                    border: '1px solid #000',
+                    borderRadius: 0.75,
+                  },
+                },
+              },
+            },
+          }}
+        >
+          <div
+            className={`${getContainerStyle()} ${className ?? ''}`}
+            ref={taskRef}
+            {...props}
+          >
+            <div className={styles.header}>
+              <div
+                className={
+                  isInterviewer
+                    ? styles.header_left_interviewer
+                    : styles.header_left_interviewee
+                }
+              >
+                <Text text={taskNumber} color={'#64666A'} size="xs" />
+
+                <Text
+                  text={taskTitle}
+                  size="sm"
+                  weight="bold"
+                  className={styles.title}
+                />
+              </div>
+              {isInterviewer && (
+                <button
+                  className={`${styles.header_right} ${
+                    state === 'idle' && styles.clickable
+                  }`}
+                  onClick={() => {
+                    if (state === 'idle') {
+                      sendTask(task);
+                      //close tooltip
+                      setOpen(false);
+                    }
+                  }}
+                  disabled={state === 'disabled' || state === 'done'}
+                >
+                  {isDone ? <CheckedIcon /> : <SendIcon />}
+                </button>
+              )}
+            </div>
+          </div>
+        </Tooltip>
+      </>
+    );
+};

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

@@ -1,28 +1,28 @@
-.welcome_container {
-  display: flex;
-  padding: 0.5rem 0.75rem 0.75rem 0.75rem;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-  border-radius: 0.5rem;
-  border: 1px solid var(--color-extended-green-300, #9dd6a3);
-  background: var(--color-extended-green-100, #e8f5ea);
-  .welcome_title {
-    border-bottom: 1px solid var(--color-extended-green-300, #9dd6a3);
-    padding-bottom: 0.35rem;
-    margin-bottom: 0.5rem;
-  }
-  .welcome_description {
-    font-family: OpenSans;
-    font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 1.225rem;
-    ol {
-      margin: unset;
-      margin-top: 0.5625rem;
-      padding-inline-start: 1.5rem;
-      letter-spacing: -0.0019rem;
-    }
-  }
-}
+.welcome_container {
+  display: flex;
+  padding: 0.5rem 0.75rem 0.75rem 0.75rem;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-extended-green-300, #9dd6a3);
+  background: var(--color-extended-green-100, #e8f5ea);
+  .welcome_title {
+    border-bottom: 1px solid var(--color-extended-green-300, #9dd6a3);
+    padding-bottom: 0.35rem;
+    margin-bottom: 0.5rem;
+  }
+  .welcome_description {
+    font-family: OpenSans;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.225rem;
+    ol {
+      margin: unset;
+      margin-top: 0.5625rem;
+      padding-inline-start: 1.5rem;
+      letter-spacing: -0.0019rem;
+    }
+  }
+}

package/src/Molecules/Interviews/WelcomeMessage.tsx

@@ -1,33 +1,33 @@
-import React, { HTMLAttributes } from 'react';
-import styles from './WelcomeMessage.modules.scss';
-import { Text } from '../../';
-
-export interface WelcomeMessageProps extends HTMLAttributes<HTMLDivElement> {
-  title: string;
-  description: string;
-  className?: string;
-}
-
-export const WelcomeMessage = ({
-  title,
-  description,
-  className,
-  ...props
-}: WelcomeMessageProps) => {
-  return (
-    <div className={styles.welcome_container} {...props}>
-      <Text
-        text={title}
-        weight="bold"
-        size="base"
-        className={styles.welcome_title}
-      />
-      <div
-        dangerouslySetInnerHTML={{
-          __html: description,
-        }}
-        className={styles.welcome_description}
-      />
-    </div>
-  );
-};
+import React, { HTMLAttributes } from 'react';
+import styles from './WelcomeMessage.modules.scss';
+import { Text } from '../../';
+
+export interface WelcomeMessageProps extends HTMLAttributes<HTMLDivElement> {
+  title: string;
+  description: string;
+  className?: string;
+}
+
+export const WelcomeMessage = ({
+  title,
+  description,
+  className,
+  ...props
+}: WelcomeMessageProps) => {
+  return (
+    <div className={styles.welcome_container} {...props}>
+      <Text
+        text={title}
+        weight="bold"
+        size="base"
+        className={styles.welcome_title}
+      />
+      <div
+        dangerouslySetInnerHTML={{
+          __html: description,
+        }}
+        className={styles.welcome_description}
+      />
+    </div>
+  );
+};

package/src/Molecules/LogoSlider/LogoSlider.module.scss

@@ -1,6 +1,6 @@
-.logoSlider {
-  .partner {
-    width: 20rem;
-    height: 2rem;
-  }
-}
+.logoSlider {
+  .partner {
+    width: 20rem;
+    height: 2rem;
+  }
+}