Merge pull request #1092 from searchspring/develop

Release 0.58.0

packages/snap-preact-components/src/components/Molecules/CalloutBadge/CalloutBadge.stories.tsx

@@ -81,6 +81,16 @@ export default {
 			},
 			control: { type: 'boolean' },
 		},
+		limit: {
+			description: 'Number of badges per slot',
+			table: {
+				type: {
+					summary: 'number',
+				},
+				defaultValue: { summary: '1' },
+			},
+			control: { type: 'number' },
+		},
 		tag: {
 			description: 'Callout location tag',
 			table: {
@@ -95,10 +105,10 @@ export default {
 	},
 };
 
-const snapInstance = Snapify.search({ id: 'Result', globals: { siteId: '8uyt2m' } });
+const snapInstance = Snapify.search({ id: 'CalloutBadge', globals: { siteId: '8uyt2m' } });
 
 const ObservableCalloutBadge = observer(({ args, controller }: { args: CalloutBadgeProps; controller: SearchController }) => {
-	return <CalloutBadge {...args} result={controller?.store?.results[1] as Product} />;
+	return <CalloutBadge {...args} result={controller?.store?.results[0] as Product} />;
 });
 
 export const Default = (args: CalloutBadgeProps, { loaded: { controller } }: { loaded: { controller: SearchController } }) => {
@@ -118,14 +128,24 @@ Default.loaders = [
 
 			response.results[0].badges = [
 				{
-					tag: 'free-shipping-overlay',
+					tag: 'free-shipping',
 					value: 'Free Shipping',
 				},
-			];
-			response.results[1].badges = [
 				{
-					tag: 'free-shipping-callout',
-					value: 'Free Shipping',
+					tag: 'last-one',
+					value: 'Last One!',
+				},
+				{
+					tag: 'on-sale',
+					value: 'On Sale',
+				},
+				{
+					tag: 'save-percent',
+					value: 'Save 30%',
+				},
+				{
+					tag: 'inventory-remaining',
+					value: '1 in stock',
 				},
 			];
 
@@ -139,7 +159,12 @@ Default.loaders = [
 								name: 'Left',
 							},
 						],
-						right: [],
+						right: [
+							{
+								tag: 'right',
+								name: 'Right',
+							},
+						],
 						callout: [
 							{
 								tag: 'callout',
@@ -148,30 +173,61 @@ Default.loaders = [
 						],
 					},
 					tags: {
-						'free-shipping-overlay': {
-							location: 'left/left',
+						'free-shipping': {
+							location: 'callout/callout',
 							component: 'BadgeRectangle',
 							priority: 1,
 							enabled: true,
 							parameters: {
-								color: '#FF0000',
+								color: '#3A23AD',
+								colorText: '#FFFFFF',
+							},
+						},
+						'last-one': {
+							location: 'callout/callout',
+							component: 'BadgePill',
+							priority: 1,
+							enabled: true,
+							parameters: {
+								color: '#515151',
 								colorText: '#FFFFFF',
 							},
 						},
-						'free-shipping-callout': {
+						'inventory-remaining': {
 							location: 'callout/callout',
+							component: 'BadgePill',
+							priority: 1,
+							enabled: true,
+							parameters: {
+								color: '#382F5A',
+								colorText: '#FFFFFF',
+							},
+						},
+						'on-sale': {
+							location: 'left/left',
+							component: 'BadgePill',
+							priority: 1,
+							enabled: true,
+							parameters: {
+								color: '#00CEE1',
+								colorText: '#FFFFFF',
+							},
+						},
+						'save-percent': {
+							location: 'left/left',
 							component: 'BadgeRectangle',
 							priority: 1,
 							enabled: true,
 							parameters: {
-								color: '#FF0000',
+								color: '#8F6CF6',
 								colorText: '#FFFFFF',
 							},
 						},
 					},
 				},
 			};
 		});
+
 		await snapInstance.search();
 
 		return {

packages/snap-preact-components/src/components/Molecules/CalloutBadge/CalloutBadge.tsx

@@ -17,6 +17,7 @@ const CSS = {
 			display: 'flex',
 			justifyContent: 'center',
 			alignItems: 'center',
+			gap: '5px',
 		}),
 };
 
@@ -26,13 +27,14 @@ export const CalloutBadge = observer((properties: CalloutBadgeProps): JSX.Elemen
 	const props: CalloutBadgeProps = {
 		// default props
 		tag: 'callout',
+		limit: 1,
 		// global theme
 		...globalTheme?.components?.calloutBadge,
 		// props
 		...properties,
 		...properties.theme?.components?.calloutBadge,
 	};
-	const { result, tag, renderEmpty, disableStyles, className, style } = props;
+	const { result, tag, renderEmpty, limit, disableStyles, className, style } = props;
 
 	const styling: { css?: StylingCSS } = {};
 
@@ -43,7 +45,6 @@ export const CalloutBadge = observer((properties: CalloutBadgeProps): JSX.Elemen
 		styling.css = [style];
 	}
 
-	const limit = 1;
 	const badges = result?.badges?.atLocation(tag).slice(0, limit);
 
 	if (renderEmpty || badges?.length) {
@@ -69,4 +70,5 @@ export interface CalloutBadgeProps extends ComponentProps {
 	tag?: string;
 	renderEmpty?: boolean;
 	componentMap?: ComponentMap;
+	limit?: number;
 }

packages/snap-preact-components/src/components/Molecules/CalloutBadge/readme.md

@@ -9,7 +9,7 @@ Renders callout badges configured in the Searchspring Management Console and ret
 The required `result` prop specifies a reference to a product object from the `results` store array.
 
 ```jsx
-<CalloutBadge tag={'callout'} result={controller.store.results[0]} />
+<CalloutBadge result={result} />
 ```
 
 ### componentMap
@@ -19,8 +19,7 @@ The `componentMap` prop allows for custom badge components. This functionallity
 import { CustomOnSale } from './components/Badges/CustomOnSale';
 ...
 <CalloutBadge 
-    tag={'callout'} 
-    result={controller.store.results[0]} 
+    result={result} 
     componentMap={{
         'customOnSaleBadge': () => CustomOnSale
     }}
@@ -31,8 +30,7 @@ The `componentMap` also supports async functions for dynamic importing of badges
 
 ```jsx
 <CalloutBadge 
-    tag={'callout'} 
-    result={controller.store.results[0]} 
+    result={result} 
     componentMap={{
         'customOnSaleBadge': () => {
             return (await import('./components/Badges/CustomOnSale')).CustomOnSale;
@@ -47,17 +45,26 @@ By default if there are no badges, the wrapper element will not render. If you n
 ```jsx
 <CalloutBadge
     renderEmpty
-    tag={'callout'} 
-    result={controller.store.results[0]} 
+    result={result} 
     componentMap={{
         'customOnSaleBadge': () => CustomOnSale
     }}
 />
 ```
 
+### limit
+The callout badge slot will by default only render a single badge, but the limit can be increased to allow rendering multiple badges in the same location. This allows for "stacking" of the badges in the callout slot. The order of the stack is determined by the SMC badge configuration.
+
+```jsx
+<CalloutBadge
+    limit={3}
+    result={result} 
+/>
+```
+
 ### tag
-The `tag` prop specifies the location name of this callout location. 
+The `tag` prop specifies the location name of this callout location, the default value is `callout`. 
 
 ```jsx
-<CalloutBadge tag={'callout'} result={controller.store.results[0]} />
+<CalloutBadge tag={'callout'} result={result} />
 ```

packages/snap-preact-components/src/components/Molecules/Carousel/Carousel.tsx

@@ -330,6 +330,8 @@ export const Carousel = observer((properties: CarouselProps): JSX.Element => {
 		}
 	};
 
+	delete additionalProps.breakpoints;
+
 	return children?.length ? (
 		<CacheProvider>
 			<div

packages/snap-preact-components/src/components/Molecules/Checkbox/Checkbox.tsx

@@ -13,23 +13,25 @@ import { Icon, IconProps } from '../../Atoms/Icon';
 import { useA11y } from '../../../hooks/useA11y';
 
 const CSS = {
-	checkbox: ({ size, color, theme }: CheckboxProps) =>
-		css({
+	checkbox: ({ size, color, theme }: Partial<CheckboxProps>) => {
+		const pixelSize = isNaN(Number(size)) ? size : `${size}px`;
+		return css({
 			display: 'inline-flex',
 			alignItems: 'center',
 			justifyContent: 'center',
-			height: size,
-			width: size,
+			height: pixelSize,
+			width: pixelSize,
 			border: `1px solid ${color || theme?.colors?.primary || '#333'}`,
 			'&.ss__checkbox--disabled': {
 				opacity: 0.7,
 			},
 			'& .ss__checkbox__empty': {
 				display: 'inline-block',
-				width: `calc(${size} - 30%)`,
-				height: `calc(${size} - 30%)`,
+				width: `calc(${pixelSize} - 30%)`,
+				height: `calc(${pixelSize} - 30%)`,
 			},
-		}),
+		});
+	},
 	native: () => css({}),
 };
 
@@ -140,7 +142,7 @@ export interface CheckboxProps extends ComponentProps {
 	icon?: string;
 	iconColor?: string;
 	onClick?: (e: React.MouseEvent<HTMLInputElement | HTMLSpanElement, MouseEvent>) => void;
-	size?: string;
+	size?: string | number;
 	startChecked?: boolean;
 	native?: boolean;
 	disableA11y?: boolean;