@entur/form 7.0.27-alpha.0 → 7.0.27

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 +261 -261
  2. package/package.json +6 -6
package/dist/styles.css CHANGED
@@ -242,60 +242,134 @@
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 {
245
+ .eds-input-group {
246
+ color: inherit;
247
+ display: block;
248
+ position: relative;
249
+ }
250
+ .eds-input-group__label {
251
+ color: #656782;
246
252
  display: flex;
247
- align-items: center;
248
- margin-top: 0.25rem;
253
+ font-size: 1rem;
254
+ position: absolute;
255
+ line-height: 1rem;
256
+ height: 3rem;
257
+ padding: 1rem;
258
+ padding-left: 0;
259
+ margin-left: 1rem;
260
+ top: -0.125rem;
261
+ 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;
262
+ -webkit-user-select: none;
263
+ -moz-user-select: none;
264
+ user-select: none;
265
+ pointer-events: none;
249
266
  }
250
- .eds-feedback-text--info {
251
- padding-left: calc(1rem + 0.125rem);
267
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
268
+ top: 0.375rem;
269
+ font-size: 0.75rem;
270
+ line-height: 0.75rem;
271
+ height: 10px;
272
+ padding: 0;
273
+ margin-left: 1rem;
252
274
  }
253
- .eds-feedback-text__text {
254
- color: #181c56;
275
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
276
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
277
+ background: var(--textarea-label-background);
278
+ width: calc(
279
+ 100% - 1rem - 1rem - 4px
280
+ );
255
281
  }
256
- .eds-contrast .eds-feedback-text__text {
257
- color: #ffffff;
282
+ .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
283
+ top: 0.5rem;
284
+ font-size: 0.875rem;
285
+ line-height: 1rem;
286
+ padding: 0;
287
+ margin-left: 1rem;
258
288
  }
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;
289
+ .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
290
+ color: #aeb7e2;
267
291
  }
268
- .eds-feedback-text__icon--success {
269
- color: #1a8e60;
292
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
293
+ font-size: 1.5rem;
294
+ line-height: 2.25rem;
295
+ height: 4rem;
270
296
  }
271
- .eds-contrast .eds-feedback-text__icon--success {
272
- color: #5ac39a;
297
+ .eds-input-group__label--filled {
298
+ top: 0.375rem;
299
+ font-size: 0.75rem;
300
+ line-height: 0.75rem;
301
+ height: 10px;
302
+ padding: 0;
303
+ margin-left: 1rem;
273
304
  }
274
- .eds-feedback-text__icon--error {
275
- color: #d31b1b;
305
+ .eds-textarea__label .eds-input-group__label--filled {
306
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
307
+ background: var(--textarea-label-background);
308
+ width: calc(
309
+ 100% - 1rem - 1rem - 4px
310
+ );
276
311
  }
277
- .eds-contrast .eds-feedback-text__icon--error {
278
- color: #ff9494;
312
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
313
+ top: 0.5rem;
314
+ font-size: 0.875rem;
315
+ line-height: 1rem;
316
+ padding: 0;
317
+ margin-left: 1rem;
279
318
  }
280
- .eds-feedback-text__icon--info {
319
+ .eds-input-group__label-tooltip-icon {
281
320
  color: #0082b9;
321
+ padding-left: 0.25rem;
322
+ padding-right: 0.25rem;
323
+ display: flex;
324
+ align-items: center;
325
+ cursor: help;
326
+ font-size: 1rem;
282
327
  }
283
- .eds-contrast .eds-feedback-text__icon--info {
284
- color: #64b3e7;
328
+
329
+ .eds-form-control-wrapper[focus-within] .eds-input-group__label {
330
+ top: 0.375rem;
331
+ font-size: 0.75rem;
332
+ line-height: 0.75rem;
333
+ height: 10px;
334
+ padding: 0;
335
+ margin-left: 1rem;
285
336
  }
286
- .eds-feedback-text__icon--warning {
287
- color: #ffca28;
337
+
338
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
339
+ top: 0.375rem;
340
+ font-size: 0.75rem;
341
+ line-height: 0.75rem;
342
+ height: 10px;
343
+ padding: 0;
344
+ margin-left: 1rem;
288
345
  }
289
- .eds-feedback-text__icon--warning circle {
290
- fill: #181c56;
346
+ .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
347
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
348
+ background: var(--textarea-label-background);
349
+ width: calc(
350
+ 100% - 1rem - 1rem - 4px
351
+ );
291
352
  }
292
- .eds-contrast .eds-feedback-text__icon--warning {
293
- color: #ffe082;
353
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
354
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
355
+ background: var(--textarea-label-background);
356
+ width: calc(
357
+ 100% - 1rem - 1rem - 4px
358
+ );
294
359
  }
295
- .eds-fieldset {
296
- margin: 0;
360
+ .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
361
+ top: 0.5rem;
362
+ font-size: 0.875rem;
363
+ line-height: 1rem;
297
364
  padding: 0;
298
- border: 0;
365
+ margin-left: 1rem;
366
+ }
367
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
368
+ top: 0.5rem;
369
+ font-size: 0.875rem;
370
+ line-height: 1rem;
371
+ padding: 0;
372
+ margin-left: 1rem;
299
373
  }
300
374
  /* DO NOT CHANGE!*/
301
375
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -547,136 +621,181 @@
547
621
  .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
548
622
  background-color: #aeb7e2;
549
623
  }
624
+ .eds-fieldset {
625
+ margin: 0;
626
+ padding: 0;
627
+ border: 0;
628
+ }
550
629
  /* DO NOT CHANGE!*/
551
630
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
552
- .eds-input-group {
553
- color: inherit;
554
- display: block;
555
- position: relative;
556
- }
557
- .eds-input-group__label {
558
- color: #656782;
559
- display: flex;
560
- font-size: 1rem;
561
- position: absolute;
562
- line-height: 1rem;
563
- height: 3rem;
564
- padding: 1rem;
565
- padding-left: 0;
566
- margin-left: 1rem;
567
- top: -0.125rem;
568
- 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;
631
+ .eds-switch {
632
+ cursor: pointer;
569
633
  -webkit-user-select: none;
570
634
  -moz-user-select: none;
571
635
  user-select: none;
636
+ padding: 0.5rem 0;
637
+ width: -moz-fit-content;
638
+ width: fit-content;
639
+ }
640
+ .eds-switch input {
641
+ opacity: 0;
572
642
  pointer-events: none;
643
+ position: absolute;
573
644
  }
574
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
575
- top: 0.375rem;
576
- font-size: 0.75rem;
577
- line-height: 0.75rem;
578
- height: 10px;
579
- padding: 0;
580
- margin-left: 1rem;
645
+ .eds-switch--right {
646
+ display: flex;
647
+ flex-direction: row;
648
+ align-items: center;
581
649
  }
582
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
583
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
584
- background: var(--textarea-label-background);
585
- width: calc(
586
- 100% - 1rem - 1rem - 4px
587
- );
650
+ .eds-switch--bottom {
651
+ display: flex;
652
+ flex-direction: column;
653
+ align-items: center;
588
654
  }
589
- .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
590
- top: 0.5rem;
591
- font-size: 0.875rem;
592
- line-height: 1rem;
593
- padding: 0;
594
- margin-left: 1rem;
655
+ .eds-switch__circle {
656
+ border-radius: 50%;
657
+ height: 1.25rem;
658
+ width: 1.25rem;
659
+ content: "";
660
+ display: flex;
661
+ align-items: center;
662
+ justify-content: center;
663
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
664
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
665
+ background-color: #ffffff;
666
+ top: 0.125rem;
667
+ left: 0.125rem;
668
+ position: relative;
595
669
  }
596
- .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
597
- color: #aeb7e2;
670
+ .eds-switch__switch--large .eds-switch__circle {
671
+ height: 1.75rem;
672
+ width: 1.75rem;
598
673
  }
599
- .eds-form-control-wrapper--size-large .eds-input-group__label {
600
- font-size: 1.5rem;
601
- line-height: 2.25rem;
602
- height: 4rem;
674
+ .eds-contrast .eds-switch__circle {
675
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
603
676
  }
604
- .eds-input-group__label--filled {
605
- top: 0.375rem;
606
- font-size: 0.75rem;
607
- line-height: 0.75rem;
608
- height: 10px;
609
- padding: 0;
610
- margin-left: 1rem;
677
+ .eds-switch__switch {
678
+ position: relative;
679
+ background-color: #949494;
680
+ content: "";
681
+ display: block;
682
+ transition: background-color 0.1s ease-in-out;
683
+ height: 1.5rem;
684
+ width: 3rem;
685
+ border-radius: 1.5rem;
686
+ box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
611
687
  }
612
- .eds-textarea__label .eds-input-group__label--filled {
613
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
614
- background: var(--textarea-label-background);
615
- width: calc(
616
- 100% - 1rem - 1rem - 4px
617
- );
688
+ .eds-contrast .eds-switch__switch {
689
+ background-color: #8285a8;
618
690
  }
619
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
620
- top: 0.5rem;
691
+ .eds-switch--right .eds-switch__switch {
692
+ margin-right: 0.75rem;
693
+ }
694
+ .eds-switch__switch svg g,
695
+ .eds-switch__switch path {
696
+ fill: #646464;
697
+ transition: fill ease-in-out 0.1s;
698
+ }
699
+ .eds-contrast .eds-switch__switch svg g,
700
+ .eds-contrast .eds-switch__switch path {
701
+ fill: #181c56;
702
+ }
703
+ :checked + .eds-switch__switch {
704
+ background-color: var(--eds-switch-color);
705
+ }
706
+ :checked + .eds-switch__switch .eds-switch__circle {
707
+ left: 1.625rem;
708
+ }
709
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
710
+ :checked + .eds-switch__switch .eds-switch__circle path {
711
+ fill: var(--eds-switch-color);
712
+ }
713
+ .eds-contrast :checked + .eds-switch__switch {
714
+ background-color: var(--eds-switch-contrast-color);
715
+ }
716
+ :focus + .eds-switch__switch {
717
+ outline: none;
718
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
719
+ outline-offset: 0.125rem;
720
+ }
721
+ .eds-contrast :focus + .eds-switch__switch {
722
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
723
+ }
724
+ .eds-switch__switch--large {
725
+ width: 3.75rem;
726
+ height: 2rem;
727
+ border-radius: 3.75rem;
728
+ }
729
+ :checked + .eds-switch__switch--large .eds-switch__circle {
730
+ left: 1.875rem;
731
+ }
732
+ .eds-switch__switch--large svg {
733
+ position: relative;
734
+ right: 0.05rem;
735
+ }
736
+ .eds-switch__label--large--right {
737
+ font-size: 1rem;
738
+ }
739
+ .eds-switch__label--large--bottom {
621
740
  font-size: 0.875rem;
622
- line-height: 1rem;
623
- padding: 0;
624
- margin-left: 1rem;
625
741
  }
626
- .eds-input-group__label-tooltip-icon {
627
- color: #0082b9;
628
- padding-left: 0.25rem;
629
- padding-right: 0.25rem;
742
+ .eds-switch__label--medium--right {
743
+ font-size: 0.875rem;
744
+ }
745
+ .eds-switch__label--medium--bottom {
746
+ font-size: 0.75rem;
747
+ }
748
+ /* DO NOT CHANGE!*/
749
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
750
+ .eds-feedback-text {
630
751
  display: flex;
631
752
  align-items: center;
632
- cursor: help;
633
- font-size: 1rem;
753
+ margin-top: 0.25rem;
634
754
  }
635
-
636
- .eds-form-control-wrapper[focus-within] .eds-input-group__label {
637
- top: 0.375rem;
638
- font-size: 0.75rem;
639
- line-height: 0.75rem;
640
- height: 10px;
641
- padding: 0;
642
- margin-left: 1rem;
755
+ .eds-feedback-text--info {
756
+ padding-left: calc(1rem + 0.125rem);
757
+ }
758
+ .eds-feedback-text__text {
759
+ color: #181c56;
760
+ }
761
+ .eds-contrast .eds-feedback-text__text {
762
+ color: #ffffff;
643
763
  }
644
764
 
645
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
646
- top: 0.375rem;
647
- font-size: 0.75rem;
648
- line-height: 0.75rem;
649
- height: 10px;
650
- padding: 0;
651
- margin-left: 1rem;
765
+ .eds-feedback-text__icon {
766
+ font-size: 1.5rem;
767
+ min-height: 1.5rem;
768
+ min-width: 1.5rem;
769
+ padding-right: 0.5rem;
770
+ position: relative;
771
+ top: -0.1rem;
652
772
  }
653
- .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
654
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
655
- background: var(--textarea-label-background);
656
- width: calc(
657
- 100% - 1rem - 1rem - 4px
658
- );
773
+ .eds-feedback-text__icon--success {
774
+ color: #1a8e60;
659
775
  }
660
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
661
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
662
- background: var(--textarea-label-background);
663
- width: calc(
664
- 100% - 1rem - 1rem - 4px
665
- );
776
+ .eds-contrast .eds-feedback-text__icon--success {
777
+ color: #5ac39a;
666
778
  }
667
- .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
668
- top: 0.5rem;
669
- font-size: 0.875rem;
670
- line-height: 1rem;
671
- padding: 0;
672
- margin-left: 1rem;
779
+ .eds-feedback-text__icon--error {
780
+ color: #d31b1b;
673
781
  }
674
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
675
- top: 0.5rem;
676
- font-size: 0.875rem;
677
- line-height: 1rem;
678
- padding: 0;
679
- margin-left: 1rem;
782
+ .eds-contrast .eds-feedback-text__icon--error {
783
+ color: #ff9494;
784
+ }
785
+ .eds-feedback-text__icon--info {
786
+ color: #0082b9;
787
+ }
788
+ .eds-contrast .eds-feedback-text__icon--info {
789
+ color: #64b3e7;
790
+ }
791
+ .eds-feedback-text__icon--warning {
792
+ color: #ffca28;
793
+ }
794
+ .eds-feedback-text__icon--warning circle {
795
+ fill: #181c56;
796
+ }
797
+ .eds-contrast .eds-feedback-text__icon--warning {
798
+ color: #ffe082;
680
799
  }
681
800
  /* DO NOT CHANGE!*/
682
801
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -845,125 +964,6 @@ input:disabled + .eds-input-panel__container {
845
964
  }
846
965
  /* DO NOT CHANGE!*/
847
966
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
848
- .eds-switch {
849
- cursor: pointer;
850
- -webkit-user-select: none;
851
- -moz-user-select: none;
852
- user-select: none;
853
- padding: 0.5rem 0;
854
- width: -moz-fit-content;
855
- width: fit-content;
856
- }
857
- .eds-switch input {
858
- opacity: 0;
859
- pointer-events: none;
860
- position: absolute;
861
- }
862
- .eds-switch--right {
863
- display: flex;
864
- flex-direction: row;
865
- align-items: center;
866
- }
867
- .eds-switch--bottom {
868
- display: flex;
869
- flex-direction: column;
870
- align-items: center;
871
- }
872
- .eds-switch__circle {
873
- border-radius: 50%;
874
- height: 1.25rem;
875
- width: 1.25rem;
876
- content: "";
877
- display: flex;
878
- align-items: center;
879
- justify-content: center;
880
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
881
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
882
- background-color: #ffffff;
883
- top: 0.125rem;
884
- left: 0.125rem;
885
- position: relative;
886
- }
887
- .eds-switch__switch--large .eds-switch__circle {
888
- height: 1.75rem;
889
- width: 1.75rem;
890
- }
891
- .eds-contrast .eds-switch__circle {
892
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
893
- }
894
- .eds-switch__switch {
895
- position: relative;
896
- background-color: #949494;
897
- content: "";
898
- display: block;
899
- transition: background-color 0.1s ease-in-out;
900
- height: 1.5rem;
901
- width: 3rem;
902
- border-radius: 1.5rem;
903
- box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
904
- }
905
- .eds-contrast .eds-switch__switch {
906
- background-color: #8285a8;
907
- }
908
- .eds-switch--right .eds-switch__switch {
909
- margin-right: 0.75rem;
910
- }
911
- .eds-switch__switch svg g,
912
- .eds-switch__switch path {
913
- fill: #646464;
914
- transition: fill ease-in-out 0.1s;
915
- }
916
- .eds-contrast .eds-switch__switch svg g,
917
- .eds-contrast .eds-switch__switch path {
918
- fill: #181c56;
919
- }
920
- :checked + .eds-switch__switch {
921
- background-color: var(--eds-switch-color);
922
- }
923
- :checked + .eds-switch__switch .eds-switch__circle {
924
- left: 1.625rem;
925
- }
926
- :checked + .eds-switch__switch .eds-switch__circle svg g,
927
- :checked + .eds-switch__switch .eds-switch__circle path {
928
- fill: var(--eds-switch-color);
929
- }
930
- .eds-contrast :checked + .eds-switch__switch {
931
- background-color: var(--eds-switch-contrast-color);
932
- }
933
- :focus + .eds-switch__switch {
934
- outline: none;
935
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
936
- outline-offset: 0.125rem;
937
- }
938
- .eds-contrast :focus + .eds-switch__switch {
939
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
940
- }
941
- .eds-switch__switch--large {
942
- width: 3.75rem;
943
- height: 2rem;
944
- border-radius: 3.75rem;
945
- }
946
- :checked + .eds-switch__switch--large .eds-switch__circle {
947
- left: 1.875rem;
948
- }
949
- .eds-switch__switch--large svg {
950
- position: relative;
951
- right: 0.05rem;
952
- }
953
- .eds-switch__label--large--right {
954
- font-size: 1rem;
955
- }
956
- .eds-switch__label--large--bottom {
957
- font-size: 0.875rem;
958
- }
959
- .eds-switch__label--medium--right {
960
- font-size: 0.875rem;
961
- }
962
- .eds-switch__label--medium--bottom {
963
- font-size: 0.75rem;
964
- }
965
- /* DO NOT CHANGE!*/
966
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
967
967
  textarea.eds-form-control.eds-textarea {
968
968
  min-height: 7.75rem;
969
969
  resize: vertical;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "7.0.27-alpha.0",
3
+ "version": "7.0.27",
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.12.1-alpha.0",
31
- "@entur/tokens": "^3.11.1-alpha.0",
32
- "@entur/tooltip": "^2.6.36-alpha.0",
33
- "@entur/typography": "^1.8.17-alpha.0",
30
+ "@entur/icons": "^6.12.0",
31
+ "@entur/tokens": "^3.11.0",
32
+ "@entur/tooltip": "^2.6.36",
33
+ "@entur/typography": "^1.8.16",
34
34
  "@entur/utils": "^0.9.5",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "957d432b3633e7f973ea9ffb0219d21f6b598980"
37
+ "gitHead": "ce91791c414af0274bcff712cacfad25a44c45c2"
38
38
  }