From f1f19f0980854e5eeb39903551873fc7d1e6a331 Mon Sep 17 00:00:00 2001 From: Filipe Marins Date: Mon, 17 Oct 2022 21:21:31 -0300 Subject: [PATCH] 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 Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com> --- .../MessageGenericPreview.stories.tsx | 38 +++++++++++++++++-- .../MessageGenericPreview.styles.scss | 11 +++++- .../MessageGenericPreviewCoverImage.spec.tsx | 25 ++++++++++++ .../MessageGenericPreviewCoverImage.tsx | 30 +++++++++++++++ .../MessageGenericPreviewImage.spec.tsx | 18 +++++++++ .../MessageGenericPreviewImage.tsx | 25 ++++++------ .../MessageGenericPreviewTitle.tsx | 5 ++- .../Message/MessageGenericPreview/index.tsx | 1 + 8 files changed, 136 insertions(+), 17 deletions(-) create mode 100644 packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewCoverImage.spec.tsx create mode 100644 packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewCoverImage.tsx create mode 100644 packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewImage.spec.tsx diff --git a/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreview.stories.tsx b/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreview.stories.tsx index ad6ed5802b..a1b4946f03 100644 --- a/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreview.stories.tsx +++ b/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreview.stories.tsx @@ -7,6 +7,7 @@ import Message from '..'; import { Box } from '../..'; import { Avatar } from '../../Avatar'; import { MessageGenericPreviewContent } from './MessageGenericPreviewContent'; +import { MessageGenericPreviewCoverImage } from './MessageGenericPreviewCoverImage'; import { MessageGenericPreviewDescription } from './MessageGenericPreviewDescription'; import { MessageGenericPreviewImage } from './MessageGenericPreviewImage'; import { MessageGenericPreviewThumb } from './MessageGenericPreviewThumb'; @@ -56,13 +57,15 @@ export default { export const Default: Story = () => ( - - Title + + Title + From Gmail to YouTube, everything at Google runs in containers. We’ve packaged this experience From Gmail to YouTube, everything at Google @@ -75,6 +78,35 @@ export const Default: Story = () => ( ); +export const ImagePreview: Story = () => ( + + + +); + +export const LinkPreview: Story = () => ( + + + + + Title + + + From Gmail to YouTube, everything at Google runs in containers. We’ve + packaged this experience From Gmail to YouTube, everything at Google + runs in containers. We’ve packaged this experience From Gmail to + YouTube, everything at Google runs in containers. We’ve packaged this + experience From Gmail to YouTube, everything at Google runs in + containers. We’ve packaged this experience o... + + + +); + export const NoPreview: Story = () => ( @@ -114,7 +146,7 @@ export const Thumb: Story = () => ( - { + it('renders without crashing', () => { + render(); + }); + + it('should render div with background image', () => { + render( + + ); + 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' + ); + }); +}); diff --git a/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewCoverImage.tsx b/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewCoverImage.tsx new file mode 100644 index 0000000000..49cce9d937 --- /dev/null +++ b/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewCoverImage.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) => ( +
+
+
+); diff --git a/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewImage.spec.tsx b/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewImage.spec.tsx new file mode 100644 index 0000000000..f36ba8e10d --- /dev/null +++ b/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewImage.spec.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(); + }); + + it('should render image', () => { + render(); + const previewImage = screen.getByRole('img'); + + expect(previewImage).toBeInTheDocument(); + expect(previewImage).toHaveAttribute('src', 'test'); + }); +}); diff --git a/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewImage.tsx b/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewImage.tsx index 625313efc9..0948201570 100644 --- a/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewImage.tsx +++ b/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewImage.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; export const MessageGenericPreviewImage = ({ url, - width, - height, + className, ...props }: MessageGenericPreviewImageProps) => ( -
-
-
+ /> ); diff --git a/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewTitle.tsx b/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewTitle.tsx index c7085b4144..20c6a5f042 100644 --- a/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewTitle.tsx +++ b/packages/fuselage/src/components/Message/MessageGenericPreview/MessageGenericPreviewTitle.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 & + AnchorHTMLAttributes; export const MessageGenericPreviewTitle = ({ externalUrl, diff --git a/packages/fuselage/src/components/Message/MessageGenericPreview/index.tsx b/packages/fuselage/src/components/Message/MessageGenericPreview/index.tsx index 0f9309120d..5241b38419 100644 --- a/packages/fuselage/src/components/Message/MessageGenericPreview/index.tsx +++ b/packages/fuselage/src/components/Message/MessageGenericPreview/index.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';