@eureca/eureca-ui/src/components/Accordion/Stories/accordion-large.stories.js

UI component library of Eureca's user and admin apps

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

import { FaUserEdit } from 'react-icons/fa';

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

import { Accordion } from '../';
import { Box, Typography } from '@material-ui/core';

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

export function LargeAccordion() {
  const title = text('Title', 'Title');
  const content = text('Content', 'Content');
  const rightText = text('Right side text', 'Right side text');
  const open = boolean('Open');
  const icon = boolean('Icon');
  const selected = boolean('Selected');
  const disabled = boolean('Disabled');

  return (
    <Accordion
      title={title}
      open={open}
      big={true}
      icon={icon && <FaUserEdit />}
      iconColor={icon && colors.gray3}
      rightSideText={rightText}
      isSelected={selected}
      isDisabled={disabled}
    >
      <Box p={3}>
        <Typography>{content}</Typography>
      </Box>
    </Accordion>
  );
}