@searchspring/snap-preact-components 0.37.0 → 0.38.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.
Files changed (21) hide show
  1. package/dist/cjs/components/Atoms/Image/Image.stories.d.ts.map +1 -1
  2. package/dist/cjs/components/Atoms/Image/Image.stories.js +18 -9
  3. package/dist/cjs/components/Molecules/FacetSlider/FacetSlider.stories.d.ts.map +1 -1
  4. package/dist/cjs/components/Molecules/FacetSlider/FacetSlider.stories.js +21 -2
  5. package/dist/cjs/components/Molecules/Slideout/Slideout.d.ts.map +1 -1
  6. package/dist/cjs/components/Molecules/Slideout/Slideout.js +31 -3
  7. package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.js +1 -1
  8. package/dist/esm/components/Atoms/Image/Image.stories.d.ts.map +1 -1
  9. package/dist/esm/components/Atoms/Image/Image.stories.js +18 -9
  10. package/dist/esm/components/Molecules/FacetSlider/FacetSlider.stories.d.ts.map +1 -1
  11. package/dist/esm/components/Molecules/FacetSlider/FacetSlider.stories.js +20 -1
  12. package/dist/esm/components/Molecules/Slideout/Slideout.d.ts.map +1 -1
  13. package/dist/esm/components/Molecules/Slideout/Slideout.js +31 -3
  14. package/dist/esm/components/Organisms/Autocomplete/Autocomplete.js +1 -1
  15. package/package.json +11 -11
  16. package/dist/cjs/mocks/searchResponse.d.ts +0 -1574
  17. package/dist/cjs/mocks/searchResponse.d.ts.map +0 -1
  18. package/dist/cjs/mocks/searchResponse.js +0 -3099
  19. package/dist/esm/mocks/searchResponse.d.ts +0 -1574
  20. package/dist/esm/mocks/searchResponse.d.ts.map +0 -1
  21. package/dist/esm/mocks/searchResponse.js +0 -3096
package/dist/cjs/components/Atoms/Image/Image.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Image/Image.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,KAAK,EAAsB,UAAU,EAAE,MAAM,SAAS,CAAC;;;;;;;;;yBAmBtD,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBA2HE;AAEF,eAAO,MAAM,OAAO;WAAU,UAAU;;;;;CAAkD,CAAC;AAM3F,eAAO,MAAM,SAAS;WAAU,UAAU;;;;;CAAkD,CAAC;AAM7F,eAAO,MAAM,cAAc;WAAU,UAAU;;;;;;CAAkD,CAAC;AAOlG,eAAO,MAAM,OAAO;WAAU,UAAU;;;;;;CAAkD,CAAC"}
1
+ {"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Image/Image.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,KAAK,EAAsB,UAAU,EAAE,MAAM,SAAS,CAAC;;;;;;;;;yBA+BtD,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBA2HE;AAEF,eAAO,MAAM,OAAO;WAAU,UAAU;;;;;CAAkD,CAAC;AAM3F,eAAO,MAAM,SAAS;WAAU,UAAU;;;;;CAAkD,CAAC;AAM7F,eAAO,MAAM,cAAc;WAAU,UAAU;;;;;;CAAkD,CAAC;AAOlG,eAAO,MAAM,OAAO;WAAU,UAAU;;;;;;CAAkD,CAAC"}
package/dist/cjs/components/Atoms/Image/Image.stories.js CHANGED
@@ -19,7 +19,16 @@ var preact_1 = require("preact");
19
19
  var blocks_1 = require("@storybook/addon-docs/blocks");
20
20
  var Image_1 = require("./Image");
21
21
  var utilities_1 = require("../../../utilities");
22
- var searchResponse_1 = require("../../../mocks/searchResponse");
22
+ var searchResponse = {
23
+ product1: {
24
+ image: 'https://searchspring-demo-content.s3.amazonaws.com/demo/fashion/product_images_thumb_med/12_14_reddress11531_thumb_med.jpg',
25
+ name: 'Elevated Classic White Shirt Dress',
26
+ },
27
+ product2: {
28
+ image: 'https://searchspring-demo-content.s3.amazonaws.com/demo/fashion/product_images_thumb_med/110_lcp_9262_copyright_loganpotterf_2016_thumb_med.jpg',
29
+ name: 'Cambridge Classic White Shirt Dress',
30
+ },
31
+ };
23
32
  var readme_md_1 = __importDefault(require("../Image/readme.md"));
24
33
  exports.default = {
25
34
  title: "Atoms/Image",
@@ -128,26 +137,26 @@ exports.default = {
128
137
  var Default = function (args) { return (0, preact_1.h)(Image_1.Image, __assign({}, args, { style: { width: '100%' } })); };
129
138
  exports.Default = Default;
130
139
  exports.Default.args = {
131
- src: searchResponse_1.searchResponse.results[6].mappings.core.imageUrl,
132
- alt: searchResponse_1.searchResponse.results[6].mappings.core.name,
140
+ src: searchResponse.product1.image,
141
+ alt: searchResponse.product1.name,
133
142
  };
134
143
  var BrokenImg = function (args) { return (0, preact_1.h)(Image_1.Image, __assign({}, args, { style: { width: '100%' } })); };
135
144
  exports.BrokenImg = BrokenImg;
136
145
  exports.BrokenImg.args = {
137
146
  src: 'intentionally_broken_image.jpg',
138
- alt: searchResponse_1.searchResponse.results[6].mappings.core.name,
147
+ alt: searchResponse.product1.name,
139
148
  };
140
149
  var ManualFallBack = function (args) { return (0, preact_1.h)(Image_1.Image, __assign({}, args, { style: { width: '100%' } })); };
141
150
  exports.ManualFallBack = ManualFallBack;
142
151
  exports.ManualFallBack.args = {
143
152
  src: 'intentionally_broken_image.jpg',
144
- alt: searchResponse_1.searchResponse.results[5].mappings.core.name,
145
- fallback: searchResponse_1.searchResponse.results[5].mappings.core.imageUrl,
153
+ alt: searchResponse.product1.name,
154
+ fallback: searchResponse.product1.image,
146
155
  };
147
156
  var onhover = function (args) { return (0, preact_1.h)(Image_1.Image, __assign({}, args, { style: { width: '100%' } })); };
148
157
  exports.onhover = onhover;
149
158
  exports.onhover.args = {
150
- src: searchResponse_1.searchResponse.results[6].mappings.core.imageUrl,
151
- alt: searchResponse_1.searchResponse.results[6].mappings.core.name,
152
- hoverSrc: searchResponse_1.searchResponse.results[7].mappings.core.imageUrl,
159
+ src: searchResponse.product1.image,
160
+ alt: searchResponse.product1.name,
161
+ hoverSrc: searchResponse.product2.image,
153
162
  };
package/dist/cjs/components/Molecules/FacetSlider/FacetSlider.stories.d.ts.map CHANGED
@@ -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;;;;;;;;;;;yBAoBpD,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAwIE;AAEF,eAAO,MAAM,KAAK,SAAU,gBAAgB,kBAAoE,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;;;;;;;;;;;yBAwCpD,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAwIE;AAEF,eAAO,MAAM,KAAK,SAAU,gBAAgB,kBAAoE,CAAC"}
package/dist/cjs/components/Molecules/FacetSlider/FacetSlider.stories.js CHANGED
@@ -19,8 +19,27 @@ var preact_1 = require("preact");
19
19
  var blocks_1 = require("@storybook/addon-docs/blocks");
20
20
  var FacetSlider_1 = require("./FacetSlider");
21
21
  var utilities_1 = require("../../../utilities");
22
- var searchResponse_1 = require("../../../mocks/searchResponse");
23
22
  var readme_md_1 = __importDefault(require("../FacetSlider/readme.md"));
23
+ // unfortunatley we have to hardcode the searchresponse data here rather than use the Snap-Shared
24
+ // mockdata due to issues with storybook being unable to bundle MockData due to it using fs
25
+ var sliderFacetMock = {
26
+ field: 'price',
27
+ label: 'Price',
28
+ type: 'range',
29
+ display: 'slider',
30
+ filtered: false,
31
+ collapsed: false,
32
+ range: {
33
+ low: 0,
34
+ high: 120,
35
+ },
36
+ active: {
37
+ low: 0,
38
+ high: 120,
39
+ },
40
+ step: 1,
41
+ formatValue: '$%01.2f',
42
+ };
24
43
  exports.default = {
25
44
  title: "Molecules/FacetSlider",
26
45
  component: FacetSlider_1.FacetSlider,
@@ -138,5 +157,5 @@ exports.default = {
138
157
  action: 'onChange',
139
158
  } }, utilities_1.componentArgs),
140
159
  };
141
- var Price = function (args) { return (0, preact_1.h)(FacetSlider_1.FacetSlider, __assign({}, args, { facet: searchResponse_1.sliderFacetMock })); };
160
+ var Price = function (args) { return (0, preact_1.h)(FacetSlider_1.FacetSlider, __assign({}, args, { facet: sliderFacetMock })); };
142
161
  exports.Price = Price;
package/dist/cjs/components/Molecules/Slideout/Slideout.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAQxD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAyB5D,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CA0E/D;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,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"}
1
+ {"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAQxD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA2B5D,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAqE/D;AAiCD,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,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"}
package/dist/cjs/components/Molecules/Slideout/Slideout.js CHANGED
@@ -46,13 +46,14 @@ var CSS = {
46
46
  });
47
47
  },
48
48
  };
49
+ var buttonClass = 'ss__slideout__button';
49
50
  function Slideout(properties) {
50
51
  var _a, _b, _c, _d;
51
52
  var globalTheme = (0, providers_1.useTheme)();
52
53
  var props = __assign(__assign(__assign({
53
54
  // default props
54
- active: false, displayAt: '', slideDirection: 'left', width: '300px', buttonContent: 'click me', overlayColor: 'rgba(0,0,0,0.8)', transitionSpeed: '0.25s' }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.slideout), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.slideout);
55
- var children = props.children, active = props.active, buttonContent = props.buttonContent, width = props.width, displayAt = props.displayAt, transitionSpeed = props.transitionSpeed, overlayColor = props.overlayColor, slideDirection = props.slideDirection, disableStyles = props.disableStyles, className = props.className, style = props.style;
55
+ active: false, displayAt: '', slideDirection: 'left', width: '300px', buttonContent: (0, react_1.jsx)("div", { className: buttonClass }, "click me"), overlayColor: 'rgba(0,0,0,0.8)', transitionSpeed: '0.25s' }, (_a = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _a === void 0 ? void 0 : _a.slideout), properties), (_c = (_b = properties.theme) === null || _b === void 0 ? void 0 : _b.components) === null || _c === void 0 ? void 0 : _c.slideout);
56
+ var children = props.children, active = props.active, width = props.width, displayAt = props.displayAt, transitionSpeed = props.transitionSpeed, overlayColor = props.overlayColor, slideDirection = props.slideDirection, buttonContent = props.buttonContent, disableStyles = props.disableStyles, className = props.className, style = props.style;
56
57
  var subProps = {
57
58
  overlay: __assign(__assign(__assign({
58
59
  // default props
@@ -82,8 +83,35 @@ function Slideout(properties) {
82
83
  styling.css = [style];
83
84
  }
84
85
  return isVisible ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
85
- buttonContent && ((0, react_1.jsx)("div", { className: "ss__slideout__button", onClick: function () { return toggleActive(); } }, buttonContent)),
86
+ (0, react_1.jsx)(ButtonContent, { content: buttonContent, toggleActive: toggleActive }),
86
87
  (0, react_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__slideout', className, { 'ss__slideout--active': isActive }) }, styling), (0, utilities_1.cloneWithProps)(children, { toggleActive: toggleActive, active: isActive })),
87
88
  (0, react_1.jsx)(Overlay_1.Overlay, __assign({}, subProps.overlay, { active: isActive, onClick: toggleActive })))) : ((0, react_1.jsx)(preact_1.Fragment, null));
88
89
  }
89
90
  exports.Slideout = Slideout;
91
+ var ButtonContent = function (props) {
92
+ var content = props.content, toggleActive = props.toggleActive;
93
+ if (content && typeof content == 'string') {
94
+ return ((0, react_1.jsx)("div", { className: buttonClass, onClick: function () { return toggleActive(); } }, content));
95
+ }
96
+ else if (content && typeof content == 'object') {
97
+ var clone = (0, utilities_1.cloneWithProps)(content, {
98
+ onClick: function () { return toggleActive(); },
99
+ });
100
+ if (clone.props.class || clone.props.className) {
101
+ // check if class
102
+ if (clone.props.class && clone.props.class.indexOf(buttonClass) < 0) {
103
+ clone.props.class = "".concat(clone.props.class, " ").concat(buttonClass);
104
+ }
105
+ // check if classname
106
+ if (clone.props.className && clone.props.className.indexOf(buttonClass) < 0) {
107
+ clone.props.className = "".concat(clone.props.className, " ").concat(buttonClass);
108
+ }
109
+ }
110
+ else {
111
+ clone.props.className = clone.props.class = buttonClass;
112
+ }
113
+ return clone;
114
+ }
115
+ else
116
+ return (0, react_1.jsx)(preact_1.Fragment, null);
117
+ };
package/dist/cjs/components/Organisms/Autocomplete/Autocomplete.js CHANGED
@@ -271,7 +271,7 @@ exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
271
271
  controller.bind();
272
272
  }, []);
273
273
  }
274
- var visible = Boolean(input === state.focusedInput) && (terms.length > 0 || (trending === null || trending === void 0 ? void 0 : trending.length) > 0 || state.input);
274
+ var visible = Boolean(input === state.focusedInput) && (terms.length > 0 || (trending === null || trending === void 0 ? void 0 : trending.length) > 0 || (state.input && controller.store.loaded));
275
275
  var showTrending = false;
276
276
  if (!results.length && !state.input && (trending === null || trending === void 0 ? void 0 : trending.length)) {
277
277
  showTrending = true;
package/dist/esm/components/Atoms/Image/Image.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Image/Image.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,KAAK,EAAsB,UAAU,EAAE,MAAM,SAAS,CAAC;;;;;;;;;yBAmBtD,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBA2HE;AAEF,eAAO,MAAM,OAAO;WAAU,UAAU;;;;;CAAkD,CAAC;AAM3F,eAAO,MAAM,SAAS;WAAU,UAAU;;;;;CAAkD,CAAC;AAM7F,eAAO,MAAM,cAAc;WAAU,UAAU;;;;;;CAAkD,CAAC;AAOlG,eAAO,MAAM,OAAO;WAAU,UAAU;;;;;;CAAkD,CAAC"}
1
+ {"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Atoms/Image/Image.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAE,KAAK,EAAsB,UAAU,EAAE,MAAM,SAAS,CAAC;;;;;;;;;yBA+BtD,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBA2HE;AAEF,eAAO,MAAM,OAAO;WAAU,UAAU;;;;;CAAkD,CAAC;AAM3F,eAAO,MAAM,SAAS;WAAU,UAAU;;;;;CAAkD,CAAC;AAM7F,eAAO,MAAM,cAAc;WAAU,UAAU;;;;;;CAAkD,CAAC;AAOlG,eAAO,MAAM,OAAO;WAAU,UAAU;;;;;;CAAkD,CAAC"}
package/dist/esm/components/Atoms/Image/Image.stories.js CHANGED
@@ -2,7 +2,16 @@ import { h } from 'preact';
2
2
  import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
3
3
  import { Image, FALLBACK_IMAGE_URL } from './Image';
4
4
  import { componentArgs } from '../../../utilities';
5
- import { searchResponse } from '../../../mocks/searchResponse';
5
+ const searchResponse = {
6
+ product1: {
7
+ image: 'https://searchspring-demo-content.s3.amazonaws.com/demo/fashion/product_images_thumb_med/12_14_reddress11531_thumb_med.jpg',
8
+ name: 'Elevated Classic White Shirt Dress',
9
+ },
10
+ product2: {
11
+ image: 'https://searchspring-demo-content.s3.amazonaws.com/demo/fashion/product_images_thumb_med/110_lcp_9262_copyright_loganpotterf_2016_thumb_med.jpg',
12
+ name: 'Cambridge Classic White Shirt Dress',
13
+ },
14
+ };
6
15
  import Readme from '../Image/readme.md';
7
16
  export default {
8
17
  title: `Atoms/Image`,
@@ -122,23 +131,23 @@ export default {
122
131
  };
123
132
  export const Default = (args) => h(Image, { ...args, style: { width: '100%' } });
124
133
  Default.args = {
125
- src: searchResponse.results[6].mappings.core.imageUrl,
126
- alt: searchResponse.results[6].mappings.core.name,
134
+ src: searchResponse.product1.image,
135
+ alt: searchResponse.product1.name,
127
136
  };
128
137
  export const BrokenImg = (args) => h(Image, { ...args, style: { width: '100%' } });
129
138
  BrokenImg.args = {
130
139
  src: 'intentionally_broken_image.jpg',
131
- alt: searchResponse.results[6].mappings.core.name,
140
+ alt: searchResponse.product1.name,
132
141
  };
133
142
  export const ManualFallBack = (args) => h(Image, { ...args, style: { width: '100%' } });
134
143
  ManualFallBack.args = {
135
144
  src: 'intentionally_broken_image.jpg',
136
- alt: searchResponse.results[5].mappings.core.name,
137
- fallback: searchResponse.results[5].mappings.core.imageUrl,
145
+ alt: searchResponse.product1.name,
146
+ fallback: searchResponse.product1.image,
138
147
  };
139
148
  export const onhover = (args) => h(Image, { ...args, style: { width: '100%' } });
140
149
  onhover.args = {
141
- src: searchResponse.results[6].mappings.core.imageUrl,
142
- alt: searchResponse.results[6].mappings.core.name,
143
- hoverSrc: searchResponse.results[7].mappings.core.imageUrl,
150
+ src: searchResponse.product1.image,
151
+ alt: searchResponse.product1.name,
152
+ hoverSrc: searchResponse.product2.image,
144
153
  };
package/dist/esm/components/Molecules/FacetSlider/FacetSlider.stories.d.ts.map CHANGED
@@ -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;;;;;;;;;;;yBAoBpD,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAwIE;AAEF,eAAO,MAAM,KAAK,SAAU,gBAAgB,kBAAoE,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;;;;;;;;;;;yBAwCpD,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAdb,wBAwIE;AAEF,eAAO,MAAM,KAAK,SAAU,gBAAgB,kBAAoE,CAAC"}
package/dist/esm/components/Molecules/FacetSlider/FacetSlider.stories.js CHANGED
@@ -2,8 +2,27 @@ import { h } from 'preact';
2
2
  import { ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs/blocks';
3
3
  import { FacetSlider } from './FacetSlider';
4
4
  import { componentArgs } from '../../../utilities';
5
- import { sliderFacetMock } from '../../../mocks/searchResponse';
6
5
  import Readme from '../FacetSlider/readme.md';
6
+ // unfortunatley we have to hardcode the searchresponse data here rather than use the Snap-Shared
7
+ // mockdata due to issues with storybook being unable to bundle MockData due to it using fs
8
+ const sliderFacetMock = {
9
+ field: 'price',
10
+ label: 'Price',
11
+ type: 'range',
12
+ display: 'slider',
13
+ filtered: false,
14
+ collapsed: false,
15
+ range: {
16
+ low: 0,
17
+ high: 120,
18
+ },
19
+ active: {
20
+ low: 0,
21
+ high: 120,
22
+ },
23
+ step: 1,
24
+ formatValue: '$%01.2f',
25
+ };
7
26
  export default {
8
27
  title: `Molecules/FacetSlider`,
9
28
  component: FacetSlider,
package/dist/esm/components/Molecules/Slideout/Slideout.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAQxD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AAyB5D,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CA0E/D;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,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"}
1
+ {"version":3,"file":"Slideout.d.ts","sourceRoot":"","sources":["../../../../../src/components/Molecules/Slideout/Slideout.tsx"],"names":[],"mappings":";AAAA,eAAe;AACf,OAAO,EAAe,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAQxD,OAAO,EAAE,cAAc,EAAc,MAAM,gBAAgB,CAAC;AA2B5D,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAqE/D;AAiCD,MAAM,WAAW,aAAc,SAAQ,cAAc;IACpD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,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"}
package/dist/esm/components/Molecules/Slideout/Slideout.js CHANGED
@@ -26,6 +26,7 @@ const CSS = {
26
26
  overflowY: 'auto',
27
27
  }),
28
28
  };
29
+ const buttonClass = 'ss__slideout__button';
29
30
  export function Slideout(properties) {
30
31
  const globalTheme = useTheme();
31
32
  const props = {
@@ -34,7 +35,7 @@ export function Slideout(properties) {
34
35
  displayAt: '',
35
36
  slideDirection: 'left',
36
37
  width: '300px',
37
- buttonContent: 'click me',
38
+ buttonContent: jsx("div", { className: buttonClass }, "click me"),
38
39
  overlayColor: 'rgba(0,0,0,0.8)',
39
40
  transitionSpeed: '0.25s',
40
41
  // global theme
@@ -43,7 +44,7 @@ export function Slideout(properties) {
43
44
  ...properties,
44
45
  ...properties.theme?.components?.slideout,
45
46
  };
46
- const { children, active, buttonContent, width, displayAt, transitionSpeed, overlayColor, slideDirection, disableStyles, className, style } = props;
47
+ const { children, active, width, displayAt, transitionSpeed, overlayColor, slideDirection, buttonContent, disableStyles, className, style } = props;
47
48
  const subProps = {
48
49
  overlay: {
49
50
  // default props
@@ -78,7 +79,34 @@ export function Slideout(properties) {
78
79
  styling.css = [style];
79
80
  }
80
81
  return isVisible ? (jsx(CacheProvider, null,
81
- buttonContent && (jsx("div", { className: "ss__slideout__button", onClick: () => toggleActive() }, buttonContent)),
82
+ jsx(ButtonContent, { content: buttonContent, toggleActive: toggleActive }),
82
83
  jsx("div", { className: classnames('ss__slideout', className, { 'ss__slideout--active': isActive }), ...styling }, cloneWithProps(children, { toggleActive, active: isActive })),
83
84
  jsx(Overlay, { ...subProps.overlay, active: isActive, onClick: toggleActive }))) : (jsx(Fragment, null));
84
85
  }
86
+ const ButtonContent = (props) => {
87
+ const { content, toggleActive } = props;
88
+ if (content && typeof content == 'string') {
89
+ return (jsx("div", { className: buttonClass, onClick: () => toggleActive() }, content));
90
+ }
91
+ else if (content && typeof content == 'object') {
92
+ let clone = cloneWithProps(content, {
93
+ onClick: () => toggleActive(),
94
+ });
95
+ if (clone.props.class || clone.props.className) {
96
+ // check if class
97
+ if (clone.props.class && clone.props.class.indexOf(buttonClass) < 0) {
98
+ clone.props.class = `${clone.props.class} ${buttonClass}`;
99
+ }
100
+ // check if classname
101
+ if (clone.props.className && clone.props.className.indexOf(buttonClass) < 0) {
102
+ clone.props.className = `${clone.props.className} ${buttonClass}`;
103
+ }
104
+ }
105
+ else {
106
+ clone.props.className = clone.props.class = buttonClass;
107
+ }
108
+ return clone;
109
+ }
110
+ else
111
+ return jsx(Fragment, null);
112
+ };
package/dist/esm/components/Organisms/Autocomplete/Autocomplete.js CHANGED
@@ -287,7 +287,7 @@ export const Autocomplete = observer((properties) => {
287
287
  controller.bind();
288
288
  }, []);
289
289
  }
290
- const visible = Boolean(input === state.focusedInput) && (terms.length > 0 || trending?.length > 0 || state.input);
290
+ const visible = Boolean(input === state.focusedInput) && (terms.length > 0 || trending?.length > 0 || (state.input && controller.store.loaded));
291
291
  let showTrending = false;
292
292
  if (!results.length && !state.input && trending?.length) {
293
293
  showTrending = true;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@searchspring/snap-preact-components",
3
- "version": "0.37.0",
3
+ "version": "0.38.0",
4
4
  "description": "Snap Preact Component Library",
5
5
  "author": "Searchspring",
6
6
  "license": "MIT",
@@ -26,7 +26,7 @@
26
26
  },
27
27
  "dependencies": {
28
28
  "@emotion/react": "11.9.0",
29
- "@searchspring/snap-toolbox": "^0.37.0",
29
+ "@searchspring/snap-toolbox": "^0.38.0",
30
30
  "classnames": "^2.3.2",
31
31
  "deepmerge": "4.2.2",
32
32
  "mobx-react-lite": "3.4.0",
@@ -37,14 +37,14 @@
37
37
  "preact": "10.9.0"
38
38
  },
39
39
  "devDependencies": {
40
- "@searchspring/snap-client": "^0.37.0",
41
- "@searchspring/snap-controller": "^0.37.0",
42
- "@searchspring/snap-event-manager": "^0.37.0",
43
- "@searchspring/snap-logger": "^0.37.0",
44
- "@searchspring/snap-profiler": "^0.37.0",
45
- "@searchspring/snap-store-mobx": "^0.37.0",
46
- "@searchspring/snap-tracker": "^0.37.0",
47
- "@searchspring/snap-url-manager": "^0.37.0",
40
+ "@searchspring/snap-client": "^0.38.0",
41
+ "@searchspring/snap-controller": "^0.38.0",
42
+ "@searchspring/snap-event-manager": "^0.38.0",
43
+ "@searchspring/snap-logger": "^0.38.0",
44
+ "@searchspring/snap-profiler": "^0.38.0",
45
+ "@searchspring/snap-store-mobx": "^0.38.0",
46
+ "@searchspring/snap-tracker": "^0.38.0",
47
+ "@searchspring/snap-url-manager": "^0.38.0",
48
48
  "@storybook/addon-actions": "6.4.22",
49
49
  "@storybook/addon-controls": "6.4.22",
50
50
  "@storybook/addon-docs": "6.4.22",
@@ -66,5 +66,5 @@
66
66
  "ts-loader": "9.3.0"
67
67
  },
68
68
  "sideEffects": false,
69
- "gitHead": "d917c5638aa9a0d7eba3e453e70ff36278c96afa"
69
+ "gitHead": "88f7d1f065081f9691f26563666320e198c45ca9"
70
70
  }