rename Image component to ImageComponent (#554)

Author: jaapbakker88

src/components/Attachment/Attachment.js

@@ -10,7 +10,10 @@ import DefaultAudio from './Audio';
 import DefaultCard from './Card';
 import DefaultFile from './FileAttachment';
 
-import { Image as DefaultImage, Gallery as DefaultGallery } from '../Gallery';
+import {
+  ImageComponent as DefaultImage,
+  Gallery as DefaultGallery,
+} from '../Gallery';
 
 export const SUPPORTED_VIDEO_FORMATS = [
   'video/mp4',

src/components/Gallery/Image.js

@@ -11,7 +11,7 @@ import { sanitizeUrl } from '@braintree/sanitize-url';
  * @example ../../docs/Image.md
  * @extends {React.PureComponent<import('type').ImageProps>}
  */
-class Image extends React.PureComponent {
+class ImageComponent extends React.PureComponent {
   static propTypes = {
     /** The full size image url */
     image_url: PropTypes.string,
@@ -56,4 +56,4 @@ class Image extends React.PureComponent {
   }
 }
 
-export default Image;
+export default ImageComponent;

src/components/Gallery/__tests__/Image.test.js

@@ -5,23 +5,27 @@ import { cleanup, render, fireEvent, waitFor } from '@testing-library/react';
 
 import '@testing-library/jest-dom';
 
-import Image from '../Image';
+import ImageComponent from '../Image';
 
 const mockImageAssets = 'https://placeimg.com/640/480/any';
 
 afterEach(cleanup); // eslint-disable-line
 
 describe('Image', () => {
   it('should render component with default props', () => {
-    const tree = renderer.create(<Image images={mockImageAssets} />).toJSON();
+    const tree = renderer
+      .create(<ImageComponent images={mockImageAssets} />)
+      .toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   describe('it should prevent unsafe image uri protocols in the rendered image src', () => {
     it('should prevent javascript protocol in image src', () => {
       // eslint-disable-next-line no-script-url
       const xssJavascriptUri = 'javascript:alert("p0wn3d")';
-      const { getByTestId } = render(<Image image_url={xssJavascriptUri} />);
+      const { getByTestId } = render(
+        <ImageComponent image_url={xssJavascriptUri} />,
+      );
       expect(getByTestId('image-test')).not.toHaveAttribute(
         'src',
         xssJavascriptUri,
@@ -30,28 +34,30 @@ describe('Image', () => {
     it('should prevent javascript protocol in thumbnail src', () => {
       // eslint-disable-next-line no-script-url
       const xssJavascriptUri = 'javascript:alert("p0wn3d")';
-      const { getByTestId } = render(<Image thumb_url={xssJavascriptUri} />);
+      const { getByTestId } = render(
+        <ImageComponent thumb_url={xssJavascriptUri} />,
+      );
       expect(getByTestId('image-test')).not.toHaveAttribute(
         'src',
         xssJavascriptUri,
       );
     });
     it('should prevent dataUris in image src', () => {
       const xssDataUri = 'data:image/svg+xml;base64,DANGEROUSENCODEDSVG';
-      const { getByTestId } = render(<Image image_url={xssDataUri} />);
+      const { getByTestId } = render(<ImageComponent image_url={xssDataUri} />);
       expect(getByTestId('image-test')).not.toHaveAttribute('src', xssDataUri);
     });
     it('should prevent dataUris in thumb src', () => {
       const xssDataUri = 'data:image/svg+xml;base64,DANGEROUSENCODEDSVG';
-      const { getByTestId } = render(<Image thumb_url={xssDataUri} />);
+      const { getByTestId } = render(<ImageComponent thumb_url={xssDataUri} />);
       expect(getByTestId('image-test')).not.toHaveAttribute('src', xssDataUri);
     });
   });
 
   it('should open modal on image click', async () => {
     jest.spyOn(console, 'warn').mockImplementation(() => null);
     const { getByTestId, getByTitle } = render(
-      <Image images={mockImageAssets} />,
+      <ImageComponent images={mockImageAssets} />,
     );
     fireEvent.click(getByTestId('image-test'));
 

src/components/Gallery/index.js

@@ -1,4 +1,4 @@
 export { default as Gallery } from './Gallery';
-export { default as Image } from './Image';
+export { default as ImageComponent } from './Image';
 export { default as ModalImage } from './ModalImage';
 export { default as ModalWrapper } from './ModalWrapper';