fix: add tooltip to transaction summary

Author: greatertomi

src/design-system/transaction-summary/transaction-summary-other.component.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
 
+import InfoIcon from '@icons/InfoComponent';
+import classNames from 'classnames';
+
+import { Box } from '../box';
 import { Flex } from '../flex';
 import { Grid, Cell } from '../grid';
 import { Text } from '../text';
+import { Tooltip } from '../tooltip';
 
 import * as cx from './transaction-summary.css';
 
@@ -11,21 +16,48 @@ import type { OmitClassName } from '../../types';
 type Props = OmitClassName<'div'> & {
   label: string;
   text: string;
+  tooltip?: string;
+  'data-testid'?: string;
+  textAlignRight?: boolean;
+};
+
+const makeTestId = (namespace = '', path = ''): string | undefined => {
+  return namespace === '' ? undefined : `tx-other-${namespace}-${path}`;
 };
 
 export const Other = ({
   label,
   text,
+  tooltip,
+  textAlignRight = false,
   ...props
 }: Readonly<Props>): JSX.Element => {
+  const testId = props['data-testid'];
+
   return (
     <Grid {...props} columns="$2">
       <Cell>
-        <Text.Body.Normal weight="$semibold">{label}</Text.Body.Normal>
+        <Flex>
+          <Text.Body.Normal weight="$semibold">{label}</Text.Body.Normal>
+          {tooltip !== undefined && (
+            <Box ml="$8">
+              <Tooltip label={tooltip}>
+                <div data-testid={makeTestId(testId, 'tooltip-icon')}>
+                  <InfoIcon className={cx.tooltipIcon} />
+                </div>
+              </Tooltip>
+            </Box>
+          )}
+        </Flex>
       </Cell>
       <Cell>
         <Flex justifyContent="flex-end" h="$fill">
-          <Text.Body.Normal weight="$medium" className={cx.text}>
+          <Text.Body.Normal
+            weight="$medium"
+            className={classNames(cx.text, {
+              [cx.textAlignRight]: textAlignRight,
+            })}
+          >
             {text}
           </Text.Body.Normal>
         </Flex>

src/design-system/transaction-summary/transaction-summary.css.ts

@@ -8,6 +8,10 @@ export const secondaryText = style({
   wordBreak: 'break-all',
 });
 
+export const textAlignRight = style({
+  textAlign: 'right',
+});
+
 export const tooltipIcon = style([
   sx({
     color: '$text_primary',

src/design-system/transaction-summary/transaction-summary.stories.tsx

@@ -105,6 +105,17 @@ const MainComponents = (): JSX.Element => (
         </Layout>
       </Variants.Cell>
     </Variants.Row>
+    <Variants.Row>
+      <Variants.Cell>
+        <Layout>
+          <Other
+            label="Label with tooltip"
+            text="Ut condimentum enim pulvinar, consequat nunc vitae, feugiat nisl. Vestibulum elementum condiment congue et nam quis ipsum diam."
+            tooltip="Ut condimentum enim pulvinar, consequat nunc vitae, feugiat nisl"
+          />
+        </Layout>
+      </Variants.Cell>
+    </Variants.Row>
     <Variants.Row>
       <Variants.Cell>
         <Layout>