@govuk-frederic/table-accordion-group v0.2.0

TableAccordionGroup

Import

  import TableAccordionGroup from '@govuk-frederic/table-accordion-group';

Usage

State managed with children

import manageState from 'manage-state';

const ManagedTableAccordionGroup = manageState(TableAccordionGroup, {
  propsToState: ['open'],
});

<ManagedTableAccordionGroup title="Title" expanded="expanded">
  Children
</ManagedTableAccordionGroup>

State managed without children

import manageState from 'manage-state';

const ManagedTableAccordionGroup = manageState(TableAccordionGroup, {
  propsToState: ['open'],
});

<ManagedTableAccordionGroup title="Title" expanded="expanded"/>

Toggle open on title click with 'changeOnTitleClick' prop

import manageState from 'manage-state';

const ManagedTableAccordionGroup = manageState(TableAccordionGroup, {
  propsToState: ['open'],
});

<ManagedTableAccordionGroup changeOnTitleClick title="Title" expanded="expanded">
  Children
</ManagedTableAccordionGroup>

Array

import manageState from 'manage-state';

const arrayExampleItems = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

const ManagedTableAccordionGroup = manageState(TableAccordionGroup, {
  propsToState: ['open'],
});


<ManagedTableAccordionGroup
  expanded={
  arrayExampleItems.map((item, index) => {
    if (index) {
      return <div>{item}</div>;
    }
    return null;
  })}
>
  {arrayExampleItems[0]}
</ManagedTableAccordionGroup>

TODO:

• Implement Async story example in CodeSandbox

Properties