chore(): reorganize story

contentful · Jan 11, 2024 · ac833f1 · ac833f1
1 parent 19fb16c
commit ac833f1
Showing 1 changed file with 33 additions and 32 deletions.
diff --git a/packages/components/density-container/stories/DensityContainer.stories.tsx b/packages/components/density-container/stories/DensityContainer.stories.tsx
@@ -134,44 +134,45 @@ export const Overview: Story<DensityContainerProps> = ({
         {Densities.map((density) => {
           return (
             <Box key={density.name}>
-              <DensityContainer
-                key={density.name}
-                density={density.density as Density}
-                {...args}
-              >
+              <>
                 <Heading as="h2" marginBottom="spacingXs">
                   {density.name}
                 </Heading>
-
-                {Components.map((Component) => {
-                  return (
-                    <Box
-                      key={Component.name}
-                      marginBottom="spacingL"
-                      style={{ minHeight: '100px' }}
-                    >
-                      <Text>{Component.name}</Text>
-
+                <DensityContainer
+                  key={density.name}
+                  density={density.density as Density}
+                  {...args}
+                >
+                  {Components.map((Component) => {
+                    return (
                       <Box
-                        marginTop="spacingS"
-                        style={{
-                          backgroundColor: tokens.gray200,
-                          padding: tokens.spacingS,
-                          borderRadius: tokens.borderRadiusMedium,
-                        }}
+                        key={Component.name}
+                        marginBottom="spacingL"
+                        style={{ minHeight: '100px' }}
                       >
-                        <Flex gap="spacingS" alignItems="end">
-                          {Component.props.map((props, index) => {
-                            return (
-                              <Component.component key={index} {...props} />
-                            );
-                          })}
-                        </Flex>
+                        <Text>{Component.name}</Text>
+
+                        <Box
+                          marginTop="spacingS"
+                          style={{
+                            backgroundColor: tokens.gray200,
+                            padding: tokens.spacingS,
+                            borderRadius: tokens.borderRadiusMedium,
+                          }}
+                        >
+                          <Flex gap="spacingS" alignItems="end">
+                            {Component.props.map((props, index) => {
+                              return (
+                                <Component.component key={index} {...props} />
+                              );
+                            })}
+                          </Flex>
+                        </Box>
                       </Box>
-                    </Box>
-                  );
-                })}
-              </DensityContainer>
+                    );
+                  })}
+                </DensityContainer>
+              </>
             </Box>
           );
         })}