Skip to content

Commit 2bc5a42

Browse files
aeksandlaaeksandla
authored
chore: update buttons story (#1274)
1 parent 2da30c9 commit 2bc5a42

9 files changed

+124
-161
lines changed

‎src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-stories-Icons-light-chromium-linux.png‎

-320 Bytes
Loading

‎src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-stories-Icons-light-webkit-linux.png‎

-701 Bytes
Loading

‎src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-stories-ThemesSizes-light-chromium-linux.png‎

6.32 KB
Loading

‎src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-stories-ThemesSizes-light-webkit-linux.png‎

31 KB
Loading

‎src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-stories-Width-light-chromium-linux.png‎

559 Bytes
Loading

‎src/components/Button/__snapshots__/Button.visual.test.tsx-snapshots/Button-render-stories-Width-light-webkit-linux.png‎

1.44 KB
Loading

‎src/components/Button/__stories__/Button.stories.tsx‎

Lines changed: 104 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import {IconData} from '@gravity-ui/uikit';
1+
import * as React from 'react';
2+
23
import {Meta, StoryFn} from '@storybook/react';
34

4-
import {Col, Grid, Row} from '../../../grid';
5+
import {Col, Grid, GridAlignItems, Row} from '../../../grid';
56
import Button, {ButtonProps} from '../Button';
67

78
import {CONTRAST_THEMES, SIZES, THEMES} from './constants';
@@ -13,177 +14,134 @@ import './Button.stories.scss';
1314
export default {
1415
component: Button,
1516
title: 'Components/Links and buttons/Button',
16-
args: {
17-
text: 'Button',
18-
size: 'l',
19-
},
20-
argTypes: {
21-
size: {
22-
control: {
23-
type: 'select',
24-
},
25-
options: SIZES,
26-
},
27-
},
2817
} as Meta;
2918

30-
const createIconConfig = (
31-
iconData: IconData,
32-
position?: 'left' | 'right',
33-
iconSize?: number,
34-
className?: string,
35-
) => ({iconData, position, iconSize, className});
19+
const THEMES_SIZES = [...THEMES, ...CONTRAST_THEMES].map((theme) =>
20+
SIZES.map((size) => ({
21+
size,
22+
theme,
23+
...data.themesSizes,
24+
})),
25+
);
3626

37-
const createButtonRow = (label: string, buttons: React.ReactNode[]) => (
38-
<Row>
39-
<Col style={{margin: '20px 0'}}>{label}</Col>
40-
{buttons.map((button, index) => (
41-
<Col key={index}>{button}</Col>
42-
))}
43-
</Row>
27+
const ICON_VARIANTS = [
28+
{iconData: 'Plus'},
29+
{iconData: data.iconExamples.signatureSvg},
30+
{url: data.iconExamples.customUrl},
31+
].map((source) =>
32+
[{position: 'left'}, {position: 'right'}, {iconSize: 14}, {iconSize: 20}].map((props) => ({
33+
img: {
34+
...source,
35+
...props,
36+
},
37+
...data.withIcon,
38+
})),
4439
);
40+
const ICON_SOURCES = ['Gravity UI', 'Custom SVG', 'Img URL'];
4541

4642
const DefaultTemplate: StoryFn<ButtonProps> = (args) => <Button {...args} />;
4743

48-
const SizesTemplate: StoryFn<ButtonProps> = (args) => (
49-
<Row>
50-
<Col style={{margin: '20px 0'}}>{args.theme}</Col>
51-
{SIZES.map((size) => (
52-
<Col key={size}>
53-
<Button {...args} size={size} />
44+
const SizesTemplate: StoryFn<Record<number, ButtonProps>> = (args) => (
45+
<Row
46+
alignItems={GridAlignItems.End}
47+
style={{
48+
background: CONTRAST_THEMES.includes(args[0].theme as (typeof CONTRAST_THEMES)[number])
49+
? 'rgb(58, 116, 255)'
50+
: 'transparent',
51+
padding: '10px 0',
52+
}}
53+
>
54+
<Col>{args[0].theme}</Col>
55+
{Object.values(args).map((itemArgs, index) => (
56+
<Col key={index}>
57+
<Button {...itemArgs} />
5458
</Col>
5559
))}
5660
</Row>
5761
);
5862

59-
const ThemesSizesTemplate: StoryFn<ButtonProps> = (args) => (
60-
<Grid>
61-
<Row>
62-
<Col />
63-
{SIZES.map((size) => (
64-
<Col key={size}>{size}</Col>
65-
))}
66-
</Row>
67-
{THEMES.map((theme) => (
68-
<SizesTemplate key={theme} {...args} theme={theme} />
69-
))}
70-
<section style={{color: '#fff', background: '#3a74ff'}}>
71-
{CONTRAST_THEMES.map((theme) => (
72-
<SizesTemplate key={theme} {...args} theme={theme} />
63+
const ThemesSizesTemplate: StoryFn<Record<number, Record<number, ButtonProps>>> = (args) => (
64+
<React.Fragment>
65+
<Grid>
66+
<Row>
67+
<Col />
68+
{Object.values(args[0]).map((arg, index) => (
69+
<Col key={index}>{arg.size}</Col>
70+
))}
71+
</Row>
72+
{Object.values(args).map((arg, index) => (
73+
<SizesTemplate key={index} {...arg} />
7374
))}
74-
</section>
75-
</Grid>
75+
</Grid>
76+
</React.Fragment>
7677
);
7778

78-
const WidthTemplate: StoryFn<ButtonProps> = (args) => (
79+
const VariantsTemplate: StoryFn<Record<number, ButtonProps>> = (args) => (
7980
<Row>
80-
<Col>
81-
<Button {...args} width="auto" />
82-
</Col>
83-
<Col>
84-
<Button {...args} width="max" />
85-
</Col>
81+
{Object.values(args).map((arg, index) => (
82+
<Col key={index}>
83+
<Button {...arg} />
84+
</Col>
85+
))}
8686
</Row>
8787
);
8888

89-
const IconTemplate: StoryFn<ButtonProps> = (args) => {
90-
const {iconExamples} = data;
91-
92-
return (
89+
const IconTemplate: StoryFn<Record<number, Record<number, ButtonProps>>> = (args) => (
90+
<React.Fragment>
9391
<Grid>
9492
<Row>
95-
<Col>Source</Col>
93+
<Col />
9694
<Col>Left</Col>
9795
<Col>Right</Col>
9896
<Col>Small</Col>
9997
<Col>Large</Col>
10098
</Row>
101-
102-
{createButtonRow('Gravity UI', [
103-
<Button key="plus-left" {...args} img={createIconConfig('Plus')} text="Button" />,
104-
<Button
105-
key="plus-right"
106-
{...args}
107-
img={createIconConfig('Plus', 'right')}
108-
text="Button"
109-
/>,
110-
<Button
111-
key="plus-small"
112-
{...args}
113-
img={createIconConfig('Plus', 'left', 14)}
114-
text="Button"
115-
/>,
116-
<Button
117-
key="plus-large"
118-
{...args}
119-
img={createIconConfig('Plus', 'left', 20)}
120-
text="Button"
121-
/>,
122-
])}
123-
124-
{createButtonRow('Custom SVG', [
125-
<Button
126-
key="signature-left"
127-
{...args}
128-
img={createIconConfig(iconExamples.signatureSvg)}
129-
text="Button"
130-
/>,
131-
<Button
132-
key="signature-right"
133-
{...args}
134-
img={createIconConfig(iconExamples.signatureSvg, 'right')}
135-
text="Button"
136-
/>,
137-
<Button
138-
key="signature-small"
139-
{...args}
140-
img={createIconConfig(iconExamples.signatureSvg, 'left', 14)}
141-
text="Button"
142-
/>,
143-
<Button
144-
key="signature-large"
145-
{...args}
146-
img={createIconConfig(iconExamples.signatureSvg, 'left', 20)}
147-
text="Button"
148-
/>,
149-
])}
150-
151-
{createButtonRow('Img URL', [
152-
<Button
153-
key="gravity-left"
154-
{...args}
155-
img={{url: iconExamples.customUrl, position: 'left'}}
156-
text="Button"
157-
/>,
158-
<Button
159-
key="gravity-right"
160-
{...args}
161-
img={{url: iconExamples.customUrl, position: 'right'}}
162-
text="Button"
163-
/>,
164-
<Button
165-
key="gravity-small"
166-
{...args}
167-
img={{url: iconExamples.customUrl, position: 'left', iconSize: 14}}
168-
text="Button"
169-
/>,
170-
<Button
171-
key="gravity-large"
172-
{...args}
173-
img={{url: iconExamples.customUrl, position: 'left', iconSize: 20}}
174-
text="Button"
175-
/>,
176-
])}
99+
{Object.values(args).map((arg, index) => (
100+
<Row
101+
key={index}
102+
alignItems={GridAlignItems.End}
103+
style={{
104+
background: CONTRAST_THEMES.includes(
105+
arg[0].theme as (typeof CONTRAST_THEMES)[number],
106+
)
107+
? 'rgb(58, 116, 255)'
108+
: 'transparent',
109+
padding: '10px 0',
110+
}}
111+
>
112+
<Col>{ICON_SOURCES[index]}</Col>
113+
{Object.values(arg).map((itemArgs, indexInner) => (
114+
<Col key={indexInner}>
115+
<Button {...itemArgs} />
116+
</Col>
117+
))}
118+
</Row>
119+
))}
177120
</Grid>
178-
);
179-
};
121+
</React.Fragment>
122+
);
180123

181124
export const Default = DefaultTemplate.bind({});
182-
export const ThemesSizes = ThemesSizesTemplate.bind({});
183-
export const Width = WidthTemplate.bind({});
184-
export const Icons = IconTemplate.bind({});
125+
export const ThemesSizes = ThemesSizesTemplate.bind([[]]);
126+
ThemesSizes.parameters = {
127+
controls: {
128+
include: Object.keys(THEMES_SIZES),
129+
},
130+
};
131+
export const Width = VariantsTemplate.bind([]);
132+
Width.parameters = {
133+
controls: {
134+
include: Object.keys(data.width),
135+
},
136+
};
137+
export const Icons = IconTemplate.bind([[]]);
138+
Icons.parameters = {
139+
controls: {
140+
include: Object.keys(ICON_VARIANTS),
141+
},
142+
};
185143

186-
Default.args = data.default.content as ButtonProps;
187-
ThemesSizes.args = data.themesSizes.content as ButtonProps;
188-
Width.args = data.themesSizes.content as ButtonProps;
189-
Icons.args = data.withIcon.content as ButtonProps;
144+
Default.args = data.default as ButtonProps;
145+
ThemesSizes.args = THEMES_SIZES as ButtonProps[][];
146+
Width.args = data.width as ButtonProps[];
147+
Icons.args = ICON_VARIANTS as ButtonProps[][];

‎src/components/Button/__stories__/data.json‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
11
{
22
"themesSizes": {
3-
"content": {
4-
"text": "Button"
5-
}
3+
"text": "Button"
64
},
75
"default": {
8-
"content": {
9-
"text": "Button",
10-
"img": "story-assets/icon.svg",
11-
"urlTitle": "Some button title"
12-
}
6+
"text": "Button",
7+
"img": "story-assets/icon.svg",
8+
"urlTitle": "Some button title"
139
},
14-
"withIcon": {
15-
"content": {
16-
"text": "Button with Icon",
17-
"urlTitle": "Button with icon"
10+
"width": [
11+
{
12+
"text": "Button max",
13+
"width": "max"
14+
},
15+
{
16+
"text": "Button auto",
17+
"width": "auto"
1818
}
19+
],
20+
"withIcon": {
21+
"text": "Button",
22+
"urlTitle": "Button with icon"
1923
},
2024
"iconExamples": {
2125
"signatureSvg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M4.14219 1C5.44437 1.00011 6.56422 1.64867 7.32871 2.79297C7.77435 3.4602 8.09611 4.29013 8.28477 5.25879C8.36468 5.25332 8.44476 5.25002 8.52403 5.25C10.0644 5.25 11.1308 6.06112 11.567 7.25098C11.6355 7.43798 11.686 7.63187 11.7223 7.83008C12.3059 7.32045 12.9696 6.965 13.7135 6.96484C14.8191 6.96488 15.6261 7.62771 15.899 8.52246C16.1651 9.39509 15.9026 10.4055 15.1168 11.125L14.6109 10.5713L14.1041 10.0186C14.4886 9.66654 14.5523 9.24803 14.4645 8.95996C14.3834 8.69419 14.1569 8.46488 13.7135 8.46484C13.4571 8.465 13.1102 8.59201 12.6461 9.01465C12.1841 9.43549 11.6769 10.0852 11.1148 10.9727C10.8976 11.3155 10.4462 11.4232 10.0973 11.2158C9.74912 11.0082 9.62878 10.5614 9.82578 10.207C10.3203 9.31896 10.3923 8.40362 10.1588 7.7666C9.94682 7.18896 9.45757 6.75 8.52403 6.75C8.50416 6.75003 8.48367 6.75131 8.46348 6.75195C8.47486 6.97241 8.48106 7.19807 8.48106 7.42871C8.48105 9.7461 8.22569 11.5813 7.64414 12.8633C7.34905 13.5137 6.95543 14.0546 6.43711 14.4326C5.91064 14.8164 5.30001 15 4.63731 15C3.78194 14.9999 3.05442 14.6625 2.55039 14.0879C2.05585 13.5238 1.81407 12.7765 1.81407 12C1.81407 10.4553 2.85141 8.77335 4.08457 7.5332C4.86978 6.74367 5.83446 6.03366 6.82774 5.62207C6.67217 4.77899 6.40845 4.11529 6.08164 3.62598C5.56421 2.85153 4.88952 2.5001 4.14219 2.5C2.62487 2.50016 1.87208 3.27259 1.61094 4.0791C1.32365 4.96675 1.61327 5.85967 2.16953 6.23633C2.51235 6.46852 2.60179 6.93438 2.36973 7.27734C2.13755 7.62013 1.67167 7.71051 1.32871 7.47852C0.0908699 6.64071 -0.256671 4.9792 0.184183 3.61719C0.651454 2.17399 1.99342 1.00018 4.14219 1ZM6.97813 7.20801C6.37142 7.52722 5.73525 8.00131 5.14805 8.5918C4.01981 9.72652 3.31407 11.0449 3.31407 12C3.31407 12.4731 3.46065 12.8513 3.67832 13.0996C3.88682 13.3372 4.19749 13.4999 4.63731 13.5C5.01074 13.5 5.30554 13.4013 5.55332 13.2207C5.80923 13.0341 6.05977 12.7271 6.27891 12.2441C6.7261 11.2583 6.98105 9.68261 6.98106 7.42871C6.98106 7.35427 6.97945 7.28068 6.97813 7.20801ZM15.1168 11.125C14.8113 11.4041 14.3368 11.3834 14.0572 11.0781C13.778 10.7727 13.7991 10.2982 14.1041 10.0186L15.1168 11.125Z\" fill=\"black\"/></svg>",

‎src/models/constructor-items/common.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -224,16 +224,17 @@ export type ButtonTheme =
224224
| 'scale'
225225
| 'monochrome';
226226

227-
export interface ButtonProps
228-
extends AnalyticsEventsBase,
229-
Pick<UikitButtonProps, 'size' | 'width' | 'extraProps'> {
227+
export interface ButtonProps extends AnalyticsEventsBase {
230228
text: string;
231229
url: string;
232230
urlTitle?: string;
233231
primary?: boolean;
234232
theme?: ButtonTheme;
235233
img?: ButtonImageProps | string;
236234
target?: string;
235+
size?: UikitButtonProps['size'];
236+
width?: UikitButtonProps['width'];
237+
extraProps?: UikitButtonProps['extraProps'];
237238
}
238239

239240
export type ButtonImagePosition = 'left' | 'right';

0 commit comments

Comments
 (0)