odaptos_design_system 2.0.5 → 2.0.7

package/src/Molecules/LogoSlider/LogoSlider.tsx

@@ -1,55 +1,55 @@
-import React, { ComponentType } from 'react';
-import Marquee from 'react-fast-marquee';
-import styles from './LogoSlider.module.scss';
-import {
-  Partner1SVG,
-  Partner2SVG,
-  Partner3SVG,
-  Partner4SVG,
-  Partner5SVG,
-  Partner6SVG,
-  Partner7SVG,
-  Partner8SVG,
-  Partner9SVG,
-} from '../../';
-
-//Add interface for LogoSliderProps
-export interface LogoSliderProps {
-  logoWidth?: number;
-  logoHeight?: number;
-}
-
-const partnersSVGs: { [key: string]: ComponentType<any> } = {
-  '1': Partner1SVG,
-  '2': Partner2SVG,
-  '3': Partner3SVG,
-  '4': Partner4SVG,
-  '5': Partner5SVG,
-  '6': Partner6SVG,
-  '7': Partner7SVG,
-  '8': Partner8SVG,
-  '9': Partner9SVG,
-};
-
-export const LogoSlider = ({
-  logoWidth = 15,
-  logoHeight = 2.5,
-}: LogoSliderProps) => {
-  const partners = Object.keys(partnersSVGs);
-
-  return (
-    <div className={styles.logoSlider}>
-      <Marquee speed={50}>
-        {partners.map((partner, index) => {
-          const PartnerSVG = partnersSVGs[partner];
-          return (
-            <PartnerSVG
-              key={`partner-${index}`}
-              style={{ width: `${logoWidth}rem`, height: `${logoHeight}rem` }}
-            />
-          );
-        })}
-      </Marquee>
-    </div>
-  );
-};
+import React, { ComponentType } from 'react';
+import Marquee from 'react-fast-marquee';
+import styles from './LogoSlider.module.scss';
+import {
+  Partner1SVG,
+  Partner2SVG,
+  Partner3SVG,
+  Partner4SVG,
+  Partner5SVG,
+  Partner6SVG,
+  Partner7SVG,
+  Partner8SVG,
+  Partner9SVG,
+} from '../../';
+
+//Add interface for LogoSliderProps
+export interface LogoSliderProps {
+  logoWidth?: number;
+  logoHeight?: number;
+}
+
+const partnersSVGs: { [key: string]: ComponentType<any> } = {
+  '1': Partner1SVG,
+  '2': Partner2SVG,
+  '3': Partner3SVG,
+  '4': Partner4SVG,
+  '5': Partner5SVG,
+  '6': Partner6SVG,
+  '7': Partner7SVG,
+  '8': Partner8SVG,
+  '9': Partner9SVG,
+};
+
+export const LogoSlider = ({
+  logoWidth = 15,
+  logoHeight = 2.5,
+}: LogoSliderProps) => {
+  const partners = Object.keys(partnersSVGs);
+
+  return (
+    <div className={styles.logoSlider}>
+      <Marquee speed={50}>
+        {partners.map((partner, index) => {
+          const PartnerSVG = partnersSVGs[partner];
+          return (
+            <PartnerSVG
+              key={`partner-${index}`}
+              style={{ width: `${logoWidth}rem`, height: `${logoHeight}rem` }}
+            />
+          );
+        })}
+      </Marquee>
+    </div>
+  );
+};

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

@@ -1,160 +1,160 @@
-.notification_banner {
-  display: flex;
-  max-width: 87.5rem;
-  padding: 0.5rem;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.5rem;
-  border-radius: 0.25rem;
-
-  h2 {
-    white-space: break-spaces;
-  }
-  p {
-    white-space: break-spaces;
-  }
-}
-
-.banner_content_info {
-  font-family: var(--sdFontFamilyOpenSans);
-  font-size: 0.875rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 140%;
-  white-space: break-spaces;
-  a {
-    font-family: var(--sdFontFamilyOpenSans);
-    font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 140%;
-
-    color: #004799;
-  }
-}
-.banner_content_error {
-  font-family: var(--sdFontFamilyOpenSans);
-  font-size: 0.875rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 140%;
-  white-space: break-spaces;
-
-  a {
-    font-family: var(--sdFontFamilyOpenSans);
-    font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 140%;
-
-    color: #98312e;
-  }
-}
-.banner_content_success {
-  font-family: var(--sdFontFamilyOpenSans);
-  font-size: 0.875rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 140%;
-  white-space: break-spaces;
-
-  a {
-    font-family: var(--sdFontFamilyOpenSans);
-    font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 140%;
-
-    color: #3c743d;
-  }
-}
-.banner_content_warning {
-  font-family: var(--sdFontFamilyOpenSans);
-  font-size: 0.875rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 140%;
-  white-space: break-spaces;
-
-  a {
-    font-family: var(--sdFontFamilyOpenSans);
-    font-size: 0.875rem;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 140%;
-
-    color: #9e7200;
-  }
-}
-
-.notification_banner_header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  .icon_btn_custom {
-    margin-left: auto;
-  }
-
-  .icon_button_error {
-    &:hover {
-      background: #fbb7b7;
-      border: 1px solid #fbb7b7;
-    }
-
-    svg {
-      stroke: #98312e !important;
-      fill: #98312e !important;
-    }
-  }
-  .icon_button_warning {
-    &:hover {
-      background: #ffe299;
-      border: 1px solid #ffe299;
-    }
-
-    svg {
-      stroke: #9e7200 !important;
-      fill: #9e7200 !important;
-    }
-  }
-  .icon_button_success {
-    &:hover {
-      background: #d5edd8;
-      border: 1px solid #d5edd8;
-    }
-
-    svg {
-      stroke: #3c743d !important;
-      fill: #3c743d !important;
-    }
-  }
-  .icon_button_info {
-    &:hover {
-      background: #99c9ff;
-      border: 1px solid #99c9ff;
-    }
-
-    svg {
-      stroke: #004799 !important;
-      fill: #004799 !important;
-    }
-  }
-}
-
-.notification_banner_error {
-  border: 1px solid var(--color-extended-red-500, #f54c4c);
-  background: var(--color-extended-red-100, #fddbdb);
-}
-.notification_banner_warning {
-  border: 1px solid var(--color-extended-yellow-500, #ffb800);
-  background: var(--color-extended-yellow-100, #fff3d6);
-}
-.notification_banner_info {
-  border: 1px solid var(--color-primary-500, #07f);
-  background: var(--color-primary-100, #e5f1ff);
-}
-.notification_banner_success {
-  border: 1px solid var(--color-extended-green-500, #5cbb65);
-  background: var(--color-extended-green-100, #e8f5ea);
-}
+.notification_banner {
+  display: flex;
+  max-width: 87.5rem;
+  padding: 0.5rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+
+  h2 {
+    white-space: break-spaces;
+  }
+  p {
+    white-space: break-spaces;
+  }
+}
+
+.banner_content_info {
+  font-family: var(--sdFontFamilyOpenSans);
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  white-space: break-spaces;
+  a {
+    font-family: var(--sdFontFamilyOpenSans);
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 140%;
+
+    color: #004799;
+  }
+}
+.banner_content_error {
+  font-family: var(--sdFontFamilyOpenSans);
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  white-space: break-spaces;
+
+  a {
+    font-family: var(--sdFontFamilyOpenSans);
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 140%;
+
+    color: #98312e;
+  }
+}
+.banner_content_success {
+  font-family: var(--sdFontFamilyOpenSans);
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  white-space: break-spaces;
+
+  a {
+    font-family: var(--sdFontFamilyOpenSans);
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 140%;
+
+    color: #3c743d;
+  }
+}
+.banner_content_warning {
+  font-family: var(--sdFontFamilyOpenSans);
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  white-space: break-spaces;
+
+  a {
+    font-family: var(--sdFontFamilyOpenSans);
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 140%;
+
+    color: #9e7200;
+  }
+}
+
+.notification_banner_header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  .icon_btn_custom {
+    margin-left: auto;
+  }
+
+  .icon_button_error {
+    &:hover {
+      background: #fbb7b7;
+      border: 1px solid #fbb7b7;
+    }
+
+    svg {
+      stroke: #98312e !important;
+      fill: #98312e !important;
+    }
+  }
+  .icon_button_warning {
+    &:hover {
+      background: #ffe299;
+      border: 1px solid #ffe299;
+    }
+
+    svg {
+      stroke: #9e7200 !important;
+      fill: #9e7200 !important;
+    }
+  }
+  .icon_button_success {
+    &:hover {
+      background: #d5edd8;
+      border: 1px solid #d5edd8;
+    }
+
+    svg {
+      stroke: #3c743d !important;
+      fill: #3c743d !important;
+    }
+  }
+  .icon_button_info {
+    &:hover {
+      background: #99c9ff;
+      border: 1px solid #99c9ff;
+    }
+
+    svg {
+      stroke: #004799 !important;
+      fill: #004799 !important;
+    }
+  }
+}
+
+.notification_banner_error {
+  border: 1px solid var(--color-extended-red-500, #f54c4c);
+  background: var(--color-extended-red-100, #fddbdb);
+}
+.notification_banner_warning {
+  border: 1px solid var(--color-extended-yellow-500, #ffb800);
+  background: var(--color-extended-yellow-100, #fff3d6);
+}
+.notification_banner_info {
+  border: 1px solid var(--color-primary-500, #07f);
+  background: var(--color-primary-100, #e5f1ff);
+}
+.notification_banner_success {
+  border: 1px solid var(--color-extended-green-500, #5cbb65);
+  background: var(--color-extended-green-100, #e8f5ea);
+}