@axa-fr/react-toolkit-collapse

@axa-fr/react-toolkit-collapse

• Installation
• Collapse
• Accordion

Installation

npm i @axa-fr/react-toolkit-collapse

Collapse

Import

import { CollapseCard } from '@axa-fr/react-toolkit-collapse';
import '@axa-fr/react-toolkit-collapse/dist/af-accordion.css';

Use

const Collapse = () => (
  <CollapseCard>
    <CollapseCard.Header>Your Header Text #1</CollapseCard.Header>
    <CollapseCard.Body>
      Your Body Text <b>Your Bold Text</b>
    </CollapseCard.Body>
  </CollapseCard>
);
export default Collapse;

Accordion

Import

import { Accordion, CollapseCard } from '@axa-fr/react-toolkit-collapse';
import '@axa-fr/react-toolkit-collapse/dist/af-accordion.css';

Use

const AccordionCollapse = () => (
  <Accordion
    collapses={[]}
    handleToggle={() => console.log('your function')}
    onlyOne={true}>
    <CollapseCard>
      <CollapseCard.Header>CollpaseCard #1 Title</CollapseCard.Header>
      <CollapseCard.Body>Your Body Text #1</CollapseCard.Body>
    </CollapseCard>
    <CollapseCard>
      <CollapseCard.Header>CollpaseCard #2 Title</CollapseCard.Header>
      <CollapseCard.Body>Your Body Text #2</CollapseCard.Body>
    </CollapseCard>
    <CollapseCard>
      <CollapseCard.Header>CollpaseCard #3 Title</CollapseCard.Header>
      <CollapseCard.Body>Your Body Text #3</CollapseCard.Body>
    </CollapseCard>
  </Accordion>
);
export default AccordionCollapse;