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

.eslintrc

@@ -7,7 +7,10 @@
   "extends": "airbnb",
   "rules": {
     "no-underscore-dangle": 0,
-    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "import/prefer-default-export": 1,
+    "import/no-extraneous-dependencies": 1,
+    "no-await-in-loop": 1
   },
   "plugins": ["react"],
   "settings": {

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 coverage
+/dist/*

jest/cssTransform.js

@@ -1,8 +1,8 @@
 module.exports = {
   process() {
-    return 'module.exports = {};'
+    return 'module.exports = {};';
   },
   getCacheKey() {
-    return 'cssTransform'
+    return 'cssTransform';
   },
-}
+};

jest/fileTransform.js

@@ -1,7 +1,7 @@
-const path = require('path')
+const path = require('path');
 
 module.exports = {
   process(src, filename) {
-    return `module.exports = ${JSON.stringify(path.basename(filename))};`
+    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
   },
-}
+};

package.json

@@ -8,7 +8,8 @@
     "start": "webpack-dev-server",
     "test": "jest",
     "test-update-snapshots": "jest --updateSnapshot",
-    "deploy": "npm run build && gh-pages -d dist"
+    "deploy": "npm run build && gh-pages -d dist",
+    "lint": "./node_modules/.bin/eslint ."
   },
   "babel": {
     "presets": [

public/blank.html

@@ -8,7 +8,9 @@
     
     <script src="./widget.js"></script>
     <script>
-      EmbeddableWidget.mount();
+      EmbeddableWidget.mount({
+        bodyText: 'Body'
+      });
     </script>
   </body>
 </html>

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');

webpack.config.js

@@ -1,5 +1,4 @@
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
 const increaseSpecificity = require('postcss-increase-specificity');
 const JavaScriptObfuscator = require('webpack-obfuscator');
 const CopyPlugin = require('copy-webpack-plugin');
@@ -14,7 +13,7 @@ const defaultConfig = {
   mode: process.env.NODE_ENV || 'development',
   devServer: {
     contentBase: publicDir,
-    port: 9000
+    port: 9000,
   },
   plugins: [
     // new CleanWebpackPlugin({protectWebpackAssets: false}),
@@ -39,7 +38,10 @@ const defaultConfig = {
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        use: ['eslint-loader']
+        loader: 'eslint-loader',
+        options: {
+          emitWarning: true,
+        },
       },
       {
         test: /\.(scss|css)$/,