odaptos_design_system 2.0.5 → 2.0.6

package/src/Molecules/StarRating/StarRating.tsx

@@ -1,71 +1,71 @@
-import React, { useState } from 'react';
-import styles from './StarRating.module.scss';
-
-interface StarRatingProps {
-  value?: number;
-  onClick: (index: number) => void;
-  strokeColor?: string;
-  fillColor?: string;
-}
-
-export const StarRating = ({
-  value,
-  onClick,
-  strokeColor,
-  fillColor,
-}: StarRatingProps) => {
-  const [rating, setRating] = useState<number>(value ?? 0);
-  const [hover, setHover] = useState<number>(0);
-  return (
-    <div className={styles.star_rating}>
-      {[...Array(5)].map((_star, index) => {
-        index += 1;
-        return (
-          <button
-            type="button"
-            key={index}
-            className={styles.star_button}
-            onClick={() => {
-              setRating(index);
-              onClick(index);
-            }}
-            onMouseEnter={() => setHover(index)}
-            onMouseLeave={() => setHover(rating)}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 16 16"
-              fill="none"
-              className="star"
-            >
-              <g clipPath="url(#clip0_2837_24714)">
-                <path
-                  d="M8.48489 0.800092L10.7156 5.21943L15.0089 5.64476C15.1111 5.65325 15.2087 5.69086 15.2902 5.75312C15.3717 5.81538 15.4337 5.89968 15.4688 5.99606C15.5038 6.09244 15.5106 6.19685 15.4881 6.29693C15.4657 6.39701 15.4151 6.48856 15.3422 6.56076L11.8089 10.0628L13.1189 14.8214C13.1457 14.9224 13.1428 15.0289 13.1105 15.1282C13.0782 15.2275 13.0178 15.3154 12.9368 15.3812C12.8557 15.4471 12.7574 15.4881 12.6535 15.4994C12.5497 15.5106 12.4449 15.4917 12.3516 15.4448L7.99889 13.2894L3.65222 15.4421C3.55892 15.489 3.45405 15.508 3.35023 15.4967C3.24641 15.4854 3.14805 15.4444 3.067 15.3786C2.98594 15.3127 2.92563 15.2248 2.89332 15.1255C2.86102 15.0262 2.85809 14.9197 2.88489 14.8188L4.19489 10.0601L0.65889 6.55809C0.586045 6.4859 0.535412 6.39434 0.512986 6.29426C0.490561 6.19418 0.497282 6.08977 0.532354 5.9934C0.567426 5.89702 0.62938 5.81271 0.71088 5.75045C0.792381 5.68819 0.890015 5.65059 0.992223 5.64209L5.28556 5.21676L7.51289 0.800092C7.5587 0.710626 7.62831 0.63554 7.71407 0.583107C7.79982 0.530674 7.89838 0.50293 7.99889 0.50293C8.0994 0.50293 8.19796 0.530674 8.28372 0.583107C8.36947 0.63554 8.43908 0.710626 8.48489 0.800092Z"
-                  fill={
-                    index <= hover || index <= rating
-                      ? fillColor ?? '#f9dc4d'
-                      : 'none'
-                  }
-                  stroke={
-                    index <= hover || index <= rating
-                      ? strokeColor ?? '#f9dc4d'
-                      : '#96989A'
-                  }
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </g>
-              <defs>
-                <clipPath id="clip0_2837_24714">
-                  <rect width="16" height="16" fill="white" />
-                </clipPath>
-              </defs>
-            </svg>
-          </button>
-        );
-      })}
-    </div>
-  );
-};
+import React, { useState } from 'react';
+import styles from './StarRating.module.scss';
+
+interface StarRatingProps {
+  value?: number;
+  onClick: (index: number) => void;
+  strokeColor?: string;
+  fillColor?: string;
+}
+
+export const StarRating = ({
+  value,
+  onClick,
+  strokeColor,
+  fillColor,
+}: StarRatingProps) => {
+  const [rating, setRating] = useState<number>(value ?? 0);
+  const [hover, setHover] = useState<number>(0);
+  return (
+    <div className={styles.star_rating}>
+      {[...Array(5)].map((_star, index) => {
+        index += 1;
+        return (
+          <button
+            type="button"
+            key={index}
+            className={styles.star_button}
+            onClick={() => {
+              setRating(index);
+              onClick(index);
+            }}
+            onMouseEnter={() => setHover(index)}
+            onMouseLeave={() => setHover(rating)}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              className="star"
+            >
+              <g clipPath="url(#clip0_2837_24714)">
+                <path
+                  d="M8.48489 0.800092L10.7156 5.21943L15.0089 5.64476C15.1111 5.65325 15.2087 5.69086 15.2902 5.75312C15.3717 5.81538 15.4337 5.89968 15.4688 5.99606C15.5038 6.09244 15.5106 6.19685 15.4881 6.29693C15.4657 6.39701 15.4151 6.48856 15.3422 6.56076L11.8089 10.0628L13.1189 14.8214C13.1457 14.9224 13.1428 15.0289 13.1105 15.1282C13.0782 15.2275 13.0178 15.3154 12.9368 15.3812C12.8557 15.4471 12.7574 15.4881 12.6535 15.4994C12.5497 15.5106 12.4449 15.4917 12.3516 15.4448L7.99889 13.2894L3.65222 15.4421C3.55892 15.489 3.45405 15.508 3.35023 15.4967C3.24641 15.4854 3.14805 15.4444 3.067 15.3786C2.98594 15.3127 2.92563 15.2248 2.89332 15.1255C2.86102 15.0262 2.85809 14.9197 2.88489 14.8188L4.19489 10.0601L0.65889 6.55809C0.586045 6.4859 0.535412 6.39434 0.512986 6.29426C0.490561 6.19418 0.497282 6.08977 0.532354 5.9934C0.567426 5.89702 0.62938 5.81271 0.71088 5.75045C0.792381 5.68819 0.890015 5.65059 0.992223 5.64209L5.28556 5.21676L7.51289 0.800092C7.5587 0.710626 7.62831 0.63554 7.71407 0.583107C7.79982 0.530674 7.89838 0.50293 7.99889 0.50293C8.0994 0.50293 8.19796 0.530674 8.28372 0.583107C8.36947 0.63554 8.43908 0.710626 8.48489 0.800092Z"
+                  fill={
+                    index <= hover || index <= rating
+                      ? fillColor ?? '#f9dc4d'
+                      : 'none'
+                  }
+                  stroke={
+                    index <= hover || index <= rating
+                      ? strokeColor ?? '#f9dc4d'
+                      : '#96989A'
+                  }
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_2837_24714">
+                  <rect width="16" height="16" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
+          </button>
+        );
+      })}
+    </div>
+  );
+};

package/src/Molecules/Tabs/Tabs.tsx

@@ -1,83 +1,83 @@
-import { Tabs as MuiTabs } from '@mui/material';
-import Tab from '@mui/material/Tab';
-import React, { useState } from 'react';
-import { Text } from '../../';
-import styles from './tabs.modules.scss';
-
-interface TabPanelProps {
-  value: number;
-  index: number;
-  children: JSX.Element;
-}
-
-const TabPanel = ({ value, index, children, ...rest }: TabPanelProps) => {
-  return (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`simple-tabpanel-${index}`}
-      {...rest}
-      style={{ height: '97%' }}
-    >
-      {value === index && children}
-    </div>
-  );
-};
-
-interface TabsProps {
-  tabs: any[];
-  defaultValue: number;
-  onSelect?: (value: number) => void;
-  className?: string;
-}
-/** Link to figma : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=1277-39969&mode=dev */
-export const Tabs = ({
-  tabs,
-  defaultValue,
-  onSelect,
-  className,
-}: TabsProps) => {
-  const [value, setValue] = useState(defaultValue ? defaultValue : 0);
-
-  const handleChange = (_event: any, newValue: number) => {
-    setValue(newValue);
-    if (onSelect) onSelect(newValue);
-  };
-
-  return (
-    <div className={styles.new_tabs}>
-      <MuiTabs
-        value={value}
-        onChange={handleChange}
-        variant="scrollable"
-        className={className}
-        sx={{ maxHeight: '2.375rem', minHeight: 2 }}
-      >
-        {tabs.map((tab, n) => {
-          let renderTab = (
-            <Tab
-              key={`tab-${n}-${tab.label}`}
-              label={<Text text={tab.label} weight="bold" size="base" />}
-              icon={tab.icon}
-              iconPosition="end"
-              value={tab.value}
-              disableRipple
-              disabled={tab.disabled}
-            />
-          );
-          return renderTab;
-        })}
-      </MuiTabs>
-
-      {tabs.map((tab, n) => (
-        <TabPanel
-          key={`tabpanel-${n}-${tab.label}`}
-          index={tab.value}
-          value={value}
-        >
-          {tab.component}
-        </TabPanel>
-      ))}
-    </div>
-  );
-};
+import { Tabs as MuiTabs } from '@mui/material';
+import Tab from '@mui/material/Tab';
+import React, { useState } from 'react';
+import { Text } from '../../';
+import styles from './tabs.modules.scss';
+
+interface TabPanelProps {
+  value: number;
+  index: number;
+  children: JSX.Element;
+}
+
+const TabPanel = ({ value, index, children, ...rest }: TabPanelProps) => {
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      {...rest}
+      style={{ height: '97%' }}
+    >
+      {value === index && children}
+    </div>
+  );
+};
+
+interface TabsProps {
+  tabs: any[];
+  defaultValue: number;
+  onSelect?: (value: number) => void;
+  className?: string;
+}
+/** Link to figma : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=1277-39969&mode=dev */
+export const Tabs = ({
+  tabs,
+  defaultValue,
+  onSelect,
+  className,
+}: TabsProps) => {
+  const [value, setValue] = useState(defaultValue ? defaultValue : 0);
+
+  const handleChange = (_event: any, newValue: number) => {
+    setValue(newValue);
+    if (onSelect) onSelect(newValue);
+  };
+
+  return (
+    <div className={styles.new_tabs}>
+      <MuiTabs
+        value={value}
+        onChange={handleChange}
+        variant="scrollable"
+        className={className}
+        sx={{ maxHeight: '2.375rem', minHeight: 2 }}
+      >
+        {tabs.map((tab, n) => {
+          let renderTab = (
+            <Tab
+              key={`tab-${n}-${tab.label}`}
+              label={<Text text={tab.label} weight="bold" size="base" />}
+              icon={tab.icon}
+              iconPosition="end"
+              value={tab.value}
+              disableRipple
+              disabled={tab.disabled}
+            />
+          );
+          return renderTab;
+        })}
+      </MuiTabs>
+
+      {tabs.map((tab, n) => (
+        <TabPanel
+          key={`tabpanel-${n}-${tab.label}`}
+          index={tab.value}
+          value={value}
+        >
+          {tab.component}
+        </TabPanel>
+      ))}
+    </div>
+  );
+};