odaptos_design_system 2.0.5 → 2.0.7

package/src/Molecules/Tabs/TabsUnderLine.tsx

@@ -1,199 +1,200 @@
-import React, { useEffect, useState } from 'react';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import styles from './tabsUnderline.modules.scss';
-import {
-  ArrowLineRightIcon,
-  PopoverBeta,
-  colors,
-  Title,
-  Tooltip,
-} from '../../';
-
-interface TabsUnderlineProps {
-  type: 'underline' | 'filled';
-  defaultValue: number;
-  onChange: (index: number, item: any) => void;
-  tabs: any[];
-  className?: string;
-  isArrowIconDisplay?: boolean;
-}
-
-/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=2946-50988&mode=dev  */
-export const TabsUnderline = ({
-  defaultValue,
-  onChange,
-  tabs,
-  className,
-  isArrowIconDisplay = false,
-}: TabsUnderlineProps) => {
-  const [value, setValue] = useState(defaultValue ? defaultValue : 0);
-
-  const onClickTab = (_event: any, index: number) => {
-    if (tabs[index].disabled) return;
-    else {
-      setValue(index);
-      onChange(index, tabs[index].value);
-    }
-  };
-
-  useEffect(() => {
-    if (defaultValue === undefined) return;
-    if (defaultValue !== value) {
-      setValue(defaultValue);
-      onChange(defaultValue, tabs[defaultValue].value);
-    }
-  }, [defaultValue]);
-
-  return (
-    <div className={`${styles.tabbar} ${className && className}`}>
-      <Tabs
-        value={value}
-        onChange={onClickTab}
-        className={styles.tabs_root}
-        variant="scrollable"
-        orientation="horizontal"
-        visibleScrollbar={false}
-        TabIndicatorProps={{
-          style: {
-            height: '0.1875rem',
-            width: '2.25rem',
-            color: '#0077FF',
-            backgroundColor: '#0077FF',
-          },
-        }}
-      >
-        {tabs.map((item, index) => {
-          let renderTab = (
-            <Tab
-              key={`tab#${index}`}
-              className={
-                !isArrowIconDisplay ? styles.tab_label : styles.tab_label_icon
-              }
-              disabled={item.disabled ?? false}
-              disableRipple
-              sx={{ textTransform: 'none' }}
-              label={
-                <div className={styles.tab_label_content}>
-                  <Title
-                    text={item.label}
-                    weight={value === index ? 'semi-bold' : 'regular'}
-                    size="base"
-                    color={index === value ? 'black' : 'gray'}
-                  />
-                  {item.betaIconDescription === undefined ||
-                  item.betaIconDescription === '' ? null : (
-                    <PopoverBeta
-                      description={item.betaIconDescription}
-                      placement="bottom"
-                      isCloseBeta={item.isIconCloseBeta}
-                    />
-                  )}
-                </div>
-              }
-            />
-          );
-
-          if (item.disabled) {
-            renderTab = (
-              <div className={styles.tab_label_content}>
-                <Title
-                  key={`tab#${index}`}
-                  className={`${
-                    !isArrowIconDisplay
-                      ? styles.tab_label_replacement
-                      : styles.tab_label_replacement_icon
-                  } ${styles.disabled}`}
-                  weight={value === index ? 'semi-bold' : 'regular'}
-                  size="base"
-                  text={item.label}
-                  color={index === value ? 'black' : 'gray'}
-                />
-                {item.betaIconDescription === undefined ||
-                item.betaIconDescription === '' ? null : (
-                  <PopoverBeta
-                    description={item.betaIconDescription}
-                    placement="bottom"
-                    isCloseBeta={item.isIconCloseBeta}
-                  />
-                )}
-              </div>
-            );
-          }
-          if (item.disabled && (item.tooltipTitle || item.tooltipDescription)) {
-            renderTab = (
-              <Tooltip
-                key={`tab#${index}`}
-                title={item.tooltipTitle}
-                tooltipDescription={item.tooltipDescription}
-                placement={item.tooltipPlacement}
-                arrow
-              >
-                <div
-                  style={{
-                    width: 'fit-content',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}
-                  className={styles.tab_label_content}
-                >
-                  <Title
-                    key={`tab#${index}`}
-                    className={`${
-                      !isArrowIconDisplay
-                        ? styles.tab_label_replacement
-                        : styles.tab_label_replacement_icon
-                    } ${styles.disabled}`}
-                    weight={value === index ? 'semi-bold' : 'regular'}
-                    size="base"
-                    text={item.label}
-                    color={index === value ? 'black' : 'gray'}
-                  />
-                  {item.betaIconDescription === undefined ||
-                  item.betaIconDescription === '' ? null : (
-                    <PopoverBeta
-                      description={item.betaIconDescription}
-                      placement="bottom"
-                      isCloseBeta={item.isIconCloseBeta}
-                    />
-                  )}
-                </div>
-              </Tooltip>
-            );
-          }
-          if (item.tooltipTitle || item.tooltipDescription) {
-            renderTab = (
-              <Tooltip
-                arrow
-                key={`tab#${index}`}
-                title={item.tooltipTitle}
-                tooltipDescription={item.tooltipDescription}
-                placement={item.tooltipPlacement}
-              >
-                {renderTab}
-              </Tooltip>
-            );
-          }
-
-          if (isArrowIconDisplay && index !== tabs.length - 1)
-            return (
-              <div
-                className={styles.withArrowContainer}
-                onClick={(e) => onClickTab(e, index)}
-              >
-                {renderTab}
-                {isArrowIconDisplay && (
-                  <ArrowLineRightIcon
-                    fill={colors.neutral_550}
-                    stroke={colors.neutral_550}
-                  />
-                )}
-              </div>
-            );
-          else return renderTab;
-        })}
-      </Tabs>
-    </div>
-  );
-};
+import React, { useEffect, useState } from 'react';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import styles from './tabsUnderline.modules.scss';
+import {
+  ArrowLineRightIcon,
+  PopoverBeta,
+  colors,
+  Title,
+  Tooltip,
+} from '../../';
+
+interface TabsUnderlineProps {
+  type: 'underline' | 'filled';
+  defaultValue: number;
+  onChange: (index: number, item: any) => void;
+  tabs: any[];
+  className?: string;
+  isArrowIconDisplay?: boolean;
+}
+
+/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=2946-50988&mode=dev  */
+export const TabsUnderline = ({
+  defaultValue,
+  onChange,
+  tabs,
+  className,
+  isArrowIconDisplay = false,
+}: TabsUnderlineProps) => {
+  const [value, setValue] = useState(defaultValue ? defaultValue : 0);
+
+  const onClickTab = (_event: any, index: number) => {
+    if (tabs[index].disabled) return;
+    else {
+      setValue(index);
+      onChange(index, tabs[index].value);
+    }
+  };
+
+  useEffect(() => {
+    if (defaultValue === undefined) return;
+    if (defaultValue !== value) {
+      setValue(defaultValue);
+      onChange(defaultValue, tabs[defaultValue].value);
+    }
+  }, [defaultValue]);
+
+  return (
+    <div className={`${styles.tabbar} ${className && className}`}>
+      <Tabs
+        value={value}
+        onChange={onClickTab}
+        className={styles.tabs_root}
+        variant="scrollable"
+        orientation="horizontal"
+        visibleScrollbar={false}
+        TabIndicatorProps={{
+          style: {
+            height: '0.1875rem',
+            width: '2.25rem',
+            color: '#0077FF',
+            backgroundColor: '#0077FF',
+          },
+        }}
+      >
+        {tabs.map((item, index) => {
+          let renderTab = (
+            <Tab
+              key={`tab#${index}`}
+              className={
+                !isArrowIconDisplay ? styles.tab_label : styles.tab_label_icon
+              }
+              disabled={item.disabled ?? false}
+              disableRipple
+              sx={{ textTransform: 'none' }}
+              label={
+                <div className={styles.tab_label_content} id={item.id}>
+                  <Title
+                    text={item.label}
+                    weight={value === index ? 'semi-bold' : 'regular'}
+                    size="base"
+                    color={index === value ? 'black' : 'gray'}
+                  />
+                  {item.betaIconDescription === undefined ||
+                  item.betaIconDescription === '' ? null : (
+                    <PopoverBeta
+                      description={item.betaIconDescription}
+                      placement="bottom"
+                      isCloseBeta={item.isIconCloseBeta}
+                    />
+                  )}
+                </div>
+              }
+            />
+          );
+
+          if (item.disabled) {
+            renderTab = (
+              <div className={styles.tab_label_content} id={item.id}>
+                <Title
+                  key={`tab#${index}`}
+                  className={`${
+                    !isArrowIconDisplay
+                      ? styles.tab_label_replacement
+                      : styles.tab_label_replacement_icon
+                  } ${styles.disabled}`}
+                  weight={value === index ? 'semi-bold' : 'regular'}
+                  size="base"
+                  text={item.label}
+                  color={index === value ? 'black' : 'gray'}
+                />
+                {item.betaIconDescription === undefined ||
+                item.betaIconDescription === '' ? null : (
+                  <PopoverBeta
+                    description={item.betaIconDescription}
+                    placement="bottom"
+                    isCloseBeta={item.isIconCloseBeta}
+                  />
+                )}
+              </div>
+            );
+          }
+          if (item.disabled && (item.tooltipTitle || item.tooltipDescription)) {
+            renderTab = (
+              <Tooltip
+                key={`tab#${index}`}
+                title={item.tooltipTitle}
+                tooltipDescription={item.tooltipDescription}
+                placement={item.tooltipPlacement}
+                arrow
+              >
+                <div
+                  id={item.id}
+                  style={{
+                    width: 'fit-content',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                  className={styles.tab_label_content}
+                >
+                  <Title
+                    key={`tab#${index}`}
+                    className={`${
+                      !isArrowIconDisplay
+                        ? styles.tab_label_replacement
+                        : styles.tab_label_replacement_icon
+                    } ${styles.disabled}`}
+                    weight={value === index ? 'semi-bold' : 'regular'}
+                    size="base"
+                    text={item.label}
+                    color={index === value ? 'black' : 'gray'}
+                  />
+                  {item.betaIconDescription === undefined ||
+                  item.betaIconDescription === '' ? null : (
+                    <PopoverBeta
+                      description={item.betaIconDescription}
+                      placement="bottom"
+                      isCloseBeta={item.isIconCloseBeta}
+                    />
+                  )}
+                </div>
+              </Tooltip>
+            );
+          }
+          if (item.tooltipTitle || item.tooltipDescription) {
+            renderTab = (
+              <Tooltip
+                arrow
+                key={`tab#${index}`}
+                title={item.tooltipTitle}
+                tooltipDescription={item.tooltipDescription}
+                placement={item.tooltipPlacement}
+              >
+                {renderTab}
+              </Tooltip>
+            );
+          }
+
+          if (isArrowIconDisplay && index !== tabs.length - 1)
+            return (
+              <div
+                className={styles.withArrowContainer}
+                onClick={(e) => onClickTab(e, index)}
+              >
+                {renderTab}
+                {isArrowIconDisplay && (
+                  <ArrowLineRightIcon
+                    fill={colors.neutral_550}
+                    stroke={colors.neutral_550}
+                  />
+                )}
+              </div>
+            );
+          else return renderTab;
+        })}
+      </Tabs>
+    </div>
+  );
+};

package/src/Molecules/Tabs/tabs.modules.scss

@@ -1,60 +1,60 @@
-.new_tabs {
-  height: 100%;
-  .MuiTabs-root {
-    background: var(--color-neutral-clear-shades-150, #eee);
-    width: fit-content;
-    border-radius: 4px;
-
-    .MuiTabs-scroller {
-      max-height: 2.375rem;
-      min-height: 2px;
-      height: 2.375rem;
-      border: none;
-
-      .MuiTabs-flexContainer {
-        padding: 0.25rem;
-        gap: 0.5rem;
-        max-height: 2.375rem;
-        height: 2.375rem;
-        min-height: 2px;
-        border: none;
-
-        .MuiTab-root {
-          text-transform: none;
-        }
-      }
-
-      .MuiTabs-indicator {
-        background: white;
-        height: 1.875rem;
-        bottom: 0.25rem;
-        border-radius: 4px;
-      }
-    }
-
-    button {
-      background: transparent;
-      height: 1.875rem;
-      padding: 0px 1rem 0.125rem 1rem;
-      font-size: 1rem;
-      font-family: OpenSans;
-      font-style: normal;
-      font-weight: 700;
-      border: none;
-      min-height: 0;
-      min-width: 0;
-      padding-top: 2px;
-      color: black;
-      z-index: 1400;
-
-      &.Mui-selected {
-        min-height: 0;
-        min-width: 0;
-        border-radius: 4px;
-        background: transparent;
-        color: black;
-        border: none;
-      }
-    }
-  }
-}
+.new_tabs {
+  height: 100%;
+  .MuiTabs-root {
+    background: var(--color-neutral-clear-shades-150, #eee);
+    width: fit-content;
+    border-radius: 4px;
+
+    .MuiTabs-scroller {
+      max-height: 2.375rem;
+      min-height: 2px;
+      height: 2.375rem;
+      border: none;
+
+      .MuiTabs-flexContainer {
+        padding: 0.25rem;
+        gap: 0.5rem;
+        max-height: 2.375rem;
+        height: 2.375rem;
+        min-height: 2px;
+        border: none;
+
+        .MuiTab-root {
+          text-transform: none;
+        }
+      }
+
+      .MuiTabs-indicator {
+        background: white;
+        height: 1.875rem;
+        bottom: 0.25rem;
+        border-radius: 4px;
+      }
+    }
+
+    button {
+      background: transparent;
+      height: 1.875rem;
+      padding: 0px 1rem 0.125rem 1rem;
+      font-size: 1rem;
+      font-family: OpenSans;
+      font-style: normal;
+      font-weight: 700;
+      border: none;
+      min-height: 0;
+      min-width: 0;
+      padding-top: 2px;
+      color: black;
+      z-index: 1400;
+
+      &.Mui-selected {
+        min-height: 0;
+        min-width: 0;
+        border-radius: 4px;
+        background: transparent;
+        color: black;
+        border: none;
+      }
+    }
+  }
+}

package/src/Molecules/Tabs/tabsUnderline.modules.scss

@@ -1,63 +1,63 @@
-.tabbar {
-  display: flex;
-  height: 5rem;
-  align-items: center;
-  .tabs_root {
-    min-height: unset;
-    align-items: center;
-  }
-  .tab_label {
-    min-width: unset;
-    padding: unset;
-    margin-right: var(--spacing-xxl);
-    padding-left: 0.3125rem;
-    margin-left: 1.5rem;
-    opacity: 1;
-  }
-
-  .tab_label_content {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    h2 {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: 12rem;
-    }
-  }
-  .withArrowContainer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 1rem;
-  }
-
-  .tab_label_replacement {
-    padding-left: 0.3125rem;
-    margin-right: var(--spacing-xxl);
-    text-transform: capitalize;
-    align-self: center;
-    margin-left: 1.5rem;
-
-    &.disabled {
-      opacity: 0.5;
-    }
-  }
-  .tab_label_icon {
-    min-width: unset;
-    padding: unset;
-    margin-left: 1rem;
-    opacity: 1;
-  }
-
-  .tab_label_replacement_icon {
-    text-transform: capitalize;
-    align-self: center;
-    margin-left: 1rem;
-
-    &.disabled {
-      opacity: 0.5;
-    }
-  }
-}
+.tabbar {
+  display: flex;
+  height: 5rem;
+  align-items: center;
+  .tabs_root {
+    min-height: unset;
+    align-items: center;
+  }
+  .tab_label {
+    min-width: unset;
+    padding: unset;
+    margin-right: var(--spacing-xxl);
+    padding-left: 0.3125rem;
+    margin-left: 1.5rem;
+    opacity: 1;
+  }
+
+  .tab_label_content {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    h2 {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 12rem;
+    }
+  }
+  .withArrowContainer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+  }
+
+  .tab_label_replacement {
+    padding-left: 0.3125rem;
+    margin-right: var(--spacing-xxl);
+    text-transform: capitalize;
+    align-self: center;
+    margin-left: 1.5rem;
+
+    &.disabled {
+      opacity: 0.5;
+    }
+  }
+  .tab_label_icon {
+    min-width: unset;
+    padding: unset;
+    margin-left: 1rem;
+    opacity: 1;
+  }
+
+  .tab_label_replacement_icon {
+    text-transform: capitalize;
+    align-self: center;
+    margin-left: 1rem;
+
+    &.disabled {
+      opacity: 0.5;
+    }
+  }
+}