Add missing logos to landing page

Author: rvsia

package.json

@@ -8,7 +8,7 @@
   "private": true,
   "scripts": {
     "bootstrap": "lerna bootstrap",
-    "build": "lerna run build --ignore @data-driven-forms/react-render-demo",
+    "build": "lerna run build --ignore @data-driven-forms/react-renderer-demo",
     "vendor": "lerna run vendor",
     "test": "jest --coverage",
     "test:ci": "jest --coverage --runInBand",

packages/react-renderer-demo/src/components/common/blueprint-logo.js

@@ -0,0 +1,11 @@
+/* eslint-disable */
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+const BlueprintLogo = (props) => (
+  <SvgIcon height="65" width="76" viewBox="0 0 65 76" role="presentation" {...props}>
+<g fillRule="nonzero"><path d="M28.795 2.421l2.177-1.254a4 4 0 0 1 4.039.027l28.032 16.643A4 4 0 0 1 65 21.277v33.446a4 4 0 0 1-1.958 3.44l-28.03 16.644a4 4 0 0 1-4.039.027L2.004 58.154A4 4 0 0 1 0 54.687V21.313a4 4 0 0 1 2.004-3.467l26.79-15.425zm3.175.48l-.499-.867v-1h3.742L32.01 2.878a2.008 2.008 0 0 0-.04.023zM3.002 19.58A2 2 0 0 0 2 21.313v33.374a2 2 0 0 0 1.002 1.733l28.97 16.68a2 2 0 0 0 2.018-.013l28.03-16.644a2 2 0 0 0 .98-1.72V21.277a2 2 0 0 0-.979-1.72L33.99 2.914a2 2 0 0 0-1.98-.036L3.003 19.58z"></path><path d="M34.512 19.74L49 28.435v20.132l-15.984 9.59-.506-.284-14.98-8.427A3 3 0 0 1 16 46.83V28.415l15.497-8.717a3 3 0 0 1 3.015.043zM47 29.567l-13.518-8.11a1 1 0 0 0-1.005-.015L18 29.585V46.83a1 1 0 0 0 .51.871l14.474 8.143L47 47.434V29.566z"></path><path d="M.396 21.602l.97-1.749 26.238 14.545-.97 1.749z"></path><path d="M23.396 34.602l.97-1.749 26.238 14.545-.97 1.749z"></path><path d="M33 20l-16 9v19l16-9V20zm30 0l-16 9v20l16-9V20z"></path><path d="M63 39l-16 9v19l16-9z"></path><path d="M49 47l-16 9v19l16-9z"></path></g>p
+  </SvgIcon>
+);
+
+export default BlueprintLogo;

packages/react-renderer-demo/src/components/common/suir-logo.js

@@ -0,0 +1,11 @@
+/* eslint-disable */
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+const SuirLogo = (props) => (
+  <SvgIcon width="256" height="256" viewBox="0 0 256 256" role="presentation" {...props}>
+<path d="M0 0h256v256H0V0z" fill="#34BDB2"/><path d="M168.461 87.041c-13.516-7.842-25.514-14.009-41.21-13.737-8.98.156-16.69 5.037-18.311 13.97-1.509 8.311 5.879 12.921 13.565 15.751 12.747 4.694 23.844 9.65 36.369 14.869 22.769 9.489 34.444 24.856 33.064 44.573-1.756 25.087-16.854 43.08-40.849 49.012-31.354 7.752-61.801-4.056-87.526-20.54 6.493-9.891 14.026-16.643 20.48-26.474 14.862 6.326 26.538 14.874 42.086 16.207 10.963.94 23.385.417 25.848-12.46 2.22-11.612-7.886-17.837-17.743-21.314-11.735-4.139-23.448-9.202-34.956-13.902-21.273-8.689-29.929-25.684-28.472-45.705 0-11.739 9.74-35.466 33.621-42.846 36.692-11.34 56.908.272 83.515 17.371-7.067 9.346-12.5 15.991-19.481 25.225" fill="#FFF"/>
+  </SvgIcon>
+);
+
+export default SuirLogo;

packages/react-renderer-demo/src/components/landing-page/landing-page-cards.js

@@ -22,6 +22,8 @@ import FormExample from './formExample';
 import MaterialUILogo from '../common/material-logo';
 import PF3Logo from '../common/pf3-logo';
 import PF4Logo from '../common/pf4-logo';
+import BlueprintLogo from '../common/blueprint-logo';
+import SuirLogo from '../common/suir-logo';
 
 import CodeEditor from '@docs/components/code-editor';
 
@@ -195,6 +197,9 @@ const useStyles = makeStyles((theme) => ({
   },
   textBottom: {
     marginBottom: 16
+  },
+  mappersText: {
+    marginTop: 16
   }
 }));
 
@@ -245,32 +250,58 @@ const LandingPageCards = () => {
             Available mappers
           </Typography>
           <Grid container direction="row" justify="space-evenly">
-            <Grid item xs={12} md={4}>
+            <Grid item xs={12} md={4} xl={2}>
               <Typography variant="h6" className={classes.textBottom}>
                 MaterialUI
               </Typography>
-              <a href="https://www.npmjs.com/package/@data-driven-forms/mui-component-mapper" rel="noopener noreferrer" target="_blank">
-                <MaterialUILogo style={{ fontSize: 100 }} />
-              </a>
+              <RouterLink href="/mappers/mui-component-mapper">
+                <a href="/mappers/mui-component-mapper">
+                  <MaterialUILogo style={{ fontSize: 100 }} />
+                </a>
+              </RouterLink>
             </Grid>
-            <Grid item xs={12} md={4}>
+            <Grid item xs={12} md={4} xl={2}>
               <Typography variant="h6" className={classes.textBottom}>
                 PatternFly 4
               </Typography>
-              <a href="https://www.npmjs.com/package/@data-driven-forms/pf4-component-mapper" rel="noopener noreferrer" target="_blank">
-                <PF4Logo style={{ fontSize: 200, height: '50%' }} />
-              </a>
+              <RouterLink href="/mappers/pf4-component-mapper">
+                <a href="/mappers/pf4-component-mapper">
+                  <PF4Logo style={{ fontSize: 200, height: '50%' }} />
+                </a>
+              </RouterLink>
             </Grid>
-            <Grid item xs={12} md={4}>
+            <Grid item xs={12} md={4} xl={2}>
               <Typography variant="h6" className={classes.textBottom}>
                 PatternFly 3
               </Typography>
-              <a href="https://www.npmjs.com/package/@data-driven-forms/pf3-component-mapper" rel="noopener noreferrer" target="_blank">
-                <PF3Logo style={{ fontSize: 100 }} />
-              </a>
+              <RouterLink href="/mappers/pf3-component-mapper">
+                <a href="/mappers/pf3-component-mapper">
+                  <PF3Logo style={{ fontSize: 100 }} />
+                </a>
+              </RouterLink>
+            </Grid>
+            <Grid item xs={12} md={6} xl={2}>
+              <Typography variant="h6" className={classes.textBottom}>
+                BlueprintJS
+              </Typography>
+              <RouterLink href="/mappers/blueprint-component-mapper">
+                <a href="/mappers/blueprint-component-mapper">
+                  <BlueprintLogo style={{ fontSize: 100, fill: '#394b59' }} />
+                </a>
+              </RouterLink>
+            </Grid>
+            <Grid item xs={12} md={6} xl={2}>
+              <Typography variant="h6" className={classes.textBottom}>
+                Semantic UI
+              </Typography>
+              <RouterLink href="/mappers/suir-component-mapper">
+                <a href="/mappers/suir-component-mapper">
+                  <SuirLogo style={{ fontSize: 100 }} />
+                </a>
+              </RouterLink>
             </Grid>
             <Grid item xs={12} md={8}>
-              <Typography variant="body2" gutterBottom>
+              <Typography variant="body2" gutterBottom className={classes.mappersText}>
                 This list represents a set of provided mappers. Each mapper brings all basic form components from its design system. You can
                 immediately use form inputs such as text fields, selects, radios, checkboxes or wizards. However, this selection does not limit you as
                 integrating custom coponents is simple as it can be - all it takes is just one hook.