diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js index c8329eb277..9cd4047e58 100644 --- a/docs/styleguide.config.js +++ b/docs/styleguide.config.js @@ -59,6 +59,7 @@ module.exports = { '../react/Skeletons', '../react/Snackbar', '../react/Stepper', + '../react/MobileStepper', '../react/Switch', '../react/Tabs', '../react/TextField', diff --git a/react/MobileStepper/Readme.md b/react/MobileStepper/Readme.md new file mode 100644 index 0000000000..b96593d7a2 --- /dev/null +++ b/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) +} + +; + +
+ + + + } + backButton={ + + + + } + /> +
+``` diff --git a/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js b/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js index d0f65665f8..2c3d10c7e1 100644 --- a/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js +++ b/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' + } } })