diff --git a/src/components/PlaceholderContainer/PlaceholderContainer.tsx b/src/components/PlaceholderContainer/PlaceholderContainer.tsx
index bbfbc1aa26..24998b3731 100644
--- a/src/components/PlaceholderContainer/PlaceholderContainer.tsx
+++ b/src/components/PlaceholderContainer/PlaceholderContainer.tsx
@@ -63,7 +63,7 @@ export const PlaceholderContainer = ({
};
const renderAction = () => {
- if (!actions || (!React.isValidElement(actions) && !actions.length)) {
+ if (!actions || !React.isValidElement(actions) || !Array.isArray(actions)) {
return null;
}
diff --git a/src/components/PlaceholderContainer/__stories__/PlaceholderContainer.stories.tsx b/src/components/PlaceholderContainer/__stories__/PlaceholderContainer.stories.tsx
index acf4e5147b..d0f8c0706b 100644
--- a/src/components/PlaceholderContainer/__stories__/PlaceholderContainer.stories.tsx
+++ b/src/components/PlaceholderContainer/__stories__/PlaceholderContainer.stories.tsx
@@ -1,10 +1,18 @@
import React from 'react';
-import type {Meta, StoryFn} from '@storybook/react';
+import {ChevronDown} from '@gravity-ui/icons';
+import type {Meta, /*StoryFn,*/ StoryObj} from '@storybook/react';
+import {Showcase} from '../../../demo/Showcase';
+import {ShowcaseItem} from '../../../demo/ShowcaseItem';
+import {Button} from '../../Button';
+import {DropdownMenu} from '../../DropdownMenu';
+import {Icon} from '../../Icon';
+import {block} from '../../utils/cn';
import {PlaceholderContainer} from '../PlaceholderContainer';
+import type {PlaceholderContainerActionProps, PlaceholderContainerProps} from '../types';
-import {PlaceholderContainerShowcase} from './PlaceholderContainerShowcase';
+import './PlaceholderContainerShowcase.scss';
export default {
title: 'Components/Data Display/PlaceholderContainer',
@@ -24,5 +32,235 @@ export default {
},
} as Meta;
-const ShowcaseTemplate: StoryFn = () => ;
-export const Showcase = ShowcaseTemplate.bind({});
+type Story = StoryObj;
+
+const b = block('placeholder-container-showcase');
+
+const ImageComponentTest = () => {
+ return (
+
+ );
+};
+
+const contentComponentTest = (
+
+
Custom title
+
with custom subtitle
+
and etc
+
+ You can add here any long text with custom content and use custom
+ content size for displaying very long texts.
+
+
+ {}},
+ {text: 'text 2', action: () => {}},
+ ]}
+ onSwitcherClick={(e) => e?.stopPropagation()}
+ switcher={
+
+ }
+ />
+
+);
+
+const actionMainProps: PlaceholderContainerActionProps = {
+ text: 'Main button',
+ view: 'normal',
+ onClick: () => alert('Click by main button'),
+};
+
+const actionAdditionalBtnProps: PlaceholderContainerActionProps = {
+ text: 'Additional button',
+ view: 'flat-secondary',
+ onClick: () => alert('Click by additional button'),
+};
+
+const baseProps = {
+ title: 'Container with one button & image component',
+ image: ,
+ className: 'placeholder-container',
+};
+
+const placeholderContainerProps: Omit = {
+ ...baseProps,
+ actions: [actionMainProps],
+ align: 'center',
+};
+
+const actionsProps = {
+ actions: [actionMainProps, actionAdditionalBtnProps],
+};
+
+const placeholderContainerCustomRenderedProps: Omit<
+ PlaceholderContainerProps,
+ 'size' | 'direction'
+> = {
+ ...placeholderContainerProps,
+ content: contentComponentTest,
+};
+
+const placeholderContainerCustomActionProps: Omit =
+ {
+ ...placeholderContainerProps,
+ actions: actionComponentTest,
+ };
+
+const descriptionProps = {
+ description:
+ 'Some long descriptionProps text that can contain of long long very long text etc. It can be repeated like this. Some long descriptionProps text that can contain of long long very long text etc.',
+ promoDescription:
+ "Comparing to 'L' size promo size has full width of the content block, a larger title size and alignment",
+};
+
+export const Size: Story = {
+ render: () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+};
+
+export const Actions: Story = {
+ render: () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+};
+
+export const Content: Story = {
+ render: () => (
+
+
+
+
+
+ ),
+};
diff --git a/src/components/PlaceholderContainer/__stories__/PlaceholderContainerShowcase.scss b/src/components/PlaceholderContainer/__stories__/PlaceholderContainerShowcase.scss
index c62c04d4bf..ee3fe3bea1 100644
--- a/src/components/PlaceholderContainer/__stories__/PlaceholderContainerShowcase.scss
+++ b/src/components/PlaceholderContainer/__stories__/PlaceholderContainerShowcase.scss
@@ -3,34 +3,6 @@
$block: '.#{$ns}placeholder-container-showcase';
#{$block} {
- display: grid;
-
- &__placeholder-examples {
- grid-area: auto;
- display: grid;
- grid-template: 'title' auto;
- gap: 20px;
- padding: 20px;
- }
-
- &__section + &__section {
- border-block-start: 1px solid var(--g-color-text-hint);
- }
-
- &__examples-row {
- display: grid;
- grid-template-columns: 1fr 1fr;
-
- &__sub-title {
- grid-area: subtitle;
- }
- }
-
- &__title {
- grid-area: title;
- margin: 0;
- }
-
&__custom-action {
margin-block-start: 20px;
}
diff --git a/src/components/PlaceholderContainer/__stories__/PlaceholderContainerShowcase.tsx b/src/components/PlaceholderContainer/__stories__/PlaceholderContainerShowcase.tsx
deleted file mode 100644
index 98d39be0c2..0000000000
--- a/src/components/PlaceholderContainer/__stories__/PlaceholderContainerShowcase.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-import React from 'react';
-
-import {ChevronDown} from '@gravity-ui/icons';
-
-import {Button} from '../../Button';
-import {DropdownMenu} from '../../DropdownMenu';
-import {Icon} from '../../Icon';
-import {block} from '../../utils/cn';
-import type {PlaceholderContainerActionProps, PlaceholderContainerProps} from '../index';
-import {PlaceholderContainer} from '../index';
-
-import './PlaceholderContainerShowcase.scss';
-
-const b = block('placeholder-container-showcase');
-
-const ImageComponentTest = () => {
- return (
-
- );
-};
-
-const contentComponentTest = (
-
-
There is any custom title here
-
- You can add here any long text with custom content and use custom
- content size for displaying very long texts.
-
-
- {}},
- {text: 'text 2', action: () => {}},
- ]}
- onSwitcherClick={(e) => e?.stopPropagation()}
- switcher={
-
- }
- />
-
-);
-
-const actionMainProps: PlaceholderContainerActionProps = {
- text: 'Main button',
- view: 'normal',
- onClick: () => alert('Click by main button'),
-};
-
-const actionAdditionalBtnProps: PlaceholderContainerActionProps = {
- text: 'Additional button',
- view: 'flat-secondary',
- onClick: () => alert('Click by additional button'),
-};
-
-const baseProps = {
- title: 'Container with one button & image component',
- image: ,
- className: 'placeholder-container',
-};
-
-const placeholderContainerProps: PlaceholderContainerProps = {
- ...baseProps,
- actions: [actionMainProps],
- align: 'center',
-};
-
-const actionsProps = {
- actions: [actionMainProps, actionAdditionalBtnProps],
-};
-
-const placeholderContainerCustomRenderedProps: PlaceholderContainerProps = {
- ...placeholderContainerProps,
- content: contentComponentTest,
-};
-
-const placeholderContainerCustomActionProps: PlaceholderContainerProps = {
- ...placeholderContainerProps,
- actions: actionComponentTest,
-};
-
-const descriptionProps = {
- description:
- 'Some long descriptionProps text that can contain of long long very long text etc. It can be repeated like this. Some long descriptionProps text that can contain of long long very long text etc.',
-};
-
-const imageProps = {
- url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEFklEQVR4nO2Y6U4iQRSF5/3fwAX3aGKMonHBHVFxxy3unmfpyalYpGlAZeJ4Sjw/btIWt6Tq+27dbvoPgMyBZBj8US/AAQtBwoXgEwK9BAuBHryFQA/bQqAHbCHQQ7UQ6EFaCPTwLAR6YBYCPSQLgR6MhSQAAwmEX51AL8FCoAdvIdDDthDoAVsI9FAtBHqQFgI9PAuBHpiFQA/JQqAHYyEJwEAC4Vcn0EuwEOjBWwj0sC0EesAWAj1UC4EepIVAD89CoAdmIdBDshDowVhIAjCQQPjVCfQSLAR68BYCPWwLgR6whUAP1UKgB2kh0MOzEOiB/SghNzc32fb2dnZ1ddX22evra3Z4eJhtbGxke3t72cPDQ1vO/f19Vq1WQ069Xg9z/sem7+7uwjovLi46rvP4+DisgWthbjHn8fExq9VqIefg4CB7fn5OT8jp6WlWKpWygYGBALy4genp6fBZDOY2Go1mDq9Lb/NjzMzMZE9PT18qg98zOjoa/v/m5mbLZwQ7Ozvbsobh4eGwt3zRxfkxpqamQjElI4QCBgcHmwssClleXg7ja2trAfDR0VHIn5iYCBXJGB8fz4aGhkJ1Moe5nLOysvJlMnjqCDiusyiEFc/xpaWlsIazs7OQPzIy0iyMWFjxZGxtbYW/FxYW0hDC9sQFcaGVSqVNyMvLS3NTvI7j5XI55J6cnITgdblcbpnHOZybnxeDc+bm5lraBdvI4uJix1bH1sMimJycbEIsChkbGws5PNFxbHV1NeTu7+8398pTlJ/HwuK8Tm1YckIIh2B2d3fbhFxeXoYxwsvPYX/mOKsyVma1Wm3J4RyO838UvzO2OMLhd1MGcwmw2zpZ8ax03suKQigsFlbxVHGcp5z7imvO5/BExeJKQkiMTkJi9XPR3TbKtsTrer3e00ajFPbwj2Tko5OQboVzfn4exufn50N+p8KJnYFF8auFAMjW19dDDtvNZ592frWQz7Ssbhude6dlMWKb4r0n377+RcivaVkf3dT5SMno9aZeK9wziveUXoV8dFPnU9WPuam/J+Szj728HurhsZd5bBX5MUrhd330g7KbkL547M0f2WJw0d1+GHKT3/3DsPLW64uxs7PTXz8MeeNjCynG7e1tUq9OGo1Gx3VeX1/336sTBywEfVgIPiHQS7AQ6MFbCPSwLQR6wBYCPVQLgR6khUAPz0KgB2Yh0EOyEOjBWEgCMJBA+NUJ9BIsBHrwFgI9bAuBHrCFQA/VQqAHaSHQw7MQ6IFZCPSQLAR6MBaSAAwkEH51Ar0EC4EevIVAD9tCoAdsIdBDtRDoQVoI9PAsBHpgFgI9JAuBHoyFJAADCYRfnUAvwUKgB28h0MO2EOgBWwj0UC0EepAWAj08C4EemIVAD+k7hfwFjRtJ9Zn/PDYAAAAASUVORK5CYII=',
- alt: 'image alt text',
-};
-
-export const PlaceholderContainerShowcase = () => {
- return (
-
-
-
PlaceholderContainer
-
-
-
-
-
-
-