refactor(preact-components-recommendationbundle): adding back vertica…

…l prop
searchspring · Mar 5, 2024 · b45deba · b45deba
1 parent 25a61b0
commit b45deba
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/...components/src/components/Organisms/RecommendationBundle/RecommendationBundle.stories.tsx b/...components/src/components/Organisms/RecommendationBundle/RecommendationBundle.stories.tsx
@@ -158,6 +158,17 @@ export default {
 			},
 			control: { type: 'text' },
 		},
+		vertical: {
+			description: 'set the recommendation to render vertically',
+			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: {

diff --git a/...-preact-components/src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx b/...-preact-components/src/components/Organisms/RecommendationBundle/RecommendationBundle.tsx
@@ -79,9 +79,6 @@ const CSS = {
 
 			'.ss__recommendation-bundle__wrapper--vertical': {
 				flexDirection: 'column',
-				'.ss__carousel': {
-					height: '600px',
-				},
 			},
 
 			'.ss__recommendation-bundle__wrapper__selector': {

diff --git a/.../snap-preact-components/src/components/Organisms/RecommendationBundle/readme.md b/.../snap-preact-components/src/components/Organisms/RecommendationBundle/readme.md
@@ -186,6 +186,13 @@ The `hideCheckboxes` prop specifies if the bundle checkboxes should be rendered.
 <RecommendationBundle controller={controller} onAddToCart={(items)=>{console.log(items)}} hideCheckboxes={true} />
 ```
 
+### vertical
+The `vertical` prop sets the carousel scroll direction to vertical.
+
+```jsx
+<RecommendationBundle controller={controller} onAddToCart={(items)=>{console.log(items)}} vertical={true} />
+```
+
 ### modules
 The `modules` prop accepts additional [Swiper Modules](https://swiperjs.com/swiper-api#modules) - these may need additional props and or stylesheets to function. We include `Navigation` and `Pagination` modules by default.