@eureca/eureca-ui/src/components/Flex/stories/flex.stories.js

UI component library of Eureca's user and admin apps

import React from 'react';
import { withKnobs, boolean } from '@storybook/addon-knobs';

import { Flex } from '..';
import { Box } from '@material-ui/core';

function Block({ color }) {
  const size = 100;
  return <Box m={2} width={size} height={size} bgcolor={color} />;
}

export default { title: 'Originals/Flex', decorators: [withKnobs], includeStories: [] };

export function FlexStory() {
  const directionRow = boolean('Row');
  const justifyCenter = boolean('Justify Center');
  const alignCenter = boolean('Align Center');

  return (
    <Flex directionRow={directionRow} justifyCenter={justifyCenter} alignCenter={alignCenter}>
      <Block color="#247BA0" />
      <Block color="#B2DBBF" />
      <Block color="#FF1654" />
    </Flex>
  );
}