@entur/form 5.2.2 → 5.2.3

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/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [5.2.3](https://bitbucket.org/enturas/design-system/compare/@entur/form@5.2.2...@entur/form@5.2.3) (2022-03-01)
7
+
8
+ **Note:** Version bump only for package @entur/form
9
+
6
10
  ## [5.2.2](https://bitbucket.org/enturas/design-system/compare/@entur/form@5.2.1...@entur/form@5.2.2) (2022-02-09)
7
11
 
8
12
  **Note:** Version bump only for package @entur/form
package/dist/styles.css CHANGED
@@ -2,6 +2,12 @@
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. */
5
11
  .eds-fieldset {
6
12
  margin: 0;
7
13
  padding: 0;
@@ -59,6 +65,90 @@
59
65
  color: #64b3e7;
60
66
  }/* DO NOT CHANGE!*/
61
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. */
62
152
  .eds-checkbox__container {
63
153
  display: flex;
64
154
  align-items: center;
@@ -171,6 +261,113 @@
171
261
  }
172
262
  }/* DO NOT CHANGE!*/
173
263
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
264
+ .eds-switch {
265
+ cursor: pointer;
266
+ user-select: none;
267
+ padding: 0.5rem 0;
268
+ width: fit-content;
269
+ }
270
+ .eds-switch input {
271
+ opacity: 0;
272
+ pointer-events: none;
273
+ position: absolute;
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
+ }
285
+ .eds-switch__circle {
286
+ border-radius: 50%;
287
+ height: 1.25rem;
288
+ width: 1.25rem;
289
+ content: "";
290
+ display: flex;
291
+ align-items: center;
292
+ justify-content: center;
293
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
294
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
295
+ background-color: #ffffff;
296
+ top: 0.125rem;
297
+ left: 0.125rem;
298
+ position: relative;
299
+ }
300
+ .eds-switch__switch--large .eds-switch__circle {
301
+ height: 1.75rem;
302
+ width: 1.75rem;
303
+ }
304
+ .eds-switch .eds-switch__switch svg g,
305
+ .eds-switch .eds-switch__switch path {
306
+ fill: #949494;
307
+ transition: fill ease-in-out 0.1s;
308
+ }
309
+ .eds-switch__switch {
310
+ position: relative;
311
+ background-color: #d1d3d3;
312
+ content: "";
313
+ display: block;
314
+ transition: background-color 0.1s ease-in-out;
315
+ height: 1.5rem;
316
+ width: 3rem;
317
+ border-radius: 1.5rem;
318
+ }
319
+ .eds-switch--right .eds-switch__switch {
320
+ margin-right: 0.75rem;
321
+ }
322
+ :checked + .eds-switch__switch {
323
+ background-color: var(--eds-switch-color);
324
+ }
325
+ :checked + .eds-switch__switch .eds-switch__circle {
326
+ left: 1.625rem;
327
+ }
328
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
329
+ :checked + .eds-switch__switch .eds-switch__circle path {
330
+ fill: var(--eds-switch-color);
331
+ }
332
+ .eds-contrast :checked + .eds-switch__switch .eds-switch__circle svg g,
333
+ .eds-contrast :checked + .eds-switch__switch .eds-switch__circle path {
334
+ fill: var(--eds-switch-color);
335
+ }
336
+ .eds-contrast :checked + .eds-switch__switch {
337
+ background-color: var(--eds-switch-contrast-color);
338
+ }
339
+ :focus + .eds-switch__switch {
340
+ outline: none;
341
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
342
+ outline-offset: 0.125rem;
343
+ }
344
+ .eds-contrast :focus + .eds-switch__switch {
345
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
346
+ }
347
+ .eds-contrast .eds-switch__switch {
348
+ background-color: #54568c;
349
+ }
350
+ .eds-switch__switch--large {
351
+ width: 3.75rem;
352
+ height: 2rem;
353
+ border-radius: 3.75rem;
354
+ }
355
+ :checked + .eds-switch__switch--large .eds-switch__circle {
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;
369
+ }/* DO NOT CHANGE!*/
370
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
174
371
  .eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
175
372
  border-color: #181c56;
176
373
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
@@ -598,203 +795,6 @@
598
795
  margin-left: 0;
599
796
  }/* DO NOT CHANGE!*/
600
797
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
601
- textarea.eds-form-control.eds-textarea {
602
- min-height: 7.75rem;
603
- resize: vertical;
604
- line-height: 1.5rem;
605
- }/* DO NOT CHANGE!*/
606
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
607
- .eds-form-component--radio__container {
608
- display: flex;
609
- justify-content: center;
610
- align-items: center;
611
- position: relative;
612
- cursor: pointer;
613
- height: 2rem;
614
- width: fit-content;
615
- user-select: none;
616
- }
617
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
618
- border-color: #54568c;
619
- }
620
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
621
- background-color: #54568c;
622
- }
623
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
624
- border-color: #8285a8;
625
- }
626
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
627
- background-color: #8285a8;
628
- }
629
- .eds-form-component--radio__container input {
630
- position: absolute;
631
- opacity: 0;
632
- cursor: pointer;
633
- height: 0;
634
- width: 0;
635
- }
636
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
637
- height: 0.625rem;
638
- width: 0.625rem;
639
- }
640
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
641
- outline: none;
642
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
643
- outline-offset: 0.125rem;
644
- }
645
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
646
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
647
- }
648
- .eds-form-component--radio__container .eds-form-component--radio__radio {
649
- position: relative;
650
- height: 1.25rem;
651
- width: 1.25rem;
652
- margin-right: 1rem;
653
- background-color: #ffffff;
654
- border: 0.125rem solid #181c56;
655
- border-radius: 50%;
656
- display: flex;
657
- align-items: center;
658
- justify-content: center;
659
- }
660
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
661
- background-color: #181c56;
662
- border-color: #aeb7e2;
663
- }
664
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
665
- background: #d1d3d3;
666
- border-color: #d1d3d3;
667
- cursor: not-allowed;
668
- }
669
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
670
- border-color: #d1d3d3;
671
- }
672
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
673
- background: #d1d3d3;
674
- border-color: #d1d3d3;
675
- }
676
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
677
- color: #656782;
678
- }
679
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
680
- display: block;
681
- width: 0;
682
- height: 0;
683
- border-radius: 50%;
684
- background-color: #181c56;
685
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
686
- }
687
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
688
- background-color: #aeb7e2;
689
- }/* DO NOT CHANGE!*/
690
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
691
- .eds-switch {
692
- cursor: pointer;
693
- user-select: none;
694
- padding: 0.5rem 0;
695
- width: fit-content;
696
- }
697
- .eds-switch input {
698
- opacity: 0;
699
- pointer-events: none;
700
- position: absolute;
701
- }
702
- .eds-switch--right {
703
- display: flex;
704
- flex-direction: row;
705
- align-items: center;
706
- }
707
- .eds-switch--bottom {
708
- display: flex;
709
- flex-direction: column;
710
- align-items: center;
711
- }
712
- .eds-switch__circle {
713
- border-radius: 50%;
714
- height: 1.25rem;
715
- width: 1.25rem;
716
- content: "";
717
- display: flex;
718
- align-items: center;
719
- justify-content: center;
720
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
721
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
722
- background-color: #ffffff;
723
- top: 0.125rem;
724
- left: 0.125rem;
725
- position: relative;
726
- }
727
- .eds-switch__switch--large .eds-switch__circle {
728
- height: 1.75rem;
729
- width: 1.75rem;
730
- }
731
- .eds-switch .eds-switch__switch svg g,
732
- .eds-switch .eds-switch__switch path {
733
- fill: #949494;
734
- transition: fill ease-in-out 0.1s;
735
- }
736
- .eds-switch__switch {
737
- position: relative;
738
- background-color: #d1d3d3;
739
- content: "";
740
- display: block;
741
- transition: background-color 0.1s ease-in-out;
742
- height: 1.5rem;
743
- width: 3rem;
744
- border-radius: 1.5rem;
745
- }
746
- .eds-switch--right .eds-switch__switch {
747
- margin-right: 0.75rem;
748
- }
749
- :checked + .eds-switch__switch {
750
- background-color: var(--eds-switch-color);
751
- }
752
- :checked + .eds-switch__switch .eds-switch__circle {
753
- left: 1.625rem;
754
- }
755
- :checked + .eds-switch__switch .eds-switch__circle svg g,
756
- :checked + .eds-switch__switch .eds-switch__circle path {
757
- fill: var(--eds-switch-color);
758
- }
759
- .eds-contrast :checked + .eds-switch__switch .eds-switch__circle svg g,
760
- .eds-contrast :checked + .eds-switch__switch .eds-switch__circle path {
761
- fill: var(--eds-switch-color);
762
- }
763
- .eds-contrast :checked + .eds-switch__switch {
764
- background-color: var(--eds-switch-contrast-color);
765
- }
766
- :focus + .eds-switch__switch {
767
- outline: none;
768
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
769
- outline-offset: 0.125rem;
770
- }
771
- .eds-contrast :focus + .eds-switch__switch {
772
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
773
- }
774
- .eds-contrast .eds-switch__switch {
775
- background-color: #54568c;
776
- }
777
- .eds-switch__switch--large {
778
- width: 3.75rem;
779
- height: 2rem;
780
- border-radius: 3.75rem;
781
- }
782
- :checked + .eds-switch__switch--large .eds-switch__circle {
783
- left: 1.875rem;
784
- }
785
- .eds-switch__label--large--right {
786
- font-size: 1rem;
787
- }
788
- .eds-switch__label--large--bottom {
789
- font-size: 0.875rem;
790
- }
791
- .eds-switch__label--medium--right {
792
- font-size: 0.875rem;
793
- }
794
- .eds-switch__label--medium--bottom {
795
- font-size: 0.75rem;
796
- }/* DO NOT CHANGE!*/
797
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
798
798
  .eds-textfield__clear-button {
799
799
  background: none;
800
800
  border: none;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "5.2.2",
3
+ "version": "5.2.3",
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.4.1",
30
+ "@entur/icons": "^3.5.0",
31
31
  "@entur/tokens": "^3.3.1",
32
- "@entur/tooltip": "^2.5.2",
32
+ "@entur/tooltip": "^2.5.3",
33
33
  "@entur/typography": "^1.6.11",
34
34
  "@entur/utils": "^0.4.3",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "61e643371cfc5653c93160b7c220152e5b2bafeb"
37
+ "gitHead": "bf06a9d451cb7f978946c05ce04bb4e6f63379af"
38
38
  }