Skip to content

Commit f01ead7

Browse files
jpurijpuri
authored
feat: add option of copy to info row component (#25682)
1 parent 6b99e92 commit f01ead7

File tree

28 files changed

+377
-233
lines changed

28 files changed

+377
-233
lines changed

‎ui/components/app/confirm/info/__snapshots__/info.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ exports[`ConfirmInfo should match snapshot 1`] = `
77
>
88
<div
99
class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
10-
style="overflow-wrap: anywhere; min-height: 24px;"
10+
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
1111
>
1212
<div
1313
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
@@ -81,7 +81,7 @@ exports[`ConfirmInfo should match snapshot 1`] = `
8181
/>
8282
<div
8383
class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
84-
style="overflow-wrap: anywhere; min-height: 24px;"
84+
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
8585
>
8686
<div
8787
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"

‎ui/components/app/confirm/info/row/__snapshots__/copy-icon.test.tsx.snap‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`CopyIcon should match snapshot 1`] = `
4+
<div>
5+
<span
6+
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-alternative"
7+
style="mask-image: url('./images/icons/copy.svg'); cursor: pointer; position: absolute; right: 0px; top: 2px;"
8+
/>
9+
</div>
10+
`;

‎ui/components/app/confirm/info/row/__snapshots__/expandable-row.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`ConfirmInfoExpandableRow should match snapshot 1`] = `
44
<div>
55
<div
66
class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
7-
style="overflow-wrap: anywhere; min-height: 24px;"
7+
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
88
>
99
<div
1010
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"

‎ui/components/app/confirm/info/row/__snapshots__/row.test.tsx.snap‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`ConfirmInfoRow should match snapshot 1`] = `
4+
<div>
5+
<div
6+
class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
7+
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
8+
>
9+
<div
10+
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
11+
>
12+
<p
13+
class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
14+
>
15+
some label
16+
</p>
17+
</div>
18+
<p
19+
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
20+
>
21+
Some text
22+
</p>
23+
</div>
24+
</div>
25+
`;
26+
27+
exports[`ConfirmInfoRow should match snapshot when copy is enabled 1`] = `
28+
<div>
29+
<div
30+
class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
31+
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
32+
>
33+
<span
34+
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-icon-alternative"
35+
style="mask-image: url('./images/icons/copy.svg'); cursor: pointer; position: absolute; right: 0px; top: 2px;"
36+
/>
37+
<div
38+
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
39+
>
40+
<p
41+
class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
42+
>
43+
some label
44+
</p>
45+
</div>
46+
<p
47+
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
48+
>
49+
Some text
50+
</p>
51+
</div>
52+
</div>
53+
`;

‎ui/components/app/confirm/info/row/alert-row/__snapshots__/alert-row.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`AlertRow matches snapshot with no alert 1`] = `
44
<div>
55
<div
66
class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
7-
style="overflow-wrap: anywhere; min-height: 24px; background: transparent;"
7+
style="overflow-wrap: anywhere; min-height: 24px; position: relative; background: transparent;"
88
>
99
<div
1010
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default"

‎ui/components/app/confirm/info/row/copy-icon.test.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
4+
import { CopyIcon } from './copy-icon';
5+
6+
describe('CopyIcon', () => {
7+
it('should match snapshot', () => {
8+
const { container } = render(<CopyIcon copyText="dummy text" />);
9+
expect(container).toMatchSnapshot();
10+
});
11+
});

‎ui/components/app/confirm/info/row/copy-icon.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React, { useCallback } from 'react';
2+
3+
import { useCopyToClipboard } from '../../../../../hooks/useCopyToClipboard';
4+
import { IconColor } from '../../../../../helpers/constants/design-system';
5+
import { Icon, IconName, IconSize } from '../../../../component-library';
6+
7+
type CopyCallback = (text: string) => void;
8+
9+
export const CopyIcon: React.FC<{ copyText: string }> = ({ copyText }) => {
10+
const [copied, handleCopy] = useCopyToClipboard();
11+
12+
const handleClick = useCallback(async () => {
13+
(handleCopy as CopyCallback)(copyText);
14+
}, [copyText]);
15+
16+
return (
17+
<Icon
18+
color={IconColor.iconAlternative}
19+
name={copied ? IconName.CopySuccess : IconName.Copy}
20+
size={IconSize.Sm}
21+
style={{ cursor: 'pointer', position: 'absolute', right: 0, top: 2 }}
22+
onClick={handleClick}
23+
/>
24+
);
25+
};

‎ui/components/app/confirm/info/row/row.stories.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,15 @@ DefaultStory.args = {
2828
children: 'Value',
2929
};
3030

31+
export const CopyEnabledStory = (args) => <ConfirmInfoRow {...args} />;
32+
33+
CopyEnabledStory.storyName = 'CopyEnabled';
34+
35+
CopyEnabledStory.args = {
36+
label: 'Key',
37+
children: 'Value',
38+
copyEnabled: true,
39+
copyText: 'Some copy text'
40+
};
41+
3142
export default ConfirmInfoRowStory;

‎ui/components/app/confirm/info/row/row.test.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
4+
import { Text } from '../../../../component-library';
5+
import { ConfirmInfoRow } from './row';
6+
7+
describe('ConfirmInfoRow', () => {
8+
it('should match snapshot', () => {
9+
const { container } = render(
10+
<ConfirmInfoRow label="some label">
11+
<Text>Some text</Text>
12+
</ConfirmInfoRow>,
13+
);
14+
expect(container).toMatchSnapshot();
15+
});
16+
17+
it('should match snapshot when copy is enabled', () => {
18+
const { container } = render(
19+
<ConfirmInfoRow label="some label" copyEnabled copyText="dummy text">
20+
<Text>Some text</Text>
21+
</ConfirmInfoRow>,
22+
);
23+
expect(container).toMatchSnapshot();
24+
});
25+
});

‎ui/components/app/confirm/info/row/row.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
TextColor,
2222
TextVariant,
2323
} from '../../../../../helpers/constants/design-system';
24+
import { CopyIcon } from './copy-icon';
2425

2526
export enum ConfirmInfoRowVariant {
2627
Default = 'default',
@@ -36,6 +37,8 @@ export type ConfirmInfoRowProps = {
3637
style?: React.CSSProperties;
3738
labelChildren?: React.ReactNode;
3839
color?: TextColor;
40+
copyEnabled?: boolean;
41+
copyText?: string;
3942
};
4043

4144
const BACKGROUND_COLORS = {
@@ -74,6 +77,8 @@ export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({
7477
style,
7578
labelChildren,
7679
color,
80+
copyEnabled = false,
81+
copyText = undefined,
7782
}) => (
7883
<ConfirmInfoRowContext.Provider value={{ variant }}>
7984
<Box
@@ -87,14 +92,16 @@ export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({
8792
marginTop={2}
8893
marginBottom={2}
8994
paddingLeft={2}
90-
paddingRight={2}
95+
paddingRight={copyEnabled ? 5 : 2}
9196
color={TEXT_COLORS[variant] as TextColor}
9297
style={{
9398
overflowWrap: OverflowWrap.Anywhere,
9499
minHeight: '24px',
100+
position: 'relative',
95101
...style,
96102
}}
97103
>
104+
{copyEnabled && <CopyIcon copyText={copyText ?? ''} />}
98105
<Box
99106
display={Display.Flex}
100107
flexDirection={FlexDirection.Row}
@@ -122,7 +129,9 @@ export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({
122129
)}
123130
</Box>
124131
{typeof children === 'string' ? (
125-
<Text color={TextColor.inherit}>{children}</Text>
132+
<Text marginRight={copyEnabled ? 3 : 0} color={TextColor.inherit}>
133+
{children}
134+
</Text>
126135
) : (
127136
children
128137
)}

0 commit comments

Comments
 (0)