Skip to content

Commit

Permalink
feat: refactor Story stories
Browse files Browse the repository at this point in the history
  • Loading branch information
@bityutskiyAO
bityutskiyAO committed Sep 17, 2024
1 parent 412420d commit 5455985
Showing 1 changed file with 190 additions and 19 deletions.
209 changes: 190 additions & 19 deletions src/components/Stories/__stories__/Stories.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';

import {Button} from '@gravity-ui/uikit';
import {Button, Flex, Text} from '@gravity-ui/uikit';
import type {Meta, StoryFn} from '@storybook/react';

import type {StoriesProps} from '../Stories';
Expand Down Expand Up @@ -98,32 +98,203 @@ const items: StoriesItem[] = [
},
];

const DefaultTemplate: StoryFn<StoriesProps> = (props: StoriesProps) => {
const [visible, setVisible] = React.useState(props.open);

React.useEffect(() => {
setVisible(props.open);
}, [props.open]);
const BaseStory = ({description, items}: {description: string; items: StoriesProps['items']}) => {
const [visible, setVisible] = React.useState(false);

return (
<React.Fragment>
<div>
<Button
onClick={() => {
setVisible(true);
}}
>
Open
</Button>
</div>
<Flex direction="column">
<Text>{description}</Text>
<Button
style={{width: 'fit-content'}}
onClick={() => {
setVisible(true);
}}
>
Open
</Button>

<Stories
{...props}
items={items}
open={visible}
onClose={() => {
setVisible(false);
}}
/>
</React.Fragment>
</Flex>
);
};

const DefaultTemplate: StoryFn<StoriesProps> = () => {
const itemsFirst: StoriesProps['items'] = [
{
title: 'Default story with simple text',
textBlockStyle: StoriesTextBlockStyle.Card,
mediaBlockStyle: StoriesMediaBlockStyle.HalfSizeWithMargins,
description:
'This story has default value for props textBlockStyle = "card" and mediaBlockStyle = "half-size-with-margins" ',
media: {
type: 'image',
url: 'https://storage.yandexcloud.net/uikit-storybook-assets/story-picture-7.png',
},
},
{
title: 'Story without margins in media block',
textBlockStyle: StoriesTextBlockStyle.Card,
mediaBlockStyle: StoriesMediaBlockStyle.HalfSize,
description:
'Props value: textBlockStyle = "card", mediaBlockStyle = "half-size-with-margins" and media type = "image"',
media: {
type: 'image',
url: 'https://storage.yandexcloud.net/uikit-storybook-assets/story-picture-7.png',
},
},
{
title: 'Story with full-size media block',
textBlockStyle: StoriesTextBlockStyle.Card,
mediaBlockStyle: StoriesMediaBlockStyle.FullSize,
description:
'Props value: textBlockStyle = "card", mediaBlockStyle = "full-size" and media type = "image"',
media: {
type: 'image',
url: 'https://storage.yandexcloud.net/uikit-storybook-assets/story-picture-6.png',
},
},
{
title: 'Story with full-size media block and transparent text-block',
textBlockStyle: StoriesTextBlockStyle.Transparent,
mediaBlockStyle: StoriesMediaBlockStyle.FullSize,
description:
'Props value: textBlockStyle = "transparent", mediaBlockStyle = "full-size" and media type = "image"',
media: {
type: 'image',
url: 'https://storage.yandexcloud.net/uikit-storybook-assets/story-picture-6.png',
},
},
];

const itemsSecond: StoriesProps['items'] = [
{
title: 'Story with video half-size',
textBlockStyle: StoriesTextBlockStyle.Transparent,
mediaBlockStyle: StoriesMediaBlockStyle.HalfSize,
description:
'Props value: textBlockStyle = "transparent", mediaBlockStyle = "half-size" and media type = "video"',
media: {
type: 'video',
url: 'https://storage.yandexcloud.net/uikit-storybook-assets/sample_960x400_ocean_with_audio.mp4',
},
},
{
title: 'Story with video half-size with margins and extra actions',
textBlockStyle: StoriesTextBlockStyle.Card,
mediaBlockStyle: StoriesMediaBlockStyle.HalfSizeWithMargins,
firstAction: {
children: 'First button',
view: 'action',
},
secondAction: {
children: 'Second button',
view: 'normal',
},
description:
'Props value: textBlockStyle = "card", mediaBlockStyle = "half-size-with-margins" and media type = "video"',
media: {
type: 'video',
url: 'https://storage.yandexcloud.net/uikit-storybook-assets/sample_960x400_ocean_with_audio.mp4',
},
},
{
title: 'Story with video full-size',
textBlockStyle: StoriesTextBlockStyle.Card,
mediaBlockStyle: StoriesMediaBlockStyle.FullSize,
description:
'Props value: textBlockStyle = "card", mediaBlockStyle = "full-size" and media type = "video"',
media: {
type: 'video',
url: 'https://storage.yandexcloud.net/uikit-storybook-assets/sample_960x400_ocean_with_audio.mp4',
},
},
];

const itemsThird: StoriesProps['items'] = [
{
title: 'Story with full-size image, extra actions, long text and default text colors',
textBlockStyle: StoriesTextBlockStyle.Card,
mediaBlockStyle: StoriesMediaBlockStyle.FullSize,
firstAction: {
children: 'First button',
view: 'action',
},
secondAction: {
children: 'Second button',
view: 'normal',
},
description:
'Lorem ipsum odor amet, consectetuer adipiscing elit. Nunc at parturient tristique senectus class duis eget per taciti. Eu rutrum est euismod risus aliquet in. Vehicula habitant nostra enim quis blandit consequat. Blandit ex ut purus; vestibulum accumsan duis? Porttitor accumsan at molestie integer nulla habitant? Egestas urna suscipit eleifend tortor mauris montes vulputate primis?Tempor viverra vitae tempus consectetur egestas? Quam dolor dictumst pellentesque porta; pulvinar conubia placerat risus. Leo at elementum vivamus fermentum erat taciti. Turpis ipsum faucibus primis purus, montes curae eu vel. Lacus metus sagittis dictumst diam libero imperdiet rhoncus neque. Natoque nullam inceptos porttitor integer porttitor nascetur a interdum. Imperdiet scelerisque rutrum congue massa eleifend torquent nisi. Sociosqu libero volutpat nisl orci viverra. Tristique egestas auctor conubia; etiam lectus scelerisque ligula. Magnis ultrices venenatis vivamus hac taciti inceptos leo. Interdum magnis sollicitudin elementum placerat montes. Lacinia platea netus nascetur ornare sociosqu. Inceptos taciti iaculis interdum nisl sodales in eros fermentum. Justo maecenas elementum condimentum feugiat consectetur semper sollicitudin. Primis sodales posuere facilisis donec ipsum efficitur. Faucibus accumsan lectus bibendum rhoncus maecenas, eget aliquam netus. Lectus torquent ut sodales fringilla natoque.',
media: {
type: 'image',
url: 'https://storage.yandexcloud.net/uikit-storybook-assets/story-picture-6.png',
},
},
{
title: 'Story with full-size image, transparent text-block and long content with extra actions and custom text colors',
textBlockStyle: StoriesTextBlockStyle.Transparent,
mediaBlockStyle: StoriesMediaBlockStyle.FullSize,
textColorStyles: {
titleColor: 'var(--g-color-text-brand)',
counterColor: 'var(--g-color-text-brand)',
descriptionColor: 'var(--g-color-text-inverted-primary)',
},
firstAction: {
children: 'First button',
view: 'action',
},
secondAction: {
children: 'Second button',
view: 'normal-contrast',
},
description:
'Lorem ipsum odor amet, consectetuer adipiscing elit. Nunc at parturient tristique senectus class duis eget per taciti. Eu rutrum est euismod risus aliquet in. Vehicula habitant nostra enim quis blandit consequat. Blandit ex ut purus; vestibulum accumsan duis? Porttitor accumsan at molestie integer nulla habitant? Egestas urna suscipit eleifend tortor mauris montes vulputate primis?Tempor viverra vitae tempus consectetur egestas? Quam dolor dictumst pellentesque porta; pulvinar conubia placerat risus. Leo at elementum vivamus fermentum erat taciti. Turpis ipsum faucibus primis purus, montes curae eu vel. Lacus metus sagittis dictumst diam libero imperdiet rhoncus neque. Natoque nullam inceptos porttitor integer porttitor nascetur a interdum. Imperdiet scelerisque rutrum congue massa eleifend torquent nisi. Sociosqu libero volutpat nisl orci viverra. Tristique egestas auctor conubia; etiam lectus scelerisque ligula. Magnis ultrices venenatis vivamus hac taciti inceptos leo. Interdum magnis sollicitudin elementum placerat montes. Lacinia platea netus nascetur ornare sociosqu. Inceptos taciti iaculis interdum nisl sodales in eros fermentum. Justo maecenas elementum condimentum feugiat consectetur semper sollicitudin. Primis sodales posuere facilisis donec ipsum efficitur. Faucibus accumsan lectus bibendum rhoncus maecenas, eget aliquam netus. Lectus torquent ut sodales fringilla natoque.',
media: {
type: 'image',
url: 'https://storage.yandexcloud.net/uikit-storybook-assets/story-picture-7.png',
},
},
{
title: 'Story with full-size video, extra actions, long text and default text colors',
textBlockStyle: StoriesTextBlockStyle.Card,
mediaBlockStyle: StoriesMediaBlockStyle.FullSize,
firstAction: {
children: 'First button',
view: 'action',
},
secondAction: {
children: 'Second button',
view: 'normal',
},
description:
'Lorem ipsum odor amet, consectetuer adipiscing elit. Nunc at parturient tristique senectus class duis eget per taciti. Eu rutrum est euismod risus aliquet in. Vehicula habitant nostra enim quis blandit consequat. Blandit ex ut purus; vestibulum accumsan duis? Porttitor accumsan at molestie integer nulla habitant? Egestas urna suscipit eleifend tortor mauris montes vulputate primis?Tempor viverra vitae tempus consectetur egestas? Quam dolor dictumst pellentesque porta; pulvinar conubia placerat risus. Leo at elementum vivamus fermentum erat taciti. Turpis ipsum faucibus primis purus, montes curae eu vel. Lacus metus sagittis dictumst diam libero imperdiet rhoncus neque. Natoque nullam inceptos porttitor integer porttitor nascetur a interdum. Imperdiet scelerisque rutrum congue massa eleifend torquent nisi. Sociosqu libero volutpat nisl orci viverra. Tristique egestas auctor conubia; etiam lectus scelerisque ligula. Magnis ultrices venenatis vivamus hac taciti inceptos leo. Interdum magnis sollicitudin elementum placerat montes. Lacinia platea netus nascetur ornare sociosqu. Inceptos taciti iaculis interdum nisl sodales in eros fermentum. Justo maecenas elementum condimentum feugiat consectetur semper sollicitudin. Primis sodales posuere facilisis donec ipsum efficitur. Faucibus accumsan lectus bibendum rhoncus maecenas, eget aliquam netus. Lectus torquent ut sodales fringilla natoque.',
media: {
type: 'video',
url: 'https://storage.yandexcloud.net/uikit-storybook-assets/sample_960x400_ocean_with_audio.mp4',
},
},
];

const exampleDescription = [
'Stories with different text and media block styles',
'Stories with video content',
'Stories with all features',
];

return (
<Flex gap={5} direction="column">
{[itemsFirst, itemsSecond, itemsThird].map((items, index) => {
return (
<BaseStory key={index} items={items} description={exampleDescription[index]} />
);
})}
</Flex>
);
};
export const Default = DefaultTemplate.bind({});
Expand Down

0 comments on commit 5455985

Please sign in to comment.