odaptos_design_system 2.0.5 → 2.0.7

package/src/Atoms/SquareText/SquareText.tsx

@@ -1,19 +1,19 @@
-import React, { HTMLAttributes } from 'react';
-import styles from './SquareText.module.scss';
-import { Text } from '../../';
-
-interface SquareTextProps extends HTMLAttributes<HTMLParagraphElement> {
-  /** Text display */
-  text: string;
-}
-
-/** This text should be use to display basic text
- * Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=52-751&mode=dev
- */
-export const SquareText = ({ text }: SquareTextProps) => {
-  return (
-    <div className={`${styles.SquareTextContainer}`}>
-      <Text text={text}></Text>
-    </div>
-  );
-};
+import React, { HTMLAttributes } from 'react';
+import styles from './SquareText.module.scss';
+import { Text } from '../../';
+
+interface SquareTextProps extends HTMLAttributes<HTMLParagraphElement> {
+  /** Text display */
+  text: string;
+}
+
+/** This text should be use to display basic text
+ * Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=52-751&mode=dev
+ */
+export const SquareText = ({ text }: SquareTextProps) => {
+  return (
+    <div className={`${styles.SquareTextContainer}`}>
+      <Text text={text}></Text>
+    </div>
+  );
+};

package/src/Atoms/Switch/Switch.module.scss

@@ -1,14 +1,14 @@
-.switchWrapper {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-
-  span {
-    margin: 0;
-  }
-}
-.disabled {
-  span {
-    cursor: not-allowed !important;
-  }
-}
+.switchWrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  span {
+    margin: 0;
+  }
+}
+.disabled {
+  span {
+    cursor: not-allowed !important;
+  }
+}

package/src/Atoms/Switch/Switch.tsx

@@ -1,64 +1,64 @@
-import React from 'react';
-import { Switch as MuiSwitch } from '@mui/material';
-import { Title } from '../../';
-import styles from './Switch.module.scss';
-import { alpha, styled } from '@mui/system';
-
-interface SwitchProps {
-  label?: string;
-  checked: boolean;
-  disabled?: boolean;
-  onChange: () => void;
-  className?: string;
-}
-
-const CustomSwitch = styled(MuiSwitch)({
-  '& .MuiSwitch-track': {
-    backgroundColor: '#D5D5D6',
-  },
-  '& .MuiSwitch-thumb': {
-    backgroundColor: '#AFB0B2',
-  },
-  '& .MuiSwitch-switchBase.Mui-checked': {
-    '& .MuiSwitch-thumb': {
-      backgroundColor: '#07F',
-    },
-    '&:hover': {
-      backgroundColor: alpha('#99C9FF', 0.25),
-    },
-  },
-  '& .MuiSwitch-switchBase.Mui-disabled': {
-    cursor: 'not-allowed !important',
-  },
-  '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
-    backgroundColor: '#99C9FF',
-  },
-});
-
-export const Switch = ({
-  label,
-  checked,
-  disabled = false,
-  onChange,
-  className,
-}: SwitchProps) => {
-  return (
-    <div
-      className={`${styles.switchWrapper} ${
-        disabled && styles.disabled
-      }${className}`}
-    >
-      {label && <Title text={label} weight="bold" size="base" />}
-      <CustomSwitch
-        focusVisibleClassName=".Mui-focusVisible"
-        disableRipple
-        checked={checked}
-        onChange={onChange}
-        disabled={disabled}
-        sx={{
-          m: 1,
-        }}
-      />
-    </div>
-  );
-};
+import React from 'react';
+import { Switch as MuiSwitch } from '@mui/material';
+import { Title } from '../../';
+import styles from './Switch.module.scss';
+import { alpha, styled } from '@mui/system';
+
+interface SwitchProps {
+  label?: string;
+  checked: boolean;
+  disabled?: boolean;
+  onChange: () => void;
+  className?: string;
+}
+
+const CustomSwitch = styled(MuiSwitch)({
+  '& .MuiSwitch-track': {
+    backgroundColor: '#D5D5D6',
+  },
+  '& .MuiSwitch-thumb': {
+    backgroundColor: '#AFB0B2',
+  },
+  '& .MuiSwitch-switchBase.Mui-checked': {
+    '& .MuiSwitch-thumb': {
+      backgroundColor: '#07F',
+    },
+    '&:hover': {
+      backgroundColor: alpha('#99C9FF', 0.25),
+    },
+  },
+  '& .MuiSwitch-switchBase.Mui-disabled': {
+    cursor: 'not-allowed !important',
+  },
+  '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+    backgroundColor: '#99C9FF',
+  },
+});
+
+export const Switch = ({
+  label,
+  checked,
+  disabled = false,
+  onChange,
+  className,
+}: SwitchProps) => {
+  return (
+    <div
+      className={`${styles.switchWrapper} ${
+        disabled && styles.disabled
+      }${className}`}
+    >
+      {label && <Title text={label} weight="bold" size="base" />}
+      <CustomSwitch
+        focusVisibleClassName=".Mui-focusVisible"
+        disableRipple
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        sx={{
+          m: 1,
+        }}
+      />
+    </div>
+  );
+};

package/src/Atoms/Tag/Tag.modules.scss

@@ -1,86 +1,86 @@
-.tag {
-  display: flex;
-  padding: 0rem 0.375rem;
-  align-items: center;
-  gap: 0.25rem;
-  border-radius: 0.25rem;
-  width: fit-content;
-  p {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap !important;
-    max-width: 95%;
-    width: 100%;
-  }
-}
-
-.tag_idle {
-  background: var(--color-neutral-dark-shades-600, #717376);
-  svg {
-    stroke: #ffffff !important;
-    fill: #ffffff !important;
-  }
-}
-.tag_info {
-  background: var(--color-primary-100, #e5f1ff);
-  svg {
-    stroke: #004799 !important;
-    fill: #004799 !important;
-  }
-}
-.tag_violet {
-  background: var(--Color-Extended-Purple-100, #e9d3fd);
-  svg {
-    stroke: #5c1994 !important;
-    fill: #5c1994 !important;
-  }
-}
-.tag_light {
-  background: var(--Color-Neutral-Clear-Shades-150, #eee);
-  svg {
-    stroke: #32353a !important;
-    fill: #32353a !important;
-  }
-}
-.tag_success {
-  background: var(--color-extended-green-100, #e8f5ea);
-  svg {
-    stroke: #3c743d !important;
-    fill: #3c743d !important;
-  }
-}
-.tag_warning {
-  background: var(--color-extended-yellow-100, #fff3d6);
-  svg {
-    stroke: #6e4f00 !important;
-    fill: #6e4f00 !important;
-  }
-}
-.tag_critical {
-  background: var(--color-extended-red-100, #fddbdb);
-  svg {
-    stroke: #98312e !important;
-    fill: #98312e !important;
-  }
-}
-.tag_sm {
-  height: 1.25rem;
-  svg {
-    height: 0.75rem;
-    width: 0.75rem;
-  }
-}
-
-.tag_base {
-  height: 1.75rem;
-
-  svg {
-    height: 1rem;
-    width: 1rem;
-  }
-}
-.canBeRemoved {
-  svg {
-    cursor: pointer;
-  }
-}
+.tag {
+  display: flex;
+  padding: 0rem 0.375rem;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 0.25rem;
+  width: fit-content;
+  p {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap !important;
+    max-width: 95%;
+    width: 100%;
+  }
+}
+
+.tag_idle {
+  background: var(--color-neutral-dark-shades-600, #717376);
+  svg {
+    stroke: #ffffff !important;
+    fill: #ffffff !important;
+  }
+}
+.tag_info {
+  background: var(--color-primary-100, #e5f1ff);
+  svg {
+    stroke: #004799 !important;
+    fill: #004799 !important;
+  }
+}
+.tag_violet {
+  background: var(--Color-Extended-Purple-100, #e9d3fd);
+  svg {
+    stroke: #5c1994 !important;
+    fill: #5c1994 !important;
+  }
+}
+.tag_light {
+  background: var(--Color-Neutral-Clear-Shades-150, #eee);
+  svg {
+    stroke: #32353a !important;
+    fill: #32353a !important;
+  }
+}
+.tag_success {
+  background: var(--color-extended-green-100, #e8f5ea);
+  svg {
+    stroke: #3c743d !important;
+    fill: #3c743d !important;
+  }
+}
+.tag_warning {
+  background: var(--color-extended-yellow-100, #fff3d6);
+  svg {
+    stroke: #6e4f00 !important;
+    fill: #6e4f00 !important;
+  }
+}
+.tag_critical {
+  background: var(--color-extended-red-100, #fddbdb);
+  svg {
+    stroke: #98312e !important;
+    fill: #98312e !important;
+  }
+}
+.tag_sm {
+  height: 1.25rem;
+  svg {
+    height: 0.75rem;
+    width: 0.75rem;
+  }
+}
+
+.tag_base {
+  height: 1.75rem;
+
+  svg {
+    height: 1rem;
+    width: 1rem;
+  }
+}
+.canBeRemoved {
+  svg {
+    cursor: pointer;
+  }
+}

package/src/Atoms/Tag/Tag.tsx

@@ -1,134 +1,134 @@
-import React, { HTMLAttributes, useEffect, useState } from 'react';
-import styles from './Tag.modules.scss';
-import { Text, Tooltip } from '../..';
-import { colord, extend } from 'colord';
-import mixPlugin from 'colord/plugins/mix';
-import { getReadableTextColor } from '../../utils/getReadableTextColor';
-
-extend([mixPlugin]); //Used for the .tints() method of colord
-
-interface TagProps extends HTMLAttributes<HTMLDivElement> {
-  text: string;
-  status?:
-    | 'idle'
-    | 'success'
-    | 'info'
-    | 'warning'
-    | 'critical'
-    | 'light'
-    | 'violet';
-  size?: 'sm' | 'base';
-  iconLeft?: JSX.Element;
-  iconRight?: JSX.Element;
-  amountNumber?: number | undefined;
-  customColor?: string;
-  className?: string;
-  canBeRemoved?: boolean;
-}
-
-/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=1359-33355&mode=dev  */
-export const Tag = ({
-  text,
-  status = 'idle',
-  size = 'base',
-  iconLeft,
-  iconRight,
-  amountNumber,
-  customColor,
-  className,
-  canBeRemoved = false,
-  ...props
-}: TagProps) => {
-  const tagCustomColor = customColor ? colord(customColor) : undefined;
-
-  const getTextColor = (): string => {
-    if (tagCustomColor) {
-      return getReadableTextColor(tagCustomColor);
-    } else if (status === 'idle') return '#FFFFFF';
-    else if (status === 'success') return '#3C743D';
-    else if (status === 'info') return '#004799';
-    else if (status === 'light') return '#32353A';
-    else if (status === 'violet') return '#5C1994';
-    else if (status === 'warning') return '#6E4F00';
-    else if (status === 'critical') return '#98312E';
-    else return '#004799';
-  };
-
-  const getTagStatus = (): string => {
-    if (customColor) {
-      return styles.tag_custom;
-    } else if (status === 'idle') {
-      return styles.tag_idle;
-    } else if (status === 'success') return styles.tag_success;
-    else if (status === 'info') return styles.tag_info;
-    else if (status === 'warning') return styles.tag_warning;
-    else if (status === 'critical') return styles.tag_critical;
-    else if (status === 'light') return styles.tag_light;
-    else if (status === 'violet') return styles.tag_violet;
-    else return styles.tag_idle;
-  };
-
-  const getTagSize = (): string => {
-    if (size === 'sm') {
-      return styles.tag_sm;
-    } else if (size === 'base') return styles.tag_base;
-    else return styles.tag_base;
-  };
-
-  const getTextSize = (): 'xs' | 'sm' => {
-    if (size === 'sm') {
-      return 'xs';
-    } else if (size === 'base') return 'sm';
-    else return 'sm';
-  };
-
-  const [isEllipsisActive, setIsEllipsisActive] = useState(false);
-
-  useEffect(() => {
-    const checkEllipsis = () => {
-      const element = document.querySelector('#tag_text') as HTMLElement;
-      if (element) {
-        setIsEllipsisActive(element.scrollWidth > element.clientWidth);
-      }
-    };
-
-    checkEllipsis();
-    window.addEventListener('resize', checkEllipsis);
-    return () => window.removeEventListener('resize', checkEllipsis);
-  }, []);
-
-  return (
-    <Tooltip tooltipDescription={text} arrow isTooltipActive={isEllipsisActive}>
-      <div
-        {...props}
-        style={{ backgroundColor: customColor }}
-        className={`${styles.tag} ${getTagStatus()} ${getTagSize()} ${
-          className ?? ''
-        } ${canBeRemoved && styles.canBeRemoved}`}
-      >
-        {iconLeft &&
-          React.cloneElement(iconLeft, {
-            style: { fill: getTextColor(), stroke: getTextColor() },
-          })}
-        <Text
-          id="tag_text"
-          size={getTextSize()}
-          text={text}
-          color={getTextColor()}
-        />
-        {(amountNumber || amountNumber === 0) && (
-          <Text
-            text={`${amountNumber}`}
-            weight="bold"
-            size={getTextSize()}
-            color={getTextColor()}
-          />
-        )}
-        {iconRight &&
-          React.cloneElement(iconRight, {
-            style: { fill: getTextColor(), stroke: getTextColor() },
-          })}
-      </div>
-    </Tooltip>
-  );
-};
+import React, { HTMLAttributes, useEffect, useState } from 'react';
+import styles from './Tag.modules.scss';
+import { Text, Tooltip } from '../..';
+import { colord, extend } from 'colord';
+import mixPlugin from 'colord/plugins/mix';
+import { getReadableTextColor } from '../../utils/getReadableTextColor';
+
+extend([mixPlugin]); //Used for the .tints() method of colord
+
+interface TagProps extends HTMLAttributes<HTMLDivElement> {
+  text: string;
+  status?:
+    | 'idle'
+    | 'success'
+    | 'info'
+    | 'warning'
+    | 'critical'
+    | 'light'
+    | 'violet';
+  size?: 'sm' | 'base';
+  iconLeft?: JSX.Element;
+  iconRight?: JSX.Element;
+  amountNumber?: number | undefined;
+  customColor?: string;
+  className?: string;
+  canBeRemoved?: boolean;
+}
+
+/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=1359-33355&mode=dev  */
+export const Tag = ({
+  text,
+  status = 'idle',
+  size = 'base',
+  iconLeft,
+  iconRight,
+  amountNumber,
+  customColor,
+  className,
+  canBeRemoved = false,
+  ...props
+}: TagProps) => {
+  const tagCustomColor = customColor ? colord(customColor) : undefined;
+
+  const getTextColor = (): string => {
+    if (tagCustomColor) {
+      return getReadableTextColor(tagCustomColor);
+    } else if (status === 'idle') return '#FFFFFF';
+    else if (status === 'success') return '#3C743D';
+    else if (status === 'info') return '#004799';
+    else if (status === 'light') return '#32353A';
+    else if (status === 'violet') return '#5C1994';
+    else if (status === 'warning') return '#6E4F00';
+    else if (status === 'critical') return '#98312E';
+    else return '#004799';
+  };
+
+  const getTagStatus = (): string => {
+    if (customColor) {
+      return styles.tag_custom;
+    } else if (status === 'idle') {
+      return styles.tag_idle;
+    } else if (status === 'success') return styles.tag_success;
+    else if (status === 'info') return styles.tag_info;
+    else if (status === 'warning') return styles.tag_warning;
+    else if (status === 'critical') return styles.tag_critical;
+    else if (status === 'light') return styles.tag_light;
+    else if (status === 'violet') return styles.tag_violet;
+    else return styles.tag_idle;
+  };
+
+  const getTagSize = (): string => {
+    if (size === 'sm') {
+      return styles.tag_sm;
+    } else if (size === 'base') return styles.tag_base;
+    else return styles.tag_base;
+  };
+
+  const getTextSize = (): 'xs' | 'sm' => {
+    if (size === 'sm') {
+      return 'xs';
+    } else if (size === 'base') return 'sm';
+    else return 'sm';
+  };
+
+  const [isEllipsisActive, setIsEllipsisActive] = useState(false);
+
+  useEffect(() => {
+    const checkEllipsis = () => {
+      const element = document.querySelector('#tag_text') as HTMLElement;
+      if (element) {
+        setIsEllipsisActive(element.scrollWidth > element.clientWidth);
+      }
+    };
+
+    checkEllipsis();
+    window.addEventListener('resize', checkEllipsis);
+    return () => window.removeEventListener('resize', checkEllipsis);
+  }, []);
+
+  return (
+    <Tooltip tooltipDescription={text} arrow isTooltipActive={isEllipsisActive}>
+      <div
+        {...props}
+        style={{ backgroundColor: customColor }}
+        className={`${styles.tag} ${getTagStatus()} ${getTagSize()} ${
+          className ?? ''
+        } ${canBeRemoved && styles.canBeRemoved}`}
+      >
+        {iconLeft &&
+          React.cloneElement(iconLeft, {
+            style: { fill: getTextColor(), stroke: getTextColor() },
+          })}
+        <Text
+          id="tag_text"
+          size={getTextSize()}
+          text={text}
+          color={getTextColor()}
+        />
+        {(amountNumber || amountNumber === 0) && (
+          <Text
+            text={`${amountNumber}`}
+            weight="bold"
+            size={getTextSize()}
+            color={getTextColor()}
+          />
+        )}
+        {iconRight &&
+          React.cloneElement(iconRight, {
+            style: { fill: getTextColor(), stroke: getTextColor() },
+          })}
+      </div>
+    </Tooltip>
+  );
+};

package/src/Atoms/TimeInterval/TimeInterval.module.scss

@@ -1,5 +1,5 @@
-.time_interval {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
+.time_interval {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}