Added css swapping on mapper docs change.

Author: Hyperkid123

packages/react-renderer-demo/src/app/src/components/code-example.js

@@ -19,6 +19,8 @@ import Tooltip from '@material-ui/core/Tooltip';
 
 import GhIcon from './common/gh-svg-icon';
 import CodesandboxIcon from './common/code-sandbox-svg-icon';
+import { getPrefix } from '../helpers/scoped-links';
+import { useRouter } from 'next/router';
 
 const CodeEditor = dynamic(import('./code-editor'), {
   ssr: false
@@ -57,6 +59,12 @@ const useStyles = makeStyles((theme) => ({
   },
   expansionPanelSummary: {
     padding: 0
+  },
+  pf4: {
+    padding: 32,
+    '& form': {
+      width: '100%'
+    }
   }
 }));
 
@@ -144,6 +152,8 @@ const getPayload = (type, code, sourceFiles = {}) =>
 
 const CodeExample = ({ source, mode, mapper, additionalSources }) => {
   const classes = useStyles();
+  const router = useRouter();
+  const activeScope = getPrefix(router.pathname);
   const codeSource = reqSource(`./${source}.js`).default;
   let Component;
   if (mode === 'preview') {
@@ -209,7 +219,7 @@ const CodeExample = ({ source, mode, mapper, additionalSources }) => {
         </Grid>
         {Component && (
           <Grid className={classes.formContainer} item xs={12}>
-            <Paper className={classes.componentPanel}>
+            <Paper className={clsx(classes.componentPanel, classes[activeScope])}>
               <Component />
             </Paper>
           </Grid>

packages/react-renderer-demo/src/app/src/components/mapper-menu.js

@@ -1,4 +1,4 @@
-import React, { useState, Fragment } from 'react';
+import React, { useState, useEffect } from 'react';
 import Button from '@material-ui/core/Button';
 import Checkbox from '@material-ui/core/Checkbox';
 import Menu from '@material-ui/core/Menu';
@@ -8,6 +8,10 @@ import Link from 'next/link';
 import { makeStyles } from '@material-ui/core/styles';
 import { getScopedLink, getPrefix } from '../helpers/scoped-links';
 
+const links = {
+  pf4: `<link class="pf4" href="https://cdn.jsdelivr.net/npm/@patternfly/[email protected]/patternfly.min.css" rel="stylesheet" />`
+};
+
 const useStyles = makeStyles((theme) => ({
   menuTrigger: {
     color: '#fff'
@@ -25,33 +29,53 @@ const MapperMenu = () => {
   const [anchorEl, setAnchorEl] = useState(null);
   const router = useRouter();
   const classes = useStyles();
+  const activeScope = getPrefix(router.pathname);
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
   };
 
-  const handleClose = () => {
+  const applyMapperStyle = (mapper) => {
+    const head = document.head;
+    const mapperLink = head.getElementsByClassName(activeScope)[0];
+    if (mapperLink) {
+      head.removeChild(mapperLink);
+    }
+
+    if (mapper !== 'mui') {
+      let newLink = document.createElement('div');
+      newLink.innerHTML = links[mapper];
+      newLink = newLink.firstChild;
+      head.appendChild(newLink);
+    }
+  };
+
+  useEffect(() => {
+    applyMapperStyle(activeScope);
+  }, []);
+
+  const handleClose = (mapper) => {
+    applyMapperStyle(mapper);
     setAnchorEl(null);
   };
 
   const muiLink = getScopedLink(router.pathname, 'mui');
   const pf4Link = getScopedLink(router.pathname, 'pf4');
-  const activeScope = getPrefix(router.pathname);
 
   return (
     <div>
       <Button aria-controls="simple-menu" aria-haspopup="true" className={classes.menuTrigger} onClick={handleClick}>
         Mapper: {activeScope}
       </Button>
       <Menu id="simple-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
-        <MenuItem className={classes.menuItem} onClick={handleClose} selected={activeScope === 'mui'}>
+        <MenuItem className={classes.menuItem} onClick={() => handleClose('mui')} selected={activeScope === 'mui'}>
           <Link href={muiLink}>
             <a href={muiLink} className={classes.scopeLink}>
               <Checkbox checked={activeScope === 'mui'} />
               Material UI
             </a>
           </Link>
         </MenuItem>
-        <MenuItem className={classes.menuItem} onClick={handleClose} selected={activeScope === 'pf4'}>
+        <MenuItem className={classes.menuItem} onClick={() => handleClose('pf4')} selected={activeScope === 'pf4'}>
           <Link href={pf4Link}>
             <a href={pf4Link} className={classes.scopeLink}>
               <Checkbox checked={activeScope === 'pf4'} />