feat(mespapiers): Improved CompositeHeaderImage component

Accepts more bitmap extensions and applies the style passed in props. This component is also more resilient.
cozy · May 30, 2023 · 5c2f7d2 · 5c2f7d2
1 parent c2f17ee
commit 5c2f7d2
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 6 deletions.
diff --git a/packages/cozy-mespapiers-lib/src/components/CompositeHeader/CompositeHeaderImage.jsx b/packages/cozy-mespapiers-lib/src/components/CompositeHeader/CompositeHeaderImage.jsx
@@ -2,6 +2,7 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
+import log from 'cozy-logger'
 import Icon, { iconPropType } from 'cozy-ui/transpiled/react/Icon'
 import { makeStyles } from 'cozy-ui/transpiled/react/styles'
 
@@ -79,24 +80,57 @@ const useStyles = makeStyles(() => ({
   }
 }))
 
+const supportedBitmapExtensions = ['.png', '.jpg', '.jpeg', '.webp']
+
+const isSupportedBitmapExtension = filename => {
+  if (typeof filename !== 'string') return false
+
+  return supportedBitmapExtensions.some(ext => filename.endsWith(ext))
+}
+
+/**
+ * CompositeHeaderImage
+ * @description Display an image or an icon
+ * - If the image is a bitmap (.png, .jpg, .jpeg or .webp), it will be displayed as an image
+ * - If the image is a vector, it will be displayed as an icon
+ * @param {Object} props
+ * @param {string} props.icon - Icon name (with extension)
+ * @param {object} props.fallbackIcon - SVG filetype
+ * @param {string} props.iconSize - Icon size (small, medium, large(default))
+ * @returns {ReactElement|null}
+ * @example
+ * <CompositeHeaderImage icon="icon.svg" fallbackIcon="fallback.svg" iconSize="small" />
+ */
 const CompositeHeaderImage = ({ icon, fallbackIcon, iconSize = 'large' }) => {
   const styles = useStyles()
 
   if (!icon && !fallbackIcon) {
     return null
   }
 
-  const iconName = icon && icon.split('.')[0]
+  const iconName = icon?.split('.')[0]
   const src = images[iconName] || fallbackIcon
-  const isBitmap = typeof src === 'string' && src.endsWith('.png')
+  const isVector = icon?.endsWith('.svg') || !!fallbackIcon
+  const isBitmap = isSupportedBitmapExtension(icon)
+
+  if (!isVector && !isBitmap) {
+    log(
+      'info',
+      `Unsupported image ${icon}, please verify supported images here https://github.com/cozy/cozy-libs/blob/9fec28cd9a6303df5f9675d960addd2abd1554ed/packages/cozy-mespapiers-lib/src/components/CompositeHeader/CompositeHeaderImage.jsx#L37`
+    )
+    return null
+  }
 
   if (isBitmap) {
     return (
       <img
         data-testid={src}
         src={src}
-        alt="illustration"
+        alt=""
         style={{ maxWidth: '16.25rem' }}
+        className={cx({
+          [`${styles.image}--${iconSize}`]: iconSize
+        })}
         aria-hidden="true"
       />
     )
@@ -117,7 +151,7 @@ const CompositeHeaderImage = ({ icon, fallbackIcon, iconSize = 'large' }) => {
 
 CompositeHeaderImage.propTypes = {
   icon: iconPropType,
-  fallbackIcon: iconPropType,
+  fallbackIcon: PropTypes.object,
   iconSize: PropTypes.oneOf(['small', 'medium', 'large'])
 }
 

diff --git a/packages/cozy-mespapiers-lib/src/components/CompositeHeader/CompositeHeaderImage.spec.js b/packages/cozy-mespapiers-lib/src/components/CompositeHeader/CompositeHeaderImage.spec.js
@@ -3,6 +3,7 @@ import { render } from '@testing-library/react'
 import React from 'react'
 
 import CompositeHeaderImage from './CompositeHeaderImage'
+import MockSVG from '../../assets/icons/IlluGenericNewPage.svg'
 
 const setup = ({ icon, fallbackIcon } = {}) => {
   return render(
@@ -24,9 +25,11 @@ describe('CompositeHeaderImage', () => {
   })
 
   it('should use fallbackIcon if icon is undefined', () => {
-    const { getByTestId } = setup({ fallbackIcon: 'fallback.svg' })
+    const { getByTestId } = setup({
+      fallbackIcon: MockSVG
+    })
 
-    expect(getByTestId('fallback.svg'))
+    expect(getByTestId('test-file-stub'))
   })
 
   it('should use fallback icon for not supported png', () => {
@@ -43,4 +46,10 @@ describe('CompositeHeaderImage', () => {
 
     expect(getByTestId('test-file-stub'))
   })
+
+  it('should return null if extension is not supported', () => {
+    const { queryByTestId } = setup({ icon: 'IlluGenericInputDate.gif' })
+
+    expect(queryByTestId('test-file-stub')).toBeNull()
+  })
 })