feat(ListItemSkeleton): Add gutters property to mock ListItem behavior

cozy · Oct 21, 2024 · 589a1c4 · 589a1c4
1 parent d748d9c
commit 589a1c4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git 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
@@ -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>
 ```