From 1f175c50ebc2585a8ddf2512504a9278634f349c Mon Sep 17 00:00:00 2001
From: mferrarini <maura_ferrarini@harvard.edu>
Date: Thu, 14 Sep 2023 20:45:50 -0400
Subject: [PATCH 1/5] dragAndDropInfoLink --> iiifInfoLink reconfiguration

---
 README.md                            |  2 +-
 __tests__/MiradorShareDialog.test.js | 15 +++------------
 demo/src/index.js                    |  2 +-
 src/MiradorShareDialog.js            | 25 ++++++++++---------------
 src/MiradorShareEmbed.js             |  6 +++---
 src/miradorSharePlugin.js            |  4 ++--
 6 files changed, 20 insertions(+), 34 deletions(-)

diff --git a/README.md b/README.md
index b19bde5..7986c8e 100644
--- a/README.md
+++ b/README.md
@@ -31,7 +31,7 @@ Configurations for this plugin are injected when Mirador is initialized under th
 
 | Config Key | Type | Description |
 | --- | --- | --- |
-| `dragAndDropInfoLink` | string/url | Provides a `What is IIIF` link under the Alternate Viewers / Drag & Drop that points to the configured URL. This will also be the base of the Drag & Drop link so that if a user clicks instead of drags, they will go the informational page (as opposed to the manifest which is the default behavior) |
+| `iiifInfoLink` | string/url | Provides a `What is IIIF` link under the Alternate viewer section that points to the configured URL |
 | `embedOption` | object | The configuration objects for the Embed section. You can use this if you're able to easily modify the manifest ID to a URL that can be used to embed the resource in an `<iframe>` (most likely in embedded mode where you're only displaying your own content) |
 | `embedOption.enabled` | boolean | Configure whether to render the Embed section in the Share Dialog. |
 | `embedOption.embedIframeAttributes` | string | A string that contains HTML attributes to be applied to the `<iframe>` embed code. (Default: `allowfullscreen frameborder="0"`) |
diff --git a/__tests__/MiradorShareDialog.test.js b/__tests__/MiradorShareDialog.test.js
index 47f7fce..61db679 100644
--- a/__tests__/MiradorShareDialog.test.js
+++ b/__tests__/MiradorShareDialog.test.js
@@ -95,22 +95,13 @@ describe('Dialog', () => {
     });
 
     it('renders the link with IIIF Drag & Drop Compliant URL (passing the manifest in a param)', () => {
-      expect(wrapper.find('WithStyles(ForwardRef(Typography))[variant="body1"] WithStyles(ForwardRef(Link))').props().href).toEqual(
-        'http://example.com/abc/iiif/manifest?manifest=http://example.com/abc/iiif/manifest',
-      );
+      const link = wrapper.find('WithStyles(ForwardRef(Typography))[variant="body1"] WithStyles(ForwardRef(Link))').at(0);
+      expect(link.props().href).toEqual('http://example.com/abc/iiif/manifest?manifest=http://example.com/abc/iiif/manifest');
     });
 
     describe('when an info link is configured/passed in as a prop', () => {
-      it('renders Drag and Drop link with the passed URL as the base (where users will go if they click)', () => {
-        wrapper = createWrapper({ dragAndDropInfoLink: 'http://iiif.io/' });
-
-        expect(wrapper.find('WithStyles(ForwardRef(Typography))[variant="body1"] WithStyles(ForwardRef(Link))').at(0).props().href).toEqual(
-          'http://iiif.io/?manifest=http://example.com/abc/iiif/manifest',
-        );
-      });
-
       it('renders a "What is IIIF" link', () => {
-        wrapper = createWrapper({ dragAndDropInfoLink: 'http://iiif.io/' });
+        wrapper = createWrapper({ iiifInfoLink: 'http://iiif.io/' });
         const link = wrapper.find('WithStyles(ForwardRef(Typography))[variant="body1"] WithStyles(ForwardRef(Link))').at(1);
         expect(link.props().children).toEqual('What is IIIF?');
         expect(link.props().href).toEqual('http://iiif.io/');
diff --git a/demo/src/index.js b/demo/src/index.js
index 27baaec..95ffeaf 100644
--- a/demo/src/index.js
+++ b/demo/src/index.js
@@ -7,7 +7,7 @@ const config = {
     loadedManifest: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest',
   }],
   miradorSharePlugin: {
-    dragAndDropInfoLink: 'https://iiif.io',
+    iiifInfoLink: 'https://iiif.io',
     embedOption: {
       enabled: true,
       embedUrlReplacePattern: [
diff --git a/src/MiradorShareDialog.js b/src/MiradorShareDialog.js
index 0394ace..c2df3b6 100644
--- a/src/MiradorShareDialog.js
+++ b/src/MiradorShareDialog.js
@@ -34,7 +34,7 @@ const mapStateToProps = (state, { windowId }) => {
     embedIframeTitle: embedOption.embedIframeTitle,
     manifestIdReplacePattern: miradorSharePluginConfig.shareLink
       && miradorSharePluginConfig.shareLink.manifestIdReplacePattern,
-    dragAndDropInfoLink: miradorSharePluginConfig.dragAndDropInfoLink,
+    iiifInfoLink: miradorSharePluginConfig.iiifInfoLink,
     manifestId: (getManifestoInstance(state, { windowId }) || {}).id,
     open: (state.windowDialogs[windowId] && state.windowDialogs[windowId].openDialog === 'share'),
     syncIframeDimensions: embedOption.syncIframeDimensions,
@@ -63,28 +63,22 @@ export class MiradorShareDialog extends Component {
   }
 
   dragAndDropUrl() {
-    const { dragAndDropInfoLink, manifestId } = this.props;
-    let baseUrl;
-
-    baseUrl = manifestId;
-
-    if (dragAndDropInfoLink) {
-      baseUrl = dragAndDropInfoLink;
-    }
+    const { manifestId } = this.props;
+    const baseUrl = manifestId;
 
     return `${baseUrl}?manifest=${manifestId}`;
   }
 
   whatIsThisLink() {
-    const { dragAndDropInfoLink } = this.props;
+    const { iiifInfoLink } = this.props;
 
-    if (!dragAndDropInfoLink) return null;
+    if (!iiifInfoLink) return null;
 
     return (
       <React.Fragment>
         {' '}
         [
-        <Link href={dragAndDropInfoLink}>What is IIIF?</Link>
+        <Link href={iiifInfoLink}>What is IIIF?</Link>
         ]
       </React.Fragment>
     );
@@ -149,7 +143,7 @@ export class MiradorShareDialog extends Component {
                 />
                 {' '}
                 <CopyToClipboard text={shareLinkText}>
-                  <Button className={classes.copyButton} variant="outlined" color="primary" aria-label="Copy link">Copy</Button>
+                  <Button className={classes.copyButton} variant="outlined" color="primary" aria-label="Copy link to clipboard">Copy</Button>
                 </CopyToClipboard>
               </div>
               <Divider />
@@ -201,7 +195,7 @@ MiradorShareDialog.propTypes = {
   containerId: PropTypes.string.isRequired,
   displayEmbedOption: PropTypes.bool,
   displayShareLink: PropTypes.bool,
-  dragAndDropInfoLink: PropTypes.string,
+  iiifInfoLink: PropTypes.string,
   embedIframeAttributes: PropTypes.string,
   embedIframeTitle: PropTypes.string,
   embedUrlReplacePattern: PropTypes.arrayOf(
@@ -227,7 +221,7 @@ MiradorShareDialog.propTypes = {
 MiradorShareDialog.defaultProps = {
   displayEmbedOption: false,
   displayShareLink: false,
-  dragAndDropInfoLink: null,
+  iiifInfoLink: 'https://iiif.io',
   embedIframeAttributes: 'allowfullscreen frameborder="0"',
   embedIframeTitle: 'Image viewer',
   embedUrlReplacePattern: [],
@@ -252,6 +246,7 @@ const styles = theme => ({
   },
   iiifIcon: {
     verticalAlign: 'text-bottom',
+    cursor: 'move',
   },
   inputContainer: {
     alignItems: 'flex-end',
diff --git a/src/MiradorShareEmbed.js b/src/MiradorShareEmbed.js
index 683b599..8c5ed8a 100644
--- a/src/MiradorShareEmbed.js
+++ b/src/MiradorShareEmbed.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { createMuiTheme, withStyles } from '@material-ui/core/styles';
+import { createTheme, withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import FormControl from '@material-ui/core/FormControl';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -62,7 +62,7 @@ class MiradorShareEmbed extends Component {
     const { classes } = this.props;
     const { selectedSize } = this.state;
     const sizes = MiradorShareEmbed.sizes();
-    const iconColor = createMuiTheme().palette.grey[500];
+    const iconColor = createTheme().palette.grey[500];
     const icon = (width, height) => (
       <EmbedSizeIcon
         fillColor={iconColor}
@@ -162,7 +162,7 @@ class MiradorShareEmbed extends Component {
               variant="filled"
             />
             <CopyToClipboard text={this.embedCode()}>
-              <Button className={classes.copyButton} variant="outlined" color="primary" aria-label="Copy code">Copy</Button>
+              <Button className={classes.copyButton} variant="outlined" color="primary" aria-label="Copy code to clipboard">Copy</Button>
             </CopyToClipboard>
           </div>
         </FormControl>
diff --git a/src/miradorSharePlugin.js b/src/miradorSharePlugin.js
index ea51db7..2de5735 100644
--- a/src/miradorSharePlugin.js
+++ b/src/miradorSharePlugin.js
@@ -32,8 +32,8 @@ const mapDispatchToProps = (dispatch, { windowId }) => ({
 });
 
 const mapStateToProps = (state, { windowId }) => ({
-  dragAndDropInfoLink: state.config.miradorSharePlugin
-    && state.config.miradorSharePlugin.dragAndDropInfoLink,
+  iiifInfoLink: state.config.miradorSharePlugin
+    && state.config.miradorSharePlugin.iiifInfoLink,
   manifestId: getManifestoInstance(state, { windowId }).id,
 });
 

From e15cb9c8eaf0be63b2d20b3aedcae896d50daaa4 Mon Sep 17 00:00:00 2001
From: mferrarini <maura_ferrarini@harvard.edu>
Date: Wed, 4 Oct 2023 16:21:00 -0400
Subject: [PATCH 2/5] updated click and drag section for accessibility; also
 reflected in tests

---
 README.md                            |  2 +-
 __tests__/MiradorShareDialog.test.js | 26 ++++++++------
 package.json                         |  4 ++-
 src/MiradorShareDialog.js            | 52 +++++++++++++++++++++-------
 src/MiradorShareEmbed.js             | 10 +++++-
 5 files changed, 68 insertions(+), 26 deletions(-)

diff --git a/README.md b/README.md
index 7986c8e..332ba57 100644
--- a/README.md
+++ b/README.md
@@ -31,7 +31,7 @@ Configurations for this plugin are injected when Mirador is initialized under th
 
 | Config Key | Type | Description |
 | --- | --- | --- |
-| `iiifInfoLink` | string/url | Provides a `What is IIIF` link under the Alternate viewer section that points to the configured URL |
+| `iiifInfoLink` | string/url | Provides a `What is IIIF` link under the Add to another viewer section that points to the configured URL |
 | `embedOption` | object | The configuration objects for the Embed section. You can use this if you're able to easily modify the manifest ID to a URL that can be used to embed the resource in an `<iframe>` (most likely in embedded mode where you're only displaying your own content) |
 | `embedOption.enabled` | boolean | Configure whether to render the Embed section in the Share Dialog. |
 | `embedOption.embedIframeAttributes` | string | A string that contains HTML attributes to be applied to the `<iframe>` embed code. (Default: `allowfullscreen frameborder="0"`) |
diff --git a/__tests__/MiradorShareDialog.test.js b/__tests__/MiradorShareDialog.test.js
index 61db679..ddac29f 100644
--- a/__tests__/MiradorShareDialog.test.js
+++ b/__tests__/MiradorShareDialog.test.js
@@ -29,7 +29,7 @@ describe('Dialog', () => {
     wrapper = createWrapper();
     expect(wrapper.find('WithStyles(ForwardRef(Typography))[variant="h3"]').get(0).props.children).toEqual('Share link');
     expect(wrapper.find('WithStyles(ForwardRef(Typography))[variant="h3"]').get(1).props.children).toEqual('Embed');
-    expect(wrapper.find('WithStyles(ForwardRef(Typography))[variant="h3"]').get(2).props.children).toEqual('Alternate viewer');
+    expect(wrapper.find('WithStyles(ForwardRef(Typography))[variant="h3"]').get(2).props.children).toEqual('Add to another viewer');
   });
 
   it('has a close button that calls closeShareDialog on click', () => {
@@ -49,7 +49,7 @@ describe('Dialog', () => {
       wrapper = createWrapper();
 
       expect(wrapper.find('WithStyles(ForwardRef(TextField))').length).toBe(1);
-      expect(wrapper.find('CopyToClipboard WithStyles(ForwardRef(Button))').props().children).toEqual('Copy');
+      expect(wrapper.find('CopyToClipboard WithStyles(ForwardRef(Button))').get(0).props.children).toEqual('Copy');
     });
 
     it('renders the TextField & CopyToClipboard components w/ the shareLinkText state value', () => {
@@ -57,7 +57,7 @@ describe('Dialog', () => {
 
       wrapper.setState({ shareLinkText: 'http://example.com/iiif/manifest' });
       expect(wrapper.find('WithStyles(ForwardRef(TextField))').props().defaultValue).toEqual('http://example.com/iiif/manifest');
-      expect(wrapper.find('CopyToClipboard').props().text).toEqual('http://example.com/iiif/manifest');
+      expect(wrapper.find('CopyToClipboard').get(0).props.text).toEqual('http://example.com/iiif/manifest');
     });
 
     it("sets the component's shareLinkText on TextField change", () => {
@@ -70,7 +70,7 @@ describe('Dialog', () => {
       wrapper = createWrapper({ displayShareLink: false });
 
       expect(wrapper.find('WithStyles(ForwardRef(TextField))').length).toBe(0);
-      expect(wrapper.find('CopyToClipboard').length).toBe(0);
+      expect(wrapper.find('CopyToClipboard').length).toBe(1);
     });
   });
 
@@ -84,25 +84,29 @@ describe('Dialog', () => {
     });
   });
 
-  describe('Alternate viewer section', () => {
-    it('renders a link, icon, and text', () => {
+  describe('Add to another viewer section', () => {
+    it('renders a link, icon, button, and text', () => {
       wrapper = createWrapper();
 
-      expect(wrapper.find('WithStyles(ForwardRef(Typography))[variant="body1"] WithStyles(ForwardRef(Link)) IiifIcon').length).toBe(1);
-      expect(wrapper.find('WithStyles(ForwardRef(Typography))[variant="body1"]').props().children[1]).toEqual(
-        'Drag & drop this icon to any IIIF viewer.',
+      expect(wrapper.find('WithStyles(ForwardRef(Grid)) WithStyles(ForwardRef(Link)) IiifIcon').length).toBe(1);
+      expect(wrapper.find('WithStyles(ForwardRef(Grid)) CopyToClipboard WithStyles(ForwardRef(Button))').length).toBe(1);
+      expect(wrapper.find('WithStyles(ForwardRef(Grid)) WithStyles(ForwardRef(Typography))[variant="body1"]').get(0).props.children).toEqual(
+        'Drag & drop IIIF icon to add this resource to any IIIF viewer.',
+      );
+      expect(wrapper.find('WithStyles(ForwardRef(Grid)) WithStyles(ForwardRef(Typography))[variant="body1"]').get(2).props.children).toEqual(
+        'Copy & paste the resource\'s manifest into any IIIF viewer.',
       );
     });
 
     it('renders the link with IIIF Drag & Drop Compliant URL (passing the manifest in a param)', () => {
-      const link = wrapper.find('WithStyles(ForwardRef(Typography))[variant="body1"] WithStyles(ForwardRef(Link))').at(0);
+      const link = wrapper.find('WithStyles(ForwardRef(Grid)) WithStyles(ForwardRef(Link))').at(0);
       expect(link.props().href).toEqual('http://example.com/abc/iiif/manifest?manifest=http://example.com/abc/iiif/manifest');
     });
 
     describe('when an info link is configured/passed in as a prop', () => {
       it('renders a "What is IIIF" link', () => {
         wrapper = createWrapper({ iiifInfoLink: 'http://iiif.io/' });
-        const link = wrapper.find('WithStyles(ForwardRef(Typography))[variant="body1"] WithStyles(ForwardRef(Link))').at(1);
+        const link = wrapper.find('WithStyles(ForwardRef(Typography))[variant="body1"] WithStyles(ForwardRef(Link))');
         expect(link.props().children).toEqual('What is IIIF?');
         expect(link.props().href).toEqual('http://iiif.io/');
       });
diff --git a/package.json b/package.json
index 5b1d59a..e35a341 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,9 @@
     "test:coverage": "jest --coverage",
     "test:watch": "jest --watch"
   },
-  "dependencies": {},
+  "dependencies": {
+    "notistack": "^3.0.1"
+  },
   "peerDependencies": {
     "@material-ui/core": "^4.7.2",
     "@material-ui/icons": "^4.5.1",
diff --git a/src/MiradorShareDialog.js b/src/MiradorShareDialog.js
index c2df3b6..ea5bf72 100644
--- a/src/MiradorShareDialog.js
+++ b/src/MiradorShareDialog.js
@@ -9,7 +9,9 @@ import Divider from '@material-ui/core/Divider';
 import Link from '@material-ui/core/Link';
 import TextField from '@material-ui/core/TextField';
 import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { SnackbarProvider, enqueueSnackbar } from 'notistack';
 import { getManifestoInstance } from 'mirador/dist/es/src/state/selectors/manifests';
 import { getContainerId } from 'mirador/dist/es/src/state/selectors/config';
 import ScrollIndicatedDialogContent from 'mirador/dist/es/src/containers/ScrollIndicatedDialogContent';
@@ -77,9 +79,7 @@ export class MiradorShareDialog extends Component {
     return (
       <React.Fragment>
         {' '}
-        [
         <Link href={iiifInfoLink}>What is IIIF?</Link>
-        ]
       </React.Fragment>
     );
   }
@@ -129,6 +129,13 @@ export class MiradorShareDialog extends Component {
             Share
           </Typography>
         </DialogTitle>
+        <SnackbarProvider
+          maxSnack={1}
+          anchorOrigin={{
+            vertical: 'top',
+            horizontal: 'center',
+          }}
+        />
         <ScrollIndicatedDialogContent>
           {displayShareLink && (
             <React.Fragment>
@@ -143,7 +150,7 @@ export class MiradorShareDialog extends Component {
                 />
                 {' '}
                 <CopyToClipboard text={shareLinkText}>
-                  <Button className={classes.copyButton} variant="outlined" color="primary" aria-label="Copy link to clipboard">Copy</Button>
+                  <Button className={classes.copyButton} variant="outlined" color="primary" aria-label="Copy link to clipboard" onClick={() => enqueueSnackbar(('Link copied to clipboard!'), { variant: 'success' })}>Copy</Button>
                 </CopyToClipboard>
               </div>
               <Divider />
@@ -162,14 +169,29 @@ export class MiradorShareDialog extends Component {
               <Divider />
             </React.Fragment>
           )}
-          <Typography className={classes.h3} variant="h3">Alternate viewer</Typography>
-          <Typography variant="body1">
-            <Link href={this.dragAndDropUrl()} className={classes.iiifLink}>
-              <IiiifIcon className={classes.iiifIcon} />
-            </Link>
-            Drag & drop this icon to any IIIF viewer.
-            {this.whatIsThisLink()}
-          </Typography>
+          <Typography className={classes.h3} variant="h3">Add to another viewer</Typography>
+          <Grid container spacing={1} className={classes.grid}>
+            <Grid item xs>
+              <Typography variant="body1">
+                Drag & drop IIIF icon to add this resource to any IIIF viewer.
+              </Typography>
+              <Link href={this.dragAndDropUrl()} className={classes.iiifLink}>
+                <IiiifIcon className={classes.iiifIcon} />
+              </Link>
+            </Grid>
+            <Grid item xs={1}>
+              <Typography variant="body1">or</Typography>
+            </Grid>
+            <Grid item xs>
+              <Typography variant="body1">
+                Copy & paste the resource&apos;s manifest into any IIIF viewer.
+              </Typography>
+              <CopyToClipboard text={this.dragAndDropUrl()}>
+                <Button className={classes.copyButton} variant="outlined" color="primary" aria-label="Copy manifest to clipboard" onClick={() => enqueueSnackbar(('Manifest copied to clipboard!'), { variant: 'success' })}>Copy</Button>
+              </CopyToClipboard>
+            </Grid>
+          </Grid>
+          <Typography variant="body1">{this.whatIsThisLink()}</Typography>
         </ScrollIndicatedDialogContent>
         <DialogActions>
           <Button onClick={closeShareDialog} color="primary">
@@ -190,6 +212,7 @@ MiradorShareDialog.propTypes = {
     iiifLink: PropTypes.string,
     inputContainer: PropTypes.string,
     shareLinkInput: PropTypes.string,
+    grid: PropTypes.string,
   }).isRequired,
   closeShareDialog: PropTypes.func.isRequired,
   containerId: PropTypes.string.isRequired,
@@ -246,7 +269,8 @@ const styles = theme => ({
   },
   iiifIcon: {
     verticalAlign: 'text-bottom',
-    cursor: 'move',
+    cursor: 'grab',
+    paddingTop: '12px',
   },
   inputContainer: {
     alignItems: 'flex-end',
@@ -257,6 +281,10 @@ const styles = theme => ({
   shareLinkInput: {
     paddingTop: '12px',
   },
+  grid: {
+    textAlign: 'center',
+    paddingTop: '12px',
+  },
 });
 
 export default {
diff --git a/src/MiradorShareEmbed.js b/src/MiradorShareEmbed.js
index 8c5ed8a..cc024e6 100644
--- a/src/MiradorShareEmbed.js
+++ b/src/MiradorShareEmbed.js
@@ -9,6 +9,7 @@ import Radio from '@material-ui/core/Radio';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import TextField from '@material-ui/core/TextField';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { SnackbarProvider, enqueueSnackbar } from 'notistack';
 import EmbedSizeIcon from './EmbedSizeIcon';
 
 /**
@@ -139,6 +140,13 @@ class MiradorShareEmbed extends Component {
 
     return (
       <React.Fragment>
+        <SnackbarProvider
+          maxSnack={1}
+          anchorOrigin={{
+            vertical: 'top',
+            horizontal: 'center',
+          }}
+        />
         <FormControl component="fieldset" className={classes.formControl}>
           <FormLabel component="legend" className={classes.legend}>Select viewer size</FormLabel>
           <RadioGroup
@@ -162,7 +170,7 @@ class MiradorShareEmbed extends Component {
               variant="filled"
             />
             <CopyToClipboard text={this.embedCode()}>
-              <Button className={classes.copyButton} variant="outlined" color="primary" aria-label="Copy code to clipboard">Copy</Button>
+              <Button className={classes.copyButton} variant="outlined" color="primary" aria-label="Copy code to clipboard" onClick={() => enqueueSnackbar(('Code copied to clipboard!'), { variant: 'success' })}>Copy</Button>
             </CopyToClipboard>
           </div>
         </FormControl>

From d85f72368ef2618876075791ea39f72d27c5e6f5 Mon Sep 17 00:00:00 2001
From: mferrarini <maura_ferrarini@harvard.edu>
Date: Thu, 5 Oct 2023 11:19:10 -0400
Subject: [PATCH 3/5] Update package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e35a341..7914dfe 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mirador-share-plugin",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "mirador-share-plugin React component",
   "main": "lib/index.js",
   "module": "es/index.js",

From d231570748abe73c9b5a3d44734006adaf28550d Mon Sep 17 00:00:00 2001
From: mferrarini <maura_ferrarini@harvard.edu>
Date: Wed, 11 Oct 2023 13:07:43 -0400
Subject: [PATCH 4/5] Update Snackbar elements to use Mirador fonts

---
 src/MiradorShareDialog.js | 12 ++++++++++--
 src/MiradorShareEmbed.js  |  7 ++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/MiradorShareDialog.js b/src/MiradorShareDialog.js
index ea5bf72..cb9ef2f 100644
--- a/src/MiradorShareDialog.js
+++ b/src/MiradorShareDialog.js
@@ -150,7 +150,11 @@ export class MiradorShareDialog extends Component {
                 />
                 {' '}
                 <CopyToClipboard text={shareLinkText}>
-                  <Button className={classes.copyButton} variant="outlined" color="primary" aria-label="Copy link to clipboard" onClick={() => enqueueSnackbar(('Link copied to clipboard!'), { variant: 'success' })}>Copy</Button>
+                  <Button className={classes.copyButton} variant="outlined" color="primary" aria-label="Copy link to clipboard" onClick={() => enqueueSnackbar((
+                    <Typography variant="body1">
+                      Link copied to clipboard!
+                    </Typography>
+                  ), { variant: 'success' })}>Copy</Button>
                 </CopyToClipboard>
               </div>
               <Divider />
@@ -187,7 +191,11 @@ export class MiradorShareDialog extends Component {
                 Copy & paste the resource&apos;s manifest into any IIIF viewer.
               </Typography>
               <CopyToClipboard text={this.dragAndDropUrl()}>
-                <Button className={classes.copyButton} variant="outlined" color="primary" aria-label="Copy manifest to clipboard" onClick={() => enqueueSnackbar(('Manifest copied to clipboard!'), { variant: 'success' })}>Copy</Button>
+                <Button className={classes.copyButton} variant="outlined" color="primary" aria-label="Copy manifest to clipboard" onClick={() => enqueueSnackbar((
+                  <Typography variant="body1">
+                    Manifest copied to clipboard!
+                  </Typography>
+                ), { variant: 'success' })}>Copy</Button>
               </CopyToClipboard>
             </Grid>
           </Grid>
diff --git a/src/MiradorShareEmbed.js b/src/MiradorShareEmbed.js
index cc024e6..5a6fa68 100644
--- a/src/MiradorShareEmbed.js
+++ b/src/MiradorShareEmbed.js
@@ -8,6 +8,7 @@ import FormLabel from '@material-ui/core/FormLabel';
 import Radio from '@material-ui/core/Radio';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import TextField from '@material-ui/core/TextField';
+import Typography from '@material-ui/core/Typography';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { SnackbarProvider, enqueueSnackbar } from 'notistack';
 import EmbedSizeIcon from './EmbedSizeIcon';
@@ -170,7 +171,11 @@ class MiradorShareEmbed extends Component {
               variant="filled"
             />
             <CopyToClipboard text={this.embedCode()}>
-              <Button className={classes.copyButton} variant="outlined" color="primary" aria-label="Copy code to clipboard" onClick={() => enqueueSnackbar(('Code copied to clipboard!'), { variant: 'success' })}>Copy</Button>
+              <Button className={classes.copyButton} variant="outlined" color="primary" aria-label="Copy code to clipboard" onClick={() => enqueueSnackbar((
+                <Typography variant="body1">
+                  Code copied to clipboard!
+                </Typography>
+              ), { variant: 'success' })}>Copy</Button>
             </CopyToClipboard>
           </div>
         </FormControl>

From 33e2840016ced0d661f6739a5eacf5d0c84969f9 Mon Sep 17 00:00:00 2001
From: mferrarini <maura_ferrarini@harvard.edu>
Date: Wed, 11 Oct 2023 13:21:48 -0400
Subject: [PATCH 5/5] refactoring to pass linter tests

---
 src/MiradorShareDialog.js | 36 ++++++++++++++++++++++++++----------
 src/MiradorShareEmbed.js  | 18 +++++++++++++-----
 2 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/src/MiradorShareDialog.js b/src/MiradorShareDialog.js
index cb9ef2f..006807c 100644
--- a/src/MiradorShareDialog.js
+++ b/src/MiradorShareDialog.js
@@ -150,11 +150,19 @@ export class MiradorShareDialog extends Component {
                 />
                 {' '}
                 <CopyToClipboard text={shareLinkText}>
-                  <Button className={classes.copyButton} variant="outlined" color="primary" aria-label="Copy link to clipboard" onClick={() => enqueueSnackbar((
-                    <Typography variant="body1">
-                      Link copied to clipboard!
-                    </Typography>
-                  ), { variant: 'success' })}>Copy</Button>
+                  <Button
+                    className={classes.copyButton}
+                    variant="outlined"
+                    color="primary"
+                    aria-label="Copy link to clipboard"
+                    onClick={() => enqueueSnackbar((
+                      <Typography variant="body1">
+                        Link copied to clipboard!
+                      </Typography>
+                    ), { variant: 'success' })}
+                  >
+                    Copy
+                  </Button>
                 </CopyToClipboard>
               </div>
               <Divider />
@@ -191,11 +199,19 @@ export class MiradorShareDialog extends Component {
                 Copy & paste the resource&apos;s manifest into any IIIF viewer.
               </Typography>
               <CopyToClipboard text={this.dragAndDropUrl()}>
-                <Button className={classes.copyButton} variant="outlined" color="primary" aria-label="Copy manifest to clipboard" onClick={() => enqueueSnackbar((
-                  <Typography variant="body1">
-                    Manifest copied to clipboard!
-                  </Typography>
-                ), { variant: 'success' })}>Copy</Button>
+                <Button
+                  className={classes.copyButton}
+                  variant="outlined"
+                  color="primary"
+                  aria-label="Copy manifest to clipboard"
+                  onClick={() => enqueueSnackbar((
+                    <Typography variant="body1">
+                      Manifest copied to clipboard!
+                    </Typography>
+                  ), { variant: 'success' })}
+                >
+                  Copy
+                </Button>
               </CopyToClipboard>
             </Grid>
           </Grid>
diff --git a/src/MiradorShareEmbed.js b/src/MiradorShareEmbed.js
index 5a6fa68..be38bea 100644
--- a/src/MiradorShareEmbed.js
+++ b/src/MiradorShareEmbed.js
@@ -171,11 +171,19 @@ class MiradorShareEmbed extends Component {
               variant="filled"
             />
             <CopyToClipboard text={this.embedCode()}>
-              <Button className={classes.copyButton} variant="outlined" color="primary" aria-label="Copy code to clipboard" onClick={() => enqueueSnackbar((
-                <Typography variant="body1">
-                  Code copied to clipboard!
-                </Typography>
-              ), { variant: 'success' })}>Copy</Button>
+              <Button
+                className={classes.copyButton}
+                variant="outlined"
+                color="primary"
+                aria-label="Copy code to clipboard"
+                onClick={() => enqueueSnackbar((
+                  <Typography variant="body1">
+                    Code copied to clipboard!
+                  </Typography>
+                ), { variant: 'success' })}
+              >
+                Copy
+              </Button>
             </CopyToClipboard>
           </div>
         </FormControl>