odaptos_design_system 2.0.5 → 2.0.7

package/src/Organisms/FormQuestions/FormQuestions.tsx

@@ -1,78 +1,78 @@
-import React, { HTMLAttributes } from 'react';
-import styles from './FormQuestions.module.scss';
-import {
-  Button,
-  Title,
-  Text,
-  ArrowPointerLeft,
-  ArrowPointerRight,
-  SquareText,
-  LogoNormal,
-  QuestionButton,
-} from '../../';
-
-interface FormQuestionsProps extends HTMLAttributes<HTMLParagraphElement> {
-  /** Text display */
-  answers: { text: string; isSelected: boolean; onClick: () => void }[];
-  question: string;
-  hint: string;
-  optionText: string;
-  nextAction?: () => void;
-  backAction?: () => void;
-  nextText?: string;
-  backText?: string;
-}
-
-/** This text should be use to display basic text
- * Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=52-751&mode=dev
- */
-export const FormQuestions = ({
-  answers,
-  question,
-  hint,
-  optionText,
-  backAction,
-  backText,
-  nextAction,
-  nextText,
-}: FormQuestionsProps) => {
-  return (
-    <div className={styles.formQuestionsContainer}>
-      <LogoNormal style={{ width: '8.64519rem', height: '2rem' }} />
-      <div className={styles.formQuestionsContent}>
-        {hint && <SquareText text={hint}></SquareText>}
-        <div className={styles.questionContainer}>
-          <Title text={question} className={styles.questionText}></Title>
-          <Text text={optionText} className={styles.topText} />
-          {answers.map((answer) => (
-            <QuestionButton
-              text={answer.text}
-              clicked={answer.isSelected}
-              onClick={answer.onClick}
-            />
-          ))}
-        </div>
-        <div className={styles.buttons}>
-          {backText && (
-            <Button
-              variant={'tertiary'}
-              className={styles.backButton}
-              iconLeft={<ArrowPointerLeft />}
-              text={backText}
-              onClick={backAction}
-            />
-          )}
-          {nextText && (
-            <Button
-              disabled={answers.every((answer) => !answer.isSelected)}
-              text={nextText}
-              className={styles.nextButton}
-              iconRight={<ArrowPointerRight />}
-              onClick={nextAction}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
+import React, { HTMLAttributes } from 'react';
+import styles from './FormQuestions.module.scss';
+import {
+  Button,
+  Title,
+  Text,
+  ArrowPointerLeft,
+  ArrowPointerRight,
+  SquareText,
+  LogoNormal,
+  QuestionButton,
+} from '../../';
+
+interface FormQuestionsProps extends HTMLAttributes<HTMLParagraphElement> {
+  /** Text display */
+  answers: { text: string; isSelected: boolean; onClick: () => void }[];
+  question: string;
+  hint: string;
+  optionText: string;
+  nextAction?: () => void;
+  backAction?: () => void;
+  nextText?: string;
+  backText?: string;
+}
+
+/** This text should be use to display basic text
+ * Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=52-751&mode=dev
+ */
+export const FormQuestions = ({
+  answers,
+  question,
+  hint,
+  optionText,
+  backAction,
+  backText,
+  nextAction,
+  nextText,
+}: FormQuestionsProps) => {
+  return (
+    <div className={styles.formQuestionsContainer}>
+      <LogoNormal style={{ width: '8.64519rem', height: '2rem' }} />
+      <div className={styles.formQuestionsContent}>
+        {hint && <SquareText text={hint}></SquareText>}
+        <div className={styles.questionContainer}>
+          <Title text={question} className={styles.questionText}></Title>
+          <Text text={optionText} className={styles.topText} />
+          {answers.map((answer) => (
+            <QuestionButton
+              text={answer.text}
+              clicked={answer.isSelected}
+              onClick={answer.onClick}
+            />
+          ))}
+        </div>
+        <div className={styles.buttons}>
+          {backText && (
+            <Button
+              variant={'tertiary'}
+              className={styles.backButton}
+              iconLeft={<ArrowPointerLeft />}
+              text={backText}
+              onClick={backAction}
+            />
+          )}
+          {nextText && (
+            <Button
+              disabled={answers.every((answer) => !answer.isSelected)}
+              text={nextText}
+              className={styles.nextButton}
+              iconRight={<ArrowPointerRight />}
+              onClick={nextAction}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/Organisms/Modal/Modal.modules.scss

@@ -1,66 +1,66 @@
-.modal {
-  .modal_content {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: flex;
-    height: 100vh;
-    padding: 1rem;
-    flex-direction: column;
-    align-items: space-between;
-    gap: 1rem;
-    z-index: 1301;
-    background: white;
-    border: none;
-    border-radius: 0.25rem;
-    background: var(--Color-Neutral-Basics-White, #fff);
-    box-shadow: 0px 4px 12px 6px rgba(0, 0, 0, 0.08),
-      0px 4px 4px 0px rgba(0, 0, 0, 0.15);
-    .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 {
-  .modal_content {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: flex;
-    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;
-    }
-  }
-}
+.modal {
+  .modal_content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    height: 100vh;
+    padding: 1rem;
+    flex-direction: column;
+    align-items: space-between;
+    gap: 1rem;
+    z-index: 1301;
+    background: white;
+    border: none;
+    border-radius: 0.25rem;
+    background: var(--Color-Neutral-Basics-White, #fff);
+    box-shadow: 0px 4px 12px 6px rgba(0, 0, 0, 0.08),
+      0px 4px 4px 0px rgba(0, 0, 0, 0.15);
+    .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 {
+  .modal_content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    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/Organisms/Modal/Modal.tsx

@@ -1,163 +1,163 @@
-import MuiModal from '@mui/material/Modal';
-import Fade from '@mui/material/Fade';
-import { Button, IconButton, Title, RemoveCircledIcon } from '../../';
-import styles from './Modal.modules.scss';
-import React, { useEffect } from 'react';
-
-interface ModalProps {
-  className?: string;
-  type?: 'full-height' | 'overlay';
-  onClose: () => void;
-  open: boolean;
-  children: JSX.Element;
-  title: string;
-  hideCloseButton?: boolean;
-  cancelText: string;
-  cancelBtnVariant?:
-    | 'primary'
-    | 'secondary'
-    | 'tertiary'
-    | 'tertiary-alt'
-    | 'upsell'
-    | 'alert'
-    | 'success';
-  validationText: string;
-  disabled?: boolean;
-  onPressEnter?: () => void;
-  onConfirm?: () => void;
-  width?: string;
-  height?: string;
-}
-
-/** 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,
-  cancelBtnVariant = 'tertiary',
-  disabled,
-  validationText,
-  onPressEnter,
-  onConfirm,
-  width,
-  height,
-}: 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}
-            style={{ width: width ?? '21rem', height: height ?? 'fit-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={cancelBtnVariant}
-                  onClick={() => onClose()}
-                />
-              )}
-              {onConfirm && validationText && (
-                <Button
-                  text={validationText}
-                  onClick={() => onConfirm()}
-                  disabled={disabled}
-                />
-              )}
-            </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}
-            style={{ width: width ?? '65rem' }}
-          >
-            <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}
-            {(cancelText || (onConfirm && validationText)) && (
-              <div className={styles.modal_buttons_container}>
-                {cancelText && onClose && (
-                  <Button
-                    text={cancelText}
-                    variant={cancelBtnVariant}
-                    onClick={() => onClose()}
-                  />
-                )}
-                {onConfirm && validationText && (
-                  <Button
-                    text={validationText}
-                    onClick={() => onConfirm()}
-                    disabled={disabled}
-                  />
-                )}
-              </div>
-            )}
-          </div>
-        </Fade>
-      </MuiModal>
-    );
-  }
-};
+import MuiModal from '@mui/material/Modal';
+import Fade from '@mui/material/Fade';
+import { Button, IconButton, Title, RemoveCircledIcon } from '../../';
+import styles from './Modal.modules.scss';
+import React, { useEffect } from 'react';
+
+interface ModalProps {
+  className?: string;
+  type?: 'full-height' | 'overlay';
+  onClose: () => void;
+  open: boolean;
+  children: JSX.Element;
+  title: string;
+  hideCloseButton?: boolean;
+  cancelText: string;
+  cancelBtnVariant?:
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'tertiary-alt'
+    | 'upsell'
+    | 'alert'
+    | 'success';
+  validationText: string;
+  disabled?: boolean;
+  onPressEnter?: () => void;
+  onConfirm?: () => void;
+  width?: string;
+  height?: string;
+}
+
+/** 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,
+  cancelBtnVariant = 'tertiary',
+  disabled,
+  validationText,
+  onPressEnter,
+  onConfirm,
+  width,
+  height,
+}: 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}
+            style={{ width: width ?? '21rem', height: height ?? 'fit-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={cancelBtnVariant}
+                  onClick={() => onClose()}
+                />
+              )}
+              {onConfirm && validationText && (
+                <Button
+                  text={validationText}
+                  onClick={() => onConfirm()}
+                  disabled={disabled}
+                />
+              )}
+            </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}
+            style={{ width: width ?? '65rem' }}
+          >
+            <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}
+            {(cancelText || (onConfirm && validationText)) && (
+              <div className={styles.modal_buttons_container}>
+                {cancelText && onClose && (
+                  <Button
+                    text={cancelText}
+                    variant={cancelBtnVariant}
+                    onClick={() => onClose()}
+                  />
+                )}
+                {onConfirm && validationText && (
+                  <Button
+                    text={validationText}
+                    onClick={() => onConfirm()}
+                    disabled={disabled}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+        </Fade>
+      </MuiModal>
+    );
+  }
+};