willba-component-library 0.2.6 → 0.2.8

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 (7) hide show
  1. package/README.md +13 -15
  2. package/lib/index.esm.js +4 -4
  3. package/lib/index.js +4 -4
  4. package/lib/index.umd.js +4 -4
  5. package/package.json +1 -1
  6. package/src/locales/en/filterBar.json +2 -2
  7. package/src/locales/fi/filterBar.json +2 -2
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://photos.google.com/share/AF1QipOXcpcksgeObMrAnUR6gqt7jmBRUGkvrdPUxHXT3n6UyFVjaZVGYXY1K7goKpW48A/photo/AF1QipOblewSw3mwImxvqRVmkt046ZBC9tbJTC7GbB_n?key=VGwyTTlvLWI0TXJmdnpQY2Jsal84M3ZwV1UwSnBR" alt="Filter Bar Calendar" style="width: auto; max-width: 50%;">
7
- <img src="https://photos.google.com/share/AF1QipOM9_0S2HPv5ArI8g2KN6OZK_n5_Nd9vsncJlRnH2_My_OEonSMQ_-Tkj4YCagfCA/photo/AF1QipMqx1Dn27VPTw1FWRG0MYUtjUHFs4ZS8LALsSTv?key=RlFVUHdfSmthV291b1lIQnEwZlJNS0laN01MellR" alt="Filter Bar Guests" style="width: auto; max-width: 50%;">
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.2/lib/index.umd.js"></script>
88
+ <script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.2.8/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 | Description |
149
- | -------------- | ------------- | ---------------------------------------------------------------------------------------------------------------- |
150
- | redirectUrl | `"string"` | Define the URL where the component should redirect on filtering. |
151
- | language | `"fi" , "en"` | Specify the language, available languages Finnish and English. |
152
- | ageCategories | `[{}]` | Specify age categories for guests: [{id: string, name: string, , minVal: number, sortOrder: number}] |
153
- | palette | `{}` | Override color: palette: {primary: string, secondary: string}. |
154
- | calendarOffset | `{}` | Calendar disabled date starting from today: {rooms: number, events: number}. |
155
- | fullWidth | `true` | Filter bar width, dynamic or fixed. |
156
- | |
157
- | mode | `"light"` | Filter bar tabs color: light or dark |
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" }}] |
package/lib/index.esm.js CHANGED
@@ -6369,7 +6369,7 @@ instance.loadNamespaces;
6369
6369
  instance.loadLanguages;
6370
6370
 
6371
6371
  var calendar$1 = {
6372
- label: "When",
6372
+ label: "Date",
6373
6373
  roomsLabelPlaceholder: "Add check-in and check-out",
6374
6374
  eventsLabelPlaceholder: "Add search dates",
6375
6375
  startDate: "Start date",
@@ -6377,7 +6377,7 @@ var calendar$1 = {
6377
6377
  title: "Calendar"
6378
6378
  };
6379
6379
  var guests$1 = {
6380
- label: "Who",
6380
+ label: "Number of guests",
6381
6381
  labelPlaceholder: "Add guests",
6382
6382
  title: "Who's coming?",
6383
6383
  adultsLabel: "Adults",
@@ -6405,7 +6405,7 @@ var enFilterBar = {
6405
6405
  };
6406
6406
 
6407
6407
  var calendar = {
6408
- label: "Milloin",
6408
+ label: "Ajankohta",
6409
6409
  roomsLabelPlaceholder: "Lisää check-in ja check-out",
6410
6410
  eventsLabelPlaceholder: "Lisää aikaväli",
6411
6411
  startDate: "Alku",
@@ -6413,7 +6413,7 @@ var calendar = {
6413
6413
  title: "Kalenteri"
6414
6414
  };
6415
6415
  var guests = {
6416
- label: "Kuka",
6416
+ label: "Vierasmäärä",
6417
6417
  labelPlaceholder: "Lisää vieraat",
6418
6418
  title: "Ketkä ovat tulossa?",
6419
6419
  adultsLabel: "Aikuiset",
package/lib/index.js CHANGED
@@ -6389,7 +6389,7 @@ instance.loadNamespaces;
6389
6389
  instance.loadLanguages;
6390
6390
 
6391
6391
  var calendar$1 = {
6392
- label: "When",
6392
+ label: "Date",
6393
6393
  roomsLabelPlaceholder: "Add check-in and check-out",
6394
6394
  eventsLabelPlaceholder: "Add search dates",
6395
6395
  startDate: "Start date",
@@ -6397,7 +6397,7 @@ var calendar$1 = {
6397
6397
  title: "Calendar"
6398
6398
  };
6399
6399
  var guests$1 = {
6400
- label: "Who",
6400
+ label: "Number of guests",
6401
6401
  labelPlaceholder: "Add guests",
6402
6402
  title: "Who's coming?",
6403
6403
  adultsLabel: "Adults",
@@ -6425,7 +6425,7 @@ var enFilterBar = {
6425
6425
  };
6426
6426
 
6427
6427
  var calendar = {
6428
- label: "Milloin",
6428
+ label: "Ajankohta",
6429
6429
  roomsLabelPlaceholder: "Lisää check-in ja check-out",
6430
6430
  eventsLabelPlaceholder: "Lisää aikaväli",
6431
6431
  startDate: "Alku",
@@ -6433,7 +6433,7 @@ var calendar = {
6433
6433
  title: "Kalenteri"
6434
6434
  };
6435
6435
  var guests = {
6436
- label: "Kuka",
6436
+ label: "Vierasmäärä",
6437
6437
  labelPlaceholder: "Lisää vieraat",
6438
6438
  title: "Ketkä ovat tulossa?",
6439
6439
  adultsLabel: "Aikuiset",
package/lib/index.umd.js CHANGED
@@ -6391,7 +6391,7 @@
6391
6391
  instance.loadLanguages;
6392
6392
 
6393
6393
  var calendar$1 = {
6394
- label: "When",
6394
+ label: "Date",
6395
6395
  roomsLabelPlaceholder: "Add check-in and check-out",
6396
6396
  eventsLabelPlaceholder: "Add search dates",
6397
6397
  startDate: "Start date",
@@ -6399,7 +6399,7 @@
6399
6399
  title: "Calendar"
6400
6400
  };
6401
6401
  var guests$1 = {
6402
- label: "Who",
6402
+ label: "Number of guests",
6403
6403
  labelPlaceholder: "Add guests",
6404
6404
  title: "Who's coming?",
6405
6405
  adultsLabel: "Adults",
@@ -6427,7 +6427,7 @@
6427
6427
  };
6428
6428
 
6429
6429
  var calendar = {
6430
- label: "Milloin",
6430
+ label: "Ajankohta",
6431
6431
  roomsLabelPlaceholder: "Lisää check-in ja check-out",
6432
6432
  eventsLabelPlaceholder: "Lisää aikaväli",
6433
6433
  startDate: "Alku",
@@ -6435,7 +6435,7 @@
6435
6435
  title: "Kalenteri"
6436
6436
  };
6437
6437
  var guests = {
6438
- label: "Kuka",
6438
+ label: "Vierasmäärä",
6439
6439
  labelPlaceholder: "Lisää vieraat",
6440
6440
  title: "Ketkä ovat tulossa?",
6441
6441
  adultsLabel: "Aikuiset",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "willba-component-library",
3
- "version": "0.2.6",
3
+ "version": "0.2.8",
4
4
  "description": "A custom UI component library",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.esm.js",
package/src/locales/en/filterBar.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "calendar": {
3
- "label": "When",
3
+ "label": "Date",
4
4
  "roomsLabelPlaceholder": "Add check-in and check-out",
5
5
  "eventsLabelPlaceholder": "Add search dates",
6
6
  "startDate": "Start date",
@@ -8,7 +8,7 @@
8
8
  "title": "Calendar"
9
9
  },
10
10
  "guests": {
11
- "label": "Who",
11
+ "label": "Number of guests",
12
12
  "labelPlaceholder": "Add guests",
13
13
  "title": "Who's coming?",
14
14
  "adultsLabel": "Adults",
package/src/locales/fi/filterBar.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "calendar": {
3
- "label": "Milloin",
3
+ "label": "Ajankohta",
4
4
  "roomsLabelPlaceholder": "Lisää check-in ja check-out",
5
5
  "eventsLabelPlaceholder": "Lisää aikaväli",
6
6
  "startDate": "Alku",
@@ -8,7 +8,7 @@
8
8
  "title": "Kalenteri"
9
9
  },
10
10
  "guests": {
11
- "label": "Kuka",
11
+ "label": "Vierasmäärä",
12
12
  "labelPlaceholder": "Lisää vieraat",
13
13
  "title": "Ketkä ovat tulossa?",
14
14
  "adultsLabel": "Aikuiset",