willba-component-library 0.2.45 → 0.2.47

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 (19) hide show
  1. package/lib/components/FilterBar/FilterBar.d.ts +1 -1
  2. package/lib/components/FilterBar/FilterBarTypes.d.ts +1 -0
  3. package/lib/core/components/buttons/submit-button/SubmitButton.d.ts +2 -1
  4. package/lib/index.d.ts +2 -1
  5. package/lib/index.esm.js +9 -7
  6. package/lib/index.esm.js.map +1 -1
  7. package/lib/index.js +9 -7
  8. package/lib/index.js.map +1 -1
  9. package/lib/index.umd.js +9 -7
  10. package/lib/index.umd.js.map +1 -1
  11. package/lib/themes/useTheme.d.ts +1 -2
  12. package/package.json +1 -1
  13. package/src/components/FilterBar/FilterBar.stories.tsx +1 -0
  14. package/src/components/FilterBar/FilterBar.tsx +2 -0
  15. package/src/components/FilterBar/FilterBarTypes.ts +1 -0
  16. package/src/components/FilterCalendar/FilterCalendar.css +1 -1
  17. package/src/core/components/buttons/submit-button/SubmitButton.css +7 -0
  18. package/src/core/components/buttons/submit-button/SubmitButton.tsx +14 -2
  19. package/src/themes/useTheme.tsx +1 -1
package/lib/components/FilterBar/FilterBar.d.ts CHANGED
@@ -2,4 +2,4 @@ import React from 'react';
2
2
  import '../../themes/Default.css';
3
3
  import { FilterBarProps } from './FilterBarTypes';
4
4
  import './FilterBar.css';
5
- export default function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, }: FilterBarProps): React.JSX.Element;
5
+ export default function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, isLoading, }: FilterBarProps): React.JSX.Element;
package/lib/components/FilterBar/FilterBarTypes.d.ts CHANGED
@@ -11,6 +11,7 @@ export type FilterBarProps = {
11
11
  mode?: string;
12
12
  defaultTab?: string;
13
13
  tabs?: Tab[];
14
+ isLoading?: boolean;
14
15
  };
15
16
  export type AgeCategoryCount = {
16
17
  [categoryId: string]: number;
package/lib/core/components/buttons/submit-button/SubmitButton.d.ts CHANGED
@@ -5,6 +5,7 @@ type Props = {
5
5
  startIcon?: ReactNode;
6
6
  label?: string;
7
7
  disabled?: boolean;
8
+ isLoading?: boolean;
8
9
  };
9
- export declare const SubmitButton: ({ onClick, startIcon, label, disabled, }: Props) => React.JSX.Element;
10
+ export declare const SubmitButton: ({ onClick, startIcon, label, disabled, isLoading, }: Props) => React.JSX.Element;
10
11
  export {};
package/lib/index.d.ts CHANGED
@@ -82,6 +82,7 @@ type FilterBarProps = {
82
82
  mode?: string;
83
83
  defaultTab?: string;
84
84
  tabs?: Tab[];
85
+ isLoading?: boolean;
85
86
  };
86
87
  type AgeCategoryType = {
87
88
  id: string;
@@ -104,7 +105,7 @@ type Tab = {
104
105
  label?: Translations;
105
106
  };
106
107
 
107
- declare function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, }: FilterBarProps): React.JSX.Element;
108
+ declare function FilterBar({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, isLoading, }: FilterBarProps): React.JSX.Element;
108
109
 
109
110
  interface FilterCalendarTypes extends Partial<CalendarTypes> {
110
111
  palette: Palette;
package/lib/index.esm.js CHANGED
@@ -513,6 +513,8 @@ function IconBase(props) {
513
513
  // THIS FILE IS AUTO GENERATED
514
514
  function FaSearch (props) {
515
515
  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"}}]})(props);
516
+ }function FaSpinner (props) {
517
+ return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"}}]})(props);
516
518
  }
517
519
 
518
520
  function useTheme(_a) {
@@ -2968,13 +2970,13 @@ var useCloseFilterSection = function (_a) {
2968
2970
  return { filtersRef: filtersRef };
2969
2971
  };
2970
2972
 
2971
- var css_248z$b = ".will-filter-bar-submit-button {\n width: auto;\n height: auto;\n background-color: var(--will-primary);\n color: var(--will-white);\n padding: 10px 20px;\n border-radius: 20px;\n cursor: pointer;\n border: none;\n white-space: nowrap;\n text-transform: uppercase;\n font-size: 12px;\n display: flex;\n align-items: center;\n}\n\n.will-filter-bar-submit-button span {\n margin-right: 10px;\n display: flex;\n}\n\nbutton.will-filter-bar-submit-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n\n@media (max-width: 960px) {\n .will-filter-bar-submit-button {\n justify-content: center;\n \n }\n}\n";
2973
+ var css_248z$b = ".will-filter-bar-submit-button {\n width: auto;\n height: auto;\n background-color: var(--will-primary);\n color: var(--will-white);\n padding: 10px 20px;\n border-radius: 20px;\n cursor: pointer;\n border: none;\n white-space: nowrap;\n text-transform: uppercase;\n font-size: 12px;\n display: flex;\n align-items: center;\n}\n\n.will-filter-bar-submit-button span {\n margin-right: 10px;\n display: flex;\n}\n\nbutton.will-filter-bar-submit-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n\n@media (max-width: 960px) {\n .will-filter-bar-submit-button {\n justify-content: center;\n \n }\n}\n\n/* --- */\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n";
2972
2974
  styleInject(css_248z$b);
2973
2975
 
2974
2976
  var SubmitButton = function (_a) {
2975
- var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled;
2976
- return (React__default__default.createElement("button", { className: "will-filter-bar-submit-button", onClick: onClick, disabled: disabled },
2977
- startIcon && React__default__default.createElement("span", null, startIcon),
2977
+ var onClick = _a.onClick, startIcon = _a.startIcon, label = _a.label, disabled = _a.disabled, isLoading = _a.isLoading;
2978
+ return (React__default__default.createElement("button", { className: "will-filter-bar-submit-button", onClick: onClick, disabled: disabled || isLoading },
2979
+ isLoading ? (React__default__default.createElement("span", null, React__default__default.createElement(FaSpinner, { style: { animation: 'spin 1s linear infinite' } }))) : (startIcon && React__default__default.createElement("span", null, startIcon)),
2978
2980
  label || 'Label'));
2979
2981
  };
2980
2982
 
@@ -11392,7 +11394,7 @@ var css_248z$1 = ".will-root {\n z-index: 999;\n width: fit-content;\n min-wi
11392
11394
  styleInject(css_248z$1);
11393
11395
 
11394
11396
  function FilterBar(_a) {
11395
- var language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b, _c = _a.redirectUrl, redirectUrl = _c === void 0 ? REDIRECT_URL_FALLBACK : _c, palette = _a.palette, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth, disableCalendarDates = _a.disableCalendarDates, mode = _a.mode, tabs = _a.tabs;
11397
+ var language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b, _c = _a.redirectUrl, redirectUrl = _c === void 0 ? REDIRECT_URL_FALLBACK : _c, palette = _a.palette, onSubmit = _a.onSubmit, fullWidth = _a.fullWidth, disableCalendarDates = _a.disableCalendarDates, mode = _a.mode, tabs = _a.tabs, isLoading = _a.isLoading;
11396
11398
  var themePalette = useTheme({ palette: palette });
11397
11399
  // Translations
11398
11400
  useUpdateTranslations({ language: language });
@@ -11436,7 +11438,7 @@ function FilterBar(_a) {
11436
11438
  selectedPath === Pages.ROOMS && (React__default__default.createElement(React__default__default.Fragment, null,
11437
11439
  React__default__default.createElement(Divider, null),
11438
11440
  React__default__default.createElement(SelectButton, { label: t('guests.label'), description: parsedGuests.content, onClick: function () { return handleSelectedFilter(FilterSections.GUESTS); }, active: !!parsedGuests.data.total }))),
11439
- React__default__default.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React__default__default.createElement(FaSearch, null), label: t('common:search') })),
11441
+ React__default__default.createElement(SubmitButton, { onClick: handleSubmit, startIcon: React__default__default.createElement(FaSearch, null), label: t('common:search'), isLoading: isLoading })),
11440
11442
  selectedFilter && (React__default__default.createElement("div", { className: "will-filter-bar-container ".concat(mode || 'light'), style: (!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {} },
11441
11443
  React__default__default.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),
11442
11444
  selectedFilter === FilterSections.CALENDAR && (React__default__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange, ref: filtersRef, disableCalendarDates: disableCalendarDates, selectedPath: selectedPath, language: language })),
@@ -11512,7 +11514,7 @@ var useFilterCalendar = function (_a) {
11512
11514
  };
11513
11515
  };
11514
11516
 
11515
- var css_248z = ".will-root .will-calendar-wrapper {\n box-shadow: var(--will-box-shadow-dark);\n border-radius: 20px;\n background-color: var(--will-white);\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-header,\n.will-root .will-calendar-wrapper .will-calendar-main,\n.will-root .will-calendar-wrapper .will-calendar-footer {\n padding: 20px;\n}\n\n/* Header */\n\n.will-root .will-calendar-wrapper .will-calendar-header {\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid var(--will-grey);\n align-items: center;\n}\n\n/* Footer */\n\n.will-root .will-calendar-wrapper .will-calendar-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-top: 1px solid var(--will-grey);\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates > div {\n margin-bottom: 5px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates-separator {\n margin: 0 15px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n display: flex;\n min-height: 17.50px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-actions {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n\n\n@media (max-width: 960px) {\n .will-root .will-calendar-wrapper {\n width: -webkit-fill-available;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-header,\n .will-root .will-calendar-wrapper .will-calendar-main,\n .will-root .will-calendar-wrapper .will-calendar-footer {\n padding: 20px 10px;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer {\n flex-direction: column;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-dates {\n margin-bottom: 12px;\n text-align: center;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n justify-content: center;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-actions {\n flex-direction: column;\n width: 100%;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-actions button{\n width: 100%;\n }\n }\n\n/**/\n\n.will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {\n position: initial;\n}";
11517
+ var css_248z = ".will-root .will-calendar-wrapper {\n box-shadow: var(--will-box-shadow-dark);\n border-radius: 20px;\n background-color: var(--will-white);\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-header,\n.will-root .will-calendar-wrapper .will-calendar-main,\n.will-root .will-calendar-wrapper .will-calendar-footer {\n padding: 20px;\n}\n\n/* Header */\n\n.will-root .will-calendar-wrapper .will-calendar-header {\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid var(--will-grey);\n align-items: center;\n}\n\n/* Footer */\n\n.will-root .will-calendar-wrapper .will-calendar-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-top: 1px solid var(--will-grey);\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates > div {\n margin-bottom: 5px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates-separator {\n margin: 0 15px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n display: flex;\n min-height: 20.5px;\n}\n\n.will-root .will-calendar-wrapper .will-calendar-footer-actions {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n\n\n@media (max-width: 960px) {\n .will-root .will-calendar-wrapper {\n width: -webkit-fill-available;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-header,\n .will-root .will-calendar-wrapper .will-calendar-main,\n .will-root .will-calendar-wrapper .will-calendar-footer {\n padding: 20px 10px;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer {\n flex-direction: column;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-dates {\n margin-bottom: 12px;\n text-align: center;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-dates .will-calendar-footer-booked {\n justify-content: center;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-actions {\n flex-direction: column;\n width: 100%;\n }\n\n .will-root .will-calendar-wrapper .will-calendar-footer-actions button{\n width: 100%;\n }\n }\n\n/**/\n\n.will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {\n position: initial;\n}";
11516
11518
  styleInject(css_248z);
11517
11519
 
11518
11520
  function FilterCalendar(_a) {