willba-component-library 0.0.33 → 0.0.35
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/lib/components/FilterBar/components/calendar/Calendar.d.ts +4 -3
- package/lib/components/FilterBar/hooks/useFilterBar.d.ts +8 -5
- package/lib/index.esm.js +39 -41
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +39 -41
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +39 -41
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/components/FilterBar/FilterBar.tsx +11 -6
- package/src/components/FilterBar/components/calendar/Calendar.css +4 -0
- package/src/components/FilterBar/components/calendar/Calendar.tsx +25 -33
- package/src/components/FilterBar/components/guests/Guests.tsx +1 -1
- package/src/components/FilterBar/hooks/useFilterBar.tsx +10 -5
package/lib/index.js
CHANGED
|
@@ -114,8 +114,8 @@ function styleInject(css, ref) {
|
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
116
|
|
|
117
|
-
var css_248z$
|
|
118
|
-
styleInject(css_248z$
|
|
117
|
+
var css_248z$8 = ".storybook-button {\r\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n font-weight: 700;\r\n border: 0;\r\n border-radius: 3em;\r\n cursor: pointer;\r\n display: inline-block;\r\n line-height: 1;\r\n}\r\n.storybook-button--primary {\r\n color: white;\r\n background-color: #1ea7fd;\r\n}\r\n.storybook-button--secondary {\r\n color: #333;\r\n background-color: transparent;\r\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\r\n}\r\n.storybook-button--small {\r\n font-size: 12px;\r\n padding: 10px 16px;\r\n}\r\n.storybook-button--medium {\r\n font-size: 14px;\r\n padding: 11px 20px;\r\n}\r\n.storybook-button--large {\r\n font-size: 16px;\r\n padding: 12px 24px;\r\n}";
|
|
118
|
+
styleInject(css_248z$8);
|
|
119
119
|
|
|
120
120
|
/**
|
|
121
121
|
* Primary UI component for user interaction
|
|
@@ -126,23 +126,23 @@ var Button$1 = function (_a) {
|
|
|
126
126
|
return (React__default.createElement("button", { type: "button", className: classNames("storybook-button", "storybook-button--".concat(size), "storybook-button--".concat(type)), style: textColor ? { color: textColor } : {}, onClick: onClick }, "".concat(label, " ").concat(theState)));
|
|
127
127
|
};
|
|
128
128
|
|
|
129
|
-
var css_248z$
|
|
130
|
-
styleInject(css_248z$
|
|
129
|
+
var css_248z$7 = ".filter-bar-divider {\n width: 1px;\n margin: 0 10px;\n height: 35px;\n background-color: #384265;\n}";
|
|
130
|
+
styleInject(css_248z$7);
|
|
131
131
|
|
|
132
132
|
function Divider() {
|
|
133
133
|
return React__default.createElement("div", { className: "filter-bar-divider" });
|
|
134
134
|
}
|
|
135
135
|
|
|
136
|
-
var css_248z$
|
|
137
|
-
styleInject(css_248z$
|
|
136
|
+
var css_248z$6 = ".filter-bar-select-button {\n width: 100%;\n height: auto;\n background-color: transparent;\n border: none;\n padding: 10px 20px;\n border-radius: 20px;\n cursor: pointer;\n}\n";
|
|
137
|
+
styleInject(css_248z$6);
|
|
138
138
|
|
|
139
139
|
function SelectButton(_a) {
|
|
140
140
|
var label = _a.label, onClick = _a.onClick;
|
|
141
141
|
return (React__default.createElement("button", { className: "filter-bar-select-button", onClick: onClick }, label));
|
|
142
142
|
}
|
|
143
143
|
|
|
144
|
-
var css_248z$
|
|
145
|
-
styleInject(css_248z$
|
|
144
|
+
var css_248z$5 = ".filter-bar-submit-button {\n width: auto;\n height: auto;\n background-color: #384265;\n color: #fff;\n padding: 10px 20px;\n border-radius: 20px;\n cursor: pointer;\n border: none;\n white-space: nowrap;\n}";
|
|
145
|
+
styleInject(css_248z$5);
|
|
146
146
|
|
|
147
147
|
function SubmitButton(_a) {
|
|
148
148
|
var onClick = _a.onClick;
|
|
@@ -5704,29 +5704,25 @@ function DayPicker(props) {
|
|
|
5704
5704
|
React__default.createElement(Root, { initialProps: props })));
|
|
5705
5705
|
}
|
|
5706
5706
|
|
|
5707
|
-
var css_248z$
|
|
5707
|
+
var css_248z$4 = ".rdp {\n --rdp-cell-size: 40px;\n --rdp-caption-font-size: 18px;\n --rdp-accent-color: #0000ff;\n --rdp-background-color: #e7edff;\n --rdp-accent-color-dark: #3003e1;\n --rdp-background-color-dark: #180270;\n --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */\n --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */\n\n margin: 1em;\n}\n\n/* Hide elements for devices that are not screen readers */\n.rdp-vhidden {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n background: transparent;\n border: 0;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n position: absolute !important;\n top: 0;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n overflow: hidden !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n border: 0 !important;\n}\n\n/* Buttons */\n.rdp-button_reset {\n appearance: none;\n position: relative;\n margin: 0;\n padding: 0;\n cursor: default;\n color: inherit;\n background: none;\n font: inherit;\n\n -moz-appearance: none;\n -webkit-appearance: none;\n}\n\n.rdp-button_reset:focus-visible {\n /* Make sure to reset outline only when :focus-visible is supported */\n outline: none;\n}\n\n.rdp-button {\n border: 2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected) {\n opacity: 0.25;\n}\n\n.rdp-button:not([disabled]) {\n cursor: pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]) {\n color: inherit;\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {\n background-color: var(--rdp-background-color);\n}\n\n.rdp-months {\n display: flex;\n}\n\n.rdp-month {\n margin: 0 1em;\n}\n\n.rdp-month:first-child {\n margin-left: 0;\n}\n\n.rdp-month:last-child {\n margin-right: 0;\n}\n\n.rdp-table {\n margin: 0;\n max-width: calc(var(--rdp-cell-size) * 7);\n border-collapse: collapse;\n}\n\n.rdp-with_weeknumber .rdp-table {\n max-width: calc(var(--rdp-cell-size) * 8);\n border-collapse: collapse;\n}\n\n.rdp-caption {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0;\n text-align: left;\n}\n\n.rdp-multiple_months .rdp-caption {\n position: relative;\n display: block;\n text-align: center;\n}\n\n.rdp-caption_dropdowns {\n position: relative;\n display: inline-flex;\n}\n\n.rdp-caption_label {\n position: relative;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n margin: 0;\n padding: 0 0.25em;\n white-space: nowrap;\n color: currentColor;\n border: 0;\n border: 2px solid transparent;\n font-family: inherit;\n font-size: var(--rdp-caption-font-size);\n font-weight: bold;\n}\n\n.rdp-nav {\n white-space: nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n}\n\n.rdp-nav_button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n padding: 0.25em;\n border-radius: 100%;\n}\n\n/* ---------- */\n/* Dropdowns */\n/* ---------- */\n\n.rdp-dropdown_year,\n.rdp-dropdown_month {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.rdp-dropdown {\n appearance: none;\n position: absolute;\n z-index: 2;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n margin: 0;\n padding: 0;\n cursor: inherit;\n opacity: 0;\n border: none;\n background-color: transparent;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n.rdp-dropdown[disabled] {\n opacity: unset;\n color: unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {\n background-color: var(--rdp-background-color);\n border: var(--rdp-outline);\n border-radius: 6px;\n}\n\n.rdp-dropdown_icon {\n margin: 0 0 0 5px;\n}\n\n.rdp-head {\n border: 0;\n}\n\n.rdp-head_row,\n.rdp-row {\n height: 100%;\n}\n\n.rdp-head_cell {\n vertical-align: middle;\n font-size: 0.75em;\n font-weight: 700;\n text-align: center;\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-transform: uppercase;\n}\n\n.rdp-tbody {\n border: 0;\n}\n\n.rdp-tfoot {\n margin: 0.5em;\n}\n\n.rdp-cell {\n width: var(--rdp-cell-size);\n height: 100%;\n height: var(--rdp-cell-size);\n padding: 0;\n text-align: center;\n}\n\n.rdp-weeknumber {\n font-size: 0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day {\n display: flex;\n overflow: hidden;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--rdp-cell-size);\n max-width: var(--rdp-cell-size);\n height: var(--rdp-cell-size);\n margin: 0;\n border: 2px solid transparent;\n border-radius: 100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside) {\n font-weight: bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover {\n color: white;\n opacity: 1;\n background-color: var(--rdp-accent-color);\n}\n\n.rdp-day_outside {\n opacity: 0.5;\n}\n\n.rdp-day_selected:focus-visible {\n /* Since the background is the same use again the outline */\n outline: var(--rdp-outline);\n outline-offset: 2px;\n z-index: 1;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.rdp-day_range_end.rdp-day_range_start {\n border-radius: 100%;\n}\n\n.rdp-day_range_middle {\n border-radius: 0;\n}";
|
|
5708
|
+
styleInject(css_248z$4);
|
|
5709
|
+
|
|
5710
|
+
var css_248z$3 = ".filter-bar-calendar {\n display: flex;\n justify-content: center;\n}";
|
|
5708
5711
|
styleInject(css_248z$3);
|
|
5709
5712
|
|
|
5710
|
-
var
|
|
5711
|
-
function Calendar() {
|
|
5712
|
-
var
|
|
5713
|
-
|
|
5714
|
-
|
|
5713
|
+
var currentMonth = new Date();
|
|
5714
|
+
function Calendar(_a) {
|
|
5715
|
+
var calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange;
|
|
5716
|
+
var defaultCalendarSelected = {
|
|
5717
|
+
from: currentMonth,
|
|
5718
|
+
to: addDays(currentMonth, 0),
|
|
5715
5719
|
};
|
|
5716
|
-
|
|
5717
|
-
|
|
5718
|
-
|
|
5719
|
-
|
|
5720
|
-
|
|
5721
|
-
}
|
|
5722
|
-
else if (range.to) {
|
|
5723
|
-
footer = (React__default.createElement("p", null,
|
|
5724
|
-
format(range.from, "PPP"),
|
|
5725
|
-
"\u2013",
|
|
5726
|
-
format(range.to, "PPP")));
|
|
5727
|
-
}
|
|
5728
|
-
}
|
|
5729
|
-
return (React__default.createElement(DayPicker, { id: "test", mode: "range", numberOfMonths: 2, defaultMonth: pastMonth, selected: range, footer: footer, onSelect: setRange }));
|
|
5720
|
+
React__default.useEffect(function () {
|
|
5721
|
+
if (!calendarRange)
|
|
5722
|
+
setCalendarRange(defaultCalendarSelected);
|
|
5723
|
+
}, []);
|
|
5724
|
+
return (React__default.createElement("div", { className: "filter-bar-calendar" },
|
|
5725
|
+
React__default.createElement(DayPicker, { id: "test", mode: "range", numberOfMonths: 2, defaultMonth: currentMonth, selected: calendarRange, onSelect: setCalendarRange })));
|
|
5730
5726
|
}
|
|
5731
5727
|
|
|
5732
5728
|
var css_248z$2 = ".filter-bar-guests {\n text-align: initial;\n}\n\n.guests-filter-container {\n display: flex;\n margin-top: 30px;\n}\n\n.guests-filter-inner {\n display: flex;\n align-items: center;\n}\n\n.guests-filter-inner:not(:last-child) {\n margin-right: 50px;\n}\n\n.guests-filter-inner > span {\n display: block;\n margin-right: 20px;\n font-weight: bold;\n}\n\n.guests-filter-inner > div {\n display: flex;\n align-items: center;\n}\n\n.guests-filter-inner > div > span {\n margin: 0 10px;\n}\n\n.guests-filter-inner > div button {\n border-radius: 50%;\n border: none;\n background-color: #CDEEFF;\n width: 25px;\n height: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 20px;\n}";
|
|
@@ -5734,7 +5730,7 @@ styleInject(css_248z$2);
|
|
|
5734
5730
|
|
|
5735
5731
|
function Guests(_a) {
|
|
5736
5732
|
var guestsAdults = _a.guestsAdults, guestsKids = _a.guestsKids, decrementAdults = _a.decrementAdults, incrementAdults = _a.incrementAdults, decrementKids = _a.decrementKids, incrementKids = _a.incrementKids;
|
|
5737
|
-
return (React__default.createElement("div", { className: "
|
|
5733
|
+
return (React__default.createElement("div", { className: "filter-bar-guests" },
|
|
5738
5734
|
React__default.createElement("h3", null, "Guests"),
|
|
5739
5735
|
React__default.createElement("p", null, "Who's coming?"),
|
|
5740
5736
|
React__default.createElement("div", { className: "guests-filter-container" },
|
|
@@ -5777,19 +5773,20 @@ function Categories(_a) {
|
|
|
5777
5773
|
|
|
5778
5774
|
function useFilterBar() {
|
|
5779
5775
|
var _a = React__default.useState(false), selectedFilter = _a[0], setSelectedFilter = _a[1];
|
|
5780
|
-
|
|
5781
|
-
|
|
5782
|
-
var
|
|
5783
|
-
var
|
|
5784
|
-
var _d = React__default.useState(0), categories = _d[0], setCategories = _d[1];
|
|
5776
|
+
var _b = React__default.useState(), calendarRange = _b[0], setCalendarRange = _b[1];
|
|
5777
|
+
var _c = React__default.useState(1), guestsAdults = _c[0], setGuestsAdults = _c[1];
|
|
5778
|
+
var _d = React__default.useState(0), guestsKids = _d[0], setGuestsKids = _d[1];
|
|
5779
|
+
var _e = React__default.useState(0), categories = _e[0], setCategories = _e[1];
|
|
5785
5780
|
var handleSelectedFilter = function (id) {
|
|
5786
5781
|
setSelectedFilter(id);
|
|
5787
5782
|
};
|
|
5788
5783
|
var handleSubmit = function () {
|
|
5789
5784
|
var queryParams = new URLSearchParams();
|
|
5790
5785
|
var params = {
|
|
5791
|
-
|
|
5792
|
-
|
|
5786
|
+
startDate: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
|
|
5787
|
+
? format(calendarRange.from, 'yyyy-MM-dd')
|
|
5788
|
+
: '',
|
|
5789
|
+
endDate: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? format(calendarRange.to, 'yyyy-MM-dd') : '',
|
|
5793
5790
|
guestsAdults: guestsAdults,
|
|
5794
5791
|
guestsKids: guestsKids,
|
|
5795
5792
|
categories: categories,
|
|
@@ -5809,6 +5806,8 @@ function useFilterBar() {
|
|
|
5809
5806
|
guestsAdults: guestsAdults,
|
|
5810
5807
|
guestsKids: guestsKids,
|
|
5811
5808
|
categories: categories,
|
|
5809
|
+
calendarRange: calendarRange,
|
|
5810
|
+
setCalendarRange: setCalendarRange,
|
|
5812
5811
|
setSelectedFilter: setSelectedFilter,
|
|
5813
5812
|
setGuestsAdults: setGuestsAdults,
|
|
5814
5813
|
setGuestsKids: setGuestsKids,
|
|
@@ -5822,20 +5821,19 @@ var css_248z = ".filter-bar {\r\n box-sizing: border-box;\r\n max-width: 1100p
|
|
|
5822
5821
|
styleInject(css_248z);
|
|
5823
5822
|
|
|
5824
5823
|
function FilterBar() {
|
|
5825
|
-
var _a = useFilterBar(), selectedFilter = _a.selectedFilter, guestsAdults = _a.guestsAdults, guestsKids = _a.guestsKids, categories = _a.categories, setGuestsAdults = _a.setGuestsAdults, setGuestsKids = _a.setGuestsKids, setCategories = _a.setCategories, handleSelectedFilter = _a.handleSelectedFilter, handleSubmit = _a.handleSubmit;
|
|
5824
|
+
var _a = useFilterBar(), selectedFilter = _a.selectedFilter, guestsAdults = _a.guestsAdults, guestsKids = _a.guestsKids, categories = _a.categories, calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange, setGuestsAdults = _a.setGuestsAdults, setGuestsKids = _a.setGuestsKids, setCategories = _a.setCategories, handleSelectedFilter = _a.handleSelectedFilter, handleSubmit = _a.handleSubmit;
|
|
5826
5825
|
return (React__default.createElement("div", { className: "filter-bar" },
|
|
5827
5826
|
React__default.createElement("div", { className: "filter-bar-header" },
|
|
5828
|
-
React__default.createElement(SelectButton, { label:
|
|
5827
|
+
React__default.createElement(SelectButton, { label: 'Start date', onClick: function () { return handleSelectedFilter(1); } }),
|
|
5829
5828
|
React__default.createElement(Divider, null),
|
|
5830
|
-
React__default.createElement(SelectButton, { label:
|
|
5829
|
+
React__default.createElement(SelectButton, { label: 'End date', onClick: function () { return handleSelectedFilter(2); } }),
|
|
5831
5830
|
React__default.createElement(Divider, null),
|
|
5832
5831
|
React__default.createElement(SelectButton, { label: "Guests", onClick: function () { return handleSelectedFilter(3); } }),
|
|
5833
5832
|
React__default.createElement(Divider, null),
|
|
5834
5833
|
React__default.createElement(SelectButton, { label: "Categories", onClick: function () { return handleSelectedFilter(4); } }),
|
|
5835
5834
|
React__default.createElement(SubmitButton, { onClick: handleSubmit })),
|
|
5836
5835
|
selectedFilter && (React__default.createElement("div", { className: "filter-bar-container" },
|
|
5837
|
-
selectedFilter === 1 && React__default.createElement(Calendar,
|
|
5838
|
-
selectedFilter === 2 && React__default.createElement(Calendar, null),
|
|
5836
|
+
(selectedFilter === 1 || selectedFilter === 2) && (React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange })),
|
|
5839
5837
|
selectedFilter === 3 && (React__default.createElement(Guests, { guestsAdults: guestsAdults, guestsKids: guestsKids, decrementAdults: function () { return setGuestsAdults(guestsAdults - 1); }, incrementAdults: function () { return setGuestsAdults(guestsAdults + 1); }, decrementKids: function () { return setGuestsKids(guestsKids - 1); }, incrementKids: function () { return setGuestsKids(guestsKids + 1); } })),
|
|
5840
5838
|
selectedFilter === 4 && (React__default.createElement(Categories, { categories: categories, setCategories: setCategories }))))));
|
|
5841
5839
|
}
|