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

UI component library of Eureca's user and admin apps

import {
  Meta,
  Story,
  Preview,
  Title,
  Subtitle,
  Description,
  Props,
} from '@storybook/addon-docs/blocks';
import { withKnobs } from '@storybook/addon-knobs';

import { Flex } from '../';
import { FlexStory } from './flex.stories.js';

<Meta title='Originals/Flex' component={Flex} decorators={[withKnobs]}/>

<Title>Flex</Title>

<Description>
  Componente Flex dos aplicativos Eureca. Expandido do componente [Box do Material-UI](https://material-ui.com/components/box/#box).
</Description>

<Description>
  Aceita todas as props padrão do componente Box do Material-UI.
</Description>

<Preview>
  <Story name="Flex">
    <FlexStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

> Como padrão `directionColumn` é `true`.

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| style | Estilo customizado do componente <br /> 'object' | { } |
| onClick | Função de onClick do componente <br /> 'func' | () => { } |
| forwardedRef | Ref a ser passado ao componente caso necessário <br /> 'object' | '' |
| alignCenter | Equivale à regra de CSS alignItems='center' <br /> 'bool' | '' |
| alignFlexEnd | Equivale à regra de CSS alignItems='flex-end' <br /> 'bool' | '' |
| directionColumn | Equivale à regra de CSS flexDirection='column' <br /> 'bool' | '' |
| directionRow | Equivale à regra de CSS flexDirection='row' <br /> 'bool' | '' |
| justifyCenter | Equivale à regra de CSS justifyContent='center' <br /> 'bool' | '' |
| justifyFlexEnd | Equivale à regra de CSS justifyContent='flex-end' <br /> 'bool' | '' |
| justifySpaceAround | Equivale à regra de CSS justifyContent='space-around' <br /> 'bool' | '' |
| justifySpaceBetween | Equivale à regra de CSS justifyContent='space-between' <br /> 'bool' | '' |
| wrapWrap | Equivale à regra de CSS flexWrap='wrap' <br /> 'bool' | '' |
| wrapWrapReverse | Equivale à regra de CSS flexWrap='wrap-reverse' <br /> 'bool' | '' |
| flexGrow | Equivale à regra de CSS flexGrow='initial' <br /> 'bool' | '' |
| cursorPointer | Equivale à regra de CSS cursor='pointer <br /> 'bool' | '' |
| className | ClassName opcional a ser passado ao componente <br /> 'string' | '' |

<Subtitle>Exemplo de Aplicação</Subtitle>

```jsx
<Flex directionRow justifyCenter alignCenter>
  <Block color="#247BA0" />
  <Block color="#B2DBBF" />
  <Block color="#FF1654" />
</Flex>
```