[FRAF-544] Flex component

src/components/flex/Flex.tsx

@@ -4,10 +4,11 @@ import theme from './theme.css';
 
 interface FlexProps {
   children: ReactNode;
+  direction?: 'row' | 'column';
 }
 
-const Flex = ({ children, ...otherProps }: FlexProps) => {
-  const classNames = cx(theme['flex']);
+const Flex = ({ children, direction = 'row', ...otherProps }: FlexProps) => {
+  const classNames = cx(theme['flex'], theme[`${direction}`]);
 
   return (
     <div className={classNames} {...otherProps}>

src/components/flex/theme.css

@@ -5,3 +5,11 @@
   box-sizing: border-box;
   display: flex;
 }
+
+.row {
+  flex-direction: row;
+}
+
+.column {
+  flex-direction: column;
+}