@entur/form 7.0.43 → 7.1.1

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
@@ -115,22 +115,22 @@
115
115
  .eds-contrast .eds-form-control-wrapper--success:focus-within {
116
116
  border-color: var(--components-form-baseform-contrast-border-success);
117
117
  }
118
- .eds-form-control-wrapper--error {
118
+ .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
119
119
  border-color: var(--components-form-baseform-standard-border-negative);
120
120
  }
121
- .eds-form-control-wrapper--error[focus-within] {
121
+ .eds-form-control-wrapper--error[focus-within], .eds-form-control-wrapper--negative[focus-within] {
122
122
  border-color: var(--components-form-baseform-standard-border-negative);
123
123
  }
124
- .eds-form-control-wrapper--error:focus-within {
124
+ .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
125
125
  border-color: var(--components-form-baseform-standard-border-negative);
126
126
  }
127
- .eds-contrast .eds-form-control-wrapper--error {
127
+ .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
128
128
  border-color: var(--components-form-baseform-contrast-border-negative);
129
129
  }
130
- .eds-contrast .eds-form-control-wrapper--error[focus-within] {
130
+ .eds-contrast .eds-form-control-wrapper--error[focus-within], .eds-contrast .eds-form-control-wrapper--negative[focus-within] {
131
131
  border-color: var(--components-form-baseform-contrast-border-negative);
132
132
  }
133
- .eds-contrast .eds-form-control-wrapper--error:focus-within {
133
+ .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
134
134
  border-color: var(--components-form-baseform-contrast-border-negative);
135
135
  }
136
136
 
@@ -183,11 +183,6 @@
183
183
  .eds-form-control__append {
184
184
  margin-left: 0;
185
185
  }
186
- .eds-fieldset {
187
- margin: 0;
188
- padding: 0;
189
- border: 0;
190
- }
191
186
  /* DO NOT CHANGE!*/
192
187
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
193
188
  .eds-checkbox__container {
@@ -345,6 +340,84 @@
345
340
  }
346
341
  /* DO NOT CHANGE!*/
347
342
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
343
+ .eds-feedback-text {
344
+ display: flex;
345
+ align-items: center;
346
+ margin-top: 0.25rem;
347
+ }
348
+ .eds-feedback-text--info, .eds-feedback-text--information {
349
+ padding-left: calc(1rem + 0.125rem);
350
+ }
351
+ .eds-feedback-text__text {
352
+ color: var(--components-form-feedbacktext-information-standard-text);
353
+ }
354
+ .eds-contrast .eds-feedback-text__text {
355
+ color: var(--components-form-feedbacktext-information-contrast-text);
356
+ }
357
+
358
+ .eds-feedback-text__icon {
359
+ font-size: 1.5rem;
360
+ min-height: 1.5rem;
361
+ min-width: 1.5rem;
362
+ padding-right: 0.5rem;
363
+ position: relative;
364
+ top: -0.1rem;
365
+ }
366
+ .eds-feedback-text__icon--success {
367
+ color: var(--components-form-feedbacktext-success-standard-icon-fill);
368
+ }
369
+ .eds-feedback-text__icon--success circle {
370
+ fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
371
+ }
372
+ .eds-contrast .eds-feedback-text__icon--success {
373
+ color: var(--components-form-feedbacktext-success-contrast-icon-fill);
374
+ }
375
+ .eds-contrast .eds-feedback-text__icon--success circle {
376
+ fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
377
+ }
378
+ .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
379
+ color: var(--components-form-feedbacktext-negative-standard-icon-fill);
380
+ }
381
+ .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
382
+ fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
383
+ }
384
+ .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
385
+ color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
386
+ }
387
+ .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
388
+ fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
389
+ }
390
+ .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
391
+ color: var(--components-form-feedbacktext-information-standard-icon-fill);
392
+ }
393
+ .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
394
+ fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
395
+ }
396
+ .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
397
+ color: var(--components-form-feedbacktext-information-contrast-icon-fill);
398
+ }
399
+ .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
400
+ fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
401
+ }
402
+ .eds-feedback-text__icon--warning {
403
+ color: var(--components-form-feedbacktext-warning-standard-icon-fill);
404
+ }
405
+ .eds-feedback-text__icon--warning .svg-exclamation {
406
+ fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
407
+ }
408
+ .eds-contrast .eds-feedback-text__icon--warning {
409
+ color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
410
+ }
411
+ .eds-contrast .eds-feedback-text__icon--warning circle {
412
+ fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
413
+ }
414
+ .eds-fieldset {
415
+ margin: 0;
416
+ padding: 0;
417
+ border: 0;
418
+ }
419
+ /* DO NOT CHANGE!*/
420
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
348
421
  .eds-form-component--radio__container {
349
422
  display: flex;
350
423
  justify-content: center;
@@ -427,79 +500,6 @@
427
500
  }
428
501
  /* DO NOT CHANGE!*/
429
502
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
430
- .eds-feedback-text {
431
- display: flex;
432
- align-items: center;
433
- margin-top: 0.25rem;
434
- }
435
- .eds-feedback-text--info {
436
- padding-left: calc(1rem + 0.125rem);
437
- }
438
- .eds-feedback-text__text {
439
- color: var(--components-form-feedbacktext-information-standard-text);
440
- }
441
- .eds-contrast .eds-feedback-text__text {
442
- color: var(--components-form-feedbacktext-information-contrast-text);
443
- }
444
-
445
- .eds-feedback-text__icon {
446
- font-size: 1.5rem;
447
- min-height: 1.5rem;
448
- min-width: 1.5rem;
449
- padding-right: 0.5rem;
450
- position: relative;
451
- top: -0.1rem;
452
- }
453
- .eds-feedback-text__icon--success {
454
- color: var(--components-form-feedbacktext-success-standard-icon-fill);
455
- }
456
- .eds-feedback-text__icon--success circle {
457
- fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
458
- }
459
- .eds-contrast .eds-feedback-text__icon--success {
460
- color: var(--components-form-feedbacktext-success-contrast-icon-fill);
461
- }
462
- .eds-contrast .eds-feedback-text__icon--success circle {
463
- fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
464
- }
465
- .eds-feedback-text__icon--error {
466
- color: var(--components-form-feedbacktext-negative-standard-icon-fill);
467
- }
468
- .eds-feedback-text__icon--error circle {
469
- fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
470
- }
471
- .eds-contrast .eds-feedback-text__icon--error {
472
- color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
473
- }
474
- .eds-contrast .eds-feedback-text__icon--error circle {
475
- fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
476
- }
477
- .eds-feedback-text__icon--info {
478
- color: var(--components-form-feedbacktext-information-standard-icon-fill);
479
- }
480
- .eds-feedback-text__icon--info circle {
481
- fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
482
- }
483
- .eds-contrast .eds-feedback-text__icon--info {
484
- color: var(--components-form-feedbacktext-information-contrast-icon-fill);
485
- }
486
- .eds-contrast .eds-feedback-text__icon--info circle {
487
- fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
488
- }
489
- .eds-feedback-text__icon--warning {
490
- color: var(--components-form-feedbacktext-warning-standard-icon-fill);
491
- }
492
- .eds-feedback-text__icon--warning circle {
493
- fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
494
- }
495
- .eds-contrast .eds-feedback-text__icon--warning {
496
- color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
497
- }
498
- .eds-contrast .eds-feedback-text__icon--warning circle {
499
- fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
500
- }
501
- /* DO NOT CHANGE!*/
502
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
503
503
  .eds-input-group {
504
504
  color: inherit;
505
505
  display: block;
@@ -629,6 +629,125 @@
629
629
  }
630
630
  /* DO NOT CHANGE!*/
631
631
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
632
+ .eds-switch {
633
+ cursor: pointer;
634
+ -webkit-user-select: none;
635
+ -moz-user-select: none;
636
+ user-select: none;
637
+ padding: 0.5rem 0;
638
+ width: -moz-fit-content;
639
+ width: fit-content;
640
+ }
641
+ .eds-switch input {
642
+ opacity: 0;
643
+ pointer-events: none;
644
+ position: absolute;
645
+ }
646
+ .eds-switch--right {
647
+ display: flex;
648
+ flex-direction: row;
649
+ align-items: center;
650
+ }
651
+ .eds-switch--bottom {
652
+ display: flex;
653
+ flex-direction: column;
654
+ align-items: center;
655
+ }
656
+ .eds-switch__circle {
657
+ border-radius: 50%;
658
+ height: 1.25rem;
659
+ width: 1.25rem;
660
+ content: "";
661
+ display: flex;
662
+ align-items: center;
663
+ justify-content: center;
664
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
665
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
666
+ background-color: var(--components-form-switch-standard-switch);
667
+ top: 0.125rem;
668
+ left: 0.125rem;
669
+ position: relative;
670
+ }
671
+ .eds-switch__switch--large .eds-switch__circle {
672
+ height: 1.75rem;
673
+ width: 1.75rem;
674
+ }
675
+ .eds-contrast .eds-switch__circle {
676
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
677
+ }
678
+ .eds-switch__switch {
679
+ position: relative;
680
+ background-color: var(--components-form-switch-standard-fill-false);
681
+ content: "";
682
+ display: block;
683
+ transition: background-color 0.1s ease-in-out;
684
+ height: 1.5rem;
685
+ width: 3rem;
686
+ border-radius: 1.5rem;
687
+ box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
688
+ }
689
+ .eds-contrast .eds-switch__switch {
690
+ background-color: var(--components-form-switch-contrast-fill-false);
691
+ }
692
+ .eds-switch--right .eds-switch__switch {
693
+ margin-right: 0.75rem;
694
+ }
695
+ .eds-switch__switch svg g,
696
+ .eds-switch__switch path {
697
+ fill: var(--components-form-switch-standard-icon-false);
698
+ transition: fill ease-in-out 0.1s;
699
+ }
700
+ .eds-contrast .eds-switch__switch svg g,
701
+ .eds-contrast .eds-switch__switch path {
702
+ fill: var(--components-form-switch-contrast-icon-false);
703
+ }
704
+ :checked + .eds-switch__switch {
705
+ background-color: var(--eds-switch-color);
706
+ }
707
+ :checked + .eds-switch__switch .eds-switch__circle {
708
+ left: 1.625rem;
709
+ }
710
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
711
+ :checked + .eds-switch__switch .eds-switch__circle path {
712
+ fill: var(--eds-switch-color);
713
+ }
714
+ .eds-contrast :checked + .eds-switch__switch {
715
+ background-color: var(--eds-switch-contrast-color);
716
+ }
717
+ :focus + .eds-switch__switch {
718
+ outline: 2px solid #181c56;
719
+ outline-color: var(--basecolors-stroke-focus-standard);
720
+ outline-offset: 0.125rem;
721
+ }
722
+ .eds-contrast :focus + .eds-switch__switch {
723
+ outline-color: var(--basecolors-stroke-focus-contrast);
724
+ }
725
+ .eds-switch__switch--large {
726
+ width: 3.75rem;
727
+ height: 2rem;
728
+ border-radius: 3.75rem;
729
+ }
730
+ :checked + .eds-switch__switch--large .eds-switch__circle {
731
+ left: 1.875rem;
732
+ }
733
+ .eds-switch__switch--large svg {
734
+ position: relative;
735
+ right: 0.05rem;
736
+ }
737
+ .eds-switch__label--large--right {
738
+ font-size: 1rem;
739
+ }
740
+ .eds-switch__label--large--bottom {
741
+ font-size: 0.875rem;
742
+ }
743
+ .eds-switch__label--medium--right {
744
+ font-size: 0.875rem;
745
+ }
746
+ .eds-switch__label--medium--bottom {
747
+ font-size: 0.75rem;
748
+ }
749
+ /* DO NOT CHANGE!*/
750
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
632
751
  .eds-input-panel[focus-within] .eds-input-panel__container {
633
752
  outline: 2px solid #181c56;
634
753
  outline-color: var(--basecolors-stroke-focus-standard);
@@ -785,125 +904,6 @@ input:disabled + .eds-input-panel__container {
785
904
  }
786
905
  /* DO NOT CHANGE!*/
787
906
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
788
- .eds-switch {
789
- cursor: pointer;
790
- -webkit-user-select: none;
791
- -moz-user-select: none;
792
- user-select: none;
793
- padding: 0.5rem 0;
794
- width: -moz-fit-content;
795
- width: fit-content;
796
- }
797
- .eds-switch input {
798
- opacity: 0;
799
- pointer-events: none;
800
- position: absolute;
801
- }
802
- .eds-switch--right {
803
- display: flex;
804
- flex-direction: row;
805
- align-items: center;
806
- }
807
- .eds-switch--bottom {
808
- display: flex;
809
- flex-direction: column;
810
- align-items: center;
811
- }
812
- .eds-switch__circle {
813
- border-radius: 50%;
814
- height: 1.25rem;
815
- width: 1.25rem;
816
- content: "";
817
- display: flex;
818
- align-items: center;
819
- justify-content: center;
820
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
821
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
822
- background-color: var(--components-form-switch-standard-switch);
823
- top: 0.125rem;
824
- left: 0.125rem;
825
- position: relative;
826
- }
827
- .eds-switch__switch--large .eds-switch__circle {
828
- height: 1.75rem;
829
- width: 1.75rem;
830
- }
831
- .eds-contrast .eds-switch__circle {
832
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
833
- }
834
- .eds-switch__switch {
835
- position: relative;
836
- background-color: var(--components-form-switch-standard-fill-false);
837
- content: "";
838
- display: block;
839
- transition: background-color 0.1s ease-in-out;
840
- height: 1.5rem;
841
- width: 3rem;
842
- border-radius: 1.5rem;
843
- box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
844
- }
845
- .eds-contrast .eds-switch__switch {
846
- background-color: var(--components-form-switch-contrast-fill-false);
847
- }
848
- .eds-switch--right .eds-switch__switch {
849
- margin-right: 0.75rem;
850
- }
851
- .eds-switch__switch svg g,
852
- .eds-switch__switch path {
853
- fill: var(--components-form-switch-standard-icon-false);
854
- transition: fill ease-in-out 0.1s;
855
- }
856
- .eds-contrast .eds-switch__switch svg g,
857
- .eds-contrast .eds-switch__switch path {
858
- fill: var(--components-form-switch-contrast-icon-false);
859
- }
860
- :checked + .eds-switch__switch {
861
- background-color: var(--eds-switch-color);
862
- }
863
- :checked + .eds-switch__switch .eds-switch__circle {
864
- left: 1.625rem;
865
- }
866
- :checked + .eds-switch__switch .eds-switch__circle svg g,
867
- :checked + .eds-switch__switch .eds-switch__circle path {
868
- fill: var(--eds-switch-color);
869
- }
870
- .eds-contrast :checked + .eds-switch__switch {
871
- background-color: var(--eds-switch-contrast-color);
872
- }
873
- :focus + .eds-switch__switch {
874
- outline: 2px solid #181c56;
875
- outline-color: var(--basecolors-stroke-focus-standard);
876
- outline-offset: 0.125rem;
877
- }
878
- .eds-contrast :focus + .eds-switch__switch {
879
- outline-color: var(--basecolors-stroke-focus-contrast);
880
- }
881
- .eds-switch__switch--large {
882
- width: 3.75rem;
883
- height: 2rem;
884
- border-radius: 3.75rem;
885
- }
886
- :checked + .eds-switch__switch--large .eds-switch__circle {
887
- left: 1.875rem;
888
- }
889
- .eds-switch__switch--large svg {
890
- position: relative;
891
- right: 0.05rem;
892
- }
893
- .eds-switch__label--large--right {
894
- font-size: 1rem;
895
- }
896
- .eds-switch__label--large--bottom {
897
- font-size: 0.875rem;
898
- }
899
- .eds-switch__label--medium--right {
900
- font-size: 0.875rem;
901
- }
902
- .eds-switch__label--medium--bottom {
903
- font-size: 0.75rem;
904
- }
905
- /* DO NOT CHANGE!*/
906
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
907
907
  textarea.eds-form-control.eds-textarea {
908
908
  min-height: 7.75rem;
909
909
  resize: vertical;
@@ -1 +1,7 @@
1
- export type VariantType = 'success' | 'error' | 'warning' | 'info';
1
+ /** Denne filen er deprecated. Bruk VariantType fra @entur/utils istedenfor */
2
+ /** @deprecated use variant="information" instead */
3
+ declare const info = "info";
4
+ /** @deprecated use variant="negative" instead */
5
+ declare const error = "error";
6
+ export type VariantType = 'success' | 'negative' | 'warning' | 'information' | typeof error | typeof info;
7
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "7.0.43",
3
+ "version": "7.1.1",
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.15.4",
31
- "@entur/tokens": "^3.13.3",
32
- "@entur/tooltip": "^2.6.52",
33
- "@entur/typography": "^1.8.28",
34
- "@entur/utils": "^0.10.1",
30
+ "@entur/icons": "^6.15.6",
31
+ "@entur/tokens": "^3.13.4",
32
+ "@entur/tooltip": "^2.7.1",
33
+ "@entur/typography": "^1.8.30",
34
+ "@entur/utils": "^0.11.0",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "89d5de6d31962e236a5c147e129bf915576166b4"
37
+ "gitHead": "af2884729bb414d54d6cf9e9a28b2b6f7c74af74"
38
38
  }