odaptos_design_system 2.0.5 → 2.0.7

package/src/Atoms/Tooltip/Tooltip.tsx

@@ -1,184 +1,184 @@
-import { Tooltip as MTooltip } from '@mui/material';
-import { tooltipClasses } from '@mui/material/Tooltip';
-import { styled } from '@mui/material/styles';
-
-import { TooltipLayout } from './Layout/TooltipCustomLayout';
-
-import React, { useState } from 'react';
-
-const StyledTooltip = styled(MTooltip)({
-  [`& .${tooltipClasses.tooltip}`]: {
-    backgroundColor: '#fff',
-  },
-});
-
-interface TooltipProps {
-  placement?:
-    | 'bottom-end'
-    | 'bottom-start'
-    | 'bottom'
-    | 'left-end'
-    | 'left-start'
-    | 'left'
-    | 'right-end'
-    | 'right-start'
-    | 'right'
-    | 'top-end'
-    | 'top-start'
-    | 'top';
-  onOpen?: () => void;
-  onClose?: () => void;
-  title?: string;
-  closeButton?: JSX.Element;
-  tooltipDescription?: string;
-  optionalUrl?: string;
-  optionalUrlText?: string;
-  customContent?: JSX.Element;
-  buttonOneText?: string;
-  buttonTwoText?: string;
-  buttonOneVariant?:
-    | 'primary'
-    | 'secondary'
-    | 'tertiary'
-    | 'tertiary-alt'
-    | 'alert'
-    | 'success';
-  buttonTwoVariant?:
-    | 'primary'
-    | 'secondary'
-    | 'tertiary'
-    | 'tertiary-alt'
-    | 'alert'
-    | 'success';
-  buttonOneIconLeft?: JSX.Element;
-  buttonTwoIconLeft?: JSX.Element;
-  buttonOneIconRight?: JSX.Element;
-  buttonTwoIconRight?: JSX.Element;
-  buttonOneOnClick?: () => void;
-  buttonTwoOnClick?: () => void;
-  arrow?: boolean;
-  followCursor?: boolean;
-  shouldBeOpen?: undefined | false;
-  isOpen?: boolean;
-  children: JSX.Element;
-  isTooltipActive?: boolean;
-  offset?: [number, number];
-}
-
-export const Tooltip = ({
-  placement,
-  onOpen,
-  onClose,
-  title,
-  closeButton,
-  tooltipDescription,
-  optionalUrl,
-  optionalUrlText,
-  customContent,
-  buttonOneText,
-  buttonTwoText,
-  buttonOneVariant,
-  buttonTwoVariant,
-  buttonOneIconLeft,
-  buttonTwoIconLeft,
-  buttonOneIconRight,
-  buttonTwoIconRight,
-  buttonOneOnClick,
-  buttonTwoOnClick,
-  arrow,
-  followCursor,
-  shouldBeOpen = undefined,
-  isOpen,
-  children,
-  isTooltipActive = true,
-  offset,
-}: TooltipProps) => {
-  const [open, setOpen] = useState(isOpen ?? false);
-  const isTooltipSimplified =
-    !title &&
-    !closeButton &&
-    !(buttonOneText || buttonTwoText) &&
-    !customContent;
-
-  const handleClose = () => {
-    if (isOpen) return;
-    else {
-      setOpen(false);
-      onClose && onClose();
-    }
-  };
-
-  const handleOpen = () => {
-    if (isOpen) return;
-    else {
-      setOpen(true);
-      onOpen && onOpen();
-    }
-  };
-
-  if (!isTooltipActive) return children;
-
-  if (shouldBeOpen === undefined)
-    return (
-      <StyledTooltip
-        open={open}
-        placement={placement}
-        onClose={handleClose}
-        onOpen={handleOpen}
-        componentsProps={{
-          tooltip: {
-            sx: {
-              // Max possible z-index
-              zIndex: 2147483647,
-              //If is TooltipSimplified, then the tooltip will have a different background color
-              bgcolor: isTooltipSimplified ? '#4B4E52' : '#fff',
-              padding: 0,
-              boxShadow:
-                '0px 4px 12px 6px rgba(0, 0, 0, 0.08), 0px 4px 4px 0px rgba(0, 0, 0, 0.15)',
-              '& .MuiTooltip-arrow': {
-                color: isTooltipSimplified ? '#4B4E52' : '#fff',
-              },
-            },
-          },
-        }}
-        PopperProps={{
-          modifiers: [
-            {
-              name: 'offset',
-              options: {
-                offset: offset || [0, 0], // Use the provided offset or default to [0, 0]
-              },
-            },
-          ],
-        }}
-        title={
-          <TooltipLayout
-            tooltipTitle={title}
-            closeButton={closeButton}
-            onClickClose={handleClose}
-            tooltipDescription={tooltipDescription}
-            optionalUrl={optionalUrl}
-            optionalUrlText={optionalUrlText}
-            customContent={customContent}
-            buttonOneText={buttonOneText}
-            buttonTwoText={buttonTwoText}
-            buttonOneVariant={buttonOneVariant}
-            buttonTwoVariant={buttonTwoVariant}
-            buttonOneIconLeft={buttonOneIconLeft}
-            buttonTwoIconLeft={buttonTwoIconLeft}
-            buttonOneIconRight={buttonOneIconRight}
-            buttonTwoIconRight={buttonTwoIconRight}
-            buttonOneOnClick={buttonOneOnClick}
-            buttonTwoOnClick={buttonTwoOnClick}
-            isTooltipSimplified={isTooltipSimplified}
-          />
-        }
-        arrow={arrow}
-        followCursor={followCursor}
-      >
-        {children}
-      </StyledTooltip>
-    );
-  if (shouldBeOpen === false) return children;
-  else return <></>;
-};
+import { Tooltip as MTooltip } from '@mui/material';
+import { tooltipClasses } from '@mui/material/Tooltip';
+import { styled } from '@mui/material/styles';
+
+import { TooltipLayout } from './Layout/TooltipCustomLayout';
+
+import React, { useState } from 'react';
+
+const StyledTooltip = styled(MTooltip)({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: '#fff',
+  },
+});
+
+interface TooltipProps {
+  placement?:
+    | 'bottom-end'
+    | 'bottom-start'
+    | 'bottom'
+    | 'left-end'
+    | 'left-start'
+    | 'left'
+    | 'right-end'
+    | 'right-start'
+    | 'right'
+    | 'top-end'
+    | 'top-start'
+    | 'top';
+  onOpen?: () => void;
+  onClose?: () => void;
+  title?: string;
+  closeButton?: JSX.Element;
+  tooltipDescription?: string;
+  optionalUrl?: string;
+  optionalUrlText?: string;
+  customContent?: JSX.Element;
+  buttonOneText?: string;
+  buttonTwoText?: string;
+  buttonOneVariant?:
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'tertiary-alt'
+    | 'alert'
+    | 'success';
+  buttonTwoVariant?:
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'tertiary-alt'
+    | 'alert'
+    | 'success';
+  buttonOneIconLeft?: JSX.Element;
+  buttonTwoIconLeft?: JSX.Element;
+  buttonOneIconRight?: JSX.Element;
+  buttonTwoIconRight?: JSX.Element;
+  buttonOneOnClick?: () => void;
+  buttonTwoOnClick?: () => void;
+  arrow?: boolean;
+  followCursor?: boolean;
+  shouldBeOpen?: undefined | false;
+  isOpen?: boolean;
+  children: JSX.Element;
+  isTooltipActive?: boolean;
+  offset?: [number, number];
+}
+
+export const Tooltip = ({
+  placement,
+  onOpen,
+  onClose,
+  title,
+  closeButton,
+  tooltipDescription,
+  optionalUrl,
+  optionalUrlText,
+  customContent,
+  buttonOneText,
+  buttonTwoText,
+  buttonOneVariant,
+  buttonTwoVariant,
+  buttonOneIconLeft,
+  buttonTwoIconLeft,
+  buttonOneIconRight,
+  buttonTwoIconRight,
+  buttonOneOnClick,
+  buttonTwoOnClick,
+  arrow,
+  followCursor,
+  shouldBeOpen = undefined,
+  isOpen,
+  children,
+  isTooltipActive = true,
+  offset,
+}: TooltipProps) => {
+  const [open, setOpen] = useState(isOpen ?? false);
+  const isTooltipSimplified =
+    !title &&
+    !closeButton &&
+    !(buttonOneText || buttonTwoText) &&
+    !customContent;
+
+  const handleClose = () => {
+    if (isOpen) return;
+    else {
+      setOpen(false);
+      onClose && onClose();
+    }
+  };
+
+  const handleOpen = () => {
+    if (isOpen) return;
+    else {
+      setOpen(true);
+      onOpen && onOpen();
+    }
+  };
+
+  if (!isTooltipActive) return children;
+
+  if (shouldBeOpen === undefined)
+    return (
+      <StyledTooltip
+        open={open}
+        placement={placement}
+        onClose={handleClose}
+        onOpen={handleOpen}
+        componentsProps={{
+          tooltip: {
+            sx: {
+              // Max possible z-index
+              zIndex: 2147483647,
+              //If is TooltipSimplified, then the tooltip will have a different background color
+              bgcolor: isTooltipSimplified ? '#4B4E52' : '#fff',
+              padding: 0,
+              boxShadow:
+                '0px 4px 12px 6px rgba(0, 0, 0, 0.08), 0px 4px 4px 0px rgba(0, 0, 0, 0.15)',
+              '& .MuiTooltip-arrow': {
+                color: isTooltipSimplified ? '#4B4E52' : '#fff',
+              },
+            },
+          },
+        }}
+        PopperProps={{
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: offset || [0, 0], // Use the provided offset or default to [0, 0]
+              },
+            },
+          ],
+        }}
+        title={
+          <TooltipLayout
+            tooltipTitle={title}
+            closeButton={closeButton}
+            onClickClose={handleClose}
+            tooltipDescription={tooltipDescription}
+            optionalUrl={optionalUrl}
+            optionalUrlText={optionalUrlText}
+            customContent={customContent}
+            buttonOneText={buttonOneText}
+            buttonTwoText={buttonTwoText}
+            buttonOneVariant={buttonOneVariant}
+            buttonTwoVariant={buttonTwoVariant}
+            buttonOneIconLeft={buttonOneIconLeft}
+            buttonTwoIconLeft={buttonTwoIconLeft}
+            buttonOneIconRight={buttonOneIconRight}
+            buttonTwoIconRight={buttonTwoIconRight}
+            buttonOneOnClick={buttonOneOnClick}
+            buttonTwoOnClick={buttonTwoOnClick}
+            isTooltipSimplified={isTooltipSimplified}
+          />
+        }
+        arrow={arrow}
+        followCursor={followCursor}
+      >
+        {children}
+      </StyledTooltip>
+    );
+  if (shouldBeOpen === false) return children;
+  else return <></>;
+};

package/src/Atoms/Typography/Caption.modules.scss

@@ -1,17 +1,17 @@
-@import '../../../styles/index.css';
-
-.caption_text {
-  font-family: var(--sdFontFamilyOpenSans);
-  font-style: normal;
-  font-weight: var(--sdFontWeightRegular);
-  font-size: var(--sdFontSizeXs);
-  line-height: var(--sdLineHeight130);
-  letter-spacing: var(--sdLetterSpacingCaption);
-  padding: 0.063rem 0px;
-  text-align: left;
-  margin: unset;
-}
-
-.caption_text_uppercase {
-  text-transform: var(--sdTextCaseUppercase);
-}
+@import '../../../styles/index.css';
+
+.caption_text {
+  font-family: var(--sdFontFamilyOpenSans);
+  font-style: normal;
+  font-weight: var(--sdFontWeightRegular);
+  font-size: var(--sdFontSizeXs);
+  line-height: var(--sdLineHeight130);
+  letter-spacing: var(--sdLetterSpacingCaption);
+  padding: 0.063rem 0px;
+  text-align: left;
+  margin: unset;
+}
+
+.caption_text_uppercase {
+  text-transform: var(--sdTextCaseUppercase);
+}

package/src/Atoms/Typography/Caption.tsx

@@ -1,33 +1,33 @@
-import React, { HTMLAttributes } from 'react';
-import styles from './Caption.modules.scss';
-
-interface CaptionProps extends HTMLAttributes<HTMLParagraphElement> {
-  /** Text display in the caption  */
-  text: string;
-  color?: string;
-  className?: string;
-  uppercase?: boolean;
-}
-
-/** This text should only be used for the captions
- * Figma link :https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=52-796&mode=dev
- */
-export const Caption = ({
-  text = 'Caption text',
-  color = '#26292E',
-  className,
-  uppercase = true,
-  ...props
-}: CaptionProps) => {
-  return (
-    <p
-      {...props}
-      style={{ color: color }}
-      className={`${styles.caption_text} ${
-        uppercase ? styles.caption_text_uppercase : ''
-      } ${className ?? ''}`}
-    >
-      {text}
-    </p>
-  );
-};
+import React, { HTMLAttributes } from 'react';
+import styles from './Caption.modules.scss';
+
+interface CaptionProps extends HTMLAttributes<HTMLParagraphElement> {
+  /** Text display in the caption  */
+  text: string;
+  color?: string;
+  className?: string;
+  uppercase?: boolean;
+}
+
+/** This text should only be used for the captions
+ * Figma link :https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=52-796&mode=dev
+ */
+export const Caption = ({
+  text = 'Caption text',
+  color = '#26292E',
+  className,
+  uppercase = true,
+  ...props
+}: CaptionProps) => {
+  return (
+    <p
+      {...props}
+      style={{ color: color }}
+      className={`${styles.caption_text} ${
+        uppercase ? styles.caption_text_uppercase : ''
+      } ${className ?? ''}`}
+    >
+      {text}
+    </p>
+  );
+};