optimized-react-component-library-xyz123 0.0.2 → 0.0.4

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/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- # ai-optimera-komponentbibliotek
2
+ # optimized-react-component-library-xyz123
3
3
 
4
4
  Ett modernt, best practice React-komponentbibliotek med TypeScript. Förberett för npm-publicering.
5
5
 
@@ -22,7 +22,7 @@ En standard textinput med props:
22
22
 
23
23
  **Exempel:**
24
24
  ```tsx
25
- import { TextInput } from 'ai-optimera-komponentbibliotek';
25
+ import { TextInput } from 'optimized-react-component-library-xyz123';
26
26
 
27
27
  <TextInput value={text} onChange={handleChange} placeholder="Skriv här" />
28
28
  ```
@@ -35,7 +35,7 @@ En standard checkbox med props:
35
35
 
36
36
  **Exempel:**
37
37
  ```tsx
38
- import { Checkbox } from 'ai-optimera-komponentbibliotek';
38
+ import { Checkbox } from 'optimized-react-component-library-xyz123';
39
39
 
40
40
  <Checkbox checked={isChecked} onChange={handleCheck} label="Godkänn villkor" />
41
41
  ```
@@ -50,7 +50,7 @@ Props (via `TextFieldStandardProps`):
50
50
 
51
51
  **Exempel:**
52
52
  ```tsx
53
- import TextFieldStandard from 'ai-optimera-komponentbibliotek/NewInputComponentStandard/TextFieldStandard/TextFieldStandard';
53
+ import TextFieldStandard from 'optimized-react-component-library-xyz123/NewInputComponentStandard/TextFieldStandard/TextFieldStandard';
54
54
 
55
55
  <TextFieldStandard
56
56
  question={question}
@@ -65,7 +65,7 @@ En textarea-komponent med liknande props som TextFieldStandard.
65
65
 
66
66
  **Exempel:**
67
67
  ```tsx
68
- import TextAreaStandard from 'ai-optimera-komponentbibliotek/NewInputComponentStandard/TextAreaStandard/TextAreaStandard';
68
+ import TextAreaStandard from 'optimized-react-component-library-xyz123/NewInputComponentStandard/TextAreaStandard/TextAreaStandard';
69
69
 
70
70
  <TextAreaStandard
71
71
  question={question}
package/dist/index.css ADDED
@@ -0,0 +1,620 @@
1
+ @import "https://assets.soracom.io/fonts/aeonik/Aeonik.css";
2
+
3
+ /* src/global.css */
4
+ html {
5
+ font-size: 62.5%;
6
+ }
7
+ body {
8
+ margin: 0;
9
+ font-family: Arial;
10
+ font-size: 1.6rem;
11
+ font-weight: 400;
12
+ background-color: #dddddd;
13
+ display: flex;
14
+ flex-direction: column;
15
+ min-height: 100vh;
16
+ }
17
+ body a {
18
+ text-decoration: underline;
19
+ text-underline-offset: 0.3rem;
20
+ display: inline-flex;
21
+ align-items: center;
22
+ color: #6e3282;
23
+ }
24
+ body a:hover {
25
+ text-decoration: underline 0.2rem;
26
+ }
27
+ h1,
28
+ h2,
29
+ h3 {
30
+ margin: 0;
31
+ margin-bottom: 3.6rem;
32
+ }
33
+ h1 {
34
+ font-size: 3rem;
35
+ }
36
+ h2 {
37
+ font-size: 2.4rem;
38
+ width: 100%;
39
+ }
40
+ h3 {
41
+ font-size: 2rem;
42
+ }
43
+ h4 {
44
+ margin: 0;
45
+ font-size: 1.6rem;
46
+ }
47
+ #main-content {
48
+ padding-top: 3.6rem;
49
+ padding-bottom: 6.4rem;
50
+ max-width: 860px;
51
+ margin-left: auto;
52
+ margin-right: auto;
53
+ }
54
+ section {
55
+ display: flex;
56
+ flex-direction: column;
57
+ background-color: #ffffff;
58
+ padding: 3.6rem;
59
+ margin-bottom: 1.6rem;
60
+ border-radius: 0.4rem;
61
+ margin-left: 0.8rem;
62
+ margin-right: 0.8rem;
63
+ }
64
+ .pts-first-category-section {
65
+ padding-top: 0;
66
+ border-top-left-radius: 0;
67
+ border-top-right-radius: 0;
68
+ }
69
+ .pts-form-step-header {
70
+ display: flex;
71
+ flex-direction: column;
72
+ background-color: #ffffff;
73
+ padding: 3.6rem;
74
+ margin-bottom: 0;
75
+ border-radius: 0.4rem;
76
+ margin-left: 0.8rem;
77
+ margin-right: 0.8rem;
78
+ padding-bottom: 0;
79
+ border-bottom-left-radius: 0;
80
+ border-bottom-right-radius: 0;
81
+ }
82
+ .pts-form-step-header p {
83
+ margin: 0px;
84
+ margin-bottom: 36px;
85
+ }
86
+ fieldset {
87
+ border: none;
88
+ padding: 0;
89
+ margin: 0;
90
+ }
91
+ .pts-root-question {
92
+ display: flex;
93
+ flex-direction: column;
94
+ margin-bottom: 1.6rem;
95
+ max-width: 624px;
96
+ }
97
+ .pts-root-categoryDescription,
98
+ .pts-root-stepDescription {
99
+ margin-bottom: 3.6rem;
100
+ }
101
+ .pts-root-question legend,
102
+ .pts-root-question label,
103
+ .pts-radio-option {
104
+ margin-bottom: 0.8rem;
105
+ }
106
+ .pts-root-about {
107
+ font-size: 1.4rem;
108
+ color: #545454;
109
+ margin: 0;
110
+ margin-bottom: 0.4rem;
111
+ }
112
+ .pts-root-question input[type=text]:focus,
113
+ .pts-root-question input[type=email]:focus,
114
+ .pts-root-question input[type=tel]:focus {
115
+ border: 0.2rem solid #6e3282;
116
+ }
117
+ .pts-root-error {
118
+ display: flex;
119
+ margin-top: 0.4rem;
120
+ }
121
+ .errorDot {
122
+ display: flex;
123
+ font-size: 1.6rem;
124
+ font-weight: 700;
125
+ width: 1.8rem;
126
+ height: 1.8rem;
127
+ border-radius: 1rem;
128
+ justify-content: center;
129
+ color: #ffffff;
130
+ background-color: #8e0039;
131
+ margin-right: 9px;
132
+ }
133
+ .errorText,
134
+ .pts-root-mandatoryAsterisk {
135
+ color: #8e0039;
136
+ }
137
+ .pts-root-question-input-error-border,
138
+ .pts-root-question-input-error-border,
139
+ .pts-root-question-input-error-border {
140
+ border: 0.2rem solid #8e0039 !important;
141
+ }
142
+ .sr-only {
143
+ position: absolute;
144
+ width: 1px;
145
+ height: 1px;
146
+ padding: 0;
147
+ margin: -1px;
148
+ overflow: hidden;
149
+ clip: rect(0, 0, 0, 0);
150
+ white-space: nowrap;
151
+ border: 0;
152
+ }
153
+ button:focus-visible,
154
+ a:focus-visible,
155
+ input:focus-visible,
156
+ textarea:focus-visible,
157
+ .filePickLabel:focus-visible {
158
+ outline-offset: 0 !important;
159
+ outline-style: solid !important;
160
+ outline-color: #fff !important;
161
+ outline-width: 2px !important;
162
+ box-shadow: 0 0 0 4px #000 !important;
163
+ }
164
+ .using-mouse input:focus-visible,
165
+ .using-mouse button:focus-visible,
166
+ .using-mouse textarea:focus-visible,
167
+ .using-mouse a:focus-visible,
168
+ .using-mouse .filePickLabel:focus-visible {
169
+ outline: none;
170
+ outline-width: 0px !important;
171
+ box-shadow: 0 0 0 0px #000 !important;
172
+ }
173
+ .pts-radioMultiple-container,
174
+ .pts-multipleCheckboxes-container {
175
+ padding-bottom: 2rem;
176
+ }
177
+ .pts-root-question input[type=text],
178
+ .pts-root-question input[type=email],
179
+ .pts-root-question input[type=tel] {
180
+ max-width: 100%;
181
+ font-size: 1.6rem;
182
+ padding-left: 1.6rem;
183
+ padding-right: 1.6rem;
184
+ border-radius: 0.8rem;
185
+ border: 1px solid #545454;
186
+ height: 4.8rem;
187
+ }
188
+ .pts-serviceHeadlineAndBody-container li {
189
+ margin-bottom: 0.8rem;
190
+ }
191
+ .pts-serviceHeadlineAndBody-container ul {
192
+ padding-left: 2rem;
193
+ }
194
+ .pts-serviceHeadlineAndBody-container a {
195
+ margin-bottom: 2.8rem;
196
+ }
197
+ .pts-moreinfo-list {
198
+ margin: 0 !important;
199
+ list-style: none;
200
+ padding: 0 !important;
201
+ }
202
+ .pts-moreinfo-list svg {
203
+ width: 1.6rem;
204
+ height: 1.6rem;
205
+ background-color: #6e3282;
206
+ border-radius: 50%;
207
+ padding: 0.4rem;
208
+ flex-shrink: 0;
209
+ margin-right: 1.6rem;
210
+ }
211
+ .pts-stepper-container {
212
+ display: flex;
213
+ width: 100%;
214
+ }
215
+ .pts-stepper-step {
216
+ display: flex;
217
+ flex-direction: column;
218
+ align-items: center;
219
+ flex: 1;
220
+ position: relative;
221
+ }
222
+ .pts-stepperDot {
223
+ width: 2.4rem;
224
+ height: 2.4rem;
225
+ line-height: 2.4rem;
226
+ font-size: 1.8rem;
227
+ background-color: #747474;
228
+ color: #ffffff;
229
+ border-radius: 50%;
230
+ margin-bottom: 1.2rem;
231
+ display: flex;
232
+ justify-content: center;
233
+ align-items: center;
234
+ }
235
+ .pts-stepperDotActive {
236
+ background-color: #dc7d0a;
237
+ }
238
+ .pts-stepperDotDone {
239
+ background-color: #6e3282;
240
+ }
241
+ .pts-stepper-step:not(:last-child)::after {
242
+ content: "";
243
+ position: absolute;
244
+ top: 1.2rem;
245
+ left: calc(50% + 3.6rem);
246
+ right: calc(-50% + 3.6rem);
247
+ height: 0.2rem;
248
+ background-color: #747474;
249
+ }
250
+ .pts-stepperButtons-container {
251
+ display: flex;
252
+ justify-content: end;
253
+ margin-right: 0.8rem;
254
+ }
255
+ .pts-forwardButton,
256
+ .pts-backButton {
257
+ background-color: #6e3282;
258
+ border: 2px solid #6e3282;
259
+ color: #ffffff;
260
+ padding: 8px 20px;
261
+ border-radius: 8px;
262
+ font-size: 16px;
263
+ cursor: pointer;
264
+ margin-left: 1.6rem;
265
+ }
266
+ .pts-backButton:focus,
267
+ .pts-backButton:hover,
268
+ .pts-forwardButton:focus,
269
+ .pts-forwardButton:hover,
270
+ .btn-upload:focus,
271
+ .btn-upload:hover {
272
+ background-color: #ffffff;
273
+ border: 2px solid #6e3282;
274
+ color: #6e3282;
275
+ transition: 0.2s;
276
+ }
277
+ .pts-radioMultiple-container input[type=radio] {
278
+ appearance: none;
279
+ width: 1.8rem;
280
+ height: 1.8rem;
281
+ border: 1.5px solid #545454;
282
+ border-radius: 3.1rem;
283
+ margin: 0;
284
+ margin-right: 0.8rem;
285
+ vertical-align: -2px;
286
+ position: relative;
287
+ cursor: pointer;
288
+ }
289
+ .pts-radioMultiple-container input[type=radio]:checked::before {
290
+ content: "";
291
+ position: absolute;
292
+ top: 50%;
293
+ left: 50%;
294
+ transform: translate(-50%, -50%);
295
+ width: 1rem;
296
+ height: 1rem;
297
+ border-radius: 50%;
298
+ background-color: #6e3282;
299
+ }
300
+ .pts-radioMultiple-container label {
301
+ position: relative;
302
+ top: -1px;
303
+ cursor: pointer;
304
+ }
305
+ .pts-multipleCheckboxes-container input[type=checkbox] {
306
+ -webkit-appearance: none;
307
+ width: 1.8rem;
308
+ height: 1.8rem;
309
+ margin-right: 0.8rem;
310
+ flex-shrink: 0;
311
+ background-color: #ffffff;
312
+ border: 0.15rem solid #545454;
313
+ border-radius: 0.2rem;
314
+ cursor: pointer;
315
+ }
316
+ .pts-multipleCheckboxes-container input[type=checkbox]:checked {
317
+ background-color: #6e3282;
318
+ border: none;
319
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
320
+ }
321
+ .pts-multipleCheckboxes-container label {
322
+ cursor: pointer;
323
+ margin: 0;
324
+ padding-top: 0.1rem;
325
+ }
326
+ .pts-multipleCheckboxes-container ul {
327
+ padding-left: unset;
328
+ margin-top: 0;
329
+ margin-bottom: 0.8rem;
330
+ }
331
+ .pts-multipleCheckboxes-container li {
332
+ display: flex;
333
+ margin-bottom: 0.8rem;
334
+ align-items: center;
335
+ }
336
+ .pts-skipLink-container a {
337
+ position: absolute;
338
+ top: -1000px;
339
+ left: 1.8rem;
340
+ transition: top 0.3s ease-in-out;
341
+ background-color: #ffffff;
342
+ color: #6e3282;
343
+ }
344
+ .pts-skipLink-container a:focus {
345
+ top: 1.8rem;
346
+ }
347
+ .pts-header-container {
348
+ display: flex;
349
+ height: 80px;
350
+ padding: 0px 70px;
351
+ align-items: center;
352
+ justify-content: space-between;
353
+ background-color: #ffffff;
354
+ }
355
+ .pts-languageButton {
356
+ display: flex;
357
+ background: transparent;
358
+ border: transparent;
359
+ color: #6e3282;
360
+ }
361
+ .pts-footer-container {
362
+ display: flex;
363
+ height: 14rem;
364
+ align-items: center;
365
+ width: 100%;
366
+ background-color: #200827;
367
+ }
368
+ .pts-footer-logo {
369
+ width: 154.444px;
370
+ height: 40px;
371
+ padding-left: 70px;
372
+ flex-shrink: 0;
373
+ position: absolute;
374
+ }
375
+ .pts-footer-linkList {
376
+ flex: 1;
377
+ justify-content: center;
378
+ }
379
+ .pts-footer-linkList ul {
380
+ padding: 0;
381
+ padding-top: 15px;
382
+ margin: 0;
383
+ list-style: none;
384
+ display: flex;
385
+ justify-content: center;
386
+ line-height: 25px;
387
+ }
388
+ .pts-footer-linkList a {
389
+ color: #ffffff;
390
+ text-underline-offset: 3px;
391
+ }
392
+ .pts-footer-linkList a span {
393
+ padding-left: 36px;
394
+ padding-right: 36px;
395
+ color: #ffffff;
396
+ }
397
+ .pts-footer-container .pts-footer-linkList ul li:not(:last-child)::after {
398
+ content: "";
399
+ width: 1px;
400
+ height: 24px;
401
+ border: 0.5px solid;
402
+ color: #ffffff;
403
+ position: absolute;
404
+ box-sizing: border-box;
405
+ }
406
+ .pts-question-hasAbout label {
407
+ margin-bottom: 0.4rem;
408
+ line-height: 1.4rem;
409
+ }
410
+ .pts-about {
411
+ margin-bottom: 0.4rem;
412
+ color: #545454;
413
+ font-size: 1.4rem;
414
+ }
415
+ .pts-textArea-container textarea {
416
+ height: 16rem;
417
+ padding: 1.2rem 1.6rem;
418
+ flex-shrink: 0;
419
+ font-family: arial;
420
+ font-size: 1.6rem;
421
+ border-radius: 8px;
422
+ border: 0.1px solid #545454;
423
+ }
424
+ .pts-textArea-container textarea:focus {
425
+ border: 0.2rem solid #6e3282;
426
+ }
427
+ .pts-textarea-counter-error-container {
428
+ display: flex;
429
+ }
430
+ .pts-character-counter {
431
+ text-align: right;
432
+ width: 100%;
433
+ margin-top: 0.4rem;
434
+ }
435
+ .pts-textarea-counter-error-container .pts-root-error {
436
+ width: 100%;
437
+ }
438
+ .pts-editPreviewLink-container {
439
+ display: flex;
440
+ justify-content: end;
441
+ width: 100%;
442
+ margin-left: 1rem;
443
+ align-self: flex-start;
444
+ }
445
+ .pts-editPreviewLink-container button {
446
+ display: flex;
447
+ align-items: center;
448
+ background-color: transparent;
449
+ color: #6e3282;
450
+ border: none;
451
+ cursor: pointer;
452
+ font-size: 1.3rem;
453
+ gap: 0.2rem;
454
+ }
455
+ .pts-editPreviewLink-container svg {
456
+ height: 1.6rem;
457
+ width: 1.6rem;
458
+ flex-shrink: 0;
459
+ }
460
+ .pts-question-preview,
461
+ .addFilesPreviewContainer {
462
+ display: flex;
463
+ justify-content: space-between;
464
+ border-bottom: 1px solid #ddd;
465
+ margin-bottom: 24px;
466
+ margin-top: 0;
467
+ }
468
+ .pts-question-preview h4,
469
+ .addFilesPreviewContainer h4 {
470
+ margin-bottom: 8px;
471
+ width: 33%;
472
+ padding-right: 3.6rem;
473
+ }
474
+ .pts-root-answer,
475
+ .answer {
476
+ width: 66%;
477
+ margin-bottom: 8px;
478
+ }
479
+ .pts-root-answer ul {
480
+ margin: 0;
481
+ padding: 0;
482
+ }
483
+ .pts-root-answer li {
484
+ margin-bottom: 0.8rem;
485
+ }
486
+ .stepInfoText {
487
+ margin: 0;
488
+ margin-bottom: 36px;
489
+ }
490
+ .h3andPreviewLink {
491
+ display: flex;
492
+ align-items: center;
493
+ justify-content: space-between;
494
+ width: 100%;
495
+ }
496
+ #section-heading-0 {
497
+ width: 100%;
498
+ }
499
+ .no-answer-preview-page {
500
+ color: #545454;
501
+ }
502
+ .pts-preview-header {
503
+ display: flex;
504
+ justify-content: space-between;
505
+ align-items: baseline;
506
+ }
507
+ .pts-textHeadlineAndBody-container .notFirstInList {
508
+ margin-top: 0.8rem;
509
+ }
510
+ .pts-serviceHeadlineAndBody-container .notFirstInList {
511
+ margin-top: 0.8rem;
512
+ }
513
+ .pts-modal-overlay {
514
+ position: fixed;
515
+ top: 0;
516
+ left: 0;
517
+ width: 100%;
518
+ height: 100%;
519
+ background-color: rgba(0, 0, 0, 0.5);
520
+ display: flex;
521
+ align-items: center;
522
+ justify-content: center;
523
+ z-index: 999;
524
+ }
525
+ .pts-modal-content {
526
+ background: white;
527
+ color: black;
528
+ padding: 3.7rem;
529
+ border-radius: 4px;
530
+ max-width: 600px;
531
+ width: 90%;
532
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
533
+ }
534
+ .pts-spinner-border {
535
+ display: block;
536
+ width: 9.4rem;
537
+ height: 9.4rem;
538
+ margin: 0 auto 0 auto;
539
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='94' height='94' viewBox='0 0 94 94' fill='none'%3e%3cpath d='M47 11.75C66.4682 11.75 82.25 27.532 82.25 47C82.25 66.4682 66.4682 82.25 47 82.25C27.532 82.25 11.75 66.4682 11.75 47C11.75 27.532 27.532 11.75 47 11.75Z' stroke='%236E3282' stroke-opacity='0.25' stroke-width='7.83333' stroke-linecap='round'/%3e%3cpath d='M47 11.75C66.4682 11.75 82.25 27.532 82.25 47' stroke='%236E3282' stroke-width='7.83333' stroke-linecap='round'/%3e%3c/svg%3e");
540
+ background-size: contain;
541
+ background-repeat: no-repeat;
542
+ background-position: center;
543
+ animation: pts-spinner-border 0.75s linear infinite;
544
+ }
545
+ .pts-modal-content h1 {
546
+ margin: 0;
547
+ margin-bottom: 0.8rem;
548
+ }
549
+ .pts-modal-content p {
550
+ margin: 0;
551
+ margin-bottom: 3.6rem;
552
+ }
553
+ @keyframes pts-spinner-border {
554
+ 100% {
555
+ transform: rotate(360deg);
556
+ }
557
+ }
558
+ .pts-errorSummary-container {
559
+ padding: 1.6rem 2.4rem 1.6rem 2.4rem;
560
+ margin-top: 3.6rem;
561
+ border-radius: 0.8rem;
562
+ border: 0.1rem solid #8e0039;
563
+ border-left: 4rem solid #8e0039;
564
+ position: relative;
565
+ }
566
+ .pts-errorSummary-container .errorDot {
567
+ position: absolute;
568
+ top: 2.1rem;
569
+ left: -2.8rem;
570
+ width: 1.6rem;
571
+ height: 1.6rem;
572
+ border-radius: 50%;
573
+ background-color: #ffffff;
574
+ color: #8e0039;
575
+ align-items: center;
576
+ font-size: 1.4rem;
577
+ }
578
+ .pts-errorSummary-container h2 {
579
+ margin-bottom: 0;
580
+ }
581
+ .pts-errorSummary-container ul {
582
+ padding: 0;
583
+ margin: 0;
584
+ }
585
+ .pts-errorSummary-container li {
586
+ display: flex;
587
+ cursor: pointer;
588
+ padding-top: 1.6rem;
589
+ }
590
+ .errorSummary-text {
591
+ color: #8e0039;
592
+ }
593
+
594
+ /* src/NewInputComponentStandard/RadioMultipleStandard/RadioMultipleStandard.css */
595
+
596
+ /* src/NewInputComponentStandard/MultipleCheckboxesStandard/MultipleCheckboxesStandard.css */
597
+
598
+ /* src/NewInputComponentStandard/TextAreaStandard/TextAreaStandard.css */
599
+
600
+ /* src/NewInputComponentStandard/TextFieldStandard/TextFieldStandard.css */
601
+
602
+ /* src/NewTextComponentStandard/EditPreviewLinkStandard/EditPreviewLinkStandard.css */
603
+
604
+ /* src/NewTextComponentStandard/FooterStandard/FooterStandard.css */
605
+
606
+ /* src/NewTextComponentStandard/HeaderStandard/HeaderStandard.css */
607
+
608
+ /* src/NewTextComponentStandard/InfoOnlyStandard/InfoOnlyStandard.css */
609
+
610
+ /* src/NewTextComponentStandard/ModalStandard/ModalStandard.css */
611
+
612
+ /* src/NewTextComponentStandard/TextHeadlineAndBodyStandard/TextHeadlineAndBodyStandard.css */
613
+
614
+ /* src/NewTextComponentStandard/ServiceHeadlineAndBodyStandard/ServiceHeadlineAndBodyStandard.css */
615
+
616
+ /* src/NewTextComponentStandard/SkipLinkStandard/SkipLinkStandard.css */
617
+
618
+ /* src/NewTextComponentStandard/StepperButtonsStandard/StepperButtonsStandard.css */
619
+
620
+ /* src/NewTextComponentStandard/StepperStandard/StepperStandard.css */