@entur/alert 0.16.11-beta.0 → 0.16.11

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 (2) hide show
  1. package/dist/styles.css +153 -144
  2. package/package.json +8 -8
package/dist/styles.css CHANGED
@@ -1,67 +1,7 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-toast-container {
4
- position: fixed;
5
- z-index: 50;
6
- display: flex;
7
- align-items: flex-end;
8
- flex-direction: column;
9
- }
10
- .eds-toast-container--bottom-right {
11
- bottom: 1.5rem;
12
- right: 1.5rem;
13
- left: 1.5rem;
14
- }
15
- .eds-toast-container--top-right {
16
- top: 1.5rem;
17
- right: 1.5rem;
18
- left: 1.5rem;
19
- }
20
- .eds-toast-container > * + * {
21
- margin-top: 1rem;
22
- }
23
- @media screen and (min-width: 50rem) {
24
- .eds-toast-container {
25
- left: auto;
26
- left: initial;
27
- }
28
- }
29
-
30
- @keyframes bounceInRight {
31
- from, 60%, 75%, 90%, to {
32
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
33
- }
34
- from {
35
- opacity: 0;
36
- transform: translate3d(3000px, 0, 0) scaleX(3);
37
- }
38
- 60% {
39
- opacity: 1;
40
- transform: translate3d(-25px, 0, 0) scaleX(1);
41
- }
42
- 75% {
43
- transform: translate3d(10px, 0, 0) scaleX(0.98);
44
- }
45
- 90% {
46
- transform: translate3d(-5px, 0, 0) scaleX(0.995);
47
- }
48
- to {
49
- transform: translate3d(0, 0, 0);
50
- }
51
- }
52
- @keyframes bounceOutRight {
53
- 20% {
54
- opacity: 1;
55
- transform: translate3d(-20px, 0, 0) scaleX(0.9);
56
- }
57
- to {
58
- opacity: 0;
59
- transform: translate3d(2000px, 0, 0) scaleX(2);
60
- }
61
- }
62
- /* DO NOT CHANGE!*/
63
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
64
3
  .eds-alert-box {
4
+ border: 0.0625rem solid transparent;
65
5
  border-radius: 0.25rem;
66
6
  display: flex;
67
7
  padding: 0.75rem;
@@ -100,6 +40,7 @@
100
40
  }
101
41
  .eds-alert-box--success {
102
42
  background-color: var(--components-alert-alertbox-success-standard-fill);
43
+ border-color: var(--components-alert-alertbox-success-standard-border);
103
44
  color: var(--components-alert-alertbox-success-standard-text);
104
45
  }
105
46
  .eds-alert-box--success .eds-alert-box__icon {
@@ -107,6 +48,7 @@
107
48
  }
108
49
  .eds-contrast .eds-alert-box--success {
109
50
  background-color: var(--components-alert-alertbox-success-contrast-fill);
51
+ border-color: transparent;
110
52
  color: var(--components-alert-alertbox-success-contrast-text);
111
53
  }
112
54
  .eds-contrast .eds-alert-box--success .eds-alert-box__icon {
@@ -114,6 +56,7 @@
114
56
  }
115
57
  .eds-alert-box--info, .eds-alert-box--information {
116
58
  background-color: var(--components-alert-alertbox-information-standard-fill);
59
+ border-color: var(--components-alert-alertbox-information-standard-border);
117
60
  color: var(--components-alert-alertbox-information-standard-text);
118
61
  }
119
62
  .eds-alert-box--info .eds-alert-box__icon, .eds-alert-box--information .eds-alert-box__icon {
@@ -121,6 +64,7 @@
121
64
  }
122
65
  .eds-contrast .eds-alert-box--info, .eds-contrast .eds-alert-box--information {
123
66
  background-color: var(--components-alert-alertbox-information-contrast-fill);
67
+ border-color: transparent;
124
68
  color: var(--components-alert-alertbox-information-contrast-text);
125
69
  }
126
70
  .eds-contrast .eds-alert-box--info .eds-alert-box__icon, .eds-contrast .eds-alert-box--information .eds-alert-box__icon {
@@ -128,6 +72,7 @@
128
72
  }
129
73
  .eds-alert-box--warning {
130
74
  background-color: var(--components-alert-alertbox-warning-standard-fill);
75
+ border-color: var(--components-alert-alertbox-warning-standard-border);
131
76
  color: var(--components-alert-alertbox-warning-standard-text);
132
77
  }
133
78
  .eds-alert-box--warning .eds-alert-box__icon {
@@ -135,6 +80,7 @@
135
80
  }
136
81
  .eds-contrast .eds-alert-box--warning {
137
82
  background-color: var(--components-alert-alertbox-warning-contrast-fill);
83
+ border-color: transparent;
138
84
  color: var(--components-alert-alertbox-warning-contrast-text);
139
85
  }
140
86
  .eds-contrast .eds-alert-box--warning .eds-alert-box__icon {
@@ -142,6 +88,7 @@
142
88
  }
143
89
  .eds-alert-box--error, .eds-alert-box--negative {
144
90
  background-color: var(--components-alert-alertbox-negative-standard-fill);
91
+ border-color: var(--components-alert-alertbox-negative-standard-border);
145
92
  color: var(--components-alert-alertbox-negative-standard-text);
146
93
  }
147
94
  .eds-alert-box--error .eds-alert-box__icon, .eds-alert-box--negative .eds-alert-box__icon {
@@ -149,6 +96,7 @@
149
96
  }
150
97
  .eds-contrast .eds-alert-box--error, .eds-contrast .eds-alert-box--negative {
151
98
  background-color: var(--components-alert-alertbox-negative-contrast-fill);
99
+ border-color: transparent;
152
100
  color: var(--components-alert-alertbox-negative-contrast-text);
153
101
  }
154
102
  .eds-contrast .eds-alert-box--error .eds-alert-box__icon, .eds-contrast .eds-alert-box--negative .eds-alert-box__icon {
@@ -216,6 +164,67 @@
216
164
  }
217
165
  /* DO NOT CHANGE!*/
218
166
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
167
+ .eds-toast-container {
168
+ position: fixed;
169
+ z-index: 50;
170
+ display: flex;
171
+ align-items: flex-end;
172
+ flex-direction: column;
173
+ }
174
+ .eds-toast-container--bottom-right {
175
+ bottom: 1.5rem;
176
+ right: 1.5rem;
177
+ left: 1.5rem;
178
+ }
179
+ .eds-toast-container--top-right {
180
+ top: 1.5rem;
181
+ right: 1.5rem;
182
+ left: 1.5rem;
183
+ }
184
+ .eds-toast-container > * + * {
185
+ margin-top: 1rem;
186
+ }
187
+ @media screen and (min-width: 50rem) {
188
+ .eds-toast-container {
189
+ left: auto;
190
+ left: initial;
191
+ }
192
+ }
193
+
194
+ @keyframes bounceInRight {
195
+ from, 60%, 75%, 90%, to {
196
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
197
+ }
198
+ from {
199
+ opacity: 0;
200
+ transform: translate3d(3000px, 0, 0) scaleX(3);
201
+ }
202
+ 60% {
203
+ opacity: 1;
204
+ transform: translate3d(-25px, 0, 0) scaleX(1);
205
+ }
206
+ 75% {
207
+ transform: translate3d(10px, 0, 0) scaleX(0.98);
208
+ }
209
+ 90% {
210
+ transform: translate3d(-5px, 0, 0) scaleX(0.995);
211
+ }
212
+ to {
213
+ transform: translate3d(0, 0, 0);
214
+ }
215
+ }
216
+ @keyframes bounceOutRight {
217
+ 20% {
218
+ opacity: 1;
219
+ transform: translate3d(-20px, 0, 0) scaleX(0.9);
220
+ }
221
+ to {
222
+ opacity: 0;
223
+ transform: translate3d(2000px, 0, 0) scaleX(2);
224
+ }
225
+ }
226
+ /* DO NOT CHANGE!*/
227
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
219
228
  .eds-copyable-text,
220
229
  .eds-contrast .eds-copyable-text {
221
230
  -webkit-appearance: none;
@@ -317,51 +326,6 @@
317
326
  }
318
327
  /* DO NOT CHANGE!*/
319
328
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
320
- .eds-expandable-alert-box .eds-alert-box__content {
321
- width: 100%;
322
- }
323
- .eds-expandable-alert-box.eds-alert-box--banner .eds-alert-box__icon {
324
- margin-top: 0.0625rem;
325
- }
326
- @media screen and (min-width: 50rem) {
327
- .eds-expandable-alert-box.eds-alert-box--banner .eds-alert-box__icon {
328
- margin-top: -0.375rem;
329
- }
330
- }
331
- .eds-expandable-alert-box.eds-alert-box--small .eds-alert-box__icon {
332
- margin-top: 0.125rem;
333
- }
334
- @media screen and (min-width: 50rem) {
335
- .eds-expandable-alert-box.eds-alert-box--small .eds-alert-box__icon {
336
- margin-top: 0.125rem;
337
- }
338
- }
339
- .eds-expandable-alert-box__title {
340
- display: flex;
341
- justify-content: space-between;
342
- align-items: baseline;
343
- }
344
- .eds-expandable-alert-box__button {
345
- color: inherit;
346
- background: none;
347
- border: none;
348
- cursor: pointer;
349
- font-family: inherit;
350
- font-size: inherit;
351
- line-height: 1.5rem;
352
- padding: 0 0.25rem;
353
- flex-shrink: 0;
354
- }
355
- .eds-expandable-alert-box__button:focus {
356
- outline: 2px solid #181c56;
357
- outline-offset: 0.125rem;
358
- }
359
- .eds-expandable-alert-box__button .eds-icon {
360
- font-size: 1rem;
361
- padding-left: 0.25rem;
362
- }
363
- /* DO NOT CHANGE!*/
364
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
365
329
  /* DO NOT CHANGE!*/
366
330
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
367
331
  /* DO NOT CHANGE!*/
@@ -380,7 +344,7 @@
380
344
  --components-alert-alertbox-negative-contrast-fill: #ff9494;
381
345
  --components-alert-alertbox-negative-contrast-icon: #181c56;
382
346
  --components-alert-alertbox-negative-contrast-text: #181c56;
383
- --components-alert-alertbox-negative-standard-border: rgba(255, 255, 255, 0);
347
+ --components-alert-alertbox-negative-standard-border: #d31b1b;
384
348
  --components-alert-alertbox-negative-standard-fill: #ffcece;
385
349
  --components-alert-alertbox-negative-standard-icon: #d31b1b;
386
350
  --components-alert-alertbox-negative-standard-text: #181c56;
@@ -388,7 +352,7 @@
388
352
  --components-alert-alertbox-success-contrast-fill: #9cd9c2;
389
353
  --components-alert-alertbox-success-contrast-icon: #181c56;
390
354
  --components-alert-alertbox-success-contrast-text: #181c56;
391
- --components-alert-alertbox-success-standard-border: rgba(255, 255, 255, 0);
355
+ --components-alert-alertbox-success-standard-border: #1a8e60;
392
356
  --components-alert-alertbox-success-standard-fill: #d0f1e3;
393
357
  --components-alert-alertbox-success-standard-icon: #1a8e60;
394
358
  --components-alert-alertbox-success-standard-text: #181c56;
@@ -396,7 +360,7 @@
396
360
  --components-alert-alertbox-warning-contrast-fill: #ffeeb3;
397
361
  --components-alert-alertbox-warning-contrast-icon: #181c56;
398
362
  --components-alert-alertbox-warning-contrast-text: #181c56;
399
- --components-alert-alertbox-warning-standard-border: rgba(255, 255, 255, 0);
363
+ --components-alert-alertbox-warning-standard-border: #e9b10c;
400
364
  --components-alert-alertbox-warning-standard-fill: #fff4cd;
401
365
  --components-alert-alertbox-warning-standard-icon: #181c56;
402
366
  --components-alert-alertbox-warning-standard-text: #181c56;
@@ -413,38 +377,38 @@
413
377
  }
414
378
 
415
379
  [data-color-mode=dark] {
416
- --components-alert-alertbox-information-contrast-border: rgba(255, 255, 255, 0);
417
- --components-alert-alertbox-information-contrast-fill: #e1eff8;
418
- --components-alert-alertbox-information-contrast-icon: #067eb2;
419
- --components-alert-alertbox-information-contrast-text: #08091c;
420
- --components-alert-alertbox-information-standard-border: rgba(255, 255, 255, 0);
421
- --components-alert-alertbox-information-standard-fill: #e1eff8;
422
- --components-alert-alertbox-information-standard-icon: #067eb2;
423
- --components-alert-alertbox-information-standard-text: #08091c;
424
- --components-alert-alertbox-negative-contrast-border: rgba(255, 255, 255, 0);
425
- --components-alert-alertbox-negative-contrast-fill: #ffcece;
426
- --components-alert-alertbox-negative-contrast-icon: #d31b1b;
427
- --components-alert-alertbox-negative-contrast-text: #08091c;
428
- --components-alert-alertbox-negative-standard-border: rgba(255, 255, 255, 0);
429
- --components-alert-alertbox-negative-standard-fill: #ffcece;
430
- --components-alert-alertbox-negative-standard-icon: #d31b1b;
431
- --components-alert-alertbox-negative-standard-text: #08091c;
432
- --components-alert-alertbox-success-contrast-border: rgba(255, 255, 255, 0);
433
- --components-alert-alertbox-success-contrast-fill: #d0f1e3;
434
- --components-alert-alertbox-success-contrast-icon: #1a8e60;
435
- --components-alert-alertbox-success-contrast-text: #08091c;
436
- --components-alert-alertbox-success-standard-border: rgba(255, 255, 255, 0);
437
- --components-alert-alertbox-success-standard-fill: #d0f1e3;
438
- --components-alert-alertbox-success-standard-icon: #1a8e60;
439
- --components-alert-alertbox-success-standard-text: #08091c;
440
- --components-alert-alertbox-warning-contrast-border: rgba(255, 255, 255, 0);
441
- --components-alert-alertbox-warning-contrast-fill: #fff4cd;
442
- --components-alert-alertbox-warning-contrast-icon: #08091c;
443
- --components-alert-alertbox-warning-contrast-text: #08091c;
444
- --components-alert-alertbox-warning-standard-border: rgba(255, 255, 255, 0);
445
- --components-alert-alertbox-warning-standard-fill: #fff4cd;
446
- --components-alert-alertbox-warning-standard-icon: #08091c;
447
- --components-alert-alertbox-warning-standard-text: #08091c;
380
+ --components-alert-alertbox-information-contrast-border: #acd7f1;
381
+ --components-alert-alertbox-information-contrast-fill: rgba(45, 152, 210, 0.2);
382
+ --components-alert-alertbox-information-contrast-icon: #acd7f1;
383
+ --components-alert-alertbox-information-contrast-text: #e5e5e9;
384
+ --components-alert-alertbox-information-standard-border: #acd7f1;
385
+ --components-alert-alertbox-information-standard-fill: rgba(45, 152, 210, 0.2);
386
+ --components-alert-alertbox-information-standard-icon: #acd7f1;
387
+ --components-alert-alertbox-information-standard-text: #e5e5e9;
388
+ --components-alert-alertbox-negative-contrast-border: #ff9494;
389
+ --components-alert-alertbox-negative-contrast-fill: rgba(255, 148, 148, 0.2);
390
+ --components-alert-alertbox-negative-contrast-icon: #ff9494;
391
+ --components-alert-alertbox-negative-contrast-text: #e5e5e9;
392
+ --components-alert-alertbox-negative-standard-border: #ff9494;
393
+ --components-alert-alertbox-negative-standard-fill: rgba(255, 148, 148, 0.2);
394
+ --components-alert-alertbox-negative-standard-icon: #ff9494;
395
+ --components-alert-alertbox-negative-standard-text: #e5e5e9;
396
+ --components-alert-alertbox-success-contrast-border: #9cd9c2;
397
+ --components-alert-alertbox-success-contrast-fill: rgba(90, 195, 154, 0.2);
398
+ --components-alert-alertbox-success-contrast-icon: #9cd9c2;
399
+ --components-alert-alertbox-success-contrast-text: #e5e5e9;
400
+ --components-alert-alertbox-success-standard-border: #9cd9c2;
401
+ --components-alert-alertbox-success-standard-fill: rgba(90, 195, 154, 0.2);
402
+ --components-alert-alertbox-success-standard-icon: #9cd9c2;
403
+ --components-alert-alertbox-success-standard-text: #e5e5e9;
404
+ --components-alert-alertbox-warning-contrast-border: #ffeeb3;
405
+ --components-alert-alertbox-warning-contrast-fill: rgba(255, 224, 130, 0.2509803922);
406
+ --components-alert-alertbox-warning-contrast-icon: #ffeeb3;
407
+ --components-alert-alertbox-warning-contrast-text: #e5e5e9;
408
+ --components-alert-alertbox-warning-standard-border: #ffeeb3;
409
+ --components-alert-alertbox-warning-standard-fill: rgba(255, 224, 130, 0.2509803922);
410
+ --components-alert-alertbox-warning-standard-icon: #ffeeb3;
411
+ --components-alert-alertbox-warning-standard-text: #e5e5e9;
448
412
  --components-alert-copyabletext-contrast-border: rgba(255, 255, 255, 0);
449
413
  --components-alert-copyabletext-contrast-border-interactive: #e5e5e9;
450
414
  --components-alert-copyabletext-contrast-fill: #393a49;
@@ -538,8 +502,8 @@
538
502
  --basecolors-shape-accent: #e5e5e9;
539
503
  --basecolors-shape-bicycle-contrast: #4db295;
540
504
  --basecolors-shape-bicycle-default: #4db295;
541
- --basecolors-shape-bus-contrast: #e87a9b;
542
- --basecolors-shape-bus-default: #e87a9b;
505
+ --basecolors-shape-bus-contrast: #ef7398;
506
+ --basecolors-shape-bus-default: #ef7398;
543
507
  --basecolors-shape-cableway-contrast: #b898e5;
544
508
  --basecolors-shape-cableway-default: #b898e5;
545
509
  --basecolors-shape-disabled: #b6b8ba;
@@ -582,7 +546,7 @@
582
546
  --basecolors-stroke-highlight: #ff9494;
583
547
  --basecolors-stroke-light: #b3b4bd;
584
548
  --basecolors-stroke-subdued: #81828f;
585
- --basecolors-stroke-subduedalt: #81828f;
549
+ --basecolors-stroke-subduedalt: #949699;
586
550
  --basecolors-text-accent: #e5e5e9;
587
551
  --basecolors-text-disabled: #b6b8ba;
588
552
  --basecolors-text-disabledalt: #b6b8ba;
@@ -595,3 +559,48 @@
595
559
  :root {
596
560
  --eds-alert: 1;
597
561
  }
562
+ /* DO NOT CHANGE!*/
563
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
564
+ .eds-expandable-alert-box .eds-alert-box__content {
565
+ width: 100%;
566
+ }
567
+ .eds-expandable-alert-box.eds-alert-box--banner .eds-alert-box__icon {
568
+ margin-top: 0.0625rem;
569
+ }
570
+ @media screen and (min-width: 50rem) {
571
+ .eds-expandable-alert-box.eds-alert-box--banner .eds-alert-box__icon {
572
+ margin-top: -0.375rem;
573
+ }
574
+ }
575
+ .eds-expandable-alert-box.eds-alert-box--small .eds-alert-box__icon {
576
+ margin-top: 0.125rem;
577
+ }
578
+ @media screen and (min-width: 50rem) {
579
+ .eds-expandable-alert-box.eds-alert-box--small .eds-alert-box__icon {
580
+ margin-top: 0.125rem;
581
+ }
582
+ }
583
+ .eds-expandable-alert-box__title {
584
+ display: flex;
585
+ justify-content: space-between;
586
+ align-items: baseline;
587
+ }
588
+ .eds-expandable-alert-box__button {
589
+ color: inherit;
590
+ background: none;
591
+ border: none;
592
+ cursor: pointer;
593
+ font-family: inherit;
594
+ font-size: inherit;
595
+ line-height: 1.5rem;
596
+ padding: 0 0.25rem;
597
+ flex-shrink: 0;
598
+ }
599
+ .eds-expandable-alert-box__button:focus {
600
+ outline: 2px solid #181c56;
601
+ outline-offset: 0.125rem;
602
+ }
603
+ .eds-expandable-alert-box__button .eds-icon {
604
+ font-size: 1rem;
605
+ padding-left: 0.25rem;
606
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/alert",
3
- "version": "0.16.11-beta.0",
3
+ "version": "0.16.11",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/alert.esm.js",
@@ -27,15 +27,15 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/button": "^3.2.27-beta.0",
31
- "@entur/expand": "^3.5.16-beta.0",
32
- "@entur/icons": "^7.0.0-beta.0",
33
- "@entur/tokens": "^3.15.1",
34
- "@entur/tooltip": "^3.0.0-beta.0",
35
- "@entur/typography": "^1.8.40-beta.0",
30
+ "@entur/button": "^3.2.27",
31
+ "@entur/expand": "^3.5.16",
32
+ "@entur/icons": "^6.18.1",
33
+ "@entur/tokens": "^3.15.2",
34
+ "@entur/tooltip": "^2.7.11",
35
+ "@entur/typography": "^1.8.40",
36
36
  "@entur/utils": "^0.11.1",
37
37
  "classnames": "^2.3.1",
38
38
  "copy-text-to-clipboard": "^2.2"
39
39
  },
40
- "gitHead": "c8e99ab901c06e9faf622f1a1f88e1b0e7e34419"
40
+ "gitHead": "4d4f7939fb1c9b936e07dd321b7faa3e12476b3d"
41
41
  }