@entur/chip 0.9.1-beta.3 → 0.9.1-beta.4
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/ActionChip.d.ts +18 -0
- package/dist/ChoiceChip.d.ts +20 -0
- package/dist/ChoiceChipGroup.d.ts +16 -0
- package/dist/ChoiceChipGroupContext.d.ts +9 -0
- package/dist/FilterChip.d.ts +27 -0
- package/dist/TagChip.d.ts +18 -0
- package/dist/chip.cjs.development.js +234 -0
- package/dist/chip.cjs.development.js.map +1 -0
- package/dist/chip.cjs.production.min.js +2 -0
- package/dist/chip.cjs.production.min.js.map +1 -0
- package/dist/chip.esm.js +218 -227
- package/dist/chip.esm.js.map +1 -1
- package/dist/index.d.ts +6 -98
- package/dist/index.js +8 -0
- package/dist/styles.css +224 -204
- package/package.json +15 -25
- package/dist/chip.cjs.js +0 -235
- package/dist/chip.cjs.js.map +0 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,98 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
export
|
|
4
|
-
|
|
5
|
-
export
|
|
6
|
-
|
|
7
|
-
children: default_2.ReactNode;
|
|
8
|
-
/** Ekstra klassenavn */
|
|
9
|
-
className?: string;
|
|
10
|
-
/** Om chip-en er opptatt, f.eks med å oppdatere informasjon
|
|
11
|
-
* @default false
|
|
12
|
-
*/
|
|
13
|
-
loading?: boolean;
|
|
14
|
-
/** Størrelsen på chip
|
|
15
|
-
* @default 'medium'
|
|
16
|
-
*/
|
|
17
|
-
size?: 'small' | 'medium';
|
|
18
|
-
} & default_2.DetailedHTMLProps<default_2.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
|
|
19
|
-
|
|
20
|
-
export declare const ChoiceChip: default_2.ForwardRefExoticComponent<Omit<ChoiceChipProps, "ref"> & default_2.RefAttributes<HTMLInputElement>>;
|
|
21
|
-
|
|
22
|
-
export declare const ChoiceChipGroup: default_2.FC<ChoiceChipGroupProps>;
|
|
23
|
-
|
|
24
|
-
export declare type ChoiceChipGroupProps = {
|
|
25
|
-
/** Navnet til ChoiceChipsGroup */
|
|
26
|
-
name: string;
|
|
27
|
-
/** Verdien til den valgte ChoiceChipen */
|
|
28
|
-
value: string | null;
|
|
29
|
-
/** ChoiceChip-komponentene sendes inn som children */
|
|
30
|
-
children: default_2.ReactNode;
|
|
31
|
-
/** En callback som blir kalles hver gang en ChoiceChip klikkes på */
|
|
32
|
-
onChange: (e: default_2.ChangeEvent<HTMLInputElement>) => void;
|
|
33
|
-
/** Labelen til ChoiceChip-gruppen. */
|
|
34
|
-
label?: default_2.ReactNode;
|
|
35
|
-
[key: string]: any;
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
export declare type ChoiceChipProps = {
|
|
39
|
-
/** Ekstra klassenavn */
|
|
40
|
-
className?: string;
|
|
41
|
-
/** Om Choicechip er deaktivert eller ikke
|
|
42
|
-
* @default false
|
|
43
|
-
*/
|
|
44
|
-
disabled?: boolean;
|
|
45
|
-
/** Label til ChoiceChip */
|
|
46
|
-
children?: default_2.ReactNode;
|
|
47
|
-
/** Verdien til ChoiceChip */
|
|
48
|
-
value: string;
|
|
49
|
-
/** Størrelsen på chip
|
|
50
|
-
* @default 'medium'
|
|
51
|
-
*/
|
|
52
|
-
size?: 'small' | 'medium';
|
|
53
|
-
} & Omit<default_2.DetailedHTMLProps<default_2.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'value' | 'size'>;
|
|
54
|
-
|
|
55
|
-
export declare const FilterChip: default_2.ForwardRefExoticComponent<{
|
|
56
|
-
/** Ekstra klassenavn */
|
|
57
|
-
className?: string;
|
|
58
|
-
/** Label til FilterChip */
|
|
59
|
-
children?: default_2.ReactNode;
|
|
60
|
-
/** Verdien til FilterChip */
|
|
61
|
-
value: string;
|
|
62
|
-
/** Størrelsen på chip
|
|
63
|
-
* @default 'medium'
|
|
64
|
-
*/
|
|
65
|
-
size?: "small" | "medium";
|
|
66
|
-
} & Omit<default_2.InputHTMLAttributes<HTMLInputElement>, "value" | "size"> & default_2.RefAttributes<HTMLInputElement>>;
|
|
67
|
-
|
|
68
|
-
export declare type FilterChipProps = {
|
|
69
|
-
/** Ekstra klassenavn */
|
|
70
|
-
className?: string;
|
|
71
|
-
/** Label til FilterChip */
|
|
72
|
-
children?: default_2.ReactNode;
|
|
73
|
-
/** Verdien til FilterChip */
|
|
74
|
-
value: string;
|
|
75
|
-
/** Størrelsen på chip
|
|
76
|
-
* @default 'medium'
|
|
77
|
-
*/
|
|
78
|
-
size?: 'small' | 'medium';
|
|
79
|
-
} & Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'value' | 'size'>;
|
|
80
|
-
|
|
81
|
-
export declare const TagChip: default_2.ForwardRefExoticComponent<TagChipProps & default_2.RefAttributes<HTMLButtonElement>>;
|
|
82
|
-
|
|
83
|
-
export declare type TagChipProps = {
|
|
84
|
-
/** Teksten som vises i TagChip */
|
|
85
|
-
children: default_2.ReactNode;
|
|
86
|
-
/** Ekstra klassenavn */
|
|
87
|
-
className?: string;
|
|
88
|
-
/** Callback for når man klikker på krysset */
|
|
89
|
-
onClose: () => void;
|
|
90
|
-
/** Skjermlesertekst for X-knappen */
|
|
91
|
-
closeButtonAriaLabel?: string;
|
|
92
|
-
/** Størrelsen på chip
|
|
93
|
-
* @default 'medium'
|
|
94
|
-
*/
|
|
95
|
-
size?: 'small' | 'medium';
|
|
96
|
-
};
|
|
97
|
-
|
|
98
|
-
export { }
|
|
1
|
+
import './index.scss';
|
|
2
|
+
export * from './ChoiceChip';
|
|
3
|
+
export * from './ActionChip';
|
|
4
|
+
export * from './TagChip';
|
|
5
|
+
export * from './FilterChip';
|
|
6
|
+
export * from './ChoiceChipGroup';
|
package/dist/index.js
ADDED
package/dist/styles.css
CHANGED
|
@@ -1,201 +1,5 @@
|
|
|
1
1
|
/* DO NOT CHANGE!*/
|
|
2
2
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
|
-
/* DO NOT CHANGE!*/
|
|
4
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
5
|
-
/* DO NOT CHANGE!*/
|
|
6
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
7
|
-
[data-color-mode=light],
|
|
8
|
-
:root {
|
|
9
|
-
--components-chip-contrast-active: #8794d4;
|
|
10
|
-
--components-chip-contrast-border: rgba(174, 183, 226, 0.6980392157);
|
|
11
|
-
--components-chip-contrast-border-disabled: #949699;
|
|
12
|
-
--components-chip-contrast-default: rgba(255, 255, 255, 0);
|
|
13
|
-
--components-chip-contrast-hover: #626493;
|
|
14
|
-
--components-chip-contrast-icon-disabled: #b6b8ba;
|
|
15
|
-
--components-chip-contrast-icon-selected: #181c56;
|
|
16
|
-
--components-chip-contrast-icon-unselected: #ffffff;
|
|
17
|
-
--components-chip-contrast-text-disabled: #b6b8ba;
|
|
18
|
-
--components-chip-contrast-text-selected: #181c56;
|
|
19
|
-
--components-chip-contrast-text-unselected: #ffffff;
|
|
20
|
-
--components-chip-standard-active: #aeb7e2;
|
|
21
|
-
--components-chip-standard-border: rgba(84, 86, 140, 0.4);
|
|
22
|
-
--components-chip-standard-border-disabled: #949699;
|
|
23
|
-
--components-chip-standard-default: rgba(255, 255, 255, 0);
|
|
24
|
-
--components-chip-standard-hover: #d9ddf2;
|
|
25
|
-
--components-chip-standard-icon-disabled: #6e6f73;
|
|
26
|
-
--components-chip-standard-icon-selected: #181c56;
|
|
27
|
-
--components-chip-standard-icon-unselected: #181c56;
|
|
28
|
-
--components-chip-standard-text-disabled: #6e6f73;
|
|
29
|
-
--components-chip-standard-text-selected: #181c56;
|
|
30
|
-
--components-chip-standard-text-unselected: #181c56;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
[data-color-mode=dark] {
|
|
34
|
-
--components-chip-contrast-active: #8794d4;
|
|
35
|
-
--components-chip-contrast-border: rgba(174, 183, 226, 0.6980392157);
|
|
36
|
-
--components-chip-contrast-border-disabled: #949699;
|
|
37
|
-
--components-chip-contrast-default: rgba(255, 255, 255, 0);
|
|
38
|
-
--components-chip-contrast-hover: #626493;
|
|
39
|
-
--components-chip-contrast-icon-disabled: #b6b8ba;
|
|
40
|
-
--components-chip-contrast-icon-selected: #08091c;
|
|
41
|
-
--components-chip-contrast-icon-unselected: #e5e5e9;
|
|
42
|
-
--components-chip-contrast-text-disabled: #b6b8ba;
|
|
43
|
-
--components-chip-contrast-text-selected: #08091c;
|
|
44
|
-
--components-chip-contrast-text-unselected: #e5e5e9;
|
|
45
|
-
--components-chip-standard-active: #8794d4;
|
|
46
|
-
--components-chip-standard-border: rgba(174, 183, 226, 0.6980392157);
|
|
47
|
-
--components-chip-standard-border-disabled: #949699;
|
|
48
|
-
--components-chip-standard-default: rgba(255, 255, 255, 0);
|
|
49
|
-
--components-chip-standard-hover: #626493;
|
|
50
|
-
--components-chip-standard-icon-disabled: #b6b8ba;
|
|
51
|
-
--components-chip-standard-icon-selected: #08091c;
|
|
52
|
-
--components-chip-standard-icon-unselected: #e5e5e9;
|
|
53
|
-
--components-chip-standard-text-disabled: #b6b8ba;
|
|
54
|
-
--components-chip-standard-text-selected: #08091c;
|
|
55
|
-
--components-chip-standard-text-unselected: #e5e5e9;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
/* DO NOT CHANGE!*/
|
|
59
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
60
|
-
/* DO NOT CHANGE!*/
|
|
61
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
62
|
-
[data-color-mode=light],
|
|
63
|
-
:root {
|
|
64
|
-
--basecolors-frame-contrast: #181c56;
|
|
65
|
-
--basecolors-frame-contrastalt: #393d79;
|
|
66
|
-
--basecolors-frame-contrastalt-2: #292b6a;
|
|
67
|
-
--basecolors-frame-default: #ffffff;
|
|
68
|
-
--basecolors-frame-elevated: #ffffff;
|
|
69
|
-
--basecolors-frame-elevatedalt: #f6f6f9;
|
|
70
|
-
--basecolors-frame-subdued: #d9dae8;
|
|
71
|
-
--basecolors-frame-tint: #f6f6f9;
|
|
72
|
-
--basecolors-shape-accent: #181c56;
|
|
73
|
-
--basecolors-shape-bicycle-contrast: #00db9b;
|
|
74
|
-
--basecolors-shape-bicycle-default: #388f76;
|
|
75
|
-
--basecolors-shape-bus-contrast: #ff6392;
|
|
76
|
-
--basecolors-shape-bus-default: #c5044e;
|
|
77
|
-
--basecolors-shape-cableway-contrast: #b482fb;
|
|
78
|
-
--basecolors-shape-cableway-default: #78469a;
|
|
79
|
-
--basecolors-shape-disabled: #6e6f73;
|
|
80
|
-
--basecolors-shape-disabledalt: #b6b8ba;
|
|
81
|
-
--basecolors-shape-ferry-contrast: #6fdfff;
|
|
82
|
-
--basecolors-shape-ferry-default: #0c6693;
|
|
83
|
-
--basecolors-shape-funicular-contrast: #b482fb;
|
|
84
|
-
--basecolors-shape-funicular-default: #78469a;
|
|
85
|
-
--basecolors-shape-helicopter-contrast: #fbafea;
|
|
86
|
-
--basecolors-shape-helicopter-default: #800664;
|
|
87
|
-
--basecolors-shape-highlight: #ff5959;
|
|
88
|
-
--basecolors-shape-light: #ffffff;
|
|
89
|
-
--basecolors-shape-mask: #ffffff;
|
|
90
|
-
--basecolors-shape-maskalt: #ffffff;
|
|
91
|
-
--basecolors-shape-metro-contrast: #f08901;
|
|
92
|
-
--basecolors-shape-metro-default: #bf5826;
|
|
93
|
-
--basecolors-shape-mobility-contrast: #00db9b;
|
|
94
|
-
--basecolors-shape-mobility-default: #388f76;
|
|
95
|
-
--basecolors-shape-plane-contrast: #fbafea;
|
|
96
|
-
--basecolors-shape-plane-default: #800664;
|
|
97
|
-
--basecolors-shape-subdued: #626493;
|
|
98
|
-
--basecolors-shape-subduedalt: #d9dae8;
|
|
99
|
-
--basecolors-shape-taxi-contrast: #ffe082;
|
|
100
|
-
--basecolors-shape-taxi-default: #3d3e40;
|
|
101
|
-
--basecolors-shape-train-contrast: #42a5f5;
|
|
102
|
-
--basecolors-shape-train-default: #00367f;
|
|
103
|
-
--basecolors-shape-tram-contrast: #b482fb;
|
|
104
|
-
--basecolors-shape-tram-default: #78469a;
|
|
105
|
-
--basecolors-shape-walk-contrast: #8284ab;
|
|
106
|
-
--basecolors-shape-walk-default: #8d8e9c;
|
|
107
|
-
--basecolors-shape-airportlinkbus-contrast: #fbafea;
|
|
108
|
-
--basecolors-shape-airportlinkbus-default: #800664;
|
|
109
|
-
--basecolors-shape-airportlinkrail-contrast: #fbafea;
|
|
110
|
-
--basecolors-shape-airportlinkrail-default: #800664;
|
|
111
|
-
--basecolors-stroke-contrast: #aeb7e2;
|
|
112
|
-
--basecolors-stroke-default: #181c56;
|
|
113
|
-
--basecolors-stroke-disabled: #949699;
|
|
114
|
-
--basecolors-stroke-focus-contrast: #aeb7e2;
|
|
115
|
-
--basecolors-stroke-focus-standard: #181c56;
|
|
116
|
-
--basecolors-stroke-highlight: #ff5959;
|
|
117
|
-
--basecolors-stroke-light: #ffffff;
|
|
118
|
-
--basecolors-stroke-subdued: #8284ab;
|
|
119
|
-
--basecolors-stroke-subduedalt: #e3e6e8;
|
|
120
|
-
--basecolors-text-accent: #181c56;
|
|
121
|
-
--basecolors-text-disabled: #6e6f73;
|
|
122
|
-
--basecolors-text-disabledalt: #b6b8ba;
|
|
123
|
-
--basecolors-text-highlight: #ff5959;
|
|
124
|
-
--basecolors-text-light: #ffffff;
|
|
125
|
-
--basecolors-text-subdued: #626493;
|
|
126
|
-
--basecolors-text-subduedalt: #d9dae8;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
[data-color-mode=dark] {
|
|
130
|
-
--basecolors-frame-contrast: #212233;
|
|
131
|
-
--basecolors-frame-contrastalt: #141527;
|
|
132
|
-
--basecolors-frame-contrastalt-2: #08091c;
|
|
133
|
-
--basecolors-frame-default: #08091c;
|
|
134
|
-
--basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
|
|
135
|
-
--basecolors-frame-elevatedalt: #464755;
|
|
136
|
-
--basecolors-frame-subdued: #2d2e3e;
|
|
137
|
-
--basecolors-frame-tint: #141527;
|
|
138
|
-
--basecolors-shape-accent: #e5e5e9;
|
|
139
|
-
--basecolors-shape-bicycle-contrast: #4db295;
|
|
140
|
-
--basecolors-shape-bicycle-default: #4db295;
|
|
141
|
-
--basecolors-shape-bus-contrast: #ef7398;
|
|
142
|
-
--basecolors-shape-bus-default: #ef7398;
|
|
143
|
-
--basecolors-shape-cableway-contrast: #b898e5;
|
|
144
|
-
--basecolors-shape-cableway-default: #b898e5;
|
|
145
|
-
--basecolors-shape-disabled: #b6b8ba;
|
|
146
|
-
--basecolors-shape-disabledalt: #b3b4bd;
|
|
147
|
-
--basecolors-shape-ferry-contrast: #8ccfe2;
|
|
148
|
-
--basecolors-shape-ferry-default: #8ccfe2;
|
|
149
|
-
--basecolors-shape-funicular-contrast: #b898e5;
|
|
150
|
-
--basecolors-shape-funicular-default: #b898e5;
|
|
151
|
-
--basecolors-shape-helicopter-contrast: #f2b8e5;
|
|
152
|
-
--basecolors-shape-helicopter-default: #f2b8e5;
|
|
153
|
-
--basecolors-shape-highlight: #ff9494;
|
|
154
|
-
--basecolors-shape-light: #e5e5e9;
|
|
155
|
-
--basecolors-shape-mask: #2d2e3e;
|
|
156
|
-
--basecolors-shape-maskalt: #393a49;
|
|
157
|
-
--basecolors-shape-metro-contrast: #dd973c;
|
|
158
|
-
--basecolors-shape-metro-default: #dd973c;
|
|
159
|
-
--basecolors-shape-mobility-contrast: #4db295;
|
|
160
|
-
--basecolors-shape-mobility-default: #4db295;
|
|
161
|
-
--basecolors-shape-plane-contrast: #f2b8e5;
|
|
162
|
-
--basecolors-shape-plane-default: #f2b8e5;
|
|
163
|
-
--basecolors-shape-subdued: #b3b4bd;
|
|
164
|
-
--basecolors-shape-subduedalt: #b3b4bd;
|
|
165
|
-
--basecolors-shape-taxi-contrast: #ffe082;
|
|
166
|
-
--basecolors-shape-taxi-default: #ffe082;
|
|
167
|
-
--basecolors-shape-train-contrast: #60a2d7;
|
|
168
|
-
--basecolors-shape-train-default: #60a2d7;
|
|
169
|
-
--basecolors-shape-tram-contrast: #b898e5;
|
|
170
|
-
--basecolors-shape-tram-default: #b898e5;
|
|
171
|
-
--basecolors-shape-walk-contrast: #8d8e9c;
|
|
172
|
-
--basecolors-shape-walk-default: #8d8e9c;
|
|
173
|
-
--basecolors-shape-airportlinkbus-contrast: #f2b8e5;
|
|
174
|
-
--basecolors-shape-airportlinkbus-default: #f2b8e5;
|
|
175
|
-
--basecolors-shape-airportlinkrail-contrast: #f2b8e5;
|
|
176
|
-
--basecolors-shape-airportlinkrail-default: #f2b8e5;
|
|
177
|
-
--basecolors-stroke-contrast: #aeb7e2;
|
|
178
|
-
--basecolors-stroke-default: #b3b4bd;
|
|
179
|
-
--basecolors-stroke-disabled: #e3e6e8;
|
|
180
|
-
--basecolors-stroke-focus-contrast: #aeb7e2;
|
|
181
|
-
--basecolors-stroke-focus-standard: #aeb7e2;
|
|
182
|
-
--basecolors-stroke-highlight: #ff9494;
|
|
183
|
-
--basecolors-stroke-light: #b3b4bd;
|
|
184
|
-
--basecolors-stroke-subdued: #81828f;
|
|
185
|
-
--basecolors-stroke-subduedalt: #949699;
|
|
186
|
-
--basecolors-text-accent: #e5e5e9;
|
|
187
|
-
--basecolors-text-disabled: #b6b8ba;
|
|
188
|
-
--basecolors-text-disabledalt: #b6b8ba;
|
|
189
|
-
--basecolors-text-highlight: #ff9494;
|
|
190
|
-
--basecolors-text-light: #e5e5e9;
|
|
191
|
-
--basecolors-text-subdued: #b3b4bd;
|
|
192
|
-
--basecolors-text-subduedalt: #b3b4bd;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
:root {
|
|
196
|
-
--eds-chip: 1;
|
|
197
|
-
}/* DO NOT CHANGE!*/
|
|
198
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
199
3
|
.eds-chip {
|
|
200
4
|
background: transparent;
|
|
201
5
|
border: 0.0625rem solid var(--components-chip-standard-border);
|
|
@@ -237,7 +41,8 @@
|
|
|
237
41
|
}
|
|
238
42
|
.eds-chip--trailing-icon > svg:last-of-type {
|
|
239
43
|
margin-left: 0.25rem;
|
|
240
|
-
}
|
|
44
|
+
}
|
|
45
|
+
/* DO NOT CHANGE!*/
|
|
241
46
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
242
47
|
.eds-choice-chip {
|
|
243
48
|
cursor: pointer;
|
|
@@ -247,7 +52,8 @@
|
|
|
247
52
|
transition: all 0.1s ease-out;
|
|
248
53
|
}
|
|
249
54
|
.eds-choice-chip__input {
|
|
250
|
-
appearance: none;
|
|
55
|
+
-moz-appearance: none;
|
|
56
|
+
appearance: none;
|
|
251
57
|
height: 0;
|
|
252
58
|
position: absolute;
|
|
253
59
|
width: 0;
|
|
@@ -309,7 +115,8 @@
|
|
|
309
115
|
opacity: 1;
|
|
310
116
|
border-color: var(--components-chip-contrast-border-disabled);
|
|
311
117
|
color: var(--components-chip-contrast-text-disabled);
|
|
312
|
-
}
|
|
118
|
+
}
|
|
119
|
+
/* DO NOT CHANGE!*/
|
|
313
120
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
314
121
|
/* DO NOT CHANGE!*/
|
|
315
122
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -514,26 +321,34 @@
|
|
|
514
321
|
}
|
|
515
322
|
.eds-action-chip:focus-visible {
|
|
516
323
|
outline: 2px solid #181c56;
|
|
324
|
+
outline-color: #181c56;
|
|
517
325
|
outline-color: var(--basecolors-stroke-focus-standard);
|
|
518
326
|
outline-offset: 0.125rem;
|
|
519
327
|
}
|
|
520
328
|
.eds-contrast .eds-action-chip:focus-visible {
|
|
329
|
+
outline-color: #aeb7e2;
|
|
521
330
|
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
522
331
|
}
|
|
523
332
|
.eds-action-chip:hover {
|
|
333
|
+
border-color: rgba(84, 86, 140, 0.4);
|
|
524
334
|
border-color: var(--components-chip-standard-border);
|
|
335
|
+
background-color: #d9ddf2;
|
|
525
336
|
background-color: var(--components-chip-standard-hover);
|
|
526
337
|
}
|
|
527
338
|
.eds-contrast .eds-action-chip:hover {
|
|
528
339
|
border-color: transparent;
|
|
340
|
+
background-color: #626493;
|
|
529
341
|
background-color: var(--components-chip-contrast-hover);
|
|
530
342
|
}
|
|
531
343
|
.eds-action-chip:active {
|
|
344
|
+
background-color: #aeb7e2;
|
|
532
345
|
background-color: var(--components-chip-standard-active);
|
|
533
346
|
border-color: transparent;
|
|
534
347
|
}
|
|
535
348
|
.eds-contrast .eds-action-chip:active {
|
|
349
|
+
background-color: #8794d4;
|
|
536
350
|
background-color: var(--components-chip-contrast-active);
|
|
351
|
+
color: #181c56;
|
|
537
352
|
color: var(--components-chip-contrast-text-selected);
|
|
538
353
|
}
|
|
539
354
|
.eds-action-chip--disabled {
|
|
@@ -542,19 +357,24 @@
|
|
|
542
357
|
}
|
|
543
358
|
.eds-action-chip--disabled__wrapper {
|
|
544
359
|
cursor: not-allowed;
|
|
360
|
+
width: -moz-fit-content;
|
|
545
361
|
width: fit-content;
|
|
546
362
|
}
|
|
547
363
|
.eds-contrast .eds-action-chip__loading-dots .eds-loading-dots__dot {
|
|
548
364
|
background-color: var(--colors-brand-white);
|
|
549
|
-
}
|
|
365
|
+
}
|
|
366
|
+
/* DO NOT CHANGE!*/
|
|
550
367
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
551
368
|
.eds-tag-chip {
|
|
552
369
|
cursor: default;
|
|
553
370
|
padding-right: 0.125rem;
|
|
371
|
+
width: -moz-fit-content;
|
|
554
372
|
width: fit-content;
|
|
555
373
|
}
|
|
556
374
|
.eds-tag-chip__close-button {
|
|
557
|
-
appearance: none;
|
|
375
|
+
-webkit-appearance: none;
|
|
376
|
+
-moz-appearance: none;
|
|
377
|
+
appearance: none;
|
|
558
378
|
background: none;
|
|
559
379
|
border: none;
|
|
560
380
|
border-radius: 50%;
|
|
@@ -593,10 +413,12 @@
|
|
|
593
413
|
.eds-contrast .eds-tag-chip__close-button:active {
|
|
594
414
|
background-color: var(--components-chip-contrast-active);
|
|
595
415
|
color: var(--components-chip-contrast-text-selected);
|
|
596
|
-
}
|
|
416
|
+
}
|
|
417
|
+
/* DO NOT CHANGE!*/
|
|
597
418
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
598
419
|
.eds-filter-chip {
|
|
599
420
|
cursor: pointer;
|
|
421
|
+
width: -moz-fit-content;
|
|
600
422
|
width: fit-content;
|
|
601
423
|
display: flex;
|
|
602
424
|
}
|
|
@@ -685,10 +507,208 @@
|
|
|
685
507
|
100% {
|
|
686
508
|
stroke-dashoffset: 0;
|
|
687
509
|
}
|
|
688
|
-
}
|
|
510
|
+
}
|
|
511
|
+
/* DO NOT CHANGE!*/
|
|
512
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
513
|
+
/* DO NOT CHANGE!*/
|
|
514
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
515
|
+
/* DO NOT CHANGE!*/
|
|
516
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
517
|
+
[data-color-mode=light],
|
|
518
|
+
:root {
|
|
519
|
+
--components-chip-contrast-active: #8794d4;
|
|
520
|
+
--components-chip-contrast-border: rgba(174, 183, 226, 0.6980392157);
|
|
521
|
+
--components-chip-contrast-border-disabled: #949699;
|
|
522
|
+
--components-chip-contrast-default: rgba(255, 255, 255, 0);
|
|
523
|
+
--components-chip-contrast-hover: #626493;
|
|
524
|
+
--components-chip-contrast-icon-disabled: #b6b8ba;
|
|
525
|
+
--components-chip-contrast-icon-selected: #181c56;
|
|
526
|
+
--components-chip-contrast-icon-unselected: #ffffff;
|
|
527
|
+
--components-chip-contrast-text-disabled: #b6b8ba;
|
|
528
|
+
--components-chip-contrast-text-selected: #181c56;
|
|
529
|
+
--components-chip-contrast-text-unselected: #ffffff;
|
|
530
|
+
--components-chip-standard-active: #aeb7e2;
|
|
531
|
+
--components-chip-standard-border: rgba(84, 86, 140, 0.4);
|
|
532
|
+
--components-chip-standard-border-disabled: #949699;
|
|
533
|
+
--components-chip-standard-default: rgba(255, 255, 255, 0);
|
|
534
|
+
--components-chip-standard-hover: #d9ddf2;
|
|
535
|
+
--components-chip-standard-icon-disabled: #6e6f73;
|
|
536
|
+
--components-chip-standard-icon-selected: #181c56;
|
|
537
|
+
--components-chip-standard-icon-unselected: #181c56;
|
|
538
|
+
--components-chip-standard-text-disabled: #6e6f73;
|
|
539
|
+
--components-chip-standard-text-selected: #181c56;
|
|
540
|
+
--components-chip-standard-text-unselected: #181c56;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
[data-color-mode=dark] {
|
|
544
|
+
--components-chip-contrast-active: #8794d4;
|
|
545
|
+
--components-chip-contrast-border: rgba(174, 183, 226, 0.6980392157);
|
|
546
|
+
--components-chip-contrast-border-disabled: #949699;
|
|
547
|
+
--components-chip-contrast-default: rgba(255, 255, 255, 0);
|
|
548
|
+
--components-chip-contrast-hover: #626493;
|
|
549
|
+
--components-chip-contrast-icon-disabled: #b6b8ba;
|
|
550
|
+
--components-chip-contrast-icon-selected: #08091c;
|
|
551
|
+
--components-chip-contrast-icon-unselected: #e5e5e9;
|
|
552
|
+
--components-chip-contrast-text-disabled: #b6b8ba;
|
|
553
|
+
--components-chip-contrast-text-selected: #08091c;
|
|
554
|
+
--components-chip-contrast-text-unselected: #e5e5e9;
|
|
555
|
+
--components-chip-standard-active: #8794d4;
|
|
556
|
+
--components-chip-standard-border: rgba(174, 183, 226, 0.6980392157);
|
|
557
|
+
--components-chip-standard-border-disabled: #949699;
|
|
558
|
+
--components-chip-standard-default: rgba(255, 255, 255, 0);
|
|
559
|
+
--components-chip-standard-hover: #626493;
|
|
560
|
+
--components-chip-standard-icon-disabled: #b6b8ba;
|
|
561
|
+
--components-chip-standard-icon-selected: #08091c;
|
|
562
|
+
--components-chip-standard-icon-unselected: #e5e5e9;
|
|
563
|
+
--components-chip-standard-text-disabled: #b6b8ba;
|
|
564
|
+
--components-chip-standard-text-selected: #08091c;
|
|
565
|
+
--components-chip-standard-text-unselected: #e5e5e9;
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
/* DO NOT CHANGE!*/
|
|
569
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
570
|
+
/* DO NOT CHANGE!*/
|
|
571
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
572
|
+
[data-color-mode=light],
|
|
573
|
+
:root {
|
|
574
|
+
--basecolors-frame-contrast: #181c56;
|
|
575
|
+
--basecolors-frame-contrastalt: #393d79;
|
|
576
|
+
--basecolors-frame-contrastalt-2: #292b6a;
|
|
577
|
+
--basecolors-frame-default: #ffffff;
|
|
578
|
+
--basecolors-frame-elevated: #ffffff;
|
|
579
|
+
--basecolors-frame-elevatedalt: #f6f6f9;
|
|
580
|
+
--basecolors-frame-subdued: #d9dae8;
|
|
581
|
+
--basecolors-frame-tint: #f6f6f9;
|
|
582
|
+
--basecolors-shape-accent: #181c56;
|
|
583
|
+
--basecolors-shape-bicycle-contrast: #00db9b;
|
|
584
|
+
--basecolors-shape-bicycle-default: #388f76;
|
|
585
|
+
--basecolors-shape-bus-contrast: #ff6392;
|
|
586
|
+
--basecolors-shape-bus-default: #c5044e;
|
|
587
|
+
--basecolors-shape-cableway-contrast: #b482fb;
|
|
588
|
+
--basecolors-shape-cableway-default: #78469a;
|
|
589
|
+
--basecolors-shape-disabled: #6e6f73;
|
|
590
|
+
--basecolors-shape-disabledalt: #b6b8ba;
|
|
591
|
+
--basecolors-shape-ferry-contrast: #6fdfff;
|
|
592
|
+
--basecolors-shape-ferry-default: #0c6693;
|
|
593
|
+
--basecolors-shape-funicular-contrast: #b482fb;
|
|
594
|
+
--basecolors-shape-funicular-default: #78469a;
|
|
595
|
+
--basecolors-shape-helicopter-contrast: #fbafea;
|
|
596
|
+
--basecolors-shape-helicopter-default: #800664;
|
|
597
|
+
--basecolors-shape-highlight: #ff5959;
|
|
598
|
+
--basecolors-shape-light: #ffffff;
|
|
599
|
+
--basecolors-shape-mask: #ffffff;
|
|
600
|
+
--basecolors-shape-maskalt: #ffffff;
|
|
601
|
+
--basecolors-shape-metro-contrast: #f08901;
|
|
602
|
+
--basecolors-shape-metro-default: #bf5826;
|
|
603
|
+
--basecolors-shape-mobility-contrast: #00db9b;
|
|
604
|
+
--basecolors-shape-mobility-default: #388f76;
|
|
605
|
+
--basecolors-shape-plane-contrast: #fbafea;
|
|
606
|
+
--basecolors-shape-plane-default: #800664;
|
|
607
|
+
--basecolors-shape-subdued: #626493;
|
|
608
|
+
--basecolors-shape-subduedalt: #d9dae8;
|
|
609
|
+
--basecolors-shape-taxi-contrast: #ffe082;
|
|
610
|
+
--basecolors-shape-taxi-default: #3d3e40;
|
|
611
|
+
--basecolors-shape-train-contrast: #42a5f5;
|
|
612
|
+
--basecolors-shape-train-default: #00367f;
|
|
613
|
+
--basecolors-shape-tram-contrast: #b482fb;
|
|
614
|
+
--basecolors-shape-tram-default: #78469a;
|
|
615
|
+
--basecolors-shape-walk-contrast: #8284ab;
|
|
616
|
+
--basecolors-shape-walk-default: #8d8e9c;
|
|
617
|
+
--basecolors-shape-airportlinkbus-contrast: #fbafea;
|
|
618
|
+
--basecolors-shape-airportlinkbus-default: #800664;
|
|
619
|
+
--basecolors-shape-airportlinkrail-contrast: #fbafea;
|
|
620
|
+
--basecolors-shape-airportlinkrail-default: #800664;
|
|
621
|
+
--basecolors-stroke-contrast: #aeb7e2;
|
|
622
|
+
--basecolors-stroke-default: #181c56;
|
|
623
|
+
--basecolors-stroke-disabled: #949699;
|
|
624
|
+
--basecolors-stroke-focus-contrast: #aeb7e2;
|
|
625
|
+
--basecolors-stroke-focus-standard: #181c56;
|
|
626
|
+
--basecolors-stroke-highlight: #ff5959;
|
|
627
|
+
--basecolors-stroke-light: #ffffff;
|
|
628
|
+
--basecolors-stroke-subdued: #8284ab;
|
|
629
|
+
--basecolors-stroke-subduedalt: #e3e6e8;
|
|
630
|
+
--basecolors-text-accent: #181c56;
|
|
631
|
+
--basecolors-text-disabled: #6e6f73;
|
|
632
|
+
--basecolors-text-disabledalt: #b6b8ba;
|
|
633
|
+
--basecolors-text-highlight: #ff5959;
|
|
634
|
+
--basecolors-text-light: #ffffff;
|
|
635
|
+
--basecolors-text-subdued: #626493;
|
|
636
|
+
--basecolors-text-subduedalt: #d9dae8;
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
[data-color-mode=dark] {
|
|
640
|
+
--basecolors-frame-contrast: #212233;
|
|
641
|
+
--basecolors-frame-contrastalt: #141527;
|
|
642
|
+
--basecolors-frame-contrastalt-2: #08091c;
|
|
643
|
+
--basecolors-frame-default: #08091c;
|
|
644
|
+
--basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
|
|
645
|
+
--basecolors-frame-elevatedalt: #464755;
|
|
646
|
+
--basecolors-frame-subdued: #2d2e3e;
|
|
647
|
+
--basecolors-frame-tint: #141527;
|
|
648
|
+
--basecolors-shape-accent: #e5e5e9;
|
|
649
|
+
--basecolors-shape-bicycle-contrast: #4db295;
|
|
650
|
+
--basecolors-shape-bicycle-default: #4db295;
|
|
651
|
+
--basecolors-shape-bus-contrast: #ef7398;
|
|
652
|
+
--basecolors-shape-bus-default: #ef7398;
|
|
653
|
+
--basecolors-shape-cableway-contrast: #b898e5;
|
|
654
|
+
--basecolors-shape-cableway-default: #b898e5;
|
|
655
|
+
--basecolors-shape-disabled: #b6b8ba;
|
|
656
|
+
--basecolors-shape-disabledalt: #b3b4bd;
|
|
657
|
+
--basecolors-shape-ferry-contrast: #8ccfe2;
|
|
658
|
+
--basecolors-shape-ferry-default: #8ccfe2;
|
|
659
|
+
--basecolors-shape-funicular-contrast: #b898e5;
|
|
660
|
+
--basecolors-shape-funicular-default: #b898e5;
|
|
661
|
+
--basecolors-shape-helicopter-contrast: #f2b8e5;
|
|
662
|
+
--basecolors-shape-helicopter-default: #f2b8e5;
|
|
663
|
+
--basecolors-shape-highlight: #ff9494;
|
|
664
|
+
--basecolors-shape-light: #e5e5e9;
|
|
665
|
+
--basecolors-shape-mask: #2d2e3e;
|
|
666
|
+
--basecolors-shape-maskalt: #393a49;
|
|
667
|
+
--basecolors-shape-metro-contrast: #dd973c;
|
|
668
|
+
--basecolors-shape-metro-default: #dd973c;
|
|
669
|
+
--basecolors-shape-mobility-contrast: #4db295;
|
|
670
|
+
--basecolors-shape-mobility-default: #4db295;
|
|
671
|
+
--basecolors-shape-plane-contrast: #f2b8e5;
|
|
672
|
+
--basecolors-shape-plane-default: #f2b8e5;
|
|
673
|
+
--basecolors-shape-subdued: #b3b4bd;
|
|
674
|
+
--basecolors-shape-subduedalt: #b3b4bd;
|
|
675
|
+
--basecolors-shape-taxi-contrast: #ffe082;
|
|
676
|
+
--basecolors-shape-taxi-default: #ffe082;
|
|
677
|
+
--basecolors-shape-train-contrast: #60a2d7;
|
|
678
|
+
--basecolors-shape-train-default: #60a2d7;
|
|
679
|
+
--basecolors-shape-tram-contrast: #b898e5;
|
|
680
|
+
--basecolors-shape-tram-default: #b898e5;
|
|
681
|
+
--basecolors-shape-walk-contrast: #8d8e9c;
|
|
682
|
+
--basecolors-shape-walk-default: #8d8e9c;
|
|
683
|
+
--basecolors-shape-airportlinkbus-contrast: #f2b8e5;
|
|
684
|
+
--basecolors-shape-airportlinkbus-default: #f2b8e5;
|
|
685
|
+
--basecolors-shape-airportlinkrail-contrast: #f2b8e5;
|
|
686
|
+
--basecolors-shape-airportlinkrail-default: #f2b8e5;
|
|
687
|
+
--basecolors-stroke-contrast: #aeb7e2;
|
|
688
|
+
--basecolors-stroke-default: #b3b4bd;
|
|
689
|
+
--basecolors-stroke-disabled: #e3e6e8;
|
|
690
|
+
--basecolors-stroke-focus-contrast: #aeb7e2;
|
|
691
|
+
--basecolors-stroke-focus-standard: #aeb7e2;
|
|
692
|
+
--basecolors-stroke-highlight: #ff9494;
|
|
693
|
+
--basecolors-stroke-light: #b3b4bd;
|
|
694
|
+
--basecolors-stroke-subdued: #81828f;
|
|
695
|
+
--basecolors-stroke-subduedalt: #949699;
|
|
696
|
+
--basecolors-text-accent: #e5e5e9;
|
|
697
|
+
--basecolors-text-disabled: #b6b8ba;
|
|
698
|
+
--basecolors-text-disabledalt: #b6b8ba;
|
|
699
|
+
--basecolors-text-highlight: #ff9494;
|
|
700
|
+
--basecolors-text-light: #e5e5e9;
|
|
701
|
+
--basecolors-text-subdued: #b3b4bd;
|
|
702
|
+
--basecolors-text-subduedalt: #b3b4bd;
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
:root {
|
|
706
|
+
--eds-chip: 1;
|
|
707
|
+
}
|
|
708
|
+
/* DO NOT CHANGE!*/
|
|
689
709
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
690
710
|
:where(.eds-choice-chips-group) {
|
|
691
711
|
display: flex;
|
|
692
712
|
row-gap: 0.5rem;
|
|
693
713
|
flex-wrap: wrap;
|
|
694
|
-
}
|
|
714
|
+
}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/chip",
|
|
3
|
-
"version": "0.9.1-beta.
|
|
3
|
+
"version": "0.9.1-beta.4",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
|
-
"main": "dist/
|
|
5
|
+
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/chip.esm.js",
|
|
7
|
-
"
|
|
7
|
+
"typings": "dist/index.d.ts",
|
|
8
8
|
"files": [
|
|
9
9
|
"dist"
|
|
10
10
|
],
|
|
@@ -17,35 +17,25 @@
|
|
|
17
17
|
"access": "public"
|
|
18
18
|
},
|
|
19
19
|
"scripts": {
|
|
20
|
-
"start": "
|
|
21
|
-
"build": "
|
|
22
|
-
"test": "
|
|
23
|
-
"lint": "
|
|
20
|
+
"start": "dts watch --noClean",
|
|
21
|
+
"build": "dts build",
|
|
22
|
+
"test": "dts test",
|
|
23
|
+
"lint": "dts lint src"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
26
|
"react": ">=16.8.0",
|
|
27
27
|
"react-dom": ">=16.8.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@entur/form": "^8.3.2-beta.
|
|
31
|
-
"@entur/icons": "^8.0.
|
|
32
|
-
"@entur/loader": "^0.5.30-beta.
|
|
33
|
-
"@entur/tokens": "^3.19.
|
|
34
|
-
"@entur/utils": "^0.12.
|
|
35
|
-
"classnames": "^2.
|
|
30
|
+
"@entur/form": "^8.3.2-beta.4",
|
|
31
|
+
"@entur/icons": "^8.0.0",
|
|
32
|
+
"@entur/loader": "^0.5.30-beta.4",
|
|
33
|
+
"@entur/tokens": "^3.19.1",
|
|
34
|
+
"@entur/utils": "^0.12.3",
|
|
35
|
+
"classnames": "^2.3.1"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"
|
|
39
|
-
"@testing-library/react": "^10.4.9",
|
|
40
|
-
"@testing-library/user-event": "14.6.1",
|
|
41
|
-
"@vitejs/plugin-react": "^5.0.1",
|
|
42
|
-
"eslint": "^7.32.0",
|
|
43
|
-
"jest": "^29.0.0",
|
|
44
|
-
"jest-environment-jsdom": "^29.0.0",
|
|
45
|
-
"ts-jest": "^29.0.0",
|
|
46
|
-
"typescript": "^5.9.2",
|
|
47
|
-
"vite": "^7.1.3",
|
|
48
|
-
"vite-plugin-dts": "^4.5.4"
|
|
38
|
+
"dts-cli": "2.0.5"
|
|
49
39
|
},
|
|
50
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "8d064eda2fb3e82dc87f08625f7833f92737f32e"
|
|
51
41
|
}
|