diff --git a/src/components/FilePreview/FilePreview.scss b/src/components/FilePreview/FilePreview.scss
index bdece132..a646f42a 100644
--- a/src/components/FilePreview/FilePreview.scss
+++ b/src/components/FilePreview/FilePreview.scss
@@ -44,15 +44,21 @@ $smallRoundedButtonSize: 24px;
flex-direction: column;
align-items: center;
- cursor: pointer;
position: relative;
outline: none;
box-shadow: var(--gc-card-box-shadow);
- background-color: var(--_-color-base-background);
border-radius: var(--_-border-radius);
padding: 4px 10px;
+ &_clickable {
+ cursor: pointer;
+ }
+
+ &_hoverable {
+ background-color: var(--_-color-base-background);
+ }
+
&::after {
position: absolute;
top: 0;
diff --git a/src/components/FilePreview/FilePreview.tsx b/src/components/FilePreview/FilePreview.tsx
index bc4e45b8..2fe9aa99 100644
--- a/src/components/FilePreview/FilePreview.tsx
+++ b/src/components/FilePreview/FilePreview.tsx
@@ -80,13 +80,16 @@ export function FilePreview({
}
}, [file, imageSrc]);
+ const clickable = Boolean(onClick);
+ const withActions = Boolean(actions?.length);
+
return (
{typeof previewSrc === 'string' ? (
diff --git a/src/components/FilePreview/__stories__/FilePreview.stories.tsx b/src/components/FilePreview/__stories__/FilePreview.stories.tsx
index 267f4116..0b02468b 100644
--- a/src/components/FilePreview/__stories__/FilePreview.stories.tsx
+++ b/src/components/FilePreview/__stories__/FilePreview.stories.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import {CircleExclamation, Link, Xmark} from '@gravity-ui/icons';
+import {Flex} from '@gravity-ui/uikit';
import type {Meta, StoryFn} from '@storybook/react';
import {FilePreview, FilePreviewProps} from '../FilePreview';
@@ -58,7 +59,6 @@ const DefaultTemplate: StoryFn = (args) => {
};
export const Default = DefaultTemplate.bind({});
-
Default.args = {
file: {name: 'my-file.docs', type: 'text/docs'} as File,
onClick: () => {
@@ -72,3 +72,38 @@ Default.args = {
},
],
};
+
+const NoClickableTemplate: StoryFn> = (args) => {
+ return (
+
+
+ alert('Are you sure you want to delete the file?'),
+ title: 'Close',
+ },
+ ]}
+ />
+ {
+ window.open('https://disk.yandex.com', '_blank');
+ }}
+ actions={[
+ {
+ icon: Xmark,
+ onClick: () => alert('Are you sure you want to delete the file?'),
+ title: 'Close',
+ },
+ ]}
+ />
+
+ );
+};
+
+export const NoClickable = NoClickableTemplate.bind({});