Merge pull request #100 from ensdomains/tooltip-react-transition-state

Tooltip using react-transition-state
ensdomains · Feb 9, 2023 · ed8bf09 · ed8bf09
2 parents c0feb46 + 0c91383
commit ed8bf09
Show file tree

Hide file tree

Showing 11 changed files with 520 additions and 1,110 deletions.
diff --git a/components/src/components/atoms/Button/Button.tsx b/components/src/components/atoms/Button/Button.tsx
@@ -46,6 +46,8 @@ type BaseProps = {
   count?: number
   /** The handler for click events. */
   onClick?: NativeButtonProps['onClick']
+  /** Show indicator that button has extra info via tooltip. */
+  shouldShowTooltipIndicator?: boolean
 } & Omit<NativeButtonProps, 'prefix' | 'size'>
 
 type WithAnchor = {
@@ -247,6 +249,20 @@ const Counter = styled.div<{ $visible: boolean }>(
   `,
 )
 
+const TooltipIndicator = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #e9b911;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  right: -10px;
+  top: -10px;
+  color: white;
+`
+
 export type Props = BaseProps & (WithoutAnchor | WithAnchor) & WithColorStyle
 
 export const Button = React.forwardRef(
@@ -272,6 +288,7 @@ export const Button = React.forwardRef(
       width,
       fullWidthContent,
       count,
+      shouldShowTooltipIndicator,
       as: asProp,
       ...props
     }: Props,
@@ -333,6 +350,10 @@ export const Button = React.forwardRef(
         zIndex={zIndex}
         onClick={onClick}
       >
+        {shouldShowTooltipIndicator && (
+          <TooltipIndicator data-testid="tooltip-indicator">?</TooltipIndicator>
+        )}
+
         {childContent}
         <CounterWrapper>
           <Counter $visible={!!count}>{count}</Counter>