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

UI component library of Eureca's user and admin apps

import React from 'react';
import { withKnobs } from '@storybook/addon-knobs';
import styled from 'styled-components';

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

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

const AccordionGroup = styled.div`
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  overflow: hidden;
  & > div {
    border-bottom: 1px solid ${colors.gray5};
  }
  & > div:last-child {
    border-bottom: 0;
  }
`;

const data = [
  {
    id: 1,
    title: 'Title 1',
    content: 'Content 1',
  },
  {
    id: 2,
    title: 'Title 2',
    content: 'Content 2',
  },
  {
    id: 3,
    title: 'Title 3',
    content: 'Content 3',
  },
];

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

export function GroupAccordion() {
  return (
    <AccordionGroup>
      {data.map(item => {
        return (
          <Accordion title={item.title} key={item.id}>
            <Box p={3}>
              <Typography>{item.content}</Typography>
            </Box>
          </Accordion>
        );
      })}
    </AccordionGroup>
  );
}