@@ -68,6 +68,183 @@ export const HorizontalLayout = () => {
68
68
)
69
69
}
70
70
71
+ export const DefaultLayoutWithHelp = ( ) => {
72
+ return (
73
+ < ComponentBox data-visual-test = "forms-value-summary-list-default-with-help" >
74
+ < Form . Handler
75
+ data = { {
76
+ firstName : 'John' ,
77
+ lastName : 'Doe' ,
78
+ nickName : 'JD' ,
79
+ streetName : 'Osloveien' ,
80
+ streetNr : 12 ,
81
+ } }
82
+ >
83
+ < Form . Card >
84
+ < Form . SubHeading > Subheading</ Form . SubHeading >
85
+
86
+ < Value . SummaryList >
87
+ < Value . Name . First
88
+ path = "/firstName"
89
+ help = { {
90
+ open : true ,
91
+ title : 'Help title' ,
92
+ content : 'Help content' ,
93
+ } }
94
+ />
95
+ < Value . Name . Last path = "/lastName" />
96
+ < Value . String
97
+ path = "/nickName"
98
+ label = "kallenavn"
99
+ help = { {
100
+ open : true ,
101
+ title : 'Help title' ,
102
+ content : 'Help content' ,
103
+ } }
104
+ />
105
+ < Value . Composition
106
+ label = "Street"
107
+ help = { {
108
+ open : true ,
109
+ title : 'Help title' ,
110
+ content : 'Help content' ,
111
+ } }
112
+ >
113
+ < Value . String path = "/streetName" />
114
+ < Value . Number
115
+ path = "/streetNr"
116
+ help = { {
117
+ open : true ,
118
+ title : 'Help title' ,
119
+ content : 'Help content' ,
120
+ } }
121
+ />
122
+ </ Value . Composition >
123
+ </ Value . SummaryList >
124
+ </ Form . Card >
125
+ </ Form . Handler >
126
+ </ ComponentBox >
127
+ )
128
+ }
129
+
130
+ export const GridLayoutWithHelp = ( ) => {
131
+ return (
132
+ < ComponentBox data-visual-test = "forms-value-summary-list-grid-with-help" >
133
+ < Form . Handler
134
+ data = { {
135
+ firstName : 'John' ,
136
+ lastName : 'Doe' ,
137
+ nickName : 'JD' ,
138
+ streetName : 'Osloveien' ,
139
+ streetNr : 12 ,
140
+ } }
141
+ >
142
+ < Form . Card >
143
+ < Form . SubHeading > Subheading</ Form . SubHeading >
144
+
145
+ < Value . SummaryList layout = "grid" >
146
+ < Value . Name . First
147
+ path = "/firstName"
148
+ help = { {
149
+ open : true ,
150
+ title : 'Help title' ,
151
+ content : 'Help content' ,
152
+ } }
153
+ />
154
+ < Value . Name . Last path = "/lastName" />
155
+ < Value . String
156
+ path = "/nickName"
157
+ label = "kallenavn"
158
+ help = { {
159
+ open : true ,
160
+ title : 'Help title' ,
161
+ content : 'Help content' ,
162
+ } }
163
+ />
164
+ < Value . Composition
165
+ label = "Street"
166
+ help = { {
167
+ open : true ,
168
+ title : 'Help title' ,
169
+ content : 'Help content' ,
170
+ } }
171
+ >
172
+ < Value . String path = "/streetName" />
173
+ < Value . Number
174
+ path = "/streetNr"
175
+ help = { {
176
+ open : true ,
177
+ title : 'Help title' ,
178
+ content : 'Help content' ,
179
+ } }
180
+ />
181
+ </ Value . Composition >
182
+ </ Value . SummaryList >
183
+ </ Form . Card >
184
+ </ Form . Handler >
185
+ </ ComponentBox >
186
+ )
187
+ }
188
+
189
+ export const HorizontalLayoutWithHelp = ( ) => {
190
+ return (
191
+ < ComponentBox data-visual-test = "forms-value-summary-list-horizontal-with-help" >
192
+ < Form . Handler
193
+ data = { {
194
+ firstName : 'John' ,
195
+ lastName : 'Doe' ,
196
+ nickName : 'JD' ,
197
+ streetName : 'Osloveien' ,
198
+ streetNr : 12 ,
199
+ } }
200
+ >
201
+ < Form . Card >
202
+ < Form . SubHeading > Subheading</ Form . SubHeading >
203
+
204
+ < Value . SummaryList layout = "horizontal" >
205
+ < Value . Name . First
206
+ path = "/firstName"
207
+ help = { {
208
+ open : true ,
209
+ title : 'Help title' ,
210
+ content : 'Help content' ,
211
+ } }
212
+ />
213
+ < Value . Name . Last path = "/lastName" />
214
+ < Value . String
215
+ path = "/nickName"
216
+ label = "kallenavn"
217
+ help = { {
218
+ open : true ,
219
+ title : 'Help title' ,
220
+ content : 'Help content' ,
221
+ } }
222
+ />
223
+ < Value . Composition
224
+ label = "Street"
225
+ help = { {
226
+ open : true ,
227
+ title : 'Help title' ,
228
+ content : 'Help content' ,
229
+ } }
230
+ >
231
+ < Value . String path = "/streetName" />
232
+ < Value . Number
233
+ path = "/streetNr"
234
+ help = { {
235
+ open : true ,
236
+ title : 'Help title' ,
237
+ content : 'Help content' ,
238
+ } }
239
+ />
240
+ </ Value . Composition >
241
+ </ Value . SummaryList >
242
+ </ Form . Card >
243
+ </ Form . Handler >
244
+ </ ComponentBox >
245
+ )
246
+ }
247
+
71
248
export const CombinedLayout = ( ) => {
72
249
return (
73
250
< ComponentBox data-visual-test = "forms-value-summary-list-combined" >
0 commit comments