@kickstartds/ds-agency-premium 1.0.8--canary.74.1ba3a97.0 → 1.1.1--canary.2.81.0

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.
Files changed (37) hide show
  1. package/dist/HeadlineProps-d413a2cc.d.ts +48 -0
  2. package/dist/components/component-teaser/component-teaser.schema.dereffed.json +43 -0
  3. package/dist/components/component-teaser/component-teaser.schema.json +40 -0
  4. package/dist/components/headline/index.d.ts +1 -48
  5. package/dist/components/page/page.schema.dereffed.json +698 -693
  6. package/dist/components/page/page.schema.json +40 -3
  7. package/dist/components/page-intro/index.d.ts +14 -1
  8. package/dist/components/page-wrapper/index.d.ts +3 -2
  9. package/dist/components/page-wrapper/index.js +471 -6
  10. package/dist/components/page-wrapper/tokens.css +1 -1
  11. package/dist/components/section/index.d.ts +6 -7
  12. package/dist/components/section/section.schema.dereffed.json +662 -664
  13. package/dist/components/section/section.schema.json +13 -16
  14. package/dist/components/teaser-component/component-teaser.css +33 -0
  15. package/dist/components/teaser-component/index.d.ts +41 -0
  16. package/dist/components/teaser-component/index.js +18 -0
  17. package/dist/tokens/themes.css +4657 -0
  18. package/dist/tokens/themes.css.d.ts +0 -0
  19. package/dist/tokens/themes.css.js +1 -0
  20. package/dist/tokens/tokens.css +1 -1
  21. package/dist/tokens/tokens.js +1 -1
  22. package/package.json +6 -3
  23. package/dist/PageIntroProps-f13f3e7c.d.ts +0 -14
  24. package/dist/components/blog-overview/blog-overview.schema.dereffed.json +0 -631
  25. package/dist/components/blog-overview/blog-overview.schema.json +0 -35
  26. package/dist/components/blog-post/blog-post.schema.dereffed.json +0 -406
  27. package/dist/components/blog-post/blog-post.schema.json +0 -28
  28. package/dist/components/raw-page-wrapper/index.d.ts +0 -3
  29. package/dist/components/raw-page-wrapper/index.js +0 -492
  30. package/dist/components/seo/seo.schema.dereffed.json +0 -42
  31. package/dist/components/seo/seo.schema.json +0 -36
  32. package/dist/components/settings/settings.schema.dereffed.json +0 -426
  33. package/dist/components/settings/settings.schema.json +0 -19
  34. package/dist/static/tokens-google.css +0 -1553
  35. package/dist/static/tokens-lughausen.css +0 -1549
  36. package/dist/static/tokens-telekom.css +0 -1549
  37. package/dist/static/tokens.css +0 -1554
package/dist/components/section/section.schema.dereffed.json CHANGED
@@ -220,6 +220,172 @@
220
220
  "description": "Allowed components for content",
221
221
  "items": {
222
222
  "anyOf": [
223
+ {
224
+ "$schema": "http://json-schema.org/draft-07/schema#",
225
+ "$id": "http://schema.mydesignsystem.com/hero.schema.json",
226
+ "title": "Hero",
227
+ "type": "object",
228
+ "properties": {
229
+ "headline": {
230
+ "title": "Headline",
231
+ "description": "Headline for the visual",
232
+ "type": "string"
233
+ },
234
+ "sub": {
235
+ "title": "Module Subheadline",
236
+ "description": "Subheadline below the module headline",
237
+ "type": "string"
238
+ },
239
+ "text": {
240
+ "title": "Module Text",
241
+ "description": "Info text for the module element",
242
+ "type": "string"
243
+ },
244
+ "highlightText": {
245
+ "type": "boolean",
246
+ "title": "Highlight Text",
247
+ "description": "Visually highlight the text",
248
+ "default": false
249
+ },
250
+ "colorNeutral": {
251
+ "title": "Color Neutral",
252
+ "description": "Make the text and buttons color neutral",
253
+ "default": false,
254
+ "type": "boolean"
255
+ },
256
+ "height": {
257
+ "title": "Height",
258
+ "type": "string",
259
+ "enum": [
260
+ "small",
261
+ "default",
262
+ "fullImage",
263
+ "fullScreen"
264
+ ],
265
+ "default": "default"
266
+ },
267
+ "textbox": {
268
+ "type": "boolean",
269
+ "title": "Textbox",
270
+ "default": true,
271
+ "description": "Toggle wether you want your text to be displayed within in box"
272
+ },
273
+ "buttons": {
274
+ "type": "array",
275
+ "items": {
276
+ "title": "Button",
277
+ "type": "object",
278
+ "properties": {
279
+ "label": {
280
+ "type": "string",
281
+ "title": "Label",
282
+ "description": "Text content to display inside the button",
283
+ "examples": [
284
+ "Book a meeting"
285
+ ]
286
+ },
287
+ "icon": {
288
+ "type": "string",
289
+ "title": "Icon",
290
+ "description": "Choose an icon"
291
+ },
292
+ "target": {
293
+ "type": "string",
294
+ "title": "Target",
295
+ "description": "Target that should be linked, makes the button behave like a link semantically",
296
+ "format": "uri"
297
+ }
298
+ },
299
+ "additionalProperties": false
300
+ }
301
+ },
302
+ "overlay": {
303
+ "title": "Grid layer",
304
+ "description": "Enable grid layer",
305
+ "type": "boolean",
306
+ "default": false
307
+ },
308
+ "image": {
309
+ "title": "Background image",
310
+ "description": "Sources of background images for different screen sizes",
311
+ "type": "object",
312
+ "required": [
313
+ "srcMobile"
314
+ ],
315
+ "properties": {
316
+ "srcMobile": {
317
+ "title": "Mobile image source",
318
+ "description": "Background image source for small screens",
319
+ "type": "string",
320
+ "format": "image",
321
+ "examples": [
322
+ "https://picsum.photos/seed/kdsvisual/640/270"
323
+ ]
324
+ },
325
+ "srcTablet": {
326
+ "title": "Tablet image source",
327
+ "description": "Background image source for medium screens",
328
+ "type": "string",
329
+ "format": "image",
330
+ "examples": [
331
+ "https://picsum.photos/seed/kdsvisual/1280/540"
332
+ ]
333
+ },
334
+ "srcDesktop": {
335
+ "title": "Desktop image source",
336
+ "description": "Background image source for large screens",
337
+ "type": "string",
338
+ "format": "image",
339
+ "examples": [
340
+ "https://picsum.photos/seed/kdsvisual/1920/810"
341
+ ]
342
+ },
343
+ "src": {
344
+ "title": "Optional source",
345
+ "description": "Override for img tag of picture element, if needed",
346
+ "type": "string",
347
+ "format": "image",
348
+ "examples": [
349
+ "https://picsum.photos/seed/kdsvisual/640/270"
350
+ ]
351
+ },
352
+ "indent": {
353
+ "title": "Image indent",
354
+ "description": "Choose to indent the image horizontally on small screens",
355
+ "type": "string",
356
+ "enum": [
357
+ "none",
358
+ "left",
359
+ "right"
360
+ ],
361
+ "default": "none"
362
+ },
363
+ "alt": {
364
+ "title": "Alt text",
365
+ "description": "Alt text to display for picture",
366
+ "type": "string"
367
+ }
368
+ },
369
+ "additionalProperties": false
370
+ },
371
+ "textPosition": {
372
+ "title": "Module aligment",
373
+ "description": "Choose the alginment of the module content",
374
+ "enum": [
375
+ "center",
376
+ "below",
377
+ "left",
378
+ "right"
379
+ ],
380
+ "type": "string",
381
+ "default": "bottom"
382
+ },
383
+ "type": {
384
+ "const": "hero"
385
+ }
386
+ },
387
+ "additionalProperties": false
388
+ },
223
389
  {
224
390
  "$schema": "http://json-schema.org/draft-07/schema#",
225
391
  "$id": "http://schema.mydesignsystem.com/cta.schema.json",
@@ -380,97 +546,219 @@
380
546
  },
381
547
  {
382
548
  "$schema": "http://json-schema.org/draft-07/schema#",
383
- "$id": "http://schema.mydesignsystem.com/faq.schema.json",
384
- "title": "Faq",
385
- "description": "Component used to display a Faq section",
386
- "type": "object",
387
- "properties": {
388
- "questions": {
389
- "type": "array",
390
- "title": "Questions",
391
- "description": "The questions and answers in the Faq section",
392
- "items": {
393
- "type": "object",
394
- "properties": {
395
- "question": {
396
- "type": "string",
397
- "title": "Question",
398
- "description": "The question",
399
- "examples": [
400
- "What is the product made of?"
401
- ]
402
- },
403
- "answer": {
404
- "type": "string",
405
- "title": "Answer",
406
- "description": "The answer to the question",
407
- "examples": [
408
- "The product is made of high-quality materials"
409
- ]
410
- }
411
- },
412
- "additionalProperties": false,
413
- "required": [
414
- "question",
415
- "answer"
416
- ]
417
- },
418
- "minItems": 1
419
- },
420
- "type": {
421
- "const": "faq"
422
- }
423
- },
424
- "additionalProperties": false,
425
- "required": [
426
- "questions"
427
- ]
428
- },
429
- {
430
- "$schema": "http://json-schema.org/draft-07/schema#",
431
- "$id": "http://schema.mydesignsystem.com/features.schema.json",
432
- "title": "Features",
433
- "description": "Component used to display a set of features",
549
+ "$id": "http://schema.mydesignsystem.com/mosaic.schema.json",
550
+ "title": "Mosaic",
434
551
  "type": "object",
435
552
  "properties": {
436
553
  "layout": {
437
- "type": "string",
438
554
  "title": "Layout",
439
- "description": "The layout variant to use for the features",
440
- "enum": [
441
- "largeTiles",
442
- "smallTiles",
443
- "list"
444
- ],
445
- "default": "largeTiles"
446
- },
447
- "style": {
555
+ "description": "Layout of the mosaic component",
448
556
  "type": "string",
449
557
  "enum": [
450
- "intext",
451
- "stack",
452
- "centered",
453
- "besideLarge",
454
- "besideSmall"
558
+ "alternate",
559
+ "textLeft",
560
+ "textRight"
455
561
  ],
456
- "default": "stack"
562
+ "default": "alternate"
457
563
  },
458
- "ctas": {
459
- "type": "object",
460
- "properties": {
461
- "toggle": {
462
- "type": "boolean",
463
- "default": true,
464
- "title": "CTA Toggle",
465
- "description": "Activate/disable the CTAs"
466
- },
467
- "style": {
468
- "type": "string",
469
- "enum": [
470
- "button",
471
- "link",
472
- "intext"
473
- ],
564
+ "largeHeadlines": {
565
+ "type": "boolean",
566
+ "title": "Large Headlines",
567
+ "description": "Make the headlines larger",
568
+ "default": false
569
+ },
570
+ "tiles": {
571
+ "type": "array",
572
+ "items": {
573
+ "type": "object",
574
+ "properties": {
575
+ "headline": {
576
+ "title": "Headline",
577
+ "description": "Headline for the tile",
578
+ "type": "string"
579
+ },
580
+ "sub": {
581
+ "title": "Module Subheadline",
582
+ "description": "Subheadline below the tile headline",
583
+ "type": "string"
584
+ },
585
+ "text": {
586
+ "title": "Module Text",
587
+ "description": "Text for tile",
588
+ "type": "string"
589
+ },
590
+ "image": {
591
+ "type": "object",
592
+ "properties": {
593
+ "src": {
594
+ "title": "Source",
595
+ "description": "Picture source",
596
+ "type": "string",
597
+ "format": "image",
598
+ "examples": [
599
+ "img/close-up-young-business-team-working.png"
600
+ ]
601
+ },
602
+ "alt": {
603
+ "title": "Alt text",
604
+ "description": "Alt text to display for picture",
605
+ "type": "string"
606
+ }
607
+ },
608
+ "additionalProperties": false
609
+ },
610
+ "button": {
611
+ "type": "object",
612
+ "properties": {
613
+ "toggle": {
614
+ "title": "Button Toggle",
615
+ "description": "Toggle wether the Button is displayed or not",
616
+ "type": "boolean",
617
+ "default": true
618
+ },
619
+ "label": {
620
+ "type": "string",
621
+ "title": "Label",
622
+ "description": "Text content to display inside the button",
623
+ "examples": [
624
+ "Book a meeting"
625
+ ]
626
+ },
627
+ "target": {
628
+ "type": "string",
629
+ "title": "Target",
630
+ "description": "Target that should be linked, makes the button behave like a link semantically",
631
+ "format": "uri"
632
+ },
633
+ "icon": {
634
+ "type": "string",
635
+ "title": "Icon",
636
+ "description": "Choose an icon"
637
+ }
638
+ },
639
+ "additionalProperties": false
640
+ },
641
+ "backgroundColor": {
642
+ "title": "Background color",
643
+ "description": "Background color for the whole element",
644
+ "type": "string",
645
+ "format": "color"
646
+ },
647
+ "backgroundImage": {
648
+ "title": "Background image",
649
+ "description": "Background image for the whole element",
650
+ "type": "string",
651
+ "format": "image"
652
+ },
653
+ "textColor": {
654
+ "title": "Text color",
655
+ "description": "Overwrite the color to use for the text content",
656
+ "type": "string",
657
+ "format": "color"
658
+ }
659
+ },
660
+ "additionalProperties": false
661
+ }
662
+ },
663
+ "type": {
664
+ "const": "mosaic"
665
+ }
666
+ },
667
+ "additionalProperties": false
668
+ },
669
+ {
670
+ "$schema": "http://json-schema.org/draft-07/schema#",
671
+ "$id": "http://schema.mydesignsystem.com/faq.schema.json",
672
+ "title": "Faq",
673
+ "description": "Component used to display a Faq section",
674
+ "type": "object",
675
+ "properties": {
676
+ "questions": {
677
+ "type": "array",
678
+ "title": "Questions",
679
+ "description": "The questions and answers in the Faq section",
680
+ "items": {
681
+ "type": "object",
682
+ "properties": {
683
+ "question": {
684
+ "type": "string",
685
+ "title": "Question",
686
+ "description": "The question",
687
+ "examples": [
688
+ "What is the product made of?"
689
+ ]
690
+ },
691
+ "answer": {
692
+ "type": "string",
693
+ "title": "Answer",
694
+ "description": "The answer to the question",
695
+ "examples": [
696
+ "The product is made of high-quality materials"
697
+ ]
698
+ }
699
+ },
700
+ "additionalProperties": false,
701
+ "required": [
702
+ "question",
703
+ "answer"
704
+ ]
705
+ },
706
+ "minItems": 1
707
+ },
708
+ "type": {
709
+ "const": "faq"
710
+ }
711
+ },
712
+ "additionalProperties": false,
713
+ "required": [
714
+ "questions"
715
+ ]
716
+ },
717
+ {
718
+ "$schema": "http://json-schema.org/draft-07/schema#",
719
+ "$id": "http://schema.mydesignsystem.com/features.schema.json",
720
+ "title": "Features",
721
+ "description": "Component used to display a set of features",
722
+ "type": "object",
723
+ "properties": {
724
+ "layout": {
725
+ "type": "string",
726
+ "title": "Layout",
727
+ "description": "The layout variant to use for the features",
728
+ "enum": [
729
+ "largeTiles",
730
+ "smallTiles",
731
+ "list"
732
+ ],
733
+ "default": "largeTiles"
734
+ },
735
+ "style": {
736
+ "type": "string",
737
+ "enum": [
738
+ "intext",
739
+ "stack",
740
+ "centered",
741
+ "besideLarge",
742
+ "besideSmall"
743
+ ],
744
+ "default": "stack"
745
+ },
746
+ "ctas": {
747
+ "type": "object",
748
+ "properties": {
749
+ "toggle": {
750
+ "type": "boolean",
751
+ "default": true,
752
+ "title": "CTA Toggle",
753
+ "description": "Activate/disable the CTAs"
754
+ },
755
+ "style": {
756
+ "type": "string",
757
+ "enum": [
758
+ "button",
759
+ "link",
760
+ "intext"
761
+ ],
474
762
  "default": "link"
475
763
  }
476
764
  },
@@ -633,169 +921,89 @@
633
921
  },
634
922
  {
635
923
  "$schema": "http://json-schema.org/draft-07/schema#",
636
- "$id": "http://schema.mydesignsystem.com/hero.schema.json",
637
- "title": "Hero",
924
+ "$id": "http://schema.mydesignsystem.com/headline.schema.json",
925
+ "title": "Headline",
926
+ "description": "Component used for headlines",
638
927
  "type": "object",
639
928
  "properties": {
640
- "headline": {
641
- "title": "Headline",
642
- "description": "Headline for the visual",
643
- "type": "string"
929
+ "text": {
930
+ "type": "string",
931
+ "title": "Text",
932
+ "description": "Text content of headline",
933
+ "format": "markdown"
644
934
  },
645
935
  "sub": {
646
- "title": "Module Subheadline",
647
- "description": "Subheadline below the module headline",
648
- "type": "string"
649
- },
650
- "text": {
651
- "title": "Module Text",
652
- "description": "Info text for the module element",
653
- "type": "string"
936
+ "type": "string",
937
+ "title": "Sub",
938
+ "description": "Subheadline content",
939
+ "format": "markdown"
654
940
  },
655
- "highlightText": {
941
+ "switchOrder": {
656
942
  "type": "boolean",
657
- "title": "Highlight Text",
658
- "description": "Visually highlight the text",
943
+ "title": "Switch order?",
944
+ "description": "Switch order of headline and subheadline",
659
945
  "default": false
660
946
  },
661
- "colorNeutral": {
662
- "title": "Color Neutral",
663
- "description": "Make the text and buttons color neutral",
664
- "default": false,
665
- "type": "boolean"
947
+ "align": {
948
+ "type": "string",
949
+ "title": "Section alignment",
950
+ "enum": [
951
+ "left",
952
+ "center",
953
+ "right"
954
+ ]
666
955
  },
667
- "height": {
668
- "title": "Height",
956
+ "level": {
957
+ "type": "string",
958
+ "title": "Level",
959
+ "description": "Level of headline to use",
960
+ "enum": [
961
+ "h1",
962
+ "h2",
963
+ "h3",
964
+ "h4",
965
+ "p"
966
+ ],
967
+ "default": "h2"
968
+ },
969
+ "style": {
669
970
  "type": "string",
971
+ "title": "Style",
972
+ "description": "Style of headline to show",
670
973
  "enum": [
974
+ "h1",
975
+ "h2",
976
+ "h3",
977
+ "h4",
978
+ "p"
979
+ ],
980
+ "default": "h2"
981
+ },
982
+ "spaceAfter": {
983
+ "type": "string",
984
+ "title": "Space after?",
985
+ "description": "Whether to display space after headline",
986
+ "enum": [
987
+ "minimum",
671
988
  "small",
672
- "default",
673
- "fullImage",
674
- "fullScreen"
989
+ "large"
675
990
  ],
676
- "default": "default"
991
+ "default": "small"
677
992
  },
678
- "textbox": {
679
- "type": "boolean",
680
- "title": "Textbox",
681
- "default": true,
682
- "description": "Toggle wether you want your text to be displayed within in box"
683
- },
684
- "buttons": {
685
- "type": "array",
686
- "items": {
687
- "title": "Button",
688
- "type": "object",
689
- "properties": {
690
- "label": {
691
- "type": "string",
692
- "title": "Label",
693
- "description": "Text content to display inside the button",
694
- "examples": [
695
- "Book a meeting"
696
- ]
697
- },
698
- "icon": {
699
- "type": "string",
700
- "title": "Icon",
701
- "description": "Choose an icon"
702
- },
703
- "target": {
704
- "type": "string",
705
- "title": "Target",
706
- "description": "Target that should be linked, makes the button behave like a link semantically",
707
- "format": "uri"
708
- }
709
- },
710
- "additionalProperties": false
711
- }
712
- },
713
- "overlay": {
714
- "title": "Grid layer",
715
- "description": "Enable grid layer",
716
- "type": "boolean",
717
- "default": false
718
- },
719
- "image": {
720
- "title": "Background image",
721
- "description": "Sources of background images for different screen sizes",
722
- "type": "object",
723
- "required": [
724
- "srcMobile"
725
- ],
726
- "properties": {
727
- "srcMobile": {
728
- "title": "Mobile image source",
729
- "description": "Background image source for small screens",
730
- "type": "string",
731
- "format": "image",
732
- "examples": [
733
- "https://picsum.photos/seed/kdsvisual/640/270"
734
- ]
735
- },
736
- "srcTablet": {
737
- "title": "Tablet image source",
738
- "description": "Background image source for medium screens",
739
- "type": "string",
740
- "format": "image",
741
- "examples": [
742
- "https://picsum.photos/seed/kdsvisual/1280/540"
743
- ]
744
- },
745
- "srcDesktop": {
746
- "title": "Desktop image source",
747
- "description": "Background image source for large screens",
748
- "type": "string",
749
- "format": "image",
750
- "examples": [
751
- "https://picsum.photos/seed/kdsvisual/1920/810"
752
- ]
753
- },
754
- "src": {
755
- "title": "Optional source",
756
- "description": "Override for img tag of picture element, if needed",
757
- "type": "string",
758
- "format": "image",
759
- "examples": [
760
- "https://picsum.photos/seed/kdsvisual/640/270"
761
- ]
762
- },
763
- "indent": {
764
- "title": "Image indent",
765
- "description": "Choose to indent the image horizontally on small screens",
766
- "type": "string",
767
- "enum": [
768
- "none",
769
- "left",
770
- "right"
771
- ],
772
- "default": "none"
773
- },
774
- "alt": {
775
- "title": "Alt text",
776
- "description": "Alt text to display for picture",
777
- "type": "string"
778
- }
779
- },
780
- "additionalProperties": false
781
- },
782
- "textPosition": {
783
- "title": "Module aligment",
784
- "description": "Choose the alginment of the module content",
785
- "enum": [
786
- "center",
787
- "below",
788
- "left",
789
- "right"
790
- ],
791
- "type": "string",
792
- "default": "bottom"
993
+ "className": {
994
+ "type": "string",
995
+ "title": "Class Name",
996
+ "description": "Set a custom class name"
793
997
  },
794
998
  "type": {
795
- "const": "hero"
999
+ "const": "headline"
796
1000
  }
797
1001
  },
798
- "additionalProperties": false
1002
+ "additionalProperties": false,
1003
+ "required": [
1004
+ "level",
1005
+ "text"
1006
+ ]
799
1007
  },
800
1008
  {
801
1009
  "$schema": "http://json-schema.org/draft-07/schema#",
@@ -923,450 +1131,41 @@
923
1131
  "title": "Image source",
924
1132
  "description": "Image source to use",
925
1133
  "type": "string",
926
- "format": "image"
927
- },
928
- "ratio": {
929
- "title": "Image aspect ratio",
930
- "description": "Select an aspect ratio to use for cropping and displaying the image",
931
- "type": "string",
932
- "enum": [
933
- "4:3",
934
- "3:2",
935
- "16:9",
936
- "1:1",
937
- "none"
938
- ],
939
- "default": "none"
940
- },
941
- "alt": {
942
- "title": "Alt text",
943
- "description": "Image description",
944
- "type": "string"
945
- }
946
- },
947
- "additionalProperties": false
948
- },
949
- "textAlign": {
950
- "title": "Text Alignment",
951
- "description": "Choose the alginment of the text",
952
- "enum": [
953
- "left",
954
- "center"
955
- ],
956
- "type": "string",
957
- "default": "left"
958
- },
959
- "type": {
960
- "const": "image-story"
961
- }
962
- },
963
- "additionalProperties": false
964
- },
965
- {
966
- "$schema": "http://json-schema.org/draft-07/schema#",
967
- "$id": "http://schema.mydesignsystem.com/image-text.schema.json",
968
- "title": "Image Text",
969
- "description": "Component used to display an image beside or above/below a text block",
970
- "type": "object",
971
- "properties": {
972
- "text": {
973
- "type": "string",
974
- "title": "Text",
975
- "description": "Text content to display beside the image",
976
- "examples": [
977
- "This is a sample text"
978
- ]
979
- },
980
- "highlightText": {
981
- "type": "boolean",
982
- "title": "Highlight Text",
983
- "description": "Visually highlight the text",
984
- "default": false
985
- },
986
- "image": {
987
- "type": "object",
988
- "properties": {
989
- "src": {
990
- "type": "string",
991
- "title": "Image Source",
992
- "description": "URL of the image to display",
993
- "examples": [
994
- "http://example.com/image.jpg"
995
- ]
996
- },
997
- "alt": {
998
- "type": "string",
999
- "title": "Alt Text",
1000
- "description": "Alt text of the image",
1001
- "examples": [
1002
- "http://example.com/image.jpg"
1003
- ]
1004
- }
1005
- },
1006
- "additionalProperties": false
1007
- },
1008
- "layout": {
1009
- "type": "string",
1010
- "enum": [
1011
- "above",
1012
- "below",
1013
- "beside-right",
1014
- "beside-left"
1015
- ],
1016
- "title": "Layout",
1017
- "description": "Position of the image relative to the text",
1018
- "examples": [
1019
- "above"
1020
- ]
1021
- },
1022
- "type": {
1023
- "const": "image-text"
1024
- }
1025
- },
1026
- "required": [
1027
- "text",
1028
- "image",
1029
- "layout"
1030
- ],
1031
- "additionalProperties": false
1032
- },
1033
- {
1034
- "$schema": "http://json-schema.org/draft-07/schema#",
1035
- "$id": "http://schema.mydesignsystem.com/logos.schema.json",
1036
- "title": "Logos",
1037
- "description": "Component used to display a set of logos",
1038
- "type": "object",
1039
- "properties": {
1040
- "tagline": {
1041
- "type": "string",
1042
- "title": "Logo Tagline",
1043
- "description": "A short tagline atop the logos",
1044
- "examples": [
1045
- "Your Success, Our Commitment"
1046
- ]
1047
- },
1048
- "logos": {
1049
- "type": "array",
1050
- "title": "Logos",
1051
- "description": "The logos to display",
1052
- "items": {
1053
- "type": "object",
1054
- "properties": {
1055
- "src": {
1056
- "type": "string",
1057
- "title": "URL",
1058
- "description": "The URL of the logo image",
1059
- "examples": [
1060
- "img/logos/logoipsum-212.svg",
1061
- "img/logos/logoipsum-217.svg",
1062
- "img/logos/logoipsum-239.svg",
1063
- "img/logos/logoipsum-244.svg",
1064
- "img/logos/logoipsum-250.svg",
1065
- "img/logos/logoipsum-286.svg"
1066
- ]
1067
- },
1068
- "alt": {
1069
- "type": "string",
1070
- "title": "Caption",
1071
- "description": "The alt text of the logo",
1072
- "examples": [
1073
- "Logo 1"
1074
- ]
1075
- }
1076
- },
1077
- "additionalProperties": false,
1078
- "required": [
1079
- "src"
1080
- ]
1081
- },
1082
- "minItems": 1,
1083
- "maxItems": 20
1084
- },
1085
- "align": {
1086
- "type": "string",
1087
- "title": "Alignment",
1088
- "description": "The alignment of the logo layout",
1089
- "enum": [
1090
- "left",
1091
- "center"
1092
- ],
1093
- "default": "center"
1094
- },
1095
- "logosPerRow": {
1096
- "type": "integer",
1097
- "title": "Logos Per Row",
1098
- "description": "The amount of logos to display per row",
1099
- "minimum": 2,
1100
- "maximum": 8,
1101
- "examples": [
1102
- 5
1103
- ]
1104
- },
1105
- "cta": {
1106
- "type": "object",
1107
- "title": "Call to Action",
1108
- "description": "The call to action",
1109
- "properties": {
1110
- "toggle": {
1111
- "type": "boolean",
1112
- "default": false,
1113
- "title": "CTA Toggle",
1114
- "description": "Activate/disable the CTA"
1115
- },
1116
- "text": {
1117
- "type": "string",
1118
- "title": "Call to Action Text",
1119
- "description": "A short CTA text",
1120
- "examples": [
1121
- "Explore the success stories of our valued customers and discover more about their journey."
1122
- ]
1123
- },
1124
- "link": {
1125
- "type": "string",
1126
- "title": "Call to Action Link",
1127
- "description": "The CTA link",
1128
- "default": "#",
1129
- "format": "uri"
1130
- },
1131
- "label": {
1132
- "type": "string",
1133
- "title": "Link Label",
1134
- "description": "The text label displayed on the link",
1135
- "examples": [
1136
- "See all our partners"
1137
- ]
1138
- },
1139
- "style": {
1140
- "type": "string",
1141
- "enum": [
1142
- "button",
1143
- "text"
1144
- ],
1145
- "default": "text"
1146
- }
1147
- },
1148
- "additionalProperties": false,
1149
- "required": [
1150
- "style",
1151
- "link",
1152
- "label"
1153
- ]
1154
- },
1155
- "type": {
1156
- "const": "logos"
1157
- }
1158
- },
1159
- "additionalProperties": false,
1160
- "required": [
1161
- "logos"
1162
- ]
1163
- },
1164
- {
1165
- "$schema": "http://json-schema.org/draft-07/schema#",
1166
- "$id": "http://schema.mydesignsystem.com/mosaic.schema.json",
1167
- "title": "Mosaic",
1168
- "type": "object",
1169
- "properties": {
1170
- "layout": {
1171
- "title": "Layout",
1172
- "description": "Layout of the mosaic component",
1173
- "type": "string",
1174
- "enum": [
1175
- "alternate",
1176
- "textLeft",
1177
- "textRight"
1178
- ],
1179
- "default": "alternate"
1180
- },
1181
- "largeHeadlines": {
1182
- "type": "boolean",
1183
- "title": "Large Headlines",
1184
- "description": "Make the headlines larger",
1185
- "default": false
1186
- },
1187
- "tiles": {
1188
- "type": "array",
1189
- "items": {
1190
- "type": "object",
1191
- "properties": {
1192
- "headline": {
1193
- "title": "Headline",
1194
- "description": "Headline for the tile",
1195
- "type": "string"
1196
- },
1197
- "sub": {
1198
- "title": "Module Subheadline",
1199
- "description": "Subheadline below the tile headline",
1200
- "type": "string"
1201
- },
1202
- "text": {
1203
- "title": "Module Text",
1204
- "description": "Text for tile",
1205
- "type": "string"
1206
- },
1207
- "image": {
1208
- "type": "object",
1209
- "properties": {
1210
- "src": {
1211
- "title": "Source",
1212
- "description": "Picture source",
1213
- "type": "string",
1214
- "format": "image",
1215
- "examples": [
1216
- "img/close-up-young-business-team-working.png"
1217
- ]
1218
- },
1219
- "alt": {
1220
- "title": "Alt text",
1221
- "description": "Alt text to display for picture",
1222
- "type": "string"
1223
- }
1224
- },
1225
- "additionalProperties": false
1226
- },
1227
- "button": {
1228
- "type": "object",
1229
- "properties": {
1230
- "toggle": {
1231
- "title": "Button Toggle",
1232
- "description": "Toggle wether the Button is displayed or not",
1233
- "type": "boolean",
1234
- "default": true
1235
- },
1236
- "label": {
1237
- "type": "string",
1238
- "title": "Label",
1239
- "description": "Text content to display inside the button",
1240
- "examples": [
1241
- "Book a meeting"
1242
- ]
1243
- },
1244
- "target": {
1245
- "type": "string",
1246
- "title": "Target",
1247
- "description": "Target that should be linked, makes the button behave like a link semantically",
1248
- "format": "uri"
1249
- },
1250
- "icon": {
1251
- "type": "string",
1252
- "title": "Icon",
1253
- "description": "Choose an icon"
1254
- }
1255
- },
1256
- "additionalProperties": false
1257
- },
1258
- "backgroundColor": {
1259
- "title": "Background color",
1260
- "description": "Background color for the whole element",
1261
- "type": "string",
1262
- "format": "color"
1263
- },
1264
- "backgroundImage": {
1265
- "title": "Background image",
1266
- "description": "Background image for the whole element",
1267
- "type": "string",
1268
- "format": "image"
1269
- },
1270
- "textColor": {
1271
- "title": "Text color",
1272
- "description": "Overwrite the color to use for the text content",
1273
- "type": "string",
1274
- "format": "color"
1275
- }
1276
- },
1277
- "additionalProperties": false
1278
- }
1279
- },
1280
- "type": {
1281
- "const": "mosaic"
1282
- }
1283
- },
1284
- "additionalProperties": false
1285
- },
1286
- {
1287
- "$schema": "http://json-schema.org/draft-07/schema#",
1288
- "$id": "http://schema.mydesignsystem.com/page-intro.schema.json",
1289
- "title": "Page Intro",
1290
- "type": "object",
1291
- "properties": {
1292
- "headline": {
1293
- "type": "string"
1294
- },
1295
- "sub": {
1296
- "type": "string"
1297
- },
1298
- "link": {
1299
- "type": "object",
1300
- "properties": {
1301
- "href": {
1302
- "type": "string"
1134
+ "format": "image"
1303
1135
  },
1304
- "label": {
1136
+ "ratio": {
1137
+ "title": "Image aspect ratio",
1138
+ "description": "Select an aspect ratio to use for cropping and displaying the image",
1139
+ "type": "string",
1140
+ "enum": [
1141
+ "4:3",
1142
+ "3:2",
1143
+ "16:9",
1144
+ "1:1",
1145
+ "none"
1146
+ ],
1147
+ "default": "none"
1148
+ },
1149
+ "alt": {
1150
+ "title": "Alt text",
1151
+ "description": "Image description",
1305
1152
  "type": "string"
1306
1153
  }
1307
1154
  },
1308
1155
  "additionalProperties": false
1309
1156
  },
1310
- "type": {
1311
- "const": "page-intro"
1312
- }
1313
- },
1314
- "additionalProperties": false
1315
- },
1316
- {
1317
- "$schema": "http://json-schema.org/draft-07/schema#",
1318
- "$id": "http://schema.mydesignsystem.com/slider.schema.json",
1319
- "title": "Slider",
1320
- "type": "object",
1321
- "properties": {
1322
- "autoplay": {
1323
- "title": "Auto play",
1324
- "description": "Automatically move to next slide after 4 seconds without user interaction",
1325
- "type": "boolean",
1326
- "default": false
1327
- },
1328
- "nav": {
1329
- "title": "Show Navigation",
1330
- "description": "Add bullet navigation",
1331
- "type": "boolean",
1332
- "examples": [
1333
- true
1334
- ]
1335
- },
1336
- "teaseNeighbours": {
1337
- "title": "Tease Neighbour Slides",
1338
- "type": "boolean",
1339
- "default": false
1340
- },
1341
- "equalHeight": {
1342
- "title": "Equalize slides heights",
1343
- "type": "boolean",
1344
- "default": true
1345
- },
1346
- "gap": {
1347
- "title": "Gap",
1348
- "description": "Size of the gap added between slides in pixels",
1349
- "type": "number",
1350
- "default": 0
1351
- },
1352
- "arrows": {
1353
- "title": "Show Arrows",
1354
- "description": "Add arrows on the left and right to navigate to next or previous slide",
1355
- "type": "boolean",
1356
- "examples": [
1357
- true
1358
- ]
1157
+ "textAlign": {
1158
+ "title": "Text Alignment",
1159
+ "description": "Choose the alginment of the text",
1160
+ "enum": [
1161
+ "left",
1162
+ "center"
1163
+ ],
1164
+ "type": "string",
1165
+ "default": "left"
1359
1166
  },
1360
1167
  "type": {
1361
- "const": "slider"
1362
- },
1363
- "className": {
1364
- "title": "Class",
1365
- "description": "Additional css classes attached to the wrapping element",
1366
- "type": "string"
1367
- },
1368
- "typeProp": {
1369
- "const": "slider"
1168
+ "const": "image-story"
1370
1169
  }
1371
1170
  },
1372
1171
  "additionalProperties": false
@@ -1806,6 +1605,205 @@
1806
1605
  }
1807
1606
  },
1808
1607
  "additionalProperties": false
1608
+ },
1609
+ {
1610
+ "$schema": "http://json-schema.org/draft-07/schema#",
1611
+ "$id": "http://schema.mydesignsystem.com/image-text.schema.json",
1612
+ "title": "Image Text",
1613
+ "description": "Component used to display an image beside or above/below a text block",
1614
+ "type": "object",
1615
+ "properties": {
1616
+ "text": {
1617
+ "type": "string",
1618
+ "title": "Text",
1619
+ "description": "Text content to display beside the image",
1620
+ "examples": [
1621
+ "This is a sample text"
1622
+ ]
1623
+ },
1624
+ "highlightText": {
1625
+ "type": "boolean",
1626
+ "title": "Highlight Text",
1627
+ "description": "Visually highlight the text",
1628
+ "default": false
1629
+ },
1630
+ "image": {
1631
+ "type": "object",
1632
+ "properties": {
1633
+ "src": {
1634
+ "type": "string",
1635
+ "title": "Image Source",
1636
+ "description": "URL of the image to display",
1637
+ "examples": [
1638
+ "http://example.com/image.jpg"
1639
+ ]
1640
+ },
1641
+ "alt": {
1642
+ "type": "string",
1643
+ "title": "Alt Text",
1644
+ "description": "Alt text of the image",
1645
+ "examples": [
1646
+ "http://example.com/image.jpg"
1647
+ ]
1648
+ }
1649
+ },
1650
+ "additionalProperties": false
1651
+ },
1652
+ "layout": {
1653
+ "type": "string",
1654
+ "enum": [
1655
+ "above",
1656
+ "below",
1657
+ "beside-right",
1658
+ "beside-left"
1659
+ ],
1660
+ "title": "Layout",
1661
+ "description": "Position of the image relative to the text",
1662
+ "examples": [
1663
+ "above"
1664
+ ]
1665
+ },
1666
+ "type": {
1667
+ "const": "image-text"
1668
+ }
1669
+ },
1670
+ "required": [
1671
+ "text",
1672
+ "image",
1673
+ "layout"
1674
+ ],
1675
+ "additionalProperties": false
1676
+ },
1677
+ {
1678
+ "$schema": "http://json-schema.org/draft-07/schema#",
1679
+ "$id": "http://schema.mydesignsystem.com/logos.schema.json",
1680
+ "title": "Logos",
1681
+ "description": "Component used to display a set of logos",
1682
+ "type": "object",
1683
+ "properties": {
1684
+ "tagline": {
1685
+ "type": "string",
1686
+ "title": "Logo Tagline",
1687
+ "description": "A short tagline atop the logos",
1688
+ "examples": [
1689
+ "Your Success, Our Commitment"
1690
+ ]
1691
+ },
1692
+ "logos": {
1693
+ "type": "array",
1694
+ "title": "Logos",
1695
+ "description": "The logos to display",
1696
+ "items": {
1697
+ "type": "object",
1698
+ "properties": {
1699
+ "src": {
1700
+ "type": "string",
1701
+ "title": "URL",
1702
+ "description": "The URL of the logo image",
1703
+ "examples": [
1704
+ "img/logos/logoipsum-212.svg",
1705
+ "img/logos/logoipsum-217.svg",
1706
+ "img/logos/logoipsum-239.svg",
1707
+ "img/logos/logoipsum-244.svg",
1708
+ "img/logos/logoipsum-250.svg",
1709
+ "img/logos/logoipsum-286.svg"
1710
+ ]
1711
+ },
1712
+ "alt": {
1713
+ "type": "string",
1714
+ "title": "Caption",
1715
+ "description": "The alt text of the logo",
1716
+ "examples": [
1717
+ "Logo 1"
1718
+ ]
1719
+ }
1720
+ },
1721
+ "additionalProperties": false,
1722
+ "required": [
1723
+ "src"
1724
+ ]
1725
+ },
1726
+ "minItems": 1,
1727
+ "maxItems": 20
1728
+ },
1729
+ "align": {
1730
+ "type": "string",
1731
+ "title": "Alignment",
1732
+ "description": "The alignment of the logo layout",
1733
+ "enum": [
1734
+ "left",
1735
+ "center"
1736
+ ],
1737
+ "default": "center"
1738
+ },
1739
+ "logosPerRow": {
1740
+ "type": "integer",
1741
+ "title": "Logos Per Row",
1742
+ "description": "The amount of logos to display per row",
1743
+ "minimum": 2,
1744
+ "maximum": 8,
1745
+ "examples": [
1746
+ 5
1747
+ ]
1748
+ },
1749
+ "cta": {
1750
+ "type": "object",
1751
+ "title": "Call to Action",
1752
+ "description": "The call to action",
1753
+ "properties": {
1754
+ "toggle": {
1755
+ "type": "boolean",
1756
+ "default": false,
1757
+ "title": "CTA Toggle",
1758
+ "description": "Activate/disable the CTA"
1759
+ },
1760
+ "text": {
1761
+ "type": "string",
1762
+ "title": "Call to Action Text",
1763
+ "description": "A short CTA text",
1764
+ "examples": [
1765
+ "Explore the success stories of our valued customers and discover more about their journey."
1766
+ ]
1767
+ },
1768
+ "link": {
1769
+ "type": "string",
1770
+ "title": "Call to Action Link",
1771
+ "description": "The CTA link",
1772
+ "default": "#",
1773
+ "format": "uri"
1774
+ },
1775
+ "label": {
1776
+ "type": "string",
1777
+ "title": "Link Label",
1778
+ "description": "The text label displayed on the link",
1779
+ "examples": [
1780
+ "See all our partners"
1781
+ ]
1782
+ },
1783
+ "style": {
1784
+ "type": "string",
1785
+ "enum": [
1786
+ "button",
1787
+ "text"
1788
+ ],
1789
+ "default": "text"
1790
+ }
1791
+ },
1792
+ "additionalProperties": false,
1793
+ "required": [
1794
+ "style",
1795
+ "link",
1796
+ "label"
1797
+ ]
1798
+ },
1799
+ "type": {
1800
+ "const": "logos"
1801
+ }
1802
+ },
1803
+ "additionalProperties": false,
1804
+ "required": [
1805
+ "logos"
1806
+ ]
1809
1807
  }
1810
1808
  ]
1811
1809
  }