@entur/form 5.4.19 → 6.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.
package/dist/styles.css CHANGED
@@ -1,6 +1,135 @@
1
1
  :root {
2
2
  --eds-form: 1;
3
- }@charset "UTF-8";
3
+ }
4
+ /* DO NOT CHANGE!*/
5
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
6
+ .eds-checkbox__container {
7
+ display: flex;
8
+ align-items: center;
9
+ position: relative;
10
+ -webkit-appearance: none;
11
+ -moz-appearance: none;
12
+ appearance: none;
13
+ cursor: pointer;
14
+ height: 2rem;
15
+ -webkit-user-select: none;
16
+ -moz-user-select: none;
17
+ user-select: none;
18
+ width: -moz-fit-content;
19
+ width: fit-content;
20
+ }
21
+ .eds-checkbox__container--reduced-click-area {
22
+ height: -moz-fit-content;
23
+ height: fit-content;
24
+ }
25
+ .eds-checkbox__container input {
26
+ position: absolute;
27
+ opacity: 0;
28
+ height: 0;
29
+ width: 0;
30
+ }
31
+ .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
32
+ background-color: #181c56;
33
+ }
34
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
35
+ visibility: visible;
36
+ }
37
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon__path {
38
+ stroke: #ffffff;
39
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
40
+ }
41
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
42
+ opacity: 0.5;
43
+ }
44
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled .eds-checkbox-icon__path {
45
+ opacity: 0.5;
46
+ }
47
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
48
+ background: #54568c;
49
+ }
50
+ .eds-checkbox__container:hover input + .eds-checkbox__icon {
51
+ border-color: #54568c;
52
+ background: #f3f3f3;
53
+ }
54
+ .eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
55
+ border-color: #656782;
56
+ background: #292b6a;
57
+ }
58
+ .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
59
+ .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
60
+ border-color: #54568c;
61
+ background-color: #54568c;
62
+ }
63
+ .eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
64
+ .eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
65
+ background: #8285a8;
66
+ border-color: #8285a8;
67
+ }
68
+ .eds-checkbox__container:focus + .eds-checkbox__icon,
69
+ .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
70
+ outline: none;
71
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
72
+ outline-offset: 0.125rem;
73
+ }
74
+ .eds-checkbox__container:focus + .eds-checkbox__icon,
75
+ .eds-checkbox__container :focus-within + .eds-checkbox__icon {
76
+ outline: none;
77
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
78
+ outline-offset: 0.125rem;
79
+ }
80
+ .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
81
+ .eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
82
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
83
+ }
84
+ .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
85
+ .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
86
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
87
+ }
88
+ .eds-checkbox--disabled {
89
+ pointer-events: none;
90
+ }
91
+ .eds-checkbox--disabled .eds-checkbox__label {
92
+ opacity: 0.5;
93
+ }
94
+ .eds-checkbox--disabled .eds-checkbox__icon {
95
+ opacity: 0.5;
96
+ }
97
+ .eds-checkbox__icon {
98
+ display: inline-flex;
99
+ justify-content: center;
100
+ align-items: center;
101
+ position: relative;
102
+ margin-right: 1rem;
103
+ height: 1.25rem;
104
+ width: 1.25rem;
105
+ border: 0.125rem solid #181c56;
106
+ border-radius: 0.0625rem;
107
+ background-color: transparent;
108
+ color: #ffffff;
109
+ }
110
+ .eds-checkbox__icon--reduced-click-area {
111
+ margin-right: 0;
112
+ }
113
+ .eds-contrast .eds-checkbox__icon {
114
+ border-color: #54568c;
115
+ }
116
+ .eds-checkbox__icon .eds-checkbox-icon {
117
+ height: 1rem;
118
+ width: 1rem;
119
+ visibility: hidden;
120
+ }
121
+ .eds-checkbox__icon .eds-checkbox-icon__path {
122
+ transform-origin: 50% 50%;
123
+ stroke-dasharray: 48;
124
+ stroke-dashoffset: 48;
125
+ stroke-width: 0.375rem;
126
+ }
127
+
128
+ @keyframes stroke {
129
+ 100% {
130
+ stroke-dashoffset: 0;
131
+ }
132
+ }
4
133
  /* DO NOT CHANGE!*/
5
134
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
6
135
  .eds-form-control-wrapper {
@@ -81,7 +210,7 @@
81
210
  background: #f8f8f8;
82
211
  --textarea-label-background: $colors-greys-grey90;
83
212
  }
84
- .eds-contrast .eds-form-control-wrapper--readonly  {
213
+ .eds-contrast .eds-form-control-wrapper--readonly {
85
214
  background: #292b6a;
86
215
  --textarea-label-background: $colors-blues-blue10;
87
216
  color: #ffffff;
@@ -243,7 +372,18 @@
243
372
  }
244
373
  .eds-form-control__append {
245
374
  margin-left: 0;
246
- }/* DO NOT CHANGE!*/
375
+ }
376
+ /* DO NOT CHANGE!*/
377
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
378
+ .eds-fieldset {
379
+ margin: 0;
380
+ padding: 0;
381
+ border: 0;
382
+ }
383
+ .eds-fieldset .eds-legend {
384
+ margin: 0 0 0.5rem;
385
+ }
386
+ /* DO NOT CHANGE!*/
247
387
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
248
388
  .eds-input-group {
249
389
  color: inherit;
@@ -376,7 +516,60 @@
376
516
  line-height: 1rem;
377
517
  padding: 0;
378
518
  margin-left: 1rem;
379
- }/* DO NOT CHANGE!*/
519
+ }
520
+ /* DO NOT CHANGE!*/
521
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
522
+ .eds-feedback-text {
523
+ display: flex;
524
+ align-items: center;
525
+ margin-top: 0.25rem;
526
+ }
527
+ .eds-feedback-text--info {
528
+ padding-left: calc(1rem + 0.125rem);
529
+ }
530
+ .eds-feedback-text__text {
531
+ color: #181c56;
532
+ }
533
+ .eds-contrast .eds-feedback-text__text {
534
+ color: #ffffff;
535
+ }
536
+
537
+ .eds-feedback-text__icon {
538
+ font-size: 1.5rem;
539
+ min-height: 1.5rem;
540
+ min-width: 1.5rem;
541
+ padding-right: 0.5rem;
542
+ position: relative;
543
+ top: -0.1rem;
544
+ }
545
+ .eds-feedback-text__icon--success {
546
+ color: #1a8e60;
547
+ }
548
+ .eds-contrast .eds-feedback-text__icon--success {
549
+ color: #5ac39a;
550
+ }
551
+ .eds-feedback-text__icon--error {
552
+ color: #d31b1b;
553
+ }
554
+ .eds-contrast .eds-feedback-text__icon--error {
555
+ color: #ff9494;
556
+ }
557
+ .eds-feedback-text__icon--info {
558
+ color: #0082b9;
559
+ }
560
+ .eds-contrast .eds-feedback-text__icon--info {
561
+ color: #64b3e7;
562
+ }
563
+ .eds-feedback-text__icon--warning {
564
+ color: #ffca28;
565
+ }
566
+ .eds-feedback-text__icon--warning circle {
567
+ fill: #181c56;
568
+ }
569
+ .eds-contrast .eds-feedback-text__icon--warning {
570
+ color: #ffe082;
571
+ }
572
+ /* DO NOT CHANGE!*/
380
573
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
381
574
  .eds-form-component--radio__container {
382
575
  display: flex;
@@ -463,195 +656,8 @@
463
656
  }
464
657
  .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
465
658
  background-color: #aeb7e2;
466
- }/* DO NOT CHANGE!*/
467
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
468
- .eds-checkbox__container {
469
- display: flex;
470
- align-items: center;
471
- position: relative;
472
- -webkit-appearance: none;
473
- -moz-appearance: none;
474
- appearance: none;
475
- cursor: pointer;
476
- height: 2rem;
477
- -webkit-user-select: none;
478
- -moz-user-select: none;
479
- user-select: none;
480
- width: -moz-fit-content;
481
- width: fit-content;
482
- }
483
- .eds-checkbox__container--reduced-click-area {
484
- height: -moz-fit-content;
485
- height: fit-content;
486
- }
487
- .eds-checkbox__container input {
488
- position: absolute;
489
- opacity: 0;
490
- height: 0;
491
- width: 0;
492
- }
493
- .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
494
- background-color: #181c56;
495
- }
496
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
497
- visibility: visible;
498
- }
499
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon__path {
500
- stroke: #ffffff;
501
- animation: stroke ease-in-out 0.2s 0.1s forwards;
502
- }
503
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
504
- opacity: 0.5;
505
- }
506
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled .eds-checkbox-icon__path {
507
- opacity: 0.5;
508
- }
509
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
510
- background: #54568c;
511
- }
512
- .eds-checkbox__container:hover input + .eds-checkbox__icon {
513
- border-color: #54568c;
514
- background: #f3f3f3;
515
- }
516
- .eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
517
- border-color: #656782;
518
- background: #292b6a;
519
- }
520
- .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
521
- .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
522
- border-color: #54568c;
523
- background-color: #54568c;
524
- }
525
- .eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
526
- .eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
527
- background: #8285a8;
528
- border-color: #8285a8;
529
- }
530
- .eds-checkbox__container:focus + .eds-checkbox__icon,
531
- .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
532
- outline: none;
533
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
534
- outline-offset: 0.125rem;
535
- }
536
- .eds-checkbox__container:focus + .eds-checkbox__icon,
537
- .eds-checkbox__container :focus-within + .eds-checkbox__icon {
538
- outline: none;
539
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
540
- outline-offset: 0.125rem;
541
- }
542
- .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
543
- .eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
544
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
545
- }
546
- .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
547
- .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
548
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
549
- }
550
- .eds-checkbox--disabled {
551
- pointer-events: none;
552
- }
553
- .eds-checkbox--disabled .eds-checkbox__label {
554
- opacity: 0.5;
555
- }
556
- .eds-checkbox--disabled .eds-checkbox__icon {
557
- opacity: 0.5;
558
- }
559
- .eds-checkbox__icon {
560
- display: inline-flex;
561
- justify-content: center;
562
- align-items: center;
563
- position: relative;
564
- margin-right: 1rem;
565
- height: 1.25rem;
566
- width: 1.25rem;
567
- border: 0.125rem solid #181c56;
568
- border-radius: 0.0625rem;
569
- background-color: transparent;
570
- color: #ffffff;
571
- }
572
- .eds-checkbox__icon--reduced-click-area {
573
- margin-right: 0;
574
- }
575
- .eds-contrast .eds-checkbox__icon {
576
- border-color: #54568c;
577
- }
578
- .eds-checkbox__icon .eds-checkbox-icon {
579
- height: 1rem;
580
- width: 1rem;
581
- visibility: hidden;
582
- }
583
- .eds-checkbox__icon .eds-checkbox-icon__path {
584
- transform-origin: 50% 50%;
585
- stroke-dasharray: 48;
586
- stroke-dashoffset: 48;
587
- stroke-width: 0.375rem;
588
- }
589
-
590
- @keyframes stroke {
591
- 100% {
592
- stroke-dashoffset: 0;
593
- }
594
- }/* DO NOT CHANGE!*/
595
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
596
- .eds-feedback-text {
597
- display: flex;
598
- align-items: center;
599
- margin-top: 0.25rem;
600
- }
601
- .eds-feedback-text--info {
602
- padding-left: calc(1rem + 0.125rem);
603
- }
604
- .eds-feedback-text__text {
605
- color: #181c56;
606
- }
607
- .eds-contrast .eds-feedback-text__text {
608
- color: #ffffff;
609
- }
610
-
611
- .eds-feedback-text__icon {
612
- font-size: 1.5rem;
613
- min-height: 1.5rem;
614
- min-width: 1.5rem;
615
- padding-right: 0.5rem;
616
- position: relative;
617
- top: -0.1rem;
618
- }
619
- .eds-feedback-text__icon--success {
620
- color: #1a8e60;
621
- }
622
- .eds-contrast .eds-feedback-text__icon--success {
623
- color: #5ac39a;
624
- }
625
- .eds-feedback-text__icon--error {
626
- color: #d31b1b;
627
- }
628
- .eds-contrast .eds-feedback-text__icon--error {
629
- color: #ff9494;
630
- }
631
- .eds-feedback-text__icon--info {
632
- color: #0082b9;
633
- }
634
- .eds-contrast .eds-feedback-text__icon--info {
635
- color: #64b3e7;
636
659
  }
637
- .eds-feedback-text__icon--warning {
638
- color: #ffca28;
639
- }
640
- .eds-feedback-text__icon--warning circle {
641
- fill: #181c56;
642
- }
643
- .eds-contrast .eds-feedback-text__icon--warning {
644
- color: #ffe082;
645
- }/* DO NOT CHANGE!*/
646
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
647
- .eds-fieldset {
648
- margin: 0;
649
- padding: 0;
650
- border: 0;
651
- }
652
- .eds-fieldset .eds-legend {
653
- margin: 0 0 0.5rem;
654
- }/* DO NOT CHANGE!*/
660
+ /* DO NOT CHANGE!*/
655
661
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
656
662
  .eds-switch {
657
663
  cursor: pointer;
@@ -761,7 +767,8 @@
761
767
  }
762
768
  .eds-switch__label--medium--bottom {
763
769
  font-size: 0.75rem;
764
- }/* DO NOT CHANGE!*/
770
+ }
771
+ /* DO NOT CHANGE!*/
765
772
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
766
773
  .eds-radio-panel__wrapper[focus-within] .eds-radio-panel__container {
767
774
  border-color: #181c56;
@@ -900,13 +907,8 @@
900
907
  stroke-dasharray: 48;
901
908
  stroke-dashoffset: 48;
902
909
  stroke-width: 0.375rem;
903
- }/* DO NOT CHANGE!*/
904
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
905
- textarea.eds-form-control.eds-textarea {
906
- min-height: 7.75rem;
907
- resize: vertical;
908
- line-height: 1.5rem;
909
- }/* DO NOT CHANGE!*/
910
+ }
911
+ /* DO NOT CHANGE!*/
910
912
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
911
913
  .eds-textfield__clear-button {
912
914
  background: none;
@@ -942,17 +944,15 @@ textarea.eds-form-control.eds-textarea {
942
944
  }
943
945
  .eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
944
946
  background-color: #8285a8;
945
- }/* DO NOT CHANGE!*/
947
+ }
948
+ /* DO NOT CHANGE!*/
946
949
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
947
- .eds-segmented-control {
948
- margin-top: 0.25rem;
949
- display: flex;
950
- background: #d1d4e3;
951
- border-radius: 0.5rem;
950
+ textarea.eds-form-control.eds-textarea {
951
+ min-height: 7.75rem;
952
+ resize: vertical;
953
+ line-height: 1.5rem;
952
954
  }
953
- .eds-contrast .eds-segmented-control {
954
- background: #393d79;
955
- }/* DO NOT CHANGE!*/
955
+ /* DO NOT CHANGE!*/
956
956
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
957
957
  .eds-segmented-choice {
958
958
  display: block;
@@ -1022,4 +1022,15 @@ textarea.eds-form-control.eds-textarea {
1022
1022
  }
1023
1023
  .eds-contrast .eds-segmented-choice input:focus:checked + .eds-base-segmented {
1024
1024
  box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121), inset 0 0 0 0.0625rem #ffffff, inset 0 0 0 calc(0.125rem + 0.0625rem) #181c56;
1025
- }
1025
+ }
1026
+ /* DO NOT CHANGE!*/
1027
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1028
+ .eds-segmented-control {
1029
+ margin-top: 0.25rem;
1030
+ display: flex;
1031
+ background: #d1d4e3;
1032
+ border-radius: 0.5rem;
1033
+ }
1034
+ .eds-contrast .eds-segmented-control {
1035
+ background: #393d79;
1036
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "5.4.19",
3
+ "version": "6.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": "^5.8.0",
30
+ "@entur/icons": "^6.0.0",
31
31
  "@entur/tokens": "^3.8.0",
32
- "@entur/tooltip": "^2.6.6",
33
- "@entur/typography": "^1.7.10",
32
+ "@entur/tooltip": "^2.6.8",
33
+ "@entur/typography": "^1.7.11",
34
34
  "@entur/utils": "^0.5.5",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "3b97ecb2ab0cba40d9f353d936dc0a87a6253108"
37
+ "gitHead": "48cdba2e353c9311d52550a98c6b025deb7b8270"
38
38
  }
@@ -1,23 +0,0 @@
1
- import React from 'react';
2
- import './Switch.scss';
3
- export type TravelSwitchProps = {
4
- /** Ekstra klassenavn */
5
- className?: string;
6
- /** Om switchen er checked eller ikke */
7
- checked?: boolean;
8
- /** Label for TravelSwitch-en. */
9
- children?: React.ReactNode;
10
- /** Posisjonen til label for TravelSwitch-en.
11
- * @default "right"
12
- */
13
- labelPlacement?: 'right' | 'bottom';
14
- /** Hvilken type reise som skal vises rikig ikon og farge for */
15
- transport: 'bus' | 'metro' | 'air' | 'tram' | 'rail' | 'water' | 'bike' | 'airportLinkBus' | 'airportLinkRail' | 'scooter';
16
- /** Callback for når verdien endres */
17
- onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
18
- /** Størrelsen på Switchen
19
- * @default "medium"
20
- */
21
- size?: 'medium' | 'large';
22
- } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
23
- export declare const TravelSwitch: React.FC<TravelSwitchProps>;