@kitconcept/volto-light-theme 6.0.1 → 7.0.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.changelog.draft +6 -2
- package/CHANGELOG.md +21 -0
- package/package.json +2 -1
- package/src/components/Blocks/Teaser/DefaultBody.jsx +26 -38
- package/src/components/Summary/DefaultSummary.tsx +24 -0
- package/src/components/Summary/{EventSummary.jsx → EventSummary.tsx} +5 -5
- package/src/components/Summary/{FileSummary.jsx → FileSummary.tsx} +4 -5
- package/src/components/Summary/{NewsItemSummary.jsx → NewsItemSummary.tsx} +5 -5
- package/src/components/Summary/Summary.stories.tsx +121 -0
- package/src/components/Widgets/ObjectList.tsx +2 -1
- package/src/primitives/Card/Card.stories.tsx +251 -0
- package/src/primitives/Card/Card.tsx +143 -0
- package/src/stories/BlockWrapper.tsx +25 -0
- package/src/stories/grid.teaser.stories.tsx +156 -0
- package/src/stories/mocks.ts +504 -0
- package/src/stories/static/black-starry-night.jpg +0 -0
- package/src/stories/static/image-light.jpg +0 -0
- package/src/stories/teaser.stories.tsx +74 -0
- package/src/theme/_bgcolor-blocks-layout.scss +1 -1
- package/src/theme/_insets.scss +25 -0
- package/src/theme/_layout.scss +30 -1
- package/src/theme/blocks/_grid.scss +14 -1
- package/src/theme/blocks/_teaser.scss +15 -2
- package/src/theme/card.scss +168 -0
- package/src/theme/main.scss +2 -0
- package/src/components/Summary/DefaultSummary.jsx +0 -16
|
@@ -0,0 +1,504 @@
|
|
|
1
|
+
const demoImage = 'black-starry-night.jpg';
|
|
2
|
+
|
|
3
|
+
export function ObjectBrowserItem(demoImage) {
|
|
4
|
+
return {
|
|
5
|
+
'@id': '/folder/page',
|
|
6
|
+
'@type': 'Document',
|
|
7
|
+
description:
|
|
8
|
+
'The Page content type can be used to display content on a single page of the website. Pages can be structured using text, images and blocks.',
|
|
9
|
+
Description:
|
|
10
|
+
'The Page content type can be used to display content on a single page of the website. Pages can be structured using text, images and blocks.',
|
|
11
|
+
Title: 'Page',
|
|
12
|
+
title: 'Page',
|
|
13
|
+
getRemoteUrl: null,
|
|
14
|
+
hasPreviewImage: true,
|
|
15
|
+
head_title: null,
|
|
16
|
+
image_field: 'preview_image',
|
|
17
|
+
image_scales: {
|
|
18
|
+
preview_image: [
|
|
19
|
+
{
|
|
20
|
+
'content-type': 'image/jpeg',
|
|
21
|
+
download: demoImage,
|
|
22
|
+
filename: 'black-starry-night.jpg',
|
|
23
|
+
height: 1708,
|
|
24
|
+
scales: {
|
|
25
|
+
great: {
|
|
26
|
+
download: demoImage,
|
|
27
|
+
height: 854,
|
|
28
|
+
width: 1200,
|
|
29
|
+
},
|
|
30
|
+
huge: {
|
|
31
|
+
download: demoImage,
|
|
32
|
+
height: 1138,
|
|
33
|
+
width: 1600,
|
|
34
|
+
},
|
|
35
|
+
icon: {
|
|
36
|
+
download: demoImage,
|
|
37
|
+
height: 22,
|
|
38
|
+
width: 32,
|
|
39
|
+
},
|
|
40
|
+
large: {
|
|
41
|
+
download: demoImage,
|
|
42
|
+
height: 569,
|
|
43
|
+
width: 800,
|
|
44
|
+
},
|
|
45
|
+
larger: {
|
|
46
|
+
download: demoImage,
|
|
47
|
+
height: 711,
|
|
48
|
+
width: 1000,
|
|
49
|
+
},
|
|
50
|
+
mini: {
|
|
51
|
+
download: demoImage,
|
|
52
|
+
height: 142,
|
|
53
|
+
width: 200,
|
|
54
|
+
},
|
|
55
|
+
preview: {
|
|
56
|
+
download: demoImage,
|
|
57
|
+
height: 284,
|
|
58
|
+
width: 400,
|
|
59
|
+
},
|
|
60
|
+
teaser: {
|
|
61
|
+
download: demoImage,
|
|
62
|
+
height: 427,
|
|
63
|
+
width: 600,
|
|
64
|
+
},
|
|
65
|
+
thumb: {
|
|
66
|
+
download: demoImage,
|
|
67
|
+
height: 91,
|
|
68
|
+
width: 128,
|
|
69
|
+
},
|
|
70
|
+
tile: {
|
|
71
|
+
download: demoImage,
|
|
72
|
+
height: 45,
|
|
73
|
+
width: 64,
|
|
74
|
+
},
|
|
75
|
+
},
|
|
76
|
+
size: 693013,
|
|
77
|
+
width: 2400,
|
|
78
|
+
},
|
|
79
|
+
],
|
|
80
|
+
},
|
|
81
|
+
};
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
export const teaserBlock = {
|
|
85
|
+
'@type': 'teaser',
|
|
86
|
+
href: [
|
|
87
|
+
{
|
|
88
|
+
'@id': '.',
|
|
89
|
+
'@type': 'Document',
|
|
90
|
+
title: 'Page',
|
|
91
|
+
Title: 'Page',
|
|
92
|
+
description:
|
|
93
|
+
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.',
|
|
94
|
+
Description:
|
|
95
|
+
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.',
|
|
96
|
+
getRemoteUrl: null,
|
|
97
|
+
hasPreviewImage: true,
|
|
98
|
+
head_title: 'Head title',
|
|
99
|
+
image_field: 'preview_image',
|
|
100
|
+
image_scales: {
|
|
101
|
+
preview_image: [
|
|
102
|
+
{
|
|
103
|
+
'content-type': 'image/jpeg',
|
|
104
|
+
download: demoImage,
|
|
105
|
+
filename: 'black-starry-night.jpg',
|
|
106
|
+
height: 1708,
|
|
107
|
+
scales: {
|
|
108
|
+
great: {
|
|
109
|
+
download: demoImage,
|
|
110
|
+
height: 854,
|
|
111
|
+
width: 1200,
|
|
112
|
+
},
|
|
113
|
+
huge: {
|
|
114
|
+
download: demoImage,
|
|
115
|
+
height: 1138,
|
|
116
|
+
width: 1600,
|
|
117
|
+
},
|
|
118
|
+
icon: {
|
|
119
|
+
download: demoImage,
|
|
120
|
+
height: 22,
|
|
121
|
+
width: 32,
|
|
122
|
+
},
|
|
123
|
+
large: {
|
|
124
|
+
download: demoImage,
|
|
125
|
+
height: 569,
|
|
126
|
+
width: 800,
|
|
127
|
+
},
|
|
128
|
+
larger: {
|
|
129
|
+
download: demoImage,
|
|
130
|
+
height: 711,
|
|
131
|
+
width: 1000,
|
|
132
|
+
},
|
|
133
|
+
mini: {
|
|
134
|
+
download: demoImage,
|
|
135
|
+
height: 142,
|
|
136
|
+
width: 200,
|
|
137
|
+
},
|
|
138
|
+
preview: {
|
|
139
|
+
download: demoImage,
|
|
140
|
+
height: 284,
|
|
141
|
+
width: 400,
|
|
142
|
+
},
|
|
143
|
+
teaser: {
|
|
144
|
+
download: demoImage,
|
|
145
|
+
height: 427,
|
|
146
|
+
width: 600,
|
|
147
|
+
},
|
|
148
|
+
thumb: {
|
|
149
|
+
download: demoImage,
|
|
150
|
+
height: 91,
|
|
151
|
+
width: 128,
|
|
152
|
+
},
|
|
153
|
+
tile: {
|
|
154
|
+
download: demoImage,
|
|
155
|
+
height: 45,
|
|
156
|
+
width: 64,
|
|
157
|
+
},
|
|
158
|
+
},
|
|
159
|
+
size: 693013,
|
|
160
|
+
width: 2400,
|
|
161
|
+
},
|
|
162
|
+
],
|
|
163
|
+
},
|
|
164
|
+
},
|
|
165
|
+
],
|
|
166
|
+
styles: {
|
|
167
|
+
align: 'left',
|
|
168
|
+
},
|
|
169
|
+
title: 'Headline H2',
|
|
170
|
+
};
|
|
171
|
+
|
|
172
|
+
export const gridBlockOne = {
|
|
173
|
+
'@type': 'gridBlock',
|
|
174
|
+
blocks: {
|
|
175
|
+
'281a22fb-c353-4b91-b2bc-88e6a52ed65a': {
|
|
176
|
+
...teaserBlock,
|
|
177
|
+
},
|
|
178
|
+
},
|
|
179
|
+
blocks_layout: {
|
|
180
|
+
items: ['281a22fb-c353-4b91-b2bc-88e6a52ed65a'],
|
|
181
|
+
},
|
|
182
|
+
};
|
|
183
|
+
|
|
184
|
+
export const gridBlockTwo = {
|
|
185
|
+
'@type': 'gridBlock',
|
|
186
|
+
blocks: {
|
|
187
|
+
'281a22fb-c353-4b91-b2bc-88e6a52ed65a': {
|
|
188
|
+
...teaserBlock,
|
|
189
|
+
},
|
|
190
|
+
'f34fa7dd-ce59-4f7f-b795-7d7f1e388df1': {
|
|
191
|
+
...teaserBlock,
|
|
192
|
+
},
|
|
193
|
+
},
|
|
194
|
+
blocks_layout: {
|
|
195
|
+
items: [
|
|
196
|
+
'281a22fb-c353-4b91-b2bc-88e6a52ed65a',
|
|
197
|
+
'f34fa7dd-ce59-4f7f-b795-7d7f1e388df1',
|
|
198
|
+
],
|
|
199
|
+
},
|
|
200
|
+
};
|
|
201
|
+
|
|
202
|
+
export const gridBlockThree = {
|
|
203
|
+
'@type': 'gridBlock',
|
|
204
|
+
blocks: {
|
|
205
|
+
'281a22fb-c353-4b91-b2bc-88e6a52ed65a': {
|
|
206
|
+
...teaserBlock,
|
|
207
|
+
},
|
|
208
|
+
'f34fa7dd-ce59-4f7f-b795-7d7f1e388df1': {
|
|
209
|
+
...teaserBlock,
|
|
210
|
+
},
|
|
211
|
+
'f34fa7dd-ce59-4f7f-b795-7d7f1e388df2': {
|
|
212
|
+
...teaserBlock,
|
|
213
|
+
},
|
|
214
|
+
},
|
|
215
|
+
blocks_layout: {
|
|
216
|
+
items: [
|
|
217
|
+
'281a22fb-c353-4b91-b2bc-88e6a52ed65a',
|
|
218
|
+
'f34fa7dd-ce59-4f7f-b795-7d7f1e388df1',
|
|
219
|
+
'f34fa7dd-ce59-4f7f-b795-7d7f1e388df2',
|
|
220
|
+
],
|
|
221
|
+
},
|
|
222
|
+
};
|
|
223
|
+
|
|
224
|
+
export const gridBlockFour = {
|
|
225
|
+
'@type': 'gridBlock',
|
|
226
|
+
blocks: {
|
|
227
|
+
'281a22fb-c353-4b91-b2bc-88e6a52ed65a': {
|
|
228
|
+
...teaserBlock,
|
|
229
|
+
},
|
|
230
|
+
'f34fa7dd-ce59-4f7f-b795-7d7f1e388df1': {
|
|
231
|
+
...teaserBlock,
|
|
232
|
+
},
|
|
233
|
+
'281a22fb-c353-4b91-b2bc-88e6a52ed652': {
|
|
234
|
+
...teaserBlock,
|
|
235
|
+
},
|
|
236
|
+
'f34fa7dd-ce59-4f7f-b795-7d7f1e388df2': {
|
|
237
|
+
...teaserBlock,
|
|
238
|
+
},
|
|
239
|
+
},
|
|
240
|
+
blocks_layout: {
|
|
241
|
+
items: [
|
|
242
|
+
'281a22fb-c353-4b91-b2bc-88e6a52ed65a',
|
|
243
|
+
'f34fa7dd-ce59-4f7f-b795-7d7f1e388df1',
|
|
244
|
+
'281a22fb-c353-4b91-b2bc-88e6a52ed652',
|
|
245
|
+
'f34fa7dd-ce59-4f7f-b795-7d7f1e388df2',
|
|
246
|
+
],
|
|
247
|
+
},
|
|
248
|
+
};
|
|
249
|
+
|
|
250
|
+
export const gridBlock = {
|
|
251
|
+
'@type': 'gridBlock',
|
|
252
|
+
blocks: {
|
|
253
|
+
'281a22fb-c353-4b91-b2bc-88e6a52ed65a': {
|
|
254
|
+
'@type': 'teaser',
|
|
255
|
+
description:
|
|
256
|
+
'Lorem ipsum dolor sit amet adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.',
|
|
257
|
+
head_title: 'Head title ',
|
|
258
|
+
href: [
|
|
259
|
+
{
|
|
260
|
+
'@id': '.',
|
|
261
|
+
'@type': 'Document',
|
|
262
|
+
description:
|
|
263
|
+
'Der Teaser-Block erlaubt das Hinzuf\u00fcgen eines Elements welches einen bestehenden Inhalte der Webseite mit einem Bild, einem Titel und einer Beschreibung anteasert.',
|
|
264
|
+
Title: 'Block: Teaser',
|
|
265
|
+
Description:
|
|
266
|
+
'Der Teaser-Block erlaubt das Hinzuf\u00fcgen eines Elements welches einen bestehenden Inhalte der Webseite mit einem Bild, einem Titel und einer Beschreibung anteasert.',
|
|
267
|
+
title: 'Block: Teaser',
|
|
268
|
+
getRemoteUrl: null,
|
|
269
|
+
hasPreviewImage: true,
|
|
270
|
+
head_title: 'Head Title',
|
|
271
|
+
image_field: 'preview_image',
|
|
272
|
+
image_scales: {
|
|
273
|
+
preview_image: [
|
|
274
|
+
{
|
|
275
|
+
'content-type': 'image/jpeg',
|
|
276
|
+
download: demoImage,
|
|
277
|
+
filename: 'black-starry-night.jpg',
|
|
278
|
+
height: 1708,
|
|
279
|
+
scales: {
|
|
280
|
+
great: {
|
|
281
|
+
download: demoImage,
|
|
282
|
+
height: 854,
|
|
283
|
+
width: 1200,
|
|
284
|
+
},
|
|
285
|
+
huge: {
|
|
286
|
+
download: demoImage,
|
|
287
|
+
height: 1138,
|
|
288
|
+
width: 1600,
|
|
289
|
+
},
|
|
290
|
+
icon: {
|
|
291
|
+
download: demoImage,
|
|
292
|
+
height: 22,
|
|
293
|
+
width: 32,
|
|
294
|
+
},
|
|
295
|
+
large: {
|
|
296
|
+
download: demoImage,
|
|
297
|
+
height: 569,
|
|
298
|
+
width: 800,
|
|
299
|
+
},
|
|
300
|
+
larger: {
|
|
301
|
+
download: demoImage,
|
|
302
|
+
height: 711,
|
|
303
|
+
width: 1000,
|
|
304
|
+
},
|
|
305
|
+
mini: {
|
|
306
|
+
download: demoImage,
|
|
307
|
+
height: 142,
|
|
308
|
+
width: 200,
|
|
309
|
+
},
|
|
310
|
+
preview: {
|
|
311
|
+
download: demoImage,
|
|
312
|
+
height: 284,
|
|
313
|
+
width: 400,
|
|
314
|
+
},
|
|
315
|
+
teaser: {
|
|
316
|
+
download: demoImage,
|
|
317
|
+
height: 427,
|
|
318
|
+
width: 600,
|
|
319
|
+
},
|
|
320
|
+
thumb: {
|
|
321
|
+
download: demoImage,
|
|
322
|
+
height: 91,
|
|
323
|
+
width: 128,
|
|
324
|
+
},
|
|
325
|
+
tile: {
|
|
326
|
+
download: demoImage,
|
|
327
|
+
height: 45,
|
|
328
|
+
width: 64,
|
|
329
|
+
},
|
|
330
|
+
},
|
|
331
|
+
size: 693013,
|
|
332
|
+
width: 2400,
|
|
333
|
+
},
|
|
334
|
+
],
|
|
335
|
+
},
|
|
336
|
+
},
|
|
337
|
+
],
|
|
338
|
+
styles: {
|
|
339
|
+
align: 'left',
|
|
340
|
+
},
|
|
341
|
+
title: 'Teaser Title H3',
|
|
342
|
+
},
|
|
343
|
+
'f34fa7dd-ce59-4f7f-b795-7d7f1e388df1': {
|
|
344
|
+
'@type': 'teaser',
|
|
345
|
+
description:
|
|
346
|
+
'Lorem ipsum dolor sit amet adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.',
|
|
347
|
+
head_title: 'Head title ',
|
|
348
|
+
href: [
|
|
349
|
+
{
|
|
350
|
+
'@id': '.',
|
|
351
|
+
'@type': 'Document',
|
|
352
|
+
description:
|
|
353
|
+
'Der Grid-Block erlaubt das Hinzuf\u00fcgen mehrspaltiger Bl\u00f6cke. Ein Grid-Block kann zwischen ein und vier Spalten mit unterschiedlichen Bl\u00f6cken enthalten.Teaser und Bilder k\u00f6nnen in einem Grid-Block hinzugef\u00fcgt werden.',
|
|
354
|
+
title: 'Block: Grid',
|
|
355
|
+
Description:
|
|
356
|
+
'Der Grid-Block erlaubt das Hinzuf\u00fcgen mehrspaltiger Bl\u00f6cke. Ein Grid-Block kann zwischen ein und vier Spalten mit unterschiedlichen Bl\u00f6cken enthalten.Teaser und Bilder k\u00f6nnen in einem Grid-Block hinzugef\u00fcgt werden.',
|
|
357
|
+
Title: 'Block: Grid',
|
|
358
|
+
getRemoteUrl: null,
|
|
359
|
+
hasPreviewImage: true,
|
|
360
|
+
head_title: 'Head Title',
|
|
361
|
+
image_field: 'preview_image',
|
|
362
|
+
image_scales: {
|
|
363
|
+
preview_image: [
|
|
364
|
+
{
|
|
365
|
+
'content-type': 'image/jpeg',
|
|
366
|
+
download: demoImage,
|
|
367
|
+
filename: 'black-starry-night.jpg',
|
|
368
|
+
height: 1708,
|
|
369
|
+
scales: {
|
|
370
|
+
great: {
|
|
371
|
+
download: demoImage,
|
|
372
|
+
height: 854,
|
|
373
|
+
width: 1200,
|
|
374
|
+
},
|
|
375
|
+
huge: {
|
|
376
|
+
download: demoImage,
|
|
377
|
+
height: 1138,
|
|
378
|
+
width: 1600,
|
|
379
|
+
},
|
|
380
|
+
icon: {
|
|
381
|
+
download: demoImage,
|
|
382
|
+
height: 22,
|
|
383
|
+
width: 32,
|
|
384
|
+
},
|
|
385
|
+
large: {
|
|
386
|
+
download: demoImage,
|
|
387
|
+
height: 569,
|
|
388
|
+
width: 800,
|
|
389
|
+
},
|
|
390
|
+
larger: {
|
|
391
|
+
download: demoImage,
|
|
392
|
+
height: 711,
|
|
393
|
+
width: 1000,
|
|
394
|
+
},
|
|
395
|
+
mini: {
|
|
396
|
+
download: demoImage,
|
|
397
|
+
height: 142,
|
|
398
|
+
width: 200,
|
|
399
|
+
},
|
|
400
|
+
preview: {
|
|
401
|
+
download: demoImage,
|
|
402
|
+
height: 284,
|
|
403
|
+
width: 400,
|
|
404
|
+
},
|
|
405
|
+
teaser: {
|
|
406
|
+
download: demoImage,
|
|
407
|
+
height: 427,
|
|
408
|
+
width: 600,
|
|
409
|
+
},
|
|
410
|
+
thumb: {
|
|
411
|
+
download: demoImage,
|
|
412
|
+
height: 91,
|
|
413
|
+
width: 128,
|
|
414
|
+
},
|
|
415
|
+
tile: {
|
|
416
|
+
download: demoImage,
|
|
417
|
+
height: 45,
|
|
418
|
+
width: 64,
|
|
419
|
+
},
|
|
420
|
+
},
|
|
421
|
+
size: 693013,
|
|
422
|
+
width: 2400,
|
|
423
|
+
},
|
|
424
|
+
],
|
|
425
|
+
},
|
|
426
|
+
},
|
|
427
|
+
],
|
|
428
|
+
preview_image: [
|
|
429
|
+
{
|
|
430
|
+
'@id': '',
|
|
431
|
+
image_field: 'image',
|
|
432
|
+
image_scales: {
|
|
433
|
+
image: [
|
|
434
|
+
{
|
|
435
|
+
'content-type': 'image/jpeg',
|
|
436
|
+
download: demoImage,
|
|
437
|
+
filename: 'image-light.jpg',
|
|
438
|
+
height: 633,
|
|
439
|
+
scales: {
|
|
440
|
+
icon: {
|
|
441
|
+
download: demoImage,
|
|
442
|
+
height: 17,
|
|
443
|
+
width: 32,
|
|
444
|
+
},
|
|
445
|
+
large: {
|
|
446
|
+
download: demoImage,
|
|
447
|
+
height: 449,
|
|
448
|
+
width: 800,
|
|
449
|
+
},
|
|
450
|
+
larger: {
|
|
451
|
+
download: demoImage,
|
|
452
|
+
height: 562,
|
|
453
|
+
width: 1000,
|
|
454
|
+
},
|
|
455
|
+
mini: {
|
|
456
|
+
download: demoImage,
|
|
457
|
+
height: 112,
|
|
458
|
+
width: 200,
|
|
459
|
+
},
|
|
460
|
+
preview: {
|
|
461
|
+
download: demoImage,
|
|
462
|
+
height: 224,
|
|
463
|
+
width: 400,
|
|
464
|
+
},
|
|
465
|
+
teaser: {
|
|
466
|
+
download: demoImage,
|
|
467
|
+
height: 337,
|
|
468
|
+
width: 600,
|
|
469
|
+
},
|
|
470
|
+
thumb: {
|
|
471
|
+
download: demoImage,
|
|
472
|
+
height: 71,
|
|
473
|
+
width: 128,
|
|
474
|
+
},
|
|
475
|
+
tile: {
|
|
476
|
+
download: demoImage,
|
|
477
|
+
height: 35,
|
|
478
|
+
width: 64,
|
|
479
|
+
},
|
|
480
|
+
},
|
|
481
|
+
size: 475285,
|
|
482
|
+
width: 1126,
|
|
483
|
+
},
|
|
484
|
+
],
|
|
485
|
+
},
|
|
486
|
+
title: 'Image - Light',
|
|
487
|
+
},
|
|
488
|
+
],
|
|
489
|
+
styles: {
|
|
490
|
+
align: 'left',
|
|
491
|
+
},
|
|
492
|
+
title: 'Teaser Title H3',
|
|
493
|
+
},
|
|
494
|
+
},
|
|
495
|
+
blocks_layout: {
|
|
496
|
+
items: [
|
|
497
|
+
'281a22fb-c353-4b91-b2bc-88e6a52ed65a',
|
|
498
|
+
'f34fa7dd-ce59-4f7f-b795-7d7f1e388df1',
|
|
499
|
+
],
|
|
500
|
+
},
|
|
501
|
+
styles: {
|
|
502
|
+
backgroundColor: 'grey',
|
|
503
|
+
},
|
|
504
|
+
};
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import TeaserDefaultBody from '@plone/volto/components/manage/Blocks/Teaser/DefaultBody';
|
|
3
|
+
import { teaserBlock } from './mocks';
|
|
4
|
+
import Wrapper from '@plone/volto/storybook';
|
|
5
|
+
import BlockWrapper from './BlockWrapper';
|
|
6
|
+
|
|
7
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
8
|
+
|
|
9
|
+
const meta = {
|
|
10
|
+
title: 'Blocks/Teaser',
|
|
11
|
+
component: TeaserDefaultBody,
|
|
12
|
+
parameters: {
|
|
13
|
+
layout: 'centered',
|
|
14
|
+
},
|
|
15
|
+
tags: ['autodocs'],
|
|
16
|
+
} satisfies Meta<typeof TeaserDefaultBody>;
|
|
17
|
+
|
|
18
|
+
export default meta;
|
|
19
|
+
type Story = StoryObj<typeof meta>;
|
|
20
|
+
|
|
21
|
+
export const Left: Story = {
|
|
22
|
+
render: (args) => (
|
|
23
|
+
<Wrapper>
|
|
24
|
+
<div style={{ width: 'var(--default-container-width)' }}>
|
|
25
|
+
<BlockWrapper {...args}>
|
|
26
|
+
<TeaserDefaultBody {...args} />
|
|
27
|
+
</BlockWrapper>
|
|
28
|
+
</div>
|
|
29
|
+
</Wrapper>
|
|
30
|
+
),
|
|
31
|
+
args: {
|
|
32
|
+
data: teaserBlock,
|
|
33
|
+
},
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
export const Right: Story = {
|
|
37
|
+
render: (args) => (
|
|
38
|
+
<Wrapper>
|
|
39
|
+
<div style={{ width: 'var(--default-container-width)' }}>
|
|
40
|
+
<BlockWrapper {...args}>
|
|
41
|
+
<TeaserDefaultBody {...args} />
|
|
42
|
+
</BlockWrapper>
|
|
43
|
+
</div>
|
|
44
|
+
</Wrapper>
|
|
45
|
+
),
|
|
46
|
+
args: {
|
|
47
|
+
data: {
|
|
48
|
+
...teaserBlock,
|
|
49
|
+
styles: {
|
|
50
|
+
align: 'right',
|
|
51
|
+
},
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
export const Center: Story = {
|
|
57
|
+
render: (args) => (
|
|
58
|
+
<Wrapper>
|
|
59
|
+
<div style={{ width: 'var(--default-container-width)' }}>
|
|
60
|
+
<BlockWrapper {...args}>
|
|
61
|
+
<TeaserDefaultBody {...args} />
|
|
62
|
+
</BlockWrapper>
|
|
63
|
+
</div>
|
|
64
|
+
</Wrapper>
|
|
65
|
+
),
|
|
66
|
+
args: {
|
|
67
|
+
data: {
|
|
68
|
+
...teaserBlock,
|
|
69
|
+
styles: {
|
|
70
|
+
align: 'center',
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
},
|
|
74
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
.date-inset {
|
|
2
|
+
display: flex;
|
|
3
|
+
width: 220px;
|
|
4
|
+
height: 220px;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
align-items: center;
|
|
7
|
+
justify-content: center;
|
|
8
|
+
border-radius: 100%;
|
|
9
|
+
background-color: #ecebeb;
|
|
10
|
+
.day {
|
|
11
|
+
font-size: 52px;
|
|
12
|
+
font-style: normal;
|
|
13
|
+
font-weight: 300;
|
|
14
|
+
line-height: 60px;
|
|
15
|
+
}
|
|
16
|
+
.month {
|
|
17
|
+
font-size: 14px;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.card:has(.date-inset) {
|
|
22
|
+
.card-inner {
|
|
23
|
+
align-items: center;
|
|
24
|
+
}
|
|
25
|
+
}
|
package/src/theme/_layout.scss
CHANGED
|
@@ -243,6 +243,7 @@ External link removal for all the blocks.
|
|
|
243
243
|
& > .block h2.headline,
|
|
244
244
|
& > .block.heading .heading-wrapper,
|
|
245
245
|
& > .block.teaser .teaser-item.default,
|
|
246
|
+
& > .block.teaser .card-inner, // deprecate when category is in place
|
|
246
247
|
& > .block.highlight .teaser-description-title,
|
|
247
248
|
& > table,
|
|
248
249
|
& > .table-of-contents,
|
|
@@ -408,13 +409,33 @@ External link removal for all the blocks.
|
|
|
408
409
|
|
|
409
410
|
// We have to adjust the inner headings also because of the extra margin added in the
|
|
410
411
|
// above rule
|
|
411
|
-
#page-document .blocks-group-wrapper > .block h2.headline {
|
|
412
|
+
#page-document .blocks-group-wrapper > .block.gridBlock h2.headline {
|
|
412
413
|
@container (max-width: #{$default-container-width + 2 * 20px}) {
|
|
413
414
|
margin-right: 10px;
|
|
414
415
|
margin-left: 10px;
|
|
415
416
|
}
|
|
416
417
|
}
|
|
417
418
|
|
|
419
|
+
// Adjust the grid columns padding for under the default-width container.
|
|
420
|
+
// For the rest, we rely on the default SemanticUI grid behavior and the adjustments
|
|
421
|
+
// made above.
|
|
422
|
+
@container (max-width: #{$default-container-width + 2 * 20px}) {
|
|
423
|
+
// .block.gridBlock .ui.stackable.grid > .column:not(.row) {
|
|
424
|
+
// padding-right: 20px !important;
|
|
425
|
+
// padding-left: 20px !important;
|
|
426
|
+
// transition: padding 0.3s ease;
|
|
427
|
+
// }
|
|
428
|
+
.block.gridBlock .ui.stackable.grid {
|
|
429
|
+
padding-right: 10px !important;
|
|
430
|
+
padding-left: 10px !important;
|
|
431
|
+
transition: padding 0.3s ease;
|
|
432
|
+
}
|
|
433
|
+
#page-document .blocks-group-wrapper > .block.gridBlock h2.headline {
|
|
434
|
+
margin-right: 20px;
|
|
435
|
+
margin-left: 20px;
|
|
436
|
+
}
|
|
437
|
+
}
|
|
438
|
+
|
|
418
439
|
// Fix for Image Grid with only one image
|
|
419
440
|
#page-document .block.gridBlock .block.image.align.center figure,
|
|
420
441
|
#page-document .block.gridBlock .block.image.align.center figure {
|
|
@@ -464,4 +485,12 @@ body.has-toolbar.has-sidebar .block .ui.basic.button.delete-button {
|
|
|
464
485
|
}
|
|
465
486
|
}
|
|
466
487
|
|
|
488
|
+
// Category teaser
|
|
489
|
+
.category-teaser {
|
|
490
|
+
.block-inner-container {
|
|
491
|
+
@include default-container-width();
|
|
492
|
+
@include adjustMarginsToContainer($default-container-width);
|
|
493
|
+
}
|
|
494
|
+
}
|
|
495
|
+
|
|
467
496
|
@import 'bgcolor-blocks-layout';
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
|
|
40
40
|
// External link icon
|
|
41
41
|
a.external {
|
|
42
|
-
.
|
|
42
|
+
.card-summary h2:after {
|
|
43
43
|
@include external-link-icon();
|
|
44
44
|
}
|
|
45
45
|
}
|
|
@@ -329,3 +329,16 @@
|
|
|
329
329
|
#page-document .block.gridBlock .block.teaser {
|
|
330
330
|
margin-bottom: 0;
|
|
331
331
|
}
|
|
332
|
+
|
|
333
|
+
.block.gridBlock h2.title {
|
|
334
|
+
margin-bottom: 20px !important;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
// Watch out for the following rule, it is used to override the default
|
|
338
|
+
// behavior of the block editor when selecting a block but it stopped working
|
|
339
|
+
// if the z-index is still -1 (from 6.0.0-alpha.0)
|
|
340
|
+
// I have no clue what is going on here, but it used to be important
|
|
341
|
+
// related to selecting and clicking things inside (or prevent some event bubbling)
|
|
342
|
+
.block.gridBlock [class^='block-editor-'].selected .cell-wrapper::before {
|
|
343
|
+
z-index: unset;
|
|
344
|
+
}
|