@entur/form 5.3.2 → 5.3.5

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/dist/styles.css CHANGED
@@ -2,15 +2,6 @@
2
2
  --eds-form: 1;
3
3
  }/* DO NOT CHANGE!*/
4
4
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
- .eds-fieldset {
6
- margin: 0;
7
- padding: 0;
8
- border: 0;
9
- }
10
- .eds-fieldset .eds-legend {
11
- margin: 0 0 0.5rem;
12
- }/* DO NOT CHANGE!*/
13
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
14
5
  .eds-feedback-text {
15
6
  display: flex;
16
7
  align-items: center;
@@ -52,100 +43,18 @@
52
43
  .eds-contrast .eds-feedback-text__icon--info {
53
44
  color: #64b3e7;
54
45
  }
55
- .eds-feedback-text__icon--warning {
56
- color: #0082b9;
57
- }
58
- .eds-contrast .eds-feedback-text__icon--warning {
59
- color: #64b3e7;
60
- }/* DO NOT CHANGE!*/
61
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
62
- .eds-form-component--radio__container {
63
- display: flex;
64
- justify-content: center;
65
- align-items: center;
66
- position: relative;
67
- cursor: pointer;
68
- height: 2rem;
69
- width: -webkit-fit-content;
70
- width: -moz-fit-content;
71
- width: fit-content;
72
- -webkit-user-select: none;
73
- -moz-user-select: none;
74
- -ms-user-select: none;
75
- user-select: none;
76
- }
77
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
78
- border-color: #54568c;
79
- }
80
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
81
- background-color: #54568c;
82
- }
83
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
84
- border-color: #8285a8;
85
- }
86
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
87
- background-color: #8285a8;
88
- }
89
- .eds-form-component--radio__container input {
90
- position: absolute;
91
- opacity: 0;
92
- cursor: pointer;
93
- height: 0;
94
- width: 0;
95
- }
96
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
97
- height: 0.625rem;
98
- width: 0.625rem;
99
- }
100
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
101
- outline: none;
102
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
103
- outline-offset: 0.125rem;
104
- }
105
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
106
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
107
- }
108
- .eds-form-component--radio__container .eds-form-component--radio__radio {
109
- position: relative;
110
- height: 1.25rem;
111
- width: 1.25rem;
112
- margin-right: 1rem;
113
- background-color: #ffffff;
114
- border: 0.125rem solid #181c56;
115
- border-radius: 50%;
116
- display: flex;
117
- align-items: center;
118
- justify-content: center;
119
- }
120
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
121
- background-color: #181c56;
122
- border-color: #aeb7e2;
46
+ .eds-feedback-text__icon--warning.eds-icon__ValidationExclamationIcon {
47
+ color: #ffca28;
123
48
  }
124
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
125
- background: #d1d3d3;
126
- border-color: #d1d3d3;
127
- cursor: not-allowed;
128
- }
129
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
130
- border-color: #d1d3d3;
131
- }
132
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
133
- background: #d1d3d3;
134
- border-color: #d1d3d3;
135
- }
136
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
137
- color: #656782;
49
+ .eds-feedback-text__icon--warning.eds-icon__ValidationExclamationIcon circle {
50
+ color: #181c56;
51
+ fill-opacity: 1;
138
52
  }
139
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
140
- display: block;
141
- width: 0;
142
- height: 0;
143
- border-radius: 50%;
144
- background-color: #181c56;
145
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
53
+ .eds-contrast .eds-feedback-text__icon--warning.eds-icon__ValidationExclamationIcon {
54
+ color: #ffe082;
146
55
  }
147
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
148
- background-color: #aeb7e2;
56
+ .eds-contrast .eds-feedback-text__icon--warning.eds-icon__ValidationExclamationIcon circle {
57
+ fill-opacity: 0;
149
58
  }/* DO NOT CHANGE!*/
150
59
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
151
60
  .eds-checkbox__container {
@@ -412,6 +321,252 @@
412
321
  margin-left: 1rem;
413
322
  }/* DO NOT CHANGE!*/
414
323
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
324
+ textarea.eds-form-control.eds-textarea {
325
+ min-height: 7.75rem;
326
+ resize: vertical;
327
+ line-height: 1.5rem;
328
+ }/* DO NOT CHANGE!*/
329
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
330
+ .eds-fieldset {
331
+ margin: 0;
332
+ padding: 0;
333
+ border: 0;
334
+ }
335
+ .eds-fieldset .eds-legend {
336
+ margin: 0 0 0.5rem;
337
+ }/* DO NOT CHANGE!*/
338
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
339
+ .eds-form-component--radio__container {
340
+ display: flex;
341
+ justify-content: center;
342
+ align-items: center;
343
+ position: relative;
344
+ cursor: pointer;
345
+ height: 2rem;
346
+ width: -webkit-fit-content;
347
+ width: -moz-fit-content;
348
+ width: fit-content;
349
+ -webkit-user-select: none;
350
+ -moz-user-select: none;
351
+ -ms-user-select: none;
352
+ user-select: none;
353
+ }
354
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
355
+ border-color: #54568c;
356
+ }
357
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
358
+ background-color: #54568c;
359
+ }
360
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
361
+ border-color: #8285a8;
362
+ }
363
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
364
+ background-color: #8285a8;
365
+ }
366
+ .eds-form-component--radio__container input {
367
+ position: absolute;
368
+ opacity: 0;
369
+ cursor: pointer;
370
+ height: 0;
371
+ width: 0;
372
+ }
373
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
374
+ height: 0.625rem;
375
+ width: 0.625rem;
376
+ }
377
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
378
+ outline: none;
379
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
380
+ outline-offset: 0.125rem;
381
+ }
382
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
383
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
384
+ }
385
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
386
+ position: relative;
387
+ height: 1.25rem;
388
+ width: 1.25rem;
389
+ margin-right: 1rem;
390
+ background-color: #ffffff;
391
+ border: 0.125rem solid #181c56;
392
+ border-radius: 50%;
393
+ display: flex;
394
+ align-items: center;
395
+ justify-content: center;
396
+ }
397
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
398
+ background-color: #181c56;
399
+ border-color: #aeb7e2;
400
+ }
401
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
402
+ background: #d1d3d3;
403
+ border-color: #d1d3d3;
404
+ cursor: not-allowed;
405
+ }
406
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
407
+ border-color: #d1d3d3;
408
+ }
409
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
410
+ background: #d1d3d3;
411
+ border-color: #d1d3d3;
412
+ }
413
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
414
+ color: #656782;
415
+ }
416
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
417
+ display: block;
418
+ width: 0;
419
+ height: 0;
420
+ border-radius: 50%;
421
+ background-color: #181c56;
422
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
423
+ }
424
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
425
+ background-color: #aeb7e2;
426
+ }/* DO NOT CHANGE!*/
427
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
428
+ .eds-radio-panel__wrapper[focus-within] .eds-radio-panel__container {
429
+ border-color: #181c56;
430
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
431
+ }
432
+ .eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
433
+ border-color: #181c56;
434
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
435
+ }
436
+ .eds-contrast .eds-radio-panel__wrapper[focus-within] .eds-radio-panel__container {
437
+ border-color: #ffffff;
438
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
439
+ }
440
+ .eds-contrast .eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
441
+ border-color: #ffffff;
442
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
443
+ }
444
+ .eds-radio-panel__wrapper input {
445
+ position: absolute;
446
+ opacity: 0;
447
+ cursor: pointer;
448
+ height: 0;
449
+ width: 0;
450
+ }
451
+ .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
452
+ border-color: #181c56;
453
+ background: #f5f5f8;
454
+ }
455
+ .eds-contrast .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
456
+ border-color: #aeb7e2;
457
+ background: #393d79;
458
+ }
459
+ .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check {
460
+ background-color: #181c56;
461
+ border-color: #181c56;
462
+ }
463
+ .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon {
464
+ visibility: visible;
465
+ }
466
+ .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon__path {
467
+ stroke: #5ac39a;
468
+ -webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
469
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
470
+ }
471
+ .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled {
472
+ opacity: 0.5;
473
+ }
474
+ .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled .eds-checkbox-icon__path {
475
+ opacity: 0.5;
476
+ }
477
+ .eds-radio-panel__container {
478
+ background: #ffffff;
479
+ border: 0.125rem solid #d1d3d3;
480
+ border-radius: 0.25rem;
481
+ display: flex;
482
+ flex-direction: column;
483
+ justify-content: flex-start;
484
+ min-width: 20rem;
485
+ position: relative;
486
+ padding: 1rem;
487
+ -webkit-user-select: none;
488
+ -moz-user-select: none;
489
+ -ms-user-select: none;
490
+ user-select: none;
491
+ width: -webkit-fit-content;
492
+ width: -moz-fit-content;
493
+ width: fit-content;
494
+ }
495
+ .eds-contrast .eds-radio-panel__container {
496
+ background: #181c56;
497
+ border-color: #54568c;
498
+ }
499
+ .eds-radio-panel__title-wrapper {
500
+ display: flex;
501
+ justify-content: space-between;
502
+ align-items: center;
503
+ }
504
+ .eds-radio-panel__label {
505
+ display: flex;
506
+ justify-content: center;
507
+ }
508
+ .eds-radio-panel__check {
509
+ height: 2rem;
510
+ width: 2rem;
511
+ margin-left: 1rem;
512
+ border-radius: 50%;
513
+ border: 0.125rem solid #e9e9e9;
514
+ display: flex;
515
+ align-items: center;
516
+ justify-content: center;
517
+ background: #ffffff;
518
+ transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
519
+ }
520
+ .eds-contrast .eds-radio-panel__check {
521
+ background: #181c56;
522
+ border-color: #54568c;
523
+ }
524
+ .eds-radio-panel__additional-content {
525
+ margin-top: 0.25rem;
526
+ word-wrap: break-word;
527
+ }
528
+ .eds-radio-panel--medium .eds-radio-panel__title {
529
+ font-size: 1rem;
530
+ font-weight: 500;
531
+ }
532
+ .eds-radio-panel--medium.eds-radio-panel__container {
533
+ padding-bottom: 1rem;
534
+ min-height: 3.75rem;
535
+ }
536
+ .eds-radio-panel--large.eds-radio-panel__container {
537
+ min-height: 6.5rem;
538
+ }
539
+ .eds-radio-panel--large .eds-radio-panel__title-wrapper {
540
+ height: 2rem;
541
+ }
542
+ .eds-radio-panel--large .eds-radio-panel__title {
543
+ font-size: 1.25rem;
544
+ font-weight: 500;
545
+ line-height: 1.875rem;
546
+ }
547
+ .eds-radio-panel--disabled {
548
+ background: #f3f3f3;
549
+ border-color: #f3f3f3;
550
+ color: #656782;
551
+ }
552
+ .eds-contrast .eds-radio-panel--disabled {
553
+ background: #181c56;
554
+ border-style: dashed;
555
+ border-color: #54568c;
556
+ color: #babbcf;
557
+ }
558
+
559
+ .eds-checkbox-icon {
560
+ width: 1.5em;
561
+ height: 1.5em;
562
+ }
563
+ .eds-checkbox-icon__path {
564
+ transform-origin: 50% 50%;
565
+ stroke-dasharray: 48;
566
+ stroke-dashoffset: 48;
567
+ stroke-width: 0.375rem;
568
+ }/* DO NOT CHANGE!*/
569
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
415
570
  .eds-form-control-wrapper {
416
571
  --border-color: #181c56;
417
572
  --border-color-hover: #aeb7e2;
@@ -668,154 +823,6 @@
668
823
  margin-left: 0;
669
824
  }/* DO NOT CHANGE!*/
670
825
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
671
- .eds-radio-panel__wrapper[focus-within] .eds-radio-panel__container {
672
- border-color: #181c56;
673
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
674
- }
675
- .eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
676
- border-color: #181c56;
677
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
678
- }
679
- .eds-contrast .eds-radio-panel__wrapper[focus-within] .eds-radio-panel__container {
680
- border-color: #ffffff;
681
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
682
- }
683
- .eds-contrast .eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
684
- border-color: #ffffff;
685
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
686
- }
687
- .eds-radio-panel__wrapper input {
688
- position: absolute;
689
- opacity: 0;
690
- cursor: pointer;
691
- height: 0;
692
- width: 0;
693
- }
694
- .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
695
- border-color: #181c56;
696
- background: #f5f5f8;
697
- }
698
- .eds-contrast .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
699
- border-color: #aeb7e2;
700
- background: #393d79;
701
- }
702
- .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check {
703
- background-color: #181c56;
704
- border-color: #181c56;
705
- }
706
- .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon {
707
- visibility: visible;
708
- }
709
- .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon__path {
710
- stroke: #5ac39a;
711
- -webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
712
- animation: stroke ease-in-out 0.2s 0.1s forwards;
713
- }
714
- .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled {
715
- opacity: 0.5;
716
- }
717
- .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled .eds-checkbox-icon__path {
718
- opacity: 0.5;
719
- }
720
- .eds-radio-panel__container {
721
- background: #ffffff;
722
- border: 0.125rem solid #d1d3d3;
723
- border-radius: 0.25rem;
724
- display: flex;
725
- flex-direction: column;
726
- justify-content: flex-start;
727
- min-width: 20rem;
728
- position: relative;
729
- padding: 1rem;
730
- -webkit-user-select: none;
731
- -moz-user-select: none;
732
- -ms-user-select: none;
733
- user-select: none;
734
- width: -webkit-fit-content;
735
- width: -moz-fit-content;
736
- width: fit-content;
737
- }
738
- .eds-contrast .eds-radio-panel__container {
739
- background: #181c56;
740
- border-color: #54568c;
741
- }
742
- .eds-radio-panel__title-wrapper {
743
- display: flex;
744
- justify-content: space-between;
745
- align-items: center;
746
- }
747
- .eds-radio-panel__label {
748
- display: flex;
749
- justify-content: center;
750
- }
751
- .eds-radio-panel__check {
752
- height: 2rem;
753
- width: 2rem;
754
- margin-left: 1rem;
755
- border-radius: 50%;
756
- border: 0.125rem solid #e9e9e9;
757
- display: flex;
758
- align-items: center;
759
- justify-content: center;
760
- background: #ffffff;
761
- transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
762
- }
763
- .eds-contrast .eds-radio-panel__check {
764
- background: #181c56;
765
- border-color: #54568c;
766
- }
767
- .eds-radio-panel__additional-content {
768
- margin-top: 0.25rem;
769
- word-wrap: break-word;
770
- }
771
- .eds-radio-panel--medium .eds-radio-panel__title {
772
- font-size: 1rem;
773
- font-weight: 500;
774
- }
775
- .eds-radio-panel--medium.eds-radio-panel__container {
776
- padding-bottom: 1rem;
777
- min-height: 3.75rem;
778
- }
779
- .eds-radio-panel--large.eds-radio-panel__container {
780
- min-height: 6.5rem;
781
- }
782
- .eds-radio-panel--large .eds-radio-panel__title-wrapper {
783
- height: 2rem;
784
- }
785
- .eds-radio-panel--large .eds-radio-panel__title {
786
- font-size: 1.25rem;
787
- font-weight: 500;
788
- line-height: 1.875rem;
789
- }
790
- .eds-radio-panel--disabled {
791
- background: #f3f3f3;
792
- border-color: #f3f3f3;
793
- color: #656782;
794
- }
795
- .eds-contrast .eds-radio-panel--disabled {
796
- background: #181c56;
797
- border-style: dashed;
798
- border-color: #54568c;
799
- color: #babbcf;
800
- }
801
-
802
- .eds-checkbox-icon {
803
- width: 1.5em;
804
- height: 1.5em;
805
- }
806
- .eds-checkbox-icon__path {
807
- transform-origin: 50% 50%;
808
- stroke-dasharray: 48;
809
- stroke-dashoffset: 48;
810
- stroke-width: 0.375rem;
811
- }/* DO NOT CHANGE!*/
812
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
813
- textarea.eds-form-control.eds-textarea {
814
- min-height: 7.75rem;
815
- resize: vertical;
816
- line-height: 1.5rem;
817
- }/* DO NOT CHANGE!*/
818
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
819
826
  .eds-textfield__clear-button {
820
827
  background: none;
821
828
  border: none;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "5.3.2",
3
+ "version": "5.3.5",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/form.esm.js",
@@ -27,12 +27,12 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/icons": "^4.1.0",
31
- "@entur/tokens": "^3.3.1",
32
- "@entur/tooltip": "^2.5.5",
33
- "@entur/typography": "^1.6.11",
30
+ "@entur/icons": "^4.1.2",
31
+ "@entur/tokens": "^3.3.2",
32
+ "@entur/tooltip": "^2.5.8",
33
+ "@entur/typography": "^1.6.13",
34
34
  "@entur/utils": "^0.4.3",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "c10b4f0f9ecda0126bc916b80ca694cf8d58e399"
37
+ "gitHead": "9e25b2a4a4ab659dc368f51ad0e0b74bee26e1d0"
38
38
  }