fix(fuselage): add message generic preview cover image (#863)

* refactor(fuselage): add external url to message generic preview image

* refactor: add image preview variation

* creating new component for imageLinkPreview

* refactor: update tests and pass onError and alt

* refactor; remove external link from image preview

* refactor: add props spread

* refactor: rename components

* refactor: extend html and anchor attributes on preview title

* removing unused props

Co-authored-by: Hugo Costa <hugocarreiracosta@gmail.com>
Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com>

Author: 3 people

packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreview.stories.tsx

@@ -73,7 +73,6 @@ $message-generic-preview-content-hover-background-color: theme(
     width: 100%;
     height: 100%;
 
-    cursor: zoom-in;
     white-space: nowrap;
     text-indent: 100%;
 
@@ -152,4 +151,14 @@ $message-generic-preview-content-hover-background-color: theme(
 
     margin: lengths.margin(-2);
   }
+
+  &__image {
+    width: fit-content;
+    max-width: inherit;
+    max-height: inherit;
+
+    cursor: pointer;
+
+    border: lengths.border-width(2) solid $message-generic-preview-border-color;
+  }
 }

packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreview.styles.scss

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { MessageGenericPreviewCoverImage } from './MessageGenericPreviewCoverImage';
+
+describe('MessageGenericPreviewCoverImage', () => {
+  it('renders without crashing', () => {
+    render(<MessageGenericPreviewCoverImage url='' width={200} height={200} />);
+  });
+
+  it('should render div with background image', () => {
+    render(
+      <MessageGenericPreviewCoverImage url='test' width={200} height={200} />
+    );
+    const previewImage = screen.getByTestId('preview-image');
+
+    expect(previewImage).toHaveStyle({
+      background: 'test',
+    });
+    expect(previewImage).toHaveClass('rcx-message-generic-preview__preview');
+    expect(previewImage).not.toHaveClass(
+      'rcx-message-generic-preview__preview--image'
+    );
+  });
+});

packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewCoverImage.spec.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { prependClassName } from '../../../helpers/prependClassName';
+
+type MessageGenericPreviewCoverImageProps = {
+  url: string;
+  width: number;
+  height: number;
+  className?: string;
+};
+
+export const MessageGenericPreviewCoverImage = ({
+  url,
+  width,
+  height,
+  className,
+  ...props
+}: MessageGenericPreviewCoverImageProps) => (
+  <div
+    className={prependClassName(
+      className,
+      'rcx-message-generic-preview__preview'
+    )}
+    style={{ backgroundImage: `url(${url})`, maxWidth: '100%' }}
+    data-testid='preview-image'
+    {...props}
+  >
+    <div style={{ paddingTop: `${(height / width) * 100}%` }} />
+  </div>
+);

packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewCoverImage.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { MessageGenericPreviewImage } from './MessageGenericPreviewImage';
+
+describe('MessageGenericPreviewImage', () => {
+  it('renders without crashing', () => {
+    render(<MessageGenericPreviewImage url='' />);
+  });
+
+  it('should render image', () => {
+    render(<MessageGenericPreviewImage url='test' />);
+    const previewImage = screen.getByRole('img');
+
+    expect(previewImage).toBeInTheDocument();
+    expect(previewImage).toHaveAttribute('src', 'test');
+  });
+});

packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewImage.spec.tsx

@@ -1,22 +1,25 @@
+import type { ImgHTMLAttributes } from 'react';
 import React from 'react';
 
+import { prependClassName } from '../../../helpers/prependClassName';
+
 type MessageGenericPreviewImageProps = {
   url: string;
-  width: number;
-  height: number;
-};
+  className?: string;
+} & ImgHTMLAttributes<HTMLImageElement>;
 
 export const MessageGenericPreviewImage = ({
   url,
-  width,
-  height,
+  className,
   ...props
 }: MessageGenericPreviewImageProps) => (
-  <div
-    className='rcx-message-generic-preview__preview'
-    style={{ backgroundImage: `url(${url})`, maxWidth: '100%' }}
+  <img
+    src={url}
+    className={prependClassName(
+      className,
+      'rcx-message-generic-preview__image'
+    )}
+    alt=''
     {...props}
-  >
-    <div style={{ paddingTop: `${(height / width) * 100}%` }} />
-  </div>
+  />
 );

packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewImage.tsx

@@ -1,10 +1,11 @@
-import type { ReactNode } from 'react';
+import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 import React from 'react';
 
 type MessageGenericPreviewTitleProps = {
   children?: ReactNode;
   externalUrl?: string;
-};
+} & HTMLAttributes<HTMLSpanElement> &
+  AnchorHTMLAttributes<HTMLAnchorElement>;
 
 export const MessageGenericPreviewTitle = ({
   externalUrl,

packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewTitle.tsx

@@ -2,6 +2,7 @@ export * from './MessageGenericPreview';
 export * from './MessageGenericPreviewContent';
 export * from './MessageGenericPreviewDescription';
 export * from './MessageGenericPreviewFooter';
+export * from './MessageGenericPreviewCoverImage';
 export * from './MessageGenericPreviewImage';
 export * from './MessageGenericPreviewThumb';
 export * from './MessageGenericPreviewTitle';