From c0e12f724279b91881d69502fb322df4778af42b Mon Sep 17 00:00:00 2001
From: Lucas Murta <lucas.murta@take.net>
Date: Mon, 16 Sep 2024 09:38:21 -0300
Subject: [PATCH] fix(carousel): remove grid component to storybook example

---
 src/components/carousel/carousel.stories.jsx | 48 ++++++++++++++------
 1 file changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/components/carousel/carousel.stories.jsx b/src/components/carousel/carousel.stories.jsx
index 35fc8b26..74ec9719 100644
--- a/src/components/carousel/carousel.stories.jsx
+++ b/src/components/carousel/carousel.stories.jsx
@@ -335,6 +335,30 @@ Properties.args = {
   grab: true,
 };
 
+const containerCarousel = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItens: 'center',
+};
+
+const col1 = {
+  display: 'flex',
+  padding: '16px',
+  flex: '0 0 auto',
+  width: '24.99%',
+  boxSizing: 'border-box',
+};
+
+const col2 = {
+  display: 'flex',
+  padding: '16px',
+  flex: '0 0 auto',
+  width: '74.99%',
+  boxSizing: 'border-box',
+  flexDirection: 'column',
+  gap: '8px',
+};
+
 export const Methods = () => {
   const [DATAITEMS, SETDATAITEMS] = useState(DATACAROUSEL);
 
@@ -408,19 +432,17 @@ export const Methods = () => {
         {DATAITEMS.map((item, index) => {
           return (
             <BdsCarouselItem key={index}>
-              <BdsPaper width="100%" bg-color="surface-0" elevation="none">
-                <BdsGrid align-items="center" flex-wrap="wrap">
-                  <BdsGrid xxs="3" padding="2" direction="column">
-                    <BdsIllustration type={item.illustration.type} name={item.illustration.name}></BdsIllustration>
-                  </BdsGrid>
-                  <BdsGrid xxs="9" direction="column" padding="2" gap="1">
-                    <BdsTypo variant="fs-20" bold="bold" margin={false}>
-                      {item.title}
-                    </BdsTypo>
-                    <BdsTypo variant="fs-16">{item.subTitle}</BdsTypo>
-                    <BdsButton>Saiba mais</BdsButton>
-                  </BdsGrid>
-                </BdsGrid>
+              <BdsPaper width="100%" bg-color="surface-0" elevation="none" style={containerCarousel}>
+                <div style={col1}>
+                  <BdsIllustration type={item.illustration.type} name={item.illustration.name}></BdsIllustration>
+                </div>
+                <div style={col2}>
+                  <BdsTypo variant="fs-20" bold="bold" margin={false}>
+                    {item.title}
+                  </BdsTypo>
+                  <BdsTypo variant="fs-16">{item.subTitle}</BdsTypo>
+                  <BdsButton>Saiba mais</BdsButton>
+                </div>
               </BdsPaper>
             </BdsCarouselItem>
           );