@searchspring/snap-preact-components 0.23.0 → 0.25.0
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/dist/cjs/components/Atoms/Skeleton/Skeleton.stories.js +1 -1
- package/dist/cjs/components/Molecules/Checkbox/Checkbox.stories.d.ts +14 -0
- package/dist/cjs/components/Molecules/Checkbox/Checkbox.stories.d.ts.map +1 -1
- package/dist/cjs/components/Molecules/Checkbox/Checkbox.stories.js +9 -0
- package/dist/cjs/components/Molecules/ErrorHandler/ErrorHandler.js +1 -1
- package/dist/cjs/components/Molecules/FacetSlider/FacetSlider.stories.d.ts +1 -0
- package/dist/cjs/components/Molecules/FacetSlider/FacetSlider.stories.d.ts.map +1 -1
- package/dist/cjs/components/Molecules/FacetSlider/FacetSlider.stories.js +1 -0
- package/dist/cjs/components/Molecules/Slideout/Slideout.d.ts +1 -2
- package/dist/cjs/components/Molecules/Slideout/Slideout.d.ts.map +1 -1
- package/dist/cjs/components/Molecules/Slideout/Slideout.js +0 -1
- package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.js +3 -3
- package/dist/cjs/components/Organisms/Recommendation/Recommendation.d.ts +2 -1
- package/dist/cjs/components/Organisms/Recommendation/Recommendation.d.ts.map +1 -1
- package/dist/cjs/components/Organisms/Recommendation/Recommendation.js +12 -12
- package/dist/cjs/components/Organisms/Recommendation/Recommendation.stories.d.ts +14 -0
- package/dist/cjs/components/Organisms/Recommendation/Recommendation.stories.d.ts.map +1 -1
- package/dist/cjs/components/Organisms/Recommendation/Recommendation.stories.js +9 -0
- package/dist/cjs/components/Organisms/Results/Results.d.ts.map +1 -1
- package/dist/cjs/components/Organisms/Results/Results.js +15 -15
- package/dist/cjs/components/Organisms/Results/Results.stories.d.ts +14 -1
- package/dist/cjs/components/Organisms/Results/Results.stories.d.ts.map +1 -1
- package/dist/cjs/components/Organisms/Results/Results.stories.js +14 -1
- package/dist/cjs/mocks/searchResponse.d.ts +25 -0
- package/dist/cjs/mocks/searchResponse.d.ts.map +1 -1
- package/dist/cjs/mocks/searchResponse.js +106 -1
- package/dist/esm/components/Atoms/Skeleton/Skeleton.stories.js +1 -1
- package/dist/esm/components/Molecules/Checkbox/Checkbox.stories.d.ts +14 -0
- package/dist/esm/components/Molecules/Checkbox/Checkbox.stories.d.ts.map +1 -1
- package/dist/esm/components/Molecules/Checkbox/Checkbox.stories.js +10 -0
- package/dist/esm/components/Molecules/ErrorHandler/ErrorHandler.js +2 -2
- package/dist/esm/components/Molecules/FacetSlider/FacetSlider.stories.d.ts +1 -0
- package/dist/esm/components/Molecules/FacetSlider/FacetSlider.stories.d.ts.map +1 -1
- package/dist/esm/components/Molecules/FacetSlider/FacetSlider.stories.js +1 -0
- package/dist/esm/components/Molecules/Slideout/Slideout.d.ts +1 -2
- package/dist/esm/components/Molecules/Slideout/Slideout.d.ts.map +1 -1
- package/dist/esm/components/Molecules/Slideout/Slideout.js +1 -3
- package/dist/esm/components/Organisms/Autocomplete/Autocomplete.js +3 -3
- package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts +2 -1
- package/dist/esm/components/Organisms/Recommendation/Recommendation.d.ts.map +1 -1
- package/dist/esm/components/Organisms/Recommendation/Recommendation.js +12 -12
- package/dist/esm/components/Organisms/Recommendation/Recommendation.stories.d.ts +14 -0
- package/dist/esm/components/Organisms/Recommendation/Recommendation.stories.d.ts.map +1 -1
- package/dist/esm/components/Organisms/Recommendation/Recommendation.stories.js +10 -0
- package/dist/esm/components/Organisms/Results/Results.d.ts.map +1 -1
- package/dist/esm/components/Organisms/Results/Results.js +15 -15
- package/dist/esm/components/Organisms/Results/Results.stories.d.ts +14 -1
- package/dist/esm/components/Organisms/Results/Results.stories.d.ts.map +1 -1
- package/dist/esm/components/Organisms/Results/Results.stories.js +14 -1
- package/dist/esm/mocks/searchResponse.d.ts +25 -0
- package/dist/esm/mocks/searchResponse.d.ts.map +1 -1
- package/dist/esm/mocks/searchResponse.js +105 -0
- package/package.json +11 -11
|
@@ -20,7 +20,7 @@ var preact_1 = require("preact");
|
|
|
20
20
|
var blocks_1 = require("@storybook/addon-docs/blocks");
|
|
21
21
|
var utilities_1 = require("../../../utilities");
|
|
22
22
|
var Skeleton_1 = require("./Skeleton");
|
|
23
|
-
var readme_md_1 = __importDefault(require("../
|
|
23
|
+
var readme_md_1 = __importDefault(require("../Skeleton/readme.md"));
|
|
24
24
|
exports.default = {
|
|
25
25
|
title: "Atoms/Skeleton",
|
|
26
26
|
component: Skeleton_1.Skeleton,
|
|
@@ -150,6 +150,20 @@ declare const _default: {
|
|
|
150
150
|
type: string;
|
|
151
151
|
};
|
|
152
152
|
};
|
|
153
|
+
startChecked: {
|
|
154
|
+
description: string;
|
|
155
|
+
table: {
|
|
156
|
+
type: {
|
|
157
|
+
summary: string;
|
|
158
|
+
};
|
|
159
|
+
defaultValue: {
|
|
160
|
+
summary: boolean;
|
|
161
|
+
};
|
|
162
|
+
};
|
|
163
|
+
control: {
|
|
164
|
+
type: string;
|
|
165
|
+
};
|
|
166
|
+
};
|
|
153
167
|
native: {
|
|
154
168
|
description: string;
|
|
155
169
|
table: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC
|
|
1
|
+
{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKrD,wBA8GE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAEzC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAM1C,eAAO,MAAM,MAAM,KAAoB,CAAC"}
|
|
@@ -99,6 +99,15 @@ exports.default = {
|
|
|
99
99
|
defaultValue: { summary: 'theme.colors.primary' },
|
|
100
100
|
},
|
|
101
101
|
control: { type: 'color' },
|
|
102
|
+
}, startChecked: {
|
|
103
|
+
description: 'Checkbox is checked initially(managed state)',
|
|
104
|
+
table: {
|
|
105
|
+
type: {
|
|
106
|
+
summary: 'boolean',
|
|
107
|
+
},
|
|
108
|
+
defaultValue: { summary: false },
|
|
109
|
+
},
|
|
110
|
+
control: { type: 'boolean' },
|
|
102
111
|
}, native: {
|
|
103
112
|
description: 'Render as unstyled native checkbox',
|
|
104
113
|
table: {
|
|
@@ -89,7 +89,7 @@ exports.ErrorHandler = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
89
89
|
var _a, _b, _c, _d, _e, _f;
|
|
90
90
|
var globalTheme = (0, providers_1.useTheme)();
|
|
91
91
|
var theme = __assign(__assign({}, globalTheme), properties.theme);
|
|
92
|
-
var props = __assign(__assign(__assign({}, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.
|
|
92
|
+
var props = __assign(__assign(__assign({}, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.errorHandler), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.errorHandler);
|
|
93
93
|
var controller = props.controller, error = props.error, disableStyles = props.disableStyles, style = props.style, onRetryClick = props.onRetryClick, className = props.className;
|
|
94
94
|
var subProps = {
|
|
95
95
|
icon: __assign(__assign(__assign({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FacetSlider.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetSlider/FacetSlider.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC
|
|
1
|
+
{"version":3,"file":"FacetSlider.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetSlider/FacetSlider.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK9D,wBAwIE;AAIF,eAAO,MAAM,KAAK,KAAoB,CAAC"}
|
|
@@ -11,6 +11,5 @@ export interface SlideoutProps extends ComponentProps {
|
|
|
11
11
|
overlayColor?: string;
|
|
12
12
|
slideDirection?: SlideDirectionType;
|
|
13
13
|
}
|
|
14
|
-
declare type SlideDirectionType = 'top' | 'right' | 'bottom' | 'left';
|
|
15
|
-
export {};
|
|
14
|
+
export declare type SlideDirectionType = 'top' | 'right' | 'bottom' | 'left';
|
|
16
15
|
//# sourceMappingURL=Slideout.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAyBhD,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAuE/D;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACpC;AAED,oBAAY,kBAAkB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC"}
|
|
@@ -25,7 +25,6 @@ var Overlay_1 = require("../../Atoms/Overlay");
|
|
|
25
25
|
var CSS = {
|
|
26
26
|
slideout: function (_a) {
|
|
27
27
|
var isActive = _a.isActive, width = _a.width, transitionSpeed = _a.transitionSpeed, slideDirection = _a.slideDirection;
|
|
28
|
-
//@ts-ignore
|
|
29
28
|
return (0, react_1.css)({
|
|
30
29
|
display: 'block',
|
|
31
30
|
position: 'fixed',
|
|
@@ -147,13 +147,13 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
147
147
|
0: {
|
|
148
148
|
columns: 2,
|
|
149
149
|
rows: 1,
|
|
150
|
-
hideFacets: true,
|
|
151
|
-
vertical: true,
|
|
150
|
+
hideFacets: props.hideFacets || true,
|
|
151
|
+
vertical: props.vertical || true,
|
|
152
152
|
},
|
|
153
153
|
540: {
|
|
154
154
|
columns: 3,
|
|
155
155
|
rows: 1,
|
|
156
|
-
vertical: true,
|
|
156
|
+
vertical: props.vertical || true,
|
|
157
157
|
},
|
|
158
158
|
768: {
|
|
159
159
|
columns: 2,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { RecommendationController } from '@searchspring/snap-controller';
|
|
3
|
-
import { ComponentProps, BreakpointsProps } from '../../../types';
|
|
3
|
+
import { ComponentProps, BreakpointsProps, Result as ResultType, InlineBannerContent } from '../../../types';
|
|
4
4
|
export declare const Recommendation: ((properties: RecommendationProps) => JSX.Element) & {
|
|
5
5
|
displayName: string;
|
|
6
6
|
};
|
|
@@ -11,6 +11,7 @@ export interface RecommendationProps extends ComponentProps {
|
|
|
11
11
|
nextButton?: JSX.Element | string;
|
|
12
12
|
hideButtons?: boolean;
|
|
13
13
|
loop?: boolean;
|
|
14
|
+
results?: ResultType[] | InlineBannerContent[];
|
|
14
15
|
pagination?: boolean;
|
|
15
16
|
controller: RecommendationController;
|
|
16
17
|
children?: JSX.Element[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAM9E,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAM9E,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,IAAI,UAAU,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAc7G,eAAO,MAAM,cAAc,gBAAyB,mBAAmB,KAAG,WAAW;;CAuKnF,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,UAAU,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}
|
|
@@ -59,15 +59,15 @@ exports.Recommendation = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
59
59
|
var theme = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {});
|
|
60
60
|
props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
|
|
61
61
|
}
|
|
62
|
-
var title = props.title, controller = props.controller, children = props.children, breakpoints = props.breakpoints, loop = props.loop, pagination = props.pagination, nextButton = props.nextButton, prevButton = props.prevButton, hideButtons = props.hideButtons, disableStyles = props.disableStyles, style = props.style, className = props.className, vertical = props.vertical, additionalProps = __rest(props, ["title", "controller", "children", "breakpoints", "loop", "pagination", "nextButton", "prevButton", "hideButtons", "disableStyles", "style", "className", "vertical"]);
|
|
62
|
+
var title = props.title, controller = props.controller, children = props.children, breakpoints = props.breakpoints, loop = props.loop, results = props.results, pagination = props.pagination, nextButton = props.nextButton, prevButton = props.prevButton, hideButtons = props.hideButtons, disableStyles = props.disableStyles, style = props.style, className = props.className, vertical = props.vertical, additionalProps = __rest(props, ["title", "controller", "children", "breakpoints", "loop", "results", "pagination", "nextButton", "prevButton", "hideButtons", "disableStyles", "style", "className", "vertical"]);
|
|
63
63
|
if (!controller || controller.type !== 'recommendation') {
|
|
64
64
|
throw new Error("<Recommendation> Component requires 'controller' prop with an instance of RecommendationController");
|
|
65
65
|
}
|
|
66
|
-
|
|
67
|
-
|
|
66
|
+
var resultsToRender = results || ((_d = controller.store) === null || _d === void 0 ? void 0 : _d.results);
|
|
67
|
+
if (children && children.length !== resultsToRender.length) {
|
|
68
|
+
controller.log.error("<Recommendation> Component received invalid number of children. Must match length of 'results' prop or 'controller.store.results'");
|
|
68
69
|
return;
|
|
69
70
|
}
|
|
70
|
-
var results = (_d = controller.store) === null || _d === void 0 ? void 0 : _d.results;
|
|
71
71
|
var subProps = {
|
|
72
72
|
carousel: __assign(__assign(__assign({
|
|
73
73
|
// default props
|
|
@@ -93,13 +93,13 @@ exports.Recommendation = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
93
93
|
return;
|
|
94
94
|
var resultLoopCount = [index, index + count];
|
|
95
95
|
var resultLoopOverCount;
|
|
96
|
-
if (index + count >
|
|
96
|
+
if (index + count > resultsToRender.length - 1) {
|
|
97
97
|
resultLoopCount = [index];
|
|
98
|
-
resultLoopOverCount = [0, index + count -
|
|
98
|
+
resultLoopOverCount = [0, index + count - resultsToRender.length];
|
|
99
99
|
}
|
|
100
|
-
var resultsImpressions =
|
|
100
|
+
var resultsImpressions = resultsToRender.slice.apply(resultsToRender, resultLoopCount);
|
|
101
101
|
if (resultLoopOverCount) {
|
|
102
|
-
resultsImpressions = resultsImpressions.concat(
|
|
102
|
+
resultsImpressions = resultsImpressions.concat(resultsToRender.slice.apply(resultsToRender, resultLoopOverCount));
|
|
103
103
|
}
|
|
104
104
|
resultsImpressions.map(function (result) {
|
|
105
105
|
controller.track.product.impression(result);
|
|
@@ -109,7 +109,7 @@ exports.Recommendation = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
109
109
|
controller.track.impression();
|
|
110
110
|
sendProductImpression(initialIndexes[0], initialIndexes[1]);
|
|
111
111
|
}
|
|
112
|
-
(children ||
|
|
112
|
+
(children || resultsToRender.length) && ((_g = controller === null || controller === void 0 ? void 0 : controller.track) === null || _g === void 0 ? void 0 : _g.render());
|
|
113
113
|
var styling = {};
|
|
114
114
|
if (!disableStyles) {
|
|
115
115
|
styling.css = [CSS.recommendation({ vertical: vertical }), style];
|
|
@@ -117,7 +117,7 @@ exports.Recommendation = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
117
117
|
else if (style) {
|
|
118
118
|
styling.css = [style];
|
|
119
119
|
}
|
|
120
|
-
return ((children || (
|
|
120
|
+
return ((children || (resultsToRender === null || resultsToRender === void 0 ? void 0 : resultsToRender.length)) && ((0, react_1.jsx)(providers_1.CacheProvider, null,
|
|
121
121
|
(0, react_1.jsx)("div", __assign({ ref: rootComponentRef }, styling, { className: (0, classnames_1.default)('ss__recommendation', className) }),
|
|
122
122
|
title && (0, react_1.jsx)("h3", { className: "ss__recommendation__title" }, title),
|
|
123
123
|
(0, react_1.jsx)(Carousel_1.Carousel, __assign({ onInit: function (swiper) {
|
|
@@ -133,9 +133,9 @@ exports.Recommendation = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
133
133
|
var clickedIndex = swiper.realIndex + (swiper.clickedIndex - swiper.activeIndex);
|
|
134
134
|
controller.track.click(e);
|
|
135
135
|
if (!Number.isNaN(clickedIndex)) {
|
|
136
|
-
controller.track.product.click(e,
|
|
136
|
+
controller.track.product.click(e, resultsToRender[clickedIndex]);
|
|
137
137
|
}
|
|
138
138
|
}, loop: loop, pagination: pagination, breakpoints: breakpoints }, subProps.carousel, additionalProps, displaySettings), children
|
|
139
139
|
? children.map(function (child) { return child; })
|
|
140
|
-
:
|
|
140
|
+
: resultsToRender.map(function (result) { return (0, react_1.jsx)(Result_1.Result, __assign({ controller: controller, result: result }, subProps.result)); }))))));
|
|
141
141
|
});
|
|
@@ -106,6 +106,20 @@ declare const _default: {
|
|
|
106
106
|
type: string;
|
|
107
107
|
};
|
|
108
108
|
};
|
|
109
|
+
results: {
|
|
110
|
+
description: string;
|
|
111
|
+
type: {
|
|
112
|
+
required: boolean;
|
|
113
|
+
};
|
|
114
|
+
table: {
|
|
115
|
+
type: {
|
|
116
|
+
summary: string;
|
|
117
|
+
};
|
|
118
|
+
};
|
|
119
|
+
control: {
|
|
120
|
+
type: string;
|
|
121
|
+
};
|
|
122
|
+
};
|
|
109
123
|
pagination: {
|
|
110
124
|
defaultValue: boolean;
|
|
111
125
|
description: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Recommendation.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC
|
|
1
|
+
{"version":3,"file":"Recommendation.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAU3B,wBAmIE;AAGF,eAAO,MAAM,OAAO;;;;;;;;;CAEnB,CAAC"}
|
|
@@ -102,6 +102,15 @@ exports.default = {
|
|
|
102
102
|
defaultValue: { summary: true },
|
|
103
103
|
},
|
|
104
104
|
control: { type: 'boolean' },
|
|
105
|
+
}, results: {
|
|
106
|
+
description: 'Results store reference, overrides controller.store.results',
|
|
107
|
+
type: { required: false },
|
|
108
|
+
table: {
|
|
109
|
+
type: {
|
|
110
|
+
summary: 'Results store object',
|
|
111
|
+
},
|
|
112
|
+
},
|
|
113
|
+
control: { type: 'none' },
|
|
105
114
|
}, pagination: {
|
|
106
115
|
defaultValue: false,
|
|
107
116
|
description: 'Display pagination dots',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAIxH,OAAO,EAAE,cAAc,EAAU,MAAM,IAAI,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAc,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAIxH,OAAO,EAAE,cAAc,EAAU,MAAM,IAAI,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAc,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAuC7I,eAAO,MAAM,OAAO,gBAAyB,WAAW,KAAG,WAAW;;CAmGpE,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,CAAC,EAAE,UAAU,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
|
|
@@ -58,23 +58,23 @@ var CSS = {
|
|
|
58
58
|
});
|
|
59
59
|
},
|
|
60
60
|
};
|
|
61
|
-
var defaultBreakpointsProps = {
|
|
62
|
-
0: {
|
|
63
|
-
columns: 1,
|
|
64
|
-
},
|
|
65
|
-
540: {
|
|
66
|
-
columns: 2,
|
|
67
|
-
},
|
|
68
|
-
768: {
|
|
69
|
-
columns: 3,
|
|
70
|
-
},
|
|
71
|
-
991: {
|
|
72
|
-
columns: 4,
|
|
73
|
-
},
|
|
74
|
-
};
|
|
75
61
|
exports.Results = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
76
62
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
77
63
|
var globalTheme = (0, providers_1.useTheme)();
|
|
64
|
+
var defaultBreakpointsProps = {
|
|
65
|
+
0: {
|
|
66
|
+
columns: properties.columns || 1,
|
|
67
|
+
},
|
|
68
|
+
540: {
|
|
69
|
+
columns: properties.columns || 2,
|
|
70
|
+
},
|
|
71
|
+
768: {
|
|
72
|
+
columns: properties.columns || 3,
|
|
73
|
+
},
|
|
74
|
+
991: {
|
|
75
|
+
columns: properties.columns || 4,
|
|
76
|
+
},
|
|
77
|
+
};
|
|
78
78
|
var props = __assign(__assign(__assign({
|
|
79
79
|
// default props
|
|
80
80
|
results: (_b = (_a = properties.controller) === null || _a === void 0 ? void 0 : _a.store) === null || _b === void 0 ? void 0 : _b.results, columns: 4, gapSize: '20px', layout: types_1.Layout.GRID, breakpoints: defaultBreakpointsProps }, (_c = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _c === void 0 ? void 0 : _c.results), properties), (_e = (_d = properties.theme) === null || _d === void 0 ? void 0 : _d.components) === null || _e === void 0 ? void 0 : _e.results);
|
|
@@ -114,7 +114,7 @@ exports.Results = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
114
114
|
styling.css = [style];
|
|
115
115
|
}
|
|
116
116
|
return (results === null || results === void 0 ? void 0 : results.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
|
|
117
|
-
(0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__results', className) }), results.map(function (result) {
|
|
117
|
+
(0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__results', "ss__results-".concat(props.layout), className) }), results.map(function (result) {
|
|
118
118
|
return (function () {
|
|
119
119
|
switch (result.type) {
|
|
120
120
|
case types_1.BannerType.BANNER:
|
|
@@ -133,7 +133,20 @@ declare const _default: {
|
|
|
133
133
|
};
|
|
134
134
|
};
|
|
135
135
|
breakpoints: {
|
|
136
|
-
defaultValue: {
|
|
136
|
+
defaultValue: {
|
|
137
|
+
0: {
|
|
138
|
+
columns: number;
|
|
139
|
+
};
|
|
140
|
+
540: {
|
|
141
|
+
columns: number;
|
|
142
|
+
};
|
|
143
|
+
768: {
|
|
144
|
+
columns: number;
|
|
145
|
+
};
|
|
146
|
+
991: {
|
|
147
|
+
columns: number;
|
|
148
|
+
};
|
|
149
|
+
};
|
|
137
150
|
description: string;
|
|
138
151
|
table: {
|
|
139
152
|
type: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Results.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAW,WAAW,EAAE,MAAM,WAAW,CAAC;AAGjD,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC
|
|
1
|
+
{"version":3,"file":"Results.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAW,WAAW,EAAE,MAAM,WAAW,CAAC;AAGjD,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIxC,wBAkHE;AAQF,eAAO,MAAM,IAAI,KAAwB,CAAC;AAc1C,eAAO,MAAM,IAAI,KAAwB,CAAC"}
|
|
@@ -123,7 +123,20 @@ exports.default = {
|
|
|
123
123
|
},
|
|
124
124
|
control: { type: 'text' },
|
|
125
125
|
}, breakpoints: {
|
|
126
|
-
defaultValue: {
|
|
126
|
+
defaultValue: {
|
|
127
|
+
0: {
|
|
128
|
+
columns: 1,
|
|
129
|
+
},
|
|
130
|
+
540: {
|
|
131
|
+
columns: 2,
|
|
132
|
+
},
|
|
133
|
+
768: {
|
|
134
|
+
columns: 3,
|
|
135
|
+
},
|
|
136
|
+
991: {
|
|
137
|
+
columns: 4,
|
|
138
|
+
},
|
|
139
|
+
},
|
|
127
140
|
description: 'Breakpoints options object',
|
|
128
141
|
table: {
|
|
129
142
|
type: {
|
|
@@ -1438,4 +1438,29 @@ export declare const badSearchResponse: {
|
|
|
1438
1438
|
content: {};
|
|
1439
1439
|
};
|
|
1440
1440
|
};
|
|
1441
|
+
export declare const facetOverflowMock: {
|
|
1442
|
+
type: string;
|
|
1443
|
+
field: string;
|
|
1444
|
+
filtered: boolean;
|
|
1445
|
+
custom: {};
|
|
1446
|
+
collapsed: boolean;
|
|
1447
|
+
display: string;
|
|
1448
|
+
label: string;
|
|
1449
|
+
values: {
|
|
1450
|
+
filtered: boolean;
|
|
1451
|
+
value: string;
|
|
1452
|
+
label: string;
|
|
1453
|
+
count: number;
|
|
1454
|
+
}[];
|
|
1455
|
+
multiple: string;
|
|
1456
|
+
overflow: {
|
|
1457
|
+
enabled: boolean;
|
|
1458
|
+
limited: boolean;
|
|
1459
|
+
limit: number;
|
|
1460
|
+
remaining: number;
|
|
1461
|
+
setLimit: () => void;
|
|
1462
|
+
toggle: () => void;
|
|
1463
|
+
calculate: () => void;
|
|
1464
|
+
};
|
|
1465
|
+
};
|
|
1441
1466
|
//# sourceMappingURL=searchResponse.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"searchResponse.d.ts","sourceRoot":"","sources":["../../../src/mocks/searchResponse.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;CAyEzB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;CAkCzB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;CA4E5B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;CA2M9B,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;CAgJtC,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;CAiB3B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6zE1B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyI7B,CAAC"}
|
|
1
|
+
{"version":3,"file":"searchResponse.d.ts","sourceRoot":"","sources":["../../../src/mocks/searchResponse.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;CAyEzB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;CAkCzB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;CA4E5B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;CA2M9B,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;CAgJtC,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;CAiB3B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6zE1B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyI7B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;CAwG7B,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.badSearchResponse = exports.searchResponse = exports.sliderFacetMock = exports.hierarchyFacetFilteredMock = exports.hierarchyFacetMock = exports.paletteFacetMock = exports.listFacetMock = exports.gridFacetMock = void 0;
|
|
3
|
+
exports.facetOverflowMock = exports.badSearchResponse = exports.searchResponse = exports.sliderFacetMock = exports.hierarchyFacetFilteredMock = exports.hierarchyFacetMock = exports.paletteFacetMock = exports.listFacetMock = exports.gridFacetMock = void 0;
|
|
4
4
|
exports.gridFacetMock = {
|
|
5
5
|
field: 'size',
|
|
6
6
|
label: 'Size',
|
|
@@ -2981,3 +2981,108 @@ exports.badSearchResponse = {
|
|
|
2981
2981
|
content: {},
|
|
2982
2982
|
},
|
|
2983
2983
|
};
|
|
2984
|
+
exports.facetOverflowMock = {
|
|
2985
|
+
type: 'value',
|
|
2986
|
+
field: 'color_family',
|
|
2987
|
+
filtered: false,
|
|
2988
|
+
custom: {},
|
|
2989
|
+
collapsed: false,
|
|
2990
|
+
display: 'palette',
|
|
2991
|
+
label: 'Color',
|
|
2992
|
+
values: [
|
|
2993
|
+
{
|
|
2994
|
+
filtered: false,
|
|
2995
|
+
value: 'Blue',
|
|
2996
|
+
label: 'Blue',
|
|
2997
|
+
count: 755,
|
|
2998
|
+
},
|
|
2999
|
+
{
|
|
3000
|
+
filtered: false,
|
|
3001
|
+
value: 'White',
|
|
3002
|
+
label: 'White',
|
|
3003
|
+
count: 673,
|
|
3004
|
+
},
|
|
3005
|
+
{
|
|
3006
|
+
filtered: false,
|
|
3007
|
+
value: 'Pink',
|
|
3008
|
+
label: 'Pink',
|
|
3009
|
+
count: 530,
|
|
3010
|
+
},
|
|
3011
|
+
{
|
|
3012
|
+
filtered: false,
|
|
3013
|
+
value: 'Beige',
|
|
3014
|
+
label: 'Beige',
|
|
3015
|
+
count: 316,
|
|
3016
|
+
},
|
|
3017
|
+
{
|
|
3018
|
+
filtered: false,
|
|
3019
|
+
value: 'Black',
|
|
3020
|
+
label: 'Black',
|
|
3021
|
+
count: 366,
|
|
3022
|
+
},
|
|
3023
|
+
{
|
|
3024
|
+
filtered: false,
|
|
3025
|
+
value: 'Gray',
|
|
3026
|
+
label: 'Gray',
|
|
3027
|
+
count: 303,
|
|
3028
|
+
},
|
|
3029
|
+
{
|
|
3030
|
+
filtered: false,
|
|
3031
|
+
value: 'Brown',
|
|
3032
|
+
label: 'Brown',
|
|
3033
|
+
count: 174,
|
|
3034
|
+
},
|
|
3035
|
+
{
|
|
3036
|
+
filtered: false,
|
|
3037
|
+
value: 'Red',
|
|
3038
|
+
label: 'Red',
|
|
3039
|
+
count: 261,
|
|
3040
|
+
},
|
|
3041
|
+
{
|
|
3042
|
+
filtered: false,
|
|
3043
|
+
value: 'Green',
|
|
3044
|
+
label: 'Green',
|
|
3045
|
+
count: 237,
|
|
3046
|
+
},
|
|
3047
|
+
{
|
|
3048
|
+
filtered: false,
|
|
3049
|
+
value: 'Yellow',
|
|
3050
|
+
label: 'Yellow',
|
|
3051
|
+
count: 202,
|
|
3052
|
+
},
|
|
3053
|
+
{
|
|
3054
|
+
filtered: false,
|
|
3055
|
+
value: 'Orange',
|
|
3056
|
+
label: 'Orange',
|
|
3057
|
+
count: 97,
|
|
3058
|
+
},
|
|
3059
|
+
{
|
|
3060
|
+
filtered: false,
|
|
3061
|
+
value: 'Purple',
|
|
3062
|
+
label: 'Purple',
|
|
3063
|
+
count: 79,
|
|
3064
|
+
},
|
|
3065
|
+
{
|
|
3066
|
+
filtered: false,
|
|
3067
|
+
value: 'Black, Grey',
|
|
3068
|
+
label: 'Black, Grey',
|
|
3069
|
+
count: 2,
|
|
3070
|
+
},
|
|
3071
|
+
{
|
|
3072
|
+
filtered: false,
|
|
3073
|
+
value: 'Black, Orange',
|
|
3074
|
+
label: 'Black, Orange',
|
|
3075
|
+
count: 2,
|
|
3076
|
+
},
|
|
3077
|
+
],
|
|
3078
|
+
multiple: 'or',
|
|
3079
|
+
overflow: {
|
|
3080
|
+
enabled: true,
|
|
3081
|
+
limited: true,
|
|
3082
|
+
limit: 12,
|
|
3083
|
+
remaining: 2,
|
|
3084
|
+
setLimit: function () { },
|
|
3085
|
+
toggle: function () { },
|
|
3086
|
+
calculate: function () { },
|
|
3087
|
+
},
|
|
3088
|
+
};
|
|
@@ -3,7 +3,7 @@ import { h } from 'preact';
|
|
|
3
3
|
import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
|
|
4
4
|
import { componentArgs } from '../../../utilities';
|
|
5
5
|
import { Skeleton } from './Skeleton';
|
|
6
|
-
import Readme from '../
|
|
6
|
+
import Readme from '../Skeleton/readme.md';
|
|
7
7
|
export default {
|
|
8
8
|
title: `Atoms/Skeleton`,
|
|
9
9
|
component: Skeleton,
|
|
@@ -150,6 +150,20 @@ declare const _default: {
|
|
|
150
150
|
type: string;
|
|
151
151
|
};
|
|
152
152
|
};
|
|
153
|
+
startChecked: {
|
|
154
|
+
description: string;
|
|
155
|
+
table: {
|
|
156
|
+
type: {
|
|
157
|
+
summary: string;
|
|
158
|
+
};
|
|
159
|
+
defaultValue: {
|
|
160
|
+
summary: boolean;
|
|
161
|
+
};
|
|
162
|
+
};
|
|
163
|
+
control: {
|
|
164
|
+
type: string;
|
|
165
|
+
};
|
|
166
|
+
};
|
|
153
167
|
native: {
|
|
154
168
|
description: string;
|
|
155
169
|
table: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC
|
|
1
|
+
{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKrD,wBA8GE;AAIF,eAAO,MAAM,OAAO,KAAoB,CAAC;AAEzC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAM1C,eAAO,MAAM,MAAM,KAAoB,CAAC"}
|
|
@@ -80,6 +80,16 @@ export default {
|
|
|
80
80
|
},
|
|
81
81
|
control: { type: 'color' },
|
|
82
82
|
},
|
|
83
|
+
startChecked: {
|
|
84
|
+
description: 'Checkbox is checked initially(managed state)',
|
|
85
|
+
table: {
|
|
86
|
+
type: {
|
|
87
|
+
summary: 'boolean',
|
|
88
|
+
},
|
|
89
|
+
defaultValue: { summary: false },
|
|
90
|
+
},
|
|
91
|
+
control: { type: 'boolean' },
|
|
92
|
+
},
|
|
83
93
|
native: {
|
|
84
94
|
description: 'Render as unstyled native checkbox',
|
|
85
95
|
table: {
|
|
@@ -69,10 +69,10 @@ export const ErrorHandler = observer((properties) => {
|
|
|
69
69
|
const theme = { ...globalTheme, ...properties.theme };
|
|
70
70
|
const props = {
|
|
71
71
|
// global theme
|
|
72
|
-
...globalTheme?.components?.
|
|
72
|
+
...globalTheme?.components?.errorHandler,
|
|
73
73
|
//props
|
|
74
74
|
...properties,
|
|
75
|
-
...properties.theme?.components?.
|
|
75
|
+
...properties.theme?.components?.errorHandler,
|
|
76
76
|
};
|
|
77
77
|
const { controller, error, disableStyles, style, onRetryClick, className } = props;
|
|
78
78
|
const subProps = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FacetSlider.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetSlider/FacetSlider.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC
|
|
1
|
+
{"version":3,"file":"FacetSlider.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/FacetSlider/FacetSlider.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK9D,wBAwIE;AAIF,eAAO,MAAM,KAAK,KAAoB,CAAC"}
|
|
@@ -11,6 +11,5 @@ export interface SlideoutProps extends ComponentProps {
|
|
|
11
11
|
overlayColor?: string;
|
|
12
12
|
slideDirection?: SlideDirectionType;
|
|
13
13
|
}
|
|
14
|
-
declare type SlideDirectionType = 'top' | 'right' | 'bottom' | 'left';
|
|
15
|
-
export {};
|
|
14
|
+
export declare type SlideDirectionType = 'top' | 'right' | 'bottom' | 'left';
|
|
16
15
|
//# sourceMappingURL=Slideout.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAyBhD,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAuE/D;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACpC;AAED,oBAAY,kBAAkB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC"}
|
|
@@ -6,9 +6,7 @@ import { useTheme, CacheProvider } from '../../../providers';
|
|
|
6
6
|
import { useMediaQuery } from '../../../hooks';
|
|
7
7
|
import { Overlay } from '../../Atoms/Overlay';
|
|
8
8
|
const CSS = {
|
|
9
|
-
slideout: ({ isActive, width, transitionSpeed, slideDirection }) =>
|
|
10
|
-
//@ts-ignore
|
|
11
|
-
css({
|
|
9
|
+
slideout: ({ isActive, width, transitionSpeed, slideDirection }) => css({
|
|
12
10
|
display: 'block',
|
|
13
11
|
position: 'fixed',
|
|
14
12
|
transition: `${slideDirection ? slideDirection : 'left'} ${transitionSpeed}`,
|
|
@@ -155,13 +155,13 @@ export const Autocomplete = observer((properties) => {
|
|
|
155
155
|
0: {
|
|
156
156
|
columns: 2,
|
|
157
157
|
rows: 1,
|
|
158
|
-
hideFacets: true,
|
|
159
|
-
vertical: true,
|
|
158
|
+
hideFacets: props.hideFacets || true,
|
|
159
|
+
vertical: props.vertical || true,
|
|
160
160
|
},
|
|
161
161
|
540: {
|
|
162
162
|
columns: 3,
|
|
163
163
|
rows: 1,
|
|
164
|
-
vertical: true,
|
|
164
|
+
vertical: props.vertical || true,
|
|
165
165
|
},
|
|
166
166
|
768: {
|
|
167
167
|
columns: 2,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { RecommendationController } from '@searchspring/snap-controller';
|
|
3
|
-
import { ComponentProps, BreakpointsProps } from '../../../types';
|
|
3
|
+
import { ComponentProps, BreakpointsProps, Result as ResultType, InlineBannerContent } from '../../../types';
|
|
4
4
|
export declare const Recommendation: ((properties: RecommendationProps) => JSX.Element) & {
|
|
5
5
|
displayName: string;
|
|
6
6
|
};
|
|
@@ -11,6 +11,7 @@ export interface RecommendationProps extends ComponentProps {
|
|
|
11
11
|
nextButton?: JSX.Element | string;
|
|
12
12
|
hideButtons?: boolean;
|
|
13
13
|
loop?: boolean;
|
|
14
|
+
results?: ResultType[] | InlineBannerContent[];
|
|
14
15
|
pagination?: boolean;
|
|
15
16
|
controller: RecommendationController;
|
|
16
17
|
children?: JSX.Element[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAM9E,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAM9E,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,IAAI,UAAU,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAc7G,eAAO,MAAM,cAAc,gBAAyB,mBAAmB,KAAG,WAAW;;CAuKnF,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,UAAU,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,wBAAwB,CAAC;IACrC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}
|
|
@@ -39,15 +39,15 @@ export const Recommendation = observer((properties) => {
|
|
|
39
39
|
theme,
|
|
40
40
|
};
|
|
41
41
|
}
|
|
42
|
-
const { title, controller, children, breakpoints, loop, pagination, nextButton, prevButton, hideButtons, disableStyles, style, className, vertical, ...additionalProps } = props;
|
|
42
|
+
const { title, controller, children, breakpoints, loop, results, pagination, nextButton, prevButton, hideButtons, disableStyles, style, className, vertical, ...additionalProps } = props;
|
|
43
43
|
if (!controller || controller.type !== 'recommendation') {
|
|
44
44
|
throw new Error(`<Recommendation> Component requires 'controller' prop with an instance of RecommendationController`);
|
|
45
45
|
}
|
|
46
|
-
|
|
47
|
-
|
|
46
|
+
const resultsToRender = results || controller.store?.results;
|
|
47
|
+
if (children && children.length !== resultsToRender.length) {
|
|
48
|
+
controller.log.error(`<Recommendation> Component received invalid number of children. Must match length of 'results' prop or 'controller.store.results'`);
|
|
48
49
|
return;
|
|
49
50
|
}
|
|
50
|
-
const results = controller.store?.results;
|
|
51
51
|
const subProps = {
|
|
52
52
|
carousel: {
|
|
53
53
|
// default props
|
|
@@ -83,13 +83,13 @@ export const Recommendation = observer((properties) => {
|
|
|
83
83
|
return;
|
|
84
84
|
let resultLoopCount = [index, index + count];
|
|
85
85
|
let resultLoopOverCount;
|
|
86
|
-
if (index + count >
|
|
86
|
+
if (index + count > resultsToRender.length - 1) {
|
|
87
87
|
resultLoopCount = [index];
|
|
88
|
-
resultLoopOverCount = [0, index + count -
|
|
88
|
+
resultLoopOverCount = [0, index + count - resultsToRender.length];
|
|
89
89
|
}
|
|
90
|
-
let resultsImpressions =
|
|
90
|
+
let resultsImpressions = resultsToRender.slice(...resultLoopCount);
|
|
91
91
|
if (resultLoopOverCount) {
|
|
92
|
-
resultsImpressions = resultsImpressions.concat(
|
|
92
|
+
resultsImpressions = resultsImpressions.concat(resultsToRender.slice(...resultLoopOverCount));
|
|
93
93
|
}
|
|
94
94
|
resultsImpressions.map((result) => {
|
|
95
95
|
controller.track.product.impression(result);
|
|
@@ -99,7 +99,7 @@ export const Recommendation = observer((properties) => {
|
|
|
99
99
|
controller.track.impression();
|
|
100
100
|
sendProductImpression(initialIndexes[0], initialIndexes[1]);
|
|
101
101
|
}
|
|
102
|
-
(children ||
|
|
102
|
+
(children || resultsToRender.length) && controller?.track?.render();
|
|
103
103
|
const styling = {};
|
|
104
104
|
if (!disableStyles) {
|
|
105
105
|
styling.css = [CSS.recommendation({ vertical }), style];
|
|
@@ -107,7 +107,7 @@ export const Recommendation = observer((properties) => {
|
|
|
107
107
|
else if (style) {
|
|
108
108
|
styling.css = [style];
|
|
109
109
|
}
|
|
110
|
-
return ((children ||
|
|
110
|
+
return ((children || resultsToRender?.length) && (jsx(CacheProvider, null,
|
|
111
111
|
jsx("div", { ref: rootComponentRef, ...styling, className: classnames('ss__recommendation', className) },
|
|
112
112
|
title && jsx("h3", { className: "ss__recommendation__title" }, title),
|
|
113
113
|
jsx(Carousel, { onInit: (swiper) => {
|
|
@@ -123,9 +123,9 @@ export const Recommendation = observer((properties) => {
|
|
|
123
123
|
const clickedIndex = swiper.realIndex + (swiper.clickedIndex - swiper.activeIndex);
|
|
124
124
|
controller.track.click(e);
|
|
125
125
|
if (!Number.isNaN(clickedIndex)) {
|
|
126
|
-
controller.track.product.click(e,
|
|
126
|
+
controller.track.product.click(e, resultsToRender[clickedIndex]);
|
|
127
127
|
}
|
|
128
128
|
}, loop: loop, pagination: pagination, breakpoints: breakpoints, ...subProps.carousel, ...additionalProps, ...displaySettings }, children
|
|
129
129
|
? children.map((child) => child)
|
|
130
|
-
:
|
|
130
|
+
: resultsToRender.map((result) => jsx(Result, { controller: controller, result: result, ...subProps.result })))))));
|
|
131
131
|
});
|
|
@@ -106,6 +106,20 @@ declare const _default: {
|
|
|
106
106
|
type: string;
|
|
107
107
|
};
|
|
108
108
|
};
|
|
109
|
+
results: {
|
|
110
|
+
description: string;
|
|
111
|
+
type: {
|
|
112
|
+
required: boolean;
|
|
113
|
+
};
|
|
114
|
+
table: {
|
|
115
|
+
type: {
|
|
116
|
+
summary: string;
|
|
117
|
+
};
|
|
118
|
+
};
|
|
119
|
+
control: {
|
|
120
|
+
type: string;
|
|
121
|
+
};
|
|
122
|
+
};
|
|
109
123
|
pagination: {
|
|
110
124
|
defaultValue: boolean;
|
|
111
125
|
description: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Recommendation.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC
|
|
1
|
+
{"version":3,"file":"Recommendation.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Recommendation/Recommendation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAU3B,wBAmIE;AAGF,eAAO,MAAM,OAAO;;;;;;;;;CAEnB,CAAC"}
|
|
@@ -53,6 +53,16 @@ export default {
|
|
|
53
53
|
},
|
|
54
54
|
control: { type: 'boolean' },
|
|
55
55
|
},
|
|
56
|
+
results: {
|
|
57
|
+
description: 'Results store reference, overrides controller.store.results',
|
|
58
|
+
type: { required: false },
|
|
59
|
+
table: {
|
|
60
|
+
type: {
|
|
61
|
+
summary: 'Results store object',
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
control: { type: 'none' },
|
|
65
|
+
},
|
|
56
66
|
pagination: {
|
|
57
67
|
defaultValue: false,
|
|
58
68
|
description: 'Display pagination dots',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAIxH,OAAO,EAAE,cAAc,EAAU,MAAM,IAAI,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAc,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAIxH,OAAO,EAAE,cAAc,EAAU,MAAM,IAAI,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAc,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAuC7I,eAAO,MAAM,OAAO,gBAAyB,WAAW,KAAG,WAAW;;CAmGpE,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,OAAO,CAAC,EAAE,UAAU,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CAClF"}
|
|
@@ -36,22 +36,22 @@ const CSS = {
|
|
|
36
36
|
},
|
|
37
37
|
}),
|
|
38
38
|
};
|
|
39
|
-
const defaultBreakpointsProps = {
|
|
40
|
-
0: {
|
|
41
|
-
columns: 1,
|
|
42
|
-
},
|
|
43
|
-
540: {
|
|
44
|
-
columns: 2,
|
|
45
|
-
},
|
|
46
|
-
768: {
|
|
47
|
-
columns: 3,
|
|
48
|
-
},
|
|
49
|
-
991: {
|
|
50
|
-
columns: 4,
|
|
51
|
-
},
|
|
52
|
-
};
|
|
53
39
|
export const Results = observer((properties) => {
|
|
54
40
|
const globalTheme = useTheme();
|
|
41
|
+
const defaultBreakpointsProps = {
|
|
42
|
+
0: {
|
|
43
|
+
columns: properties.columns || 1,
|
|
44
|
+
},
|
|
45
|
+
540: {
|
|
46
|
+
columns: properties.columns || 2,
|
|
47
|
+
},
|
|
48
|
+
768: {
|
|
49
|
+
columns: properties.columns || 3,
|
|
50
|
+
},
|
|
51
|
+
991: {
|
|
52
|
+
columns: properties.columns || 4,
|
|
53
|
+
},
|
|
54
|
+
};
|
|
55
55
|
let props = {
|
|
56
56
|
// default props
|
|
57
57
|
results: properties.controller?.store?.results,
|
|
@@ -114,7 +114,7 @@ export const Results = observer((properties) => {
|
|
|
114
114
|
styling.css = [style];
|
|
115
115
|
}
|
|
116
116
|
return results?.length ? (jsx(CacheProvider, null,
|
|
117
|
-
jsx("div", { ...styling, className: classnames('ss__results', className) }, results.map((result) => (() => {
|
|
117
|
+
jsx("div", { ...styling, className: classnames('ss__results', `ss__results-${props.layout}`, className) }, results.map((result) => (() => {
|
|
118
118
|
switch (result.type) {
|
|
119
119
|
case BannerType.BANNER:
|
|
120
120
|
return jsx(InlineBanner, { key: result.uid, ...subProps.inlineBanner, banner: result, layout: props.layout });
|
|
@@ -133,7 +133,20 @@ declare const _default: {
|
|
|
133
133
|
};
|
|
134
134
|
};
|
|
135
135
|
breakpoints: {
|
|
136
|
-
defaultValue: {
|
|
136
|
+
defaultValue: {
|
|
137
|
+
0: {
|
|
138
|
+
columns: number;
|
|
139
|
+
};
|
|
140
|
+
540: {
|
|
141
|
+
columns: number;
|
|
142
|
+
};
|
|
143
|
+
768: {
|
|
144
|
+
columns: number;
|
|
145
|
+
};
|
|
146
|
+
991: {
|
|
147
|
+
columns: number;
|
|
148
|
+
};
|
|
149
|
+
};
|
|
137
150
|
description: string;
|
|
138
151
|
table: {
|
|
139
152
|
type: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Results.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAW,WAAW,EAAE,MAAM,WAAW,CAAC;AAGjD,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC
|
|
1
|
+
{"version":3,"file":"Results.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAW,WAAW,EAAE,MAAM,WAAW,CAAC;AAGjD,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIxC,wBAkHE;AAQF,eAAO,MAAM,IAAI,KAAwB,CAAC;AAc1C,eAAO,MAAM,IAAI,KAAwB,CAAC"}
|
|
@@ -76,7 +76,20 @@ export default {
|
|
|
76
76
|
control: { type: 'text' },
|
|
77
77
|
},
|
|
78
78
|
breakpoints: {
|
|
79
|
-
defaultValue: {
|
|
79
|
+
defaultValue: {
|
|
80
|
+
0: {
|
|
81
|
+
columns: 1,
|
|
82
|
+
},
|
|
83
|
+
540: {
|
|
84
|
+
columns: 2,
|
|
85
|
+
},
|
|
86
|
+
768: {
|
|
87
|
+
columns: 3,
|
|
88
|
+
},
|
|
89
|
+
991: {
|
|
90
|
+
columns: 4,
|
|
91
|
+
},
|
|
92
|
+
},
|
|
80
93
|
description: 'Breakpoints options object',
|
|
81
94
|
table: {
|
|
82
95
|
type: {
|
|
@@ -1438,4 +1438,29 @@ export declare const badSearchResponse: {
|
|
|
1438
1438
|
content: {};
|
|
1439
1439
|
};
|
|
1440
1440
|
};
|
|
1441
|
+
export declare const facetOverflowMock: {
|
|
1442
|
+
type: string;
|
|
1443
|
+
field: string;
|
|
1444
|
+
filtered: boolean;
|
|
1445
|
+
custom: {};
|
|
1446
|
+
collapsed: boolean;
|
|
1447
|
+
display: string;
|
|
1448
|
+
label: string;
|
|
1449
|
+
values: {
|
|
1450
|
+
filtered: boolean;
|
|
1451
|
+
value: string;
|
|
1452
|
+
label: string;
|
|
1453
|
+
count: number;
|
|
1454
|
+
}[];
|
|
1455
|
+
multiple: string;
|
|
1456
|
+
overflow: {
|
|
1457
|
+
enabled: boolean;
|
|
1458
|
+
limited: boolean;
|
|
1459
|
+
limit: number;
|
|
1460
|
+
remaining: number;
|
|
1461
|
+
setLimit: () => void;
|
|
1462
|
+
toggle: () => void;
|
|
1463
|
+
calculate: () => void;
|
|
1464
|
+
};
|
|
1465
|
+
};
|
|
1441
1466
|
//# sourceMappingURL=searchResponse.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"searchResponse.d.ts","sourceRoot":"","sources":["../../../src/mocks/searchResponse.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;CAyEzB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;CAkCzB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;CA4E5B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;CA2M9B,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;CAgJtC,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;CAiB3B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6zE1B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyI7B,CAAC"}
|
|
1
|
+
{"version":3,"file":"searchResponse.d.ts","sourceRoot":"","sources":["../../../src/mocks/searchResponse.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;CAyEzB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;CAkCzB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;CA4E5B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;CA2M9B,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;CAgJtC,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;CAiB3B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6zE1B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyI7B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;CAwG7B,CAAC"}
|
|
@@ -2978,3 +2978,108 @@ export const badSearchResponse = {
|
|
|
2978
2978
|
content: {},
|
|
2979
2979
|
},
|
|
2980
2980
|
};
|
|
2981
|
+
export const facetOverflowMock = {
|
|
2982
|
+
type: 'value',
|
|
2983
|
+
field: 'color_family',
|
|
2984
|
+
filtered: false,
|
|
2985
|
+
custom: {},
|
|
2986
|
+
collapsed: false,
|
|
2987
|
+
display: 'palette',
|
|
2988
|
+
label: 'Color',
|
|
2989
|
+
values: [
|
|
2990
|
+
{
|
|
2991
|
+
filtered: false,
|
|
2992
|
+
value: 'Blue',
|
|
2993
|
+
label: 'Blue',
|
|
2994
|
+
count: 755,
|
|
2995
|
+
},
|
|
2996
|
+
{
|
|
2997
|
+
filtered: false,
|
|
2998
|
+
value: 'White',
|
|
2999
|
+
label: 'White',
|
|
3000
|
+
count: 673,
|
|
3001
|
+
},
|
|
3002
|
+
{
|
|
3003
|
+
filtered: false,
|
|
3004
|
+
value: 'Pink',
|
|
3005
|
+
label: 'Pink',
|
|
3006
|
+
count: 530,
|
|
3007
|
+
},
|
|
3008
|
+
{
|
|
3009
|
+
filtered: false,
|
|
3010
|
+
value: 'Beige',
|
|
3011
|
+
label: 'Beige',
|
|
3012
|
+
count: 316,
|
|
3013
|
+
},
|
|
3014
|
+
{
|
|
3015
|
+
filtered: false,
|
|
3016
|
+
value: 'Black',
|
|
3017
|
+
label: 'Black',
|
|
3018
|
+
count: 366,
|
|
3019
|
+
},
|
|
3020
|
+
{
|
|
3021
|
+
filtered: false,
|
|
3022
|
+
value: 'Gray',
|
|
3023
|
+
label: 'Gray',
|
|
3024
|
+
count: 303,
|
|
3025
|
+
},
|
|
3026
|
+
{
|
|
3027
|
+
filtered: false,
|
|
3028
|
+
value: 'Brown',
|
|
3029
|
+
label: 'Brown',
|
|
3030
|
+
count: 174,
|
|
3031
|
+
},
|
|
3032
|
+
{
|
|
3033
|
+
filtered: false,
|
|
3034
|
+
value: 'Red',
|
|
3035
|
+
label: 'Red',
|
|
3036
|
+
count: 261,
|
|
3037
|
+
},
|
|
3038
|
+
{
|
|
3039
|
+
filtered: false,
|
|
3040
|
+
value: 'Green',
|
|
3041
|
+
label: 'Green',
|
|
3042
|
+
count: 237,
|
|
3043
|
+
},
|
|
3044
|
+
{
|
|
3045
|
+
filtered: false,
|
|
3046
|
+
value: 'Yellow',
|
|
3047
|
+
label: 'Yellow',
|
|
3048
|
+
count: 202,
|
|
3049
|
+
},
|
|
3050
|
+
{
|
|
3051
|
+
filtered: false,
|
|
3052
|
+
value: 'Orange',
|
|
3053
|
+
label: 'Orange',
|
|
3054
|
+
count: 97,
|
|
3055
|
+
},
|
|
3056
|
+
{
|
|
3057
|
+
filtered: false,
|
|
3058
|
+
value: 'Purple',
|
|
3059
|
+
label: 'Purple',
|
|
3060
|
+
count: 79,
|
|
3061
|
+
},
|
|
3062
|
+
{
|
|
3063
|
+
filtered: false,
|
|
3064
|
+
value: 'Black, Grey',
|
|
3065
|
+
label: 'Black, Grey',
|
|
3066
|
+
count: 2,
|
|
3067
|
+
},
|
|
3068
|
+
{
|
|
3069
|
+
filtered: false,
|
|
3070
|
+
value: 'Black, Orange',
|
|
3071
|
+
label: 'Black, Orange',
|
|
3072
|
+
count: 2,
|
|
3073
|
+
},
|
|
3074
|
+
],
|
|
3075
|
+
multiple: 'or',
|
|
3076
|
+
overflow: {
|
|
3077
|
+
enabled: true,
|
|
3078
|
+
limited: true,
|
|
3079
|
+
limit: 12,
|
|
3080
|
+
remaining: 2,
|
|
3081
|
+
setLimit: () => { },
|
|
3082
|
+
toggle: () => { },
|
|
3083
|
+
calculate: () => { },
|
|
3084
|
+
},
|
|
3085
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@searchspring/snap-preact-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.25.0",
|
|
4
4
|
"description": "Snap Preact Component Library",
|
|
5
5
|
"author": "Searchspring",
|
|
6
6
|
"license": "MIT",
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"@emotion/react": "^11.7.1",
|
|
29
|
-
"@searchspring/snap-preact": "^0.
|
|
30
|
-
"@searchspring/snap-toolbox": "^0.
|
|
29
|
+
"@searchspring/snap-preact": "^0.25.0",
|
|
30
|
+
"@searchspring/snap-toolbox": "^0.25.0",
|
|
31
31
|
"classnames": "^2.3.1",
|
|
32
32
|
"deepmerge": "^4.2.2",
|
|
33
33
|
"mobx-react-lite": "^3.2.3",
|
|
@@ -39,13 +39,13 @@
|
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@mdx-js/loader": "^1.6.22",
|
|
42
|
-
"@searchspring/snap-client": "^0.
|
|
43
|
-
"@searchspring/snap-controller": "^0.
|
|
44
|
-
"@searchspring/snap-event-manager": "^0.
|
|
45
|
-
"@searchspring/snap-logger": "^0.
|
|
46
|
-
"@searchspring/snap-profiler": "^0.
|
|
47
|
-
"@searchspring/snap-store-mobx": "^0.
|
|
48
|
-
"@searchspring/snap-url-manager": "^0.
|
|
42
|
+
"@searchspring/snap-client": "^0.25.0",
|
|
43
|
+
"@searchspring/snap-controller": "^0.25.0",
|
|
44
|
+
"@searchspring/snap-event-manager": "^0.25.0",
|
|
45
|
+
"@searchspring/snap-logger": "^0.25.0",
|
|
46
|
+
"@searchspring/snap-profiler": "^0.25.0",
|
|
47
|
+
"@searchspring/snap-store-mobx": "^0.25.0",
|
|
48
|
+
"@searchspring/snap-url-manager": "^0.25.0",
|
|
49
49
|
"@storybook/addon-actions": "^6.4.9",
|
|
50
50
|
"@storybook/addon-controls": "^6.4.9",
|
|
51
51
|
"@storybook/addon-docs": "^6.4.9",
|
|
@@ -65,5 +65,5 @@
|
|
|
65
65
|
"ts-loader": "^9.2.6"
|
|
66
66
|
},
|
|
67
67
|
"sideEffects": false,
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "b227a42874d7ae49b2cbe99a9879c7d761b24ee5"
|
|
69
69
|
}
|