Merge pull request #116 from input-output-hk/fix/improve-transaction-summary

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>

src/icons/EditComponent.tsx

@@ -1,12 +1,17 @@
 import * as React from 'react';
 import type { SVGProps } from 'react';
-
-const SvgEditComponent = (props: SVGProps<SVGSVGElement>) => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+const SvgEditcomponent = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    fill="none"
+    {...props}
+  >
     <path
-      d="M12.5932 3.4068L13.0351 2.96486V2.96486L12.5932 3.4068ZM4.94445 13.0197V13.6447C5.11021 13.6447 5.26918 13.5789 5.38639 13.4617L4.94445 13.0197ZM3 13.0197H2.375C2.375 13.3649 2.65482 13.6447 3 13.6447V13.0197ZM3 11.0358L2.55806 10.5939C2.44085 10.7111 2.375 10.87 2.375 11.0358H3ZM11.071 3.84874C11.3693 3.55042 11.8529 3.55042 12.1513 3.84874L13.0351 2.96486C12.2487 2.17838 10.9735 2.17838 10.1871 2.96486L11.071 3.84874ZM12.1513 3.84874C12.4496 4.14706 12.4496 4.63073 12.1513 4.92905L13.0351 5.81293C13.8216 5.02646 13.8216 3.75133 13.0351 2.96486L12.1513 3.84874ZM12.1513 4.92905L4.50251 12.5778L5.38639 13.4617L13.0351 5.81293L12.1513 4.92905ZM4.94445 12.3947H3V13.6447H4.94445V12.3947ZM10.1871 2.96486L2.55806 10.5939L3.44194 11.4777L11.071 3.84874L10.1871 2.96486ZM2.375 11.0358V13.0197H3.625V11.0358H2.375ZM9.35373 4.68208L11.3179 6.64627L12.2018 5.76238L10.2376 3.79819L9.35373 4.68208Z"
       fill="currentColor"
+      d="m12.593 3.407.442-.442zM4.944 13.02v.625a.63.63 0 0 0 .442-.183zM3 13.02h-.625c0 .345.28.625.625.625zm0-1.984-.442-.442a.63.63 0 0 0-.183.442zm8.071-7.187a.764.764 0 0 1 1.08 0l.884-.884a2.014 2.014 0 0 0-2.848 0zm1.08 0a.764.764 0 0 1 0 1.08l.884.884a2.014 2.014 0 0 0 0-2.848zm0 1.08-7.648 7.649.883.884 7.65-7.65zm-7.207 7.466H3v1.25h1.944zm5.243-9.43-7.629 7.629.884.884 7.629-7.63zm-7.812 8.07v1.985h1.25v-1.984zm6.979-6.353 1.964 1.964.884-.884-1.964-1.964z"
     />
   </svg>
 );
-export default SvgEditComponent;
+export default SvgEditcomponent;

src/icons/index.ts

@@ -22,6 +22,7 @@ export { default as DocumentDownload } from './DocumentDownload';
 export { default as DocumentTextGradientComponent } from './DocumentTextGradientComponent';
 export { default as DocumentComponent } from './DocumentComponent';
 export { default as DownloadComponent } from './DownloadComponent';
+export { default as EditComponent } from './EditComponent';
 export { default as ExclamationCircleComponent } from './ExclamationCircleComponent';
 export { default as EyeCloseComponent } from './EyeCloseComponent';
 export { default as EyeGradientComponent } from './EyeGradientComponent';
@@ -78,4 +79,3 @@ export { default as WalletComponent } from './WalletComponent';
 export { default as WarningIconCircleComponent } from './WarningIconCircleComponent';
 export { default as WarningIconTriangleSolidComponent } from './WarningIconTriangleSolidComponent';
 export { default as WarningIconTriangleComponent } from './WarningIconTriangleComponent';
-export { default as EditComponent } from './EditComponent';