feat: add color schema decorator layout prop

Author: Lucas Araujo

src/design-system/decorators/color-schema/color-schema.css.ts

@@ -14,6 +14,4 @@ export const storyContainer = style([
 export const root = style({
   minHeight: '100%',
   height: '100%',
-  display: 'flex',
-  flexDirection: 'row',
 });

src/design-system/decorators/color-schema/color-schema.decorator.tsx

@@ -4,13 +4,22 @@ import type { DecoratorFunction } from '@storybook/csf/dist/story';
 import type { ReactFramework } from '@storybook/react';
 
 import { ThemeColorScheme, LocalThemeProvider } from '../../../design-tokens';
+import { Flex } from '../../flex';
 
 import * as styles from './color-schema.css';
 
-export const colorSchemaDecorator: DecoratorFunction<
-  ReactFramework
-> = Story => (
-  <div className={styles.root}>
+export const colorSchemaDecorator: DecoratorFunction<ReactFramework> = (
+  Story,
+  {
+    parameters: {
+      decorators: { layout = 'horizontal' },
+    },
+  },
+) => (
+  <Flex
+    className={styles.root}
+    flexDirection={layout === 'horizontal' ? 'row' : 'column'}
+  >
     <LocalThemeProvider
       colorScheme={ThemeColorScheme.Light}
       className={styles.storyContainer}
@@ -23,5 +32,5 @@ export const colorSchemaDecorator: DecoratorFunction<
     >
       <Story />
     </LocalThemeProvider>
-  </div>
+  </Flex>
 );