Skip to content

Commit

Permalink
chore(PlaceholderContainer): refactor stories
Browse files Browse the repository at this point in the history
  • Loading branch information
@Marginy605
Marginy605 committed Aug 20, 2024
1 parent fa2128e commit a68246c
Show file tree
Hide file tree
Showing 4 changed files with 244 additions and 265 deletions.
4 changes: 2 additions & 2 deletions src/components/PlaceholderContainer/PlaceholderContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -73,7 +73,7 @@ export const PlaceholderContainer = ({

return (
<div className={b('actions')}>
{actions.map((actionItem) => (
{(actions as PlaceholderContainerActionProps[]).map((actionItem) => (
<PlaceholderContainerAction key={actionItem.text} {...actionItem} />
))}
</div>
Expand Down
246 changes: 242 additions & 4 deletions src/components/PlaceholderContainer/__stories__/PlaceholderContainer.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -24,5 +32,235 @@ export default {
},
} as Meta;

const ShowcaseTemplate: StoryFn = () => <PlaceholderContainerShowcase />;
export const Showcase = ShowcaseTemplate.bind({});
type Story = StoryObj<typeof PlaceholderContainer>;

const b = block('placeholder-container-showcase');

const ImageComponentTest = () => {
return (
<svg width="230" height="230" viewBox="0 0 230 230" xmlns="http://www.w3.org/2000/svg">
<g>
<rect fill="#DDDDDD" height="100%" transform="matrix(1 0 0 1 0 0)" width="100%" />
<text
fill="#999999"
fontFamily="Sans-serif"
fontSize="26"
strokeWidth="0"
textAnchor="middle"
transform="matrix(1.88041 0 0 1.88041 -48.1289 -81.7475)"
x="86.49"
y="114"
>
1:1
</text>
</g>
</svg>
);
};

const contentComponentTest = (
<div>
<h1>Custom title</h1>
<h2>with custom subtitle</h2>
<h3>and etc</h3>
<p>
You can add <strong>here</strong> any long text with custom content and use custom
content size for displaying very long texts.
</p>
</div>
);

const actionComponentTest = (
<div className={b('custom-action')}>
<DropdownMenu
defaultSwitcherProps={{view: 'flat-secondary'}}
items={[
{text: 'text 1', action: () => {}},
{text: 'text 2', action: () => {}},
]}
onSwitcherClick={(e) => e?.stopPropagation()}
switcher={
<Button>
Text
<Icon data={ChevronDown} size={16} />
</Button>
}
/>
</div>
);

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: <ImageComponentTest />,
className: 'placeholder-container',
};

const placeholderContainerProps: Omit<PlaceholderContainerProps, 'size' | 'direction'> = {
...baseProps,
actions: [actionMainProps],
align: 'center',
};

const actionsProps = {
actions: [actionMainProps, actionAdditionalBtnProps],
};

const placeholderContainerCustomRenderedProps: Omit<
PlaceholderContainerProps,
'size' | 'direction'
> = {
...placeholderContainerProps,
content: contentComponentTest,
};

const placeholderContainerCustomActionProps: Omit<PlaceholderContainerProps, 'size' | 'direction'> =
{
...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: () => (
<React.Fragment>
<Showcase title="Size row">
<ShowcaseItem title="Size s">
<PlaceholderContainer
{...placeholderContainerProps}
description={descriptionProps.description}
direction="row"
size="s"
/>
</ShowcaseItem>
<ShowcaseItem title="Size m">
<PlaceholderContainer
{...placeholderContainerProps}
description={descriptionProps.description}
direction="row"
size="m"
/>
</ShowcaseItem>
<ShowcaseItem title="Size l">
<PlaceholderContainer
{...placeholderContainerProps}
description={descriptionProps.description}
direction="row"
size="l"
/>
</ShowcaseItem>
<ShowcaseItem title="Size promo">
<PlaceholderContainer
{...placeholderContainerProps}
description={descriptionProps.promoDescription}
direction="row"
size="promo"
/>
</ShowcaseItem>
</Showcase>
<Showcase title="Size column">
<ShowcaseItem title="Size s">
<PlaceholderContainer
{...placeholderContainerProps}
description={descriptionProps.description}
direction="column"
size="s"
/>
</ShowcaseItem>
<ShowcaseItem title="Size m">
<PlaceholderContainer
{...placeholderContainerProps}
description={descriptionProps.description}
direction="column"
size="m"
/>
</ShowcaseItem>
<ShowcaseItem title="Size l">
<PlaceholderContainer
{...placeholderContainerProps}
description={descriptionProps.description}
direction="column"
size="l"
/>
</ShowcaseItem>
<ShowcaseItem title="Size promo">
<PlaceholderContainer
{...placeholderContainerProps}
description={descriptionProps.promoDescription}
direction="column"
size="promo"
/>
</ShowcaseItem>
</Showcase>
</React.Fragment>
),
};

export const Actions: Story = {
render: () => (
<React.Fragment>
<Showcase title="Actions">
<ShowcaseItem title="single control">
<PlaceholderContainer
{...placeholderContainerProps}
description={descriptionProps.description}
direction="row"
size="m"
title="Size m"
/>
</ShowcaseItem>
<ShowcaseItem title="multi controls">
<PlaceholderContainer
{...placeholderContainerProps}
{...actionsProps}
description={descriptionProps.description}
direction="row"
size="m"
title="Size m"
/>
</ShowcaseItem>
<ShowcaseItem title="custom control">
<PlaceholderContainer
{...placeholderContainerCustomActionProps}
description={descriptionProps.description}
direction="row"
size="m"
title="Size m"
/>
</ShowcaseItem>
</Showcase>
</React.Fragment>
),
};

export const Content: Story = {
render: () => (
<React.Fragment>
<Showcase>
<PlaceholderContainer
{...placeholderContainerCustomRenderedProps}
direction="row"
size="s"
title="Size s"
/>
</Showcase>
</React.Fragment>
),
};
28 changes: 0 additions & 28 deletions src/components/PlaceholderContainer/__stories__/PlaceholderContainerShowcase.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
Loading

0 comments on commit a68246c

Please sign in to comment.