odaptos_design_system 1.0.0 → 1.2.0

package/src/Interviews/Task.modules.scss

@@ -0,0 +1,179 @@
+.task_container {
+  display: flex;
+  flex-direction: column;
+  padding: 0px;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 0.5rem;
+  align-self: 'stretch';
+  max-width: 100%;
+
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-neutral-dark-shades-950, #26292e);
+  background: var(--color-neutral-basics-white, #fff);
+
+  .header {
+    max-width: 100%;
+    .header_left {
+      &:hover {
+        border-radius: 0.5rem 0rem 0rem 0.5rem;
+        background: var(--color-neutral-clear-shades-150, #eee);
+      }
+    }
+    .header_right {
+      &:hover {
+        border-radius: 0rem 0.5rem 0.5rem 0rem;
+        background: var(--color-neutral-clear-shades-150, #eee);
+      }
+    }
+  }
+}
+.header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  max-width: 100%;
+}
+.header_left {
+  display: flex;
+  padding: 0.3125rem;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  max-width: calc(100% - 3.5rem);
+  padding-left: 0.62rem;
+  cursor: pointer;
+
+  .title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 98%;
+    white-space: nowrap;
+  }
+}
+.header_right {
+  display: flex;
+  padding: 1rem 0.75rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 0rem 0.5rem 0.5rem 0rem;
+  border: none;
+  border-left: 1px solid var(--color-neutral-dark-shades-950, #26292e);
+  background: var(--color-neutral-basics-white, #fff);
+  max-width: calc(100% - 3.5rem);
+  margin-left: auto;
+  height: 100%;
+  cursor: pointer;
+  svg {
+    height: 1rem;
+    width: 1rem;
+    fill: black;
+  }
+}
+
+.disabled_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-clear-shades-300, #d5d5d6);
+  background: var(--color-neutral-basics-white, #fff);
+  cursor: not-allowed;
+  max-width: 100%;
+  //   width: 100%;
+  .header {
+    width: 100%;
+    max-width: 100%;
+    .header_left {
+      border-color: var(--color-neutral-clear-shades-300, #d5d5d6);
+      cursor: not-allowed;
+      opacity: 0.5;
+      width: 100%;
+    }
+    .header_right {
+      border-color: var(--color-neutral-clear-shades-300, #d5d5d6);
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+}
+.active_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 #07f;
+  background: var(--color-neutral-basics-white, #fff);
+  max-width: 100%;
+  .header {
+    width: 100%;
+    max-width: 100%;
+    border-bottom: 1px solid var(--color-neutral-clear-shades-300, #d5d5d6);
+    .header_left {
+      border-color: var(--color-neutral-clear-shades-300, #d5d5d6);
+    }
+    .header_right {
+      border-color: var(--color-neutral-clear-shades-300, #d5d5d6);
+      &:hover {
+        background: var(--color-neutral-clear-shades-150, #eee);
+      }
+    }
+  }
+}
+
+.taskContent {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  align-self: stretch;
+  padding: 0.5rem 0.75rem 0.25rem 0.75rem;
+}
+
+.taskPopover {
+  display: flex;
+  width: 25.5625rem;
+  padding: 0.5rem 0.75rem 0.75rem 0.75rem;
+  flex-direction: column;
+  align-items: flex-start;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  border: 1px solid var(--color-neutral-dark-shades-950, #26292e);
+  background: var(--color-neutral-basics-white, #fff);
+}
+.notesContainer {
+  display: flex;
+  padding-top: 0.5rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.25rem;
+  align-self: stretch;
+  border-top: 1px solid var(--color-neutral-clear-shades-300, #d5d5d6);
+}
+.actionBtnsContainer {
+  display: flex;
+  padding-top: 8px;
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: 0.5rem;
+  align-self: stretch;
+}
+
+.popover_paper {
+  .MuiPopover-root {
+    border-radius: 0.5rem;
+    background: transparent;
+  }
+  .MuiPopover-paper {
+    border-radius: 0.5rem;
+    background: transparent;
+  }
+}

package/src/Interviews/Task.tsx

@@ -0,0 +1,176 @@
+import { HTMLAttributes } from 'react';
+import styles from './Task.modules.scss';
+import { Button, CheckedIcon, IconButton, Text, SendIcon } from '../';
+import Popover from '@mui/material/Popover';
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+
+const CustomPopover = styled(Popover)({
+  '& .MuiPopover-root': {
+    borderRadius: '0.5rem',
+    background: 'transparent',
+  },
+  '& .MuiPopover-paper': {
+    borderRadius: '0.5rem',
+    background: 'transparent',
+  },
+});
+
+export interface TaskProps extends HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  taskNumber: string;
+  taskTitle: string;
+  notes?: string;
+  state: 'idle' | 'active' | 'disabled';
+  isDone: boolean;
+  sendTask: () => void;
+  iconAction1?: JSX.Element;
+  iconAction2?: JSX.Element;
+  iconAction3?: JSX.Element;
+  action1?: () => void;
+  action2?: () => void;
+  action3?: () => void;
+  mainActionText?: string;
+  mainAction?: () => void;
+}
+
+export const Task = ({
+  taskNumber,
+  taskTitle,
+  notes,
+  className,
+  sendTask,
+  state = 'idle',
+  isDone,
+  iconAction1,
+  iconAction2,
+  iconAction3,
+  action1,
+  action2,
+  action3,
+  mainActionText,
+  mainAction,
+  ...props
+}: TaskProps) => {
+  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
+
+  const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+    if (state === 'idle') setAnchorEl(event.currentTarget);
+  };
+
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+  };
+
+  const getContainerStyle = () => {
+    if (state === 'active') return styles.active_task;
+    else if (state === 'disabled') return styles.disabled_task;
+    else return styles.task_container;
+  };
+
+  const open = Boolean(anchorEl);
+  const areActionsDisplay =
+    iconAction1 || iconAction2 || iconAction3 || action1 || action2 || action3;
+  return (
+    <>
+      <div className={`${getContainerStyle()} ${className ?? ''}`} {...props}>
+        <div className={styles.header}>
+          <div
+            className={styles.header_left}
+            onMouseEnter={handlePopoverOpen}
+            onMouseLeave={handlePopoverClose}
+          >
+            <Text
+              text={taskNumber}
+              color={state === 'active' ? '#26292E' : '#64666A'}
+              size="xs"
+            />
+            {state !== 'active' && (
+              <Text
+                text={taskTitle}
+                size="sm"
+                weight="bold"
+                className={styles.title}
+              />
+            )}
+          </div>
+          <button
+            className={styles.header_right}
+            onClick={() => {
+              if (state === 'active') sendTask();
+            }}
+            disabled={state === 'disabled'}
+          >
+            {state === 'active' || isDone ? <CheckedIcon /> : <SendIcon />}
+          </button>
+        </div>
+
+        {state === 'active' && (
+          <>
+            <div className={styles.taskContent}>
+              <Text text={taskTitle} size="sm" weight="bold" />
+              {notes && (
+                <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>
+      <CustomPopover
+        id="mouse-over-popover"
+        sx={{
+          pointerEvents: 'none',
+        }}
+        open={open}
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'center',
+          horizontal: 'left',
+        }}
+        transformOrigin={{
+          vertical: 'center',
+          horizontal: 'right',
+        }}
+        onClose={handlePopoverClose}
+        disableRestoreFocus
+      >
+        <div className={styles.taskPopover}>
+          <Text text={taskTitle} size="sm" weight="bold" />
+          {notes && (
+            <div className={styles.notesContainer}>
+              <Text text="Notes" size="xs" italic />
+              <Text text={notes} size="sm" />
+            </div>
+          )}
+        </div>
+      </CustomPopover>
+    </>
+  );
+};

package/src/Interviews/WelcomeMessage.modules.scss

@@ -0,0 +1,29 @@
+.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);
+  max-width: 30rem;
+  .welcome_title {
+    border-bottom: 1px solid var(--color-extended-green-300, #9dd6a3);
+    padding-bottom: 0.35rem;
+    margin-bottom: 0.5rem;
+  }
+  .welcome_description {
+    font-family: Open Sans;
+    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/Interviews/WelcomeMessage.tsx

@@ -0,0 +1,33 @@
+import { 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/LateralMenu/LateralMenu.modules.scss

@@ -0,0 +1,21 @@
+.lateral_menu {
+  display: flex;
+  min-width: 10rem;
+  height: 100vh;
+  padding: 1.5rem;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 14rem;
+  background: var(--color-neutral-basics-white, #fff);
+  position: relative;
+  box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.08),
+    0px 2px 3px 0px rgba(0, 0, 0, 0.15);
+  .lateral_menu_logo {
+    position: absolute;
+    width: 8.64519rem;
+    height: 2rem;
+    top: 1.5rem;
+    left: 1.5rem;
+  }
+}

package/src/LateralMenu/LateralMenu.tsx

@@ -0,0 +1,23 @@
+import styles from './LateralMenu.modules.scss';
+import { LogoNormal as Logo } from '../Icons';
+import Grid from '@mui/material/Grid';
+interface LateralMenuProps {
+  content: JSX.Element;
+  isLogoDisplay?: boolean;
+  className?: string;
+}
+
+/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=3073-110563&mode=dev  */
+export const LateralMenu = ({
+  isLogoDisplay = false,
+  content,
+  className,
+  ...props
+}: LateralMenuProps) => {
+  return (
+    <Grid item {...props} className={`${styles.lateral_menu}`} xs={2}>
+      {isLogoDisplay && <Logo className={styles.lateral_menu_logo} />}
+      {content}
+    </Grid>
+  );
+};

package/src/Modal/Modal.modules.scss

@@ -0,0 +1,58 @@
+.modal {
+  position: absolute;
+  .modal_content {
+    display: flex;
+    width: 65rem;
+    height: 50rem;
+    padding: 1rem;
+    flex-direction: column;
+    align-items: space-between;
+    gap: 1rem;
+    z-index: 1301;
+    background: white;
+    border: none;
+    .modal_header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.5rem;
+      width: 100%;
+    }
+    .modal_buttons_container {
+      display: flex;
+      gap: 0.5rem;
+      width: 100%;
+      justify-content: flex-end;
+    }
+  }
+}
+
+.modal_overlay {
+  position: absolute;
+  .modal_content {
+    display: flex;
+    width: 21rem;
+    height: auto;
+    padding: 1rem;
+    flex-direction: column;
+    align-items: space-between;
+    gap: 0.5rem;
+    z-index: 1301;
+    background: white;
+    border: none;
+    .modal_header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.5rem;
+      width: 100%;
+    }
+    .modal_buttons_container {
+      display: flex;
+      gap: 0.5rem;
+      width: 100%;
+      justify-content: flex-end;
+      margin-top: 0.5rem;
+    }
+  }
+}

package/src/Modal/Modal.tsx

@@ -0,0 +1,135 @@
+import MuiModal from '@mui/material/Modal';
+import Fade from '@mui/material/Fade';
+import { RemoveCircledIcon } from '../Icons';
+import { Title } from '../Typography/Title';
+import { Button } from '../Buttons/Button';
+import { IconButton } from '../Buttons/IconButton';
+import styles from './Modal.modules.scss';
+import { useEffect } from 'react';
+
+interface ModalProps {
+  className?: string;
+  type?: 'full-height' | 'overlay';
+  onClose: () => void;
+  open: boolean;
+  children: JSX.Element;
+  title: string;
+  hideCloseButton?: boolean;
+  cancelText: string;
+  validationText: string;
+  onPressEnter?: () => void;
+  onConfirm?: () => void;
+}
+
+/** Figma link full-height : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=997-7695&mode=dev
+ * Figma link overlay : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=2447-42540&mode=dev
+ */
+export const Modal = ({
+  className,
+  type = 'overlay',
+  onClose,
+  open,
+  children,
+  title,
+  hideCloseButton = false,
+  cancelText,
+  validationText,
+  onPressEnter,
+  onConfirm,
+}: ModalProps) => {
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        onPressEnter && onPressEnter();
+      }
+    };
+
+    if (open) {
+      document.addEventListener('keydown', handleKeyDown);
+    } else {
+      document.removeEventListener('keydown', handleKeyDown);
+    }
+
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [open, onPressEnter]);
+
+  if (type === 'overlay') {
+    return (
+      <MuiModal
+        aria-labelledby="transition-modal-title"
+        aria-describedby="transition-modal-description"
+        className={`${styles.modal_overlay} ${className}`}
+        open={open}
+        onClose={onClose}
+        closeAfterTransition
+      >
+        <Fade in={open}>
+          <div className={styles.modal_content}>
+            <div className={`${styles.modal_header}`}>
+              <Title text={title} weight="bold" size="base" />
+              {!hideCloseButton && (
+                <IconButton
+                  variant="tertiary"
+                  icon={<RemoveCircledIcon fill="black" />}
+                  onClick={() => onClose()}
+                />
+              )}
+            </div>
+            {children}
+            <div className={styles.modal_buttons_container}>
+              {cancelText && onClose && (
+                <Button
+                  text={cancelText}
+                  variant="tertiary"
+                  onClick={() => onClose()}
+                />
+              )}
+              {onConfirm && validationText && (
+                <Button text={validationText} onClick={() => onConfirm()} />
+              )}
+            </div>
+          </div>
+        </Fade>
+      </MuiModal>
+    );
+  } else {
+    return (
+      <MuiModal
+        aria-labelledby="transition-modal-title"
+        aria-describedby="transition-modal-description"
+        className={`${styles.modal} ${className}`}
+        open={open}
+        onClose={onClose}
+        closeAfterTransition
+      >
+        <Fade in={open}>
+          <div className={styles.modal_content}>
+            <div className={`${styles.modal_header}`}>
+              <Title text={title} weight="semi-bold" size="base" />
+              {!hideCloseButton && (
+                <IconButton
+                  variant="tertiary"
+                  icon={<RemoveCircledIcon fill="black" />}
+                  onClick={() => onClose()}
+                />
+              )}
+            </div>
+            {children}
+            <div className={styles.modal_buttons_container}>
+              {cancelText && onClose && (
+                <Button
+                  text={cancelText}
+                  variant="tertiary"
+                  onClick={() => onClose()}
+                />
+              )}
+              {onConfirm && validationText && (
+                <Button text={validationText} onClick={() => onConfirm()} />
+              )}
+            </div>
+          </div>
+        </Fade>
+      </MuiModal>
+    );
+  }
+};