odaptos_design_system 2.0.5 → 2.0.6

package/src/Molecules/ToggleTab/ToggleTab.module.scss

@@ -1,37 +1,37 @@
-.toggleTab {
-  background: transparent;
-  border-radius: 0.25rem;
-  padding: 0.25rem;
-  display: flex;
-  width: fit-content;
-
-  .option {
-    display: flex;
-    gap: 1rem;
-    border-radius: 0.25rem;
-    padding: 0 1rem 0 1rem;
-    transition: background-color 0.2s ease-in-out;
-    cursor: pointer;
-
-    &__btn {
-      display: flex;
-      gap: 0.5rem;
-      align-items: center;
-      justify-content: center;
-      p {
-        transition: color 0.2s ease-in-out;
-      }
-    }
-
-    .optionalText {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background-color: #f54c4c;
-      margin: 0.25rem 0 0.25rem 0;
-      padding: 0 0.25rem 0 0.25rem;
-      border-radius: 0.25rem;
-
-    }
-  }
-}
+.toggleTab {
+  background: transparent;
+  border-radius: 0.25rem;
+  padding: 0.25rem;
+  display: flex;
+  width: fit-content;
+
+  .option {
+    display: flex;
+    gap: 1rem;
+    border-radius: 0.25rem;
+    padding: 0 1rem 0 1rem;
+    transition: background-color 0.2s ease-in-out;
+    cursor: pointer;
+
+    &__btn {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+      justify-content: center;
+      p {
+        transition: color 0.2s ease-in-out;
+      }
+    }
+
+    .optionalText {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #f54c4c;
+      margin: 0.25rem 0 0.25rem 0;
+      padding: 0 0.25rem 0 0.25rem;
+      border-radius: 0.25rem;
+
+    }
+  }
+}

package/src/Molecules/ToggleTab/ToggleTab.tsx

@@ -1,118 +1,118 @@
-import React from 'react';
-import styles from './ToggleTab.module.scss';
-import { Text } from '../../';
-
-interface ToggleTabProps {
-  optionOne: string;
-  optionTwo: string;
-  optionalFirstText?: string;
-  optionalSecondText?: string;
-  onClickOptionOne: () => void;
-  onClickOptionTwo: () => void;
-  selectedOption: 1 | 2;
-  variant: 'marketing';
-}
-
-export const ToggleTab: React.FC<ToggleTabProps> = ({
-  optionOne,
-  optionTwo,
-  onClickOptionOne,
-  onClickOptionTwo,
-  optionalFirstText,
-  optionalSecondText,
-  selectedOption = 1,
-  variant = 'marketing',
-}) => {
-  //Map properties according to variant
-  const activeOptionBg = {
-    marketing: '#fff',
-  };
-  const inactiveOptionBg = {
-    marketing: 'transparent',
-  };
-  const activeTextColor = {
-    marketing: '',
-  };
-  const inactiveTextColor = {
-    marketing: '#fff',
-  };
-  const background = {
-    marketing: 'linear-gradient(180deg, #4B4E52 0%, #26292E 100%)',
-  };
-
-  return (
-    <div
-      className={styles.toggleTab}
-      style={{
-        background: background[variant],
-      }}
-    >
-      <div
-        className={styles.option}
-        style={{
-          backgroundColor:
-            selectedOption === 1
-              ? activeOptionBg[variant]
-              : inactiveOptionBg[variant],
-          paddingRight: optionalFirstText ? '0.25rem' : '1rem',
-        }}
-      >
-        <div onClick={onClickOptionOne} className={styles.option__btn}>
-          <Text
-            size="base"
-            weight="bold"
-            text={optionOne}
-            color={
-              selectedOption === 1
-                ? activeTextColor[variant]
-                : inactiveTextColor[variant]
-            }
-          />
-          {optionalFirstText && (
-            <div className={styles.optionalText}>
-              <Text
-                text={optionalFirstText}
-                size="sm"
-                weight="regular"
-                color="#fff"
-              />
-            </div>
-          )}
-        </div>
-      </div>
-      <div
-        className={styles.option}
-        style={{
-          backgroundColor:
-            selectedOption === 2
-              ? activeOptionBg[variant]
-              : inactiveOptionBg[variant],
-          paddingRight: optionalSecondText ? '0.25rem' : '1rem',
-        }}
-      >
-        <div onClick={onClickOptionTwo} className={styles.option__btn}>
-          <Text
-            size="base"
-            weight="bold"
-            text={optionTwo}
-            color={
-              selectedOption === 2
-                ? activeTextColor[variant]
-                : inactiveTextColor[variant]
-            }
-          />
-          {optionalSecondText && (
-            <div className={styles.optionalText}>
-              <Text
-                text={optionalSecondText}
-                size="sm"
-                weight="regular"
-                color="#fff"
-              />
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
+import React from 'react';
+import styles from './ToggleTab.module.scss';
+import { Text } from '../../';
+
+interface ToggleTabProps {
+  optionOne: string;
+  optionTwo: string;
+  optionalFirstText?: string;
+  optionalSecondText?: string;
+  onClickOptionOne: () => void;
+  onClickOptionTwo: () => void;
+  selectedOption: 1 | 2;
+  variant: 'marketing';
+}
+
+export const ToggleTab: React.FC<ToggleTabProps> = ({
+  optionOne,
+  optionTwo,
+  onClickOptionOne,
+  onClickOptionTwo,
+  optionalFirstText,
+  optionalSecondText,
+  selectedOption = 1,
+  variant = 'marketing',
+}) => {
+  //Map properties according to variant
+  const activeOptionBg = {
+    marketing: '#fff',
+  };
+  const inactiveOptionBg = {
+    marketing: 'transparent',
+  };
+  const activeTextColor = {
+    marketing: '',
+  };
+  const inactiveTextColor = {
+    marketing: '#fff',
+  };
+  const background = {
+    marketing: 'linear-gradient(180deg, #4B4E52 0%, #26292E 100%)',
+  };
+
+  return (
+    <div
+      className={styles.toggleTab}
+      style={{
+        background: background[variant],
+      }}
+    >
+      <div
+        className={styles.option}
+        style={{
+          backgroundColor:
+            selectedOption === 1
+              ? activeOptionBg[variant]
+              : inactiveOptionBg[variant],
+          paddingRight: optionalFirstText ? '0.25rem' : '1rem',
+        }}
+      >
+        <div onClick={onClickOptionOne} className={styles.option__btn}>
+          <Text
+            size="base"
+            weight="bold"
+            text={optionOne}
+            color={
+              selectedOption === 1
+                ? activeTextColor[variant]
+                : inactiveTextColor[variant]
+            }
+          />
+          {optionalFirstText && (
+            <div className={styles.optionalText}>
+              <Text
+                text={optionalFirstText}
+                size="sm"
+                weight="regular"
+                color="#fff"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+      <div
+        className={styles.option}
+        style={{
+          backgroundColor:
+            selectedOption === 2
+              ? activeOptionBg[variant]
+              : inactiveOptionBg[variant],
+          paddingRight: optionalSecondText ? '0.25rem' : '1rem',
+        }}
+      >
+        <div onClick={onClickOptionTwo} className={styles.option__btn}>
+          <Text
+            size="base"
+            weight="bold"
+            text={optionTwo}
+            color={
+              selectedOption === 2
+                ? activeTextColor[variant]
+                : inactiveTextColor[variant]
+            }
+          />
+          {optionalSecondText && (
+            <div className={styles.optionalText}>
+              <Text
+                text={optionalSecondText}
+                size="sm"
+                weight="regular"
+                color="#fff"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/Molecules/UserIndicator/UserIndicator.module.scss

@@ -1,16 +1,16 @@
-.user_indicator {
-  padding: 0.625rem 0.5625rem;
-  border-radius: 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;
-  }
-}
+.user_indicator {
+  padding: 0.625rem 0.5625rem;
+  border-radius: 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;
+  }
+}

package/src/Molecules/UserIndicator/UserIndicator.tsx

@@ -1,58 +1,58 @@
-import styles from './UserIndicator.module.scss';
-
-import React, { HTMLAttributes, useState, useEffect } from 'react';
-import { Title } from '../../';
-
-const gradiants = [
-  'to left top, #F27121, #E94057, #8A2387',
-  'to left top, #fdc830, #f37335',
-  'to left top, #59c173, #a17fe0, #5d26c1',
-  'to left top, #355c7d, #6c5b7b, #c06c84',
-  'to left top, #40e0d0, #ff8c00, #ff0080',
-  'to left top, #fffbd5, #b20a2c',
-  'to left top, #e1eec3, #f05053',
-  'to left top, #1a2a6c, #b21f1f, #fdbb2d',
-];
-
-interface UserIndicatorProps extends HTMLAttributes<HTMLDivElement> {
-  firstName: string;
-  lastName: string;
-  gradiant: string;
-}
-
-export const UserIndicator = ({
-  firstName,
-  lastName,
-  gradiant,
-}: UserIndicatorProps) => {
-  const [selectedGradiant, setSelectedGradiant] = useState<string>(
-    gradiant || ''
-  );
-
-  useEffect(() => {
-    if (!gradiant) {
-      const shuffled = gradiants.sort(function () {
-        return 0.5 - Math.random();
-      });
-
-      const selected = shuffled.slice(0, 2)[0];
-      setSelectedGradiant(selected);
-    }
-  }, []);
-
-  return (
-    <div
-      className={styles.user_indicator}
-      style={{
-        background: `linear-gradient(${selectedGradiant})`,
-      }}
-    >
-      <Title
-        text={`${firstName.slice(0, 1)}${lastName.slice(0, 1)}`}
-        weight="bold"
-        color="white"
-        size="sm"
-      />
-    </div>
-  );
-};
+import styles from './UserIndicator.module.scss';
+
+import React, { HTMLAttributes, useState, useEffect } from 'react';
+import { Title } from '../../';
+
+const gradiants = [
+  'to left top, #F27121, #E94057, #8A2387',
+  'to left top, #fdc830, #f37335',
+  'to left top, #59c173, #a17fe0, #5d26c1',
+  'to left top, #355c7d, #6c5b7b, #c06c84',
+  'to left top, #40e0d0, #ff8c00, #ff0080',
+  'to left top, #fffbd5, #b20a2c',
+  'to left top, #e1eec3, #f05053',
+  'to left top, #1a2a6c, #b21f1f, #fdbb2d',
+];
+
+interface UserIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+  firstName: string;
+  lastName: string;
+  gradiant: string;
+}
+
+export const UserIndicator = ({
+  firstName,
+  lastName,
+  gradiant,
+}: UserIndicatorProps) => {
+  const [selectedGradiant, setSelectedGradiant] = useState<string>(
+    gradiant || ''
+  );
+
+  useEffect(() => {
+    if (!gradiant) {
+      const shuffled = gradiants.sort(function () {
+        return 0.5 - Math.random();
+      });
+
+      const selected = shuffled.slice(0, 2)[0];
+      setSelectedGradiant(selected);
+    }
+  }, []);
+
+  return (
+    <div
+      className={styles.user_indicator}
+      style={{
+        background: `linear-gradient(${selectedGradiant})`,
+      }}
+    >
+      <Title
+        text={`${firstName.slice(0, 1)}${lastName.slice(0, 1)}`}
+        weight="bold"
+        color="white"
+        size="sm"
+      />
+    </div>
+  );
+};

package/src/Organisms/DatePicker/DatePicker.modules.scss

@@ -1,68 +1,68 @@
-.date_picker {
-  width: 100%;
-  min-width: 13rem;
-
-  span {
-    font-family: OpenSans;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 1rem;
-    line-height: 1.3;
-    letter-spacing: 0.03em;
-    text-align: left;
-    margin: unset;
-  }
-  label {
-    font-family: OpenSans;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 1rem;
-    line-height: 1.3;
-    letter-spacing: 0.03em;
-    text-align: left;
-    margin: unset;
-  }
-
-  .MuiAutocomplete-endAdornment {
-    display: flex;
-    gap: 0.5rem;
-    margin-top: -0.35rem !important;
-  }
-
-  input {
-    font-family: var(--sdFontFamilyOpenSans);
-    font-style: normal;
-    font-weight: var(--sdFontWeightRegular);
-    font-size: var(--sdTypoTextNoDecorationRegularBase);
-    line-height: var(--sdLineHeight130);
-    letter-spacing: var(--sdLetterSpacingButtons);
-    text-align: left;
-    padding: 8.5px 14px;
-    margin: unset;
-  }
-
-  svg {
-    height: 1rem;
-    width: 1rem;
-  }
-}
-
-.input_top_label {
-  margin-bottom: 0.625rem;
-}
-
-.MuiOutlinedInput-root.MuiInputBase-root.MuiInputBase-formControl {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.text_below {
-  margin: 0.25rem 0.5rem 0.25rem 0.75rem;
-}
-
-.icon {
-  width: 1rem !important;
-  height: 1rem !important;
-  margin-left: 0.25rem;
-}
+.date_picker {
+  width: 100%;
+  min-width: 13rem;
+
+  span {
+    font-family: OpenSans;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1rem;
+    line-height: 1.3;
+    letter-spacing: 0.03em;
+    text-align: left;
+    margin: unset;
+  }
+  label {
+    font-family: OpenSans;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1rem;
+    line-height: 1.3;
+    letter-spacing: 0.03em;
+    text-align: left;
+    margin: unset;
+  }
+
+  .MuiAutocomplete-endAdornment {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: -0.35rem !important;
+  }
+
+  input {
+    font-family: var(--sdFontFamilyOpenSans);
+    font-style: normal;
+    font-weight: var(--sdFontWeightRegular);
+    font-size: var(--sdTypoTextNoDecorationRegularBase);
+    line-height: var(--sdLineHeight130);
+    letter-spacing: var(--sdLetterSpacingButtons);
+    text-align: left;
+    padding: 8.5px 14px;
+    margin: unset;
+  }
+
+  svg {
+    height: 1rem;
+    width: 1rem;
+  }
+}
+
+.input_top_label {
+  margin-bottom: 0.625rem;
+}
+
+.MuiOutlinedInput-root.MuiInputBase-root.MuiInputBase-formControl {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.text_below {
+  margin: 0.25rem 0.5rem 0.25rem 0.75rem;
+}
+
+.icon {
+  width: 1rem !important;
+  height: 1rem !important;
+  margin-left: 0.25rem;
+}