Optional Mount Parameters (#123)

* adding optional parameters

* updating bodyText mount prop to default

* updating snapshot for new props

* adding parent element for mounting

* adding null default for parentElement

* adding dist to gitignore

* adding test case for mounting to element

* adding div to document in test

* unmount after test

* updating test to pass

* updating eslint to handle certain rules as warning and fix others

src/components/__snapshots__/widget.test.js.snap

@@ -1,7 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Widget /> open/close 1`] = `
-<Widget>
+<Widget
+  bodyText="Body"
+  footerText="Footer"
+  headerText="Header"
+>
   <div
     className="docked-widget"
   >
@@ -65,7 +69,11 @@ exports[`<Widget /> open/close 1`] = `
 `;
 
 exports[`<Widget /> open/close 2`] = `
-<Widget>
+<Widget
+  bodyText="Body"
+  footerText="Footer"
+  headerText="Header"
+>
   <div
     className="docked-widget"
   >
@@ -121,7 +129,11 @@ exports[`<Widget /> open/close 2`] = `
 `;
 
 exports[`<Widget /> open/close 3`] = `
-<Widget>
+<Widget
+  bodyText="Body"
+  footerText="Footer"
+  headerText="Header"
+>
   <div
     className="docked-widget"
   >

src/components/widget.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import './widget.scss';
 
@@ -47,6 +48,7 @@ class Widget extends Component {
   render() {
     const { opened } = this.state;
     const body = this.renderBody();
+    const { bodyText, headerText, footerText } = this.props;
 
     return (
       <div className="docked-widget">
@@ -55,7 +57,7 @@ class Widget extends Component {
             <div className={`widget widget-${status}`}>
               <div className="widget-header">
                 <div className="widget-header-title">
-                  Header
+                  {headerText}
                 </div>
                 <button
                   type="button"
@@ -67,10 +69,10 @@ class Widget extends Component {
                 </button>
               </div>
               <div className="widget-body">
-                Body
+                {bodyText}
               </div>
               <div className="widget-footer">
-                Footer
+                {footerText}
               </div>
             </div>
           )}
@@ -81,4 +83,16 @@ class Widget extends Component {
   }
 }
 
+Widget.propTypes = {
+  headerText: PropTypes.string,
+  bodyText: PropTypes.string,
+  footerText: PropTypes.string,
+};
+
+Widget.defaultProps = {
+  headerText: 'Header',
+  bodyText: 'Body',
+  footerText: 'Footer',
+};
+
 export default Widget;

src/components/widget.test.js

@@ -28,10 +28,9 @@ describe('<Widget />', () => {
 
     {
       const dockAnchorEl = await waitForSelection(widgetDom, 'button.dock');
-     expect(dockAnchorEl).toHaveLength(1);
+      expect(dockAnchorEl).toHaveLength(1);
     }
 
     expect(widgetDom).toMatchSnapshot();
   });
-
 });

src/outputs/embeddable-widget.js

@@ -6,8 +6,8 @@ import '../../vendor/cleanslate.css';
 export default class EmbeddableWidget {
   static el;
 
-  static mount() {
-    const component = <Widget />;
+  static mount({ parentElement = null, ...props } = {}) {
+    const component = <Widget {...props} />;
 
     function doRender() {
       if (EmbeddableWidget.el) {
@@ -15,7 +15,12 @@ export default class EmbeddableWidget {
       }
       const el = document.createElement('div');
       el.setAttribute('class', 'cleanslate');
-      document.body.appendChild(el);
+
+      if (parentElement) {
+        document.querySelector(parentElement).appendChild(el);
+      } else {
+        document.body.appendChild(el);
+      }
       ReactDOM.render(
         component,
         el,

src/outputs/embeddable-widget.test.js

@@ -21,6 +21,20 @@ describe('EmbeddableWidget', () => {
     await waitForSelection(document, 'div');
   });
 
+  test('#mount to document element', async () => {
+    const newElement = document.createElement('span');
+    newElement.setAttribute('id', 'widget-mount');
+    document.body.appendChild(newElement);
+
+    EmbeddableWidget.mount({
+      parentElement: '#widget-mount',
+    });
+
+    await waitForSelection(document, 'div');
+
+    expect(document.querySelectorAll('#widget-mount')).toHaveLength(1);
+  });
+
   test('#mount twice', async () => {
     EmbeddableWidget.mount();
     expect(() => EmbeddableWidget.mount()).toThrow('already mounted');