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

Core set of Swrve UI Components

import React from 'react'

import Accordion from './Accordion'
import AccordionItem from './AccordionItem'

export default {
  title: 'Core/Accordion',
  component: Accordion
}
export const _Accordion = args => {
  return (
    <div className="bg-haze p-3 m-3 w-64">
      <Accordion {...args}>
        <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>
  )
}

export const _AccordionItem = args => {
  return (
    <div className="bg-haze p-3 m-3 w-64">
      <AccordionItem title="Status" {...args}>
        <p className="p-3 text-jungleGrey text-sm">{args.children}</p>
      </AccordionItem>
    </div>
  )
}

_AccordionItem.args = {
  open: false,
  children:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod sagittis dictum. Suspendisse egestas suscipit.'
}
_AccordionItem.argTypes = {
  open: {
    type: 'boolean'
  },
  children: {
    control: 'text'
  },
  className: {
    control: 'text'
  },
  title: {
    control: 'text'
  }
}