@entur/form 8.0.0-beta.0 → 8.0.0

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 +208 -208
  2. package/package.json +6 -6
package/dist/styles.css CHANGED
@@ -5,6 +5,79 @@
5
5
  }
6
6
  /* DO NOT CHANGE!*/
7
7
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
8
+ .eds-feedback-text {
9
+ display: flex;
10
+ align-items: center;
11
+ margin-top: 0.25rem;
12
+ }
13
+ .eds-feedback-text--info, .eds-feedback-text--information {
14
+ padding-left: calc(1rem + 0.125rem);
15
+ }
16
+ .eds-feedback-text__text {
17
+ color: var(--components-form-feedbacktext-information-standard-text);
18
+ }
19
+ .eds-contrast .eds-feedback-text__text {
20
+ color: var(--components-form-feedbacktext-information-contrast-text);
21
+ }
22
+
23
+ .eds-feedback-text__icon {
24
+ font-size: 1.5rem;
25
+ min-height: 1.5rem;
26
+ min-width: 1.5rem;
27
+ padding-right: 0.5rem;
28
+ position: relative;
29
+ top: -0.1rem;
30
+ }
31
+ .eds-feedback-text__icon--success {
32
+ color: var(--components-form-feedbacktext-success-standard-icon-fill);
33
+ }
34
+ .eds-feedback-text__icon--success circle {
35
+ fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
36
+ }
37
+ .eds-contrast .eds-feedback-text__icon--success {
38
+ color: var(--components-form-feedbacktext-success-contrast-icon-fill);
39
+ }
40
+ .eds-contrast .eds-feedback-text__icon--success circle {
41
+ fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
42
+ }
43
+ .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
44
+ color: var(--components-form-feedbacktext-negative-standard-icon-fill);
45
+ }
46
+ .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
47
+ fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
48
+ }
49
+ .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
50
+ color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
51
+ }
52
+ .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
53
+ fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
54
+ }
55
+ .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
56
+ color: var(--components-form-feedbacktext-information-standard-icon-fill);
57
+ }
58
+ .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
59
+ fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
60
+ }
61
+ .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
62
+ color: var(--components-form-feedbacktext-information-contrast-icon-fill);
63
+ }
64
+ .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
65
+ fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
66
+ }
67
+ .eds-feedback-text__icon--warning {
68
+ color: var(--components-form-feedbacktext-warning-standard-icon-fill);
69
+ }
70
+ .eds-feedback-text__icon--warning .svg-exclamation {
71
+ fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
72
+ }
73
+ .eds-contrast .eds-feedback-text__icon--warning {
74
+ color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
75
+ }
76
+ .eds-contrast .eds-feedback-text__icon--warning circle {
77
+ fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
78
+ }
79
+ /* DO NOT CHANGE!*/
80
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
8
81
  .eds-checkbox__container {
9
82
  display: flex;
10
83
  align-items: center;
@@ -160,79 +233,6 @@
160
233
  }
161
234
  /* DO NOT CHANGE!*/
162
235
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
163
- .eds-feedback-text {
164
- display: flex;
165
- align-items: center;
166
- margin-top: 0.25rem;
167
- }
168
- .eds-feedback-text--info, .eds-feedback-text--information {
169
- padding-left: calc(1rem + 0.125rem);
170
- }
171
- .eds-feedback-text__text {
172
- color: var(--components-form-feedbacktext-information-standard-text);
173
- }
174
- .eds-contrast .eds-feedback-text__text {
175
- color: var(--components-form-feedbacktext-information-contrast-text);
176
- }
177
-
178
- .eds-feedback-text__icon {
179
- font-size: 1.5rem;
180
- min-height: 1.5rem;
181
- min-width: 1.5rem;
182
- padding-right: 0.5rem;
183
- position: relative;
184
- top: -0.1rem;
185
- }
186
- .eds-feedback-text__icon--success {
187
- color: var(--components-form-feedbacktext-success-standard-icon-fill);
188
- }
189
- .eds-feedback-text__icon--success circle {
190
- fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
191
- }
192
- .eds-contrast .eds-feedback-text__icon--success {
193
- color: var(--components-form-feedbacktext-success-contrast-icon-fill);
194
- }
195
- .eds-contrast .eds-feedback-text__icon--success circle {
196
- fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
197
- }
198
- .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
199
- color: var(--components-form-feedbacktext-negative-standard-icon-fill);
200
- }
201
- .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
202
- fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
203
- }
204
- .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
205
- color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
206
- }
207
- .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
208
- fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
209
- }
210
- .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
211
- color: var(--components-form-feedbacktext-information-standard-icon-fill);
212
- }
213
- .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
214
- fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
215
- }
216
- .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
217
- color: var(--components-form-feedbacktext-information-contrast-icon-fill);
218
- }
219
- .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
220
- fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
221
- }
222
- .eds-feedback-text__icon--warning {
223
- color: var(--components-form-feedbacktext-warning-standard-icon-fill);
224
- }
225
- .eds-feedback-text__icon--warning .svg-exclamation {
226
- fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
227
- }
228
- .eds-contrast .eds-feedback-text__icon--warning {
229
- color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
230
- }
231
- .eds-contrast .eds-feedback-text__icon--warning circle {
232
- fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
233
- }
234
- /* DO NOT CHANGE!*/
235
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
236
236
  .eds-form-control__field-and-feedback-text {
237
237
  display: flex;
238
238
  flex-direction: column;
@@ -625,6 +625,125 @@
625
625
  }
626
626
  /* DO NOT CHANGE!*/
627
627
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
628
+ .eds-switch {
629
+ cursor: pointer;
630
+ -webkit-user-select: none;
631
+ -moz-user-select: none;
632
+ user-select: none;
633
+ padding: 0.5rem 0;
634
+ width: -moz-fit-content;
635
+ width: fit-content;
636
+ }
637
+ .eds-switch input {
638
+ opacity: 0;
639
+ pointer-events: none;
640
+ position: absolute;
641
+ }
642
+ .eds-switch--right {
643
+ display: flex;
644
+ flex-direction: row;
645
+ align-items: center;
646
+ }
647
+ .eds-switch--bottom {
648
+ display: flex;
649
+ flex-direction: column;
650
+ align-items: center;
651
+ }
652
+ .eds-switch__circle {
653
+ border-radius: 50%;
654
+ height: 1.25rem;
655
+ width: 1.25rem;
656
+ content: "";
657
+ display: flex;
658
+ align-items: center;
659
+ justify-content: center;
660
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
661
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
662
+ background-color: var(--components-form-switch-standard-switch);
663
+ top: 0.125rem;
664
+ left: 0.125rem;
665
+ position: relative;
666
+ }
667
+ .eds-switch__switch--large .eds-switch__circle {
668
+ height: 1.75rem;
669
+ width: 1.75rem;
670
+ }
671
+ .eds-contrast .eds-switch__circle {
672
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
673
+ }
674
+ .eds-switch__switch {
675
+ position: relative;
676
+ background-color: var(--components-form-switch-standard-fill-false);
677
+ content: "";
678
+ display: block;
679
+ transition: background-color 0.1s ease-in-out;
680
+ height: 1.5rem;
681
+ width: 3rem;
682
+ border-radius: 1.5rem;
683
+ box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
684
+ }
685
+ .eds-contrast .eds-switch__switch {
686
+ background-color: var(--components-form-switch-contrast-fill-false);
687
+ }
688
+ .eds-switch--right .eds-switch__switch {
689
+ margin-right: 0.75rem;
690
+ }
691
+ .eds-switch__switch svg g,
692
+ .eds-switch__switch path {
693
+ fill: var(--components-form-switch-standard-icon-false);
694
+ transition: fill ease-in-out 0.1s;
695
+ }
696
+ .eds-contrast .eds-switch__switch svg g,
697
+ .eds-contrast .eds-switch__switch path {
698
+ fill: var(--components-form-switch-contrast-icon-false);
699
+ }
700
+ :checked + .eds-switch__switch {
701
+ background-color: var(--eds-switch-color);
702
+ }
703
+ :checked + .eds-switch__switch .eds-switch__circle {
704
+ left: 1.625rem;
705
+ }
706
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
707
+ :checked + .eds-switch__switch .eds-switch__circle path {
708
+ fill: var(--eds-switch-color);
709
+ }
710
+ .eds-contrast :checked + .eds-switch__switch {
711
+ background-color: var(--eds-switch-contrast-color);
712
+ }
713
+ :focus + .eds-switch__switch {
714
+ outline: 2px solid #181c56;
715
+ outline-color: var(--basecolors-stroke-focus-standard);
716
+ outline-offset: 0.125rem;
717
+ }
718
+ .eds-contrast :focus + .eds-switch__switch {
719
+ outline-color: var(--basecolors-stroke-focus-contrast);
720
+ }
721
+ .eds-switch__switch--large {
722
+ width: 3.75rem;
723
+ height: 2rem;
724
+ border-radius: 3.75rem;
725
+ }
726
+ :checked + .eds-switch__switch--large .eds-switch__circle {
727
+ left: 1.875rem;
728
+ }
729
+ .eds-switch__switch--large svg {
730
+ position: relative;
731
+ right: 0.05rem;
732
+ }
733
+ .eds-switch__label--large--right {
734
+ font-size: 1rem;
735
+ }
736
+ .eds-switch__label--large--bottom {
737
+ font-size: 0.875rem;
738
+ }
739
+ .eds-switch__label--medium--right {
740
+ font-size: 0.875rem;
741
+ }
742
+ .eds-switch__label--medium--bottom {
743
+ font-size: 0.75rem;
744
+ }
745
+ /* DO NOT CHANGE!*/
746
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
628
747
  .eds-input-panel[focus-within] .eds-input-panel__container {
629
748
  outline: 2px solid #181c56;
630
749
  outline-color: var(--basecolors-stroke-focus-standard);
@@ -781,125 +900,6 @@ input:disabled + .eds-input-panel__container {
781
900
  }
782
901
  /* DO NOT CHANGE!*/
783
902
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
784
- .eds-switch {
785
- cursor: pointer;
786
- -webkit-user-select: none;
787
- -moz-user-select: none;
788
- user-select: none;
789
- padding: 0.5rem 0;
790
- width: -moz-fit-content;
791
- width: fit-content;
792
- }
793
- .eds-switch input {
794
- opacity: 0;
795
- pointer-events: none;
796
- position: absolute;
797
- }
798
- .eds-switch--right {
799
- display: flex;
800
- flex-direction: row;
801
- align-items: center;
802
- }
803
- .eds-switch--bottom {
804
- display: flex;
805
- flex-direction: column;
806
- align-items: center;
807
- }
808
- .eds-switch__circle {
809
- border-radius: 50%;
810
- height: 1.25rem;
811
- width: 1.25rem;
812
- content: "";
813
- display: flex;
814
- align-items: center;
815
- justify-content: center;
816
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
817
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
818
- background-color: var(--components-form-switch-standard-switch);
819
- top: 0.125rem;
820
- left: 0.125rem;
821
- position: relative;
822
- }
823
- .eds-switch__switch--large .eds-switch__circle {
824
- height: 1.75rem;
825
- width: 1.75rem;
826
- }
827
- .eds-contrast .eds-switch__circle {
828
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
829
- }
830
- .eds-switch__switch {
831
- position: relative;
832
- background-color: var(--components-form-switch-standard-fill-false);
833
- content: "";
834
- display: block;
835
- transition: background-color 0.1s ease-in-out;
836
- height: 1.5rem;
837
- width: 3rem;
838
- border-radius: 1.5rem;
839
- box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
840
- }
841
- .eds-contrast .eds-switch__switch {
842
- background-color: var(--components-form-switch-contrast-fill-false);
843
- }
844
- .eds-switch--right .eds-switch__switch {
845
- margin-right: 0.75rem;
846
- }
847
- .eds-switch__switch svg g,
848
- .eds-switch__switch path {
849
- fill: var(--components-form-switch-standard-icon-false);
850
- transition: fill ease-in-out 0.1s;
851
- }
852
- .eds-contrast .eds-switch__switch svg g,
853
- .eds-contrast .eds-switch__switch path {
854
- fill: var(--components-form-switch-contrast-icon-false);
855
- }
856
- :checked + .eds-switch__switch {
857
- background-color: var(--eds-switch-color);
858
- }
859
- :checked + .eds-switch__switch .eds-switch__circle {
860
- left: 1.625rem;
861
- }
862
- :checked + .eds-switch__switch .eds-switch__circle svg g,
863
- :checked + .eds-switch__switch .eds-switch__circle path {
864
- fill: var(--eds-switch-color);
865
- }
866
- .eds-contrast :checked + .eds-switch__switch {
867
- background-color: var(--eds-switch-contrast-color);
868
- }
869
- :focus + .eds-switch__switch {
870
- outline: 2px solid #181c56;
871
- outline-color: var(--basecolors-stroke-focus-standard);
872
- outline-offset: 0.125rem;
873
- }
874
- .eds-contrast :focus + .eds-switch__switch {
875
- outline-color: var(--basecolors-stroke-focus-contrast);
876
- }
877
- .eds-switch__switch--large {
878
- width: 3.75rem;
879
- height: 2rem;
880
- border-radius: 3.75rem;
881
- }
882
- :checked + .eds-switch__switch--large .eds-switch__circle {
883
- left: 1.875rem;
884
- }
885
- .eds-switch__switch--large svg {
886
- position: relative;
887
- right: 0.05rem;
888
- }
889
- .eds-switch__label--large--right {
890
- font-size: 1rem;
891
- }
892
- .eds-switch__label--large--bottom {
893
- font-size: 0.875rem;
894
- }
895
- .eds-switch__label--medium--right {
896
- font-size: 0.875rem;
897
- }
898
- .eds-switch__label--medium--bottom {
899
- font-size: 0.75rem;
900
- }
901
- /* DO NOT CHANGE!*/
902
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
903
903
  textarea.eds-form-control.eds-textarea {
904
904
  min-height: 7.75rem;
905
905
  resize: vertical;
@@ -954,17 +954,6 @@ textarea.eds-form-control.eds-textarea {
954
954
  }
955
955
  /* DO NOT CHANGE!*/
956
956
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
957
- .eds-segmented-control {
958
- margin-top: 0.25rem;
959
- display: flex;
960
- background: var(--components-form-segmentedcontrol-standard-background);
961
- border-radius: 0.5rem;
962
- }
963
- .eds-contrast .eds-segmented-control {
964
- background: var(--components-form-segmentedcontrol-contrast-background);
965
- }
966
- /* DO NOT CHANGE!*/
967
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
968
957
  .eds-segmented-choice {
969
958
  display: block;
970
959
  flex: 1 1 0px;
@@ -1047,6 +1036,17 @@ textarea.eds-form-control.eds-textarea {
1047
1036
  }
1048
1037
  /* DO NOT CHANGE!*/
1049
1038
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1039
+ .eds-segmented-control {
1040
+ margin-top: 0.25rem;
1041
+ display: flex;
1042
+ background: var(--components-form-segmentedcontrol-standard-background);
1043
+ border-radius: 0.5rem;
1044
+ }
1045
+ .eds-contrast .eds-segmented-control {
1046
+ background: var(--components-form-segmentedcontrol-contrast-background);
1047
+ }
1048
+ /* DO NOT CHANGE!*/
1049
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1050
1050
  /* DO NOT CHANGE!*/
1051
1051
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1052
1052
  /* DO NOT CHANGE!*/
@@ -1437,8 +1437,8 @@ textarea.eds-form-control.eds-textarea {
1437
1437
  --basecolors-shape-accent: #e5e5e9;
1438
1438
  --basecolors-shape-bicycle-contrast: #4db295;
1439
1439
  --basecolors-shape-bicycle-default: #4db295;
1440
- --basecolors-shape-bus-contrast: #e87a9b;
1441
- --basecolors-shape-bus-default: #e87a9b;
1440
+ --basecolors-shape-bus-contrast: #ef7398;
1441
+ --basecolors-shape-bus-default: #ef7398;
1442
1442
  --basecolors-shape-cableway-contrast: #b898e5;
1443
1443
  --basecolors-shape-cableway-default: #b898e5;
1444
1444
  --basecolors-shape-disabled: #b6b8ba;
@@ -1481,7 +1481,7 @@ textarea.eds-form-control.eds-textarea {
1481
1481
  --basecolors-stroke-highlight: #ff9494;
1482
1482
  --basecolors-stroke-light: #b3b4bd;
1483
1483
  --basecolors-stroke-subdued: #81828f;
1484
- --basecolors-stroke-subduedalt: #81828f;
1484
+ --basecolors-stroke-subduedalt: #949699;
1485
1485
  --basecolors-text-accent: #e5e5e9;
1486
1486
  --basecolors-text-disabled: #b6b8ba;
1487
1487
  --basecolors-text-disabledalt: #b6b8ba;
@@ -1526,8 +1526,8 @@ textarea.eds-form-control.eds-textarea {
1526
1526
  --contrast-airportlinkrail: #fbafea;
1527
1527
  --contrast-airportlinkrail-transparent: rgba(251,175,234,0.14902);
1528
1528
  --dark-bicycle: #4db295;
1529
- --dark-bus: #e87a9b;
1530
- --dark-bus-transparent: rgba(232,122,155,0.14902);
1529
+ --dark-bus: #ef7398;
1530
+ --dark-bus-transparent: rgba(239,115,152,0.14902);
1531
1531
  --dark-cableway: #b898e5;
1532
1532
  --dark-cableway-transparent: rgba(184,152,229,0.14902);
1533
1533
  --dark-carferry: #8ccfe2;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "8.0.0-beta.0",
3
+ "version": "8.0.0",
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": "^7.0.0-beta.0",
31
- "@entur/tokens": "^3.15.1",
32
- "@entur/tooltip": "^3.0.0-beta.0",
33
- "@entur/typography": "^1.8.40-beta.0",
30
+ "@entur/icons": "^7.0.0",
31
+ "@entur/tokens": "^3.15.2",
32
+ "@entur/tooltip": "^3.0.0",
33
+ "@entur/typography": "^1.8.41",
34
34
  "@entur/utils": "^0.11.1",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "c8e99ab901c06e9faf622f1a1f88e1b0e7e34419"
37
+ "gitHead": "cff2157007648ca73944d215e9f3f03160c96f13"
38
38
  }