c3ecf75 · bridge · git.iko.soy

src/components/Buttons.js+7−2

compare with master

unifiedsplit

@@ -3,6 +3,7 @@ import { Button } from 'indigo-react';

3import { Icon } from '@tlon/indigo-react';

4

5import { blinkIf } from './Blinky';

6+import WithTooltip from './WithTooltip';

6

7

7// NOTE: the -> is correct because inter recognizes the pair

8// NOTE: the -> is correct because inter recognizes the pair

8export const ForwardButton = ({ loading, ...props }) => (

9export const ForwardButton = ({ loading, ...props }) => (

@@ -25,9 +26,13 @@ export const OfflineButton = props => (

25 </OutButton>

26 </OutButton>

26);

27);

27

28

28−export const CopyButton = props => (

29+export const CopyButton = ({ didCopy = false, ...props }) => (

29 <Button

30 <Button

31+ accessory={

32+ <WithTooltip content={didCopy ? 'Copied!' : 'Copy'}>

30− accessory={<Icon icon="Copy" size="18px" color={'black'} />}

33+ <Icon icon="Copy" size="18px" color={'black'} />

34+ </WithTooltip>

35+ }

31 {...props}

36 {...props}

32 />

37 />

33);

38);

src/components/CopyButton.js−19

@@ -2,8 +2,6 @@ import React from 'react';

2import cn from 'classnames';

3import { LinkButton } from 'indigo-react';

4

5−import { CopyButton as BaseCopyButton } from 'components/Buttons';

6−

7import useCopiable from 'lib/useCopiable';

5import useCopiable from 'lib/useCopiable';

8

6

9const renderDefaultCopyText = didCopy => (didCopy ? 'Copied!' : 'Copy');

7const renderDefaultCopyText = didCopy => (didCopy ? 'Copied!' : 'Copy');

@@ -29,20 +27,3 @@ export default function CopyButton({

29 </As>

27 </As>

30 );

28 );

31}

29}

32−

33−export function CopyButtonWide({ text, children, ...rest }) {

34− const [doCopy, didCopy] = useCopiable(text);

35− return (

36− <BaseCopyButton

37− as="span"

38− onClick={doCopy}

39− text={text}

40− className={cn({

41− black: !didCopy,

42− green3: didCopy,

43− })}

44− {...rest}>

45− {children}

46− </BaseCopyButton>

47− );

48−}

src/components/CopyButtonWide.tsxnew file+17

@@ -0,0 +1,17 @@

1+import React from 'react';

2+import { CopyButton as BaseCopyButton } from 'components/Buttons';

3+import useCopiable from 'lib/useCopiable';

4+

5+export function CopyButtonWide({ text, children, ...rest }) {

6+ const [doCopy, didCopy] = useCopiable(text);

7+ return (

8+ <BaseCopyButton

9+ as="span"

10+ onClick={doCopy}

11+ didCopy={didCopy}

12+ text={text}

13+ {...rest}>

14+ {children}

15+ </BaseCopyButton>

16+ );

17+}

src/views/UrbitOS/AccessCode.test.tsx+2−4

@@ -9,10 +9,8 @@ describe('AccessCode', () => {

9

10 it('does not render the component', () => {

11 render(<AccessCode code={testCode} />);

12− const accessCode = screen.queryByText(

12+ const element = screen.queryByTestId('custom-element');

13− 'This is your code to access Urbit OS'

14− );

15− expect(accessCode).not.toBeInTheDocument()

13+ expect(element).not.toBeInTheDocument();

16 });

14 });

17 });

15 });

18

16

src/views/UrbitOS/AccessCode.tsx+5−2

@@ -1,4 +1,4 @@

1−import { CopyButtonWide } from 'components/CopyButton';

1+import { CopyButtonWide } from 'components/CopyButtonWide';

2import { Grid } from 'indigo-react';

3

4type AccessCodeArgs = {

@@ -13,7 +13,10 @@ const AccessCode = ({ code }: AccessCodeArgs) => {

13 full

14 detail="This is your code to access Urbit OS"

15 as={CopyButtonWide}

16− text={code}>

16+ text={code}

17+ data-testid="access-code"

18+ // Allow the Copy Button Tooltip to flow over the Grid border

19+ style={{ overflow: 'unset' }}>

17 Access Key

20 Access Key

18 </Grid.Item>

21 </Grid.Item>

19 </>

22 </>