odaptos_design_system 2.0.4 → 2.0.6

package/src/Molecules/Accordion/Accordion.modules.scss

@@ -1,41 +1,41 @@
-.accordion {
-  display: flex;
-  max-width: 32rem;
-  padding: 0.5rem;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.5rem;
-  background: var(--color-neutral-basics-white, #fff);
-  width: 100%;
-  box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.08);
-  border-radius: 0.5rem;
-  &:hover {
-    background: var(--color-neutral-clear-shades-100, #fafafa);
-  }
-
-  .accordion_header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.5rem;
-    width: 100%;
-    cursor: pointer;
-
-    p {
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      user-select: none;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      -khtml-user-select: none;
-      width: 85%;
-    }
-
-    svg {
-      width: 1rem;
-      height: 1rem;
-    }
-  }
-}
+.accordion {
+  display: flex;
+  max-width: 32rem;
+  padding: 0.5rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  background: var(--color-neutral-basics-white, #fff);
+  width: 100%;
+  box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 0.5rem;
+  &:hover {
+    background: var(--color-neutral-clear-shades-100, #fafafa);
+  }
+
+  .accordion_header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    width: 100%;
+    cursor: pointer;
+
+    p {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      user-select: none;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      -khtml-user-select: none;
+      width: 85%;
+    }
+
+    svg {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+}

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);
+}