refactor(preact-components/bundlevariants): fix prop spreading on bun…

…dle variants issue

packages/snap-preact/components/src/components/Templates/RecommendationBundleEasyAdd/RecommendationBundleEasyAdd.tsx

@@ -60,7 +60,7 @@ export const RecommendationBundleEasyAdd = observer((properties: RecommendationB
 		styling.css = [style];
 	}
 
-	return <RecommendationBundle {...styling} {...props} {...subProps.recommendationBundle} />;
+	return <RecommendationBundle {...styling} {...subProps.recommendationBundle} {...props} />;
 });
 
 export type RecommendationBundleEasyAddProps = Omit<

packages/snap-preact/components/src/components/Templates/RecommendationBundleList/RecommendationBundleList.stories.tsx

@@ -11,6 +11,7 @@ import type { RecommendationController } from '@searchspring/snap-controller';
 import type { Product } from '@searchspring/snap-store-mobx';
 import type { Next } from '@searchspring/snap-event-manager';
 import type { RecommendationControllerConfig } from '@searchspring/snap-controller';
+import { iconPaths } from '../../Atoms/Icon';
 
 export default {
 	title: 'Templates/RecommendationBundleList',
@@ -104,6 +105,55 @@ export default {
 			},
 			control: { type: 'number' },
 		},
+		carousel: {
+			description: 'Carousel settings object',
+			defaultValue: {
+				enabled: true,
+				loop: false,
+			},
+			table: {
+				type: {
+					summary: 'object',
+				},
+				defaultValue: { summary: 'Carousel settings object' },
+			},
+			control: { type: 'object' },
+		},
+		hideSeed: {
+			description: 'Hide/show seed result',
+			defaultValue: false,
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+				defaultValue: { summary: false },
+			},
+			control: { type: 'boolean' },
+		},
+		separatorIconSeedOnly: {
+			description: 'boolean to only have seperator Icon for the seed product',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+				defaultValue: { summary: true },
+			},
+			control: { type: 'boolean' },
+		},
+		separatorIcon: {
+			defaultValue: 'plus',
+			description: 'Icon to render between results',
+			table: {
+				type: {
+					summary: 'string',
+				},
+				defaultValue: { summary: 'plus' },
+			},
+			control: {
+				type: 'select',
+				options: [...Object.keys(iconPaths)],
+			},
+		},
 		preselectedCount: {
 			description: 'Number of results to have selected by default. (seed included)',
 			table: {

packages/snap-preact/components/src/components/Templates/RecommendationBundleList/RecommendationBundleList.tsx

@@ -120,24 +120,14 @@ export const RecommendationBundleList = observer((properties: RecommendationBund
 
 	return (
 		<div className={'ss__recommendation-bundle-list'} {...styling}>
-			<RecommendationBundle {...props} {...subProps.recommendationBundle} />
+			<RecommendationBundle {...subProps.recommendationBundle} {...props} />
 		</div>
 	);
 });
 
 export type RecommendationBundleListProps = Omit<
 	RecommendationBundleProps,
-	| 'carousel'
-	| 'seedText'
-	| 'hideSeed'
-	| 'vertical'
-	| 'separatorIconSeedOnly'
-	| 'separatorIcon'
-	| 'ctaInline'
-	| 'ctaIcon'
-	| 'vertical'
-	| 'carousel'
-	| 'slidesPerView'
+	'seedText' | 'vertical' | 'ctaInline' | 'ctaIcon' | 'vertical' | 'slidesPerView'
 > &
 	ComponentProps;
 

packages/snap-preact/components/src/components/Templates/RecommendationBundleList/readme.md

@@ -49,6 +49,46 @@ The `resultComponent` prop allows for a custom result component to be rendered.
 <RecommendationBundleList controller={controller} onAddToCart={(e, items)=>{console.log(items)}} resultComponent={<ResultSlot />} />
 ```
 
+
+### carousel 
+The `carousel` prop specifies an object of carousel settings. These settings will be merged with the default settings (listed below). All valid Carousel component props (and any non-documented SwiperJS props) can be used here. The below example uses the `prevButton`, `nextButton` and `loop` props from the Carousel:
+
+```jsx
+type BundleCarouselProps = {
+	enabled: boolean;
+	seedInCarousel?: boolean;
+} & CarouselProps
+
+const customCarouselProps = {
+	enabled: true,
+	loop: false,
+	prevButton: 'Previous',
+	nextButton: 'Next'
+}
+<RecommendationBundle controller={controller} onAddToCart={(e, items)=>{console.log(items)}} carousel={ customCarouselProps } />
+```
+
+### enabled
+The `enabled` prop is a sub prop under the `carousel` prop. It specifies weather the bundle should render as a carousel or not.
+
+```jsx
+<RecommendationBundle controller={controller} onAddToCart={(e, items)=>{console.log(items)}} carousel={ enabled:false } />
+```
+
+### hideSeed
+The `hideSeed` prop specifies if the seed result should be rendered or not.  
+
+```jsx
+<RecommendationBundle controller={controller} onAddToCart={(e, items)=>{console.log(items)}} hideSeed={true} />
+```
+
+### seedInCarousel
+The `seedInCarousel` prop is a sub prop under the `carousel` prop. It specifies if the seed product should be included in the carousel or not.  
+
+```jsx
+<RecommendationBundle controller={controller} onAddToCart={(e, items)=>{console.log(items)}} carousel={ seedInCarousel:true } />
+```
+
 ### ctaButtonText
 The `ctaButtonText` prop specifies the inner text to render in the add to cart button.
 
@@ -84,6 +124,20 @@ The `ctaSlot` prop allows for a custom add to cart cta component to be rendered.
 <RecommendationBundleList controller={controller} onAddToCart={(e, items)=>{console.log(items)}} ctaSlot={<CTASlot />} />
 ```
 
+### separatorIcon
+The `separatorIcon` prop specifies the icon to render between products. Takes an object with `Icon` component props or a string.     
+
+```jsx
+<RecommendationBundle controller={controller} onAddToCart={(e, items)=>{console.log(items)}} separatorIcon={'cog'} />
+```
+
+### separatorIconSeedOnly
+The `separatorIconSeedOnly` prop specifies if the seperator Icon should only be rendered after the seed or after every product.     
+
+```jsx
+<RecommendationBundle controller={controller} onAddToCart={(e, items)=>{console.log(items)}} separatorIconSeedOnly={true} />
+```
+
 ### preselectedCount
 The `preselectedCount` prop specifies how many products in the bundle will be preselected. This number will include the seed. Example `preselectedCount={3}` would be `seed` + 2 preselected items. If not provided, this will default to however many products are initially visible. 
 

packages/snap-preact/components/src/components/Templates/RecommendationBundleVertical/RecommendationBundleVertical.tsx

@@ -58,7 +58,7 @@ export const RecommendationBundleVertical = observer((properties: Recommendation
 		styling.css = [style];
 	}
 
-	return <RecommendationBundle {...styling} {...props} {...subProps.recommendationBundle} />;
+	return <RecommendationBundle {...styling} {...subProps.recommendationBundle} {...props} />;
 });
 
 export type RecommendationBundleVerticalProps = Omit<RecommendationBundleProps, 'vertical' | 'ctaInline'> & ComponentProps;