willba-component-library 0.0.47 → 0.0.49

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 (34) hide show
  1. package/.nvmrc +1 -0
  2. package/lib/components/FilterBar/components/select-button/SelectButton.d.ts +1 -1
  3. package/lib/index.esm.js +4792 -163
  4. package/lib/index.esm.js.map +1 -1
  5. package/lib/index.js +4806 -177
  6. package/lib/index.js.map +1 -1
  7. package/lib/index.umd.js +13075 -8446
  8. package/lib/index.umd.js.map +1 -1
  9. package/package.json +5 -2
  10. package/rollup.config.mjs +4 -0
  11. package/src/components/FilterBar/FilterBar.css +17 -9
  12. package/src/components/FilterBar/FilterBar.tsx +11 -3
  13. package/src/components/FilterBar/components/calendar/Calendar.css +60 -2
  14. package/src/components/FilterBar/components/calendar/Calendar.tsx +22 -11
  15. package/src/components/FilterBar/components/categories/Categories.css +9 -3
  16. package/src/components/FilterBar/components/categories/Categories.tsx +3 -3
  17. package/src/components/FilterBar/components/divider/Divider.css +1 -1
  18. package/src/components/FilterBar/components/divider/Divider.tsx +1 -1
  19. package/src/components/FilterBar/components/guests/Guests.css +29 -10
  20. package/src/components/FilterBar/components/guests/Guests.tsx +44 -14
  21. package/src/components/FilterBar/components/select-button/SelectButton.css +3 -1
  22. package/src/components/FilterBar/components/select-button/SelectButton.tsx +6 -2
  23. package/src/components/FilterBar/components/submit-button/SubmitButton.css +11 -3
  24. package/src/components/FilterBar/components/submit-button/SubmitButton.tsx +10 -2
  25. package/src/index.ts +2 -0
  26. package/src/locales/en/filterBar.json +5 -1
  27. package/src/locales/fi/filterBar.json +5 -1
  28. package/src/themes/Default.css +26 -10
  29. package/lib/index.css +0 -480
  30. package/lib/index.esm.css +0 -480
  31. package/lib/index.umd.css +0 -480
  32. package/lib/themes/Default.css +0 -13
  33. package/lib/themes/Kisakallio.css +0 -3
  34. package/lib/themes/Pajulahti.css +0 -3
package/lib/index.css DELETED
@@ -1,480 +0,0 @@
1
- .storybook-button {
2
- font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
3
- font-weight: 700;
4
- border: 0;
5
- border-radius: 3em;
6
- cursor: pointer;
7
- display: inline-block;
8
- line-height: 1;
9
- }
10
- .storybook-button--primary {
11
- color: white;
12
- background-color: #1ea7fd;
13
- }
14
- .storybook-button--secondary {
15
- color: #333;
16
- background-color: transparent;
17
- box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
18
- }
19
- .storybook-button--small {
20
- font-size: 12px;
21
- padding: 10px 16px;
22
- }
23
- .storybook-button--medium {
24
- font-size: 14px;
25
- padding: 11px 20px;
26
- }
27
- .storybook-button--large {
28
- font-size: 16px;
29
- padding: 12px 24px;
30
- }
31
- .filter-bar-divider {
32
- width: 1px;
33
- margin: 0 10px;
34
- height: 35px;
35
- background-color: #384265;
36
- }
37
- .filter-bar-select-button {
38
- width: 100%;
39
- height: auto;
40
- background-color: transparent;
41
- border: none;
42
- padding: 10px 20px;
43
- border-radius: 20px;
44
- cursor: pointer;
45
- }
46
-
47
- .filter-bar-submit-button {
48
- width: auto;
49
- height: auto;
50
- background-color: #384265;
51
- color: #fff;
52
- padding: 10px 20px;
53
- border-radius: 20px;
54
- cursor: pointer;
55
- border: none;
56
- white-space: nowrap;
57
- }
58
- .rdp {
59
- --rdp-cell-size: 40px;
60
- --rdp-caption-font-size: 18px;
61
- --rdp-accent-color: #0000ff;
62
- --rdp-background-color: #e7edff;
63
- --rdp-accent-color-dark: #3003e1;
64
- --rdp-background-color-dark: #180270;
65
- --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */
66
- --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */
67
-
68
- margin: 1em;
69
- }
70
-
71
- /* Hide elements for devices that are not screen readers */
72
- .rdp-vhidden {
73
- box-sizing: border-box;
74
- padding: 0;
75
- margin: 0;
76
- background: transparent;
77
- border: 0;
78
- -moz-appearance: none;
79
- -webkit-appearance: none;
80
- appearance: none;
81
- position: absolute !important;
82
- top: 0;
83
- width: 1px !important;
84
- height: 1px !important;
85
- padding: 0 !important;
86
- overflow: hidden !important;
87
- clip: rect(1px, 1px, 1px, 1px) !important;
88
- border: 0 !important;
89
- }
90
-
91
- /* Buttons */
92
- .rdp-button_reset {
93
- appearance: none;
94
- position: relative;
95
- margin: 0;
96
- padding: 0;
97
- cursor: default;
98
- color: inherit;
99
- background: none;
100
- font: inherit;
101
-
102
- -moz-appearance: none;
103
- -webkit-appearance: none;
104
- }
105
-
106
- .rdp-button_reset:focus-visible {
107
- /* Make sure to reset outline only when :focus-visible is supported */
108
- outline: none;
109
- }
110
-
111
- .rdp-button {
112
- border: 2px solid transparent;
113
- }
114
-
115
- .rdp-button[disabled]:not(.rdp-day_selected) {
116
- opacity: 0.25;
117
- }
118
-
119
- .rdp-button:not([disabled]) {
120
- cursor: pointer;
121
- }
122
-
123
- .rdp-button:focus-visible:not([disabled]) {
124
- color: inherit;
125
- background-color: var(--rdp-background-color);
126
- border: var(--rdp-outline);
127
- }
128
-
129
- .rdp-button:hover:not([disabled]):not(.rdp-day_selected) {
130
- background-color: var(--rdp-background-color);
131
- }
132
-
133
- .rdp-months {
134
- display: flex;
135
- }
136
-
137
- .rdp-month {
138
- margin: 0 1em;
139
- }
140
-
141
- .rdp-month:first-child {
142
- margin-left: 0;
143
- }
144
-
145
- .rdp-month:last-child {
146
- margin-right: 0;
147
- }
148
-
149
- .rdp-table {
150
- margin: 0;
151
- max-width: calc(var(--rdp-cell-size) * 7);
152
- border-collapse: collapse;
153
- }
154
-
155
- .rdp-with_weeknumber .rdp-table {
156
- max-width: calc(var(--rdp-cell-size) * 8);
157
- border-collapse: collapse;
158
- }
159
-
160
- .rdp-caption {
161
- display: flex;
162
- align-items: center;
163
- justify-content: space-between;
164
- padding: 0;
165
- text-align: left;
166
- }
167
-
168
- .rdp-multiple_months .rdp-caption {
169
- position: relative;
170
- display: block;
171
- text-align: center;
172
- }
173
-
174
- .rdp-caption_dropdowns {
175
- position: relative;
176
- display: inline-flex;
177
- }
178
-
179
- .rdp-caption_label {
180
- position: relative;
181
- z-index: 1;
182
- display: inline-flex;
183
- align-items: center;
184
- margin: 0;
185
- padding: 0 0.25em;
186
- white-space: nowrap;
187
- color: currentColor;
188
- border: 0;
189
- border: 2px solid transparent;
190
- font-family: inherit;
191
- font-size: var(--rdp-caption-font-size);
192
- font-weight: bold;
193
- }
194
-
195
- .rdp-nav {
196
- white-space: nowrap;
197
- }
198
-
199
- .rdp-multiple_months .rdp-caption_start .rdp-nav {
200
- position: absolute;
201
- top: 50%;
202
- left: 0;
203
- transform: translateY(-50%);
204
- }
205
-
206
- .rdp-multiple_months .rdp-caption_end .rdp-nav {
207
- position: absolute;
208
- top: 50%;
209
- right: 0;
210
- transform: translateY(-50%);
211
- }
212
-
213
- .rdp-nav_button {
214
- display: inline-flex;
215
- align-items: center;
216
- justify-content: center;
217
- width: var(--rdp-cell-size);
218
- height: var(--rdp-cell-size);
219
- padding: 0.25em;
220
- border-radius: 100%;
221
- }
222
-
223
- /* ---------- */
224
- /* Dropdowns */
225
- /* ---------- */
226
-
227
- .rdp-dropdown_year,
228
- .rdp-dropdown_month {
229
- position: relative;
230
- display: inline-flex;
231
- align-items: center;
232
- }
233
-
234
- .rdp-dropdown {
235
- appearance: none;
236
- position: absolute;
237
- z-index: 2;
238
- top: 0;
239
- bottom: 0;
240
- left: 0;
241
- width: 100%;
242
- margin: 0;
243
- padding: 0;
244
- cursor: inherit;
245
- opacity: 0;
246
- border: none;
247
- background-color: transparent;
248
- font-family: inherit;
249
- font-size: inherit;
250
- line-height: inherit;
251
- }
252
-
253
- .rdp-dropdown[disabled] {
254
- opacity: unset;
255
- color: unset;
256
- }
257
-
258
- .rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {
259
- background-color: var(--rdp-background-color);
260
- border: var(--rdp-outline);
261
- border-radius: 6px;
262
- }
263
-
264
- .rdp-dropdown_icon {
265
- margin: 0 0 0 5px;
266
- }
267
-
268
- .rdp-head {
269
- border: 0;
270
- }
271
-
272
- .rdp-head_row,
273
- .rdp-row {
274
- height: 100%;
275
- }
276
-
277
- .rdp-head_cell {
278
- vertical-align: middle;
279
- font-size: 0.75em;
280
- font-weight: 700;
281
- text-align: center;
282
- height: 100%;
283
- height: var(--rdp-cell-size);
284
- padding: 0;
285
- text-transform: uppercase;
286
- }
287
-
288
- .rdp-tbody {
289
- border: 0;
290
- }
291
-
292
- .rdp-tfoot {
293
- margin: 0.5em;
294
- }
295
-
296
- .rdp-cell {
297
- width: var(--rdp-cell-size);
298
- height: 100%;
299
- height: var(--rdp-cell-size);
300
- padding: 0;
301
- text-align: center;
302
- }
303
-
304
- .rdp-weeknumber {
305
- font-size: 0.75em;
306
- }
307
-
308
- .rdp-weeknumber,
309
- .rdp-day {
310
- display: flex;
311
- overflow: hidden;
312
- align-items: center;
313
- justify-content: center;
314
- box-sizing: border-box;
315
- width: var(--rdp-cell-size);
316
- max-width: var(--rdp-cell-size);
317
- height: var(--rdp-cell-size);
318
- margin: 0;
319
- border: 2px solid transparent;
320
- border-radius: 100%;
321
- }
322
-
323
- .rdp-day_today:not(.rdp-day_outside) {
324
- font-weight: bold;
325
- }
326
-
327
- .rdp-day_selected,
328
- .rdp-day_selected:focus-visible,
329
- .rdp-day_selected:hover {
330
- color: white;
331
- opacity: 1;
332
- background-color: var(--rdp-accent-color);
333
- }
334
-
335
- .rdp-day_outside {
336
- opacity: 0.5;
337
- }
338
-
339
- .rdp-day_selected:focus-visible {
340
- /* Since the background is the same use again the outline */
341
- outline: var(--rdp-outline);
342
- outline-offset: 2px;
343
- z-index: 1;
344
- }
345
-
346
- .rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {
347
- border-top-right-radius: 0;
348
- border-bottom-right-radius: 0;
349
- }
350
-
351
- .rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {
352
- border-top-left-radius: 0;
353
- border-bottom-left-radius: 0;
354
- }
355
-
356
- .rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {
357
- border-top-left-radius: 0;
358
- border-bottom-left-radius: 0;
359
- }
360
-
361
- .rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {
362
- border-top-right-radius: 0;
363
- border-bottom-right-radius: 0;
364
- }
365
-
366
- .rdp-day_range_end.rdp-day_range_start {
367
- border-radius: 100%;
368
- }
369
-
370
- .rdp-day_range_middle {
371
- border-radius: 0;
372
- }
373
- .filter-bar-calendar {
374
- display: flex;
375
- justify-content: center;
376
- }
377
- .filter-bar-guests {
378
- text-align: initial;
379
- }
380
-
381
- .guests-filter-container {
382
- display: flex;
383
- margin-top: 30px;
384
- }
385
-
386
- .guests-filter-inner {
387
- display: flex;
388
- align-items: center;
389
- }
390
-
391
- .guests-filter-inner:not(:last-child) {
392
- margin-right: 50px;
393
- }
394
-
395
- .guests-filter-inner > span {
396
- display: block;
397
- margin-right: 20px;
398
- font-weight: bold;
399
- }
400
-
401
- .guests-filter-inner > div {
402
- display: flex;
403
- align-items: center;
404
- }
405
-
406
- .guests-filter-inner > div > span {
407
- margin: 0 10px;
408
- }
409
-
410
- .guests-filter-inner > div button {
411
- border-radius: 50%;
412
- border: none;
413
- background-color: #CDEEFF;
414
- width: 25px;
415
- height: 25px;
416
- display: flex;
417
- justify-content: center;
418
- align-items: center;
419
- font-size: 20px;
420
- }
421
- .filter-bar-categories {
422
- text-align: center;
423
- }
424
-
425
- .categories-filter-inner {
426
- display: flex;
427
- align-items: center;
428
- justify-content: center;
429
- gap: 20px;
430
- }
431
-
432
- .categories-filter-inner input {
433
- cursor: pointer;
434
- margin-right: 10px;
435
- }
436
-
437
- .filter-bar {
438
- box-sizing: border-box;
439
- max-width: 1100px;
440
- position: relative;
441
- }
442
-
443
- .filter-bar-header {
444
- display: flex;
445
- justify-content: space-between;
446
- align-items: center;
447
- padding: 10px 20px;
448
- position: relative;
449
- z-index: 222;
450
-
451
- border-radius: 40px;
452
- background-color: #fff;
453
- box-shadow: 0px 6px 11px 0px #a7a4a480;
454
- }
455
-
456
- .filter-bar-container {
457
- background-color: #fff;
458
- min-height: 100px;
459
-
460
- padding: 90px 40px 30px 40px;
461
- position: absolute;
462
- top: 0;
463
- z-index: 111;
464
- border-radius: 40px;
465
- width: -webkit-fill-available;
466
- box-shadow: var(--box-shadow);
467
- }
468
- :root {
469
- --primary-color: #3498db;
470
- --font-size: 16px;
471
- --box-shadow: 0px 6px 11px 0px #a7a4a480
472
- }
473
-
474
- * {
475
- box-sizing: border-box;
476
- }
477
-
478
- html {
479
- background-color: aqua;
480
- }