Styles updates, Theming and other misc updates

package.json

@@ -13,27 +13,21 @@
     "url": "https://github.com/plotly/react-plotly.js-editor/issues"
   },
   "scripts": {
-    "make:combined-translation-keys":
-      "babel-node utils/findTranslationKeys.js && babel-node utils/combineTranslationKeys.js",
+    "make:combined-translation-keys": "babel-node utils/findTranslationKeys.js && babel-node utils/combineTranslationKeys.js",
     "make:translation-keys": "babel-node utils/findTranslationKeys.js",
-    "make:lib":
-      "mkdirp lib && babel src --out-dir lib --ignore=__tests__/* --source-maps && npm run make:lib:css",
-    "make:lib:css":
-      "mkdirp lib && node-sass src/styles/main.scss > lib/react-plotly.js-editor.css",
-    "make:dist":
-      "mkdirp dist && browserify src/PlotlyEditor.js -o ./dist/PlotlyEditor.js -t [ babelify --presets [ es2015 react ] ] -t browserify-global-shim --standalone createPlotlyComponent && uglifyjs ./dist/PlotlyEditor.js --compress --mangle --output ./dist/PlotlyEditor.min.js --source-map filename=dist/PlotlyEditor.min.js.map && make:dist:css",
-    "make:dist:css":
-      "mkdirp dist && node-sass --output-style compressed src/styles/main.scss > dist/react-plotly.js-editor.css",
+    "make:lib": "mkdirp lib && babel src --out-dir lib --ignore=__tests__/* --source-maps && npm run make:lib:css",
+    "make:lib:css": "mkdirp lib && node-sass src/styles/main.scss > lib/react-plotly.js-editor.css",
+    "make:dist": "mkdirp dist && browserify src/PlotlyEditor.js -o ./dist/PlotlyEditor.js -t [ babelify --presets [ es2015 react ] ] -t browserify-global-shim --standalone createPlotlyComponent && uglifyjs ./dist/PlotlyEditor.js --compress --mangle --output ./dist/PlotlyEditor.min.js --source-map filename=dist/PlotlyEditor.min.js.map && yarn make:dist:css",
+    "make:dist:css": "mkdirp dist && node-sass src/styles/main.scss > dist/react-plotly.js-editor.css && yarn postcss",
     "prepublishOnly": "npm run make:lib",
     "lint": "prettier --write \"src/**/*.js\"",
-    "test:lint":
-      "eslint \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
-    "test:pretty":
-      "prettier -l \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
+    "postcss": "babel-node src/postcss.js",
+    "postcss:ie11": "NODE_ENV=ie babel-node src/postcss.js",
+    "test:lint": "eslint \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
+    "test:pretty": "prettier -l \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
     "test:js": "jest --setupTestFrameworkScriptFile=raf/polyfill",
     "test": "npm run test:lint && npm run test:pretty && npm run test:js",
-    "watch":
-      "babel src --watch --out-dir lib --source-maps | node-sass -w src/styles/main.scss lib/react-plotly.js-editor.css",
+    "watch": "babel src --watch --out-dir lib --source-maps | node-sass -w src/styles/main.scss lib/react-plotly.js-editor.css",
     "watch-test": "jest --watch"
   },
   "keywords": [
@@ -48,10 +42,13 @@
     "widgets"
   ],
   "devDependencies": {
+    "autoprefixer": "^7.2.3",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.0.2",
+    "babel-plugin-module-resolver": "^3.0.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
@@ -65,11 +62,14 @@
     "eslint-config-prettier": "^2.7.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-react": "^7.4.0",
+    "fs": "^0.0.1-security",
     "gl": "^4.0.4",
     "glob": "^7.1.2",
     "jest": "^21.2.1",
     "mkdirp": "^0.5.1",
-    "node-sass": "^4.7.1",
+    "node-sass": "^4.7.2",
+    "postcss": "^6.0.14",
+    "postcss-custom-properties": "^6.2.0",
     "prettier": "^1.9.2",
     "react-test-renderer": "^16.2.0",
     "uglify-js": "^3.0.26"
@@ -79,14 +79,20 @@
     "react-dom": "^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0"
   },
   "dependencies": {
-    "babel-plugin-module-resolver": "^3.0.0",
+    "browserify-global-shim": "^1.0.3",
+    "cssnano": "^3.10.0",
     "draft-js": "^0.10.4",
     "draft-js-export-html": "github:plotly/draft-js-export-html",
     "draft-js-import-html": "^1.2.1",
     "draft-js-utils": "^1.2.0",
+    "es6-shim": "^0.35.3",
     "fast-isnumeric": "^1.1.1",
+    "mdi-react": "^2.1.19",
     "plotly-icons": "^1.0.1",
     "plotly.js": "^1.31.2",
+    "postcss-combine-duplicated-selectors": "^3.1.4",
+    "postcss-cssnext": "^3.0.2",
+    "postcss-remove-root": "^0.0.2",
     "prop-types": "^15.5.10",
     "raf": "^3.4.0",
     "react": "^16.2.0",
@@ -99,7 +105,9 @@
     "react": "React"
   },
   "jest": {
-    "roots": ["<rootDir>/src/"],
+    "roots": [
+      "<rootDir>/src/"
+    ],
     "moduleNameMapper": {
       "^.+\\.css$": "<rootDir>/config/CSSStub.js"
     }

src/PlotlyEditor.js

@@ -130,7 +130,12 @@ class PlotlyEditor extends Component {
 
   render() {
     return (
-      <div className={bem()}>
+      <div
+        className={
+          bem('plotly-editor') +
+          `${this.props.className ? ` ${this.props.className}` : ''}`
+        }
+      >
         {this.props.graphDiv &&
           this.props.graphDiv._fullLayout &&
           (this.props.children ? this.props.children : <DefaultEditor />)}
@@ -141,6 +146,7 @@ class PlotlyEditor extends Component {
 
 PlotlyEditor.propTypes = {
   children: PropTypes.node,
+  className: PropTypes.string,
   dataSources: PropTypes.object,
   dataSourceOptions: PropTypes.array,
   graphDiv: PropTypes.object,

src/components/Button.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {bem} from 'lib';
+
+class Button extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const {variant, className, icon, label, children, ...rest} = this.props;
+
+    let classes = `button`;
+
+    if (variant) {
+      classes += ` button--${variant}`;
+    } else {
+      classes += ` button--default`;
+    }
+
+    classes += ` ${className}`;
+
+    const Icon = icon && <div className={bem('button', 'icon')}>{icon}</div>;
+
+    return (
+      <button className={classes} {...rest}>
+        <div className={bem('button', 'wrapper')}>
+          {Icon}
+          <div className="button__label">{label ? label : children}</div>
+        </div>
+      </button>
+    );
+  }
+}
+
+Button.propTypes = {
+  variant: PropTypes.string,
+  label: PropTypes.any,
+  className: PropTypes.any,
+  children: PropTypes.node,
+  icon: PropTypes.any,
+};
+
+export default Button;

src/components/containers/AnnotationAccordion.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectAnnotationToLayout, bem} from 'lib';
 import {PanelHeader} from './Panel';
-
+import Button from 'components/Button';
+import PlusIcon from 'mdi-react/PlusIcon';
 const AnnotationFold = connectAnnotationToLayout(Fold);
 
 export default class AnnotationAccordion extends Component {
@@ -30,14 +31,18 @@ export default class AnnotationAccordion extends Component {
   }
 
   render() {
-    const annotations = this.context.layout.annotations || [];
+    const {layout: {annotations = []}} = this.context;
 
     const {canAdd, children} = this.props;
 
     const addButton = canAdd && (
-      <button className="panel__add-button" onClick={this.addAnnotation}>
-        + Annotation
-      </button>
+      <Button
+        variant="primary"
+        className="js-add-annotation-button"
+        onClick={this.addAnnotation}
+        icon={<PlusIcon />}
+        label="Annotation"
+      />
     );
 
     const panelHeader = canAdd && <PanelHeader action={addButton} />;

src/components/containers/Fold.js

@@ -34,7 +34,9 @@ export default class Fold extends Component {
 
     const arrowIcon = (
       <div className={arrowClass}>
-        <AngleDownIcon />
+        <div className="fold__top__arrow__wrapper">
+          <AngleDownIcon />
+        </div>
       </div>
     );
 

src/components/containers/MenuPanel.js

@@ -13,7 +13,8 @@ export default class MenuPanel extends Component {
   }
 
   getIcon() {
-    if (this.props.question) {
+    const {question} = this.props;
+    if (question) {
       return {
         icon: <QuestionIcon className="menupanel__icon" />,
         spanClass: `menupanel__icon-span menupanel__icon-span--question`,
@@ -30,22 +31,23 @@ export default class MenuPanel extends Component {
   }
 
   render() {
-    const isOpen = this.props.show || this.state.isOpen;
+    const {show, ownline, label, children} = this.props;
+    const isOpen = show || this.state.isOpen;
     const containerClass = classnames('menupanel', {
-      'menupanel--ownline': this.props.ownline,
+      'menupanel--ownline': ownline,
     });
 
     const {icon, spanClass} = this.getIcon();
 
     return (
       <div className={containerClass}>
-        <span className={spanClass}>
-          <span>{this.props.label}</span>
-          <span onClick={this.togglePanel}>{icon}</span>
-        </span>
-        {isOpen ? (
-          <ModalBox onClose={this.togglePanel}>{this.props.children}</ModalBox>
-        ) : null}
+        <div className={spanClass}>
+          <div className="menupanel__label">{label}</div>
+          <div className="menupanel__icon__wrapper" onClick={this.togglePanel}>
+            {icon}
+          </div>
+        </div>
+        {isOpen && <ModalBox onClose={this.togglePanel}>{children}</ModalBox>}
       </div>
     );
   }

src/components/containers/ModalBox.js

@@ -4,13 +4,14 @@ import classnames from 'classnames';
 
 export default class ModalBox extends Component {
   render() {
+    const {backgroundDark, children, onClose} = this.props;
     const modalboxClass = classnames('modalbox', {
-      'modalbox--dark': this.props.backgroundDark,
+      'modalbox--dark': backgroundDark,
     });
     return (
       <div className={modalboxClass}>
-        <div className="modalbox__cover" onClick={this.props.onClose} />
-        <div>{this.props.children}</div>
+        <div className="modalbox__cover" onClick={onClose} />
+        <div className="modalbox__content">{children}</div>
       </div>
     );
   }

src/components/containers/Panel.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {bem} from 'lib';
-
+import ChartLineIcon from 'mdi-react/ChartLineIcon';
 class Panel extends Component {
   render() {
     const {visible, children} = this.props;
@@ -28,6 +28,27 @@ export class PanelHeader extends Component {
   }
 }
 
+export class PanelEmpty extends Component {
+  render() {
+    const {children, message, heading, icon} = this.props;
+
+    return (
+      <div className={bem('panel', 'empty')}>
+        <div className="panel__empty__message">
+          <div className="panel__empty__message__icon">
+            {icon ? icon : <ChartLineIcon />}
+          </div>
+          <div className="panel__empty__message__heading">{heading}</div>
+          <div className="panel__empty__message__content">
+            {message}
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
 Panel.propTypes = {
   children: PropTypes.node,
   visible: PropTypes.bool,
@@ -38,6 +59,13 @@ PanelHeader.propTypes = {
   action: PropTypes.any,
 };
 
+PanelEmpty.propTypes = {
+  heading: PropTypes.string,
+  message: PropTypes.any,
+  children: PropTypes.node,
+  icon: PropTypes.node,
+};
+
 Panel.defaultProps = {
   visible: true,
 };

src/components/containers/Section.js

@@ -79,7 +79,7 @@ export default class Section extends Component {
     return this.sectionVisible ? (
       <div className="section">
         <div className="section__heading">
-          {this.props.name}
+          <div className="section__heading__text">{this.props.name}</div>
           {this.menuPanel}
         </div>
         {this.children}

src/components/containers/TraceAccordion.js

@@ -3,7 +3,9 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {EDITOR_ACTIONS} from 'lib/constants';
 import {connectTraceToPlot, bem} from 'lib';
-import {PanelHeader} from 'components/containers/Panel';
+import {PanelHeader, PanelEmpty} from 'components/containers/Panel';
+import Button from 'components/Button';
+import PlusIcon from 'mdi-react/PlusIcon';
 
 const TraceFold = connectTraceToPlot(Fold);
 
@@ -27,9 +29,13 @@ export default class TraceAccordion extends Component {
     const {canAdd, children} = this.props;
 
     const addButton = canAdd && (
-      <button className="panel__add-button" onClick={this.addTrace}>
-        + Trace
-      </button>
+      <Button
+        className="js-add-trace-button"
+        variant="primary"
+        onClick={this.addTrace}
+        icon={<PlusIcon />}
+        label="Trace"
+      />
     );
 
     const panelHeader = canAdd && <PanelHeader action={addButton} />;
@@ -40,8 +46,23 @@ export default class TraceAccordion extends Component {
       </TraceFold>
     ));
 
+    const emptyState = data.length &&
+      !data[0].x &&
+      !canAdd && (
+        <PanelEmpty
+          heading="There aren't any traces."
+          message={
+            <p>
+              Looks like there are no traces selected yet, head back to the
+              Create section to adjust the data.
+            </p>
+          }
+        />
+      );
+
     return (
       <div className={bem('panel', 'content')}>
+        {emptyState}
         {panelHeader}
         {content}
       </div>

src/components/containers/__tests__/AnnotationAccordion-test.js

@@ -40,7 +40,7 @@ describe('<AnnotationAccordion>', () => {
       </TestEditor>
     );
 
-    editor.find('.panel__add-button').simulate('click');
+    editor.find('button.js-add-annotation-button').simulate('click');
 
     const payload = onUpdateLayout.mock.calls[0][0];
     expect(payload.update).toEqual({'annotations[0]': {text: 'new text'}});