feat(Empty): Accept now <Icon />, <img> and <svg> as icon prop value

fix #1465
cozy · Oct 25, 2023 · d13cf26 · d13cf26
1 parent b35450b
commit d13cf26
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 10 deletions.
diff --git a/react/Empty/Readme.md b/react/Empty/Readme.md
@@ -28,3 +28,41 @@ const initialVariants = [
   )}
 </Variants>
 ```
+
+### With custom image
+
+```jsx
+import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy'
+import PeopleSVGIcon from '../../assets/icons/ui/people.svg'
+import Empty from 'cozy-ui/transpiled/react/Empty'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+
+;
+
+<>
+  <Empty
+    icon={CozyIcon}
+    title="With functional SVG"
+    text="Try adding some content to this list"
+  />
+  <Empty
+    icon={<img src='https://viewerdemo.cozycloud.cc/IMG_0062.PNG' />}
+    title="With IMG"
+    text="Try adding some content to this list"
+  />
+  <Empty
+    icon={
+      <svg width="100" height="100">
+        <circle cx="50" cy="50" r="40" stroke="var(--primaryColor)" strokeWidth="4" fill="var(--paperBackgroundColor)" />
+      </svg>
+    }
+    title="With SVG"
+    text="Try adding some content to this list"
+  />
+  <Empty
+    icon={<Icon icon={CozyIcon} />}
+    title="With Icon component"
+    text="Try adding some content to this list"
+  />
+</>
+```
diff --git a/react/Empty/index.jsx b/react/Empty/index.jsx
@@ -1,10 +1,12 @@
 import React from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
+
 import Icon, { iconPropType } from '../Icon'
-import styles from './styles.styl'
 import Typography from '../Typography'
 
+import styles from './styles.styl'
+
 export const Empty = ({
   icon,
   iconSize,
@@ -15,6 +17,8 @@ export const Empty = ({
   centered,
   ...restProps
 }) => {
+  const isReactIconElement = typeof icon === 'object' && !!icon.props
+
   return (
     <div
       className={cx(
@@ -24,15 +28,27 @@ export const Empty = ({
       )}
       {...restProps}
     >
-      {icon && (
-        <Icon
-          className={cx(styles['c-empty-img'], {
-            [styles[`c-empty-img--${iconSize}`]]: iconSize !== 'normal'
-          })}
-          icon={icon}
-          size="100%"
-        />
-      )}
+      {icon &&
+        (isReactIconElement ? (
+          React.cloneElement(icon, {
+            className: cx(
+              styles['c-empty-img'],
+              {
+                [styles[`c-empty-img--${iconSize}`]]: iconSize !== 'normal'
+              },
+              icon.props?.className
+            ),
+            size: icon.props?.size || (icon.type === Icon ? '100%' : undefined)
+          })
+        ) : (
+          <Icon
+            className={cx(styles['c-empty-img'], {
+              [styles[`c-empty-img--${iconSize}`]]: iconSize !== 'normal'
+            })}
+            icon={icon}
+            size="100%"
+          />
+        ))}
       {title && (
         <Typography gutterBottom variant="h3" color="textPrimary">
           {title}
@@ -51,6 +67,7 @@ Empty.propTypes = {
   text: PropTypes.node,
   /** Sets horizontal and vertical centring. The reference element is that of a fixed position */
   centered: PropTypes.bool,
+  children: PropTypes.node,
   className: PropTypes.string
 }
 

diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
@@ -2498,6 +2498,37 @@ exports[`Empty should render examples: Empty 1`] = `
 </div>"
 `;
 
+exports[`Empty should render examples: Empty 2`] = `
+"<div data-testid=\\"mountNode\\">
+  <div class=\\"styles__c-empty___3w5oV\\"><svg viewBox=\\"0 0 52 52\\" class=\\"styles__c-empty-img___2GC4d styles__icon___23x3R\\" width=\\"100%\\" height=\\"100%\\">
+      <path fill=\\"#297EF2\\" fill-rule=\\"evenodd\\" d=\\"M38.231 44H13.769C6.175 44 0 37.756 0 30.08c0-3.66 1.394-7.117 3.927-9.733 2.219-2.29 5.093-3.715 8.203-4.086a13.887 13.887 0 014.042-8.292A13.608 13.608 0 0125.801 4c3.62 0 7.04 1.407 9.629 3.968a13.897 13.897 0 014.038 8.25C46.482 16.853 52 22.828 52 30.082 52 37.756 45.82 44 38.23 44h.001zm-.163-3.001h.104c5.97 0 10.828-4.91 10.828-10.947 0-6.035-4.857-10.946-10.828-10.946h-.11c-.779 0-1.417-.627-1.435-1.417C36.492 11.794 31.637 7 25.803 7c-5.835 0-10.692 4.796-10.826 10.69a1.445 1.445 0 01-1.403 1.42C7.744 19.244 3 24.153 3 30.052 3 36.09 7.857 41 13.828 41h.088l.035-.002c.03 0 .062 0 .093.002h24.021l.003-.001zm-4.302-11.776c-.875-.585-.918-1.659-.92-1.706A.52.52 0 0032.32 27a.523.523 0 00-.506.536c.002.039.016.543.251 1.137a7.99 7.99 0 01-11.138.019 3.554 3.554 0 00.257-1.155.523.523 0 00-.503-.536.526.526 0 00-.528.515c0 .043-.042 1.121-.92 1.706a.536.536 0 00-.15.731.51.51 0 00.714.154c.225-.15.414-.322.572-.505a9.006 9.006 0 0012.251-.01c.16.184.35.36.582.515a.503.503 0 00.281.085.516.516 0 00.432-.24.537.537 0 00-.15-.731v.002z\\"></path>
+    </svg>
+    <h3 class=\\"MuiTypography-root MuiTypography-h3 MuiTypography-colorTextPrimary MuiTypography-gutterBottom\\">With functional SVG</h3>
+    <p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary MuiTypography-gutterBottom\\">Try adding some content to this list</p>
+    <div class=\\"styles__c-empty-text___3HnvR\\"></div>
+  </div>
+  <div class=\\"styles__c-empty___3w5oV\\"><img src=\\"https://viewerdemo.cozycloud.cc/IMG_0062.PNG\\" class=\\"styles__c-empty-img___2GC4d\\">
+    <h3 class=\\"MuiTypography-root MuiTypography-h3 MuiTypography-colorTextPrimary MuiTypography-gutterBottom\\">With IMG</h3>
+    <p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary MuiTypography-gutterBottom\\">Try adding some content to this list</p>
+    <div class=\\"styles__c-empty-text___3HnvR\\"></div>
+  </div>
+  <div class=\\"styles__c-empty___3w5oV\\"><svg width=\\"100\\" height=\\"100\\" class=\\"styles__c-empty-img___2GC4d\\">
+      <circle cx=\\"50\\" cy=\\"50\\" r=\\"40\\" stroke=\\"var(--primaryColor)\\" stroke-width=\\"4\\" fill=\\"var(--paperBackgroundColor)\\"></circle>
+    </svg>
+    <h3 class=\\"MuiTypography-root MuiTypography-h3 MuiTypography-colorTextPrimary MuiTypography-gutterBottom\\">With SVG</h3>
+    <p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary MuiTypography-gutterBottom\\">Try adding some content to this list</p>
+    <div class=\\"styles__c-empty-text___3HnvR\\"></div>
+  </div>
+  <div class=\\"styles__c-empty___3w5oV\\"><svg viewBox=\\"0 0 52 52\\" class=\\"styles__c-empty-img___2GC4d styles__icon___23x3R\\" width=\\"100%\\" height=\\"100%\\">
+      <path fill=\\"#297EF2\\" fill-rule=\\"evenodd\\" d=\\"M38.231 44H13.769C6.175 44 0 37.756 0 30.08c0-3.66 1.394-7.117 3.927-9.733 2.219-2.29 5.093-3.715 8.203-4.086a13.887 13.887 0 014.042-8.292A13.608 13.608 0 0125.801 4c3.62 0 7.04 1.407 9.629 3.968a13.897 13.897 0 014.038 8.25C46.482 16.853 52 22.828 52 30.082 52 37.756 45.82 44 38.23 44h.001zm-.163-3.001h.104c5.97 0 10.828-4.91 10.828-10.947 0-6.035-4.857-10.946-10.828-10.946h-.11c-.779 0-1.417-.627-1.435-1.417C36.492 11.794 31.637 7 25.803 7c-5.835 0-10.692 4.796-10.826 10.69a1.445 1.445 0 01-1.403 1.42C7.744 19.244 3 24.153 3 30.052 3 36.09 7.857 41 13.828 41h.088l.035-.002c.03 0 .062 0 .093.002h24.021l.003-.001zm-4.302-11.776c-.875-.585-.918-1.659-.92-1.706A.52.52 0 0032.32 27a.523.523 0 00-.506.536c.002.039.016.543.251 1.137a7.99 7.99 0 01-11.138.019 3.554 3.554 0 00.257-1.155.523.523 0 00-.503-.536.526.526 0 00-.528.515c0 .043-.042 1.121-.92 1.706a.536.536 0 00-.15.731.51.51 0 00.714.154c.225-.15.414-.322.572-.505a9.006 9.006 0 0012.251-.01c.16.184.35.36.582.515a.503.503 0 00.281.085.516.516 0 00.432-.24.537.537 0 00-.15-.731v.002z\\"></path>
+    </svg>
+    <h3 class=\\"MuiTypography-root MuiTypography-h3 MuiTypography-colorTextPrimary MuiTypography-gutterBottom\\">With Icon component</h3>
+    <p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextSecondary MuiTypography-gutterBottom\\">Try adding some content to this list</p>
+    <div class=\\"styles__c-empty-text___3HnvR\\"></div>
+  </div>
+</div>"
+`;
+
 exports[`Hero should render examples: Hero 1`] = `
 "<div data-testid=\\"mountNode\\">
   <div class=\\"styles__Hero___14z7_\\">