@eureca/eureca-ui/src/components/GroupAction/stories/group-action.stories.js

UI component library of Eureca's user and admin apps

import React from 'react';
import { withKnobs, select } from '@storybook/addon-knobs';
import { Box } from '@material-ui/core';

import { useGroupAction } from '../../../hooks/useGroupAction';

import { colors } from '../../../theme/colors';

import { GroupAction, GroupActionProvider } from '..';
import { Flex } from '../../Flex';
import { Button } from '../../Buttons';

const groupActionVariants = {
  Error: 'error',
  Loading: 'loading',
  Success: 'success',
  Warning: 'warning',
  Simple: 'simple',
};

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>
  );
}

export default {
  title: 'Originals/GroupAction',
  decorators: [
    withKnobs,
    StoryFn => {
      return (
        <GroupActionProvider>
          <StoryFn />
        </GroupActionProvider>
      );
    },
  ],
  includeStories: [],
};

export function GroupActionStory() {
  const variant = select('Variants', groupActionVariants, 'success');
  const { isOpen, show } = useGroupAction(<GroupActionComponent variant={variant} />, variant);

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