Update Tag properties

playground/examples/TagExample.jsx

@@ -7,26 +7,25 @@ import {
 class TagExample extends React.Component {
   constructor(props) {
     super(props);
-    this.handleClick = this.handleClick.bind(this);
-    this.handleRemove = this.handleRemove.bind(this);
+    this.state = { open: true };
+    this.handleToggle = this.handleToggle.bind(this);
   }
 
   // eslint-disable-next-line
-  handleClick() {
-  }
-
-  // eslint-disable-next-line
-  handleRemove() {
+  handleToggle() {
+    this.setState(prevState => ({ open: !prevState.open }));
   }
 
   render() {
+    const { open } = this.state;
+
     return (
       <Container style={{ marginBottom: '50px', marginTop: '50px' }}>
         <h1>Tag</h1>
         <div>
-          <Tag icon="https://picsum.photos/200/200/?image=1" onClick={this.handleClick}>Stockholm</Tag>
-          <Tag onClick={this.handleClick} onClose={this.handleRemove}>Stockholm, Sweden</Tag>
-          <Tag onClose={this.handleToggle}>Stockholm, Sweden</Tag>
+          <Tag icon="https://picsum.photos/200/200/?image=1">Stockholm</Tag>
+          <Tag>Stockholm, Sweden</Tag>
+          <Tag onToggle={this.handleToggle} open={open}>Stockholm, Sweden</Tag>
         </div>
       </Container>
     );

src/components/Tag/README.md

@@ -4,17 +4,22 @@
 const Example extends React.Component {
   constructor(props) {
     super(props);
-    this.handleClose = this.handleClose.bind(this);
+    this.state = { open: true };
+    this.handleToggle = this.handleToggle.bind(this);
   }
 
-  handleClose(e) {
+  handleToggle(e) {
+    this.setState(prevState => ({ open: !prevState.open }));
   }
 
   render() {
+    const { open } = this.state;
+
     return (
       <Tag
         icon="https://picsum.photos/200/200/?image=1"
-        onClose={this.handleClose}
+        onToggle={this.handleToggle}
+        open={open}
       >Stockholm
       </Follow>
     );

src/components/Tag/Tag.css

@@ -28,11 +28,6 @@
   margin-left: 2.5px;
 }
 
-.tag-button:hover {
-  cursor: pointer;
-  color: var(--day, blue);
-}
-
 .tag-icon {
   display: block;
   margin-left: -10px;

src/components/Tag/Tag.jsx

@@ -15,50 +15,31 @@ const propTypes = {
     'secondary',
   ]),
   icon: PropTypes.string,
-  onClick: PropTypes.func,
-  onClose: PropTypes.func,
+  onToggle: PropTypes.func,
+  open: PropTypes.bool,
 };
 
 const defaultProps = {
   children: undefined,
   className: undefined,
   color: 'secondary',
   icon: undefined,
-  onClick: undefined,
-  onClose: undefined,
+  onToggle: undefined,
+  open: true,
 };
 
 class Tag extends React.Component {
   constructor(props) {
     super(props);
-    this.handleClick = this.handleClick.bind(this);
-    this.handleClose = this.handleClose.bind(this);
-    this.handleKeyUp = this.handleKeyUp.bind(this);
+    this.handleToggle = this.handleToggle.bind(this);
   }
 
-  handleClick(e) {
-    const { onClick } = this.props;
-    if (!onClick) {
+  handleToggle(e) {
+    const { onToggle } = this.props;
+    if (!onToggle) {
       return;
     }
-
-    onClick(e);
-  }
-
-  handleClose(e) {
-    e.stopPropagation();
-
-    const { onClose } = this.props;
-    if (!onClose) {
-      return;
-    }
-    onClose(e);
-  }
-
-  handleKeyUp(e) {
-    if (e.keyCode === 13) {
-      this.handleClick(e);
-    }
+    onToggle(e);
   }
 
   render() {
@@ -67,25 +48,23 @@ class Tag extends React.Component {
       className,
       color,
       icon,
-      onClick,
-      onClose,
+      onToggle,
+      open,
+      ...other
     } = this.props;
 
+    if (!open) {
+      return null;
+    }
+
     const classes = classNames(
       className,
       styles.tag,
       styles[`tag-${color}`],
-      onClick ? styles['tag-button'] : undefined,
     );
 
     return (
-      <span
-        className={classes}
-        onClick={this.handleClick}
-        onKeyUp={this.handleKeyUp}
-        role="button"
-        tabIndex={0}
-      >
+      <span {...other} className={classes}>
         {icon && (
           <img
             alt=""
@@ -96,10 +75,10 @@ class Tag extends React.Component {
         <span className={styles['tag-text']}>
           {children}
         </span>
-        {onClose && (
+        {onToggle && (
           <button
             className={styles.close}
-            onClick={this.handleClose}
+            onClick={this.handleToggle}
             type="button"
           />
         )}