From 512a463589f0d57ab3434c328f80463bd977d967 Mon Sep 17 00:00:00 2001
From: Erica Irving <erica.irving@washpost.com>
Date: Tue, 6 Jun 2017 11:28:28 -0400
Subject: [PATCH] add classnames to RespectButton component

---
 .../client/components/RespectButton.js               | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/plugins/coral-plugin-respect/client/components/RespectButton.js b/plugins/coral-plugin-respect/client/components/RespectButton.js
index 9bce367f4..58bb35e9c 100644
--- a/plugins/coral-plugin-respect/client/components/RespectButton.js
+++ b/plugins/coral-plugin-respect/client/components/RespectButton.js
@@ -7,6 +7,8 @@ import cn from 'classnames';
 
 import {getMyActionSummary, getTotalActionCount} from 'coral-framework/utils';
 
+const name = 'coral-plugin-respect';
+
 class RespectButton extends Component {
 
   handleClick = () => {
@@ -47,13 +49,13 @@ class RespectButton extends Component {
     let count = getTotalActionCount('RespectActionSummary', comment);
 
     return (
-      <div className={styles.respect}>
+      <div className={cn(styles.respect, `${name}-container`)}>
         <button
-          className={cn(styles.button, {[styles.respected]: myRespect})}
+          className={cn(styles.button, {[styles.respected]: myRespect}, `${name}-button`)}
           onClick={this.handleClick} >
-          <span>{t(myRespect ? 'respected' : 'respect')}</span>
-          <Icon className={cn(styles.icon, {[styles.respected]: myRespect})} />
-          {count > 0 && count}
+          <span className={`${name}-button-text`}>{t(myRespect ? 'respected' : 'respect')}</span>
+          <Icon className={cn(styles.icon, {[styles.respected]: myRespect}, `${name}-icon`)} />
+          <span className={`${name}-count`}>{count > 0 && count}</span>
         </button>
       </div>
     );