FAD-5393 Add Tag component

6 files changed, 79 insertions, 0 deletions

diff --git a/src/components/Tag/Tag.js b/src/components/Tag/Tag.js
new file mode 100644
index 0000000..1fcd8e2
--- /dev/null
+++ b/src/components/Tag/Tag.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from '../Icon';
+import { UnstyledLink } from '../UnstyledLink';
+
+import styles from './Tag.module.scss';
+
+class Tag extends Component {
+  static propTypes = {
+    onRemove: PropTypes.func,
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.node),
+      PropTypes.node
+    ]),
+  };
+
+  render() {
+    const { children, onRemove } = this.props;
+
+    return (
+      <div className={styles.Tag}>
+        <div className={styles.Content}>{ children }</div>
+        <UnstyledLink
+          className={styles.Close}
+          onClick={onRemove}>
+          <Icon name='Close'/>
+        </UnstyledLink>
+      </div>
+    )
+  }
+}
+
+
+export default Tag;
diff --git a/src/components/Tag/Tag.module.scss b/src/components/Tag/Tag.module.scss
new file mode 100644
index 0000000..a44ae19
--- /dev/null
+++ b/src/components/Tag/Tag.module.scss
@@ -0,0 +1,27 @@
+@import '../../styles/config';
+
+.Tag {
+  display: inline-block;
+}
+
+.Content {
+  display: inline-block;
+  padding: 0 spacing(small);
+  border-radius: border-radius(large) 0 0 border-radius(large);
+  background: color(gray, 8);
+}
+
+.Close, a.Close {
+  display: inline-block;
+  padding: 0 spacing(small);
+  border-radius: 0 border-radius(large) border-radius(large) 0;
+  background: color(gray, 8);
+
+  color: color(gray, 4);
+  transition: 0.15s;
+
+  &:hover, &:active {
+    color: color(gray, 1);
+    background: color(gray, 7);
+  }
+}
diff --git a/src/components/Tag/index.js b/src/components/Tag/index.js
new file mode 100644
index 0000000..03a21a6
--- /dev/null
+++ b/src/components/Tag/index.js
@@ -0,0 +1 @@
+export { default as Tag } from './Tag';
diff --git a/src/components/index.js b/src/components/index.js
index 5900e98..ba7dacc 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -15,6 +15,7 @@ export * from './Radio';
 export * from './Select';
 export * from './Table';
 export * from './Tabs';
+export * from './Tag';
 export * from './TextField';
 export * from './Toggle';
 export * from './Tooltip';
diff --git a/stories/Tag.js b/stories/Tag.js
new file mode 100644
index 0000000..b393532
--- /dev/null
+++ b/stories/Tag.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { StoryContainer } from './helpers';
+
+import { Tag } from '../src';
+
+storiesOf('Tag', module)
+  .addDecorator((getStory) => (
+    <StoryContainer>{ getStory() }</StoryContainer>
+  ))
+  .addWithInfo('Default',
+  () => (
+    <Tag onRemove={action('Tag Remove')}>domain.com</Tag>
+  ));
diff --git a/stories/index.js b/stories/index.js
index 9f36314..4378846 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -16,6 +16,7 @@ import './Tooltip';
 import './Popover';
 import './ActionList';
 import './Table';
+import './Tag';
 import './Modal';
 import './Icons';
 import './Grid';