odaptos_design_system 2.0.5 → 2.0.6

package/src/Molecules/Accordion/Accordion.tsx

@@ -1,49 +1,49 @@
-import React, { useState } from 'react';
-import styles from './Accordion.modules.scss';
-import { Text, ArrowLineDownIcon, IconButton } from '../../';
-
-interface AccordionProps {
-  title: string;
-  children: JSX.Element;
-  icon?: JSX.Element;
-  className?: string;
-}
-
-/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=2760-23794&mode=dev  */
-export const Accordion = ({
-  title,
-  children,
-  className,
-  icon,
-  ...props
-}: AccordionProps) => {
-  const [isAccordionOpen, setIsAccordionOpen] = useState(false);
-  return (
-    <div {...props} className={`${styles.accordion} ${className ?? ''}`}>
-      <div
-        className={styles.accordion_header}
-        onClick={() => setIsAccordionOpen((prev) => !prev)}
-      >
-        <Text size="base" text={title} weight="bold" />
-        <IconButton
-          variant="tertiary"
-          icon={
-            icon ? (
-              icon
-            ) : (
-              <ArrowLineDownIcon
-                style={{
-                  transform: isAccordionOpen
-                    ? 'rotate(180deg)'
-                    : 'rotate(0deg)',
-                  transition: 'all 0.2s linear',
-                }}
-              />
-            )
-          }
-        />
-      </div>
-      {isAccordionOpen && <div>{children}</div>}
-    </div>
-  );
-};
+import React, { useState } from 'react';
+import styles from './Accordion.modules.scss';
+import { Text, ArrowLineDownIcon, IconButton } from '../../';
+
+interface AccordionProps {
+  title: string;
+  children: JSX.Element;
+  icon?: JSX.Element;
+  className?: string;
+}
+
+/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=2760-23794&mode=dev  */
+export const Accordion = ({
+  title,
+  children,
+  className,
+  icon,
+  ...props
+}: AccordionProps) => {
+  const [isAccordionOpen, setIsAccordionOpen] = useState(false);
+  return (
+    <div {...props} className={`${styles.accordion} ${className ?? ''}`}>
+      <div
+        className={styles.accordion_header}
+        onClick={() => setIsAccordionOpen((prev) => !prev)}
+      >
+        <Text size="base" text={title} weight="bold" />
+        <IconButton
+          variant="tertiary"
+          icon={
+            icon ? (
+              icon
+            ) : (
+              <ArrowLineDownIcon
+                style={{
+                  transform: isAccordionOpen
+                    ? 'rotate(180deg)'
+                    : 'rotate(0deg)',
+                  transition: 'all 0.2s linear',
+                }}
+              />
+            )
+          }
+        />
+      </div>
+      {isAccordionOpen && <div>{children}</div>}
+    </div>
+  );
+};

package/src/Molecules/ChatMessage/ChatMessage.module.scss

@@ -1,161 +1,161 @@
-.message_chatbot {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  gap: 0.25rem;
-}
-
-.user_message_container {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  gap: 0.5rem;
-  width: 100%;
-  animation: floatup 0.5s forwards;
-  margin: 0.5rem 0;
-
-  .message {
-    p {
-      margin-left: auto;
-    }
-  }
-
-  @keyframes floatup {
-    from {
-      transform: translateY(0.875rem);
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0px);
-      opacity: 1;
-    }
-  }
-}
-
-.not_user_text_message {
-  display: flex;
-  padding: 1rem;
-  flex-direction: column;
-  align-items: flex-end;
-  width: fit-content;
-  max-width: 85%;
-  gap: 0.5rem;
-  white-space: break-spaces;
-  border-radius: 0rem 0.5rem 0.5rem 0.5rem;
-  border: 1px solid #d5d5d6;
-  background: #fafafa;
-  .user_text {
-    color: var(--Color-Neutral-Dark-Shades-950, #26292e);
-    font-family: 'OpenSans';
-    font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 1.225rem;
-    margin: 0;
-  }
-  .blue {
-    color: #004799;
-  }
-}
-
-.user_text_message {
-  display: flex;
-  padding: 1rem;
-  flex-direction: column;
-  align-items: flex-end;
-  width: fit-content;
-  margin-left: auto;
-  gap: 0.5rem;
-  white-space: break-spaces;
-  border-radius: 0.5rem 0rem 0.5rem 0.5rem;
-  border: 1px solid var(--color-primary-200, #99c9ff);
-  background: var(--color-primary-100, #e5f1ff);
-  max-width: 85%;
-  .user_text {
-    color: var(--Color-Neutral-Dark-Shades-950, #26292e);
-    font-family: 'OpenSans';
-    font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 1.225rem;
-    margin: 0;
-  }
-  .blue {
-    color: #004799;
-  }
-}
-
-.user_text_message_username_left {
-  display: flex;
-  width: fit-content;
-  margin-left: auto;
-}
-.user_text_message_username {
-  display: flex;
-  width: fit-content;
-}
-
-.user_indicator {
-  padding: 0.625rem 0.5625rem;
-  border-radius: 0.5rem 0.5rem 0.5rem 0rem;
-  height: 2.75rem;
-  width: 2.75rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(
-    --color-gradients-003,
-    linear-gradient(135deg, #07f 0%, #9024f6 100%)
-  );
-  p {
-    padding: 0;
-  }
-}
-
-.bot_indicator {
-  padding: 0.625rem 0.5625rem;
-  border-radius: 0.5rem 0.5rem 0rem 0.5rem;
-  height: 2.75rem;
-  width: 2.75rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(
-    --color-gradients-003,
-    linear-gradient(135deg, #07f 0%, #9024f6 100%)
-  );
-  p {
-    padding: 0;
-  }
-}
-
-.message_chatbot {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  gap: 0.25rem;
-  .user_text {
-    color: var(--Color-Neutral-Dark-Shades-950, #26292e);
-    font-family: 'OpenSans';
-    font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 1.225rem;
-    margin: 0;
-  }
-}
-
-.text_message {
-  position: relative;
-  display: flex;
-  padding: 1rem;
-  flex-direction: column;
-  align-items: flex-start;
-  width: fit-content;
-  max-width: 100%;
-  gap: 0.5rem;
-  white-space: break-spaces;
-  border-radius: 0rem 0.5rem 0.5rem 0.5rem;
-  border: 1px solid var(--color-neutral-clear-shades-200, #e1e1e2);
-  background: var(--color-neutral-basics-white, #fff);
-}
+.message_chatbot {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 0.25rem;
+}
+
+.user_message_container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  width: 100%;
+  animation: floatup 0.5s forwards;
+  margin: 0.5rem 0;
+
+  .message {
+    p {
+      margin-left: auto;
+    }
+  }
+
+  @keyframes floatup {
+    from {
+      transform: translateY(0.875rem);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0px);
+      opacity: 1;
+    }
+  }
+}
+
+.not_user_text_message {
+  display: flex;
+  padding: 1rem;
+  flex-direction: column;
+  align-items: flex-end;
+  width: fit-content;
+  max-width: 85%;
+  gap: 0.5rem;
+  white-space: break-spaces;
+  border-radius: 0rem 0.5rem 0.5rem 0.5rem;
+  border: 1px solid #d5d5d6;
+  background: #fafafa;
+  .user_text {
+    color: var(--Color-Neutral-Dark-Shades-950, #26292e);
+    font-family: 'OpenSans';
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.225rem;
+    margin: 0;
+  }
+  .blue {
+    color: #004799;
+  }
+}
+
+.user_text_message {
+  display: flex;
+  padding: 1rem;
+  flex-direction: column;
+  align-items: flex-end;
+  width: fit-content;
+  margin-left: auto;
+  gap: 0.5rem;
+  white-space: break-spaces;
+  border-radius: 0.5rem 0rem 0.5rem 0.5rem;
+  border: 1px solid var(--color-primary-200, #99c9ff);
+  background: var(--color-primary-100, #e5f1ff);
+  max-width: 85%;
+  .user_text {
+    color: var(--Color-Neutral-Dark-Shades-950, #26292e);
+    font-family: 'OpenSans';
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.225rem;
+    margin: 0;
+  }
+  .blue {
+    color: #004799;
+  }
+}
+
+.user_text_message_username_left {
+  display: flex;
+  width: fit-content;
+  margin-left: auto;
+}
+.user_text_message_username {
+  display: flex;
+  width: fit-content;
+}
+
+.user_indicator {
+  padding: 0.625rem 0.5625rem;
+  border-radius: 0.5rem 0.5rem 0.5rem 0rem;
+  height: 2.75rem;
+  width: 2.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(
+    --color-gradients-003,
+    linear-gradient(135deg, #07f 0%, #9024f6 100%)
+  );
+  p {
+    padding: 0;
+  }
+}
+
+.bot_indicator {
+  padding: 0.625rem 0.5625rem;
+  border-radius: 0.5rem 0.5rem 0rem 0.5rem;
+  height: 2.75rem;
+  width: 2.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(
+    --color-gradients-003,
+    linear-gradient(135deg, #07f 0%, #9024f6 100%)
+  );
+  p {
+    padding: 0;
+  }
+}
+
+.message_chatbot {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 0.25rem;
+  .user_text {
+    color: var(--Color-Neutral-Dark-Shades-950, #26292e);
+    font-family: 'OpenSans';
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.225rem;
+    margin: 0;
+  }
+}
+
+.text_message {
+  position: relative;
+  display: flex;
+  padding: 1rem;
+  flex-direction: column;
+  align-items: flex-start;
+  width: fit-content;
+  max-width: 100%;
+  gap: 0.5rem;
+  white-space: break-spaces;
+  border-radius: 0rem 0.5rem 0.5rem 0.5rem;
+  border: 1px solid var(--color-neutral-clear-shades-200, #e1e1e2);
+  background: var(--color-neutral-basics-white, #fff);
+}

package/src/Molecules/ChatMessage/ChatMessage.tsx

@@ -1,110 +1,110 @@
-import React, { HTMLAttributes } from 'react';
-import { TimeInterval, Title } from '../../';
-import styles from './ChatMessage.module.scss';
-
-export interface ChatMessageProps extends HTMLAttributes<HTMLDivElement> {
-  message: any;
-  isMe?: boolean;
-  onClickTime: (nb: number) => void;
-  classNameTime?: string;
-  startTime: number;
-  endTime?: number;
-}
-
-export const ChatMessage = ({
-  message,
-  isMe,
-  onClickTime,
-  classNameTime,
-  startTime,
-  endTime,
-}: ChatMessageProps) => {
-  const replaceURLs = (message: string) => {
-    if (!message) return;
-    var urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
-    return message.replace(urlRegex, (url) => {
-      var hyperlink = url;
-      if (!hyperlink.match('^https?://')) {
-        hyperlink = 'https://' + hyperlink;
-      }
-      return (
-        '<a href="' +
-        hyperlink +
-        '" target="_blank" rel="noopener noreferrer">' +
-        url +
-        '</a>'
-      );
-    });
-  };
-
-  const getTwoInitials = (name: string) => {
-    return name
-      .split(' ')
-      .slice(0, 2)
-      .map((n: string) => n[0].toUpperCase())
-      .join('');
-  };
-
-  if (!isMe)
-    return (
-      <div className={styles.user_message_container}>
-        <div className={styles.bot_indicator}>
-          <Title
-            text={getTwoInitials(message.from.name)}
-            weight="bold"
-            color="white"
-            size="sm"
-          />
-        </div>
-        <div className={styles.message_chatbot}>
-          <div className={styles.not_user_text_message}>
-            <div
-              dangerouslySetInnerHTML={{
-                __html: replaceURLs(message.body) ?? '',
-              }}
-              className={styles.user_text}
-            />
-          </div>
-          <TimeInterval
-            onClick={onClickTime}
-            className={classNameTime}
-            startTime={startTime}
-            endTime={endTime}
-          />
-        </div>
-      </div>
-    );
-  else {
-    return (
-      <div className={styles.user_message_container}>
-        <div className={styles.message_chatbot}>
-          <div className={styles.user_text_message}>
-            <div
-              dangerouslySetInnerHTML={{
-                __html: replaceURLs(message.body) ?? '',
-              }}
-              className={styles.user_text}
-            />
-          </div>
-          <TimeInterval
-            onClick={onClickTime}
-            className={classNameTime}
-            startTime={startTime}
-            endTime={endTime}
-          />
-        </div>
-        <div className={styles.user_indicator}>
-          <Title
-            text={`${message.from.name
-              .split(' ')
-              .map((n: string[]) => n[0])
-              .join('')}`}
-            weight="bold"
-            color="white"
-            size="sm"
-          />
-        </div>
-      </div>
-    );
-  }
-};
+import React, { HTMLAttributes } from 'react';
+import { TimeInterval, Title } from '../../';
+import styles from './ChatMessage.module.scss';
+
+export interface ChatMessageProps extends HTMLAttributes<HTMLDivElement> {
+  message: any;
+  isMe?: boolean;
+  onClickTime: (nb: number) => void;
+  classNameTime?: string;
+  startTime: number;
+  endTime?: number;
+}
+
+export const ChatMessage = ({
+  message,
+  isMe,
+  onClickTime,
+  classNameTime,
+  startTime,
+  endTime,
+}: ChatMessageProps) => {
+  const replaceURLs = (message: string) => {
+    if (!message) return;
+    var urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
+    return message.replace(urlRegex, (url) => {
+      var hyperlink = url;
+      if (!hyperlink.match('^https?://')) {
+        hyperlink = 'https://' + hyperlink;
+      }
+      return (
+        '<a href="' +
+        hyperlink +
+        '" target="_blank" rel="noopener noreferrer">' +
+        url +
+        '</a>'
+      );
+    });
+  };
+
+  const getTwoInitials = (name: string) => {
+    return name
+      .split(' ')
+      .slice(0, 2)
+      .map((n: string) => n[0].toUpperCase())
+      .join('');
+  };
+
+  if (!isMe)
+    return (
+      <div className={styles.user_message_container}>
+        <div className={styles.bot_indicator}>
+          <Title
+            text={getTwoInitials(message.from.name)}
+            weight="bold"
+            color="white"
+            size="sm"
+          />
+        </div>
+        <div className={styles.message_chatbot}>
+          <div className={styles.not_user_text_message}>
+            <div
+              dangerouslySetInnerHTML={{
+                __html: replaceURLs(message.body) ?? '',
+              }}
+              className={styles.user_text}
+            />
+          </div>
+          <TimeInterval
+            onClick={onClickTime}
+            className={classNameTime}
+            startTime={startTime}
+            endTime={endTime}
+          />
+        </div>
+      </div>
+    );
+  else {
+    return (
+      <div className={styles.user_message_container}>
+        <div className={styles.message_chatbot}>
+          <div className={styles.user_text_message}>
+            <div
+              dangerouslySetInnerHTML={{
+                __html: replaceURLs(message.body) ?? '',
+              }}
+              className={styles.user_text}
+            />
+          </div>
+          <TimeInterval
+            onClick={onClickTime}
+            className={classNameTime}
+            startTime={startTime}
+            endTime={endTime}
+          />
+        </div>
+        <div className={styles.user_indicator}>
+          <Title
+            text={`${message.from.name
+              .split(' ')
+              .map((n: string[]) => n[0])
+              .join('')}`}
+            weight="bold"
+            color="white"
+            size="sm"
+          />
+        </div>
+      </div>
+    );
+  }
+};