Adding Tag Component

packages/react-components/source/index.js

@@ -29,6 +29,7 @@ import Breadcrumb from './react/library/breadcrumb';
 import ConfirmationModal from './react/library/confirmation-modal';
 import Code from './react/library/code';
 import RadioButton from './react/library/radiobutton';
+import Tag from './react/library/tag';
 
 export {
   ActionSelect,
@@ -59,4 +60,5 @@ export {
   ConfirmationModal,
   Code,
   RadioButton,
+  Tag,
 };

packages/react-components/source/react/library/tag/Tag.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { func, string } from 'prop-types';
+import Button from '../button';
+import Text from '../text';
+
+const propTypes = {
+  /** Tag text or other content */
+  label: string.isRequired,
+  /** Callback function called when clode icon is clicked */
+  onClick: func,
+};
+
+const defaultProps = {
+  onClick: () => {},
+};
+
+const Tag = ({ label, onClick }) => {
+  return (
+    <div className="rc-tag">
+      <div className="rc-tag-label-background">
+        <Text className="rc-tag-text">{label}</Text>
+      </div>
+      <Button
+        className="rc-tag-remove-button"
+        onClick={() => onClick()}
+        icon="close"
+        aria-label={`${label} Remove tag`}
+      />
+    </div>
+  );
+};
+
+Tag.propTypes = propTypes;
+Tag.defaultProps = defaultProps;
+
+export default Tag;

packages/react-components/source/react/library/tag/Tag.md

@@ -0,0 +1,24 @@
+## Overview
+
+The `Tag` component was designed and developed to be used primarily alongside the data grid filtering feature, as a clear indication of what filters are actively applied. However the component itself may have further usecases. The `Tag` component has been built on top of the `Button` component in order to make sure it inherit's all its accessability features.
+
+## Basic Use
+
+All text can be passed to the `Tag` as a child, a callback function can be passed to the onClick prop to catch a users interactions.
+
+```jsx
+const onTagClick = () => {
+  console.log('The X was clicked');
+};
+
+<div>
+  <div>
+    <Tag label="Tag label" onClick={onTagClick}/>
+  </div>
+</div>;
+```
+
+## Related
+
+- [Badge](#/React%20Components/Badge)
+- [Button](#/React%20Components/Button)

packages/react-components/source/react/library/tag/index.js

@@ -0,0 +1,3 @@
+import Tag from './Tag';
+
+export default Tag;

packages/react-components/source/scss/library/components/_tag.scss

@@ -0,0 +1,24 @@
+.rc-tag {
+  background: $puppet-b500;
+  border-radius: $puppet-common-border-radius;
+  display: flex;
+  width: max-content;
+
+  .rc-icon {
+    height: 12px !important;
+    width: 12px !important;
+  }
+}
+
+.rc-tag-label-background {
+  align-items: center;
+  display: flex;
+
+  .rc-tag-text {
+    @include puppet-type-button();
+    color: $puppet-white;
+    height: fit-content;
+    padding-left: 15px;
+    padding-right: 4px;
+  }
+}

packages/react-components/source/scss/library/ui.scss

@@ -30,3 +30,4 @@
 @import 'components/breadcrumb';
 @import 'components/code';
 @import 'components/radiobutton';
+@import 'components/tag';

packages/react-components/test/tag/tag.js

@@ -0,0 +1,32 @@
+import jsdom from 'mocha-jsdom';
+import { shallow, mount } from 'enzyme';
+import { expect } from 'chai';
+import sinon from 'sinon';
+import React from 'react';
+
+import Tag from '../../source/react/library/tag/Tag';
+
+describe('<Tag />', () => {
+  jsdom({ skipWindowCheck: true });
+
+  it('should render without blowing up', () => {
+    shallow(<Tag label="Text" />);
+  });
+
+  it('should display the correct label text', () => {
+    expect(
+      shallow(<Tag label="Text" />)
+        .find('Text.rc-tag-text')
+        .text(),
+    ).to.have.string('Text');
+  });
+
+  it('should call onClick function when close button is clicked', () => {
+    const onClick = sinon.spy();
+    const wrapper2 = mount(<Tag label="Text" onClick={onClick} />);
+
+    wrapper2.find('button').simulate('click');
+
+    expect(onClick.called).to.equal(true);
+  });
+});