@entur/form 5.1.2 → 5.2.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.
package/dist/styles.css CHANGED
@@ -2,6 +2,21 @@
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
+ textarea.eds-form-control.eds-textarea {
6
+ min-height: 7.75rem;
7
+ resize: vertical;
8
+ line-height: 1.5rem;
9
+ }/* DO NOT CHANGE!*/
10
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
11
+ .eds-fieldset {
12
+ margin: 0;
13
+ padding: 0;
14
+ border: 0;
15
+ }
16
+ .eds-fieldset .eds-legend {
17
+ margin: 0 0 0.5rem;
18
+ }/* DO NOT CHANGE!*/
19
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
20
  .eds-feedback-text {
6
21
  display: flex;
7
22
  align-items: center;
@@ -50,6 +65,90 @@
50
65
  color: #64b3e7;
51
66
  }/* DO NOT CHANGE!*/
52
67
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
68
+ .eds-form-component--radio__container {
69
+ display: flex;
70
+ justify-content: center;
71
+ align-items: center;
72
+ position: relative;
73
+ cursor: pointer;
74
+ height: 2rem;
75
+ width: fit-content;
76
+ user-select: none;
77
+ }
78
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
79
+ border-color: #54568c;
80
+ }
81
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
82
+ background-color: #54568c;
83
+ }
84
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
85
+ border-color: #8285a8;
86
+ }
87
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
88
+ background-color: #8285a8;
89
+ }
90
+ .eds-form-component--radio__container input {
91
+ position: absolute;
92
+ opacity: 0;
93
+ cursor: pointer;
94
+ height: 0;
95
+ width: 0;
96
+ }
97
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
98
+ height: 0.625rem;
99
+ width: 0.625rem;
100
+ }
101
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
102
+ outline: none;
103
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
104
+ outline-offset: 0.125rem;
105
+ }
106
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
107
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
108
+ }
109
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
110
+ position: relative;
111
+ height: 1.25rem;
112
+ width: 1.25rem;
113
+ margin-right: 1rem;
114
+ background-color: #ffffff;
115
+ border: 0.125rem solid #181c56;
116
+ border-radius: 50%;
117
+ display: flex;
118
+ align-items: center;
119
+ justify-content: center;
120
+ }
121
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
122
+ background-color: #181c56;
123
+ border-color: #aeb7e2;
124
+ }
125
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
126
+ background: #d1d3d3;
127
+ border-color: #d1d3d3;
128
+ cursor: not-allowed;
129
+ }
130
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
131
+ border-color: #d1d3d3;
132
+ }
133
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
134
+ background: #d1d3d3;
135
+ border-color: #d1d3d3;
136
+ }
137
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
138
+ color: #656782;
139
+ }
140
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
141
+ display: block;
142
+ width: 0;
143
+ height: 0;
144
+ border-radius: 50%;
145
+ background-color: #181c56;
146
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
147
+ }
148
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
149
+ background-color: #aeb7e2;
150
+ }/* DO NOT CHANGE!*/
151
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
53
152
  .eds-checkbox__container {
54
153
  display: flex;
55
154
  align-items: center;
@@ -162,109 +261,8 @@
162
261
  }
163
262
  }/* DO NOT CHANGE!*/
164
263
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
165
- textarea.eds-form-control.eds-textarea {
166
- min-height: 7.75rem;
167
- resize: vertical;
168
- line-height: 1.5rem;
169
- }/* DO NOT CHANGE!*/
170
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
171
- .eds-fieldset {
172
- margin: 0;
173
- padding: 0;
174
- border: 0;
175
- }
176
- .eds-fieldset .eds-legend {
177
- margin: 0 0 0.5rem;
178
- }/* DO NOT CHANGE!*/
179
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
180
- .eds-form-component--radio__container {
181
- display: flex;
182
- justify-content: center;
183
- align-items: center;
184
- position: relative;
185
- cursor: pointer;
186
- height: 2rem;
187
- width: fit-content;
188
- user-select: none;
189
- }
190
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
191
- border-color: #54568c;
192
- }
193
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
194
- background-color: #54568c;
195
- }
196
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
197
- border-color: #8285a8;
198
- }
199
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
200
- background-color: #8285a8;
201
- }
202
- .eds-form-component--radio__container input {
203
- position: absolute;
204
- opacity: 0;
205
- cursor: pointer;
206
- height: 0;
207
- width: 0;
208
- }
209
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
210
- height: 0.625rem;
211
- width: 0.625rem;
212
- }
213
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
214
- outline: none;
215
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
216
- outline-offset: 0.125rem;
217
- }
218
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
219
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
220
- }
221
- .eds-form-component--radio__container .eds-form-component--radio__radio {
222
- position: relative;
223
- height: 1.25rem;
224
- width: 1.25rem;
225
- margin-right: 1rem;
226
- background-color: #ffffff;
227
- border: 0.125rem solid #181c56;
228
- border-radius: 50%;
229
- display: flex;
230
- align-items: center;
231
- justify-content: center;
232
- }
233
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
234
- background-color: #181c56;
235
- border-color: #aeb7e2;
236
- }
237
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
238
- background: #d1d3d3;
239
- border-color: #d1d3d3;
240
- cursor: not-allowed;
241
- }
242
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
243
- border-color: #d1d3d3;
244
- }
245
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
246
- background: #d1d3d3;
247
- border-color: #d1d3d3;
248
- }
249
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
250
- color: #656782;
251
- }
252
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
253
- display: block;
254
- width: 0;
255
- height: 0;
256
- border-radius: 50%;
257
- background-color: #181c56;
258
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
259
- }
260
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
261
- background-color: #aeb7e2;
262
- }/* DO NOT CHANGE!*/
263
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
264
264
  .eds-switch {
265
- align-items: center;
266
265
  cursor: pointer;
267
- display: flex;
268
266
  user-select: none;
269
267
  padding: 0.5rem 0;
270
268
  width: fit-content;
@@ -274,6 +272,16 @@ textarea.eds-form-control.eds-textarea {
274
272
  pointer-events: none;
275
273
  position: absolute;
276
274
  }
275
+ .eds-switch--right {
276
+ display: flex;
277
+ flex-direction: row;
278
+ align-items: center;
279
+ }
280
+ .eds-switch--bottom {
281
+ display: flex;
282
+ flex-direction: column;
283
+ align-items: center;
284
+ }
277
285
  .eds-switch__circle {
278
286
  border-radius: 50%;
279
287
  height: 1.25rem;
@@ -299,7 +307,6 @@ textarea.eds-form-control.eds-textarea {
299
307
  transition: fill ease-in-out 0.1s;
300
308
  }
301
309
  .eds-switch__switch {
302
- margin-right: 0.75rem;
303
310
  position: relative;
304
311
  background-color: #d1d3d3;
305
312
  content: "";
@@ -309,6 +316,9 @@ textarea.eds-form-control.eds-textarea {
309
316
  width: 3rem;
310
317
  border-radius: 1.5rem;
311
318
  }
319
+ .eds-switch--right .eds-switch__switch {
320
+ margin-right: 0.75rem;
321
+ }
312
322
  :checked + .eds-switch__switch {
313
323
  background-color: var(--eds-switch-color);
314
324
  }
@@ -344,13 +354,27 @@ textarea.eds-form-control.eds-textarea {
344
354
  }
345
355
  :checked + .eds-switch__switch--large .eds-switch__circle {
346
356
  left: 1.875rem;
357
+ }
358
+ .eds-switch__label--large--right {
359
+ font-size: 1rem;
360
+ }
361
+ .eds-switch__label--large--bottom {
362
+ font-size: 0.875rem;
363
+ }
364
+ .eds-switch__label--medium--right {
365
+ font-size: 0.875rem;
366
+ }
367
+ .eds-switch__label--medium--bottom {
368
+ font-size: 0.75rem;
347
369
  }/* DO NOT CHANGE!*/
348
370
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
349
371
  .eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
350
372
  border-color: #181c56;
373
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
351
374
  }
352
375
  .eds-contrast .eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
353
376
  border-color: #ffffff;
377
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
354
378
  }
355
379
  .eds-radio-panel__wrapper input {
356
380
  position: absolute;
@@ -446,7 +470,7 @@ textarea.eds-form-control.eds-textarea {
446
470
  }
447
471
  .eds-radio-panel--large .eds-radio-panel__title {
448
472
  font-size: 1.25rem;
449
- font-weight: 600;
473
+ font-weight: 500;
450
474
  line-height: 1.875rem;
451
475
  }
452
476
  .eds-radio-panel--disabled {
@@ -501,8 +525,8 @@ textarea.eds-form-control.eds-textarea {
501
525
  margin-left: 1rem;
502
526
  }
503
527
  .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
504
- box-shadow: 0px -2px 0px 4px #ffffff;
505
- background: #ffffff;
528
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
529
+ background: var(--textarea-label-background);
506
530
  width: calc( 100% - 1rem - 1rem - 4px );
507
531
  }
508
532
  .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
@@ -532,8 +556,8 @@ textarea.eds-form-control.eds-textarea {
532
556
  margin-left: 1rem;
533
557
  }
534
558
  .eds-textarea__label .eds-input-group__label--filled {
535
- box-shadow: 0px -2px 0px 4px #ffffff;
536
- background: #ffffff;
559
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
560
+ background: var(--textarea-label-background);
537
561
  width: calc( 100% - 1rem - 1rem - 4px );
538
562
  }
539
563
  .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
@@ -562,8 +586,8 @@ textarea.eds-form-control.eds-textarea {
562
586
  margin-left: 1rem;
563
587
  }
564
588
  .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
565
- box-shadow: 0px -2px 0px 4px #ffffff;
566
- background: #ffffff;
589
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
590
+ background: var(--textarea-label-background);
567
591
  width: calc( 100% - 1rem - 1rem - 4px );
568
592
  }
569
593
  .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
@@ -574,42 +598,6 @@ textarea.eds-form-control.eds-textarea {
574
598
  margin-left: 1rem;
575
599
  }/* DO NOT CHANGE!*/
576
600
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
577
- .eds-textfield__clear-button {
578
- background: none;
579
- border: none;
580
- border-radius: 50%;
581
- color: inherit;
582
- cursor: pointer;
583
- display: flex;
584
- font: inherit;
585
- font-size: 1rem;
586
- line-height: 1rem;
587
- padding: 0.5rem;
588
- margin-right: -0.75rem;
589
- }
590
- .eds-textfield__clear-button-wrapper {
591
- display: flex;
592
- align-items: center;
593
- }
594
- .eds-textfield__clear-button:hover {
595
- background: #f3f3f3;
596
- }
597
- .eds-textfield__clear-button:focus {
598
- outline: none;
599
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
600
- }
601
-
602
- .eds-textfield__divider {
603
- content: "";
604
- display: block;
605
- background-color: #e9e9e9;
606
- height: 1.5rem;
607
- width: 1px;
608
- }
609
- .eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
610
- background-color: #8285a8;
611
- }/* DO NOT CHANGE!*/
612
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
613
601
  .eds-form-control-wrapper {
614
602
  --border-color: #181c56;
615
603
  --border-color-hover: #aeb7e2;
@@ -624,6 +612,7 @@ textarea.eds-form-control.eds-textarea {
624
612
  width: 100%;
625
613
  min-height: 3rem;
626
614
  transition: border-color 0.1s ease-in-out;
615
+ --textarea-label-background: $colors-brand-white;
627
616
  /*
628
617
  Some input controls require a darker design while inside a contrast block.
629
618
  These elements require the `--dark` modifier, even on the wrapper.
@@ -671,9 +660,11 @@ textarea.eds-form-control.eds-textarea {
671
660
  cursor: default;
672
661
  border-color: transparent;
673
662
  background: #f8f8f8;
663
+ --textarea-label-background: $colors-greys-grey90;
674
664
  }
675
665
  .eds-contrast .eds-form-control-wrapper--readonly {
676
666
  background: #292b6a;
667
+ --textarea-label-background: $colors-blues-blue10;
677
668
  color: #ffffff;
678
669
  border-color: transparent;
679
670
  }
@@ -804,13 +795,40 @@ textarea.eds-form-control.eds-textarea {
804
795
  margin-left: 0;
805
796
  }/* DO NOT CHANGE!*/
806
797
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
807
- .eds-segmented-control {
798
+ .eds-textfield__clear-button {
799
+ background: none;
800
+ border: none;
801
+ border-radius: 50%;
802
+ color: inherit;
803
+ cursor: pointer;
808
804
  display: flex;
809
- background: #d1d4e3;
810
- border-radius: 0.25rem;
805
+ font: inherit;
806
+ font-size: 1rem;
807
+ line-height: 1rem;
808
+ padding: 0.5rem;
809
+ margin-right: -0.75rem;
811
810
  }
812
- .eds-contrast .eds-segmented-control {
813
- background: #393d79;
811
+ .eds-textfield__clear-button-wrapper {
812
+ display: flex;
813
+ align-items: center;
814
+ }
815
+ .eds-textfield__clear-button:hover {
816
+ background: #f3f3f3;
817
+ }
818
+ .eds-textfield__clear-button:focus {
819
+ outline: none;
820
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
821
+ }
822
+
823
+ .eds-textfield__divider {
824
+ content: "";
825
+ display: block;
826
+ background-color: #e9e9e9;
827
+ height: 1.5rem;
828
+ width: 1px;
829
+ }
830
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
831
+ background-color: #8285a8;
814
832
  }/* DO NOT CHANGE!*/
815
833
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
816
834
  .eds-segmented-choice {
@@ -875,4 +893,14 @@ textarea.eds-form-control.eds-textarea {
875
893
  }
876
894
  .eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
877
895
  --background-color: #d1d4e3;
896
+ }/* DO NOT CHANGE!*/
897
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
898
+ .eds-segmented-control {
899
+ margin-top: 0.25rem;
900
+ display: flex;
901
+ background: #d1d4e3;
902
+ border-radius: 0.25rem;
903
+ }
904
+ .eds-contrast .eds-segmented-control {
905
+ background: #393d79;
878
906
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "5.1.2",
3
+ "version": "5.2.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": "^3.3.0",
31
- "@entur/tokens": "^3.2.1",
32
- "@entur/tooltip": "^2.4.26",
33
- "@entur/typography": "^1.6.9",
30
+ "@entur/icons": "^3.4.0",
31
+ "@entur/tokens": "^3.3.0",
32
+ "@entur/tooltip": "^2.5.1",
33
+ "@entur/typography": "^1.6.10",
34
34
  "@entur/utils": "^0.4.2",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "c1f44a917e26ae2b050a0e051fe6a39793f73854"
37
+ "gitHead": "7862498307d864c5f0265d657f49f76cd0afa8db"
38
38
  }