Rename Panel/Fold/Section-> PlotlyPanel/PlotlyFold/PlotlySection

Author: VeraZab

examples/custom/src/CustomEditor.js

@@ -3,13 +3,13 @@ import {
   Flaglist,
   ColorPicker,
   ColorscalePicker,
-  Fold,
+  PlotlyFold,
   PanelMenuWrapper,
   TextEditor,
   Radio,
   Dropdown,
   Info,
-  Section,
+  PlotlySection,
   Numeric,
   LayoutPanel,
   Button,
@@ -22,16 +22,16 @@ export default class CustomEditor extends Component {
     return (
       <PanelMenuWrapper>
         <TraceAccordion group="Traces" name="Style">
-          <Section name="Colorscale" attr="marker.colorscale">
+          <PlotlySection name="Colorscale" attr="marker.colorscale">
             <ColorscalePicker label="Colorscale" attr="marker.colorscale" />
-          </Section>
+          </PlotlySection>
         </TraceAccordion>
 
         <LayoutPanel group="Layout" name="Style">
-          <Fold name="Fold">
+          <PlotlyFold name="PlotlyFold">
             {
-              // At least one of the direct children of Fold must have an attr prop
-              // for the Fold to display itself
+              // At least one of the direct children of PlotlyFold must have an attr prop
+              // for the PlotlyFold to display itself
             }
             <Info attr="title">
               <p>
@@ -42,7 +42,7 @@ export default class CustomEditor extends Component {
                 This is an <code>Info</code> component.
               </p>
             </Info>
-            <Section name="Section">
+            <PlotlySection name="PlotlySection">
               <Numeric label="Numeric" attr="width" show units="units" />
               <Dropdown
                 label="Dropdown"
@@ -80,8 +80,8 @@ export default class CustomEditor extends Component {
               />
               <TextEditor attr="title" label="TextEditor htmlOnly" htmlOnly />
               <TextEditor attr="title" label="TextEditor latexOnly" latexOnly />
-            </Section>
-          </Fold>
+            </PlotlySection>
+          </PlotlyFold>
         </LayoutPanel>
         <SingleSidebarItem>
           <Button

src/__tests__/PlotlyEditor.test.js

@@ -1,4 +1,4 @@
-import PlotlyEditor, {Fold} from '..';
+import PlotlyEditor, {PlotlyFold} from '..';
 import {configure, mount} from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React, {Component} from 'react';
@@ -54,7 +54,7 @@ describe('<TestApp>', () => {
   });
 
   it('Can create and delete traces', done => {
-    expect(app.find(Fold).length).toEqual(0);
+    expect(app.find(PlotlyFold).length).toEqual(0);
 
     app
       .find('.js-add-button')

src/components/containers/AnnotationAccordion.js

@@ -1,10 +1,10 @@
-import Fold from './Fold';
+import PlotlyFold from './PlotlyFold';
 import TraceRequiredPanel from './TraceRequiredPanel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectAnnotationToLayout, localize} from 'lib';
 
-const AnnotationFold = connectAnnotationToLayout(Fold);
+const AnnotationFold = connectAnnotationToLayout(PlotlyFold);
 
 class AnnotationAccordion extends Component {
   render() {

src/components/containers/AxesFold.js

@@ -1,5 +1,5 @@
 import AxesSelector from '../fields/AxesSelector';
-import Fold from './Fold';
+import PlotlyFold from './PlotlyFold';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectAxesToLayout} from 'lib';
@@ -8,10 +8,10 @@ class AxesFold extends Component {
   render() {
     const {children, options} = this.props;
     return options.length && children ? (
-      <Fold {...this.props}>
+      <PlotlyFold {...this.props}>
         {options.length === 1 ? null : <AxesSelector axesOptions={options} />}
         {children}
-      </Fold>
+      </PlotlyFold>
     ) : null;
   }
 }

src/components/containers/ImageAccordion.js

@@ -1,10 +1,10 @@
-import Fold from './Fold';
+import PlotlyFold from './PlotlyFold';
 import TraceRequiredPanel from './TraceRequiredPanel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectImageToLayout, localize} from 'lib';
 
-const ImageFold = connectImageToLayout(Fold);
+const ImageFold = connectImageToLayout(PlotlyFold);
 
 class ImageAccordion extends Component {
   render() {

src/components/containers/Fold.js renamed to src/components/containers/PlotlyFold.js

@@ -10,7 +10,7 @@ import {
   striptags,
 } from 'lib';
 
-class Fold extends Component {
+class PlotlyFold extends Component {
   constructor(props, context) {
     super(props, context);
 
@@ -136,9 +136,9 @@ class Fold extends Component {
   }
 }
 
-Fold.plotly_editor_traits = {foldable: true};
+PlotlyFold.plotly_editor_traits = {foldable: true};
 
-Fold.propTypes = {
+PlotlyFold.propTypes = {
   canDelete: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
@@ -151,11 +151,17 @@ Fold.propTypes = {
   name: PropTypes.string,
 };
 
-Fold.contextTypes = Object.assign(
+PlotlyFold.contextTypes = Object.assign(
   {
     deleteContainer: PropTypes.func,
   },
   containerConnectedContextTypes
 );
 
-export default localize(Fold);
+export default localize(PlotlyFold);
+
+// just to keep naming consistent
+export class Fold extends PlotlyFold {}
+Fold.plotly_editor_traits = {
+  foldable: true,
+};

src/components/containers/Panel.js renamed to src/components/containers/PlotlyPanel.js

@@ -26,7 +26,7 @@ PanelErrorImpl.propTypes = {
 
 const PanelError = localize(PanelErrorImpl);
 
-class Panel extends Component {
+class PlotlyPanel extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -123,23 +123,29 @@ class Panel extends Component {
   }
 }
 
-Panel.plotly_editor_traits = {no_visibility_forcing: true};
+PlotlyPanel.plotly_editor_traits = {no_visibility_forcing: true};
 
-Panel.propTypes = {
+PlotlyPanel.propTypes = {
   children: PropTypes.node,
   addAction: PropTypes.object,
   showExpandCollapse: PropTypes.bool,
   noPadding: PropTypes.bool,
 };
 
-Panel.defaultProps = {
+PlotlyPanel.defaultProps = {
   showExpandCollapse: true,
 };
 
-Panel.contextTypes = {
+PlotlyPanel.contextTypes = {
   layout: PropTypes.object,
   onUpdate: PropTypes.func,
   updateContainer: PropTypes.func,
 };
 
-export default Panel;
+export default PlotlyPanel;
+
+export class Panel extends PlotlyPanel {}
+
+Panel.plotly_editor_traits = {
+  no_visibility_forcing: false,
+};

src/components/containers/Section.js renamed to src/components/containers/PlotlySection.js

@@ -5,9 +5,28 @@ import {
   localize,
   unpackPlotProps,
 } from '../../lib';
-import SectionHeader from './SectionHeader';
 
-class Section extends Component {
+export class Section extends Component {
+  render() {
+    return (
+      <div className="section">
+        <div className="section__heading">
+          <div className="section__heading__text">{this.props.name}</div>
+        </div>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+Section.plotly_editor_traits = {no_visibility_forcing: false};
+Section.propTypes = {
+  children: PropTypes.node,
+  name: PropTypes.string,
+  attr: PropTypes.string,
+};
+
+class PlotlySection extends Section {
   constructor(props, context) {
     super(props, context);
 
@@ -52,20 +71,24 @@ class Section extends Component {
     }
     return (
       <div className="section">
-        {this.props.name && <SectionHeader name={this.props.name} />}
+        {this.props.name ? (
+          <div className="section__heading">
+            <div className="section__heading__text">{this.props.name}</div>
+          </div>
+        ) : null}
         {this.props.children}
       </div>
     );
   }
 }
 
-Section.plotly_editor_traits = {no_visibility_forcing: true};
+PlotlySection.plotly_editor_traits = {no_visibility_forcing: true};
 
-Section.propTypes = {
+PlotlySection.propTypes = {
   children: PropTypes.node,
   name: PropTypes.string,
   attr: PropTypes.string,
 };
 
-Section.contextTypes = containerConnectedContextTypes;
-export default localize(Section);
+PlotlySection.contextTypes = containerConnectedContextTypes;
+export default localize(PlotlySection);

src/components/containers/RangeSelectorAccordion.js

@@ -1,10 +1,10 @@
-import Fold from './Fold';
-import Panel from './Panel';
+import PlotlyFold from './PlotlyFold';
+import PlotlyPanel from './PlotlyPanel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectRangeSelectorToAxis, localize} from 'lib';
 
-const RangeSelectorFold = connectRangeSelectorToAxis(Fold);
+const RangeSelectorFold = connectRangeSelectorToAxis(PlotlyFold);
 
 class RangeSelectorAccordion extends Component {
   render() {
@@ -52,7 +52,11 @@ class RangeSelectorAccordion extends Component {
       },
     };
 
-    return <Panel addAction={addAction}>{content ? content : null}</Panel>;
+    return (
+      <PlotlyPanel addAction={addAction}>
+        {content ? content : null}
+      </PlotlyPanel>
+    );
   }
 }