The Utils section consist of two components: **Collapse** and **Fade**.
These share base react-bootstrap props and extended with transitionDuration.
[React Bootstrap Transitions](https://react-bootstrap.github.io/utilities/transitions/).

```jsx
import React, { useState } from 'react';
import { Button, Collapse, Fade } from 'frontend-react-components';

const [fadeOpen, setFadeOpen] = useState(false);
const [collapseOpen, setCollapseOpen] = useState(false);

<div>
    <section>
        <h3>Collapse</h3>
        <Button
            onClick={() => setCollapseOpen(!collapseOpen)}
            aria-controls="example-collapse-text"
            aria-expanded={collapseOpen}
        >
            Toggle collapsed text
        </Button>
        <Collapse in={collapseOpen} transitionDuration={ 1000 }>
            <div id="example-collapse-text">
                <p className="p-0 m-0">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
                    terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
                    labore wes anderson cred nesciunt sapiente ea proident.<br/>
                    Ppariatur cliche reprehenderit, enim eiusmod high life accusamus
                    terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
                    labore wes anderson cred nesciunt sapiente ea proident.
                </p>
            </div>
        </Collapse>
    </section>

    <hr />

    <section>
        <h3>Fade</h3>
        <Button
            onClick={() => setFadeOpen(!fadeOpen)}
            aria-controls="example-fade-text"
            aria-expanded={fadeOpen}
        >
            Toggle faded text
        </Button>
        <Fade in={fadeOpen}>
            <div id="example-fade-text">
                <p className="p-0 m-0">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Ut vehicula rhoncus risus, quis lacinia ipsum porta vitae.
                    Phasellus nec malesuada risus, vitae pellentesque metus. Curabitur id posuere nisi.
                </p>
            </div>
        </Fade>
    </section>
</div>
```