From 589a1c490523c90d5c9c4985178b65893bdd8a48 Mon Sep 17 00:00:00 2001
From: cballevre <celestin.ballevre@protonmail.com>
Date: Mon, 21 Oct 2024 11:23:32 +0200
Subject: [PATCH] feat(ListItemSkeleton): Add gutters property to mock ListItem
 behavior

---
 react/Skeletons/ListItemSkeleton.jsx |  7 ++++---
 react/Skeletons/Readme.md            | 15 ++++++++++++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/react/Skeletons/ListItemSkeleton.jsx b/react/Skeletons/ListItemSkeleton.jsx
index d4c58d2c0f..0eccf5a43f 100644
--- a/react/Skeletons/ListItemSkeleton.jsx
+++ b/react/Skeletons/ListItemSkeleton.jsx
@@ -7,10 +7,10 @@ import ListItemIcon from '../ListItemIcon'
 import ListItemText from '../ListItemText'
 import Skeleton from '../Skeleton'
 
-const ListItemSkeleton = ({ hasSecondary, divider }) => {
+const ListItemSkeleton = ({ hasSecondary, divider, gutters }) => {
   return (
     <>
-      <ListItem>
+      <ListItem gutters={gutters}>
         <ListItemIcon>
           <Skeleton
             className="u-bdrs-4"
@@ -35,7 +35,8 @@ ListItemSkeleton.propTypes = {
   /** Show secondary line or not */
   hasSecondary: PropTypes.bool,
   /** Show divider after the ListItem */
-  divider: PropTypes.bool
+  divider: PropTypes.bool,
+  gutters: PropTypes.string
 }
 
 export default ListItemSkeleton
diff --git a/react/Skeletons/Readme.md b/react/Skeletons/Readme.md
index d99ec6f1a5..141b738877 100644
--- a/react/Skeletons/Readme.md
+++ b/react/Skeletons/Readme.md
@@ -26,16 +26,25 @@ const initialVariants = [{ hasSecondary: false, withSubheader: false, divider: f
 import Variants from 'cozy-ui/docs/components/Variants'
 import ListItemSkeleton from 'cozy-ui/transpiled/react/Skeletons/ListItemSkeleton'
 
-const initialVariants = [{ hasSecondary: false, divider: false }]
+const initialVariants = [{
+  hasSecondary: false,
+  divider: false,
+  disabledGutters: false,
+  doubleGutters: false
+}]
 
 ;
 
 <Variants initialVariants={initialVariants} screenshotAllVariants>
-  {variant => (
+  {variant => {
+    const gutters = variant.disabledGutters ? 'disabled' : variant.doubleGutters ? 'double' : 'default'
+
+    return (
     <ListItemSkeleton
       hasSecondary={variant.hasSecondary}
       divider={variant.divider}
+      gutters={gutters}
     />
-  )}
+  )}}
 </Variants>
 ```