From 7d54fb60a87d9de2f9ad9d81ecb753005df0eb91 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Mon, 5 Jun 2017 15:57:34 -0600
Subject: [PATCH] use existing className attr instead of custom property

---
 client/coral-embed-stream/src/components/Embed.js | 10 +++++-----
 client/coral-ui/components/Tab.js                 |  5 ++---
 client/coral-ui/components/TabBar.js              |  4 ++--
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Embed.js b/client/coral-embed-stream/src/components/Embed.js
index a85a35f3f..43b045500 100644
--- a/client/coral-embed-stream/src/components/Embed.js
+++ b/client/coral-embed-stream/src/components/Embed.js
@@ -10,7 +10,7 @@ import ProfileContainer from 'coral-settings/containers/ProfileContainer';
 import ConfigureStreamContainer
   from 'coral-configure/containers/ConfigureStreamContainer';
 
-export default class Embed extends React.Component { 
+export default class Embed extends React.Component {
   changeTab = (tab) => {
     switch (tab) {
     case 0:
@@ -41,10 +41,10 @@ export default class Embed extends React.Component {
     return (
       <div>
         <div className="commentStream">
-          <TabBar onChange={this.changeTab} activeTab={activeTab}>
-            <Tab cNames={'comment-count'}><Count count={totalCommentCount} /></Tab>
-            <Tab cNames={'comment-profile'}>{t('framework.my_profile')}</Tab>
-            <Tab cNames={'comment-configuration'} restricted={!can(user, 'UPDATE_CONFIG')}>{t('framework.configure_stream')}</Tab>
+          <TabBar onChange={this.changeTab} activeTab={activeTab} className='talk-embed-tabbar'>
+            <Tab className={'talk-embed-comment-count'}><Count count={totalCommentCount}/></Tab>
+            <Tab className={'talk-embed-comment-profile'}>{t('framework.my_profile')}</Tab>
+            <Tab className={'talk-embed-comment-configuration'} restricted={!can(user, 'UPDATE_CONFIG')}>{t('framework.configure_stream')}</Tab>
           </TabBar>
           {commentId &&
             <Button
diff --git a/client/coral-ui/components/Tab.js b/client/coral-ui/components/Tab.js
index e8e9e2f1e..9b229c4e8 100644
--- a/client/coral-ui/components/Tab.js
+++ b/client/coral-ui/components/Tab.js
@@ -1,13 +1,12 @@
 import React from 'react';
 import styles from './Tab.css';
 
-export default ({children, tabId, active, onTabClick, cStyle = 'base', cNames}) => (
+export default ({children, tabId, active, onTabClick, cStyle = 'base', ...props}) => (
   <li
     key={tabId}
-    className={`${active ? styles[`${cStyle}--active`] : ''} tab ${cNames}`}
+    className={`${active ? styles[`${cStyle}--active`] : ''} tab ${props.className}`}
     onClick={() => onTabClick(tabId)}
   >
     {children}
   </li>
 );
-
diff --git a/client/coral-ui/components/TabBar.js b/client/coral-ui/components/TabBar.js
index 086301151..d04ccc30d 100644
--- a/client/coral-ui/components/TabBar.js
+++ b/client/coral-ui/components/TabBar.js
@@ -14,10 +14,10 @@ class TabBar extends React.Component {
   }
 
   render() {
-    const {children, activeTab, cStyle = 'base', cNames} = this.props;
+    const {children, activeTab, cStyle = 'base'} = this.props;
     return (
       <div>
-        <ul className={`${styles.base} ${cStyle ? styles[cStyle] : ''} ${cNames}`}>
+        <ul className={`${styles.base} ${cStyle ? styles[cStyle] : ''} ${this.props.className}`}>
           {React.Children.toArray(children)
             .filter((child) => !child.props.restricted)
             .map((child, tabId) =>