feat(MobileStepper): Add cozy design to MUI export

docs/styleguide.config.js

@@ -59,6 +59,7 @@ module.exports = {
         '../react/Skeletons',
         '../react/Snackbar',
         '../react/Stepper',
+        '../react/MobileStepper',
         '../react/Switch',
         '../react/Tabs',
         '../react/TextField',

react/MobileStepper/Readme.md

@@ -0,0 +1,43 @@
+```jsx
+import { useState } from 'react'
+import MobileStepper from 'cozy-ui/transpiled/react/MobileStepper'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import LeftIcon from 'cozy-ui/transpiled/react/Icons/Left'
+import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
+
+const maxSteps = 5
+const [activeStep, setActiveStep] = useState(0)
+
+const handleNext = () => {
+  setActiveStep(activeStep + 1)
+}
+
+const handleBack = () => {
+  setActiveStep(activeStep - 1)
+}
+
+;
+
+<div class="u-flex">
+  <MobileStepper
+    className="u-mh-auto"
+    steps={maxSteps}
+    position="static"
+    activeStep={activeStep}
+    nextButton={
+      <IconButton
+        onClick={handleNext}
+        disabled={activeStep === maxSteps - 1}
+      >
+        <Icon icon={RightIcon} />
+      </IconButton>
+    }
+    backButton={
+      <IconButton onClick={handleBack} disabled={activeStep === 0}>
+        <Icon icon={LeftIcon} />
+      </IconButton>
+    }
+  />
+</div>
+```

react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -876,5 +876,23 @@ export const makeLightNormalOverrides = theme => ({
         padding: '0 16px'
       }
     }
+  },
+  MuiMobileStepper: {
+    root: {
+      background: 'transparent',
+      height: 40,
+      padding: 0
+    },
+    dot: {
+      backgroundColor: 'transparent',
+      width: '10px',
+      height: '10px',
+      margin: '0 3px',
+      border: `1px solid ${theme.palette.border.main}`,
+      boxSizing: 'border-box'
+    },
+    dotActive: {
+      border: 'none'
+    }
   }
 })