willba-component-library 0.2.92 → 0.2.94
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/README.md +49 -16
- package/lib/components/FilterBar/FilterBar.d.ts +2 -2
- package/lib/components/FilterBar/FilterBarTypes.d.ts +1 -1
- package/lib/index.d.ts +3 -3
- package/package.json +1 -1
- package/src/components/FilterBar/FilterBar.tsx +2 -2
- package/src/components/FilterBar/FilterBarTypes.ts +1 -1
- package/src/index.ts +1 -1
package/README.md
CHANGED
|
@@ -31,9 +31,17 @@ function App() {
|
|
|
31
31
|
<FilterBar
|
|
32
32
|
redirectUrl={'https://store.vendor.willba.app/'}
|
|
33
33
|
language={'en'}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
disableCalendarDates={{
|
|
35
|
+
disabledDatesByPage: [
|
|
36
|
+
{
|
|
37
|
+
offset: 7,
|
|
38
|
+
page: '/rooms',
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
offset: -1,
|
|
42
|
+
page: '/events',
|
|
43
|
+
},
|
|
44
|
+
],
|
|
37
45
|
}}
|
|
38
46
|
mode={'dark'}
|
|
39
47
|
ageCategories={[
|
|
@@ -58,11 +66,19 @@ function App() {
|
|
|
58
66
|
]}
|
|
59
67
|
tabs={[
|
|
60
68
|
{
|
|
69
|
+
label: {
|
|
70
|
+
en: 'Rooms',
|
|
71
|
+
fi: 'Hilat',
|
|
72
|
+
},
|
|
61
73
|
path: '/rooms',
|
|
62
74
|
default: true,
|
|
63
75
|
order: 2,
|
|
64
76
|
},
|
|
65
77
|
{
|
|
78
|
+
label: {
|
|
79
|
+
en: 'Events',
|
|
80
|
+
fi: 'Tapahtumat',
|
|
81
|
+
},
|
|
66
82
|
path: '/events',
|
|
67
83
|
default: false,
|
|
68
84
|
order: 1,
|
|
@@ -100,10 +116,19 @@ ReactDOM.render(<App />, document.querySelector('#app'))
|
|
|
100
116
|
palette: {
|
|
101
117
|
primary: '#2a5a44',
|
|
102
118
|
secondary: '#2a5a44',
|
|
119
|
+
error: '#ff0000',
|
|
103
120
|
},
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
121
|
+
disableCalendarDates: {
|
|
122
|
+
disabledDatesByPage: [
|
|
123
|
+
{
|
|
124
|
+
offset: 7,
|
|
125
|
+
page: '/rooms',
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
offset: -1,
|
|
129
|
+
page: '/events',
|
|
130
|
+
},
|
|
131
|
+
],
|
|
107
132
|
},
|
|
108
133
|
mode: 'dark',
|
|
109
134
|
ageCategories: [
|
|
@@ -128,11 +153,19 @@ ReactDOM.render(<App />, document.querySelector('#app'))
|
|
|
128
153
|
],
|
|
129
154
|
tabs: [
|
|
130
155
|
{
|
|
156
|
+
label: {
|
|
157
|
+
en: 'Rooms',
|
|
158
|
+
fi: 'Hilat',
|
|
159
|
+
},
|
|
131
160
|
path: '/rooms',
|
|
132
161
|
default: true,
|
|
133
162
|
order: 2,
|
|
134
163
|
},
|
|
135
164
|
{
|
|
165
|
+
label: {
|
|
166
|
+
en: 'Events',
|
|
167
|
+
fi: 'Tapahtumat',
|
|
168
|
+
},
|
|
136
169
|
path: '/events',
|
|
137
170
|
default: false,
|
|
138
171
|
order: 1,
|
|
@@ -145,13 +178,13 @@ ReactDOM.render(<App />, document.querySelector('#app'))
|
|
|
145
178
|
|
|
146
179
|
## Props of FilterBar
|
|
147
180
|
|
|
148
|
-
| Name
|
|
149
|
-
|
|
|
150
|
-
| redirectUrl
|
|
151
|
-
| language
|
|
152
|
-
|
|
|
153
|
-
|
|
|
154
|
-
|
|
|
155
|
-
|
|
|
156
|
-
|
|
|
157
|
-
| tabs
|
|
181
|
+
| Name | Value | Description |
|
|
182
|
+
| -------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
183
|
+
| redirectUrl | `"string"` | Specifies the base URL to which the component should redirect after submitting the filters. For example: `'https://store.vendor.willba.app/'` |
|
|
184
|
+
| language | `"string"` | Specifies the language of the filter bar. Available options are Finnish ("fi") and English ("en"). For example: `'en'` |
|
|
185
|
+
| palette | `{}` | The palette defines the colors of the filter bar. Override the colors using the following format: `{ primary: string, secondary: string, error: string }`. For example: `{ primary: '#2a5a44', secondary: '#2a5a44', error: '#ff0000' }` |
|
|
186
|
+
| disableCalendarDates | `{}` | Disable dates on the calendar by page using the following format: `{ disabledDatesByPage: [{ offset: number, page: string }] }`. For example: `{ disabledDatesByPage: [{ offset: 7, page: '/rooms' }, { offset: -1, page: '/events' }] }` |
|
|
187
|
+
| mode | `"string"` | Specify the color theme for the filter bar tabs as either light or dark using the following format: `'dark'` or `'light'` |
|
|
188
|
+
| ageCategories | `[{}]` | The ageCategories prop will determine the types of guests that can be selected. Specify the age categories for guests using the following format: `[{ id: string, name: string, minVal: number, sortOrder: number }]`. For example: `[{ id: '1', name: 'Aikuiset', minVal: 1, sortOrder: 1 }]` |
|
|
189
|
+
| fullWidth | `true` | Specify whether the filter bar width should be dynamic or fixed. |
|
|
190
|
+
| tabs | `[{}]` | Manage the filter bar tabs using the following format: `[{path: string, default: boolean, order: number, label: { en: string, fi: string }}]`. For example: `[{ path: '/rooms', default: true, order: 2, label: { en: 'Rooms', fi: 'Hilat' }}]` |
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import '../../themes/Default.css';
|
|
3
|
-
import {
|
|
3
|
+
import { FilterBarTypes } from './FilterBarTypes';
|
|
4
4
|
import './FilterBar.css';
|
|
5
|
-
export default function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, }:
|
|
5
|
+
export default function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, }: FilterBarTypes): React.JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { DisableCalendarDates } from '../../core/components/calendar/CalendarTypes';
|
|
2
2
|
import { Palette } from '../../themes/useTheme';
|
|
3
|
-
export type
|
|
3
|
+
export type FilterBarTypes = {
|
|
4
4
|
language?: string;
|
|
5
5
|
ageCategories?: AgeCategoryType[];
|
|
6
6
|
redirectUrl?: string;
|
package/lib/index.d.ts
CHANGED
|
@@ -79,7 +79,7 @@ type CalendarTypes = {
|
|
|
79
79
|
calendarHasError?: boolean;
|
|
80
80
|
};
|
|
81
81
|
|
|
82
|
-
type
|
|
82
|
+
type FilterBarTypes = {
|
|
83
83
|
language?: string;
|
|
84
84
|
ageCategories?: AgeCategoryType[];
|
|
85
85
|
redirectUrl?: string;
|
|
@@ -112,7 +112,7 @@ type Tab = {
|
|
|
112
112
|
label?: Translations;
|
|
113
113
|
};
|
|
114
114
|
|
|
115
|
-
declare function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, }:
|
|
115
|
+
declare function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, }: FilterBarTypes): React.JSX.Element;
|
|
116
116
|
|
|
117
117
|
interface FilterCalendarTypes extends Partial<CalendarTypes> {
|
|
118
118
|
palette: Palette;
|
|
@@ -123,4 +123,4 @@ interface FilterCalendarTypes extends Partial<CalendarTypes> {
|
|
|
123
123
|
|
|
124
124
|
declare function FilterCalendar({ calendarOffset, language, palette, onSubmit, disableCalendarDates: outerDisableCalendarDates, toggleCalendar, loadingData, setToggleCalendar, requestDates, showFeedback, noActiveSelection, rangeContext: outerRangeContext, }: FilterCalendarTypes): React.JSX.Element;
|
|
125
125
|
|
|
126
|
-
export { Button, FilterBar, FilterCalendar, FilterCalendarTypes
|
|
126
|
+
export { Button, FilterBar, FilterBarTypes, FilterCalendar, FilterCalendarTypes };
|
package/package.json
CHANGED
|
@@ -13,7 +13,7 @@ import { Calendar, SubmitButton, CloseButton } from '../../core/components'
|
|
|
13
13
|
import { parseDates } from '../../core/components/calendar/utils'
|
|
14
14
|
|
|
15
15
|
import { parseGuests } from './utils'
|
|
16
|
-
import {
|
|
16
|
+
import { FilterBarTypes, FilterSections, Pages } from './FilterBarTypes'
|
|
17
17
|
import { useFilterBar, useScrollInToView } from './hooks'
|
|
18
18
|
import {
|
|
19
19
|
TabButton,
|
|
@@ -36,7 +36,7 @@ export default function FilterBar({
|
|
|
36
36
|
mode,
|
|
37
37
|
tabs,
|
|
38
38
|
outerLoading,
|
|
39
|
-
}:
|
|
39
|
+
}: FilterBarTypes) {
|
|
40
40
|
const themePalette = useTheme({ palette })
|
|
41
41
|
|
|
42
42
|
// Translations
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { DisableCalendarDates } from '../../core/components/calendar/CalendarTypes'
|
|
2
2
|
import { Palette } from '../../themes/useTheme'
|
|
3
3
|
|
|
4
|
-
export type
|
|
4
|
+
export type FilterBarTypes = {
|
|
5
5
|
language?: string
|
|
6
6
|
ageCategories?: AgeCategoryType[]
|
|
7
7
|
redirectUrl?: string
|
package/src/index.ts
CHANGED
|
@@ -4,5 +4,5 @@ import FilterCalendar from './components/FilterCalendar'
|
|
|
4
4
|
|
|
5
5
|
export { Button, FilterBar, FilterCalendar }
|
|
6
6
|
|
|
7
|
-
export type {
|
|
7
|
+
export type { FilterBarTypes } from './components/FilterBar/FilterBarTypes'
|
|
8
8
|
export type { FilterCalendarTypes } from './components/FilterCalendar/FilterCalendarTypes'
|