@entur/form 7.0.35 → 7.0.37

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 (2) hide show
  1. package/dist/styles.css +248 -248
  2. package/package.json +5 -5
package/dist/styles.css CHANGED
@@ -242,58 +242,6 @@
242
242
  }
243
243
  /* DO NOT CHANGE!*/
244
244
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
245
- .eds-feedback-text {
246
- display: flex;
247
- align-items: center;
248
- margin-top: 0.25rem;
249
- }
250
- .eds-feedback-text--info {
251
- padding-left: calc(1rem + 0.125rem);
252
- }
253
- .eds-feedback-text__text {
254
- color: #181c56;
255
- }
256
- .eds-contrast .eds-feedback-text__text {
257
- color: #ffffff;
258
- }
259
-
260
- .eds-feedback-text__icon {
261
- font-size: 1.5rem;
262
- min-height: 1.5rem;
263
- min-width: 1.5rem;
264
- padding-right: 0.5rem;
265
- position: relative;
266
- top: -0.1rem;
267
- }
268
- .eds-feedback-text__icon--success {
269
- color: #1a8e60;
270
- }
271
- .eds-contrast .eds-feedback-text__icon--success {
272
- color: #5ac39a;
273
- }
274
- .eds-feedback-text__icon--error {
275
- color: #d31b1b;
276
- }
277
- .eds-contrast .eds-feedback-text__icon--error {
278
- color: #ff9494;
279
- }
280
- .eds-feedback-text__icon--info {
281
- color: #0082b9;
282
- }
283
- .eds-contrast .eds-feedback-text__icon--info {
284
- color: #64b3e7;
285
- }
286
- .eds-feedback-text__icon--warning {
287
- color: #ffca28;
288
- }
289
- .eds-feedback-text__icon--warning circle {
290
- fill: #181c56;
291
- }
292
- .eds-contrast .eds-feedback-text__icon--warning {
293
- color: #ffe082;
294
- }
295
- /* DO NOT CHANGE!*/
296
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
297
245
  .eds-checkbox__container {
298
246
  display: flex;
299
247
  align-items: center;
@@ -454,6 +402,58 @@
454
402
  stroke-dashoffset: 0;
455
403
  }
456
404
  }
405
+ /* DO NOT CHANGE!*/
406
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
407
+ .eds-feedback-text {
408
+ display: flex;
409
+ align-items: center;
410
+ margin-top: 0.25rem;
411
+ }
412
+ .eds-feedback-text--info {
413
+ padding-left: calc(1rem + 0.125rem);
414
+ }
415
+ .eds-feedback-text__text {
416
+ color: #181c56;
417
+ }
418
+ .eds-contrast .eds-feedback-text__text {
419
+ color: #ffffff;
420
+ }
421
+
422
+ .eds-feedback-text__icon {
423
+ font-size: 1.5rem;
424
+ min-height: 1.5rem;
425
+ min-width: 1.5rem;
426
+ padding-right: 0.5rem;
427
+ position: relative;
428
+ top: -0.1rem;
429
+ }
430
+ .eds-feedback-text__icon--success {
431
+ color: #1a8e60;
432
+ }
433
+ .eds-contrast .eds-feedback-text__icon--success {
434
+ color: #5ac39a;
435
+ }
436
+ .eds-feedback-text__icon--error {
437
+ color: #d31b1b;
438
+ }
439
+ .eds-contrast .eds-feedback-text__icon--error {
440
+ color: #ff9494;
441
+ }
442
+ .eds-feedback-text__icon--info {
443
+ color: #0082b9;
444
+ }
445
+ .eds-contrast .eds-feedback-text__icon--info {
446
+ color: #64b3e7;
447
+ }
448
+ .eds-feedback-text__icon--warning {
449
+ color: #ffca28;
450
+ }
451
+ .eds-feedback-text__icon--warning circle {
452
+ fill: #181c56;
453
+ }
454
+ .eds-contrast .eds-feedback-text__icon--warning {
455
+ color: #ffe082;
456
+ }
457
457
  .eds-fieldset {
458
458
  margin: 0;
459
459
  padding: 0;
@@ -461,91 +461,135 @@
461
461
  }
462
462
  /* DO NOT CHANGE!*/
463
463
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
464
- .eds-form-component--radio__container {
465
- display: flex;
466
- justify-content: center;
467
- align-items: center;
464
+ .eds-input-group {
465
+ color: inherit;
466
+ display: block;
468
467
  position: relative;
469
- cursor: pointer;
470
- height: 2rem;
471
- width: -moz-fit-content;
472
- width: fit-content;
468
+ }
469
+ .eds-input-group__label {
470
+ color: #656782;
471
+ display: flex;
472
+ font-size: 1rem;
473
+ position: absolute;
474
+ line-height: 1rem;
475
+ height: 3rem;
476
+ padding: 1rem;
477
+ padding-left: 0;
478
+ margin-left: 1rem;
479
+ top: -0.125rem;
480
+ transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out, padding 0.2s ease-in-out, line-height ease-in-out 0.2s;
473
481
  -webkit-user-select: none;
474
482
  -moz-user-select: none;
475
483
  user-select: none;
484
+ pointer-events: none;
476
485
  }
477
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
478
- border-color: #54568c;
486
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
487
+ top: 0.375rem;
488
+ font-size: 0.75rem;
489
+ line-height: 0.75rem;
490
+ height: 10px;
491
+ padding: 0;
492
+ margin-left: 1rem;
479
493
  }
480
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
481
- background-color: #54568c;
494
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
495
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
496
+ background: var(--textarea-label-background);
497
+ width: calc(
498
+ 100% - 1rem - 1rem - 4px
499
+ );
482
500
  }
483
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
484
- border-color: #8285a8;
501
+ .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
502
+ top: 0.5rem;
503
+ font-size: 0.875rem;
504
+ line-height: 1rem;
505
+ padding: 0;
506
+ margin-left: 1rem;
485
507
  }
486
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
487
- background-color: #8285a8;
508
+ .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
509
+ color: #aeb7e2;
488
510
  }
489
- .eds-form-component--radio__container input {
490
- position: absolute;
491
- opacity: 0;
492
- cursor: pointer;
493
- height: 0;
494
- width: 0;
511
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
512
+ font-size: 1.5rem;
513
+ line-height: 2.25rem;
514
+ height: 4rem;
515
+ top: -0.25rem;
495
516
  }
496
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
497
- height: 0.625rem;
498
- width: 0.625rem;
517
+ .eds-input-group__label--filled {
518
+ top: 0.375rem;
519
+ font-size: 0.75rem;
520
+ line-height: 0.75rem;
521
+ height: 10px;
522
+ padding: 0;
523
+ margin-left: 1rem;
499
524
  }
500
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
501
- outline: none;
502
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
503
- outline-offset: 0.125rem;
525
+ .eds-textarea__label .eds-input-group__label--filled {
526
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
527
+ background: var(--textarea-label-background);
528
+ width: calc(
529
+ 100% - 1rem - 1rem - 4px
530
+ );
504
531
  }
505
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
506
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
532
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
533
+ top: 0.5rem;
534
+ font-size: 0.875rem;
535
+ line-height: 1rem;
536
+ padding: 0;
537
+ margin-left: 1rem;
507
538
  }
508
- .eds-form-component--radio__container .eds-form-component--radio__radio {
509
- position: relative;
510
- height: 1.25rem;
511
- width: 1.25rem;
512
- margin-right: 1rem;
513
- background-color: #ffffff;
514
- border: 0.125rem solid #181c56;
515
- border-radius: 50%;
539
+ .eds-input-group__label-tooltip-icon {
540
+ color: #0082b9;
541
+ padding-left: 0.25rem;
542
+ padding-right: 0.25rem;
516
543
  display: flex;
517
544
  align-items: center;
518
- justify-content: center;
519
- }
520
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
521
- background-color: #181c56;
522
- border-color: #aeb7e2;
545
+ cursor: help;
546
+ font-size: 1rem;
523
547
  }
524
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
525
- background: #d1d3d3;
526
- border-color: #d1d3d3;
527
- cursor: not-allowed;
548
+
549
+ .eds-form-control-wrapper[focus-within] .eds-input-group__label {
550
+ top: 0.375rem;
551
+ font-size: 0.75rem;
552
+ line-height: 0.75rem;
553
+ height: 10px;
554
+ padding: 0;
555
+ margin-left: 1rem;
528
556
  }
529
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
530
- border-color: #d1d3d3;
557
+
558
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
559
+ top: 0.375rem;
560
+ font-size: 0.75rem;
561
+ line-height: 0.75rem;
562
+ height: 10px;
563
+ padding: 0;
564
+ margin-left: 1rem;
531
565
  }
532
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
533
- background: #d1d3d3;
534
- border-color: #d1d3d3;
566
+ .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
567
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
568
+ background: var(--textarea-label-background);
569
+ width: calc(
570
+ 100% - 1rem - 1rem - 4px
571
+ );
535
572
  }
536
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
537
- color: #656782;
573
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
574
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
575
+ background: var(--textarea-label-background);
576
+ width: calc(
577
+ 100% - 1rem - 1rem - 4px
578
+ );
538
579
  }
539
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
540
- display: block;
541
- width: 0;
542
- height: 0;
543
- border-radius: 50%;
544
- background-color: #181c56;
545
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
580
+ .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
581
+ top: 0.5rem;
582
+ font-size: 0.875rem;
583
+ line-height: 1rem;
584
+ padding: 0;
585
+ margin-left: 1rem;
546
586
  }
547
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
548
- background-color: #aeb7e2;
587
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
588
+ top: 0.5rem;
589
+ font-size: 0.875rem;
590
+ line-height: 1rem;
591
+ padding: 0;
592
+ margin-left: 1rem;
549
593
  }
550
594
  /* DO NOT CHANGE!*/
551
595
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -668,6 +712,94 @@
668
712
  }
669
713
  /* DO NOT CHANGE!*/
670
714
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
715
+ .eds-form-component--radio__container {
716
+ display: flex;
717
+ justify-content: center;
718
+ align-items: center;
719
+ position: relative;
720
+ cursor: pointer;
721
+ height: 2rem;
722
+ width: -moz-fit-content;
723
+ width: fit-content;
724
+ -webkit-user-select: none;
725
+ -moz-user-select: none;
726
+ user-select: none;
727
+ }
728
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
729
+ border-color: #54568c;
730
+ }
731
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
732
+ background-color: #54568c;
733
+ }
734
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
735
+ border-color: #8285a8;
736
+ }
737
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
738
+ background-color: #8285a8;
739
+ }
740
+ .eds-form-component--radio__container input {
741
+ position: absolute;
742
+ opacity: 0;
743
+ cursor: pointer;
744
+ height: 0;
745
+ width: 0;
746
+ }
747
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
748
+ height: 0.625rem;
749
+ width: 0.625rem;
750
+ }
751
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
752
+ outline: none;
753
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
754
+ outline-offset: 0.125rem;
755
+ }
756
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
757
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
758
+ }
759
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
760
+ position: relative;
761
+ height: 1.25rem;
762
+ width: 1.25rem;
763
+ margin-right: 1rem;
764
+ background-color: #ffffff;
765
+ border: 0.125rem solid #181c56;
766
+ border-radius: 50%;
767
+ display: flex;
768
+ align-items: center;
769
+ justify-content: center;
770
+ }
771
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
772
+ background-color: #181c56;
773
+ border-color: #aeb7e2;
774
+ }
775
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
776
+ background: #d1d3d3;
777
+ border-color: #d1d3d3;
778
+ cursor: not-allowed;
779
+ }
780
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
781
+ border-color: #d1d3d3;
782
+ }
783
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
784
+ background: #d1d3d3;
785
+ border-color: #d1d3d3;
786
+ }
787
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
788
+ color: #656782;
789
+ }
790
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
791
+ display: block;
792
+ width: 0;
793
+ height: 0;
794
+ border-radius: 50%;
795
+ background-color: #181c56;
796
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
797
+ }
798
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
799
+ background-color: #aeb7e2;
800
+ }
801
+ /* DO NOT CHANGE!*/
802
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
671
803
  .eds-input-panel[focus-within] .eds-input-panel__container {
672
804
  border-color: #181c56;
673
805
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
@@ -830,138 +962,6 @@ input:disabled + .eds-input-panel__container {
830
962
  }
831
963
  /* DO NOT CHANGE!*/
832
964
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
833
- .eds-input-group {
834
- color: inherit;
835
- display: block;
836
- position: relative;
837
- }
838
- .eds-input-group__label {
839
- color: #656782;
840
- display: flex;
841
- font-size: 1rem;
842
- position: absolute;
843
- line-height: 1rem;
844
- height: 3rem;
845
- padding: 1rem;
846
- padding-left: 0;
847
- margin-left: 1rem;
848
- top: -0.125rem;
849
- transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out, padding 0.2s ease-in-out, line-height ease-in-out 0.2s;
850
- -webkit-user-select: none;
851
- -moz-user-select: none;
852
- user-select: none;
853
- pointer-events: none;
854
- }
855
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
856
- top: 0.375rem;
857
- font-size: 0.75rem;
858
- line-height: 0.75rem;
859
- height: 10px;
860
- padding: 0;
861
- margin-left: 1rem;
862
- }
863
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
864
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
865
- background: var(--textarea-label-background);
866
- width: calc(
867
- 100% - 1rem - 1rem - 4px
868
- );
869
- }
870
- .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
871
- top: 0.5rem;
872
- font-size: 0.875rem;
873
- line-height: 1rem;
874
- padding: 0;
875
- margin-left: 1rem;
876
- }
877
- .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
878
- color: #aeb7e2;
879
- }
880
- .eds-form-control-wrapper--size-large .eds-input-group__label {
881
- font-size: 1.5rem;
882
- line-height: 2.25rem;
883
- height: 4rem;
884
- top: -0.25rem;
885
- }
886
- .eds-input-group__label--filled {
887
- top: 0.375rem;
888
- font-size: 0.75rem;
889
- line-height: 0.75rem;
890
- height: 10px;
891
- padding: 0;
892
- margin-left: 1rem;
893
- }
894
- .eds-textarea__label .eds-input-group__label--filled {
895
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
896
- background: var(--textarea-label-background);
897
- width: calc(
898
- 100% - 1rem - 1rem - 4px
899
- );
900
- }
901
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
902
- top: 0.5rem;
903
- font-size: 0.875rem;
904
- line-height: 1rem;
905
- padding: 0;
906
- margin-left: 1rem;
907
- }
908
- .eds-input-group__label-tooltip-icon {
909
- color: #0082b9;
910
- padding-left: 0.25rem;
911
- padding-right: 0.25rem;
912
- display: flex;
913
- align-items: center;
914
- cursor: help;
915
- font-size: 1rem;
916
- }
917
-
918
- .eds-form-control-wrapper[focus-within] .eds-input-group__label {
919
- top: 0.375rem;
920
- font-size: 0.75rem;
921
- line-height: 0.75rem;
922
- height: 10px;
923
- padding: 0;
924
- margin-left: 1rem;
925
- }
926
-
927
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
928
- top: 0.375rem;
929
- font-size: 0.75rem;
930
- line-height: 0.75rem;
931
- height: 10px;
932
- padding: 0;
933
- margin-left: 1rem;
934
- }
935
- .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
936
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
937
- background: var(--textarea-label-background);
938
- width: calc(
939
- 100% - 1rem - 1rem - 4px
940
- );
941
- }
942
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
943
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
944
- background: var(--textarea-label-background);
945
- width: calc(
946
- 100% - 1rem - 1rem - 4px
947
- );
948
- }
949
- .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
950
- top: 0.5rem;
951
- font-size: 0.875rem;
952
- line-height: 1rem;
953
- padding: 0;
954
- margin-left: 1rem;
955
- }
956
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
957
- top: 0.5rem;
958
- font-size: 0.875rem;
959
- line-height: 1rem;
960
- padding: 0;
961
- margin-left: 1rem;
962
- }
963
- /* DO NOT CHANGE!*/
964
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
965
965
  textarea.eds-form-control.eds-textarea {
966
966
  min-height: 7.75rem;
967
967
  resize: vertical;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "7.0.35",
3
+ "version": "7.0.37",
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": "^6.14.0",
30
+ "@entur/icons": "^6.15.0",
31
31
  "@entur/tokens": "^3.12.0",
32
- "@entur/tooltip": "^2.6.44",
33
- "@entur/typography": "^1.8.22",
32
+ "@entur/tooltip": "^2.6.46",
33
+ "@entur/typography": "^1.8.23",
34
34
  "@entur/utils": "^0.10.0",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "883677c25c50baf66df6f90c46759d186147921c"
37
+ "gitHead": "9e39bec18ebcbc0ea7b8c07239646eb766c8e23a"
38
38
  }