cozy-ui 111.7.0 → 111.8.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [111.8.0](https://github.com/cozy/cozy-ui/compare/v111.7.0...v111.8.0) (2024-08-19)
+
+
+### Features
+
+* **MobileStepper:** Add cozy design to MUI export ([d6728f8](https://github.com/cozy/cozy-ui/commit/d6728f8))
+
 # [111.7.0](https://github.com/cozy/cozy-ui/compare/v111.6.0...v111.7.0) (2024-08-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "111.7.0",
+  "version": "111.8.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/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>
+```

package/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'
+    }
   }
 })

package/transpiled/react/MuiCozyTheme/overrides/makeDarkInvertedOverrides.d.ts

@@ -1376,6 +1376,24 @@ export function makeDarkInvertedOverrides(theme: any): {
             };
         };
     };
+    MuiMobileStepper: {
+        root: {
+            background: string;
+            height: number;
+            padding: number;
+        };
+        dot: {
+            backgroundColor: string;
+            width: string;
+            height: string;
+            margin: string;
+            border: string;
+            boxSizing: string;
+        };
+        dotActive: {
+            border: string;
+        };
+    };
 } & {
     MuiLinearProgress: {
         colorPrimary: {

package/transpiled/react/MuiCozyTheme/overrides/makeDarkNormalOverrides.d.ts

@@ -1376,4 +1376,22 @@ export function makeDarkNormalOverrides(theme: any): {
             };
         };
     };
+    MuiMobileStepper: {
+        root: {
+            background: string;
+            height: number;
+            padding: number;
+        };
+        dot: {
+            backgroundColor: string;
+            width: string;
+            height: string;
+            margin: string;
+            border: string;
+            boxSizing: string;
+        };
+        dotActive: {
+            border: string;
+        };
+    };
 };

package/transpiled/react/MuiCozyTheme/overrides/makeLightInvertedOverrides.d.ts

@@ -1376,6 +1376,24 @@ export function makeLightInvertedOverrides(theme: any): {
             };
         };
     };
+    MuiMobileStepper: {
+        root: {
+            background: string;
+            height: number;
+            padding: number;
+        };
+        dot: {
+            backgroundColor: string;
+            width: string;
+            height: string;
+            margin: string;
+            border: string;
+            boxSizing: string;
+        };
+        dotActive: {
+            border: string;
+        };
+    };
 } & {
     MuiLinearProgress: {
         colorPrimary: {

package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.d.ts

@@ -1376,4 +1376,22 @@ export function makeLightNormalOverrides(theme: any): {
             };
         };
     };
+    MuiMobileStepper: {
+        root: {
+            background: string;
+            height: number;
+            padding: number;
+        };
+        dot: {
+            backgroundColor: string;
+            width: string;
+            height: string;
+            margin: string;
+            border: string;
+            boxSizing: string;
+        };
+        dotActive: {
+            border: string;
+        };
+    };
 };

package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -820,6 +820,24 @@ export var makeLightNormalOverrides = function 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 ".concat(theme.palette.border.main),
+        boxSizing: 'border-box'
+      },
+      dotActive: {
+        border: 'none'
+      }
     }
   };
 };