@entur/chip 0.9.1-beta.9 → 0.9.1

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 (18) hide show
  1. package/dist/chip.cjs.js +235 -0
  2. package/dist/chip.cjs.js.map +1 -0
  3. package/dist/chip.esm.js +227 -218
  4. package/dist/chip.esm.js.map +1 -1
  5. package/dist/index.d.ts +98 -6
  6. package/dist/styles.css +246 -266
  7. package/package.json +25 -15
  8. package/dist/ActionChip.d.ts +0 -18
  9. package/dist/ChoiceChip.d.ts +0 -20
  10. package/dist/ChoiceChipGroup.d.ts +0 -16
  11. package/dist/ChoiceChipGroupContext.d.ts +0 -9
  12. package/dist/FilterChip.d.ts +0 -27
  13. package/dist/TagChip.d.ts +0 -18
  14. package/dist/chip.cjs.development.js +0 -234
  15. package/dist/chip.cjs.development.js.map +0 -1
  16. package/dist/chip.cjs.production.min.js +0 -2
  17. package/dist/chip.cjs.production.min.js.map +0 -1
  18. package/dist/index.js +0 -8
package/dist/styles.css CHANGED
@@ -1,5 +1,244 @@
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
+ .eds-chip {
200
+ background: transparent;
201
+ border: 0.0625rem solid var(--components-chip-standard-border);
202
+ border-radius: 1rem;
203
+ color: var(--components-chip-standard-text-unselected);
204
+ font-family: inherit;
205
+ transition: background 0.1s ease-out, border 0.1s ease-out;
206
+ display: flex;
207
+ justify-content: center;
208
+ align-items: center;
209
+ white-space: nowrap;
210
+ }
211
+ .eds-chip svg {
212
+ font-size: 0.875rem;
213
+ }
214
+ .eds-contrast .eds-chip {
215
+ background-color: transparent;
216
+ color: var(--components-chip-contrast-text-unselected);
217
+ border-color: var(--components-chip-contrast-border);
218
+ }
219
+ .eds-chip--size-small {
220
+ height: 1.5rem;
221
+ min-width: 2.5rem;
222
+ padding: 0 0.5rem;
223
+ font-size: 0.75rem;
224
+ }
225
+ .eds-chip--size-small .eds-tag-chip__close-button svg {
226
+ width: 1rem;
227
+ height: 1rem;
228
+ }
229
+ .eds-chip--size-medium {
230
+ height: 2rem;
231
+ min-width: 3rem;
232
+ padding: 0 0.75rem;
233
+ font-size: 0.875rem;
234
+ }
235
+ .eds-chip--leading-icon > svg:first-of-type {
236
+ margin-right: 0.25rem;
237
+ }
238
+ .eds-chip--trailing-icon > svg:last-of-type {
239
+ margin-left: 0.25rem;
240
+ }/* DO NOT CHANGE!*/
241
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
242
  .eds-choice-chip {
4
243
  cursor: pointer;
5
244
  display: inline-block;
@@ -8,8 +247,7 @@
8
247
  transition: all 0.1s ease-out;
9
248
  }
10
249
  .eds-choice-chip__input {
11
- -moz-appearance: none;
12
- appearance: none;
250
+ appearance: none;
13
251
  height: 0;
14
252
  position: absolute;
15
253
  width: 0;
@@ -71,52 +309,7 @@
71
309
  opacity: 1;
72
310
  border-color: var(--components-chip-contrast-border-disabled);
73
311
  color: var(--components-chip-contrast-text-disabled);
74
- }
75
- /* DO NOT CHANGE!*/
76
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
77
- .eds-chip {
78
- background: transparent;
79
- border: 0.0625rem solid var(--components-chip-standard-border);
80
- border-radius: 1rem;
81
- color: var(--components-chip-standard-text-unselected);
82
- font-family: inherit;
83
- transition: background 0.1s ease-out, border 0.1s ease-out;
84
- display: flex;
85
- justify-content: center;
86
- align-items: center;
87
- white-space: nowrap;
88
- }
89
- .eds-chip svg {
90
- font-size: 0.875rem;
91
- }
92
- .eds-contrast .eds-chip {
93
- background-color: transparent;
94
- color: var(--components-chip-contrast-text-unselected);
95
- border-color: var(--components-chip-contrast-border);
96
- }
97
- .eds-chip--size-small {
98
- height: 1.5rem;
99
- min-width: 2.5rem;
100
- padding: 0 0.5rem;
101
- font-size: 0.75rem;
102
- }
103
- .eds-chip--size-small .eds-tag-chip__close-button svg {
104
- width: 1rem;
105
- height: 1rem;
106
- }
107
- .eds-chip--size-medium {
108
- height: 2rem;
109
- min-width: 3rem;
110
- padding: 0 0.75rem;
111
- font-size: 0.875rem;
112
- }
113
- .eds-chip--leading-icon > svg:first-of-type {
114
- margin-right: 0.25rem;
115
- }
116
- .eds-chip--trailing-icon > svg:last-of-type {
117
- margin-left: 0.25rem;
118
- }
119
- /* DO NOT CHANGE!*/
312
+ }/* DO NOT CHANGE!*/
120
313
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
121
314
  /* DO NOT CHANGE!*/
122
315
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -321,34 +514,26 @@
321
514
  }
322
515
  .eds-action-chip:focus-visible {
323
516
  outline: 2px solid #181c56;
324
- outline-color: #181c56;
325
517
  outline-color: var(--basecolors-stroke-focus-standard);
326
518
  outline-offset: 0.125rem;
327
519
  }
328
520
  .eds-contrast .eds-action-chip:focus-visible {
329
- outline-color: #aeb7e2;
330
521
  outline-color: var(--basecolors-stroke-focus-contrast);
331
522
  }
332
523
  .eds-action-chip:hover {
333
- border-color: rgba(84, 86, 140, 0.4);
334
524
  border-color: var(--components-chip-standard-border);
335
- background-color: #d9ddf2;
336
525
  background-color: var(--components-chip-standard-hover);
337
526
  }
338
527
  .eds-contrast .eds-action-chip:hover {
339
528
  border-color: transparent;
340
- background-color: #626493;
341
529
  background-color: var(--components-chip-contrast-hover);
342
530
  }
343
531
  .eds-action-chip:active {
344
- background-color: #aeb7e2;
345
532
  background-color: var(--components-chip-standard-active);
346
533
  border-color: transparent;
347
534
  }
348
535
  .eds-contrast .eds-action-chip:active {
349
- background-color: #8794d4;
350
536
  background-color: var(--components-chip-contrast-active);
351
- color: #181c56;
352
537
  color: var(--components-chip-contrast-text-selected);
353
538
  }
354
539
  .eds-action-chip--disabled {
@@ -357,24 +542,19 @@
357
542
  }
358
543
  .eds-action-chip--disabled__wrapper {
359
544
  cursor: not-allowed;
360
- width: -moz-fit-content;
361
545
  width: fit-content;
362
546
  }
363
547
  .eds-contrast .eds-action-chip__loading-dots .eds-loading-dots__dot {
364
548
  background-color: var(--colors-brand-white);
365
- }
366
- /* DO NOT CHANGE!*/
549
+ }/* DO NOT CHANGE!*/
367
550
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
368
551
  .eds-tag-chip {
369
552
  cursor: default;
370
553
  padding-right: 0.125rem;
371
- width: -moz-fit-content;
372
554
  width: fit-content;
373
555
  }
374
556
  .eds-tag-chip__close-button {
375
- -webkit-appearance: none;
376
- -moz-appearance: none;
377
- appearance: none;
557
+ appearance: none;
378
558
  background: none;
379
559
  border: none;
380
560
  border-radius: 50%;
@@ -413,12 +593,10 @@
413
593
  .eds-contrast .eds-tag-chip__close-button:active {
414
594
  background-color: var(--components-chip-contrast-active);
415
595
  color: var(--components-chip-contrast-text-selected);
416
- }
417
- /* DO NOT CHANGE!*/
596
+ }/* DO NOT CHANGE!*/
418
597
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
419
598
  .eds-filter-chip {
420
599
  cursor: pointer;
421
- width: -moz-fit-content;
422
600
  width: fit-content;
423
601
  display: flex;
424
602
  }
@@ -507,208 +685,10 @@
507
685
  100% {
508
686
  stroke-dashoffset: 0;
509
687
  }
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!*/
688
+ }/* DO NOT CHANGE!*/
709
689
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
710
690
  :where(.eds-choice-chips-group) {
711
691
  display: flex;
712
692
  row-gap: 0.5rem;
713
693
  flex-wrap: wrap;
714
- }
694
+ }
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@entur/chip",
3
- "version": "0.9.1-beta.9",
3
+ "version": "0.9.1",
4
4
  "license": "EUPL-1.2",
5
- "main": "dist/index.js",
5
+ "main": "dist/chip.cjs.js",
6
6
  "module": "dist/chip.esm.js",
7
- "typings": "dist/index.d.ts",
7
+ "types": "dist/index.d.ts",
8
8
  "files": [
9
9
  "dist"
10
10
  ],
@@ -17,25 +17,35 @@
17
17
  "access": "public"
18
18
  },
19
19
  "scripts": {
20
- "start": "dts watch --noClean",
21
- "build": "dts build",
22
- "test": "dts test",
23
- "lint": "dts lint src"
20
+ "start": "vite build --watch",
21
+ "build": "vite build",
22
+ "test": "jest",
23
+ "lint": "eslint 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.9",
31
- "@entur/icons": "^8.0.0",
32
- "@entur/loader": "^0.5.30-beta.9",
33
- "@entur/tokens": "^3.19.1",
34
- "@entur/utils": "^0.12.3",
35
- "classnames": "^2.3.1"
30
+ "@entur/form": "^8.3.2",
31
+ "@entur/icons": "^8.0.1",
32
+ "@entur/loader": "^0.5.30",
33
+ "@entur/tokens": "^3.19.2",
34
+ "@entur/utils": "^0.12.4",
35
+ "classnames": "^2.5.1"
36
36
  },
37
37
  "devDependencies": {
38
- "dts-cli": "2.0.5"
38
+ "@testing-library/jest-dom": "^5.17.0",
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"
39
49
  },
40
- "gitHead": "6f685d2e4ac13bdaf9c6480f9e7922c9d8f4619c"
50
+ "gitHead": "268fb2f3387485206586a7c4c6f2a058f824f5d6"
41
51
  }
package/dist/ActionChip.d.ts DELETED
@@ -1,18 +0,0 @@
1
- import React from 'react';
2
- import './BaseChip.scss';
3
- import './ActionChip.scss';
4
- export type ActionChipProps = {
5
- /** Teksten som vises i ActionChip */
6
- children: React.ReactNode;
7
- /** Ekstra klassenavn */
8
- className?: string;
9
- /** Om chip-en er opptatt, f.eks med å oppdatere informasjon
10
- * @default false
11
- */
12
- loading?: boolean;
13
- /** Størrelsen på chip
14
- * @default 'medium'
15
- */
16
- size?: 'small' | 'medium';
17
- } & React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
18
- export declare const ActionChip: React.ForwardRefExoticComponent<Omit<ActionChipProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
package/dist/ChoiceChip.d.ts DELETED
@@ -1,20 +0,0 @@
1
- import React from 'react';
2
- import './BaseChip.scss';
3
- import './ChoiceChip.scss';
4
- export type ChoiceChipProps = {
5
- /** Ekstra klassenavn */
6
- className?: string;
7
- /** Om Choicechip er deaktivert eller ikke
8
- * @default false
9
- */
10
- disabled?: boolean;
11
- /** Label til ChoiceChip */
12
- children?: React.ReactNode;
13
- /** Verdien til ChoiceChip */
14
- value: string;
15
- /** Størrelsen på chip
16
- * @default 'medium'
17
- */
18
- size?: 'small' | 'medium';
19
- } & Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'value' | 'size'>;
20
- export declare const ChoiceChip: React.ForwardRefExoticComponent<Omit<ChoiceChipProps, "ref"> & React.RefAttributes<HTMLInputElement>>;