willba-component-library 0.2.6 → 0.2.7
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 +13 -15
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
Willba Component Library is a custom UI component collection that can be utilized across multiple platforms. It is available as an <a href="https://www.npmjs.com/package/willba-component-library">npm package</a>, or can be used directly through scripts.
|
|
4
4
|
|
|
5
5
|
<div style="display: flex; gap: 20px;">
|
|
6
|
-
<img src="https://
|
|
7
|
-
<img src="https://
|
|
6
|
+
<img src="https://lh3.googleusercontent.com/fife/ALs6j_E9S05-AoxQW3EDUN_R0_CoKocZjB_0SwUe2s04qlzSMBaR18MI_AizFrkKf7JLELYTyzuUTVr5z_IehlqgF_fmQ9MFAhDfm5ATXvL6PjXqK5tClfew0sAXHodybiN2PFhqfmOsikYpaT-NxYBg6ISV8jIjKkXuQCCr7m1_FqqEMDm8zj5s2Gj4Vs8pT42J9pce2Z1ZXnkMMPYiN37cm-ozobzjP4WOA4400RptGwJmqrvKkZxhJcB-Y-ZbifPkuIp9Wzb0FhKFsEe01l6GiGBmQlT7HeuH74N3FnsLx9GVvhbyPWLaaN9H4p7V9WzDwVvMmJWICrhfLxptJn0EYaxuYfkrLbKQsF5NC-3dvk43AGDfHukDphV5AukZBomSGoIqK9d3cdaiT3zctH4ksupAP6lEv2AQgJE0u-_wuSzMW8f5Vn2_rHUhxAXPDYvL1MH6KNv8jI39adbIyeK9xAF1sIpv2rpHtyiJcCTO_xMeJWgKXNKUdh5vAKRS1vzNFBTkQDy-lriFgGUxy3y1BHv0CtCs_l_Cl2B8xqbDXjkGzKJHxR1HYquOI0WZJDVWTrufwarVrXRTlY07VK6UcF6WEFd_UDzS44adkAXD2Vpf_xDTrRsoi0lcRBgctj6MWkEzOJPTQJK014XPROQ_PoF547CN_ht9G3HqITvWB-Bn6OTYWGbfbc4wPR7MB-iWS8XawNLn-TzQhn3ZzB1kLcCc0u9SNjhXGeFvFAcoPll21y1FX85tQYrXlnIzlIikKzAxuKjiNFDC4Bvrj8RarVeTaEcUU5wv6NswE6MJ-mI5_s28AmgoDurW4mAGhJH6f1BhNDAy6E2oz3kB9ezhqUSWfyl6WfO2eQ9oOxg8ib5kmowcE9220FgrW06Tjl75sQrbVEy4dtYWb-OKbfWwaAfFUbn70RoMaClv4x-ilqRcytfUMNsm41hETt9tbJvRnneBQaZ_ZudwxZvOrILOjXVIf5v5vKLhmSnte9d9DScxT5sdACCCYmZxVafzJxfX1Jew1O8b1nh7lsxD62Pd3HCgUQoaMWLRx2EZBZeL-IkWS-IJRtcd_cN0Mg0Rzk9X-OZZ1YomoAZVH6d7Bg1PxlT9205BuvFTxLyvUZ0wk4FHP40bTMd4_PN1Qt9LCSm3fxZCCBSbF8szl_NT-9bC2iY2fvAVCX4ZPeqKiS6RCi4Gf8C-WDOGusQj5SDestBh8wEbWvgP7C0e20pXUzj94vyAlFCEL0rIdopGzerPT5BS7TNqeKtZNnh-dVgUfGsbp81K03LqbW3cx14JAmB6Z_j7QOrwVC-qrzcbgmP1_DG1Q7VsPki8yJ0JUWzoTgHCk8Shbuhqy3uvfvNwdJlf2YkTejKQIIOy8zeSO7Xja65PF8VYaV-wadRchVku1YSOVNjyVOjYWSQAAFJP-BUczh0_pvXw3TXs_S_TEtq50AgNGRiq_Kex4uxeapDzaWjy3xMwod-M5ewz6zuTS2PMRkl57oN904ebC-2fScIKUZDBJ87IcwL7dq1IGaUOdb5FKcB8Bat8nxhNDVGEG_o6dCQmgUwXGt1HyHhrmXnEheLzPLDG3ePIpZz6u4UFb3d92yxqX9_5KSFFRHdM69U6FC01SiPe2OUKwPQ-ISDd_ETIyvNWLsh-NzsEYzs3RIAVOjBxKRDmA7Jboeet6g" alt="Filter Bar Calendar" style="width: auto; max-width: 50%;">
|
|
7
|
+
<img src="https://lh3.googleusercontent.com/d/1KCTqGgM2IZDY2nZ1ZTDf9WgX_zhmVB6D" alt="Filter Bar Guests" style="width: auto; max-width: 50%;">
|
|
8
8
|
</div>
|
|
9
9
|
|
|
10
10
|
## React usage
|
|
@@ -85,7 +85,7 @@ ReactDOM.render(<App />, document.querySelector('#app'))
|
|
|
85
85
|
|
|
86
86
|
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
|
87
87
|
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
88
|
-
<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.2.
|
|
88
|
+
<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.2.7/lib/index.umd.js"></script>
|
|
89
89
|
|
|
90
90
|
<script>
|
|
91
91
|
const filterBarElement = React.createElement
|
|
@@ -145,15 +145,13 @@ ReactDOM.render(<App />, document.querySelector('#app'))
|
|
|
145
145
|
|
|
146
146
|
## Props of FilterBar
|
|
147
147
|
|
|
148
|
-
| Name | Value
|
|
149
|
-
| -------------- |
|
|
150
|
-
| redirectUrl | `"string"`
|
|
151
|
-
| language | `"
|
|
152
|
-
| ageCategories | `[{}]`
|
|
153
|
-
| palette | `{}`
|
|
154
|
-
| calendarOffset | `{}`
|
|
155
|
-
| fullWidth | `true`
|
|
156
|
-
|
|
|
157
|
-
|
|
|
158
|
-
| |
|
|
159
|
-
| tabs | `[{}]` | Filter bar tabs management: [{path: string, default: boolean, order: number, label: { en: string, fi: string}}]. |
|
|
148
|
+
| Name | Value | Description |
|
|
149
|
+
| -------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
150
|
+
| redirectUrl | `"string"` | Specifies the base URL to which the component should redirect after submitting the filters. For example: https://store.vendor.willba.app/ |
|
|
151
|
+
| language | `"string"` | Specifies the language of the filter bar. Available options are Finnish ("fi") and English ("en"). For example: "fi" or "en". |
|
|
152
|
+
| 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: 'Adults', minVal: 1, sortOrder: 1 }] |
|
|
153
|
+
| palette | `{}` | The palette defines the primary and secondary colors of the filter bar. Override the colors using the following format: { primary: string, secondary: string }. For example: { primary: '#2a5a44', secondary: '#2a5a44' } |
|
|
154
|
+
| calendarOffset | `{}` | Disable dates on the calendar starting from today either forward or backward using the following format: { rooms: number, events: number }. For example: { rooms: 7, events: -1 } |
|
|
155
|
+
| fullWidth | `true` | Specify whether the filter bar width should be dynamic or fixed. |
|
|
156
|
+
| mode | `"string"` | pecify the color theme for the filter bar tabs as either light or dark using the following format: "light" |
|
|
157
|
+
| 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: "Name en", fi: "Name fi" }}] |
|