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.umd.js
CHANGED
|
@@ -116,8 +116,8 @@
|
|
|
116
116
|
}
|
|
117
117
|
}
|
|
118
118
|
|
|
119
|
-
var css_248z$
|
|
120
|
-
styleInject(css_248z$
|
|
119
|
+
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}";
|
|
120
|
+
styleInject(css_248z$8);
|
|
121
121
|
|
|
122
122
|
/**
|
|
123
123
|
* Primary UI component for user interaction
|
|
@@ -128,23 +128,23 @@
|
|
|
128
128
|
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)));
|
|
129
129
|
};
|
|
130
130
|
|
|
131
|
-
var css_248z$
|
|
132
|
-
styleInject(css_248z$
|
|
131
|
+
var css_248z$7 = ".filter-bar-divider {\n width: 1px;\n margin: 0 10px;\n height: 35px;\n background-color: #384265;\n}";
|
|
132
|
+
styleInject(css_248z$7);
|
|
133
133
|
|
|
134
134
|
function Divider() {
|
|
135
135
|
return React__default.createElement("div", { className: "filter-bar-divider" });
|
|
136
136
|
}
|
|
137
137
|
|
|
138
|
-
var css_248z$
|
|
139
|
-
styleInject(css_248z$
|
|
138
|
+
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";
|
|
139
|
+
styleInject(css_248z$6);
|
|
140
140
|
|
|
141
141
|
function SelectButton(_a) {
|
|
142
142
|
var label = _a.label, onClick = _a.onClick;
|
|
143
143
|
return (React__default.createElement("button", { className: "filter-bar-select-button", onClick: onClick }, label));
|
|
144
144
|
}
|
|
145
145
|
|
|
146
|
-
var css_248z$
|
|
147
|
-
styleInject(css_248z$
|
|
146
|
+
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}";
|
|
147
|
+
styleInject(css_248z$5);
|
|
148
148
|
|
|
149
149
|
function SubmitButton(_a) {
|
|
150
150
|
var onClick = _a.onClick;
|
|
@@ -5706,29 +5706,25 @@
|
|
|
5706
5706
|
React__default.createElement(Root, { initialProps: props })));
|
|
5707
5707
|
}
|
|
5708
5708
|
|
|
5709
|
-
var css_248z$
|
|
5709
|
+
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}";
|
|
5710
|
+
styleInject(css_248z$4);
|
|
5711
|
+
|
|
5712
|
+
var css_248z$3 = ".filter-bar-calendar {\n display: flex;\n justify-content: center;\n}";
|
|
5710
5713
|
styleInject(css_248z$3);
|
|
5711
5714
|
|
|
5712
|
-
var
|
|
5713
|
-
function Calendar() {
|
|
5714
|
-
var
|
|
5715
|
-
|
|
5716
|
-
|
|
5715
|
+
var currentMonth = new Date();
|
|
5716
|
+
function Calendar(_a) {
|
|
5717
|
+
var calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange;
|
|
5718
|
+
var defaultCalendarSelected = {
|
|
5719
|
+
from: currentMonth,
|
|
5720
|
+
to: addDays(currentMonth, 0),
|
|
5717
5721
|
};
|
|
5718
|
-
|
|
5719
|
-
|
|
5720
|
-
|
|
5721
|
-
|
|
5722
|
-
|
|
5723
|
-
}
|
|
5724
|
-
else if (range.to) {
|
|
5725
|
-
footer = (React__default.createElement("p", null,
|
|
5726
|
-
format(range.from, "PPP"),
|
|
5727
|
-
"\u2013",
|
|
5728
|
-
format(range.to, "PPP")));
|
|
5729
|
-
}
|
|
5730
|
-
}
|
|
5731
|
-
return (React__default.createElement(DayPicker, { id: "test", mode: "range", numberOfMonths: 2, defaultMonth: pastMonth, selected: range, footer: footer, onSelect: setRange }));
|
|
5722
|
+
React__default.useEffect(function () {
|
|
5723
|
+
if (!calendarRange)
|
|
5724
|
+
setCalendarRange(defaultCalendarSelected);
|
|
5725
|
+
}, []);
|
|
5726
|
+
return (React__default.createElement("div", { className: "filter-bar-calendar" },
|
|
5727
|
+
React__default.createElement(DayPicker, { id: "test", mode: "range", numberOfMonths: 2, defaultMonth: currentMonth, selected: calendarRange, onSelect: setCalendarRange })));
|
|
5732
5728
|
}
|
|
5733
5729
|
|
|
5734
5730
|
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}";
|
|
@@ -5736,7 +5732,7 @@
|
|
|
5736
5732
|
|
|
5737
5733
|
function Guests(_a) {
|
|
5738
5734
|
var guestsAdults = _a.guestsAdults, guestsKids = _a.guestsKids, decrementAdults = _a.decrementAdults, incrementAdults = _a.incrementAdults, decrementKids = _a.decrementKids, incrementKids = _a.incrementKids;
|
|
5739
|
-
return (React__default.createElement("div", { className: "
|
|
5735
|
+
return (React__default.createElement("div", { className: "filter-bar-guests" },
|
|
5740
5736
|
React__default.createElement("h3", null, "Guests"),
|
|
5741
5737
|
React__default.createElement("p", null, "Who's coming?"),
|
|
5742
5738
|
React__default.createElement("div", { className: "guests-filter-container" },
|
|
@@ -5779,19 +5775,20 @@
|
|
|
5779
5775
|
|
|
5780
5776
|
function useFilterBar() {
|
|
5781
5777
|
var _a = React__default.useState(false), selectedFilter = _a[0], setSelectedFilter = _a[1];
|
|
5782
|
-
|
|
5783
|
-
|
|
5784
|
-
var
|
|
5785
|
-
var
|
|
5786
|
-
var _d = React__default.useState(0), categories = _d[0], setCategories = _d[1];
|
|
5778
|
+
var _b = React__default.useState(), calendarRange = _b[0], setCalendarRange = _b[1];
|
|
5779
|
+
var _c = React__default.useState(1), guestsAdults = _c[0], setGuestsAdults = _c[1];
|
|
5780
|
+
var _d = React__default.useState(0), guestsKids = _d[0], setGuestsKids = _d[1];
|
|
5781
|
+
var _e = React__default.useState(0), categories = _e[0], setCategories = _e[1];
|
|
5787
5782
|
var handleSelectedFilter = function (id) {
|
|
5788
5783
|
setSelectedFilter(id);
|
|
5789
5784
|
};
|
|
5790
5785
|
var handleSubmit = function () {
|
|
5791
5786
|
var queryParams = new URLSearchParams();
|
|
5792
5787
|
var params = {
|
|
5793
|
-
|
|
5794
|
-
|
|
5788
|
+
startDate: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
|
|
5789
|
+
? format(calendarRange.from, 'yyyy-MM-dd')
|
|
5790
|
+
: '',
|
|
5791
|
+
endDate: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? format(calendarRange.to, 'yyyy-MM-dd') : '',
|
|
5795
5792
|
guestsAdults: guestsAdults,
|
|
5796
5793
|
guestsKids: guestsKids,
|
|
5797
5794
|
categories: categories,
|
|
@@ -5811,6 +5808,8 @@
|
|
|
5811
5808
|
guestsAdults: guestsAdults,
|
|
5812
5809
|
guestsKids: guestsKids,
|
|
5813
5810
|
categories: categories,
|
|
5811
|
+
calendarRange: calendarRange,
|
|
5812
|
+
setCalendarRange: setCalendarRange,
|
|
5814
5813
|
setSelectedFilter: setSelectedFilter,
|
|
5815
5814
|
setGuestsAdults: setGuestsAdults,
|
|
5816
5815
|
setGuestsKids: setGuestsKids,
|
|
@@ -5824,20 +5823,19 @@
|
|
|
5824
5823
|
styleInject(css_248z);
|
|
5825
5824
|
|
|
5826
5825
|
function FilterBar() {
|
|
5827
|
-
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;
|
|
5826
|
+
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;
|
|
5828
5827
|
return (React__default.createElement("div", { className: "filter-bar" },
|
|
5829
5828
|
React__default.createElement("div", { className: "filter-bar-header" },
|
|
5830
|
-
React__default.createElement(SelectButton, { label:
|
|
5829
|
+
React__default.createElement(SelectButton, { label: 'Start date', onClick: function () { return handleSelectedFilter(1); } }),
|
|
5831
5830
|
React__default.createElement(Divider, null),
|
|
5832
|
-
React__default.createElement(SelectButton, { label:
|
|
5831
|
+
React__default.createElement(SelectButton, { label: 'End date', onClick: function () { return handleSelectedFilter(2); } }),
|
|
5833
5832
|
React__default.createElement(Divider, null),
|
|
5834
5833
|
React__default.createElement(SelectButton, { label: "Guests", onClick: function () { return handleSelectedFilter(3); } }),
|
|
5835
5834
|
React__default.createElement(Divider, null),
|
|
5836
5835
|
React__default.createElement(SelectButton, { label: "Categories", onClick: function () { return handleSelectedFilter(4); } }),
|
|
5837
5836
|
React__default.createElement(SubmitButton, { onClick: handleSubmit })),
|
|
5838
5837
|
selectedFilter && (React__default.createElement("div", { className: "filter-bar-container" },
|
|
5839
|
-
selectedFilter === 1 && React__default.createElement(Calendar,
|
|
5840
|
-
selectedFilter === 2 && React__default.createElement(Calendar, null),
|
|
5838
|
+
(selectedFilter === 1 || selectedFilter === 2) && (React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange })),
|
|
5841
5839
|
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); } })),
|
|
5842
5840
|
selectedFilter === 4 && (React__default.createElement(Categories, { categories: categories, setCategories: setCategories }))))));
|
|
5843
5841
|
}
|