diff --git a/__tests__/integration/mirador/plugins/add.html b/__tests__/integration/mirador/plugins/add.html
new file mode 100644
index 0000000000000000000000000000000000000000..e9614e60cd4e3ebd77e9f13387343fd725b94ae7
--- /dev/null
+++ b/__tests__/integration/mirador/plugins/add.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="theme-color" content="#000000">
+ <title>Mirador</title>
+ </head>
+ <body>
+ <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
+ <script src="../../../../node_modules/react/umd/react.development.js"></script>
+ <script src="../../../../node_modules/react-dom/umd/react-dom.development.js"></script>
+ <script>document.write("<script type='text/javascript' src='../../../../dist/mirador.min.js?v=" + Date.now() + "'><\/script>");</script>
+ <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+ <script type="text/babel">
+
+ const config = { id: 'mirador' };
+
+ function AddPluginComponentA(props) {
+ return (
+ <div id="add-plugin-component-a">
+ Plugin A
+ </div>
+ );
+ }
+
+ function AddPluginComponentB(props) {
+ return (
+ <div id="add-plugin-component-b">
+ Plugin B
+ </div>
+ );
+ }
+
+ const addPluginA = {
+ target: 'WorkspaceControlPanelButtons',
+ mode: 'add',
+ component: AddPluginComponentA,
+ };
+
+ const addPluginB = {
+ target: 'WorkspaceControlPanelButtons',
+ mode: 'add',
+ component: AddPluginComponentB,
+ };
+
+ const miradorInstance = Mirador.viewer(config, [addPluginA, addPluginB]);
+
+ </script>
+ </body>
+</html>
diff --git a/__tests__/integration/mirador/plugins/add.test.js b/__tests__/integration/mirador/plugins/add.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..bf91b2f68e8147c8babebaefe99c3aa241732e74
--- /dev/null
+++ b/__tests__/integration/mirador/plugins/add.test.js
@@ -0,0 +1,13 @@
+
+describe('"add" mode plugins', () => {
+ beforeAll(async () => {
+ await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/plugins/add.html');
+ await expect(page).toMatchElement('.mirador-viewer');
+ await page.waitFor(1000);
+ });
+
+ it('adds to <WorkspaceControlPanelButtons />', async () => {
+ await expect(page).toMatchElement('.mirador-workspace-control-panel-buttons #add-plugin-component-a');
+ await expect(page).toMatchElement('.mirador-workspace-control-panel-buttons #add-plugin-component-b');
+ });
+});
diff --git a/__tests__/integration/mirador/plugins/delete.html b/__tests__/integration/mirador/plugins/delete.html
new file mode 100644
index 0000000000000000000000000000000000000000..de1148229b2cb746949104f7189e8b5406a5e022
--- /dev/null
+++ b/__tests__/integration/mirador/plugins/delete.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="theme-color" content="#000000">
+ <title>Mirador</title>
+ </head>
+ <body>
+ <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
+ <script src="../../../../node_modules/react/umd/react.development.js"></script>
+ <script src="../../../../node_modules/react-dom/umd/react-dom.development.js"></script>
+ <script>document.write("<script type='text/javascript' src='../../../../dist/mirador.min.js?v=" + Date.now() + "'><\/script>");</script>
+ <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+ <script type="text/babel">
+
+ const config = { id: 'mirador' };
+
+ const deletePlugin = {
+ target: 'WorkspaceControlPanelButtons',
+ mode: 'delete',
+ }
+
+ Mirador.viewer(config, [deletePlugin]);
+
+ </script>
+ </body>
+</html>
diff --git a/__tests__/integration/mirador/plugins/delete.test.js b/__tests__/integration/mirador/plugins/delete.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..6d4d487a97cdc37835a00edf2afd17744c6a3484
--- /dev/null
+++ b/__tests__/integration/mirador/plugins/delete.test.js
@@ -0,0 +1,12 @@
+
+describe('"delete" mode plugin', () => {
+ beforeAll(async () => {
+ await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/plugins/delete.html');
+ await expect(page).toMatchElement('.mirador-viewer');
+ await page.waitFor(1000);
+ });
+
+ it('deletes <WorkspaceControlPanelButtons />', async () => {
+ await expect(page).not.toMatchElement('.mirador-workspace-control-panel-buttons');
+ });
+});
diff --git a/__tests__/integration/mirador/plugins/replace.html b/__tests__/integration/mirador/plugins/replace.html
new file mode 100644
index 0000000000000000000000000000000000000000..e6de84252b553c2fd2a5f4648f0580dba175f7b8
--- /dev/null
+++ b/__tests__/integration/mirador/plugins/replace.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="theme-color" content="#000000">
+ <title>Mirador</title>
+ </head>
+ <body>
+ <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
+ <script src="../../../../node_modules/react/umd/react.development.js"></script>
+ <script src="../../../../node_modules/react-dom/umd/react-dom.development.js"></script>
+ <script>document.write("<script type='text/javascript' src='../../../../dist/mirador.min.js?v=" + Date.now() + "'><\/script>");</script>
+ <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+ <script type="text/babel">
+
+ const config = { id: 'mirador' };
+
+ function ReplacePluginComponent(props) {
+ return (
+ <div id="replace-plugin-component">
+ </div>
+ );
+ }
+
+ const replacePlugin = {
+ target: 'WorkspaceControlPanelButtons',
+ mode: 'replace',
+ component: ReplacePluginComponent,
+ };
+
+ const miradorInstance = Mirador.viewer(config, [replacePlugin]);
+
+ </script>
+ </body>
+</html>
diff --git a/__tests__/integration/mirador/plugins/replace.test.js b/__tests__/integration/mirador/plugins/replace.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..196c6408bfc75c1643a97ffc3277dcd9bef68e89
--- /dev/null
+++ b/__tests__/integration/mirador/plugins/replace.test.js
@@ -0,0 +1,13 @@
+
+describe('"replace" mode plugin', () => {
+ beforeAll(async () => {
+ await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/plugins/replace.html');
+ await expect(page).toMatchElement('.mirador-viewer');
+ await page.waitFor(1000);
+ });
+
+ it('replaces <WorkspaceControlPanelButtons />', async () => {
+ await expect(page).not.toMatchElement('.mirador-workspace-panel-buttons');
+ await expect(page).toMatchElement('#replace-plugin-component');
+ });
+});
diff --git a/__tests__/integration/mirador/plugins/wrap.html b/__tests__/integration/mirador/plugins/wrap.html
new file mode 100644
index 0000000000000000000000000000000000000000..9e0ed69d357c26f40968bb0b8be7c3d4be96abf6
--- /dev/null
+++ b/__tests__/integration/mirador/plugins/wrap.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="theme-color" content="#000000">
+ <title>Mirador</title>
+ </head>
+ <body>
+ <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
+ <script src="../../../../node_modules/react/umd/react.development.js"></script>
+ <script src="../../../../node_modules/react-dom/umd/react-dom.development.js"></script>
+ <script>document.write("<script type='text/javascript' src='../../../../dist/mirador.min.js?v=" + Date.now() + "'><\/script>");</script>
+ <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+ <script type="text/babel">
+
+ const config = { id: 'mirador' };
+
+ function WrapPluginComponent(props) {
+ return (
+ <div id="wrap-plugin-component">
+ <props.TargetComponent {...props} />
+ </div>
+ );
+ }
+
+ const wrapPlugin = {
+ target: 'WorkspaceControlPanelButtons',
+ mode: 'wrap',
+ component: WrapPluginComponent,
+ };
+
+ const miradorInstance = Mirador.viewer(config, [wrapPlugin]);
+
+ </script>
+ </body>
+</html>
diff --git a/__tests__/integration/mirador/plugins/wrap.test.js b/__tests__/integration/mirador/plugins/wrap.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..20c927a6107c88098c2b8cf304bb7e896a36011e
--- /dev/null
+++ b/__tests__/integration/mirador/plugins/wrap.test.js
@@ -0,0 +1,12 @@
+
+describe('"wrap" mode plugin', () => {
+ beforeAll(async () => {
+ await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/plugins/wrap.html');
+ await expect(page).toMatchElement('.mirador-viewer');
+ await page.waitFor(1000);
+ });
+
+ it('wraps <WorkspaceControlPanelButtons />', async () => {
+ await expect(page).toMatchElement('#wrap-plugin-component .mirador-workspace-control-panel-buttons');
+ });
+});
diff --git a/src/components/WorkspaceControlPanelButtons.js b/src/components/WorkspaceControlPanelButtons.js
index b4150e929e2316cab7eb3ce5f10483547b24b4ec..0aaf8af86c2daa5043b40ab34856aa4af61bf7c0 100644
--- a/src/components/WorkspaceControlPanelButtons.js
+++ b/src/components/WorkspaceControlPanelButtons.js
@@ -1,4 +1,5 @@
import React, { Component } from 'react';
+import ns from '../config/css-ns';
import WorkspaceFullScreenButton from '../containers/WorkspaceFullScreenButton';
import WorkspaceAddButton from '../containers/WorkspaceAddButton';
import WorkspaceMenuButton from '../containers/WorkspaceMenuButton';
@@ -25,12 +26,12 @@ export class WorkspaceControlPanelButtons extends Component {
*/
render() {
return (
- <>
+ <div className={ns('workspace-control-panel-buttons')}>
<WorkspaceAddButton />
<WorkspaceMenuButton />
<WorkspaceFullScreenButton />
<PluginHook {...this.props} />
- </>
+ </div>
);
}
}