Implement streamTabs and streamTabPanes slot

plugins/talk-plugin-featured/client/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}

plugins/talk-plugin-featured/client/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}

plugins/talk-plugin-featured/client/components/Tab.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import {TabCount} from 'plugin-api/beta/client/components/ui';
+
+export default ({active, asset: {recentComments}}) => (
+  <span>
+    Featured <TabCount active={active} sub>{recentComments.length}</TabCount>
+  </span>
+);

plugins/talk-plugin-featured/client/components/TabPane.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export default ({asset: {recentComments}}) => (
+  <div>
+    {recentComments.map((comment) => (
+      <p key={comment.id}>
+        <div><strong>{comment.user.username}</strong></div>
+        <div>
+          {comment.body}
+        </div>
+      </p>
+    ))}
+  </div>
+);

plugins/talk-plugin-featured/client/containers/Tab.js

@@ -0,0 +1,16 @@
+import {compose, gql} from 'react-apollo';
+import withFragments from 'coral-framework/hocs/withFragments';
+import Tab from '../components/Tab';
+
+const enhance = compose(
+  withFragments({
+    asset: gql`
+      fragment TalkFeatured_Tab_asset on Asset {
+        recentComments {
+          id
+        }
+      }`,
+  }),
+);
+
+export default enhance(Tab);

plugins/talk-plugin-featured/client/containers/TabPane.js

@@ -0,0 +1,21 @@
+import {compose, gql} from 'react-apollo';
+import withFragments from 'coral-framework/hocs/withFragments';
+import TabPane from '../components/TabPane';
+
+const enhance = compose(
+  withFragments({
+    asset: gql`
+      fragment TalkFeatured_TabPane_asset on Asset {
+        recentComments {
+          id
+          body
+          user {
+            id
+            username
+          }
+        }
+      }`,
+  }),
+);
+
+export default enhance(TabPane);

plugins/talk-plugin-featured/client/index.js

@@ -0,0 +1,9 @@
+import Tab from './containers/Tab';
+import TabPane from './containers/TabPane';
+
+export default {
+  slots: {
+    streamTabs: [Tab],
+    streamTabPanes: [TabPane],
+  }
+};

plugins/talk-plugin-featured/index.js

@@ -0,0 +1,2 @@
+module.exports = {};
+