fix/TagUrl to TS (#20519)

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"
       >
         <div
-          class="box mm-tag-url box--padding-right-4 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--align-items-center box--background-color-background-default box--rounded-pill box--border-color-border-default box--border-width-1 box--border-style-solid"
+          class="mm-box mm-tag-url mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-pill mm-box--border-color-border-default mm-box--border-width-1 box--border-style-solid"
         >
           <div
             class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
@@ -954,7 +954,7 @@ exports[`Signature Request Component render should match snapshot when we want t
         class="signature-request__origin"
       >
         <div
-          class="box mm-tag-url box--padding-right-4 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--align-items-center box--background-color-background-default box--rounded-pill box--border-color-border-default box--border-width-1 box--border-style-solid"
+          class="mm-box mm-tag-url mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-pill mm-box--border-color-border-default mm-box--border-width-1 box--border-style-solid"
         >
           <div
             class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"

ui/components/component-library/avatar-favicon/avatar-favicon.test.tsx

@@ -99,7 +99,6 @@ describe('AvatarFavicon', () => {
     const { getByTestId } = render(
       <AvatarFavicon
         className="mm-avatar-favicon--test"
-        name="test"
         data-testid="classname"
         {...args}
       />,
@@ -108,7 +107,7 @@ describe('AvatarFavicon', () => {
   });
   it('should forward a ref to the root html element', () => {
     const ref = React.createRef();
-    render(<AvatarFavicon name="test" ref={ref} />);
+    render(<AvatarFavicon ref={ref} />);
     expect(ref.current).not.toBeNull();
     expect(ref.current.nodeName).toBe('DIV');
   });

ui/components/component-library/avatar-favicon/avatar-favicon.types.ts

@@ -12,7 +12,7 @@ export enum AvatarFaviconSize {
 }
 
 export interface AvatarFaviconStyleUtilityProps
-  extends Omit<AvatarBaseStyleUtilityProps, 'size'> {
+  extends Omit<AvatarBaseStyleUtilityProps, 'size' | 'children'> {
   /**
    * The src accepts the string of the image to be rendered
    */

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.
-
 <ArgsTable of={TagUrl} />
 
 ### 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`.
 
 <Canvas>
   <Story id="components-componentlibrary-tagurl--action-button-label" />
@@ -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',
+  }}
 />
 <TagUrl
   label="app.uniswap.org"
   src="https://uniswap.org/favicon.ico"
   showLockIcon
   actionButtonLabel="Action"
+  actionButtonProps={{
+    externalLink: true,
+    href: 'https://metamask.io',
+  }}
 />
 <TagUrl
   label="app.uniswap.org"
   src="https://uniswap.org/favicon.ico"
   showLockIcon
   actionButtonLabel="Click"
+  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
 />
 <TagUrl
-  src="https://peepeth.com/favicon-32x32.png"
+  src="https://metamask.github.io/test-dapp/metamask-fox.svg"
-  label="peepeth.com"
+  label="metamask.github.io"
   showLockIcon
 />
 <TagUrl
@@ -120,9 +130,9 @@ import { TagUrl } from '../../ui/component-library/tag-url';
   label="app.uniswap.org"
 />
 <TagUrl
-  src="https://metamask.io/icons/icon-48x48.png?v=48400a28770e10dd52a8c0e539aeb282"
+  src="https://metamask.github.io/test-dapp/metamask-fox.svg"
   showLockIcon
-  label="metamask.io"
+  label="metamask.github.io"
 />
 <TagUrl
   src=""

ui/components/component-library/tag-url/__snapshots__/tag-url.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`TagUrl should render the label inside the TagUrl 1`] = `
 <div>
   <div
-    class="box mm-tag-url box--padding-right-4 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--align-items-center box--background-color-background-default box--rounded-pill box--border-color-border-default box--border-width-1 box--border-style-solid"
+    class="mm-box mm-tag-url mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-pill mm-box--border-color-border-default mm-box--border-width-1 box--border-style-solid"
     data-testid="tag-url"
   >
     <div

ui/components/component-library/tag-url/index.js

@@ -1 +0,0 @@
-export { TagUrl } from './tag-url';

ui/components/component-library/tag-url/index.ts

@@ -0,0 +1,2 @@
+export { TagUrl } from './tag-url';
+export type { TagUrlProps } from './tag-url.types';

ui/components/component-library/tag-url/tag-url.js

@@ -1,118 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import {
-  AlignItems,
-  BackgroundColor,
-  BorderColor,
-  BorderRadius,
-  DISPLAY,
-  IconColor,
-  Size,
-  TextVariant,
-} from '../../../helpers/constants/design-system';
-import Box from '../../ui/box/box';
-import { AvatarFavicon, ButtonLink, IconName, Icon, IconSize, Text } from '..';
-
-export const TagUrl = ({
-  label,
-  labelProps,
-  actionButtonLabel,
-  actionButtonProps,
-  src,
-  showLockIcon,
-  avatarFaviconProps,
-  lockIconProps,
-  className,
-  ...props
-}) => {
-  return (
-    <Box
-      className={classnames('mm-tag-url', className)}
-      backgroundColor={BackgroundColor.backgroundDefault}
-      borderColor={BorderColor.borderDefault}
-      borderWidth={1}
-      alignItems={AlignItems.center}
-      paddingLeft={2}
-      paddingRight={4}
-      gap={2}
-      borderRadius={BorderRadius.pill}
-      display={DISPLAY.FLEX}
-      {...props}
-    >
-      <AvatarFavicon src={src} name={label} {...avatarFaviconProps} />
-      {showLockIcon && (
-        <Icon
-          className="mm-tag-url__lock-icon"
-          name={IconName.Lock}
-          color={IconColor.iconAlternative}
-          size={IconSize.Sm}
-          aria-label="https://"
-          role="img"
-          {...lockIconProps}
-        />
-      )}
-      <Text variant={TextVariant.bodyMd} ellipsis {...labelProps}>
-        {label}
-      </Text>
-      {actionButtonLabel && (
-        <ButtonLink
-          as="a"
-          size={Size.SM}
-          paddingLeft={0}
-          paddingRight={0}
-          marginLeft={2}
-          marginRight={2}
-          {...actionButtonProps}
-        >
-          {actionButtonLabel}
-        </ButtonLink>
-      )}
-    </Box>
-  );
-};
-
-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;

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,
+  Display,
-  FLEX_DIRECTION,
+  FlexDirection,
 } from '../../../helpers/constants/design-system';
-
+import { Box } from '..';
-import Box from '../../ui/box';
 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<typeof TagUrl>;
 
 const Template = (args) => <TagUrl {...args} />;
 
@@ -47,8 +46,8 @@ DefaultStory.args = {
   actionButtonLabel: 'Permissions',
 };
 
-export const ActionButtonLabel = (args) => (
+export const ActionButtonLabel: StoryFn<typeof TagUrl> = (args) => (
-  <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
+  <Box display={Display.Flex} flexDirection={FlexDirection.Column} gap={2}>
     <TagUrl {...args} />
     <TagUrl {...args} actionButtonLabel="Action" />
     <TagUrl {...args} actionButtonLabel="Click" />
@@ -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<typeof TagUrl> = (args) => (
-  <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
+  <Box display={Display.Flex} flexDirection={FlexDirection.Column} gap={2}>
     <TagUrl
       {...args}
       label="app.uniswap.org"
@@ -76,8 +79,8 @@ export const ShowLockIcon = (args) => (
   </Box>
 );
 
-export const Src = (args) => (
+export const Src: StoryFn<typeof TagUrl> = (args) => (
-  <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
+  <Box display={Display.Flex} flexDirection={FlexDirection.Column} gap={2}>
     <TagUrl
       {...args}
       label="app.uniswap.org"
@@ -85,8 +88,8 @@ export const Src = (args) => (
     />
     <TagUrl
       {...args}
-      label="peepeth.com"
+      label="metamask.github.io"
-      src="https://peepeth.com/favicon-32x32.png"
+      src="https://metamask.github.io/test-dapp/metamask-fox.svg"
     />
     <TagUrl
       {...args}
@@ -97,13 +100,13 @@ export const Src = (args) => (
   </Box>
 );
 
-export const Label = (args) => (
+export const Label: StoryFn<typeof TagUrl> = (args) => (
-  <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
+  <Box display={Display.Flex} flexDirection={FlexDirection.Column} gap={2}>
     <TagUrl {...args} />
     <TagUrl
       {...args}
-      src="https://metamask.io/icons/icon-48x48.png?v=48400a28770e10dd52a8c0e539aeb282"
+      label="metamask.github.io"
-      label="metamask.io"
+      src="https://metamask.github.io/test-dapp/metamask-fox.svg"
     />
     <TagUrl {...args} src="" label="metamask.github.io" />
   </Box>

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(
+  <C extends React.ElementType = 'div'>(
+    {
+      label,
+      labelProps,
+      actionButtonLabel,
+      actionButtonProps,
+      src,
+      showLockIcon,
+      avatarFaviconProps,
+      lockIconProps,
+      className = '',
+      ...props
+    }: TagUrlProps<C>,
+    ref?: PolymorphicRef<C>,
+  ) => {
+    return (
+      <Box
+        className={classnames('mm-tag-url', className)}
+        ref={ref}
+        backgroundColor={BackgroundColor.backgroundDefault}
+        borderColor={BorderColor.borderDefault}
+        borderWidth={1}
+        alignItems={AlignItems.center}
+        paddingLeft={2}
+        paddingRight={4}
+        gap={2}
+        borderRadius={BorderRadius.pill}
+        display={Display.Flex}
+        {...(props as BoxProps<C>)}
+      >
+        <AvatarFavicon src={src} name={label} {...avatarFaviconProps} />
+        {showLockIcon && (
+          <Icon
+            className="mm-tag-url__lock-icon"
+            name={IconName.Lock}
+            color={IconColor.iconAlternative}
+            size={IconSize.Sm}
+            aria-label="https://"
+            role="img"
+            {...lockIconProps}
+          />
+        )}
+        <Text variant={TextVariant.bodyMd} ellipsis {...labelProps}>
+          {label}
+        </Text>
+        {actionButtonLabel && (
+          <ButtonLink
+            as="a"
+            size={ButtonLinkSize.Sm}
+            paddingLeft={0}
+            paddingRight={0}
+            marginLeft={2}
+            marginRight={2}
+            {...actionButtonProps}
+          >
+            {actionButtonLabel}
+          </ButtonLink>
+        )}
+      </Box>
+    );
+  },
+);

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<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, TagUrlStyleUtilityProps>;
+
+export type TagUrlComponent = <C extends React.ElementType = 'div'>(
+  props: TagUrlProps<C>,
+) => React.ReactElement | null;

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"
       >
         <div
-          class="box mm-tag-url box--padding-right-4 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--align-items-center box--background-color-background-default box--rounded-pill box--border-color-border-default box--border-width-1 box--border-style-solid"
+          class="mm-box mm-tag-url mm-box--padding-right-4 mm-box--padding-left-2 mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-pill mm-box--border-color-border-default mm-box--border-width-1 box--border-style-solid"
         >
           <div
             class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"