odaptos_design_system 2.0.5 → 2.0.7

package/src/Molecules/Notifications/Banner.tsx

@@ -1,134 +1,134 @@
-import React, { HTMLAttributes } from 'react';
-import {
-  Title,
-  IconButton,
-  AlertCircledIcon,
-  CheckedCircled,
-  InfoCircledIcon,
-  RemoveCircledIcon,
-} from '../../';
-import styles from './Banner.modules.scss';
-
-interface BannerProps extends HTMLAttributes<HTMLDivElement> {
-  title?: string;
-  content?: string;
-  textLink?: string;
-  link?: string;
-  className?: string;
-  onClose?: () => void;
-  type: 'error' | 'warning' | 'success' | 'info';
-}
-
-/**
- * Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=2527-33150&mode=dev
- */
-export const Banner = ({
-  title,
-  content,
-  textLink,
-  link,
-  className,
-  type,
-  onClose,
-  ...props
-}: BannerProps) => {
-  const getBannerIcon = () => {
-    if (type === 'error') {
-      return <AlertCircledIcon fill="#98312E" stroke="#98312E" size="xl" />;
-    } else if (type === 'warning') {
-      return <AlertCircledIcon fill="#9E7200" stroke="#9E7200" size="xl" />;
-    } else if (type === 'success') {
-      return <CheckedCircled stroke="#3C743D" fill="#3C743D" size="xl" />;
-    } else {
-      return <InfoCircledIcon stroke="#004799" fill="#004799" size="xl" />;
-    }
-  };
-
-  const getTextColor = () => {
-    if (type === 'error') {
-      return '#98312E';
-    } else if (type === 'warning') {
-      return '#9E7200';
-    } else if (type === 'success') {
-      return '#3C743D';
-    } else {
-      return '#004799';
-    }
-  };
-
-  const getBannerColor = () => {
-    if (type === 'error') {
-      return styles.notification_banner_error;
-    } else if (type === 'warning') {
-      return styles.notification_banner_warning;
-    } else if (type === 'success') {
-      return styles.notification_banner_success;
-    } else {
-      return styles.notification_banner_info;
-    }
-  };
-  const getIconButtonColor = () => {
-    if (type === 'error') {
-      return styles.icon_button_error;
-    } else if (type === 'warning') {
-      return styles.icon_button_warning;
-    } else if (type === 'success') {
-      return styles.icon_button_success;
-    } else {
-      return styles.icon_button_info;
-    }
-  };
-  const getContentColor = () => {
-    if (type === 'error') {
-      return styles.banner_content_error;
-    } else if (type === 'warning') {
-      return styles.banner_content_warning;
-    } else if (type === 'success') {
-      return styles.banner_content_success;
-    } else {
-      return styles.banner_content_info;
-    }
-  };
-
-  return (
-    <div
-      {...props}
-      className={`${
-        styles.notification_banner
-      } ${getBannerColor()} ${className}`}
-    >
-      <div className={styles.notification_banner_header}>
-        {getBannerIcon()}
-        {title && (
-          <Title
-            text={title}
-            weight="semi-bold"
-            size="base"
-            color={getTextColor()}
-          />
-        )}
-        {onClose && (
-          <IconButton
-            icon={<RemoveCircledIcon />}
-            onClick={() => {
-              onClose();
-            }}
-            size="xs"
-            variant="tertiary"
-            className={`${styles.icon_btn_custom} ${getIconButtonColor()}`}
-          />
-        )}
-      </div>
-
-      {content && (
-        <div
-          dangerouslySetInnerHTML={{
-            __html: content,
-          }}
-          style={{ color: getTextColor() }}
-          className={getContentColor()}
-        />
-      )}
-    </div>
-  );
-};
+import React, { HTMLAttributes } from 'react';
+import {
+  Title,
+  IconButton,
+  AlertCircledIcon,
+  CheckedCircled,
+  InfoCircledIcon,
+  RemoveCircledIcon,
+} from '../../';
+import styles from './Banner.modules.scss';
+
+interface BannerProps extends HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  content?: string;
+  textLink?: string;
+  link?: string;
+  className?: string;
+  onClose?: () => void;
+  type: 'error' | 'warning' | 'success' | 'info';
+}
+
+/**
+ * Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=2527-33150&mode=dev
+ */
+export const Banner = ({
+  title,
+  content,
+  textLink,
+  link,
+  className,
+  type,
+  onClose,
+  ...props
+}: BannerProps) => {
+  const getBannerIcon = () => {
+    if (type === 'error') {
+      return <AlertCircledIcon fill="#98312E" stroke="#98312E" size="xl" />;
+    } else if (type === 'warning') {
+      return <AlertCircledIcon fill="#9E7200" stroke="#9E7200" size="xl" />;
+    } else if (type === 'success') {
+      return <CheckedCircled stroke="#3C743D" fill="#3C743D" size="xl" />;
+    } else {
+      return <InfoCircledIcon stroke="#004799" fill="#004799" size="xl" />;
+    }
+  };
+
+  const getTextColor = () => {
+    if (type === 'error') {
+      return '#98312E';
+    } else if (type === 'warning') {
+      return '#9E7200';
+    } else if (type === 'success') {
+      return '#3C743D';
+    } else {
+      return '#004799';
+    }
+  };
+
+  const getBannerColor = () => {
+    if (type === 'error') {
+      return styles.notification_banner_error;
+    } else if (type === 'warning') {
+      return styles.notification_banner_warning;
+    } else if (type === 'success') {
+      return styles.notification_banner_success;
+    } else {
+      return styles.notification_banner_info;
+    }
+  };
+  const getIconButtonColor = () => {
+    if (type === 'error') {
+      return styles.icon_button_error;
+    } else if (type === 'warning') {
+      return styles.icon_button_warning;
+    } else if (type === 'success') {
+      return styles.icon_button_success;
+    } else {
+      return styles.icon_button_info;
+    }
+  };
+  const getContentColor = () => {
+    if (type === 'error') {
+      return styles.banner_content_error;
+    } else if (type === 'warning') {
+      return styles.banner_content_warning;
+    } else if (type === 'success') {
+      return styles.banner_content_success;
+    } else {
+      return styles.banner_content_info;
+    }
+  };
+
+  return (
+    <div
+      {...props}
+      className={`${
+        styles.notification_banner
+      } ${getBannerColor()} ${className}`}
+    >
+      <div className={styles.notification_banner_header}>
+        {getBannerIcon()}
+        {title && (
+          <Title
+            text={title}
+            weight="semi-bold"
+            size="base"
+            color={getTextColor()}
+          />
+        )}
+        {onClose && (
+          <IconButton
+            icon={<RemoveCircledIcon />}
+            onClick={() => {
+              onClose();
+            }}
+            size="xs"
+            variant="tertiary"
+            className={`${styles.icon_btn_custom} ${getIconButtonColor()}`}
+          />
+        )}
+      </div>
+
+      {content && (
+        <div
+          dangerouslySetInnerHTML={{
+            __html: content,
+          }}
+          style={{ color: getTextColor() }}
+          className={getContentColor()}
+        />
+      )}
+    </div>
+  );
+};

package/src/Molecules/Notifications/NotificationIcon.tsx

@@ -1,26 +1,26 @@
-import React, { HTMLAttributes } from 'react';
-import { AlarmBellStatusIcon, AlamBellIdleIcon } from '../../';
-
-interface TagProps extends HTMLAttributes<HTMLDivElement> {
-  type: 'idle' | 'info' | 'warning' | 'critical';
-  className: string;
-}
-
-/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=2527-33256&mode=dev  */
-export const NotificationIcon = ({ type = 'idle', className }: TagProps) => {
-  const getStatusColor = (): string => {
-    if (type === 'info') return '#0077FF';
-    else if (type === 'warning') return '#FFB800';
-    else if (type === 'critical') return '#F54C4C';
-    else return '#004799';
-  };
-
-  if (type === 'idle') return <AlamBellIdleIcon className={className} />;
-  return (
-    <AlarmBellStatusIcon
-      className={className}
-      stroke={getStatusColor()}
-      fill={getStatusColor()}
-    />
-  );
-};
+import React, { HTMLAttributes } from 'react';
+import { AlarmBellStatusIcon, AlamBellIdleIcon } from '../../';
+
+interface TagProps extends HTMLAttributes<HTMLDivElement> {
+  type: 'idle' | 'info' | 'warning' | 'critical';
+  className: string;
+}
+
+/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=2527-33256&mode=dev  */
+export const NotificationIcon = ({ type = 'idle', className }: TagProps) => {
+  const getStatusColor = (): string => {
+    if (type === 'info') return '#0077FF';
+    else if (type === 'warning') return '#FFB800';
+    else if (type === 'critical') return '#F54C4C';
+    else return '#004799';
+  };
+
+  if (type === 'idle') return <AlamBellIdleIcon className={className} />;
+  return (
+    <AlarmBellStatusIcon
+      className={className}
+      stroke={getStatusColor()}
+      fill={getStatusColor()}
+    />
+  );
+};

package/src/Molecules/Notifications/Toast.modules.scss

@@ -1,87 +1,87 @@
-.notification_toast {
-  display: flex;
-  width: 27rem;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 0.5rem;
-  position: relative;
-  padding-right: 2.75rem;
-  transform: translateX(170%);
-  animation: moveleft 0.5s linear forwards;
-  .notification_toast_content {
-    display: flex;
-    padding: 1rem;
-    flex-direction: row;
-    align-items: flex-end;
-    gap: 0.625rem;
-    flex: 1 0 0;
-
-    .toast_link {
-      white-space: nowrap;
-    }
-  }
-  @keyframes moveleft {
-    100% {
-      transform: translateX(95%);
-    }
-  }
-
-  .close_toast_btn {
-    display: flex;
-    width: 2.75rem;
-    height: 100% !important;
-    min-height: 100% !important;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
-    border: none;
-    border-radius: 0rem 0.4375rem 0.4375rem 0rem;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    svg {
-      fill: white;
-      stroke: white;
-      transform: rotate(45deg);
-    }
-  }
-  .close_toast_btn_error {
-    border: 1px solid var(--color-extended-red-500, #f54c4c);
-    background: var(--color-extended-red-500, #f54c4c);
-  }
-  .close_toast_btn_warning {
-    border: 1px solid var(--color-extended-yellow-500, #ffb800);
-    background: var(--color-extended-yellow-500, #ffb800);
-  }
-  .close_toast_btn_info {
-    border: 1px solid var(--color-primary-500, #07f);
-    background: var(--color-primary-500, #07f);
-  }
-  .close_toast_btn_success {
-    border: 1px solid var(--color-extended-green-500, #5cbb65);
-    background: var(--color-extended-green-500, #5cbb65);
-  }
-}
-
-.notification_toast_error {
-  border-radius: 0.5rem;
-  border: 1px solid var(--color-extended-red-500, #f54c4c);
-  background: var(--color-extended-red-100, #fddbdb);
-}
-.notification_toast_warning {
-  border-radius: 0.5rem;
-  border: 1px solid var(--color-extended-yellow-500, #ffb800);
-  background: var(--color-extended-yellow-100, #fff3d6);
-}
-.notification_toast_info {
-  border-radius: 0.5rem;
-  border: 1px solid var(--color-primary-500, #07f);
-  background: var(--color-primary-100, #e5f1ff);
-}
-.notification_toast_success {
-  border-radius: 0.5rem;
-  border: 1px solid var(--color-extended-green-500, #5cbb65);
-  background: var(--color-extended-green-100, #e8f5ea);
-}
+.notification_toast {
+  display: flex;
+  width: 27rem;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 0.5rem;
+  position: relative;
+  padding-right: 2.75rem;
+  transform: translateX(170%);
+  animation: moveleft 0.5s linear forwards;
+  .notification_toast_content {
+    display: flex;
+    padding: 1rem;
+    flex-direction: row;
+    align-items: flex-end;
+    gap: 0.625rem;
+    flex: 1 0 0;
+
+    .toast_link {
+      white-space: nowrap;
+    }
+  }
+  @keyframes moveleft {
+    100% {
+      transform: translateX(95%);
+    }
+  }
+
+  .close_toast_btn {
+    display: flex;
+    width: 2.75rem;
+    height: 100% !important;
+    min-height: 100% !important;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    border: none;
+    border-radius: 0rem 0.4375rem 0.4375rem 0rem;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    svg {
+      fill: white;
+      stroke: white;
+      transform: rotate(45deg);
+    }
+  }
+  .close_toast_btn_error {
+    border: 1px solid var(--color-extended-red-500, #f54c4c);
+    background: var(--color-extended-red-500, #f54c4c);
+  }
+  .close_toast_btn_warning {
+    border: 1px solid var(--color-extended-yellow-500, #ffb800);
+    background: var(--color-extended-yellow-500, #ffb800);
+  }
+  .close_toast_btn_info {
+    border: 1px solid var(--color-primary-500, #07f);
+    background: var(--color-primary-500, #07f);
+  }
+  .close_toast_btn_success {
+    border: 1px solid var(--color-extended-green-500, #5cbb65);
+    background: var(--color-extended-green-500, #5cbb65);
+  }
+}
+
+.notification_toast_error {
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-extended-red-500, #f54c4c);
+  background: var(--color-extended-red-100, #fddbdb);
+}
+.notification_toast_warning {
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-extended-yellow-500, #ffb800);
+  background: var(--color-extended-yellow-100, #fff3d6);
+}
+.notification_toast_info {
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-primary-500, #07f);
+  background: var(--color-primary-100, #e5f1ff);
+}
+.notification_toast_success {
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-extended-green-500, #5cbb65);
+  background: var(--color-extended-green-100, #e8f5ea);
+}

package/src/Molecules/Notifications/Toast.tsx

@@ -1,90 +1,90 @@
-import React, { HTMLAttributes } from 'react';
-import { Text, Link, AddIcon } from '../../';
-import styles from './Toast.modules.scss';
-
-interface ToastProps extends HTMLAttributes<HTMLDivElement> {
-  content: string;
-  textLink?: string;
-  link?: string;
-  className?: string;
-  type: 'error' | 'warning' | 'success' | 'info';
-  onClose?: () => void;
-}
-
-/**
- * Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=2527-33231&mode=dev
- */
-export const Toast = ({
-  content,
-  textLink,
-  link,
-  className,
-  type,
-  onClose,
-  ...props
-}: ToastProps) => {
-  const getTextColor = () => {
-    if (type === 'error') {
-      return '#98312E';
-    } else if (type === 'warning') {
-      return '#9E7200';
-    } else if (type === 'success') {
-      return '#3C743D';
-    } else {
-      return '#004799';
-    }
-  };
-
-  const getCloseBtnStyleByType = () => {
-    if (type === 'error') {
-      return styles.close_toast_btn_error;
-    } else if (type === 'warning') {
-      return styles.close_toast_btn_warning;
-    } else if (type === 'success') {
-      return styles.close_toast_btn_success;
-    } else {
-      return styles.close_toast_btn_info;
-    }
-  };
-  const getToastStyleByType = () => {
-    if (type === 'error') {
-      return styles.notification_toast_error;
-    } else if (type === 'warning') {
-      return styles.notification_toast_warning;
-    } else if (type === 'success') {
-      return styles.notification_toast_success;
-    } else {
-      return styles.notification_toast_info;
-    }
-  };
-
-  return (
-    <div
-      {...props}
-      className={`${
-        styles.notification_toast
-      } ${getToastStyleByType()} ${className}`}
-    >
-      <div className={styles.notification_toast_content}>
-        <Text
-          text={content}
-          weight="regular"
-          size="base"
-          color={getTextColor()}
-        />
-
-        {link && textLink && (
-          <Link text={textLink} link={link} className={styles.toast_link} />
-        )}
-      </div>
-      <button
-        className={`${styles.close_toast_btn} ${getCloseBtnStyleByType()}`}
-        onClick={() => {
-          if (onClose) onClose;
-        }}
-      >
-        <AddIcon />
-      </button>
-    </div>
-  );
-};
+import React, { HTMLAttributes } from 'react';
+import { Text, Link, AddIcon } from '../../';
+import styles from './Toast.modules.scss';
+
+interface ToastProps extends HTMLAttributes<HTMLDivElement> {
+  content: string;
+  textLink?: string;
+  link?: string;
+  className?: string;
+  type: 'error' | 'warning' | 'success' | 'info';
+  onClose?: () => void;
+}
+
+/**
+ * Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=2527-33231&mode=dev
+ */
+export const Toast = ({
+  content,
+  textLink,
+  link,
+  className,
+  type,
+  onClose,
+  ...props
+}: ToastProps) => {
+  const getTextColor = () => {
+    if (type === 'error') {
+      return '#98312E';
+    } else if (type === 'warning') {
+      return '#9E7200';
+    } else if (type === 'success') {
+      return '#3C743D';
+    } else {
+      return '#004799';
+    }
+  };
+
+  const getCloseBtnStyleByType = () => {
+    if (type === 'error') {
+      return styles.close_toast_btn_error;
+    } else if (type === 'warning') {
+      return styles.close_toast_btn_warning;
+    } else if (type === 'success') {
+      return styles.close_toast_btn_success;
+    } else {
+      return styles.close_toast_btn_info;
+    }
+  };
+  const getToastStyleByType = () => {
+    if (type === 'error') {
+      return styles.notification_toast_error;
+    } else if (type === 'warning') {
+      return styles.notification_toast_warning;
+    } else if (type === 'success') {
+      return styles.notification_toast_success;
+    } else {
+      return styles.notification_toast_info;
+    }
+  };
+
+  return (
+    <div
+      {...props}
+      className={`${
+        styles.notification_toast
+      } ${getToastStyleByType()} ${className}`}
+    >
+      <div className={styles.notification_toast_content}>
+        <Text
+          text={content}
+          weight="regular"
+          size="base"
+          color={getTextColor()}
+        />
+
+        {link && textLink && (
+          <Link text={textLink} link={link} className={styles.toast_link} />
+        )}
+      </div>
+      <button
+        className={`${styles.close_toast_btn} ${getCloseBtnStyleByType()}`}
+        onClick={() => {
+          if (onClose) onClose;
+        }}
+      >
+        <AddIcon />
+      </button>
+    </div>
+  );
+};