From 11ea45ef69c361c1597de32a69c5e11eb84773f4 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 21 Jul 2017 05:21:13 -0300
Subject: [PATCH 1/7] typo with white space

---
 client/coral-framework/styles/reset.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/coral-framework/styles/reset.css b/client/coral-framework/styles/reset.css
index 14ae4e723..8cfd14c41 100644
--- a/client/coral-framework/styles/reset.css
+++ b/client/coral-framework/styles/reset.css
@@ -7,7 +7,6 @@
   touch-action: manipulation;
   padding: 0;
 
-  position: relative;
   overflow: hidden;
 
   /* Unify anchor and button. */
@@ -18,7 +17,7 @@
   text-decoration: none;
   align-items: flex-start;
   vertical-align: middle;
-  whiteSpace: nowrap;
+  white-space: nowrap;
   background: transparent;
   font-size: inherit;
 

From f86d210bbb0ad2dbbf49d104e7aa689a03588d04 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 21 Jul 2017 05:23:54 -0300
Subject: [PATCH 2/7] Adding actions

---
 plugins/talk-plugin-featured-comments/client/actions.js | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 plugins/talk-plugin-featured-comments/client/actions.js

diff --git a/plugins/talk-plugin-featured-comments/client/actions.js b/plugins/talk-plugin-featured-comments/client/actions.js
new file mode 100644
index 000000000..653b8f565
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/actions.js
@@ -0,0 +1,9 @@
+import {SHOW_TOOLTIP, HIDE_TOOLTIP} from './constants';
+
+export const showTooltip = () => ({
+  type: SHOW_TOOLTIP
+});
+
+export const hideTooltip = () => ({
+  type: HIDE_TOOLTIP
+});

From 392d82e30a79211fc4c42105885838fb28d6187e Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 21 Jul 2017 05:24:27 -0300
Subject: [PATCH 3/7] Info Icon, and Tooltip

---
 .../client/components/Button.css              |  6 +-
 .../client/components/InfoIcon.css            | 10 +++
 .../client/components/InfoIcon.js             | 10 +++
 .../client/components/Tab.js                  | 19 ++++--
 .../client/components/Tooltip.css             | 64 +++++++++++++++++++
 .../client/components/Tooltip.js              | 17 +++++
 6 files changed, 116 insertions(+), 10 deletions(-)
 create mode 100644 plugins/talk-plugin-featured-comments/client/components/InfoIcon.css
 create mode 100644 plugins/talk-plugin-featured-comments/client/components/InfoIcon.js
 create mode 100644 plugins/talk-plugin-featured-comments/client/components/Tooltip.css
 create mode 100644 plugins/talk-plugin-featured-comments/client/components/Tooltip.js

diff --git a/plugins/talk-plugin-featured-comments/client/components/Button.css b/plugins/talk-plugin-featured-comments/client/components/Button.css
index 11e35d40b..daaa329c9 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Button.css
+++ b/plugins/talk-plugin-featured-comments/client/components/Button.css
@@ -3,12 +3,8 @@
   /* TODO: figure out the best location to include the `reset.css` */
   composes: buttonReset from "coral-framework/styles/reset.css";
 
-  color: #2a2a2a;
-  margin-right: 10px;
-}
-
-.button {
   color: #767676;
+  margin-right: 10px;
 }
 
 .button.featured {
diff --git a/plugins/talk-plugin-featured-comments/client/components/InfoIcon.css b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.css
new file mode 100644
index 000000000..37b942964
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.css
@@ -0,0 +1,10 @@
+.infoIcon {
+  color: #616161;
+  vertical-align: middle;
+  font-size: 16px;
+  margin-left: 5px;
+}
+
+/* .infoIcon:hover {
+  color: #1d5294;
+} */
\ No newline at end of file
diff --git a/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js
new file mode 100644
index 000000000..4c24992b6
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './InfoIcon.css';
+import {Icon} from 'plugin-api/beta/client/components/ui';
+
+export default () => (
+  <Icon 
+    name="info_outline"
+    className={styles.infoIcon}
+  />
+);
\ No newline at end of file
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tab.js b/plugins/talk-plugin-featured-comments/client/components/Tab.js
index c780887c6..6e4a2d382 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Tab.js
+++ b/plugins/talk-plugin-featured-comments/client/components/Tab.js
@@ -1,9 +1,18 @@
 import React from 'react';
 import {TabCount} from 'plugin-api/beta/client/components/ui';
+import InfoIcon from './InfoIcon';
 import {t} from 'plugin-api/beta/client/services';
+import Tooltip from '../containers/Tooltip';
 
-export default ({active, asset: {featuredCommentsCount}}) => (
-  <span>
-    {t('talk-plugin-featured-comments.featured')} <TabCount active={active} sub>{featuredCommentsCount}</TabCount>
-  </span>
-);
+export default ({active, asset: {featuredCommentsCount}, tooltip, ...props}) => { 
+  return (
+    <span 
+      onMouseEnter={props.showTooltip}
+      onMouseLeave={props.hideTooltip} >
+      {t('talk-plugin-featured-comments.featured')}
+      <TabCount active={active} sub>{featuredCommentsCount}</TabCount>
+      <InfoIcon /> 
+       {tooltip && <Tooltip />} 
+    </span>
+  );
+};
\ No newline at end of file
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tooltip.css b/plugins/talk-plugin-featured-comments/client/components/Tooltip.css
new file mode 100644
index 000000000..98eb50b46
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/components/Tooltip.css
@@ -0,0 +1,64 @@
+.tooltip {
+  background-color: white;
+  border: solid 1px #999;
+  border-radius: 3px;
+  padding: 10px;
+  position: absolute;
+  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+  z-index: 10;
+  top: 26px;
+  left: 50px;
+  width: 200px;
+  text-align: left;
+  color: #616161;
+}
+
+.tooltip::before{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: #999;
+  position: absolute;
+  left: 46px;
+  top: -21px;
+  transform: rotate(180deg);
+}
+
+.tooltip::after{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: white;
+  position: absolute;
+  left: 46px;
+  top: -20px;
+  transform: rotate(180deg);
+}
+
+.headline {
+  color: #484747;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font-size: 1.02em;
+  margin-left: 6px;
+  letter-spacing: 0.2px;
+  vertical-align: middle;
+  margin-bottom: 2px;
+  line-height: 22px;
+}
+
+.icon {
+  font-size: 1.4em;
+  vertical-align: middle;
+}
+
+.description {
+  width: 100%;
+  box-sizing: border-box;
+  white-space: pre-wrap;
+  padding: 0;
+  margin: 0;
+  padding-left: 25px;
+  font-weight: 400;
+  font-size: 1em;
+}
\ No newline at end of file
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tooltip.js b/plugins/talk-plugin-featured-comments/client/components/Tooltip.js
new file mode 100644
index 000000000..a45ee118b
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/components/Tooltip.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import {Icon} from 'plugin-api/beta/client/components/ui';
+import styles from './Tooltip.css';
+
+export default class Tooltip extends React.Component {
+  render() {
+    return (
+      <div className={styles.tooltip}>
+        <Icon name="info_outline" className={styles.icon} />
+        <h3 className={styles.headline}>Featured Comments:</h3>
+        <p className={styles.description}>
+          Comments selected by our team as worth reading
+        </p>
+      </div>
+    );
+  }
+}

From 9c9f088ac324dc29e617c77437609557ea6126e5 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 21 Jul 2017 05:24:45 -0300
Subject: [PATCH 4/7] Containers, reducer and constants

---
 .../client/constants.js                       |  2 ++
 .../client/containers/Tab.js                  | 15 +++++++++++--
 .../client/containers/Tooltip.js              | 14 ++++++++++++
 .../client/index.js                           |  4 +++-
 .../client/reducer.js                         | 22 +++++++++++++++++++
 5 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 plugins/talk-plugin-featured-comments/client/constants.js
 create mode 100644 plugins/talk-plugin-featured-comments/client/containers/Tooltip.js
 create mode 100644 plugins/talk-plugin-featured-comments/client/reducer.js

diff --git a/plugins/talk-plugin-featured-comments/client/constants.js b/plugins/talk-plugin-featured-comments/client/constants.js
new file mode 100644
index 000000000..7aad99014
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/constants.js
@@ -0,0 +1,2 @@
+export const SHOW_TOOLTIP = 'SHOW_TOOLTIP';
+export const HIDE_TOOLTIP = 'HIDE_TOOLTIP';
diff --git a/plugins/talk-plugin-featured-comments/client/containers/Tab.js b/plugins/talk-plugin-featured-comments/client/containers/Tab.js
index 5d92387d6..f28a63566 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/Tab.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/Tab.js
@@ -1,8 +1,19 @@
-import {compose, gql} from 'react-apollo';
-import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs';
 import Tab from '../components/Tab';
+import {bindActionCreators} from 'redux';
+import {showTooltip, hideTooltip} from '../actions';
+import {compose, gql} from 'react-apollo';
+import {withFragments, excludeIf, connect} from 'plugin-api/beta/client/hocs';
+
+const mapStateToProps = ({talkPluginFeaturedComments: state}) => state;
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    showTooltip,
+    hideTooltip,
+  }, dispatch);
 
 const enhance = compose(
+  connect(mapStateToProps, mapDispatchToProps),
   withFragments({
     asset: gql`
       fragment TalkFeaturedComments_Tab_asset on Asset {
diff --git a/plugins/talk-plugin-featured-comments/client/containers/Tooltip.js b/plugins/talk-plugin-featured-comments/client/containers/Tooltip.js
new file mode 100644
index 000000000..34cc31a73
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/containers/Tooltip.js
@@ -0,0 +1,14 @@
+import {bindActionCreators} from 'redux';
+import {showTooltip, hideTooltip} from '../actions';
+import {connect} from 'plugin-api/beta/client/hocs';
+import Tooltip from '../components/Tooltip';
+
+const mapStateToProps = ({talkPluginFeaturedComments: state}) => state;
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    showTooltip,
+    hideTooltip,
+  }, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(Tooltip);
diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js
index d804e2b55..8e4d18058 100644
--- a/plugins/talk-plugin-featured-comments/client/index.js
+++ b/plugins/talk-plugin-featured-comments/client/index.js
@@ -1,14 +1,16 @@
 import Tab from './containers/Tab';
-import TabPane from './containers/TabPane';
 import Tag from './components/Tag';
 import Button from './components/Button';
+import TabPane from './containers/TabPane';
 import translations from './translations.yml';
 import update from 'immutability-helper';
+import reducer from './reducer';
 
 import {findCommentInEmbedQuery} from 'coral-embed-stream/src/graphql/utils';
 import {insertCommentsSorted} from 'plugin-api/beta/client/utils';
 
 export default {
+  reducer,
   translations,
   slots: {
     streamTabs: [Tab],
diff --git a/plugins/talk-plugin-featured-comments/client/reducer.js b/plugins/talk-plugin-featured-comments/client/reducer.js
new file mode 100644
index 000000000..2fd9b82e0
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/reducer.js
@@ -0,0 +1,22 @@
+import {SHOW_TOOLTIP, HIDE_TOOLTIP} from './constants';
+
+const initialState = {
+  tooltip: false
+};
+
+export default function featured (state = initialState, action) {
+  switch (action.type) {
+  case SHOW_TOOLTIP: 
+    return {
+      ...state,
+      tooltip: true
+    };
+  case HIDE_TOOLTIP: 
+    return {
+      ...state,
+      tooltip: false
+    };
+  default :
+    return state;
+  }
+}

From 2d8e36e51116f8c3c4831cee7b875609ef8224d4 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 21 Jul 2017 05:27:34 -0300
Subject: [PATCH 5/7] Removing innecesary connects, and classes

---
 .../client/components/Tab.js                  |  4 ++--
 .../client/components/Tooltip.js              | 22 ++++++++-----------
 .../client/containers/Tooltip.js              | 14 ------------
 3 files changed, 11 insertions(+), 29 deletions(-)
 delete mode 100644 plugins/talk-plugin-featured-comments/client/containers/Tooltip.js

diff --git a/plugins/talk-plugin-featured-comments/client/components/Tab.js b/plugins/talk-plugin-featured-comments/client/components/Tab.js
index 6e4a2d382..83232149a 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Tab.js
+++ b/plugins/talk-plugin-featured-comments/client/components/Tab.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {TabCount} from 'plugin-api/beta/client/components/ui';
 import InfoIcon from './InfoIcon';
 import {t} from 'plugin-api/beta/client/services';
-import Tooltip from '../containers/Tooltip';
+import Tooltip from './Tooltip';
 
 export default ({active, asset: {featuredCommentsCount}, tooltip, ...props}) => { 
   return (
@@ -12,7 +12,7 @@ export default ({active, asset: {featuredCommentsCount}, tooltip, ...props}) =>
       {t('talk-plugin-featured-comments.featured')}
       <TabCount active={active} sub>{featuredCommentsCount}</TabCount>
       <InfoIcon /> 
-       {tooltip && <Tooltip />} 
+      {tooltip && <Tooltip />} 
     </span>
   );
 };
\ No newline at end of file
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tooltip.js b/plugins/talk-plugin-featured-comments/client/components/Tooltip.js
index a45ee118b..8863e87ab 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Tooltip.js
+++ b/plugins/talk-plugin-featured-comments/client/components/Tooltip.js
@@ -2,16 +2,12 @@ import React from 'react';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 import styles from './Tooltip.css';
 
-export default class Tooltip extends React.Component {
-  render() {
-    return (
-      <div className={styles.tooltip}>
-        <Icon name="info_outline" className={styles.icon} />
-        <h3 className={styles.headline}>Featured Comments:</h3>
-        <p className={styles.description}>
-          Comments selected by our team as worth reading
-        </p>
-      </div>
-    );
-  }
-}
+export default () => (
+  <div className={styles.tooltip}>
+    <Icon name="info_outline" className={styles.icon} />
+    <h3 className={styles.headline}>Featured Comments:</h3>
+    <p className={styles.description}>
+      Comments selected by our team as worth reading
+    </p>
+  </div>
+);
diff --git a/plugins/talk-plugin-featured-comments/client/containers/Tooltip.js b/plugins/talk-plugin-featured-comments/client/containers/Tooltip.js
deleted file mode 100644
index 34cc31a73..000000000
--- a/plugins/talk-plugin-featured-comments/client/containers/Tooltip.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import {bindActionCreators} from 'redux';
-import {showTooltip, hideTooltip} from '../actions';
-import {connect} from 'plugin-api/beta/client/hocs';
-import Tooltip from '../components/Tooltip';
-
-const mapStateToProps = ({talkPluginFeaturedComments: state}) => state;
-
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    showTooltip,
-    hideTooltip,
-  }, dispatch);
-
-export default connect(mapStateToProps, mapDispatchToProps)(Tooltip);

From 3b01218338f2c66603ddc23e12571dcb9fae4183 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 21 Jul 2017 05:34:04 -0300
Subject: [PATCH 6/7] Adding translations

---
 plugins/talk-plugin-featured-comments/client/translations.yml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/plugins/talk-plugin-featured-comments/client/translations.yml b/plugins/talk-plugin-featured-comments/client/translations.yml
index 7f6db9370..50e51d586 100644
--- a/plugins/talk-plugin-featured-comments/client/translations.yml
+++ b/plugins/talk-plugin-featured-comments/client/translations.yml
@@ -1,8 +1,12 @@
 en:
   talk-plugin-featured-comments:
     featured: Featured
+    featured_comments: Featured Comments
     go_to_conversation: Go to conversation
+    tooltip_description: Comments selected by our team as worth reading
 es:
   talk-plugin-featured-comments:
     featured: Remarcado
+    featured_comments: Comentarios Remarcados
     go_to_conversation: Ir al comentario
+    tooltip_description: Comentarios seleccionados por nuestro equipo que valen la pena ser leidos
\ No newline at end of file

From 149389057d522e0c8afa24c84961b393cec76f7f Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 21 Jul 2017 05:34:28 -0300
Subject: [PATCH 7/7] Translations and style

---
 .../client/components/InfoIcon.css                       | 4 ++--
 .../client/components/InfoIcon.js                        | 7 ++++---
 .../client/components/Tab.js                             | 4 ++--
 .../client/components/Tooltip.js                         | 9 ++++++---
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/plugins/talk-plugin-featured-comments/client/components/InfoIcon.css b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.css
index 37b942964..4fe40905b 100644
--- a/plugins/talk-plugin-featured-comments/client/components/InfoIcon.css
+++ b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.css
@@ -5,6 +5,6 @@
   margin-left: 5px;
 }
 
-/* .infoIcon:hover {
+ .infoIcon.on {
   color: #1d5294;
-} */
\ No newline at end of file
+} 
\ No newline at end of file
diff --git a/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js
index 4c24992b6..47560fd74 100644
--- a/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js
+++ b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import styles from './InfoIcon.css';
+import cn from 'classnames';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 
-export default () => (
+export default ({tooltip}) => (
   <Icon 
     name="info_outline"
-    className={styles.infoIcon}
+    className={cn(styles.infoIcon, {[styles.on]: tooltip})}
   />
-);
\ No newline at end of file
+);
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tab.js b/plugins/talk-plugin-featured-comments/client/components/Tab.js
index 83232149a..6ac5682d0 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Tab.js
+++ b/plugins/talk-plugin-featured-comments/client/components/Tab.js
@@ -11,8 +11,8 @@ export default ({active, asset: {featuredCommentsCount}, tooltip, ...props}) =>
       onMouseLeave={props.hideTooltip} >
       {t('talk-plugin-featured-comments.featured')}
       <TabCount active={active} sub>{featuredCommentsCount}</TabCount>
-      <InfoIcon /> 
+      <InfoIcon tooltip={tooltip} /> 
       {tooltip && <Tooltip />} 
     </span>
   );
-};
\ No newline at end of file
+};
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tooltip.js b/plugins/talk-plugin-featured-comments/client/components/Tooltip.js
index 8863e87ab..c57336d05 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Tooltip.js
+++ b/plugins/talk-plugin-featured-comments/client/components/Tooltip.js
@@ -1,13 +1,16 @@
 import React from 'react';
-import {Icon} from 'plugin-api/beta/client/components/ui';
 import styles from './Tooltip.css';
+import {t} from 'plugin-api/beta/client/services';
+import {Icon} from 'plugin-api/beta/client/components/ui';
 
 export default () => (
   <div className={styles.tooltip}>
     <Icon name="info_outline" className={styles.icon} />
-    <h3 className={styles.headline}>Featured Comments:</h3>
+    <h3 className={styles.headline}>
+      {t('talk-plugin-featured-comments.featured_comments')}:
+    </h3>
     <p className={styles.description}>
-      Comments selected by our team as worth reading
+      {t('talk-plugin-featured-comments.tooltip_description')}
     </p>
   </div>
 );