@swrve/core/src/accordion/Accordion.stories.js

Core set of Swrve UI Components

import React from 'react'
import { storiesOf } from '@storybook/react'
import { withKnobs, boolean } from '@storybook/addon-knobs'
import { withReadme } from 'storybook-readme'

import Accordion from './Accordion'
import AccordionItem from './AccordionItem'
import AccordionReadMe from './readme.md'
const stories = storiesOf('Core|Accordion', module)

stories
  .addDecorator(withKnobs)
  .addDecorator(withReadme(AccordionReadMe))
  .add('Accordion', () => {
    return (
      <div className="bg-haze p-3 m-3 w-64">
        <Accordion>
          <Accordion.Item title="Status">
            <p className="p-3 text-jungleGrey text-sm">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod sagittis
              dictum. Suspendisse egestas suscipit.
            </p>
          </Accordion.Item>
          <Accordion.Item title="Channel">
            <p className="p-3 text-jungleGrey text-sm">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod sagittis
              dictum. Suspendisse egestas suscipit.
            </p>
          </Accordion.Item>
          <Accordion.Item title="Schedule">
            <p className="p-3 text-jungleGrey text-sm">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod sagittis
              dictum. Suspendisse egestas suscipit.
            </p>
          </Accordion.Item>
        </Accordion>
      </div>
    )
  })
  .add('Accordion Item', () => {
    const collapsed = boolean('Open ?', true)
    return (
      <div className="bg-haze p-3 m-3 w-64">
        <AccordionItem title="Status" open={collapsed}>
          <p className="p-3 text-jungleGrey text-sm">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod sagittis
            dictum. Suspendisse egestas suscipit.
          </p>
        </AccordionItem>
      </div>
    )
  })