Merge branch 'master' into performance-enhancements

client/coral-framework/components/MarkdownEditor.js

@@ -107,6 +107,11 @@ export default class MarkdownEditor extends Component  {
       ...config,
       element: this.textarea,
     });
+
+    // Don't trap the key, to stay accessible.
+    this.editor.codemirror.options.extraKeys['Tab'] = false;
+    this.editor.codemirror.options.extraKeys['Shift-Tab'] = false;
+
     this.editor.codemirror.on('change', this.onChange);
   }
 

client/coral-framework/components/StreamConfiguration.css

@@ -0,0 +1,33 @@
+.root {
+  position: relative;
+  margin: 12px 12px 24px 0;
+}
+
+.action {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding-left: 4px;
+}
+
+.title {
+  display: block;
+  font-size: 14px;
+  margin-bottom: 5px;
+  font-weight: bold;
+  cursor: pointer;
+  padding-right: 50px;
+}
+
+.description{
+  padding-right: 50px;
+}
+
+.content {
+  display: inline-block;
+  box-sizing: border-box;
+  padding-left: 50px;
+}
+
+

client/coral-framework/components/StreamConfiguration.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import Checkbox from 'coral-ui/components/Checkbox';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import styles from './StreamConfiguration.css';
+import uuid from 'uuid/v4';
+
+class Configuration extends React.Component {
+
+  id = uuid();
+
+  render() {
+    const {title, description, children, className, onCheckbox, checked, ...rest} = this.props;
+    return (
+      <div {...rest} className={cn(styles.root, className)}>
+        {checked !== undefined &&
+          <div className={styles.action}>
+            <Checkbox
+              id={this.id}
+              className={styles.checkbox}
+              onChange={onCheckbox}
+              checked={checked} />
+          </div>
+        }
+        <div className={cn(styles.wrapper, {
+          [styles.content]: checked !== undefined,
+        })}>
+          <label htmlFor={this.id} className={styles.title}>{title}</label>
+          <div className={styles.description}>{description}</div>
+          <div>
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+Configuration.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  className: PropTypes.string,
+  onCheckbox: PropTypes.func,
+  checked: PropTypes.bool,
+  children: PropTypes.node,
+};
+
+export default Configuration;