Merge pull request #47 from laurentC35/dev-stromae-v2

Add appVersion to the burger menu

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stromae",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "private": true,
   "dependencies": {
     "@axa-fr/react-oidc-context": "^3.1.6",

src/components/designSystem/AppVersion.js

@@ -0,0 +1,21 @@
+import { makeStyles, Typography } from '@material-ui/core';
+import React from 'react';
+import { version, dependencies } from '../../../package.json';
+
+const useStyles = makeStyles({
+  root: {
+    textAlign: 'center',
+    padding: '2px 0 2px 0',
+  },
+});
+
+const lunaticVersion = dependencies['@inseefr/lunatic'].replace('^', '');
+
+export const AppVersion = ({ className }) => {
+  const classes = useStyles();
+  return (
+    <Typography className={`${className} ${classes.root}`}>
+      {`Stromae : ${version} | Lunatic : ${lunaticVersion}`}
+    </Typography>
+  );
+};

src/components/navigation/burgerMenu/burgerMenu.css

@@ -4,32 +4,32 @@
   color: white;
   position: absolute;
   width: 280px;
-  height:200%;
-  display:grid;
-  transition: transform .4s cubic-bezier(.25, .1, .25, 1);
+  height: 200%;
+  display: grid;
+  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
   pointer-events: none;
 }
 
-#burgerMenuSlideBar, #burgerMenuToggleTab {
+#burgerMenuSlideBar,
+#burgerMenuToggleTab {
   background: #2a5885;
   pointer-events: auto;
 }
 
-#burgerMenuSlideBar{
-  position:absolute;
-  height: 100%;
-  width:225px;
+#burgerMenuSlideBar {
+  position: absolute;
+  height: 100vh;
+  width: 225px;
   padding: 10px;
   padding-top: 20px;
   display: inline-block;
-
 }
 
-#burgerMenuToggleTab{
-  position:absolute;
+#burgerMenuToggleTab {
+  position: absolute;
   left: 225px;
   height: 138px;
-  width:55px;
+  width: 55px;
   border-left: 1px solid #5181b8;
   display: inline-block;
 }
@@ -42,26 +42,30 @@
   transform: translate3d(0, 0, 0);
 }
 
-#toggleSlidebarButton{
+#toggleSlidebarButton {
   position: absolute;
   top: 45px;
-  left:15px
+  left: 15px;
 }
 
-.slideBarButtonText{
+.slideBarButtonText {
   text-align: left;
   font-size: 15px;
 }
 
-
-.burgerMenuButton:hover{
+.burgerMenuButton:hover {
   border-radius: 8px;
 }
 
-.burgerMenuButton{
-  width: 100%
+.burgerMenuButton {
+  width: 100%;
 }
 
-.burgerMenuButton > .MuiIconButton-label{
+.burgerMenuButton > .MuiIconButton-label {
   justify-content: unset;
-}
+}
+
+.appVersion {
+  position: absolute;
+  bottom: 0;
+}

src/components/navigation/burgerMenu/burgerMenu.js

@@ -8,6 +8,7 @@ import { HOUSEHOLD } from 'utils/constants';
 import { OrchestratorContext } from 'components/orchestrator/collector';
 import { SIMPLE_CLICK_EVENT, paradataHandler } from 'utils/events';
 import './burgerMenu.css';
+import { AppVersion } from 'components/designSystem/AppVersion';
 
 const utilInfo = (type, page) => {
   return { ...SIMPLE_CLICK_EVENT, id: `${type}-button`, page };
@@ -64,6 +65,7 @@ const BurgerMenu = ({ title }) => {
               <span className="slideBarButtonText">Déconnexion</span>
             </IconButton>
           )}
+          <AppVersion className="appVersion" />
         </div>
         <div id="burgerMenuToggleTab">
           <IconButton