SCSS and Legend Panel

src/DefaultEditor.js

@@ -1,11 +1,13 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {
+  SubPanel,
   ColorPicker,
   DataSelector,
   Dropdown,
   Flaglist,
   Fold,
+  Info,
   Numeric,
   Panel,
   PanelMenuWrapper,
@@ -202,6 +204,7 @@ class DefaultEditor extends Component {
                 attr="legend.font.size"
                 postfix="px"
               />
+              <ColorPicker label={_('Color')} attr="legend.font.color" />
             </Section>
             <Section name={_('Legend Box')}>
               <Numeric
@@ -210,8 +213,42 @@ class DefaultEditor extends Component {
                 attr="legend.borderwidth"
                 postfix="px"
               />
+              <ColorPicker
+                label={_('Border Color')}
+                attr="legend.bordercolor"
+              />
+              <ColorPicker
+                label={_('Background Color')}
+                attr="legend.bgcolor"
+              />
             </Section>
             <Section name={_('Positioning')}>
+              <SubPanel>
+                <Section name={_('Anchor Point')}>
+                  <Info>
+                    {_(
+                      'The positioning inputs are relative to the ' +
+                        'anchor points on the text box'
+                    )}
+                  </Info>
+                  <Radio
+                    attr="legend.xanchor"
+                    options={[
+                      {label: _('Left'), value: 'left'},
+                      {label: _('Center'), value: 'center'},
+                      {label: _('Right'), value: 'right'},
+                    ]}
+                  />
+                  <Radio
+                    attr="legend.yanchor"
+                    options={[
+                      {label: _('Top'), value: 'top'},
+                      {label: _('Middle'), value: 'middle'},
+                      {label: _('Bottom'), value: 'bottom'},
+                    ]}
+                  />
+                </Section>
+              </SubPanel>
               <Numeric
                 label={_('X Position')}
                 step={0.01}

src/components/containers/Fold.js

@@ -8,11 +8,11 @@ export default class Fold extends Component {
     const {canDelete, name} = this.props;
     const doDelete = canDelete && typeof deleteContainer === 'function';
     return (
-      <div className={bem('accordion-panel', 'top', ['active'])}>
+      <div className={bem('fold', 'top', ['active'])}>
         {this.props.name}
         {doDelete ? (
           <a
-            className={bem('accordion-panel', 'delete')}
+            className={bem('fold', 'delete')}
             href="#"
             onClick={deleteContainer}
           >
@@ -28,9 +28,7 @@ export default class Fold extends Component {
     return (
       <div>
         {this.props.hideHeader ? null : this.renderHeader()}
-        <div className={bem('accordion-panel', 'panel', modifiers)}>
-          {this.props.children}
-        </div>
+        <div className={bem('fold', modifiers)}>{this.props.children}</div>
       </div>
     );
   }

src/components/containers/Section.js

@@ -1,6 +1,7 @@
+import SubPanel from './SubPanel';
 import React, {Component, cloneElement} from 'react';
 import PropTypes from 'prop-types';
-import {bem} from '../../lib';
+import {icon} from '../../lib';
 import unpackPlotProps from '../../lib/unpackPlotProps';
 
 function childIsVisible(child) {
@@ -11,42 +12,63 @@ class Section extends Component {
   constructor(props, context) {
     super(props, context);
 
-    this.children = this.processChildren(context);
+    this.children = null;
+    this.subPanel = null;
+
+    this.processAndSetChildren(context);
   }
 
   componentWillReceiveProps(nextProps, nextContext) {
-    this.children = this.processChildren(nextContext);
+    this.processAndSetChildren(nextContext);
   }
 
-  processChildren(context) {
+  processAndSetChildren(context) {
     let children = this.props.children;
     if (!Array.isArray(children)) {
       children = [children];
     }
-    children = children.filter(c => Boolean(c));
+
+    const attrChildren = [];
+    let subPanel = null;
 
     for (let i = 0; i < children.length; i++) {
       let child = children[i];
+      if (!child) {
+        continue;
+      }
+      if (child.type === SubPanel) {
+        // Process the first subPanel. Ignore the rest.
+        if (subPanel) {
+          continue;
+        }
+        subPanel = child;
+        continue;
+      }
 
       let isAttr = !!child.props.attr;
       let plotProps = isAttr
         ? unpackPlotProps(child.props, context, child.constructor)
-        : {};
+        : {isVisible: true};
       let childProps = Object.assign({plotProps}, child.props);
       childProps.key = i;
-
-      children[i] = cloneElement(child, childProps, child.children);
+      attrChildren.push(cloneElement(child, childProps));
     }
 
-    return children;
+    this.children = attrChildren.length ? attrChildren : null;
+    this.subPanel = subPanel;
   }
 
   render() {
-    const hasVisibleChildren = this.children.some(childIsVisible);
+    const hasVisibleChildren =
+      (this.children && this.children.some(childIsVisible)) ||
+      Boolean(this.subPanel);
 
     return hasVisibleChildren ? (
-      <div className={bem('section')}>
-        <div className={bem('section', 'heading')}>{this.props.name}</div>
+      <div className="section">
+        <div className="section__heading">
+          {this.props.name}
+          {this.subPanel}
+        </div>
         {this.children}
       </div>
     ) : null;

src/components/containers/SubPanel.js

@@ -0,0 +1,42 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+
+export default class SubPanel extends Component {
+  constructor() {
+    super();
+    this.state = {isVisible: false};
+
+    this.toggleVisibility = this.toggleVisibility.bind(this);
+  }
+
+  toggleVisibility() {
+    this.setState({isVisible: !this.state.isVisible});
+  }
+
+  render() {
+    const toggleClass = `subpanel__toggle ${this.props.toggleIconClass}`;
+    const isVisible = this.props.show || this.state.isVisible;
+    return (
+      <span>
+        <span>
+          <i className={toggleClass} onClick={this.toggleVisibility} />
+        </span>
+        {isVisible ? (
+          <div className="subpanel">
+            <div className="subpanel__cover" onClick={this.toggleVisibility} />
+            <div>{this.props.children}</div>
+          </div>
+        ) : null}
+      </span>
+    );
+  }
+}
+
+SubPanel.propTypes = {
+  toggleIconClass: PropTypes.string.isRequired,
+  show: PropTypes.bool,
+};
+
+SubPanel.defaultProps = {
+  toggleIconClass: 'plotlyjs_editor__icon-cog',
+};

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import Section from '../Section';
-import {Flaglist, Numeric} from '../../fields';
+import SubPanel from '../SubPanel';
+import {Flaglist, Info, Numeric} from '../../fields';
 import {TestEditor, fixtures, plotly} from '../../../lib/test-utils';
 import {connectTraceToPlot} from '../../../lib';
 import {mount} from 'enzyme';
@@ -47,6 +48,24 @@ describe('Section', () => {
     ).toBe(false);
   });
 
+  it('is visible if it contains any non attr children', () => {
+    const wrapper = mount(
+      <TestEditor
+        plotly={plotly}
+        onUpdate={jest.fn()}
+        {...fixtures.scatter({deref: true})}
+      >
+        <Section name="test-section">
+          <Info>INFO</Info>
+        </Section>
+      </TestEditor>
+    ).find('[name="test-section"]');
+
+    expect(wrapper.children().length).toBe(1);
+    expect(wrapper.find(Info).exists()).toBe(true);
+    expect(wrapper.find(Info).text()).toBe('INFO');
+  });
+
   it('is not visible if it contains no visible children', () => {
     // pull and hole are not scatter attrs. Section should not show.
     const wrapper = mount(
@@ -71,4 +90,26 @@ describe('Section', () => {
     expect(wrapper.find(Flaglist).exists()).toBe(false);
     expect(wrapper.find(Numeric).exists()).toBe(false);
   });
+
+  it('will render first subPanel even with no visible attrs', () => {
+    const wrapper = mount(
+      <TestEditor
+        plotly={plotly}
+        onUpdate={jest.fn()}
+        {...fixtures.scatter({deref: true})}
+      >
+        <Section name="test-section">
+          <SubPanel show>
+            <Info>INFO</Info>
+          </SubPanel>
+          <SubPanel show>
+            <Info>MISINFORMATION</Info>
+          </SubPanel>
+        </Section>
+      </TestEditor>
+    ).find('[name="test-section"]');
+
+    expect(wrapper.find(Info).length).toBe(1);
+    expect(wrapper.find(Info).text()).toBe('INFO');
+  });
 });

src/components/containers/index.js

@@ -1,6 +1,7 @@
+import SubPanel from './SubPanel';
 import Fold from './Fold';
 import Panel from './Panel';
 import Section from './Section';
 import TraceAccordion from './TraceAccordion';
 
-export {Fold, Panel, Section, TraceAccordion};
+export {SubPanel, Fold, Panel, Section, TraceAccordion};

src/components/fields/Info.js

@@ -0,0 +1,13 @@
+import Field from './Field';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+
+export default class Info extends Component {
+  render() {
+    return <Field {...this.props}>{this.props.children}</Field>;
+  }
+}
+
+Info.propTypes = {
+  ...Field.propTypes,
+};

src/components/fields/index.js

@@ -1,6 +1,7 @@
 import ColorPicker from './Color';
 import Dropdown from './Dropdown';
 import Flaglist from './Flaglist';
+import Info from './Info';
 import Radio from './Radio';
 import DataSelector from './DataSelector';
 import Numeric from './Numeric';
@@ -10,6 +11,7 @@ export {
   ColorPicker,
   Dropdown,
   Flaglist,
+  Info,
   Radio,
   DataSelector,
   Numeric,

src/components/index.js

@@ -2,21 +2,24 @@ import {
   ColorPicker,
   Dropdown,
   Flaglist,
+  Info,
   Radio,
   DataSelector,
   Numeric,
   TraceSelector,
 } from './fields';
 
-import {Fold, Panel, Section, TraceAccordion} from './containers';
+import {SubPanel, Fold, Panel, Section, TraceAccordion} from './containers';
 import PanelMenuWrapper from './PanelMenuWrapper';
 
 export {
+  SubPanel,
   ColorPicker,
   DataSelector,
   Dropdown,
   Flaglist,
   Fold,
+  Info,
   Numeric,
   Panel,
   PanelMenuWrapper,