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';