odaptos_design_system 1.0.0 → 1.2.0

package/src/Tooltip/Tooltip.tsx

@@ -0,0 +1,139 @@
+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 { 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;
+  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;
+  children: JSX.Element;
+}
+
+export const Tooltip = ({
+  placement,
+  onOpen,
+  onClose,
+  title,
+  closeButton,
+  tooltipDescription,
+  customContent,
+  buttonOneText,
+  buttonTwoText,
+  buttonOneVariant,
+  buttonTwoVariant,
+  buttonOneIconLeft,
+  buttonTwoIconLeft,
+  buttonOneIconRight,
+  buttonTwoIconRight,
+  buttonOneOnClick,
+  buttonTwoOnClick,
+  arrow,
+  followCursor,
+  children,
+}: TooltipProps) => {
+  const [open, setOpen] = useState(false);
+
+  const handleClose = () => {
+    setOpen(false);
+    onClose && onClose();
+  };
+
+  const handleOpen = () => {
+    setOpen(true);
+    onOpen && onOpen();
+  };
+  return (
+    <StyledTooltip
+      open={open}
+      placement={placement}
+      onClose={handleClose}
+      onOpen={handleOpen}
+      componentsProps={{
+        tooltip: {
+          sx: {
+            bgcolor: 'white',
+            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: 'white',
+            },
+          },
+        },
+      }}
+      title={
+        <TooltipLayout
+          tooltipTitle={title}
+          closeButton={closeButton}
+          onClickClose={handleClose}
+          tooltipDescription={tooltipDescription}
+          customContent={customContent}
+          buttonOneText={buttonOneText}
+          buttonTwoText={buttonTwoText}
+          buttonOneVariant={buttonOneVariant}
+          buttonTwoVariant={buttonTwoVariant}
+          buttonOneIconLeft={buttonOneIconLeft}
+          buttonTwoIconLeft={buttonTwoIconLeft}
+          buttonOneIconRight={buttonOneIconRight}
+          buttonTwoIconRight={buttonTwoIconRight}
+          buttonOneOnClick={buttonOneOnClick}
+          buttonTwoOnClick={buttonTwoOnClick}
+        />
+      }
+      arrow={arrow}
+      followCursor={followCursor}
+    >
+      {children}
+    </StyledTooltip>
+  );
+};

package/src/Typography/{Caption.css → Caption.modules.scss}

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

package/src/Typography/Caption.tsx

@@ -1,5 +1,5 @@
-import React, { HTMLAttributes } from 'react';
-import './Caption.css';
+import { HTMLAttributes } from 'react';
+import styles from './Caption.modules.scss';
 
 interface CaptionProps extends HTMLAttributes<HTMLParagraphElement> {
   /** Text display in the caption  */
@@ -9,7 +9,9 @@ interface CaptionProps extends HTMLAttributes<HTMLParagraphElement> {
   uppercase?: boolean;
 }
 
-/** This text should only be used for the captions  */
+/** 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 = 'black',
@@ -21,7 +23,9 @@ export const Caption = ({
     <p
       {...props}
       style={{ color: color }}
-      className={`text ${uppercase && 'uppercase'} ${className}`}
+      className={`${styles.caption_text} ${
+        uppercase ? styles.caption_text_uppercase : ''
+      } ${className ?? ''}`}
     >
       {text}
     </p>

package/src/Typography/Link.modules.scss

@@ -0,0 +1,140 @@
+@import '../../example/index.css';
+
+.link {
+  font-family: var(--sdFontFamilyOpenSans);
+  font-style: normal;
+  font-weight: var(--sdFontWeightRegular);
+  font-size: var(--sdFontSizeXs);
+  line-height: var(--sdLineHeight130);
+  letter-spacing: var(--sdLetterSpacingButtons);
+  text-align: left;
+  margin: unset;
+  text-decoration: var(--sdUnderline);
+  cursor: pointer;
+}
+
+/* Regular */
+
+.link.link_xs.link_regular {
+  font: var(--sdTypoTextUnderlineRegularXs);
+  padding: 1px 0px;
+}
+
+.link.link_sm.link_regular {
+  font: var(--sdTypoTextUnderlineRegularSm);
+  padding: 1px 0px 3px;
+}
+
+.link.link_base.link_regular {
+  font: var(--sdTypoTextUnderlineRegularBase);
+  padding: 2px 0px;
+}
+
+.link.link_lg.link_regular {
+  font: var(--sdTypoTextUnderlineRegularLg);
+  padding: 2px 0px;
+}
+
+.link.link_xl.link_regular {
+  font: var(--sdTypoTextUnderlineRegularXl);
+  padding: 1px 0px 3px;
+}
+
+.link.link_xxl.link_regular {
+  font: var(--sdTypoTextUnderlineRegular2xl);
+  padding: 0px;
+}
+
+.link.link_xxxl.link_regular {
+  font: var(--sdTypoTextUnderlineRegular3xl);
+  padding: 1px 0px 3px;
+}
+
+.link.link_xxxxl.link_regular {
+  font: var(--sdTypoTextUnderlineRegular4xl);
+  padding: 3px 0px 1px;
+}
+
+/* Bold */
+
+.link.link_xs.link_bold {
+  font: var(--sdTypoTextUnderlineBoldXs);
+  padding: 1px 0px 2px;
+}
+
+.link.link_sm.link_bold {
+  font: var(--sdTypoTextUnderlineBoldSm);
+  padding: 1px 0px 3px;
+}
+
+.link.link_base.link_bold {
+  font: var(--sdTypoTextUnderlineBoldBase);
+  padding: 2px 0px;
+}
+
+.link.link_lg.link_bold {
+  font: var(--sdTypoTextUnderlineBoldLg);
+  padding: 2px 0px;
+}
+
+.link.link_xl.link_bold {
+  font: var(--sdTypoTextUnderlineBoldXl);
+  padding: 1px 0px 3px;
+}
+
+.link.link_xxl.link_bold {
+  font: var(--sdTypoTextUnderlineBold2xl);
+  padding: 0px;
+}
+
+.link.link_xxxl.link_bold {
+  font: var(--sdTypoTextUnderlineBold3xl);
+  padding: 1px 0px 3px;
+}
+
+.link.link_xxxxl.link_bold {
+  font: var(--sdTypoTextUnderlineBold4xl);
+  padding: 3px 0px 1px;
+}
+
+/* Semi Bold */
+
+.link.link_xs.link_semi_bold {
+  font: var(--sdTypoTextUnderlineSemiBoldXs);
+  padding: 1px 0px 2px;
+}
+
+.link.link_sm.link_semi_bold {
+  font: var(--sdTypoTextUnderlineSemiBoldSm);
+  padding: 1px 0px 3px;
+}
+
+.link.link_base.link_semi_bold {
+  font: var(--sdTypoTextUnderlineSemiBoldBase);
+  padding: 2px 0px;
+}
+
+.link.link_lg.link_semi_bold {
+  font: var(--sdTypoTextUnderlineSemiBoldLg);
+  padding: 2px 0px;
+}
+
+.link.link_xl.link_semi_bold {
+  font: var(--sdTypoTextUnderlineSemiBoldXl);
+  padding: 1px 0px 3px;
+}
+
+.link.link_xxl.link_semi_bold {
+  font: var(--sdTypoTextUnderlineSemiBold2xl);
+  padding: 0px;
+}
+
+.link.link_xxxl.link_semi_bold {
+  font: var(--sdTypoTextUnderlineSemiBold3xl);
+  padding: 1px 0px 3px;
+}
+
+.link.link_xxxxl.link_semi_bold {
+  font: var(--sdTypoTextUnderlineSemiBold4xl);
+  padding: 3px 0px 1px;
+}

package/src/Typography/Link.tsx

@@ -0,0 +1,73 @@
+import { HTMLAttributes } from 'react';
+import styles from './Link.modules.scss';
+
+interface LinkProps extends HTMLAttributes<HTMLParagraphElement> {
+  /** Text display */
+  text: string;
+  link: string;
+  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';
+  color?: string;
+  weight?: 'semi-bold' | 'bold' | 'regular';
+  className?: string;
+  isExternal?: boolean;
+}
+
+/** This text should be use to display basic text */
+export const Link = ({
+  text,
+  link,
+  size = 'base',
+  color = '#0077FF',
+  weight = 'regular',
+  className,
+  isExternal = true,
+  ...props
+}: LinkProps) => {
+  const getLinkSize = (): string => {
+    if (size === 'xs') return styles.link_xs;
+    else if (size === 'sm') return styles.link_sm;
+    else if (size === 'base') return styles.link_base;
+    else if (size === 'lg') return styles.link_lg;
+    else if (size === 'xl') return styles.link_xl;
+    else if (size === 'xxl') return styles.link_xxl;
+    else if (size === 'xxxl') return styles.link_xxxl;
+    else if (size === 'xxxxl') return styles.link_xxxxl;
+    else return styles.link_base;
+  };
+  const getLinkWeight = (): string => {
+    if (weight === 'semi-bold') return styles.link_semi_bold;
+    else if (weight === 'bold') return styles.link_bold;
+    else if (weight === 'regular') return styles.link_regular;
+    else return styles.link_regular;
+  };
+
+  if (isExternal) {
+    return (
+      <a href={link} target="_blank" rel="noopener noreferrer">
+        <p
+          {...props}
+          style={{ color: color }}
+          className={`${
+            styles.link
+          } ${getLinkWeight()} ${className} ${getLinkSize()}`}
+        >
+          {text}
+        </p>
+      </a>
+    );
+  } else {
+    return (
+      <a href={link}>
+        <p
+          {...props}
+          style={{ color: color }}
+          className={`${
+            styles.link
+          } ${getLinkWeight()} ${className} ${getLinkSize()}`}
+        >
+          {text}
+        </p>
+      </a>
+    );
+  }
+};

package/src/Typography/Text.modules.scss

@@ -0,0 +1,277 @@
+@import '../../example/index.css';
+
+.text {
+  font-family: var(--sdFontFamilyOpenSans);
+  font-style: normal;
+  font-weight: var(--sdFontWeightRegular);
+  font-size: var(--sdFontSizeXs);
+  line-height: var(--sdLineHeight130);
+  letter-spacing: var(--sdLetterSpacingButtons);
+  text-align: left;
+  margin: unset;
+}
+
+.text_underline {
+  text-decoration: var(--sdUnderline);
+}
+
+.text_line_through {
+  text-decoration: var(--sdLineThrough);
+}
+
+.text_required::after {
+  content: ' *';
+  color: red;
+}
+
+/* Regular */
+
+.text.text_xs.text_regular {
+  font: var(--sdTypoTextNoDecorationRegularXs);
+  padding: 0.063rem 0px;
+}
+
+.text.text_sm.text_regular {
+  font: var(--sdTypoTextNoDecorationRegularSm);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_base.text_regular {
+  font: var(--sdTypoTextNoDecorationRegularBase);
+  padding: 0.125rem 0px;
+}
+
+.text.text_lg.text_regular {
+  font: var(--sdTypoTextNoDecorationRegularLg);
+  padding: 0.125rem 0px;
+}
+
+.text.text_xl.text_regular {
+  font: var(--sdTypoTextNoDecorationRegularXl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxl.text_regular {
+  font: var(--sdTypoTextNoDecorationRegular2xl);
+  padding: 0px;
+}
+
+.text.text_xxxl.text_regular {
+  font: var(--sdTypoTextNoDecorationRegular3xl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxxxl.text_regular {
+  font: var(--sdTypoTextNoDecorationRegular4xl);
+  padding: 0.188rem 0px 0.063rem;
+}
+
+/* Regular Italic */
+
+.text.text_xs.text_regular.text_italic {
+  font: var(--sdTypoTextNoDecorationItalicXs);
+  padding: 0.063rem 0px 0.125rem;
+}
+
+.text.text_sm.text_regular.text_italic {
+  font: var(--sdTypoTextNoDecorationItalicSm);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_base.text_regular.text_italic {
+  font: var(--sdTypoTextNoDecorationItalicBase);
+  padding: 0.125rem 0px;
+}
+
+.text.text_lg.text_regular.text_italic {
+  font: var(--sdTypoTextNoDecorationItalicLg);
+  padding: 0.125rem 0px;
+}
+
+.text.text_xl.text_regular.text_italic {
+  font: var(--sdTypoTextNoDecorationItalicXl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxl.text_regular.text_italic {
+  font: var(--sdTypoTextNoDecorationItalic2xl);
+  padding: 0px;
+}
+
+.text.text_xxxl.text_regular.text_italic {
+  font: var(--sdTypoTextNoDecorationItalic3xl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxxxl.text_regular.text_italic {
+  font: var(--sdTypoTextNoDecorationItalic4xl);
+  padding: 0.188rem 0px 0.063rem;
+}
+
+/* Bold */
+
+.text.text_xs.text_bold {
+  font: var(--sdTypoTextNoDecorationBoldXs);
+  padding: 0.063rem 0px 0.125rem;
+}
+
+.text.text_sm.text_bold {
+  font: var(--sdTypoTextNoDecorationBoldSm);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_base.text_bold {
+  font: var(--sdTypoTextNoDecorationBoldBase);
+  padding: 0.125rem 0px;
+}
+
+.text.text_lg.text_bold {
+  font: var(--sdTypoTextNoDecorationBoldLg);
+  padding: 0.125rem 0px;
+}
+
+.text.text_xl.text_bold {
+  font: var(--sdTypoTextNoDecorationBoldXl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxl.text_bold {
+  font: var(--sdTypoTextNoDecorationBold2xl);
+  padding: 0px;
+}
+
+.text.text_xxxl.text_bold {
+  font: var(--sdTypoTextNoDecorationBold3xl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxxxl.text_bold {
+  font: var(--sdTypoTextNoDecorationBold4xl);
+  padding: 0.188rem 0px 0.063rem;
+}
+
+/* Bold Italic */
+
+.text.text_xs.text_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalicXs);
+  padding: 0.063rem 0px 0.125rem;
+}
+
+.text.text_sm.text_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalicSm);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_base.text_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalicBase);
+  padding: 0.125rem 0px;
+}
+
+.text.text_lg.text_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalicLg);
+  padding: 0.125rem 0px;
+}
+
+.text.text_xl.text_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalicXl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxl.text_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalic2xl);
+  padding: 0px;
+}
+
+.text.text_xxxl.text_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalic3xl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxxxl.text_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationBoldItalic4xl);
+  padding: 0.188rem 0px 0.063rem;
+}
+
+/* Semi Bold */
+
+.text.text_xs.text_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBoldXs);
+  padding: 0.063rem 0px 0.125rem;
+}
+
+.text.text_sm.text_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBoldSm);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_base.text_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBoldBase);
+  padding: 0.125rem 0px;
+}
+
+.text.text_lg.text_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBoldLg);
+  padding: 0.125rem 0px;
+}
+
+.text.text_xl.text_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBoldXl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxl.text_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBold2xl);
+  padding: 0px;
+}
+
+.text.text_xxxl.text_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBold3xl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxxxl.text_semi_bold {
+  font: var(--sdTypoTextNoDecorationSemiBold4xl);
+  padding: 0.188rem 0px 0.063rem;
+}
+
+/* Semi Bold Italic */
+
+.text.text_xs.text_semi_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalicXs);
+  padding: 0.063rem 0px 0.125rem;
+}
+
+.text.text_sm.text_semi_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalicSm);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_base.text_semi_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalicBase);
+  padding: 0.125rem 0px;
+}
+
+.text.text_lg.text_semi_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalicLg);
+  padding: 0.125rem 0px;
+}
+
+.text.text_xl.text_semi_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalicXl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxl.text_semi_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalic2xl);
+  padding: 0px;
+}
+
+.text.text_xxxl.text_semi_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalic3xl);
+  padding: 0.063rem 0px 0.188rem;
+}
+
+.text.text_xxxxl.text_semi_bold.text_italic {
+  font: var(--sdTypoTextNoDecorationSemiBoldItalic4xl);
+  padding: 0.188rem 0px 0.063rem;
+}