1
1
import { Meta , StoryFn } from '@storybook/react' ;
2
2
3
- import { yfmTransform } from '../../../../.storybook/utils' ;
4
- import CardLayout from '../../../blocks/CardLayout/CardLayout' ;
3
+ import { blockListTransform , blockTransform } from '../../../../.storybook/utils' ;
4
+ import CardLayout , { CardLayoutBlockProps } from '../../../blocks/CardLayout/CardLayout' ;
5
5
import { BlockBase } from '../../../components' ;
6
6
import { ConstructorRow } from '../../../containers/PageConstructor/components/ConstructorRow' ;
7
7
import { Grid } from '../../../grid' ;
8
- import { BackgroundCardProps , ButtonProps , ContentItemProps , LinkProps } from '../../../models' ;
8
+ import { BackgroundCardProps } from '../../../models' ;
9
9
import BackgroundCard from '../BackgroundCard' ;
10
10
11
11
import data from './data.json' ;
12
12
13
- const transformContentList = ( list : ContentItemProps [ ] ) =>
14
- list . map ( ( item ) => {
15
- return {
16
- ...item ,
17
- text : item ?. text && yfmTransform ( item . text ) ,
18
- } ;
19
- } ) as ContentItemProps [ ] ;
20
-
21
- const getPaddingBottomTitle = ( padding : string ) =>
22
- data . paddings . title . replace ( '{{padding}}' , padding ) ;
23
-
24
13
export default {
25
14
component : BackgroundCard ,
26
15
title : 'Components/Cards/BackgroundCard' ,
27
16
argTypes : {
28
17
backgroundColor : {
29
18
control : { type : 'color' } ,
30
19
} ,
31
- paddingBottom : {
32
- control : { type : 'radio' , labels : { undefined : 'default' } } ,
33
- options : [ undefined , 's' , 'm' , 'l' , 'xl' ] ,
34
- } ,
35
20
theme : {
36
21
control : { type : 'radio' , labels : { undefined : 'default' } } ,
37
22
options : [ undefined , 'dark' , 'light' ] ,
@@ -40,189 +25,125 @@ export default {
40
25
} as Meta ;
41
26
42
27
const DefaultTemplate : StoryFn < BackgroundCardProps > = ( args ) => (
43
- < div style = { { display : 'flex' } } >
44
- < div style = { { display : 'inline-table' , maxWidth : '400px' , padding : '0 8px' } } >
45
- < BackgroundCard { ...args } additionalInfo = { yfmTransform ( data . common . additionalInfo ) } />
46
- </ div >
47
- < div style = { { display : 'inline-table' , maxWidth : '400px' , padding : '0 8px' } } >
48
- < BackgroundCard { ...args } links = { data . common . links as LinkProps [ ] } />
49
- </ div >
50
- < div style = { { display : 'inline-table' , maxWidth : '400px' , padding : '0 8px' } } >
51
- < BackgroundCard { ...args } buttons = { data . common . buttons as ButtonProps [ ] } />
52
- </ div >
53
- < div style = { { display : 'inline-table' , maxWidth : '400px' , padding : '0 8px' } } >
54
- < BackgroundCard { ...args } list = { transformContentList ( data . common . list ) } />
55
- </ div >
28
+ < div style = { { maxWidth : '400px' } } >
29
+ < BackgroundCard { ...args } />
56
30
</ div >
57
31
) ;
58
32
59
- const PaddingsTemplate : StoryFn < BackgroundCardProps > = ( args ) => (
33
+ const VariousContentTemplate : StoryFn < Record < number , { } > > = ( args ) => (
60
34
< div style = { { display : 'flex' } } >
61
- < div style = { { display : 'inline-table' , maxWidth : '400px' , padding : '0 8px' } } >
62
- < BackgroundCard { ...args } title = { getPaddingBottomTitle ( 'S' ) } paddingBottom = "s" />
63
- </ div >
64
- < div style = { { display : 'inline-table' , maxWidth : '400px' , padding : '0 8px' } } >
65
- < BackgroundCard { ...args } title = { getPaddingBottomTitle ( 'M' ) } paddingBottom = "m" />
66
- </ div >
67
- < div style = { { display : 'inline-table' , maxWidth : '400px' , padding : '0 8px' } } >
68
- < BackgroundCard { ...args } title = { getPaddingBottomTitle ( 'L' ) } paddingBottom = "l" />
69
- </ div >
70
- < div style = { { display : 'inline-table' , maxWidth : '400px' , padding : '0 8px' } } >
71
- < BackgroundCard { ...args } title = { getPaddingBottomTitle ( 'XL' ) } paddingBottom = "xl" />
72
- </ div >
73
- </ div >
74
- ) ;
75
-
76
- const CardThemesTemplate : StoryFn < { items : BackgroundCardProps [ ] } > = ( args ) => (
77
- < div style = { { display : 'flex' } } >
78
- { args . items . map ( ( item , i ) => (
79
- < div style = { { maxWidth : '400px' , padding : '0 8px' } } key = { i } >
80
- < BackgroundCard
81
- { ...item }
82
- list = { transformContentList (
83
- item . theme === 'dark'
84
- ? data . common . themed . darkList
85
- : data . common . themed . lightList ,
86
- ) }
87
- />
35
+ { Object . values ( args ) . map ( ( item , index ) => (
36
+ < div key = { index } style = { { display : 'inline-table' , maxWidth : '400px' , padding : '0 8px' } } >
37
+ < BackgroundCard { ...item } />
88
38
</ div >
89
39
) ) }
90
40
</ div >
91
41
) ;
92
42
93
- const BackgroundColorTemplate : StoryFn < BackgroundCardProps > = ( args ) => (
43
+ const CardThemesTemplate : StoryFn < Record < number , BackgroundCardProps > > = ( args ) => (
94
44
< div style = { { display : 'flex' } } >
95
- < div style = { { display : 'inline-table' , maxWidth : '400px' , padding : '0 8px' } } >
96
- < BackgroundCard { ...args } additionalInfo = { yfmTransform ( data . common . additionalInfo ) } />
97
- </ div >
98
- < div style = { { display : 'inline-table' , maxWidth : '400px' , padding : '0 8px' } } >
99
- < BackgroundCard { ...args } links = { data . common . links as LinkProps [ ] } />
100
- </ div >
101
- < div style = { { display : 'inline-table' , maxWidth : '400px' , padding : '0 8px' } } >
102
- < BackgroundCard
103
- { ...args }
104
- buttons = { data . cardThemes . content [ 1 ] . buttons as ButtonProps [ ] }
105
- />
106
- </ div >
107
- </ div >
108
- ) ;
109
-
110
- const WithUrlTemplate : StoryFn < { items : BackgroundCardProps [ ] } > = ( args ) => (
111
- < div style = { { display : 'flex' } } >
112
- { args . items . map ( ( item , i ) => (
113
- < div style = { { maxWidth : '400px' , padding : '0 8px' } } key = { i } >
45
+ { Object . values ( args ) . map ( ( item , index ) => (
46
+ < div style = { { maxWidth : '400px' , padding : '0 8px' } } key = { index } >
114
47
< BackgroundCard { ...item } />
115
48
</ div >
116
49
) ) }
117
50
</ div >
118
51
) ;
119
52
120
- const ControlPositionTemplate : StoryFn < BackgroundCardProps > = ( args ) => (
53
+ const ControlPositionTemplate : StoryFn <
54
+ Record < number , CardLayoutBlockProps & { children : BackgroundCardProps [ ] } >
55
+ > = ( args ) => (
121
56
< Grid >
122
57
< ConstructorRow >
123
- < BlockBase >
124
- < CardLayout title = { data . cardLayout . contentTitle } animated = { false } >
125
- { data . cardLayout . items . map ( ( item , index ) => (
126
- < BackgroundCard
127
- key = { index }
128
- { ...( item as Partial < BackgroundCardProps > ) }
129
- { ...args }
130
- controlPosition = "content"
131
- />
132
- ) ) }
133
- </ CardLayout >
134
- </ BlockBase >
135
- < BlockBase >
136
- < CardLayout
137
- title = { data . cardLayout . footerTitle }
138
- description = { data . cardLayout . footerDescription }
139
- animated = { false }
140
- >
141
- { data . cardLayout . items . map ( ( item , index ) => (
142
- < BackgroundCard
143
- key = { index }
144
- { ...( item as Partial < BackgroundCardProps > ) }
145
- { ...args }
146
- controlPosition = "footer"
147
- />
148
- ) ) }
149
- </ CardLayout >
150
- </ BlockBase >
58
+ { Object . values ( args ) . map ( ( { children, ...rest } , contentLayoutIndex ) => (
59
+ < BlockBase key = { contentLayoutIndex } >
60
+ < CardLayout { ...rest } >
61
+ { children . map ( ( item , index ) => (
62
+ < BackgroundCard key = { index } { ...item } />
63
+ ) ) }
64
+ </ CardLayout >
65
+ </ BlockBase >
66
+ ) ) }
151
67
</ ConstructorRow >
152
68
</ Grid >
153
69
) ;
154
70
155
71
export const Default = DefaultTemplate . bind ( { } ) ;
156
- export const WithBackgroundImage = DefaultTemplate . bind ( { } ) ;
157
- export const Paddings = PaddingsTemplate . bind ( { } ) ;
72
+ export const VariousContent = VariousContentTemplate . bind ( [ ] ) ;
73
+ export const WithBackgroundImage = VariousContentTemplate . bind ( [ ] ) ;
74
+ export const Paddings = VariousContentTemplate . bind ( [ ] ) ;
158
75
export const CardThemes = CardThemesTemplate . bind ( [ ] ) ;
159
- export const BorderLine = DefaultTemplate . bind ( { } ) ;
160
- export const BackgroundColor = BackgroundColorTemplate . bind ( { } ) ;
161
- export const WithUrl = WithUrlTemplate . bind ( { } ) ;
162
- export const ControlPosition = ControlPositionTemplate . bind ( { } ) ;
163
-
164
- const DefaultArgs = {
165
- title : data . common . title ,
166
- text : yfmTransform ( data . common . text ) ,
76
+ export const BorderLine = VariousContentTemplate . bind ( [ ] ) ;
77
+ export const BackgroundColor = VariousContentTemplate . bind ( [ ] ) ;
78
+ export const WithUrl = CardThemesTemplate . bind ( [ ] ) ;
79
+ export const ControlPosition = ControlPositionTemplate . bind ( [ ] ) ;
80
+
81
+ Default . args = blockTransform ( data . default ) as BackgroundCardProps ;
82
+
83
+ VariousContent . args = blockListTransform ( data . props ) as BackgroundCardProps [ ] ;
84
+ VariousContent . parameters = {
85
+ controls : {
86
+ include : Object . keys ( data . props ) ,
87
+ } ,
167
88
} ;
168
89
169
- Default . args = {
170
- ...DefaultArgs ,
171
- } as BackgroundCardProps ;
90
+ WithBackgroundImage . args = blockListTransform (
91
+ data . props . map ( ( item ) => ( { ...item , ...data . withBackgroundImage } ) ) ,
92
+ ) as BackgroundCardProps [ ] ;
93
+ WithBackgroundImage . parameters = {
94
+ controls : {
95
+ include : Object . keys ( data . props ) ,
96
+ } ,
97
+ } ;
172
98
173
- WithBackgroundImage . args = {
174
- ...DefaultArgs ,
175
- ...data . withBackgroundImage . content ,
176
- } as BackgroundCardProps ;
99
+ Paddings . args = blockListTransform (
100
+ data . withPaddings . map ( ( item ) => ( { ...item , ...data . withBackgroundImage } ) ) ,
101
+ ) as BackgroundCardProps [ ] ;
102
+ Paddings . parameters = {
103
+ controls : {
104
+ include : Object . keys ( data . withPaddings ) ,
105
+ } ,
106
+ } ;
177
107
178
- Paddings . args = {
179
- ...DefaultArgs ,
180
- ...data . withBackgroundImage . content ,
181
- } as BackgroundCardProps ;
108
+ CardThemes . args = blockListTransform ( data . cardThemes ) as BackgroundCardProps [ ] ;
109
+ CardThemes . parameters = {
110
+ controls : {
111
+ include : Object . keys ( data . cardThemes ) ,
112
+ } ,
113
+ } ;
182
114
183
- CardThemes . args = {
184
- items : [ ...data . cardThemes . content ] . map ( ( item ) => ( {
185
- ...DefaultArgs ,
115
+ BorderLine . args = blockListTransform (
116
+ data . props . map ( ( item ) => ( {
186
117
...item ,
187
- } ) ) as BackgroundCardProps [ ] ,
118
+ ...data . withBackgroundImage ,
119
+ ...data . borderLine ,
120
+ } ) ) ,
121
+ ) as BackgroundCardProps [ ] ;
122
+ BorderLine . parameters = {
123
+ controls : {
124
+ include : Object . keys ( data . props ) ,
125
+ } ,
188
126
} ;
189
127
190
- BorderLine . args = {
191
- ...DefaultArgs ,
192
- ...data . borderLine . content ,
193
- ...data . withBackgroundImage . content ,
194
- } as BackgroundCardProps ;
195
-
196
- BackgroundColor . args = {
197
- ...DefaultArgs ,
198
- ...data . backgroundColor . content ,
199
- } as BackgroundCardProps ;
200
-
201
- WithUrl . args = {
202
- items : [
203
- data . cardThemes . content [ 1 ] ,
204
- data . withBackgroundImage . content ,
205
- data . borderLine . content ,
206
- data . backgroundColor . content ,
207
- data . borderNone . content ,
208
- ] . map ( ( item ) => ( {
209
- ...DefaultArgs ,
210
- ...item ,
211
- url : data . url ,
212
- urlTitle : data . urlTitle ,
213
- } ) ) as BackgroundCardProps [ ] ,
128
+ BackgroundColor . args = blockListTransform ( data . backgroundColor ) as BackgroundCardProps [ ] ;
129
+ BackgroundColor . parameters = {
130
+ controls : {
131
+ include : Object . keys ( data . backgroundColor ) ,
132
+ } ,
214
133
} ;
215
134
216
- ControlPosition . argTypes = {
217
- controlPosition : { table : { disable : true } } ,
218
- url : { table : { disable : true } } ,
219
- urlTitle : { table : { disable : true } } ,
220
- analyticsEvents : { table : { disable : true } } ,
221
- title : { table : { disable : true } } ,
222
- text : { table : { disable : true } } ,
223
- titleId : { table : { disable : true } } ,
224
- textId : { table : { disable : true } } ,
225
- list : { table : { disable : true } } ,
226
- links : { table : { disable : true } } ,
227
- buttons : { table : { disable : true } } ,
135
+ WithUrl . args = blockListTransform ( data . withUrl ) as BackgroundCardProps [ ] ;
136
+ WithUrl . parameters = {
137
+ controls : {
138
+ include : Object . keys ( data . withUrl ) ,
139
+ } ,
140
+ } ;
141
+
142
+ ControlPosition . args = blockListTransform ( data . controlPosition ) as ( CardLayoutBlockProps & {
143
+ children : BackgroundCardProps [ ] ;
144
+ } ) [ ] ;
145
+ ControlPosition . parameters = {
146
+ controls : {
147
+ include : Object . keys ( data . controlPosition ) ,
148
+ } ,
228
149
} ;
0 commit comments