From 58da1d80750d41c6dc74d636136b672f097cd51b Mon Sep 17 00:00:00 2001
From: Nidhi Kumari <nidhi.kumari@consensys.net>
Date: Fri, 4 Nov 2022 01:48:16 +0530
Subject: [PATCH] tag component housekeeping (#16355)

* tag component housekeeping

* added snapshot testing
---
 ui/components/component-library/tag/README.mdx   |  4 ++++
 .../tag/__snapshots__/tag.test.js.snap           | 16 ++++++++++++++++
 ui/components/component-library/tag/tag.js       |  6 +++++-
 ui/components/component-library/tag/tag.scss     |  2 +-
 .../component-library/tag/tag.stories.js         |  6 ++++++
 ui/components/component-library/tag/tag.test.js  |  7 +++++--
 6 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 ui/components/component-library/tag/__snapshots__/tag.test.js.snap

diff --git a/ui/components/component-library/tag/README.mdx b/ui/components/component-library/tag/README.mdx
index 6d85e9e73..8892612c8 100644
--- a/ui/components/component-library/tag/README.mdx
+++ b/ui/components/component-library/tag/README.mdx
@@ -19,3 +19,7 @@ The `Tag` accepts all props below as well as all [Box](/docs/ui-components-ui-bo
 ### Label
 
 The text content of the `Tag` component
+
+<Canvas>
+  <Story id="ui-components-component-library-tag-tag-stories-js--label" />
+</Canvas>
\ No newline at end of file
diff --git a/ui/components/component-library/tag/__snapshots__/tag.test.js.snap b/ui/components/component-library/tag/__snapshots__/tag.test.js.snap
new file mode 100644
index 000000000..1cb53b117
--- /dev/null
+++ b/ui/components/component-library/tag/__snapshots__/tag.test.js.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="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="box text text--body-sm text--color-text-default box--flex-direction-row"
+    >
+      Imported
+    </p>
+  </div>
+</div>
+`;
diff --git a/ui/components/component-library/tag/tag.js b/ui/components/component-library/tag/tag.js
index 9836c5649..5bdf52622 100644
--- a/ui/components/component-library/tag/tag.js
+++ b/ui/components/component-library/tag/tag.js
@@ -15,7 +15,7 @@ import {
 export const Tag = ({ label, className, labelProps, ...props }) => {
   return (
     <Box
-      className={classnames('tag', className)}
+      className={classnames('mm-tag', className)}
       backgroundColor={COLORS.BACKGROUND_DEFAULT}
       borderColor={COLORS.BORDER_DEFAULT}
       borderWidth={1}
@@ -47,4 +47,8 @@ Tag.propTypes = {
    * 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.scss b/ui/components/component-library/tag/tag.scss
index 1a98cdf71..77620796c 100644
--- a/ui/components/component-library/tag/tag.scss
+++ b/ui/components/component-library/tag/tag.scss
@@ -1,4 +1,4 @@
-.tag {
+.mm-tag {
   height: auto;
   width: max-content;
   padding-top: 1px;
diff --git a/ui/components/component-library/tag/tag.stories.js b/ui/components/component-library/tag/tag.stories.js
index eb2d6c595..fc41e4d17 100644
--- a/ui/components/component-library/tag/tag.stories.js
+++ b/ui/components/component-library/tag/tag.stories.js
@@ -24,3 +24,9 @@ export default {
 export const DefaultStory = (args) => <Tag {...args} />;
 
 DefaultStory.storyName = 'Default';
+
+export const Label = (args) => <Tag {...args}>Anchor Element</Tag>;
+
+Label.args = {
+  label: 'Label Story',
+};
diff --git a/ui/components/component-library/tag/tag.test.js b/ui/components/component-library/tag/tag.test.js
index c4ed72186..dd5000ebc 100644
--- a/ui/components/component-library/tag/tag.test.js
+++ b/ui/components/component-library/tag/tag.test.js
@@ -5,9 +5,12 @@ import React from 'react';
 import { Tag } from './tag';
 
 describe('Tag', () => {
-  it('should render the label inside the tag', () => {
-    const { getByTestId } = render(<Tag data-testid="tag" label="Imported" />);
+  it('should render the label inside the tag and match snapshot', () => {
+    const { getByTestId, container } = render(
+      <Tag data-testid="tag" label="Imported" />,
+    );
     expect(getByTestId('tag')).toBeDefined();
     expect(getByTestId('tag')).toHaveTextContent('Imported');
+    expect(container).toMatchSnapshot();
   });
 });