From e888161fe4c0fd2dc2df064e05376658b859c7b9 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 11 Apr 2017 11:23:23 -0300
Subject: [PATCH] off topic plugins, and examples

---
 .gitignore                                    |  2 ++
 client/coral-embed-stream/src/Comment.js      |  2 +-
 client/coral-plugin-commentbox/CommentBox.js  |  2 +-
 plugins/coral-plugin-offtopic/client/.babelrc | 14 +++++++++
 .../client/.eslintrc.json                     | 23 ++++++++++++++
 .../client/components/OffTopicCheckbox.js     | 22 ++++++++++++++
 .../client/components/OffTopicTag.js          |  9 ++++++
 .../client/components/styles.css              | 13 ++++++++
 plugins/coral-plugin-offtopic/client/index.js |  9 ++++++
 plugins/coral-plugin-offtopic/index.js        |  3 ++
 plugins/coral-plugin-x/client/.babelrc        | 14 +++++++++
 plugins/coral-plugin-x/client/.eslintrc.json  | 23 ++++++++++++++
 .../client/components/OffTopicBadge.js        | 15 ++++++++++
 .../client/components/OffTopicCheckbox.js     | 21 +++++++++++++
 .../client/components/style.css               | 30 +++++++++++++++++++
 plugins/coral-plugin-x/client/index.js        |  9 ++++++
 .../coral-plugin-x/client/translations.json   | 10 +++++++
 plugins/coral-plugin-x/index.js               |  2 ++
 18 files changed, 221 insertions(+), 2 deletions(-)
 create mode 100644 plugins/coral-plugin-offtopic/client/.babelrc
 create mode 100644 plugins/coral-plugin-offtopic/client/.eslintrc.json
 create mode 100644 plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js
 create mode 100644 plugins/coral-plugin-offtopic/client/components/OffTopicTag.js
 create mode 100644 plugins/coral-plugin-offtopic/client/components/styles.css
 create mode 100644 plugins/coral-plugin-offtopic/client/index.js
 create mode 100644 plugins/coral-plugin-offtopic/index.js
 create mode 100644 plugins/coral-plugin-x/client/.babelrc
 create mode 100644 plugins/coral-plugin-x/client/.eslintrc.json
 create mode 100644 plugins/coral-plugin-x/client/components/OffTopicBadge.js
 create mode 100644 plugins/coral-plugin-x/client/components/OffTopicCheckbox.js
 create mode 100644 plugins/coral-plugin-x/client/components/style.css
 create mode 100644 plugins/coral-plugin-x/client/index.js
 create mode 100644 plugins/coral-plugin-x/client/translations.json
 create mode 100644 plugins/coral-plugin-x/index.js

diff --git a/.gitignore b/.gitignore
index 8982613ac..b87f2b6d7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,3 +18,5 @@ plugins.json
 plugins/*
 !plugins/coral-plugin-facebook-auth
 !plugins/coral-plugin-respect
+!plugins/coral-plugin-*
+
diff --git a/client/coral-embed-stream/src/Comment.js b/client/coral-embed-stream/src/Comment.js
index 7928320e2..ccd6b3d61 100644
--- a/client/coral-embed-stream/src/Comment.js
+++ b/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">
diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js
index 3b2aa887d..2592614cc 100644
--- a/client/coral-plugin-commentbox/CommentBox.js
+++ b/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 && (
diff --git a/plugins/coral-plugin-offtopic/client/.babelrc b/plugins/coral-plugin-offtopic/client/.babelrc
new file mode 100644
index 000000000..60be246eb
--- /dev/null
+++ b/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"
+  ]
+}
\ No newline at end of file
diff --git a/plugins/coral-plugin-offtopic/client/.eslintrc.json b/plugins/coral-plugin-offtopic/client/.eslintrc.json
new file mode 100644
index 000000000..9fe56bd14
--- /dev/null
+++ b/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"] }]
+  }
+}
diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js b/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js
new file mode 100644
index 000000000..d713fba3f
--- /dev/null
+++ b/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;
diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicTag.js b/plugins/coral-plugin-offtopic/client/components/OffTopicTag.js
new file mode 100644
index 000000000..83ba00dec
--- /dev/null
+++ b/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>
+);
diff --git a/plugins/coral-plugin-offtopic/client/components/styles.css b/plugins/coral-plugin-offtopic/client/components/styles.css
new file mode 100644
index 000000000..e33a7484e
--- /dev/null
+++ b/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;
+}
+
+
diff --git a/plugins/coral-plugin-offtopic/client/index.js b/plugins/coral-plugin-offtopic/client/index.js
new file mode 100644
index 000000000..c006c9a9e
--- /dev/null
+++ b/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]
+  }
+};
diff --git a/plugins/coral-plugin-offtopic/index.js b/plugins/coral-plugin-offtopic/index.js
new file mode 100644
index 000000000..f4d625303
--- /dev/null
+++ b/plugins/coral-plugin-offtopic/index.js
@@ -0,0 +1,3 @@
+module.exports = {
+
+};
diff --git a/plugins/coral-plugin-x/client/.babelrc b/plugins/coral-plugin-x/client/.babelrc
new file mode 100644
index 000000000..60be246eb
--- /dev/null
+++ b/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"
+  ]
+}
\ No newline at end of file
diff --git a/plugins/coral-plugin-x/client/.eslintrc.json b/plugins/coral-plugin-x/client/.eslintrc.json
new file mode 100644
index 000000000..9fe56bd14
--- /dev/null
+++ b/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"] }]
+  }
+}
diff --git a/plugins/coral-plugin-x/client/components/OffTopicBadge.js b/plugins/coral-plugin-x/client/components/OffTopicBadge.js
new file mode 100644
index 000000000..647ff1ea9
--- /dev/null
+++ b/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;
+
diff --git a/plugins/coral-plugin-x/client/components/OffTopicCheckbox.js b/plugins/coral-plugin-x/client/components/OffTopicCheckbox.js
new file mode 100644
index 000000000..715877b42
--- /dev/null
+++ b/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;
+
diff --git a/plugins/coral-plugin-x/client/components/style.css b/plugins/coral-plugin-x/client/components/style.css
new file mode 100644
index 000000000..32f9a8959
--- /dev/null
+++ b/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;
+}
diff --git a/plugins/coral-plugin-x/client/index.js b/plugins/coral-plugin-x/client/index.js
new file mode 100644
index 000000000..920417f44
--- /dev/null
+++ b/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]
+  }
+};
diff --git a/plugins/coral-plugin-x/client/translations.json b/plugins/coral-plugin-x/client/translations.json
new file mode 100644
index 000000000..643f32ccf
--- /dev/null
+++ b/plugins/coral-plugin-x/client/translations.json
@@ -0,0 +1,10 @@
+{
+  "en": {
+    "respect": "Respect",
+    "respected": "Respected"
+  },
+  "es": {
+    "respect": "Respeto",
+    "respected": "Respetado"
+  }
+}
diff --git a/plugins/coral-plugin-x/index.js b/plugins/coral-plugin-x/index.js
new file mode 100644
index 000000000..631f37565
--- /dev/null
+++ b/plugins/coral-plugin-x/index.js
@@ -0,0 +1,2 @@
+module.exports = {
+}