Added Tag Component (#15947)

* updated tag component and stashed storyshot update

* updated styling for tags

* updated test component for tag

* updated tag styles as per figma

* updated borderRadius prop for tag

* removed unused import

* updated Tag component with labelProps

* updated README

* updated Typography with Tag

ui/components/component-library/component-library-components.scss

@@ -7,5 +7,6 @@
 @import 'button-primary/button-primary';
 @import 'button-secondary/button-secondary';
 @import 'icon/icon';
+@import 'tag/tag';
 @import 'text/text';
 @import 'text-field-base/text-field-base';

ui/components/component-library/tag/README.mdx

@@ -0,0 +1,21 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import { Tag } from './tag';
+
+# Tag
+
+The `Tag` is a component used to display text within a container.
+
+<Canvas>
+  <Story id="ui-components-component-library-tag-tag-stories-js--default-story" />
+</Canvas>
+
+## Props
+
+The `Tag` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props.
+
+<ArgsTable of={Tag} />
+
+### Label
+
+The text content of the `Tag` component

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

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

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Box from '../../ui/box/box';
+import { Text } from '../text';
+import {
+  ALIGN_ITEMS,
+  BORDER_RADIUS,
+  COLORS,
+  DISPLAY,
+  JUSTIFY_CONTENT,
+  TEXT,
+} from '../../../helpers/constants/design-system';
+
+export const Tag = ({ label, className, labelProps, ...props }) => {
+  return (
+    <Box
+      className={classnames('tag', className)}
+      backgroundColor={COLORS.BACKGROUND_DEFAULT}
+      borderColor={COLORS.BORDER_DEFAULT}
+      borderWidth={1}
+      justifyContent={JUSTIFY_CONTENT.CENTER}
+      alignItems={ALIGN_ITEMS.CENTER}
+      paddingLeft={1}
+      paddingRight={1}
+      borderRadius={BORDER_RADIUS.PILL}
+      display={DISPLAY.INLINE_BLOCK}
+      {...props}
+    >
+      <Text variant={TEXT.BODY_SM} {...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: Text.propTypes,
+  /**
+   * Additional classNames to be added to the Tag component
+   */
+  className: PropTypes.string,
+};

ui/components/component-library/tag/tag.scss

@@ -0,0 +1,6 @@
+.tag {
+  height: auto;
+  width: max-content;
+  padding-top: 1px;
+  padding-bottom: 1px;
+}

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import README from './README.mdx';
+import { Tag } from './tag';
+
+export default {
+  title: 'Components/ComponentLibrary/Tag',
+  id: __filename,
+  component: Tag,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+  },
+  args: {
+    label: 'Imported',
+  },
+};
+
+export const DefaultStory = (args) => <Tag {...args} />;
+
+DefaultStory.storyName = 'Default';

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

@@ -0,0 +1,13 @@
+/* eslint-disable jest/require-top-level-describe */
+import { render } from '@testing-library/react';
+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" />);
+    expect(getByTestId('tag')).toBeDefined();
+    expect(getByTestId('tag')).toHaveTextContent('Imported');
+  });
+});