Docs(TooltipV2): add new documentation

scaleflex · Aug 5, 2024 · ee21dbf · ee21dbf
1 parent 73f474c
commit ee21dbf
Show file tree

Hide file tree

Showing 12 changed files with 407 additions and 70 deletions.
diff --git a/packages/ui/src/core/icon-button/icon-button.component.tsx b/packages/ui/src/core/icon-button/icon-button.component.tsx
@@ -8,7 +8,7 @@ import Styled from './icon-button.styles';
 
 const IconButton = intrinsicComponent<IconButtonProps, HTMLButtonElement>(
   (
-    { children, size = ButtonSize.Md, color = IconButtonColor.Secondary, active = false, ...rest }: IconButtonProps,
+    { children, size = ButtonSize.Md, color = IconButtonColor.Primary, active = false, ...rest }: IconButtonProps,
     ref
   ): JSX.Element => (
     <Styled.IconButton {...rest} size={size} color={color} $active={active} ref={ref}>

diff --git a/packages/ui/src/core/tooltip-v2/tooltip-v2.component.tsx b/packages/ui/src/core/tooltip-v2/tooltip-v2.component.tsx
@@ -4,7 +4,7 @@ import 'tippy.js/animations/scale.css';
 
 import { intrinsicComponent } from '../../utils/functions';
 import { TooltipV2Props } from './tooltip-v2.props';
-import { Position, Size } from './types';
+import { Position, Size, Variant } from './types';
 import Styled from './tooltip-v2.styles';
 
 const TooltipV2 = intrinsicComponent<TooltipV2Props, HTMLSpanElement>(
@@ -22,36 +22,28 @@ const TooltipV2 = intrinsicComponent<TooltipV2Props, HTMLSpanElement>(
       position = Position.Top,
       info = false,
       size = Size.Sm,
+      variant = Variant.Default,
       ...rest
     }: TooltipV2Props,
     ref
-  ): JSX.Element => {
-    const renderTooltipContent = (): JSX.Element => (
-      <Styled.TooltipText $info={info} $warning={warning}>
-        {title}
-      </Styled.TooltipText>
-    );
-
-    return (
-      <Styled.TooltipV2
-        ref={ref}
-        placement={position}
-        content={renderTooltipContent()}
-        interactive={enableHover}
-        arrow={arrow}
-        delay={[enterDelay, leaveDelay]}
-        $info={info}
-        $warning={warning}
-        $size={size || Size.Sm}
-        animation="scale"
-        offset={[offsetX, offsetY]}
-        appendTo={document.body}
-        {...rest}
-      >
-        {children}
-      </Styled.TooltipV2>
-    );
-  }
+  ): JSX.Element => (
+    <Styled.TooltipV2
+      ref={ref}
+      placement={position}
+      content={<Styled.TooltipText>{title}</Styled.TooltipText>}
+      interactive={enableHover}
+      arrow={arrow}
+      delay={[enterDelay, leaveDelay]}
+      $variant={(warning && Variant.Warning) || (info && Variant.Info) || variant}
+      $size={size || Size.Sm}
+      animation="scale"
+      offset={[offsetX, offsetY]}
+      appendTo={document.body}
+      {...rest}
+    >
+      {children}
+    </Styled.TooltipV2>
+  )
 );
 
 export default TooltipV2;
diff --git a/packages/ui/src/core/tooltip-v2/tooltip-v2.mixin.ts b/packages/ui/src/core/tooltip-v2/tooltip-v2.mixin.ts
@@ -0,0 +1,47 @@
+import { css, RuleSet } from 'styled-components';
+
+import type { WithTheme } from '../../theme/entity';
+import { Color as PColor } from '../../utils/types/palette';
+import { Variant } from './types';
+import Styled from './tooltip-v2.styles';
+
+export const variantMixin = {
+  [Variant.Default]: ({ theme: { palette } }: WithTheme): RuleSet => css`
+    background: ${palette[PColor.IconsPlaceholder]};
+    color: ${palette[PColor.LinkActive]};
+
+    ${Styled.TooltipText} {
+      color: ${palette[PColor.LinkActive]};
+    }
+
+    .tippy-arrow {
+      color: ${palette[PColor.IconsPlaceholder]};
+    }
+  `,
+
+  [Variant.Warning]: ({ theme: { palette } }: WithTheme): RuleSet => css`
+    background: ${palette[PColor.BackgroundOrange]};
+    color: ${palette[PColor.TextWarning]};
+
+    ${Styled.TooltipText} {
+      color: ${palette[PColor.TextWarning]};
+    }
+
+    .tippy-arrow {
+      color: ${palette[PColor.BackgroundOrange]};
+    }
+  `,
+
+  [Variant.Info]: ({ theme: { palette } }: WithTheme): RuleSet => css`
+    background: ${palette[PColor.BackgroundBlue]};
+    color: ${palette[PColor.TextInfo]};
+
+    ${Styled.TooltipText} {
+      color: ${palette[PColor.TextInfo]};
+    }
+
+    .tippy-arrow {
+      color: ${palette[PColor.BackgroundBlue]};
+    }
+  `,
+};
diff --git a/packages/ui/src/core/tooltip-v2/tooltip-v2.props.ts b/packages/ui/src/core/tooltip-v2/tooltip-v2.props.ts
@@ -1,21 +1,22 @@
 import type { Values } from '../../utils/types';
-import { Position, Size } from './types';
+import { Position, Size, Variant } from './types';
 
 export type TooltipPositionType = Values<typeof Position>;
 export type TooltipSizeType = Values<typeof Size>;
+export type TooltipVariantType = Values<typeof Variant>;
 
 export interface TooltipV2Props extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'title'> {
   position?: TooltipPositionType;
   size?: TooltipSizeType;
   title: React.ReactNode;
   children: React.ReactElement;
   arrow?: boolean;
-  tooltipProps?: object;
   enableHover?: boolean;
   warning?: boolean;
   info?: boolean;
   enterDelay?: number;
   leaveDelay?: number;
   offsetX?: number;
   offsetY?: number;
+  variant?: TooltipVariantType;
 }
diff --git a/packages/ui/src/core/tooltip-v2/tooltip-v2.styles.ts b/packages/ui/src/core/tooltip-v2/tooltip-v2.styles.ts
@@ -5,35 +5,28 @@ import styled, { css } from 'styled-components';
 import type { With } from '../../utils/types';
 import type { WithTheme } from '../../theme/entity';
 import { BorderRadiusSize as BRSize } from '../../utils/types/shape/border-radius-size';
-import { Color as PColor } from '../../utils/types/palette';
 import { fontTooltipMixin, sizeTooltipMixin } from '../tooltip/tooltip.mixin';
-import { TooltipSizeType } from './tooltip-v2.props';
+import { TooltipSizeType, TooltipVariantType } from './tooltip-v2.props';
 import { Size } from './types';
+import { variantMixin } from './tooltip-v2.mixin';
 
 const baseClassName = 'TooltipV2';
 
 const TooltipV2 = styled(Tippy).attrs({
   className: generateClassNames(baseClassName, 'root'),
-})<With<WithTheme, { $warning?: boolean; $info?: boolean; $size: TooltipSizeType }>>(
-  ({ $warning, $info, $size = Size.Sm, theme }) => css`
+})<With<WithTheme, { $variant: TooltipVariantType; $size: TooltipSizeType }>>(
+  ({ $variant, $size = Size.Sm, theme }) => css`
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     min-width: 54px;
     min-height: 20px;
     word-break: break-word;
     border-radius: ${theme.shape.borderRadius[BRSize.Md]};
-    background: ${theme.palette[
-      ($warning && PColor.BackgroundOrange) || ($info && PColor.BackgroundBlue) || PColor.IconsPlaceholder
-    ]};
-    color: ${theme.palette[($warning && PColor.TextWarning) || ($info && PColor.TextInfo) || PColor.LinkActive]};
 
-    ${sizeTooltipMixin[$size]};
+    ${variantMixin[$variant]};
 
-    .tippy-arrow {
-      color: ${theme.palette[
-        ($warning && PColor.BackgroundOrange) || ($info && PColor.BackgroundBlue) || PColor.IconsPlaceholder
-      ]};
-    }
+    ${sizeTooltipMixin[$size]};
 
     .tippy-content {
       padding: 0;
@@ -44,13 +37,10 @@ const TooltipV2 = styled(Tippy).attrs({
 
 const TooltipText = styled.div.attrs({
   className: generateClassNames(baseClassName, 'content'),
-})<With<WithTheme, { $warning?: boolean; $info?: boolean }>>(
-  ({ $warning, $info, theme }) => css`
-    display: flex;
-    align-items: center;
-    color: ${theme.palette[($warning && PColor.TextWarning) || ($info && PColor.TextInfo) || PColor.LinkActive]};
-  `
-);
+})`
+  display: flex;
+  align-items: center;
+`;
 
 const Styled = applyDisplayNames({ TooltipV2, TooltipText });
 

diff --git a/packages/ui/src/core/tooltip-v2/types/index.ts b/packages/ui/src/core/tooltip-v2/types/index.ts
@@ -1,2 +1,3 @@
 export * from './size';
 export * from './position';
+export * from './variant';
diff --git a/packages/ui/src/core/tooltip-v2/types/variant.ts b/packages/ui/src/core/tooltip-v2/types/variant.ts
@@ -0,0 +1,5 @@
+export const Variant = {
+  Default: 'default',
+  Warning: 'warning',
+  Info: 'info',
+} as const;