Adds basic functionality to create a new annotation in a companion window

__tests__/miradorAnnotationPlugin.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
+import Button from '@material-ui/core/Button';
 import miradorAnnotationPlugin from '../src/plugins/miradorAnnotationPlugin';
+import AnnotationCreation from '../src/AnnotationCreation';
 
 /** */
 function createWrapper(props) {
@@ -8,6 +10,7 @@ function createWrapper(props) {
     <miradorAnnotationPlugin.component
       TargetComponent={'<div>hello</div>'}
       targetProps={{}}
+      addCompanionWindow={jest.fn()}
       {...props}
     />,
   );
@@ -15,8 +18,23 @@ function createWrapper(props) {
 
 describe('MiradorAnnotation', () => {
   let wrapper;
-  it('renders MiradorAnnotation', () => {
+  it('renders a create new button', () => {
     wrapper = createWrapper();
-    expect(wrapper.text()).toBe('HelloWorld');
+    expect(wrapper.find(Button).text()).toBe('Create New');
+  });
+  it('opens a new companionWindow when clicked', () => {
+    const mockAddCompanionWindow = jest.fn();
+    wrapper = createWrapper({
+      addCompanionWindow: mockAddCompanionWindow,
+    });
+    wrapper.find(Button).simulate('click');
+    expect(mockAddCompanionWindow).toHaveBeenCalledWith(
+      'custom',
+      {
+        children: <AnnotationCreation />,
+        position: 'right',
+        title: 'New annotation',
+      },
+    );
   });
 });

demo/src/index.js

 
-import mirador from 'mirador';
+import mirador from 'mirador/dist/es/src/index';
 
-import { miradorAnnotationPlugin } from '../../src'
+import { miradorAnnotationPlugin } from '../../src';
 
 const config = {
   id: 'demo',
   windows: [{
-    loadedManifest: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest'
-  }]
-}
+    loadedManifest: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest',
+  }],
+};
 
 const miradorInstance = mirador.viewer(config, [
   miradorAnnotationPlugin,

package.json

@@ -22,13 +22,18 @@
   },
   "dependencies": {},
   "peerDependencies": {
+    "@material-ui/core": "^4.9.13",
+    "@material-ui/icons": "^4.9.1",
     "mirador": "^3.0.0-beta.8",
+    "prop-types": "^15.7.2",
     "react": "16.x"
   },
   "devDependencies": {
     "@babel/core": "^7.9.6",
     "@babel/preset-env": "^7.9.6",
     "@babel/preset-react": "^7.9.4",
+    "@material-ui/core": "^4.9.13",
+    "@material-ui/icons": "^4.9.1",
     "babel-eslint": "^10.1.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
@@ -44,6 +49,7 @@
     "jest": "^26.0.1",
     "mirador": "^3.0.0-beta.8",
     "nwb": "0.24.x",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },

src/AnnotationCreation.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+/** */
+class AnnotationCreation extends Component {
+  /** */
+  render() {
+    return (
+      <div>
+        Annotation creation
+      </div>
+    );
+  }
+}
+
+export default AnnotationCreation;

src/plugins/miradorAnnotationPlugin.js

 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import * as actions from 'mirador/dist/es/src/state/actions';
+import Button from '@material-ui/core/Button';
+import AnnotationCreation from '../AnnotationCreation';
 
 /** */
 class MiradorAnnotation extends Component {
+  /** */
+  constructor(props) {
+    super(props);
+    this.openCreateAnnotationCompanionWindow = this.openCreateAnnotationCompanionWindow.bind(this);
+  }
+
+  /** */
+  openCreateAnnotationCompanionWindow(e) {
+    const { addCompanionWindow } = this.props;
+    addCompanionWindow('custom', {
+      children: (
+        <AnnotationCreation />
+      ),
+      position: 'right',
+      title: 'New annotation',
+    });
+  }
+
   /** */
   render() {
+    const { TargetComponent, targetProps } = this.props;
     return (
-      <div>HelloWorld</div>
+      <div>
+        <TargetComponent
+          {...targetProps} // eslint-disable-line react/jsx-props-no-spreading
+        />
+        <div>
+          <Button variant="contained" color="primary" size="small" onClick={this.openCreateAnnotationCompanionWindow}>
+            Create New
+          </Button>
+        </div>
+      </div>
     );
   }
 }
 
+MiradorAnnotation.propTypes = {
+  addCompanionWindow: PropTypes.func.isRequired,
+  TargetComponent: PropTypes.node.isRequired,
+  targetProps: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+};
+
+/** */
+const mapDispatchToProps = (dispatch, props) => ({
+  addCompanionWindow: (content, additionalProps) => dispatch(
+    actions.addCompanionWindow(props.targetProps.windowId, { content, ...additionalProps }),
+  ),
+});
+
 export default {
   component: MiradorAnnotation,
-  mode: 'add',
-  target: 'WindowTopMenu',
+  mapDispatchToProps,
+  mode: 'wrap',
+  target: 'AnnotationSettings',
 };