feat: Add ListSkeleton and ListItemSkeleton components

docs/styleguide.config.js

@@ -107,6 +107,7 @@ module.exports = {
         '../react/SelectionBar',
         '../react/ScopedCssBaseline',
         '../react/Skeleton',
+        '../react/Skeletons',
         '../react/Slide',
         '../react/Slider',
         '../react/Snackbar',

react/Skeletons/ListItemSkeleton.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import ListItem from '../ListItem'
+import ListItemIcon from '../ListItemIcon'
+import ListItemText from '../ListItemText'
+import Skeleton from '../Skeleton'
+import Divider from '../Divider'
+
+const ListItemSkeleton = ({ hasSecondary, divider }) => {
+  return (
+    <>
+      <ListItem>
+        <ListItemIcon>
+          <Skeleton
+            className="u-bdrs-4"
+            variant="rect"
+            width={32}
+            height={32}
+          />
+        </ListItemIcon>
+        <ListItemText
+          primary={<Skeleton width="75%" height={13} />}
+          secondary={
+            hasSecondary ? <Skeleton width="37%" height={13} /> : undefined
+          }
+        />
+      </ListItem>
+      {divider && <Divider />}
+    </>
+  )
+}
+
+ListItemSkeleton.propTypes = {
+  /** Show secondary line or not */
+  hasSecondary: PropTypes.bool,
+  /** Show divider after the ListItem */
+  divider: PropTypes.bool
+}
+
+export default ListItemSkeleton

react/Skeletons/ListSkeleton.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import List from '../List'
+import ListSubheader from '../ListSubheader'
+
+import ListItemSkeleton from './ListItemSkeleton'
+
+const ListSkeleton = ({ count, hasSecondary, withSubheader, divider }) => {
+  return (
+    <List
+      subheader={
+        withSubheader ? <ListSubheader>&nbsp;</ListSubheader> : undefined
+      }
+    >
+      {[...Array(count).keys()].map((_, idx) => (
+        <ListItemSkeleton
+          key={idx}
+          hasSecondary={hasSecondary}
+          divider={divider}
+        />
+      ))}
+    </List>
+  )
+}
+
+ListSkeleton.propTypes = {
+  /** Show secondary line or not */
+  hasSecondary: PropTypes.bool,
+  /** Number of element to show */
+  count: PropTypes.number,
+  /** Show divider between ListItems */
+  divider: PropTypes.bool
+}
+
+ListSkeleton.defaultProps = {
+  count: 1
+}
+
+export default ListSkeleton

react/Skeletons/Readme.md

@@ -0,0 +1,41 @@
+### List
+
+```jsx
+import Variants from 'cozy-ui/docs/components/Variants'
+import ListSkeleton from 'cozy-ui/transpiled/react/Skeletons/ListSkeleton'
+
+const initialVariants = [{ hasSecondary: false, withSubheader: false, divider: false }]
+
+;
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <ListSkeleton
+      count={5}
+      hasSecondary={variant.hasSecondary}
+      withSubheader={variant.withSubheader}
+      divider={variant.divider}
+    />
+  )}
+</Variants>
+```
+
+### ListItem
+
+```jsx
+import Variants from 'cozy-ui/docs/components/Variants'
+import ListItemSkeleton from 'cozy-ui/transpiled/react/Skeletons/ListItemSkeleton'
+
+const initialVariants = [{ hasSecondary: false, divider: false }]
+
+;
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <ListItemSkeleton
+      hasSecondary={variant.hasSecondary}
+      divider={variant.divider}
+    />
+  )}
+</Variants>
+```

react/Skeletons/index.js

@@ -0,0 +1,2 @@
+export { default as ListItemSkeleton } from './ListItemSkeleton'
+export { default as ListSkeleton } from './ListSkeleton'

react/index.js

@@ -133,3 +133,4 @@ export { default as TimelineOppositeContent } from './TimelineOppositeContent'
 export { default as TimelineSeparator } from './TimelineSeparator'
 export { default as AlertProvider, useAlert } from './Alert'
 export { default as Modal } from './Modal'
+export { ListSkeleton, ListItemSkeleton } from './Skeletons'