@eureca/eureca-ui/src/components/GroupAction/stories/group-action.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 { GroupAction, GroupActionProvider } from '../';
import { GroupActionStory } from './group-action.stories.js';

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

<Title>GroupAction</Title>

<Description>
  Componente GroupAction 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="GroupAction">
    <GroupActionProvider>
      <GroupActionStory />
    </GroupActionProvider>
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| variant | Estilo customizado do componente <br /> 'error' \| 'loading' \| 'success' \| 'warning' \| 'simple' | 'simple' |

<Subtitle>Group Action Provider</Subtitle>

> É necessário utilizar o GroupActionProvider no root do aplicativo para
utilização do componente.

```jsx
<GroupActionProvider>
  <App />
</GroupActionProvider>
```

<Subtitle>Group Action Hook</Subtitle>

> O hook retorna:

- `isOpen`: variável que controla a exibição do GroupAction
- `show`: função que atualiza o valor de isOpen

> É passado ao hook:

- `component`: Um componente com o conteúdo interno do GroupAction
- `initialVariant`: A variante inicial do GroupAction

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

```jsx
function Component() {
  const { isOpen, show } = useGroupAction(<GroupActionComponent variant='success' />, 'success');

  return (
    <div>
      <Button onClick={() => show(!isOpen)}>{!isOpen ? 'Show' : 'Hide'}</Button>
      <Box position="fixed" bottom={0} left={0} width="100%">
        <GroupAction />
      </Box>
    </div>
  );
}
```

<Subtitle>Exemplo de Componente Interno</Subtitle>

```jsx
function GroupActionComponent({ variant }) {
  return (
    <Flex directionRow alignCenter justifyFlexEnd width="100%">
      <Flex directionRow>
        <Box mr={2}>
          <Button
            type="button"
            variant={variant === 'simple' ? 'contained' : 'text'}
            style={{ color: variant !== 'simple' && colors.white }}
          >
            Cancelar
          </Button>
        </Box>

        <Button
          type="button"
          variant={variant === 'simple' ? 'contained' : 'text'}
          style={{ color: variant !== 'simple' && colors.white }}
        >
          Opções
        </Button>
      </Flex>
    </Flex>
  );
}
```