From ba31f87014ec1146b8d5a77eb57b53c0fce1ffca Mon Sep 17 00:00:00 2001 From: Dhruv <79097544+dhruvv173@users.noreply.github.com> Date: Sat, 19 Aug 2023 06:29:02 +0530 Subject: [PATCH] fix/TagUrl to TS (#20519) --- .../signature-request.test.js.snap | 4 +- .../avatar-favicon/avatar-favicon.test.tsx | 3 +- .../avatar-favicon/avatar-favicon.types.ts | 2 +- .../component-library/tag-url/README.mdx | 26 ++-- ...url.test.js.snap => tag-url.test.tsx.snap} | 2 +- .../component-library/tag-url/index.js | 1 - .../component-library/tag-url/index.ts | 2 + .../component-library/tag-url/tag-url.js | 118 ------------------ ...tag-url.stories.js => tag-url.stories.tsx} | 39 +++--- .../{tag-url.test.js => tag-url.test.tsx} | 0 .../component-library/tag-url/tag-url.tsx | 87 +++++++++++++ .../tag-url/tag-url.types.ts | 55 ++++++++ .../__snapshots__/index.test.js.snap | 2 +- 13 files changed, 189 insertions(+), 152 deletions(-) rename ui/components/component-library/tag-url/__snapshots__/{tag-url.test.js.snap => tag-url.test.tsx.snap} (76%) delete mode 100644 ui/components/component-library/tag-url/index.js create mode 100644 ui/components/component-library/tag-url/index.ts delete mode 100644 ui/components/component-library/tag-url/tag-url.js rename ui/components/component-library/tag-url/{tag-url.stories.js => tag-url.stories.tsx} (64%) rename ui/components/component-library/tag-url/{tag-url.test.js => tag-url.test.tsx} (100%) create mode 100644 ui/components/component-library/tag-url/tag-url.tsx create mode 100644 ui/components/component-library/tag-url/tag-url.types.ts diff --git a/ui/components/app/signature-request/__snapshots__/signature-request.test.js.snap b/ui/components/app/signature-request/__snapshots__/signature-request.test.js.snap index af2a54c5c..055cde8c0 100644 --- a/ui/components/app/signature-request/__snapshots__/signature-request.test.js.snap +++ b/ui/components/app/signature-request/__snapshots__/signature-request.test.js.snap @@ -179,7 +179,7 @@ exports[`Signature Request Component render should match snapshot when we are us class="signature-request__origin" >
{ const { getByTestId } = render( , @@ -108,7 +107,7 @@ describe('AvatarFavicon', () => { }); it('should forward a ref to the root html element', () => { const ref = React.createRef(); - render(); + render(); expect(ref.current).not.toBeNull(); expect(ref.current.nodeName).toBe('DIV'); }); diff --git a/ui/components/component-library/avatar-favicon/avatar-favicon.types.ts b/ui/components/component-library/avatar-favicon/avatar-favicon.types.ts index 72316b5c2..35b28ebc4 100644 --- a/ui/components/component-library/avatar-favicon/avatar-favicon.types.ts +++ b/ui/components/component-library/avatar-favicon/avatar-favicon.types.ts @@ -12,7 +12,7 @@ export enum AvatarFaviconSize { } export interface AvatarFaviconStyleUtilityProps - extends Omit { + extends Omit { /** * The src accepts the string of the image to be rendered */ diff --git a/ui/components/component-library/tag-url/README.mdx b/ui/components/component-library/tag-url/README.mdx index ace2e64d8..a5cc123f2 100644 --- a/ui/components/component-library/tag-url/README.mdx +++ b/ui/components/component-library/tag-url/README.mdx @@ -12,13 +12,11 @@ The `TagUrl` is a component used to display dApp information ## Props -The `TagUrl` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props. - ### Action Button Label -If we want to have a button in `TagUrl` component. You can update the `ButtonLink` component props used for the action button using `actionButtonProps` +Use the `actionButtonLabel` to add a `ButtonLink` inside of `TagUrl`. Use the `actionButtonProps` prop object to add the necessary `href` or `onClick`. @@ -32,18 +30,30 @@ import { TagUrl } from '../../ui/component-library/tag-url'; src="https://uniswap.org/favicon.ico" showLockIcon actionButtonLabel="Permissions" + actionButtonProps={{ + externalLink: true, + href: 'https://metamask.io', + }} /> ``` @@ -51,7 +61,7 @@ import { TagUrl } from '../../ui/component-library/tag-url'; Use the `showLockIcon` prop to render a lock icon next to the `label`. It's intended use is to display if the url uses `https`. This logic should be added during implementation and is not included in the component. -Off(`undefined`) by default. +`false` by default. Props for the lock icon can be changed using the `lockIconProps` @@ -89,8 +99,8 @@ import { TagUrl } from '../../ui/component-library/tag-url'; showLockIcon />
{ - return ( - - - {showLockIcon && ( - - )} - - {label} - - {actionButtonLabel && ( - - {actionButtonLabel} - - )} - - ); -}; - -TagUrl.propTypes = { - /** - * The src accepts the string of the image to be rendered - */ - src: PropTypes.string, - /** - * The showLockIcon accepts a boolean prop to render the lock icon instead of https in label - */ - showLockIcon: PropTypes.bool, - /** - * It accepts all the props from Avatar Favicon - */ - avatarFaviconProps: PropTypes.object, - /** - * It accepts all the props from Icon - */ - lockIconProps: PropTypes.object, - /** - * The text content of the TagUrl component - */ - label: PropTypes.string.isRequired, - /** - * It accepts all the props from Text Component - */ - labelProps: PropTypes.object, - /** - * If we want a button in TagUrl component. - */ - actionButtonLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), - /** - * It accepts all the props from ButtonLink - */ - actionButtonProps: PropTypes.object, - /** - * Additional classNames to be added to the TagUrl component - */ - className: PropTypes.string, - /** - * TagUrl accepts all the props from Box - */ - ...Box.propTypes, -}; - -export default TagUrl; diff --git a/ui/components/component-library/tag-url/tag-url.stories.js b/ui/components/component-library/tag-url/tag-url.stories.tsx similarity index 64% rename from ui/components/component-library/tag-url/tag-url.stories.js rename to ui/components/component-library/tag-url/tag-url.stories.tsx index 488c446ca..aa8163281 100644 --- a/ui/components/component-library/tag-url/tag-url.stories.js +++ b/ui/components/component-library/tag-url/tag-url.stories.tsx @@ -1,16 +1,15 @@ import React from 'react'; +import { Meta, StoryFn } from '@storybook/react'; import { - DISPLAY, - FLEX_DIRECTION, + Display, + FlexDirection, } from '../../../helpers/constants/design-system'; - -import Box from '../../ui/box'; +import { Box } from '..'; import README from './README.mdx'; import { TagUrl } from './tag-url'; export default { title: 'Components/ComponentLibrary/TagUrl', - component: TagUrl, parameters: { docs: { @@ -36,7 +35,7 @@ export default { src: 'https://uniswap.org/favicon.ico', showLockIcon: true, }, -}; +} as Meta; const Template = (args) => ; @@ -47,8 +46,8 @@ DefaultStory.args = { actionButtonLabel: 'Permissions', }; -export const ActionButtonLabel = (args) => ( - +export const ActionButtonLabel: StoryFn = (args) => ( + @@ -57,10 +56,14 @@ export const ActionButtonLabel = (args) => ( ActionButtonLabel.args = { actionButtonLabel: 'Permissions', + actionButtonProps: { + externalLink: true, + href: 'https://metamask.io', + }, }; -export const ShowLockIcon = (args) => ( - +export const ShowLockIcon: StoryFn = (args) => ( + ( ); -export const Src = (args) => ( - +export const Src: StoryFn = (args) => ( + ( /> ( ); -export const Label = (args) => ( - +export const Label: StoryFn = (args) => ( + diff --git a/ui/components/component-library/tag-url/tag-url.test.js b/ui/components/component-library/tag-url/tag-url.test.tsx similarity index 100% rename from ui/components/component-library/tag-url/tag-url.test.js rename to ui/components/component-library/tag-url/tag-url.test.tsx diff --git a/ui/components/component-library/tag-url/tag-url.tsx b/ui/components/component-library/tag-url/tag-url.tsx new file mode 100644 index 000000000..15e3d3dbc --- /dev/null +++ b/ui/components/component-library/tag-url/tag-url.tsx @@ -0,0 +1,87 @@ +import React from 'react'; +import classnames from 'classnames'; +import { + AlignItems, + BackgroundColor, + BorderColor, + BorderRadius, + Display, + IconColor, + TextVariant, +} from '../../../helpers/constants/design-system'; +import { + AvatarFavicon, + ButtonLink, + Box, + IconName, + Icon, + IconSize, + Text, + ButtonLinkSize, +} from '..'; +import { BoxProps, PolymorphicRef } from '../box'; +import { TagUrlComponent, TagUrlProps } from './tag-url.types'; + +export const TagUrl: TagUrlComponent = React.forwardRef( + ( + { + label, + labelProps, + actionButtonLabel, + actionButtonProps, + src, + showLockIcon, + avatarFaviconProps, + lockIconProps, + className = '', + ...props + }: TagUrlProps, + ref?: PolymorphicRef, + ) => { + return ( + )} + > + + {showLockIcon && ( + + )} + + {label} + + {actionButtonLabel && ( + + {actionButtonLabel} + + )} + + ); + }, +); diff --git a/ui/components/component-library/tag-url/tag-url.types.ts b/ui/components/component-library/tag-url/tag-url.types.ts new file mode 100644 index 000000000..90bc173d9 --- /dev/null +++ b/ui/components/component-library/tag-url/tag-url.types.ts @@ -0,0 +1,55 @@ +import React from 'react'; +import type { + PolymorphicComponentPropWithRef, + StyleUtilityProps, +} from '../box'; +import { AvatarFaviconProps } from '../avatar-favicon'; +import { IconProps } from '../icon'; +import { TextProps } from '../text'; +import { ButtonLinkProps } from '../button-link'; + +export interface TagUrlStyleUtilityProps extends StyleUtilityProps { + /** + * The src accepts the string of the image to be rendered + */ + src?: string; + /** + * The showLockIcon accepts a boolean prop to render the lock icon instead of https in label + */ + showLockIcon?: boolean; + /** + * It accepts all the props from Avatar Favicon + */ + avatarFaviconProps?: AvatarFaviconProps<'span'>; + /** + * It accepts all the props from Icon + */ + lockIconProps?: IconProps<'span'>; + /** + * The text content of the TagUrl component + */ + label: string; + /** + * It accepts all the props from Text Component + */ + labelProps?: TextProps<'p'>; + /** + * If we want a button in TagUrl component. + */ + actionButtonLabel?: string | React.ReactNode; + /** + * It accepts all the props from ButtonLink + */ + actionButtonProps?: ButtonLinkProps<'button'>; + /** + * Additional classNames to be added to the TagUrl component + */ + className?: string; +} + +export type TagUrlProps = + PolymorphicComponentPropWithRef; + +export type TagUrlComponent = ( + props: TagUrlProps, +) => React.ReactElement | null; diff --git a/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap b/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap index 8a3e10304..81000b0b0 100644 --- a/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap +++ b/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap @@ -178,7 +178,7 @@ exports[`Confirm Signature Request Component render should match snapshot 1`] = class="signature-request__origin" >