optimized-react-component-library-xyz123 1.1.6 → 1.1.7

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "optimized-react-component-library-xyz123",
3
- "version": "1.1.6",
3
+ "version": "1.1.7",
4
4
  "description": "A modern React component library using TypeScript with React 19 support.",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.mjs",
@@ -13,16 +13,14 @@
13
13
  "./css/darkMode.css": "./src/css/darkMode.css",
14
14
  "./css/mobileView.css": "./src/css/mobileView.css",
15
15
  "./css/styles.css": "./src/css/styles.css",
16
- "./css/questions.css": "./src/css/questions.css",
17
- "./css/FooterStandard.css": "./src/css/FooterStandard.css"
16
+ "./css/questions.css": "./src/css/questions.css"
18
17
  },
19
18
  "files": [
20
19
  "dist",
21
20
  "src/css/darkMode.css",
22
21
  "src/css/mobileView.css",
23
22
  "src/css/styles.css",
24
- "src/css/questions.css",
25
- "src/css/FooterStandard.css"
23
+ "src/css/questions.css"
26
24
  ],
27
25
  "scripts": {
28
26
  "build": "tsup",
@@ -85,6 +83,7 @@
85
83
  "date-fns": "^4.1.0",
86
84
  "dompurify": "^3.2.6",
87
85
  "react-bootstrap": "^2.10.10",
88
- "react-dropzone": "^14.3.8"
86
+ "react-dropzone": "^14.3.8",
87
+ "react-router-dom": "^7.13.0"
89
88
  }
90
89
  }
@@ -67,6 +67,83 @@
67
67
  color: var(--dark-text);
68
68
  }
69
69
 
70
+
71
+ /*--Navigation header / menu ----*/
72
+
73
+ .pts-navigation-header-container {
74
+ background: var(--dark-background-second);
75
+ }
76
+ .pts-navigation-header-nav-container button svg path,
77
+ .pts-navigation-header-nav-container button svg line{
78
+ color: var(--dark-action);
79
+ fill: var(--dark-action);
80
+ stroke: var(--dark-action);
81
+ }
82
+
83
+ .pts-navigation-header-container svg path {
84
+ fill: var(--dark-text);
85
+ }
86
+
87
+
88
+ .pts-navigation-header-nav-container,
89
+ .pts-navigation-button-label {
90
+ background: var(--dark-background-second);
91
+ color: var(--dark-action);
92
+ }
93
+
94
+ .pts-expand-icon svg rect{
95
+ fill: var(--dark-action);
96
+ }
97
+
98
+
99
+ .pts-contract-icon svg rect{
100
+ fill: var(--dark-orientation-active);
101
+ }
102
+
103
+
104
+ .pts-navigation-close-text{
105
+ color: var(--dark-action);
106
+ }
107
+
108
+ .pts-navigation-close-button{
109
+ background: var(--dark-main);
110
+ color: var(--dark-action);
111
+ }
112
+
113
+ .pts-navigation-close-button svg path{
114
+ stroke: var(--dark-action);
115
+ }
116
+ .pts-navigation-link-expand-button{
117
+ background-color: var(--dark-main);
118
+ }
119
+
120
+ .pts-navigation-link-expand-button svg path{
121
+ stroke: var(--dark-main)!important;
122
+ }
123
+
124
+ .pts-navigation-with-close-button,
125
+ .pts-navigation-menu-container,
126
+ .pts-navigation-button,
127
+ .pts-navigation-close-container,
128
+ .pts-sub-navigation-item,
129
+ .pts-sub-navigation-item a,
130
+ .pts-navigation-button a {
131
+ background: var(--dark-main);
132
+ color: var(--dark-text);
133
+ border-color: var(--dark-background-third);
134
+ }
135
+
136
+ .pts-sub-navigation-container {
137
+ background-color: #d5b9dd;
138
+ border-left: var(--dark-action) 5px solid;
139
+ }
140
+
141
+ /*--------BREADCRUMBS------*/
142
+ .pts-breadcrumbs {
143
+ background-color: var(--dark-background-third);
144
+ }
145
+
146
+
70
147
  /*-------MAIN CONTENT-------*/
71
148
  section,
72
149
  .pts-form-step-header {
@@ -161,8 +238,6 @@
161
238
  color: var(--dark-error);
162
239
  }
163
240
 
164
- .pts-root-question-input-error-border,
165
- .pts-root-question-input-error-border,
166
241
  .pts-root-question-input-error-border {
167
242
  border: 0.15rem solid var(--dark-error) !important;
168
243
  }
@@ -368,6 +443,12 @@
368
443
  color: var(--dark-error) !important;
369
444
  }
370
445
 
446
+ /*--------------------FOOTER-----------------*/
447
+
448
+ .pts-footer-slogan-text-container {
449
+ background-color: var(--dark-background-third);
450
+ }
451
+
371
452
  /*-------------MODAL-----------*/
372
453
  .pts-modal-content {
373
454
  background-color: var(--dark-main);
@@ -3,10 +3,111 @@
3
3
  /********************************************/
4
4
 
5
5
  @media (max-width: 1085px) {
6
+
7
+ .pts-navigation-header-container {
8
+ padding:unset;
9
+ border-bottom: 2px solid #ddd;
10
+ }
11
+ .pts-navigation-header-content {
12
+ display: block;
13
+ }
14
+
15
+ .pts-navigation-header-logo-container {
16
+ height: 80px;
17
+ padding: 8px 10px;
18
+ width: 100%;
19
+ text-align: center;
20
+ border-bottom: 2px solid #ddd;
21
+ }
22
+
23
+ .pts-navigation-header-hedline-container{
24
+ border-bottom: 2px solid #ddd;
25
+ height: 48px;
26
+ align-items: center;
27
+ }
28
+
29
+ .pts-navigation-header-nav-container {
30
+ align-items: center;
31
+ justify-content: center;
32
+ height: 48px;
33
+ }
34
+ .pts-navigation-header-nav-container button {
35
+ width: 100%;
36
+ }
37
+
38
+ /**Navigation menu**/
39
+ .pts-navigation-menu-container {
40
+ top: -15px;
41
+ width: 100%;
42
+ max-width: unset;
43
+ position: relative;
44
+ }
45
+
46
+ .pts-navigation-close-container {
47
+ display: none;
48
+ }
49
+
50
+ .nav-parent-button {
51
+ padding-right: 5px !important;
52
+ border: 0px !important;
53
+ }
54
+
55
+ /**Breadcrumbs**/
56
+ .pts-breadcrumbs a {
57
+ font-size: 14px;
58
+ }
59
+
60
+ .pts-breadcrumbs {
61
+ padding-left: 20px;
62
+ height: 30px !important;
63
+ }
64
+
65
+ .pts-footer-content {
66
+ display: flex;
67
+ height: auto;
68
+ flex-direction: column;
69
+ text-align: left;
70
+ padding: 1.6rem;
71
+ width: 90%;
72
+ }
73
+
74
+ .pts-footer-logo {
75
+ position: static;
76
+ padding-left: 0;
77
+ margin-left: -8px;
78
+ margin-bottom: 1.6rem;
79
+ align-self: flex-start;
80
+ }
81
+
82
+ .pts-footer-linkList {
83
+ width: 100%;
84
+ margin-bottom: 8px;
85
+ margin-left: 0;
86
+ }
87
+
88
+ .pts-footer-linkList ul {
89
+ flex-direction: column;
90
+ gap: 1.6rem;
91
+ padding-top: 0;
92
+ }
93
+
94
+ .pts-footer-linkList a span {
95
+ padding: 0;
96
+ }
97
+
98
+ .pts-footer-container .pts-footer-linkList ul li:not(:last-child)::after {
99
+ display: none;
100
+ }
101
+
6
102
  .unsetMargin-Padding {
7
103
  margin: 0;
8
104
  padding: 0;
9
105
  }
106
+
107
+ .pts-footer-slogan-text {
108
+ font-size: 16px;
109
+ text-align: center;
110
+ }
10
111
  }
11
112
 
12
113
  /********************************************/
@@ -216,6 +317,35 @@
216
317
  padding-bottom: 4px;
217
318
  }
218
319
 
320
+ .pts-footer-slogan-text {
321
+ line-height: 2rem;
322
+ }
323
+
324
+ .pts-footer-logo {
325
+ position: static;
326
+ padding-left: 0;
327
+ margin-bottom: 1.6rem;
328
+ align-self: flex-start;
329
+ }
330
+
331
+ .pts-footer-linkList {
332
+ width: 100%;
333
+ }
334
+
335
+ .pts-footer-linkList ul {
336
+ flex-direction: column;
337
+ gap: 1.6rem;
338
+ padding-top: 0;
339
+ }
340
+
341
+ .pts-footer-linkList a span {
342
+ padding: 0;
343
+ }
344
+
345
+ .pts-footer-container .pts-footer-linkList ul li:not(:last-child)::after {
346
+ display: none;
347
+ }
348
+
219
349
  .pts-question-preview {
220
350
  flex-direction: column;
221
351
  margin-bottom: 1.6rem;
@@ -251,6 +381,16 @@
251
381
  .pts-serviceHeadlineAndBody-container .pts-moreinfo-list a {
252
382
  margin-top: 1.6rem;
253
383
  }
384
+
385
+ .pts-footer-container {
386
+ margin-top: 1.6rem;
387
+ }
388
+
389
+ .pts-footer-container {
390
+ height: auto;
391
+ flex-direction: column;
392
+ text-align: left;
393
+ }
254
394
  }
255
395
 
256
396
  /********************************************/
@@ -53,7 +53,7 @@ div.pts-root-question:last-child {
53
53
  font-size: 1.6rem;
54
54
  font-style: normal;
55
55
  font-weight: 400;
56
- line-height: 2rem;
56
+ line-height: 20px;
57
57
  }
58
58
 
59
59
  .pts-root-about {
@@ -231,8 +231,6 @@ input:focus-visible:-webkit-autofill {
231
231
  box-shadow: 0 0 0 0px #000 !important;
232
232
  }
233
233
 
234
- @import './FooterStandard.css';
235
-
236
234
  /* ---------- COOKIE BANNER ---------- */
237
235
 
238
236
  .pts-cookieBanner {
@@ -369,6 +367,235 @@ input:focus-visible:-webkit-autofill {
369
367
  text-decoration: underline 0.2rem;
370
368
  }
371
369
 
370
+ /**Header with navigation**/
371
+
372
+ .pts-navigation-header-container {
373
+ display: flex;
374
+ min-height: 80px;
375
+ padding: 0px 70px;
376
+ align-items: center;
377
+ justify-content: space-between;
378
+ background-color: var(--main);
379
+ }
380
+
381
+ .pts-navigation-header-content {
382
+ width: 100%;
383
+ display: grid;
384
+ grid-template-columns: 1fr auto 1fr;
385
+ align-items: center;
386
+ }
387
+
388
+ .pts-navigation-header-logo-container {
389
+ height: 4rem;
390
+ }
391
+
392
+ .pts-navigation-header-logo svg {
393
+ height: 4rem;
394
+ }
395
+
396
+ .pts-navigation-header-hedline-container{
397
+ display:flex;
398
+ justify-content: center;
399
+ align-items: flex-end;
400
+ height: 4.5rem;
401
+ }
402
+ .pts-navigation-header-hedline-container h1{
403
+ margin-bottom: unset;
404
+ }
405
+
406
+ .pts-navigation-header-nav-container{
407
+ display: flex;
408
+ justify-content: flex-end;
409
+ width: 100%;
410
+ align-items: flex-end;
411
+ height: 5rem;
412
+ }
413
+ /*navigation menu*/
414
+ .pts-navigation-header-nav-container button {
415
+ background: none;
416
+ line-height: 2.4rem;
417
+ text-decoration-skip-ink: none;
418
+ border: none;
419
+ color: var(--action);
420
+ font-size: 1.6rem;
421
+ padding: 0;
422
+ cursor: pointer;
423
+ width: 13rem;
424
+ }
425
+
426
+
427
+ .pts-navigation-button-label {
428
+ position: relative;
429
+ padding-left: 0.8rem;
430
+ bottom: 3px;
431
+
432
+ }
433
+
434
+ .pts-navigation-menu-container {
435
+ background-color:var(--main);
436
+ position: absolute;
437
+ top: 8rem;
438
+ right: 0;
439
+ z-index: 20;
440
+ width: 100%;
441
+ max-width: 570px;
442
+ }
443
+
444
+ .pts-navigation-with-close-button{
445
+ top:0;
446
+ }
447
+
448
+ .pts-navigation-close-text {
449
+ padding-left: 0.8rem;
450
+ }
451
+
452
+ .pts-navigation-link-list,
453
+ .pts-navigation-link,
454
+ .pts-sub-navigation-list {
455
+ list-style: none;
456
+ background-color:var(--main);;
457
+ width: 100%;
458
+ padding-inline-start: 0px;
459
+ }
460
+
461
+ .pts-navigation-link-list {
462
+ width: 100%;
463
+ padding-inline-start: 0px;
464
+ }
465
+
466
+ .pts-navigation-button a,
467
+ .pts-sub-navigation-item a {
468
+ text-decoration: none;
469
+ color: var(--text)
470
+ }
471
+
472
+ .pts-navigation-link-expand-button {
473
+ border: none;
474
+ padding: 0;
475
+ cursor: pointer;
476
+ }
477
+
478
+ .pts-sub-navigation-container {
479
+ background-color: #d5b9dd;
480
+ border-left: var(--action) 5px solid;
481
+ padding-left: 3.6rem;
482
+ display: flex ;
483
+ align-items: flex-end ;
484
+ gap: 18px ;
485
+ }
486
+
487
+ .pts-sub-navigation-list {
488
+ display:block;
489
+ }
490
+
491
+ .pts-sub-navigation-item {
492
+ height: 5.1rem;
493
+ display: flex;
494
+ align-items: center;
495
+ justify-content: flex-start;
496
+ border-bottom: 2px solid var(--background) ;
497
+ padding-left: 3rem;
498
+ }
499
+
500
+
501
+ .pts-navigation-button,
502
+ .pts-navigation-close-container {
503
+ padding: 2.1rem 3.6rem;
504
+ border-width: 0px;
505
+ border-bottom: 2px solid var(--background);
506
+ background-color: var(--main);
507
+ text-align: left;
508
+ display: flex;
509
+ justify-content: space-between;
510
+ align-items: center;
511
+ }
512
+
513
+ .pts-navigation-close-button {
514
+ width: 20rem;
515
+ height: 4rem;
516
+ border: none;
517
+ border-radius: 8px;
518
+ color: var(--action);
519
+ background-color: var(--main);
520
+ display: flex;
521
+ align-items: center;
522
+ justify-content: flex-start;
523
+ margin-top: 3rem;
524
+ margin-bottom: 3rem;
525
+ cursor: pointer;
526
+ }
527
+
528
+ /*-------Breadcrumbs-------*/
529
+ .pts-breadcrumbs {
530
+ background-color: var(--background-third);
531
+ height: 48px;
532
+ display: flex;
533
+ align-items: center;
534
+ padding-left: 6rem;
535
+ padding-top: 2px;
536
+
537
+ }
538
+
539
+ .pts-breadcrumbs a {
540
+ color: var(--main);
541
+ text-decoration: none;
542
+ }
543
+
544
+ .pts-breadcrumbs a:hover {
545
+ color: var(--main);
546
+ text-decoration: underline 2px;
547
+ }
548
+
549
+ .pts-crumb-label {
550
+ position: relative;
551
+ bottom: 2px;
552
+ }
553
+
554
+ .pts-bold-crumb {
555
+ font-weight: bold;
556
+ }
557
+
558
+ .pts-breadcrumbs svg {
559
+ margin: 0 1.6rem;
560
+ }
561
+
562
+ .pts-breadcrumbs nav {
563
+ background-color: unset;
564
+ position: unset;
565
+ }
566
+
567
+ /****SEARCH BAR*******/
568
+ .pts-searchBar-container {
569
+ height: 7rem;
570
+ background-color: var(--background);
571
+ display: flex;
572
+ align-items: center;
573
+ justify-content: center;
574
+ }
575
+
576
+ .pts-searchBar-button {
577
+
578
+ height: 3.9rem;
579
+ background-color: var(--action);
580
+ border-radius: 8px;
581
+ border: var(--action) solid 1px;
582
+ color: var(--main);
583
+ }
584
+
585
+ .pts-searchBar-Button svg {
586
+ margin-right: 0.5rem;
587
+ }
588
+
589
+ .pts-searchBar-container input {
590
+ border-radius: 8px;
591
+ width: 65vw;
592
+ border: var(--action) solid 1px;
593
+ margin-right: -10px;
594
+ padding: 1rem;
595
+ border-top-right-radius: 0px;
596
+ border-bottom-right-radius: 0px;
597
+ }
598
+
372
599
  /* ---------- TextBODY ---------- */
373
600
 
374
601
  .pts-textBody-container p {
@@ -685,6 +912,85 @@ input:focus-visible:-webkit-autofill {
685
912
  transition: 0.2s;
686
913
  }
687
914
 
915
+ /* ---------- FOOTER ---------- */
916
+
917
+ .pts-footer-container {
918
+ align-items: center;
919
+ width: 100%;
920
+ background-color: var(--background-second);
921
+ }
922
+
923
+ .pts-footer-slogan-text-container {
924
+ display: flex;
925
+ align-items: center;
926
+ justify-content: center;
927
+ background-color: var(--background-third);
928
+ height: 50px;
929
+ padding: 0px;
930
+ }
931
+
932
+ .pts-footer-slogan-text {
933
+ color: var(--main);
934
+ line-height: 2.4rem;
935
+ font-size: 2rem;
936
+ text-box-trim: trim-both;
937
+ margin: 0;
938
+ }
939
+
940
+ .pts-footer-content {
941
+ display: flex;
942
+ align-items: center;
943
+ width: 100%;
944
+ min-height: 14rem;
945
+ padding: 0.1rem 0;
946
+ }
947
+
948
+ .pts-footer-logo {
949
+ width: 154.444px;
950
+ height: 40px;
951
+ padding-left: 70px;
952
+ flex-shrink: 0;
953
+ position: relative;
954
+ }
955
+
956
+ .pts-footer-linkList {
957
+ flex: 1;
958
+ justify-content: center;
959
+ margin-left: -224px;
960
+ }
961
+
962
+ .pts-footer-linkList ul {
963
+ padding: 0;
964
+ padding-top: 15px;
965
+ margin: 0;
966
+ list-style: none;
967
+ display: flex;
968
+ justify-content: center;
969
+ line-height: 25px;
970
+ }
971
+
972
+ .pts-footer-linkList a {
973
+ color: var(--main);
974
+ text-underline-offset: 3px;
975
+ white-space: nowrap;
976
+ }
977
+
978
+ .pts-footer-linkList a span {
979
+ padding-left: 36px;
980
+ padding-right: 36px;
981
+ color: var(--main);
982
+ }
983
+
984
+ .pts-footer-container .pts-footer-linkList ul li:not(:last-child)::after {
985
+ content: '';
986
+ width: 1px;
987
+ height: 24px;
988
+ border: 0.5px solid;
989
+ color: var(--main);
990
+ position: absolute;
991
+ box-sizing: border-box;
992
+ }
993
+
688
994
  /* ---------- MODAL ---------- */
689
995
 
690
996
  .pts-modal-overlay {