willba-component-library 0.2.93 → 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/package.json +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' }}]` |
|