@real-system/disclosure

Disclosure components for real system.

Installation

# install peer dependencies

# npm
$ npm install react react-dom @real-system/utils-library @real-system/disclosure-primitive @real-system/styled-library @real-system/elements-primitive
# yarn
$ yarn add react react-dom @real-system/utils-library @real-system/disclosure-primitive @real-system/styled-library @real-system/elements-primitive

# install disclosure

# npm
$ npm install @real-system/disclosure
# yarn
$ yarn add @real-system/disclosure

Code Example

import { Disclosure } from '@real-system/disclosure';
import { Icon } from '@real-system/icon';
const DefaultDisclosure = () => {
  return (
    <Disclosure>
      <Disclosure.Toggle>Accordion Item 1</Disclosure.Toggle>
      <Disclosure.Content>Some content to expand and collapse</Disclosure.Content>
    </Disclosure>
  )
}

const ContainedDisclosure = () => {
  return (
    <Disclosure contained>
      <Disclosure.Toggle>Accordion Item 1</Disclosure.Toggle>
      <Disclosure.Content>Some content to expand and collapse</Disclosure.Content>
    </Disclosure>
  )
}

const CustomHeadingDisclosure = () => {
  return (
    <Disclosure contained>
      {({ visible }) => (
        <Disclosure.Trigger hideToggleIcon>
          <Icon icon={visible ? 'arrow-down' : 'arrow-right'} mr={4} />
          <Disclosure.Heading>Accordion Item 1</Disclosure.Heading>
        </Disclosure.Trigger>
        <Disclosure.Content>Some content to expand and collapse</Disclosure.Content>
      )}
    </Disclosure>
  )
}