From edbc728014c7eca3a0327e8ae979d461d6f3f336 Mon Sep 17 00:00:00 2001
From: Dhruv <79097544+dhruvv173@users.noreply.github.com>
Date: Tue, 25 Jul 2023 02:12:10 +0530
Subject: [PATCH] Migrate component to TS: Tag (#20086)

* migrating Tag to TS
---------

Co-authored-by: Garrett Bear <gwhisten@gmail.com>
---
 .../tag/__snapshots__/tag.test.js.snap        | 16 ------
 .../tag/__snapshots__/tag.test.tsx.snap       | 16 ++++++
 ui/components/component-library/tag/index.js  |  1 -
 ui/components/component-library/tag/index.ts  |  2 +
 ui/components/component-library/tag/tag.js    | 55 -------------------
 .../tag/{tag.stories.js => tag.stories.tsx}   | 10 ++--
 .../tag/{tag.test.js => tag.test.tsx}         |  0
 ui/components/component-library/tag/tag.tsx   | 44 +++++++++++++++
 .../component-library/tag/tag.types.ts        | 27 +++++++++
 .../snap-account-detail-page.test.tsx.snap    |  6 +-
 .../snap-account-detail-page/header.tsx       |  6 +-
 11 files changed, 99 insertions(+), 84 deletions(-)
 delete mode 100644 ui/components/component-library/tag/__snapshots__/tag.test.js.snap
 create mode 100644 ui/components/component-library/tag/__snapshots__/tag.test.tsx.snap
 delete mode 100644 ui/components/component-library/tag/index.js
 create mode 100644 ui/components/component-library/tag/index.ts
 delete mode 100644 ui/components/component-library/tag/tag.js
 rename ui/components/component-library/tag/{tag.stories.js => tag.stories.tsx} (65%)
 rename ui/components/component-library/tag/{tag.test.js => tag.test.tsx} (100%)
 create mode 100644 ui/components/component-library/tag/tag.tsx
 create mode 100644 ui/components/component-library/tag/tag.types.ts

diff --git a/ui/components/component-library/tag/__snapshots__/tag.test.js.snap b/ui/components/component-library/tag/__snapshots__/tag.test.js.snap
deleted file mode 100644
index e0d709483..000000000
--- a/ui/components/component-library/tag/__snapshots__/tag.test.js.snap
+++ /dev/null
@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tag should render the label inside the tag and match snapshot 1`] = `
-<div>
-  <div
-    class="box mm-tag box--padding-right-1 box--padding-left-1 box--display-inline-block box--flex-direction-row box--justify-content-center 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"
-    data-testid="tag"
-  >
-    <p
-      class="mm-box mm-text mm-text--body-sm mm-box--color-text-default"
-    >
-      Imported
-    </p>
-  </div>
-</div>
-`;
diff --git a/ui/components/component-library/tag/__snapshots__/tag.test.tsx.snap b/ui/components/component-library/tag/__snapshots__/tag.test.tsx.snap
new file mode 100644
index 000000000..543be6c92
--- /dev/null
+++ b/ui/components/component-library/tag/__snapshots__/tag.test.tsx.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tag should render the label inside the tag and match snapshot 1`] = `
+<div>
+  <div
+    class="mm-box mm-tag mm-box--padding-right-1 mm-box--padding-left-1 mm-box--display-inline-block mm-box--justify-content-center 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"
+  >
+    <p
+      class="mm-box mm-text mm-text--body-sm mm-box--color-text-default"
+    >
+      Imported
+    </p>
+  </div>
+</div>
+`;
diff --git a/ui/components/component-library/tag/index.js b/ui/components/component-library/tag/index.js
deleted file mode 100644
index e533e2003..000000000
--- a/ui/components/component-library/tag/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { Tag } from './tag';
diff --git a/ui/components/component-library/tag/index.ts b/ui/components/component-library/tag/index.ts
new file mode 100644
index 000000000..262ac21d4
--- /dev/null
+++ b/ui/components/component-library/tag/index.ts
@@ -0,0 +1,2 @@
+export { Tag } from './tag';
+export type { TagProps } from './tag.types';
diff --git a/ui/components/component-library/tag/tag.js b/ui/components/component-library/tag/tag.js
deleted file mode 100644
index da927ba02..000000000
--- a/ui/components/component-library/tag/tag.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import {
-  AlignItems,
-  BackgroundColor,
-  BorderColor,
-  BorderRadius,
-  DISPLAY,
-  JustifyContent,
-  TextVariant,
-} from '../../../helpers/constants/design-system';
-import Box from '../../ui/box/box';
-import { Text } from '..';
-
-export const Tag = ({ label, className, labelProps, ...props }) => {
-  return (
-    <Box
-      className={classnames('mm-tag', className)}
-      backgroundColor={BackgroundColor.backgroundDefault}
-      borderColor={BorderColor.borderDefault}
-      borderWidth={1}
-      justifyContent={JustifyContent.center}
-      alignItems={AlignItems.center}
-      paddingLeft={1}
-      paddingRight={1}
-      borderRadius={BorderRadius.pill}
-      display={DISPLAY.INLINE_BLOCK}
-      {...props}
-    >
-      <Text variant={TextVariant.bodySm} {...labelProps}>
-        {label}
-      </Text>
-    </Box>
-  );
-};
-
-Tag.propTypes = {
-  /**
-   * The text content of the Tag component
-   */
-  label: PropTypes.string,
-  /**
-   * The label props of the component. Most Text component props can be used
-   */
-  labelProps: PropTypes.object,
-  /**
-   * Additional classNames to be added to the Tag component
-   */
-  className: PropTypes.string,
-  /**
-   * Tag also accepts all props from Box
-   */
-  ...Box.propTypes,
-};
diff --git a/ui/components/component-library/tag/tag.stories.js b/ui/components/component-library/tag/tag.stories.tsx
similarity index 65%
rename from ui/components/component-library/tag/tag.stories.js
rename to ui/components/component-library/tag/tag.stories.tsx
index 51c3604ef..7dae10a33 100644
--- a/ui/components/component-library/tag/tag.stories.js
+++ b/ui/components/component-library/tag/tag.stories.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import README from './README.mdx';
+import { StoryFn, Meta } from '@storybook/react';
 import { Tag } from './tag';
+import README from './README.mdx';
 
 export default {
   title: 'Components/ComponentLibrary/Tag',
-
   component: Tag,
   parameters: {
     docs: {
@@ -19,13 +19,13 @@ export default {
   args: {
     label: 'Imported',
   },
-};
+} as Meta<typeof Tag>;
 
-export const DefaultStory = (args) => <Tag {...args} />;
+export const DefaultStory: StoryFn<typeof Tag> = (args) => <Tag {...args} />;
 
 DefaultStory.storyName = 'Default';
 
-export const Label = (args) => <Tag {...args}>Anchor Element</Tag>;
+export const Label: StoryFn<typeof Tag> = (args) => <Tag {...args} />;
 
 Label.args = {
   label: 'Label Story',
diff --git a/ui/components/component-library/tag/tag.test.js b/ui/components/component-library/tag/tag.test.tsx
similarity index 100%
rename from ui/components/component-library/tag/tag.test.js
rename to ui/components/component-library/tag/tag.test.tsx
diff --git a/ui/components/component-library/tag/tag.tsx b/ui/components/component-library/tag/tag.tsx
new file mode 100644
index 000000000..4077889b7
--- /dev/null
+++ b/ui/components/component-library/tag/tag.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import classnames from 'classnames';
+import { Text, Box } from '..';
+import type { PolymorphicRef, BoxProps } from '../box';
+
+import {
+  AlignItems,
+  BackgroundColor,
+  BorderColor,
+  BorderRadius,
+  Display,
+  JustifyContent,
+  TextVariant,
+} from '../../../helpers/constants/design-system';
+
+import { TagComponent, TagProps } from './tag.types';
+
+export const Tag: TagComponent = React.forwardRef(
+  <C extends React.ElementType = 'div'>(
+    { label, className = '', labelProps, ...props }: TagProps<C>,
+    ref: PolymorphicRef<C>,
+  ) => {
+    return (
+      <Box
+        ref={ref}
+        className={classnames('mm-tag', className)}
+        backgroundColor={BackgroundColor.backgroundDefault}
+        borderColor={BorderColor.borderDefault}
+        borderWidth={1}
+        justifyContent={JustifyContent.center}
+        alignItems={AlignItems.center}
+        paddingLeft={1}
+        paddingRight={1}
+        borderRadius={BorderRadius.pill}
+        display={Display.InlineBlock}
+        {...(props as BoxProps<C>)}
+      >
+        <Text variant={TextVariant.bodySm} {...labelProps}>
+          {label}
+        </Text>
+      </Box>
+    );
+  },
+);
diff --git a/ui/components/component-library/tag/tag.types.ts b/ui/components/component-library/tag/tag.types.ts
new file mode 100644
index 000000000..ca2d748b4
--- /dev/null
+++ b/ui/components/component-library/tag/tag.types.ts
@@ -0,0 +1,27 @@
+import { TextProps, ValidTagType } from '../text/text.types';
+import type {
+  StyleUtilityProps,
+  PolymorphicComponentPropWithRef,
+} from '../box';
+
+export interface TagStyleUtilityProps extends StyleUtilityProps {
+  /**
+   * The text content of the Tag component, can either be a string or ReactNode
+   */
+  label?: string | React.ReactNode;
+  /**
+   * The label props of the component. Most Text component props can be used
+   */
+  labelProps?: TextProps<ValidTagType>;
+  /**
+   * Additional classNames to be added to the Tag component
+   */
+  className?: string;
+}
+
+export type TagProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, TagStyleUtilityProps>;
+
+export type TagComponent = <C extends React.ElementType = 'div'>(
+  props: TagProps<C>,
+) => React.ReactElement | null;
diff --git a/ui/pages/keyring-snaps/snap-account-detail-page/__snapshots__/snap-account-detail-page.test.tsx.snap b/ui/pages/keyring-snaps/snap-account-detail-page/__snapshots__/snap-account-detail-page.test.tsx.snap
index 2cf92a640..3aa813a67 100644
--- a/ui/pages/keyring-snaps/snap-account-detail-page/__snapshots__/snap-account-detail-page.test.tsx.snap
+++ b/ui/pages/keyring-snaps/snap-account-detail-page/__snapshots__/snap-account-detail-page.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
           />
         </div>
         <div
-          class="box mm-tag box--margin-right-1 box--padding-right-1 box--padding-left-1 box--display-inline-block box--flex-direction-row box--justify-content-center box--align-items-center box--color-info-default box--background-color-info-muted box--rounded-pill box--border-color-info-muted box--border-width-1 box--border-style-solid"
+          class="mm-box mm-tag mm-box--margin-right-1 mm-box--padding-right-1 mm-box--padding-left-1 mm-box--display-inline-block mm-box--justify-content-center mm-box--align-items-center mm-box--color-info-default mm-box--background-color-info-muted mm-box--rounded-pill mm-box--border-color-info-muted mm-box--border-width-1 box--border-style-solid"
         >
           <p
             class="mm-box mm-text mm-text--body-sm mm-box--color-info-default"
@@ -83,7 +83,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
           </p>
         </div>
         <div
-          class="box mm-tag box--padding-right-1 box--padding-left-1 box--display-inline-block box--flex-direction-row box--justify-content-center box--align-items-center box--color-info-default box--background-color-info-muted box--rounded-pill box--border-color-info-muted box--border-width-1 box--border-style-solid"
+          class="mm-box mm-tag mm-box--padding-right-1 mm-box--padding-left-1 mm-box--display-inline-block mm-box--justify-content-center mm-box--align-items-center mm-box--color-info-default mm-box--background-color-info-muted mm-box--rounded-pill mm-box--border-color-info-muted mm-box--border-width-1 box--border-style-solid"
         >
           <p
             class="mm-box mm-text mm-text--body-sm mm-box--color-info-default"
@@ -135,7 +135,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = `
             Tags
           </p>
           <div
-            class="box mm-tag box--margin-right-1 box--padding-right-1 box--padding-left-1 box--display-inline-block box--flex-direction-row box--justify-content-center 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 mm-box--margin-right-1 mm-box--padding-right-1 mm-box--padding-left-1 mm-box--display-inline-block mm-box--justify-content-center 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"
           >
             <p
               class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
diff --git a/ui/pages/keyring-snaps/snap-account-detail-page/header.tsx b/ui/pages/keyring-snaps/snap-account-detail-page/header.tsx
index ff44b01d4..0a8f39155 100644
--- a/ui/pages/keyring-snaps/snap-account-detail-page/header.tsx
+++ b/ui/pages/keyring-snaps/snap-account-detail-page/header.tsx
@@ -85,8 +85,6 @@ export const SnapDetailHeader = ({
                 labelProps={{
                   color: TextColor.textAlternative,
                 }}
-                className=""
-                height={2}
               />
             )}
           </Box>
@@ -152,7 +150,7 @@ export const SnapDetailHeader = ({
             <Tag
               color={TextColor.infoDefault}
               backgroundColor={BackgroundColor.infoMuted}
-              borderColor={BackgroundColor.infoMuted}
+              borderColor={BorderColor.infoMuted}
               label={
                 <Box
                   display={Display.Flex}
@@ -180,7 +178,7 @@ export const SnapDetailHeader = ({
               className=""
               color={TextColor.infoDefault}
               backgroundColor={BackgroundColor.infoMuted}
-              borderColor={BackgroundColor.infoMuted}
+              borderColor={BorderColor.infoMuted}
               label={
                 <Box
                   display={Display.Flex}