Provide a more enhanced api to customize createGenerateClassName for implementations

__tests__/integration/mirador/rtl.html

@@ -39,7 +39,9 @@
     <script>document.write("<script type='text/javascript' src='../../../dist/mirador.min.js?v=" + Date.now() + "'><\/script>");</script>
     <script type="text/javascript">
      var miradorInstance = Mirador.viewer({
-       classPrefix: 'one',
+       createGenerateClassNameOptions: {
+         seed: 'one'
+       },
        id: 'instanceOne',
        windows: [{
          manifestId: 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/e800b13a-6699-49ae-9bc2-c9b8c35b7a25.json',
@@ -49,14 +51,18 @@
        }
      });
      var miradorInstance = Mirador.viewer({
-       classPrefix: 'two',
+       createGenerateClassNameOptions: {
+         seed: 'two'
+       },
        id: 'instanceTwo',
        windows: [{
          manifestId: 'https://candra.dhii.jp/iiif/blackjacky/b001/manifest.json',
        }]
      });
      var miradorInstance = Mirador.viewer({
-       classPrefix: 'three',
+       createGenerateClassNameOptions: {
+         seed: 'three'
+       },
        id: 'instanceThree',
        windows: [{
          manifestId: 'https://iiif.harvardartmuseums.org/manifests/object/299843',

src/components/AppProviders.js

@@ -81,13 +81,12 @@ export class AppProviders extends Component {
   /** */
   render() {
     const {
-      children, classPrefix, isFullscreenEnabled, setWorkspaceFullscreen, theme, translations,
+      children, createGenerateClassNameOptions, isFullscreenEnabled,
+      setWorkspaceFullscreen, theme, translations,
       dndManager,
     } = this.props;
 
-    const generateClassName = createGenerateClassName({
-      productionPrefix: classPrefix,
-    });
+    const generateClassName = createGenerateClassName(createGenerateClassNameOptions);
 
     Object.keys(translations).forEach((lng) => {
       this.i18n.addResourceBundle(lng, 'translation', translations[lng], true, true);
@@ -121,7 +120,7 @@ export class AppProviders extends Component {
 
 AppProviders.propTypes = {
   children: PropTypes.node,
-  classPrefix: PropTypes.string,
+  createGenerateClassNameOptions: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   dndManager: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   isFullscreenEnabled: PropTypes.bool,
   language: PropTypes.string.isRequired,
@@ -132,7 +131,7 @@ AppProviders.propTypes = {
 
 AppProviders.defaultProps = {
   children: null,
-  classPrefix: '',
+  createGenerateClassNameOptions: {},
   dndManager: undefined,
   isFullscreenEnabled: false,
 };

src/config/css-ns.js

@@ -4,7 +4,10 @@ import flatten from 'lodash/flatten';
  * export ns - sets up css namespacing for everything to be `mirador-`
  */
 const ns = classNames => flatten([classNames]).map(
-  className => [settings.classPrefix, className].join('-')
+  className => [
+    settings.createGenerateClassNameOptions.productionPrefix,
+    className,
+  ].join('-')
 ).join(' ');
 
 export default ns;

src/config/settings.js

@@ -234,7 +234,9 @@ export default {
     htmlSanitizationRuleSet: 'iiif', // See src/lib/htmlRules.js for acceptable values
     filteredMotivations: ['oa:commenting', 'oa:tagging', 'sc:painting', 'commenting', 'tagging'],
   },
-  classPrefix: 'mirador',
+  createGenerateClassNameOptions: { // Options passed directly to createGenerateClassName in Material-UI https://material-ui.com/styles/api/#creategenerateclassname-options-class-name-generator
+    productionPrefix: 'mirador',
+  },
   requests: {
     preprocessors: [ // Functions that receive HTTP requests and manipulate them (e.g. to add headers)
       // (url, options) => (url.match('info.json') && { ...options, myCustomThing: 'blah' })

src/containers/AppProviders.js

@@ -12,7 +12,7 @@ import { AppProviders } from '../components/AppProviders';
  */
 const mapStateToProps = state => (
   {
-    classPrefix: getConfig(state).classPrefix,
+    createGenerateClassNameOptions: getConfig(state).createGenerateClassNameOptions,
     isFullscreenEnabled: getFullScreenEnabled(state),
     language: getConfig(state).language,
     theme: getTheme(state),