MaterialAccordion component

State

• Test coverage: --%
• Known bugs: Rounded corners will not be applied unless MaterialAccordion tags are the only siblings on their level. As such they should be nested in a MaterialAccordionGroup or simply a div, even for a single accordion.
• Zeroheight: https://zeroheight.com/135a7addc/v/latest/p/7327ee-accordion/t/54cc7e

Install

import { MaterialAccordion, MaterialAccordionGroup } from '@tdcerhverv/accordion';

Usage

Accordions should be made children of a MaterialAccordion.Group element. Even when using a single accordion this should be nested as a child to one of these components, and should not have any siblings. If there are any non-MaterialAccordion siblings on the same level this will break the MaterialAccordion styling

Simple usage:

<MaterialAccordionGroup>
    <MaterialAccordion title={'Click here to toggle accordion'}>
        <p>Some paragraph or any valid React child element</p>
    </MaterialAccordion>
</MaterialAccordionGroup>

Detailed usage:

const props = {
    title: 'Lorem Ipsum Dolor Sit',
    initialOpen: true,
    onToggle: myHandlerMethod,
    children: 'Some paragraph or any valid React child element',
};
<MaterialAccordionGroup>
    <MaterialAccordion {...props}/>
</MaterialAccordionGroup>

Putting children in props makes it easier to iterate over items:

<MaterialAccordionGroup>
    {items.map(props => <MaterialAccordion {...props}/>)}
</MaterialAccordionGroup>

Otherwise, Accordions can manually be added:

<MaterialAccordionGroup>
    <MaterialAccordion {...props}/>
    <MaterialAccordion {...props}/>
    <MaterialAccordion {...props}/>
    ...even more accordions
</MaterialAccordionGroup>

Props

interface IMUIAccordion extends HTMLAttributes<HTMLDivElement> {
    title: ReactNode & string;
    initialOpen?: boolean;                  // default false
    onToggle?: (isOpen: boolean) => void;
}

Note that it extends and accepts all valid attributes for a div element. Any attribute not in the extended interface will be applied to the root div element. Furthermore this component is built upon a Material-UI accordion, and accepts relevant props. See Material-UI Accrodion API docs for more.

Accordion component

State

• Test coverage: --%
• Known bugs: --
• Storybook: https://storybook.knet.lqd.dk/?path=/story/accordion--all-props
• Zeroheight: --

Install

import { Accordion } from '@tdcerhverv/accordion';

Usage

Simple usage:

<Accordion title={'Click here to toggle accordion'}>
    <p>Some paragraph or any valid React child element</p>
</Accordion>

Detailed usage:

const accordionItemProps = {
    title: 'Lorem Ipsum Dolor Sit',
    initialOpen: true,
    onToggle: myHandlerMethod,
    large: true,
    children: 'Some paragraph or any valid React child element',
    footer: 'Some text or any valid React element'
};

<Accordion {...props}/>

Putting children in props makes it easier ti iterate over items:

<div>
    {items.map(props => <Accordion {...props}/>)}
</div>

Example with the Accordion.Group:

<Accordion.Group>
    <Accordion {...props}/>
    <Accordion {...props}/>
    <Accordion {...props}/>
    ...even more accordions
</Accordion.Group>

Props

interface IAccordion extends HTMLAttributes<HTMLDivElement> {
    title: ReactNode & string;
    withMarker?: boolean;               // adds alternative styling for active state
    initialOpen?: boolean;                  // default false
    onToggle?: (isOpen: boolean) => void;
    large?: boolean;                        // default false
    footer?: ReactNode;
}

Note that it extends and accepts all valid attributes for a div element. Any attribute not in the extended interface will be applied to the root div element.

Tags