willba-component-library 0.2.14 → 0.2.16

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 (30) hide show
  1. package/lib/components/FilterBar/FilterBar.d.ts +1 -1
  2. package/lib/components/FilterBar/FilterBarTypes.d.ts +2 -2
  3. package/lib/components/FilterCalendar/FilterCalendar.d.ts +1 -1
  4. package/lib/components/FilterCalendar/hooks/useFilterCalendar.d.ts +5 -1
  5. package/lib/core/components/calendar/Calendar.d.ts +1 -1
  6. package/lib/core/components/calendar/CalendarTypes.d.ts +22 -5
  7. package/lib/index.d.ts +30 -13
  8. package/lib/index.esm.js +225 -72
  9. package/lib/index.esm.js.map +1 -1
  10. package/lib/index.js +225 -72
  11. package/lib/index.js.map +1 -1
  12. package/lib/index.umd.js +225 -72
  13. package/lib/index.umd.js.map +1 -1
  14. package/package.json +1 -1
  15. package/src/components/FilterBar/FilterBar.stories.tsx +11 -3
  16. package/src/components/FilterBar/FilterBar.tsx +2 -2
  17. package/src/components/FilterBar/FilterBarTypes.ts +2 -2
  18. package/src/components/FilterBar/components/divider/Divider.css +2 -2
  19. package/src/components/FilterCalendar/FilterCalendar.css +13 -2
  20. package/src/components/FilterCalendar/FilterCalendar.stories.tsx +861 -20
  21. package/src/components/FilterCalendar/FilterCalendar.tsx +24 -6
  22. package/src/components/FilterCalendar/hooks/useFilterCalendar.ts +29 -3
  23. package/src/core/components/calendar/Calendar.css +50 -11
  24. package/src/core/components/calendar/Calendar.tsx +238 -78
  25. package/src/core/components/calendar/CalendarTypes.ts +20 -5
  26. package/src/locales/en/common.json +5 -1
  27. package/src/locales/en/filterBar.json +4 -2
  28. package/src/locales/fi/common.json +5 -1
  29. package/src/locales/fi/filterBar.json +6 -2
  30. package/src/themes/Default.css +3 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "willba-component-library",
3
- "version": "0.2.14",
3
+ "version": "0.2.16",
4
4
  "description": "A custom UI component library",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.esm.js",
@@ -15,9 +15,17 @@ type Story = StoryObj<typeof FilterBar>
15
15
 
16
16
  export const Primary: Story = {
17
17
  args: {
18
- calendarOffset: {
19
- rooms: 7,
20
- events: -1,
18
+ disableCalendarDates: {
19
+ disabledDatesByPage: [
20
+ {
21
+ page: '/rooms',
22
+ offset: 7,
23
+ },
24
+ {
25
+ page: '/events',
26
+ offset: -7,
27
+ },
28
+ ],
21
29
  },
22
30
  fullWidth: true,
23
31
  language: '',
@@ -32,7 +32,7 @@ export default function FilterBar({
32
32
  palette,
33
33
  onSubmit,
34
34
  fullWidth,
35
- calendarOffset,
35
+ disableCalendarDates,
36
36
  mode,
37
37
  tabs,
38
38
  }: FilterBarProps) {
@@ -158,7 +158,7 @@ export default function FilterBar({
158
158
  calendarRange={calendarRange}
159
159
  setCalendarRange={setCalendarRange}
160
160
  ref={filtersRef}
161
- calendarOffset={calendarOffset}
161
+ disableCalendarDates={disableCalendarDates}
162
162
  selectedPath={selectedPath}
163
163
  language={language}
164
164
  />
@@ -1,5 +1,5 @@
1
+ import { DisableCalendarDates } from '../../core/components/calendar/CalendarTypes'
1
2
  import { Palette } from '../../themes/useTheme'
2
- import { CalendarOffset } from '../../core/components/calendar/CalendarTypes'
3
3
 
4
4
  export type FilterBarProps = {
5
5
  language?: string
@@ -8,7 +8,7 @@ export type FilterBarProps = {
8
8
  palette?: Palette
9
9
  onSubmit?: ((val: Filters) => void) | null
10
10
  fullWidth?: boolean
11
- calendarOffset?: CalendarOffset
11
+ disableCalendarDates?: DisableCalendarDates
12
12
  mode?: string
13
13
  defaultTab?: string
14
14
  tabs?: Tab[]
@@ -1,7 +1,7 @@
1
1
  .will-filter-bar-divider {
2
2
  width: 1px;
3
3
  margin: 0 10px;
4
- background-color: #384265;
4
+ background-color: var(--will-charcoal-blue);
5
5
  }
6
6
 
7
7
  @media (max-width: 960px) {
@@ -9,6 +9,6 @@
9
9
  width: auto;
10
10
  margin: 0 10px;
11
11
  height: 1px;
12
- background-color: #384265;
12
+ background-color: var(--will-charcoal-blue);
13
13
  }
14
14
  }
@@ -18,7 +18,8 @@
18
18
  .will-root .will-calendar-wrapper .will-calendar-header {
19
19
  display: flex;
20
20
  justify-content: space-between;
21
- border-bottom: 1px solid grey;
21
+ border-bottom: 1px solid var(--will-grey);
22
+ align-items: center;
22
23
  }
23
24
 
24
25
  /* Footer */
@@ -27,7 +28,7 @@
27
28
  display: flex;
28
29
  justify-content: space-between;
29
30
  align-items: center;
30
- border-top: 1px solid grey;
31
+ border-top: 1px solid var(--will-grey);
31
32
  }
32
33
 
33
34
  .will-root .will-calendar-wrapper .will-calendar-footer-dates > div {
@@ -45,6 +46,16 @@
45
46
  }
46
47
 
47
48
  @media (max-width: 960px) {
49
+ .will-root .will-calendar-wrapper {
50
+ width: -webkit-fill-available;
51
+ }
52
+
53
+ .will-root .will-calendar-wrapper .will-calendar-header,
54
+ .will-root .will-calendar-wrapper .will-calendar-main,
55
+ .will-root .will-calendar-wrapper .will-calendar-footer {
56
+ padding: 20px 10px;
57
+ }
58
+
48
59
  .will-root .will-calendar-wrapper .will-calendar-footer {
49
60
  flex-direction: column;
50
61
  }