Adding debug plugins

client/coral-framework/components/Slot.css

@@ -1,3 +1,7 @@
 .inline {
   display: inline-block;
 }
+
+.debug {
+  background-color: coral;
+}

client/coral-framework/components/Slot.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './Slot.css';
+import {connect} from 'react-redux';
 import {getSlotElements} from 'coral-framework/helpers/plugins';
 
-export default function Slot ({fill, inline = false, ...rest}) {
+function Slot ({fill, inline = false, config: {plugin_config = {}}, ...rest}) {
+  const {debug} = plugin_config;
   return (
-    <div className={cn({[styles.inline]: inline})}>
+    <div className={cn({[styles.inline]: inline, [styles.debug]: debug})}>
       {getSlotElements(fill, rest)}
     </div>
   );
@@ -14,3 +16,8 @@ export default function Slot ({fill, inline = false, ...rest}) {
 Slot.propTypes = {
   fill: React.PropTypes.string
 };
+
+const mapStateToProps = ({config}) => ({config});
+
+export default connect(mapStateToProps, null)(Slot);
+

views/article.ejs

@@ -29,7 +29,10 @@
         talk: '/',
         asset_url: '<%= asset_url ? asset_url : '' %>',
         asset_id: '<%= asset_id ? asset_id : '' %>',
-        hola: 'asd'
+        plugin_config: {
+          test: 'data',
+          debug: false
+        }
       })
     "></script>
   </main>