off topic plugins, and examples

.gitignore

@@ -18,3 +18,5 @@ plugins.json
 plugins/*
 !plugins/coral-plugin-facebook-auth
 !plugins/coral-plugin-respect
+!plugins/coral-plugin-*
+

client/coral-embed-stream/src/Comment.js

@@ -158,7 +158,7 @@ class Comment extends React.Component {
             ? <TagLabel><BestIndicator /></TagLabel>
           : null }
           <PubDate created_at={comment.created_at} />
-          <Slot fill="commentInfoBar" commentId={comment.id} inline/>
+          <Slot fill="commentInfoBar" comment={comment} commentId={comment.id} inline/>
 
           <Content body={comment.body} />
           <div className="commentActionsLeft comment__action-container">

client/coral-plugin-commentbox/CommentBox.js

@@ -104,7 +104,7 @@ class CommentBox extends Component {
             `${charCount - length} ${lang.t('characters-remaining')}`
           }
         </div>
-        <Slot fill="commentBoxDetail" inline/>
+        <Slot fill="commentBoxDetail" inline />
         <div className={`${name}-button-container`}>
           {
             isReply && (

plugins/coral-plugin-offtopic/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/coral-plugin-offtopic/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/coral-plugin-offtopic/client/components/OffTopicCheckbox.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import styles from './styles.css';
+
+class OffTopicCheckbox extends React.Component {
+
+  handleChange = () => {
+    console.log('handle Change');
+  }
+
+  render() {
+    return (
+      <div className={`wapo-styles-offtopic ${styles.offTopic}`}>
+        <label>
+          <input type="checkbox" onChange={this.handleChange}/>
+          Off-Topic
+        </label>
+      </div>
+    )
+  }
+}
+
+export default OffTopicCheckbox;

plugins/coral-plugin-offtopic/client/components/OffTopicTag.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styles from './styles.css';
+
+export default (props) => (
+  <span className={styles.tag}>
+    {console.log('Offtopic tag', props.offtopic)}
+    Off-topic
+  </span>
+);

plugins/coral-plugin-offtopic/client/components/styles.css

@@ -0,0 +1,13 @@
+.offTopic {
+  label {
+    padding: 10px 20px;
+  }
+}
+
+.tag {
+  padding: 0 12px;
+  background: coral;
+  border-radius: 3px;
+}
+
+

plugins/coral-plugin-offtopic/client/index.js

@@ -0,0 +1,9 @@
+import OffTopicCheckbox from './components/OffTopicCheckbox';
+import OffTopicTag from './components/OffTopicTag';
+
+export default {
+  slots: {
+    commentBoxDetail: [OffTopicCheckbox],
+    commentInfoBar: [OffTopicTag]
+  }
+};

plugins/coral-plugin-offtopic/index.js

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

plugins/coral-plugin-x/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/coral-plugin-x/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/coral-plugin-x/client/components/OffTopicBadge.js

@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+import styles from './style.css';
+
+class OffTopicBadge extends Component {
+  render() {
+    return (
+      <span className={styles.badge}>
+        OffTopicCheckbox
+      </span>
+    );
+  }
+}
+
+export default OffTopicBadge;
+

plugins/coral-plugin-x/client/components/OffTopicCheckbox.js

@@ -0,0 +1,21 @@
+import React, {Component} from 'react';
+import styles from './style.css';
+
+class OffTopicCheckbox extends Component {
+  constructor () {
+    this.state = {
+      checked: false;
+    }
+  }
+  render() {
+    return (
+      <div className={styles.respect}>
+        OffTopicCheckbox
+        <input type
+      </div>
+    );
+  }
+}
+
+export default OffTopicCheckbox;
+

plugins/coral-plugin-x/client/components/style.css

@@ -0,0 +1,30 @@
+.respect {
+  display: inline-block;
+ }
+
+.button {
+  color: #2a2a2a;
+  margin: 5px 10px 5px 0px;
+  background: none;
+  padding: 0px;
+  border: none;
+  font-size: inherit;
+
+  &:hover {
+    color: #767676;
+    cursor: pointer;
+  }
+
+  &.respected {
+    color: #c98211;
+
+    &:hover {
+      color: #e59614;
+      cursor: pointer;
+    }
+  }
+}
+
+.icon {
+  padding: 0 5px;
+}

plugins/coral-plugin-x/client/index.js

@@ -0,0 +1,9 @@
+import OffTopicCheckbox from './components/OffTopicCheckbox';
+import OffTopicBadge from './components/OffTopicBadge';
+
+export default {
+  slots: {
+    commentBoxDetail: [OffTopicCheckbox],
+    commentInfoBar: [OffTopicBadge]
+  }
+};

plugins/coral-plugin-x/client/translations.json

@@ -0,0 +1,10 @@
+{
+  "en": {
+    "respect": "Respect",
+    "respected": "Respected"
+  },
+  "es": {
+    "respect": "Respeto",
+    "respected": "Respetado"
+  }
+}

plugins/coral-plugin-x/index.js

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