feat(ui): add tooltip

input-output-hk · Apr 17, 2024 · 88866ee · 88866ee
1 parent 8f3b6fe
commit 88866ee
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git a/...ages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.component.tsx b/...ages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.component.tsx
@@ -1,11 +1,15 @@
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
 import React from 'react';
 
 import { ReactComponent as AdaComponent } from '@lace/icons/dist/AdaComponent';
+import { ReactComponent as InfoIcon } from '@lace/icons/dist/InfoComponent';
 import classNames from 'classnames';
 
+import { Box } from '../box';
 import { Flex } from '../flex';
 import { Grid, Cell } from '../grid';
+import { Tooltip } from '../tooltip';
 import * as Typography from '../typography';
 
 import * as styles from './dapp-transaction-summary.css';
@@ -17,13 +21,15 @@ type Props = OmitClassName<'div'> & {
   transactionAmount: string;
   title?: string;
   cardanoSymbol?: string;
+  tooltip?: string;
 };
 
 export const TransactionSummary = ({
   testId,
   transactionAmount,
   title,
   cardanoSymbol,
+  tooltip,
   ...props
 }: Readonly<Props>): JSX.Element => (
   <div className={styles.txSummaryContainer}>
@@ -32,6 +38,15 @@ export const TransactionSummary = ({
         <Typography.Body.Large className={styles.txSummaryTitle}>
           {title}
         </Typography.Body.Large>
+        {tooltip && (
+          <Box ml="$8" className={styles.tooltip}>
+            <Tooltip label={tooltip}>
+              <div className={styles.tooltipText}>
+                <InfoIcon />
+              </div>
+            </Tooltip>
+          </Box>
+        )}
       </Flex>
     )}
     <div className={styles.txAmountContainer} data-testid={testId}>

diff --git a/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.css.ts b/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.css.ts
@@ -100,3 +100,18 @@ export const assetsContainer = style({
 export const txSummaryContainer = style({
   paddingTop: '20px',
 });
+
+export const tooltip = style([
+  sx({
+    color: '$transaction_summary_secondary_label_color',
+    width: '$24',
+    height: '$24',
+    fontSize: '$25',
+  }),
+]);
+
+export const tooltipText = style([
+  sx({
+    display: 'flex',
+  }),
+]);
diff --git a/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.stories.tsx b/packages/ui/src/design-system/dapp-transaction-summary/dapp-transaction-summary.stories.tsx
@@ -73,6 +73,7 @@ const Example = (): JSX.Element => (
     <TransactionSummary
       title="Transaction Summary"
       transactionAmount="-100.00"
+      tooltip="This is a test tooltip"
     />
     {items.map(value => (
       <TransactionAssets