diff --git a/client/coral-embed-stream/src/components/ExtendableTab.js b/client/coral-embed-stream/src/components/ExtendableTab.js
new file mode 100644
index 000000000..75c6739a4
--- /dev/null
+++ b/client/coral-embed-stream/src/components/ExtendableTab.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import {Tab} from 'coral-ui';
+import PropTypes from 'prop-types';
+
+/**
+ * ExtendableTab adds a hover property to its children, because
+ * Tab is rendered as a button and under Firefox its children do
+ * not support mouse events.
+ */
+class ExtendableTab extends React.Component {
+ state = {
+ hover: false,
+ }
+
+ handleMouseEnter = () => this.setState({hover: true});
+ handleMouseLeave = () => this.setState({hover: false});
+
+ render() {
+ return (
+
+ {React.cloneElement(this.props.children, {hover: this.state.hover})}
+
+ );
+ }
+}
+
+ExtendableTab.propTypes = {
+ children: PropTypes.node,
+};
+
+export default ExtendableTab;
diff --git a/client/coral-embed-stream/src/containers/ExtendableTabPanel.js b/client/coral-embed-stream/src/containers/ExtendableTabPanel.js
index b582f7b66..362f6bf89 100644
--- a/client/coral-embed-stream/src/containers/ExtendableTabPanel.js
+++ b/client/coral-embed-stream/src/containers/ExtendableTabPanel.js
@@ -2,7 +2,8 @@ import React from 'react';
import ExtendableTabPanel from '../components/ExtendableTabPanel';
import {connect} from 'react-redux';
import omit from 'lodash/omit';
-import {Tab, TabPane} from 'coral-ui';
+import {TabPane} from 'coral-ui';
+import ExtendableTab from '../components/ExtendableTab';
import {getShallowChanges} from 'coral-framework/utils';
import isEqual from 'lodash/isEqual';
import PropTypes from 'prop-types';
@@ -61,9 +62,9 @@ class ExtendableTabPanelContainer extends React.Component {
getSlotTabElements(slot) {
return this.getSlotElements(slot).map((el) => {
return (
-
+
{React.cloneElement(el, {active: this.props.activeTab === el.type.talkPluginName})}
-
+
);
});
}
diff --git a/plugins/talk-plugin-featured-comments/client/actions.js b/plugins/talk-plugin-featured-comments/client/actions.js
deleted file mode 100644
index 653b8f565..000000000
--- a/plugins/talk-plugin-featured-comments/client/actions.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import {SHOW_TOOLTIP, HIDE_TOOLTIP} from './constants';
-
-export const showTooltip = () => ({
- type: SHOW_TOOLTIP
-});
-
-export const hideTooltip = () => ({
- type: HIDE_TOOLTIP
-});
diff --git a/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js
index 47560fd74..18db9a6c5 100644
--- a/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js
+++ b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js
@@ -3,9 +3,9 @@ import styles from './InfoIcon.css';
import cn from 'classnames';
import {Icon} from 'plugin-api/beta/client/components/ui';
-export default ({tooltip}) => (
- (
+
);
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tab.js b/plugins/talk-plugin-featured-comments/client/components/Tab.js
index 6ac5682d0..804e7e99a 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Tab.js
+++ b/plugins/talk-plugin-featured-comments/client/components/Tab.js
@@ -3,16 +3,23 @@ import {TabCount} from 'plugin-api/beta/client/components/ui';
import InfoIcon from './InfoIcon';
import {t} from 'plugin-api/beta/client/services';
import Tooltip from './Tooltip';
+import PropTypes from 'prop-types';
-export default ({active, asset: {featuredCommentsCount}, tooltip, ...props}) => {
+const Tab = ({active, hover, featuredCommentsCount}) => {
return (
-
+
{t('talk-plugin-featured-comments.featured')}
{featuredCommentsCount}
-
- {tooltip && }
+
+ {hover && }
);
};
+
+Tab.propTypes = {
+ active: PropTypes.bool,
+ hover: PropTypes.bool,
+ featuredCommentsCount: PropTypes.number.isRequired,
+};
+
+export default Tab;
diff --git a/plugins/talk-plugin-featured-comments/client/constants.js b/plugins/talk-plugin-featured-comments/client/constants.js
deleted file mode 100644
index c03bf4839..000000000
--- a/plugins/talk-plugin-featured-comments/client/constants.js
+++ /dev/null
@@ -1,4 +0,0 @@
-const prefix = 'TALK_FEATURED_COMMENTS';
-
-export const SHOW_TOOLTIP = `${prefix}_SHOW_TOOLTIP`;
-export const HIDE_TOOLTIP = `${prefix}_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 cbe430be2..f3443a122 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/Tab.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/Tab.js
@@ -1,19 +1,9 @@
import Tab from '../components/Tab';
-import {bindActionCreators} from 'redux';
-import {showTooltip, hideTooltip} from '../actions';
+import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs';
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);
+import {withProps} from 'recompose';
const enhance = compose(
- connect(mapStateToProps, mapDispatchToProps),
withFragments({
asset: gql`
fragment TalkFeaturedComments_Tab_asset on Asset {
@@ -21,6 +11,7 @@ const enhance = compose(
}`,
}),
excludeIf((props) => props.asset.featuredCommentsCount === 0),
+ withProps((props) => ({featuredCommentsCount: props.asset.featuredCommentsCount})),
);
export default enhance(Tab);
diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js
index bdcb2f470..7a0b9827d 100644
--- a/plugins/talk-plugin-featured-comments/client/index.js
+++ b/plugins/talk-plugin-featured-comments/client/index.js
@@ -3,7 +3,6 @@ import Tag from './containers/Tag';
import TabPane from './containers/TabPane';
import translations from './translations.yml';
import update from 'immutability-helper';
-import reducer from './reducer';
import ModTag from './containers/ModTag';
import ModActionButton from './containers/ModActionButton';
import ModSubscription from './containers/ModSubscription';
@@ -13,7 +12,6 @@ import {findCommentInEmbedQuery} from 'coral-embed-stream/src/graphql/utils';
import {prependNewNodes} from 'plugin-api/beta/client/utils';
export default {
- reducer,
translations,
slots: {
streamTabsPrepend: [Tab],
diff --git a/plugins/talk-plugin-featured-comments/client/reducer.js b/plugins/talk-plugin-featured-comments/client/reducer.js
deleted file mode 100644
index 2fd9b82e0..000000000
--- a/plugins/talk-plugin-featured-comments/client/reducer.js
+++ /dev/null
@@ -1,22 +0,0 @@
-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;
- }
-}