@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

package/dist/docs/components/expander.md

@@ -0,0 +1,970 @@
+# ExpanderPanel
+
+*Category:* Components
+*Section:* Show/Hide
+*Source:* https://uikit.developers.rio.cloud/#components/expander
+*Captured:* 2025-12-12T14:20:25.698Z
+
+A simple panel component where the "panel-body" can be expanded.
+
+## ExpanderPanel
+
+### Example: Example 1
+
+Toggle expanderOpen expanderClose expander
+Click me to toggle my state
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
+
+#### Summary
+
+Toggle expanderOpen expanderClose expander
+Click me to toggle my state
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';
+import Button from '@rio-cloud/rio-uikit/Button';
+
+const content = (
+    <div>
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
+    </div>
+);
+
+export default () => {
+    const [expanderIsOpen, setExpanderIsOpen] = useState(true);
+
+    const handleToggleExpander = () => {
+        setExpanderIsOpen(prev => !prev);
+    };
+
+    const handleForceOpen = () => {
+        setExpanderIsOpen(prev => (prev ? prev : true));
+    };
+
+    const handleForceClose = () => {
+        setExpanderIsOpen(prev => (prev ? false : prev));
+    };
+
+    return (
+        <div>
+            <div className='btn-toolbar'>
+                <Button bsStyle='primary' onClick={handleToggleExpander}>
+                    Toggle expander
+                </Button>
+                <Button onClick={handleForceOpen} disabled={expanderIsOpen}>
+                    Open expander
+                </Button>
+                <Button onClick={handleForceClose} disabled={!expanderIsOpen}>
+                    Close expander
+                </Button>
+            </div>
+            <div className='display-grid grid-cols-1 grid-cols-2-lg'>
+                <div className='padding-top-20'>
+                    <ExpanderPanel
+                        open={expanderIsOpen}
+                        title='Click me to toggle my state'
+                        bsStyle='default'
+                        onEntered={() => setExpanderIsOpen(true)}
+                        onExited={() => setExpanderIsOpen(false)}
+                    >
+                        {content}
+                    </ExpanderPanel>
+                </div>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="btn-toolbar">
+        <button type="button" class="btn btn-primary btn-component" tabindex="0">Toggle expander</button>
+        <button type="button" class="btn btn-default btn-component" disabled="" tabindex="0">Open expander</button>
+        <button type="button" class="btn btn-default btn-component" tabindex="0">Close expander</button>
+    </div>
+    <div class="display-grid grid-cols-1 grid-cols-2-lg">
+        <div class="padding-top-20">
+            <div class="expander-panel panel panel-default" aria-label="expander panel">
+                <div class="panel-heading open" aria-label="panel heading">
+                    <span class="title">Click me to toggle my state</span>
+                    <span class="expander-icon rioglyph rioglyph-chevron-down">
+                    </span>
+                </div>
+                <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
+                    <div>
+                        <div class="panel-body">
+                            <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| title | String / Node | — | The title to be shown in the expander header. |
+| bsStyle | String | 'blank' | Component visual or contextual style variants. Possible values are: 'default' 'separator' 'blank' 'primary' 'secondary' 'info' 'warning' 'danger' 'success' |
+| iconLeft | Boolean | false | Defines if the icon will be align left, otherwise it is aligned right. |
+| open | Boolean | false | Defines if the panel will be opened or closed by default. The open/closed state will be handled internally |
+| unmountOnExit | Boolean | true | It unmounts the body component (remove it from the DOM) when it is collapsed. Set it to false to avoid the unmount. |
+| className | String | — | Additional classes to be set on the wrapper element. |
+| iconClassName | String | — | Additional classes added to the chevron icon |
+| headerClassName | String | — | Additional classes to be set on the panel header. |
+| titleClassName | String | — | Additional classes to be set on the header title. |
+| bodyClassName | String | — | Additional classes to be set on the panel body. |
+| onToggle | (isOpen: boolean) => void | — | Callback function for when the header is clicked and the expander toggles. |
+| onEntered | VoidFunction | — | Callback fired after the component has expanded. |
+| onExited | VoidFunction | — | Callback fired after the component has collapsed. |
+| onAnimationStart | VoidFunction | — | Callback fired when the animation starts for either expand or collapse. |
+| children | Node | — | Any element to be rendered inside the panel body. |
+| children | Function | — | Providing a function enables the "render props" approach. The function gets the isOpen state passed and is responsible for rendering the custom content. |
+
+### Example: Default
+
+DefaultLorem ipsum
+Some content
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
+
+BlankLorem ipsum
+Some content
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
+
+SeparatorSeparator with icon left
+
+Lorem ipsum dolor sit amet
+consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+
+SeparatorSeparator right aligned
+
+Lorem ipsum dolor sit amet
+consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+
+PrimaryLorem ipsum
+
+PrimaryHeader with icon left
+
+SecondaryLorem ipsum
+
+InfoLorem ipsum
+
+WarningLorem ipsum
+
+DangerLorem ipsum
+
+successLorem ipsum
+
+Dynamic table content
+Item 1
+Item 2
+Item 3
+
+Add new table row
+
+#### Summary
+
+DefaultLorem ipsum
+Some content
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
+
+BlankLorem ipsum
+Some content
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
+
+SeparatorSeparator with icon left
+
+Lorem ipsum dolor sit amet
+consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+
+SeparatorSeparator right aligned
+
+Lorem ipsum dolor sit amet
+consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+
+PrimaryLorem ipsum
+
+PrimaryHeader with icon left
+
+SecondaryLorem ipsum
+
+InfoLorem ipsum
+
+WarningLorem ipsum
+
+DangerLorem ipsum
+
+successLorem ipsum
+
+Dynamic table content
+Item 1
+Item 2
+Item 3
+
+Add new table row
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';
+import { dummyTextExtraShort } from '../../../utils/data';
+
+const content = (
+    <div>
+        <div className='lead'>Some content</div>
+        <div>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
+        </div>
+    </div>
+);
+
+const content2 = (
+    <div>
+        <div className='panel panel-default panel-body bg-lightest'>
+            <div className='text-bold'>Lorem ipsum dolor sit amet</div>
+            <div>
+                consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+                erat, sed diam voluptua.
+            </div>
+        </div>
+    </div>
+);
+
+export default () => (
+    <div>
+        <div className='display-grid grid-cols-1 grid-cols-2-sm grid-cols-4-lg gap-15 margin-bottom-50'>
+            <div className='grid-colspan-1 grid-colspan-2-lg'>
+                <label className='text-color-dark'>Default</label>
+                <ExpanderPanel
+                    open
+                    title='Lorem ipsum'
+                    bsStyle='default'
+                    onEntered={() => console.log('opened')}
+                    onExited={() => console.log('closed')}
+                >
+                    {content}
+                </ExpanderPanel>
+            </div>
+            <div className='grid-colspan-1 grid-colspan-2-lg'>
+                <label className='text-color-dark'>Blank</label>
+                <ExpanderPanel open title='Lorem ipsum' bsStyle='blank'>
+                    {content}
+                </ExpanderPanel>
+            </div>
+            <div className='grid-colspan-1 grid-colspan-2-lg'>
+                <label className='text-color-dark'>Separator</label>
+                <ExpanderPanel
+                    open
+                    title='Separator with icon left'
+                    iconLeft
+                    bsStyle='separator'
+                    bodyClassName='padding-top-5 padding-x-0'
+                >
+                    {(open: boolean) => {
+                        console.log(`isOpen: ${open}`);
+                        return content2;
+                    }}
+                </ExpanderPanel>
+            </div>
+            <div className='grid-colspan-1 grid-colspan-2-lg'>
+                <label className='text-color-dark'>Separator</label>
+                <ExpanderPanel
+                    open
+                    title='Separator right aligned'
+                    bsStyle='separator'
+                    bodyClassName='padding-top-5 padding-right-20'
+                >
+                    {(open: boolean) => {
+                        console.log(`isOpen: ${open}`);
+                        return content2;
+                    }}
+                </ExpanderPanel>
+            </div>
+            <div className='grid-colspan-1 grid-colspan-2-lg'>
+                <label className='text-color-dark'>Primary</label>
+                <ExpanderPanel title='Lorem ipsum' titleClassName='text-normal' bsStyle='primary'>
+                    {(open: boolean) => {
+                        console.log(`isOpen: ${open}`);
+                        return content2;
+                    }}
+                </ExpanderPanel>
+            </div>
+            <div className='grid-colspan-1 grid-colspan-2-lg'>
+                <label className='text-color-dark'>Primary</label>
+                <ExpanderPanel title='Header with icon left' titleClassName='text-normal' iconLeft bsStyle='primary'>
+                    {(open: boolean) => {
+                        console.log(`isOpen: ${open}`);
+                        return content2;
+                    }}
+                </ExpanderPanel>
+            </div>
+            <div className=''>
+                <label className='text-color-dark'>Secondary</label>
+                <ExpanderPanel title='Lorem ipsum' bsStyle='secondary'>
+                    {dummyTextExtraShort}
+                </ExpanderPanel>
+            </div>
+            <div className=''>
+                <label className='text-color-dark'>Info</label>
+                <ExpanderPanel title='Lorem ipsum' bsStyle='info'>
+                    {dummyTextExtraShort}
+                </ExpanderPanel>
+            </div>
+            <div className=''>
+                <label className='text-color-dark'>Warning</label>
+                <ExpanderPanel title='Lorem ipsum' bsStyle='warning'>
+                    {dummyTextExtraShort}
+                </ExpanderPanel>
+            </div>
+            <div className=''>
+                <label className='text-color-dark'>Danger</label>
+                <ExpanderPanel title='Lorem ipsum' bsStyle='danger'>
+                    {dummyTextExtraShort}
+                </ExpanderPanel>
+            </div>
+            <div className=''>
+                <label className='text-color-dark'>success</label>
+                <ExpanderPanel title='Lorem ipsum' bsStyle='success'>
+                    {dummyTextExtraShort}
+                </ExpanderPanel>
+            </div>
+        </div>
+        <ExpanderPanel
+            title='Dynamic table content'
+            bsStyle='default'
+            titleClassName='text-bold'
+            bodyClassName='padding-0'
+            open
+        >
+            <DynamicContent />
+        </ExpanderPanel>
+    </div>
+);
+
+const DynamicContent = () => {
+    const [listItems, setListItems] = useState([
+        {
+            id: 1,
+            content: 'Item 1',
+        },
+        {
+            id: 2,
+            content: 'Item 2',
+        },
+        {
+            id: 3,
+            content: 'Item 3',
+        },
+    ]);
+
+    const handleAddItem = () => {
+        const lastItem = listItems[listItems.length - 1];
+        const newId = lastItem ? lastItem.id + 1 : 1;
+        const newItem = { id: newId, content: `Item ${newId}` };
+
+        setListItems([...listItems, newItem]);
+    };
+
+    const handleRemoveItem = (event: React.MouseEvent<HTMLButtonElement>) => {
+        const idString = event.currentTarget.getAttribute('data-id');
+        if (idString) {
+            const id = Number.parseInt(idString, 10);
+            if (!isNaN(id)) {
+                setListItems(listItems.filter(item => item.id !== id));
+            }
+        }
+    };
+
+    return (
+        <div>
+            <table className='table margin-0 border border-bottom-only border-color-lighter'>
+                <colgroup>
+                    <col className='width-100pct' />
+                </colgroup>
+                <tbody>
+                    {listItems.map(item => (
+                        <tr key={item.id}>
+                            <td>{item.content}</td>
+                            <td>
+                                <button
+                                    data-id={item.id}
+                                    type='button'
+                                    className='btn btn-xs btn-muted btn-icon-only'
+                                    onClick={handleRemoveItem}
+                                >
+                                    <span className='rioglyph rioglyph-remove' />
+                                </button>
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+            <div key='addNew' className='padding-25 text-center'>
+                <button type='button' className='btn btn-default' onClick={handleAddItem}>
+                    <span className='rioglyph rioglyph-plus' />
+                    <span>Add new table row</span>
+                </button>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="display-grid grid-cols-1 grid-cols-2-sm grid-cols-4-lg gap-15 margin-bottom-50">
+        <div class="grid-colspan-1 grid-colspan-2-lg">
+            <label class="text-color-dark">Default</label>
+            <div class="expander-panel panel panel-default" aria-label="expander panel">
+                <div class="panel-heading open" aria-label="panel heading">
+                    <span class="title">Lorem ipsum</span>
+                    <span class="expander-icon rioglyph rioglyph-chevron-down">
+                    </span>
+                </div>
+                <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
+                    <div>
+                        <div class="panel-body">
+                            <div>
+                                <div class="lead">Some content</div>
+                                <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="grid-colspan-1 grid-colspan-2-lg">
+            <label class="text-color-dark">Blank</label>
+            <div class="expander-panel panel panel-blank" aria-label="expander panel">
+                <div class="panel-heading open" aria-label="panel heading">
+                    <span class="title">Lorem ipsum</span>
+                    <span class="expander-icon rioglyph rioglyph-chevron-down">
+                    </span>
+                </div>
+                <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
+                    <div>
+                        <div class="panel-body">
+                            <div>
+                                <div class="lead">Some content</div>
+                                <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="grid-colspan-1 grid-colspan-2-lg">
+            <label class="text-color-dark">Separator</label>
+            <div class="expander-panel panel panel-separator" aria-label="expander panel">
+                <div class="panel-heading open icon-left" aria-label="panel heading">
+                    <span class="title">Separator with icon left</span>
+                    <span class="expander-icon rioglyph rioglyph-chevron-down">
+                    </span>
+                    <div class="separator">
+                        <hr>
+                    </div>
+                </div>
+                <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
+                    <div>
+                        <div class="panel-body padding-top-5 padding-x-0">
+                            <div>
+                                <div class="panel panel-default panel-body bg-lightest">
+                                    <div class="text-bold">Lorem ipsum dolor sit amet</div>
+                                    <div>consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="grid-colspan-1 grid-colspan-2-lg">
+            <label class="text-color-dark">Separator</label>
+            <div class="expander-panel panel panel-separator" aria-label="expander panel">
+                <div class="panel-heading open" aria-label="panel heading">
+                    <span class="title">Separator right aligned</span>
+                    <span class="expander-icon rioglyph rioglyph-chevron-down">
+                    </span>
+                    <div class="separator">
+                        <hr>
+                    </div>
+                </div>
+                <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
+                    <div>
+                        <div class="panel-body padding-top-5 padding-right-20">
+                            <div>
+                                <div class="panel panel-default panel-body bg-lightest">
+                                    <div class="text-bold">Lorem ipsum dolor sit amet</div>
+                                    <div>consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="grid-colspan-1 grid-colspan-2-lg">
+            <label class="text-color-dark">Primary</label>
+            <div class="expander-panel panel panel-primary" aria-label="expander panel">
+                <div class="panel-heading" aria-label="panel heading">
+                    <span class="title text-normal">Lorem ipsum</span>
+                    <span class="expander-icon rioglyph rioglyph-chevron-down">
+                    </span>
+                </div>
+            </div>
+        </div>
+        <div class="grid-colspan-1 grid-colspan-2-lg">
+            <label class="text-color-dark">Primary</label>
+            <div class="expander-panel panel panel-primary" aria-label="expander panel">
+                <div class="panel-heading icon-left" aria-label="panel heading">
+                    <span class="title text-normal">Header with icon left</span>
+                    <span class="expander-icon rioglyph rioglyph-chevron-down">
+                    </span>
+                </div>
+            </div>
+        </div>
+        <div class="">
+            <label class="text-color-dark">Secondary</label>
+            <div class="expander-panel panel panel-secondary" aria-label="expander panel">
+                <div class="panel-heading" aria-label="panel heading">
+                    <span class="title">Lorem ipsum</span>
+                    <span class="expander-icon rioglyph rioglyph-chevron-down">
+                    </span>
+                </div>
+            </div>
+        </div>
+        <div class="">
+            <label class="text-color-dark">Info</label>
+            <div class="expander-panel panel panel-info" aria-label="expander panel">
+                <div class="panel-heading" aria-label="panel heading">
+                    <span class="title">Lorem ipsum</span>
+                    <span class="expander-icon rioglyph rioglyph-chevron-down">
+                    </span>
+                </div>
+            </div>
+        </div>
+        <div class="">
+            <label class="text-color-dark">Warning</label>
+            <div class="expander-panel panel panel-warning" aria-label="expander panel">
+                <div class="panel-heading" aria-label="panel heading">
+                    <span class="title">Lorem ipsum</span>
+                    <span class="expander-icon rioglyph rioglyph-chevron-down">
+                    </span>
+                </div>
+            </div>
+        </div>
+        <div class="">
+            <label class="text-color-dark">Danger</label>
+            <div class="expander-panel panel panel-danger" aria-label="expander panel">
+                <div class="panel-heading" aria-label="panel heading">
+                    <span class="title">Lorem ipsum</span>
+                    <span class="expander-icon rioglyph rioglyph-chevron-down">
+                    </span>
+                </div>
+            </div>
+        </div>
+        <div class="">
+            <label class="text-color-dark">success</label>
+            <div class="expander-panel panel panel-success" aria-label="expander panel">
+                <div class="panel-heading" aria-label="panel heading">
+                    <span class="title">Lorem ipsum</span>
+                    <span class="expander-icon rioglyph rioglyph-chevron-down">
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="expander-panel panel panel-default" aria-label="expander panel">
+        <div class="panel-heading open" aria-label="panel heading">
+            <span class="title text-bold">Dynamic table content</span>
+            <span class="expander-icon rioglyph rioglyph-chevron-down">
+            </span>
+        </div>
+        <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
+            <div>
+                <div class="panel-body padding-0">
+                    <div>
+                        <table class="table margin-0 border border-bottom-only border-color-lighter">
+                            <colgroup>
+                                <col class="width-100pct">
+                            </colgroup>
+                            <tbody>
+                                <tr>
+                                    <td>Item 1</td>
+                                    <td>
+                                        <button data-id="1" type="button" class="btn btn-xs btn-muted btn-icon-only">
+                                            <span class="rioglyph rioglyph-remove">
+                                            </span>
+                                        </button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>Item 2</td>
+                                    <td>
+                                        <button data-id="2" type="button" class="btn btn-xs btn-muted btn-icon-only">
+                                            <span class="rioglyph rioglyph-remove">
+                                            </span>
+                                        </button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>Item 3</td>
+                                    <td>
+                                        <button data-id="3" type="button" class="btn btn-xs btn-muted btn-icon-only">
+                                            <span class="rioglyph rioglyph-remove">
+                                            </span>
+                                        </button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                        <div class="padding-25 text-center">
+                            <button type="button" class="btn btn-default">
+                                <span class="rioglyph rioglyph-plus">
+                                </span>
+                                <span>Add new table row</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| title | String / Node | — | The title to be shown in the expander header. |
+| bsStyle | String | 'blank' | Component visual or contextual style variants. Possible values are: 'default' 'separator' 'blank' 'primary' 'secondary' 'info' 'warning' 'danger' 'success' |
+| iconLeft | Boolean | false | Defines if the icon will be align left, otherwise it is aligned right. |
+| open | Boolean | false | Defines if the panel will be opened or closed by default. The open/closed state will be handled internally |
+| unmountOnExit | Boolean | true | It unmounts the body component (remove it from the DOM) when it is collapsed. Set it to false to avoid the unmount. |
+| className | String | — | Additional classes to be set on the wrapper element. |
+| iconClassName | String | — | Additional classes added to the chevron icon |
+| headerClassName | String | — | Additional classes to be set on the panel header. |
+| titleClassName | String | — | Additional classes to be set on the header title. |
+| bodyClassName | String | — | Additional classes to be set on the panel body. |
+| onToggle | (isOpen: boolean) => void | — | Callback function for when the header is clicked and the expander toggles. |
+| onEntered | VoidFunction | — | Callback fired after the component has expanded. |
+| onExited | VoidFunction | — | Callback fired after the component has collapsed. |
+| onAnimationStart | VoidFunction | — | Callback fired when the animation starts for either expand or collapse. |
+| children | Node | — | Any element to be rendered inside the panel body. |
+| children | Function | — | Providing a function enables the "render props" approach. The function gets the isOpen state passed and is responsible for rendering the custom content. |
+
+## ExpanderList
+
+A simple list component based on the "list-group" where items can be expanded individually.
+
+### Example: With custom classes for header and body
+
+Click me
+Some content
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
+
+Click me
+
+Click me
+
+With custom classes for header and body
+
+Grid column 1
+Grid column 2
+Grid column 3
+
+Click me42
+
+Click me
+
+Not expandable since there is no body
+
+Toggle first
+
+#### Summary
+
+Click me
+Some content
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
+
+Click me
+
+Click me
+
+With custom classes for header and body
+
+Grid column 1
+Grid column 2
+Grid column 3
+
+Click me42
+
+Click me
+
+Not expandable since there is no body
+
+Toggle first
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import ExpanderList from '@rio-cloud/rio-uikit/ExpanderList';
+import ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';
+import Button from '@rio-cloud/rio-uikit/Button';
+
+const content = (
+    <div>
+        <div className='lead'>Some content</div>
+        <div>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
+        </div>
+    </div>
+);
+
+export default () => {
+    const [listItems, setListItems] = useState([
+        {
+            id: 1,
+            header: 'Click me',
+            body: content,
+            open: true,
+            onOpen: () => console.log('open'),
+            onClose: () => console.log('close'),
+        },
+        {
+            id: 2,
+            header: <span>Click me</span>,
+            body: content,
+            className: 'list-group-item-warning',
+        },
+        {
+            id: 3,
+            header: <span>Click me</span>,
+            body: content,
+            className: 'list-group-item-danger',
+        },
+        {
+            id: 4,
+            header: <span>With custom classes for header and body</span>,
+            body: (
+                <div>
+                    <div>{content}</div>
+                    <div className='btn-toolbar margin-top-15'>
+                        <Button onClick={() => removeItem(4)}>Delete me</Button>
+                        <Button onClick={() => updateItem(4)}>Update Item Headline</Button>
+                    </div>
+                </div>
+            ),
+            className: 'foobar',
+            headerClassName: 'text-color-dark',
+            bodyClassName: 'bg-lightest padding-25',
+        },
+        {
+            id: 5,
+            header: (
+                <div className='display-grid grid-cols-3'>
+                    <div className=''>Grid column 1</div>
+                    <div className=''>Grid column 2</div>
+                    <div className=''>Grid column 3</div>
+                </div>
+            ),
+            body: content,
+        },
+        {
+            id: 6,
+            header: (
+                <span>
+                    <span>Click me</span>
+                    <span className='badge margin-left-5'>42</span>
+                </span>
+            ),
+            body: content,
+        },
+        {
+            id: 7,
+            header: (
+                <span>
+                    <span className='rioglyph rioglyph-tasks margin-right-3' aria-hidden='true' />
+                    <span>Click me</span>
+                </span>
+            ),
+            body: (
+                <ExpanderPanel bsStyle='default' className='margin-0' title='Please click me' iconLeft>
+                    {content}
+                </ExpanderPanel>
+            ),
+        },
+        {
+            id: 8,
+            header: 'Not expandable since there is no body',
+        },
+    ]);
+
+    const handleToggleFirst = () => {
+        const updatedItems = [...listItems];
+        const itemToUpdate = updatedItems[0];
+        itemToUpdate.open = !itemToUpdate.open;
+
+        setListItems(updatedItems);
+    };
+
+    const updateItem = (itemId: number) => {
+        const updatedItems = [...listItems];
+        const itemToUpdate = updatedItems.find(item => item.id === itemId);
+
+        if (itemToUpdate) {
+            itemToUpdate.header = 'Headline updated';
+            setListItems(updatedItems);
+        }
+    };
+
+    const removeItem = (itemId: number) => {
+        setListItems(listItems.filter(item => item.id !== itemId));
+    };
+
+    return (
+        <div>
+            <ExpanderList items={listItems} className='margin-bottom-20' />
+            <Button onClick={handleToggleFirst}>Toggle first</Button>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <ul class="expander-list list-group rounded border margin-bottom-20">
+        <li class="list-group-item expandable open">
+            <div class="expander-list-header" aria-label="expander item header">
+                <span class="expander-list-header-content">Click me</span>
+                <span class="expander-icon rioglyph rioglyph-chevron-down">
+                </span>
+            </div>
+            <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
+                <div class="expander-list-body-wrapper">
+                    <div class="expander-list-body" aria-label="expander item body">
+                        <div>
+                            <div class="lead">Some content</div>
+                            <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </li>
+        <li class="list-group-item list-group-item-warning expandable">
+            <div class="expander-list-header" aria-label="expander item header">
+                <span class="expander-list-header-content">
+                    <span>Click me</span>
+                </span>
+                <span class="expander-icon rioglyph rioglyph-chevron-down">
+                </span>
+            </div>
+        </li>
+        <li class="list-group-item list-group-item-danger expandable">
+            <div class="expander-list-header" aria-label="expander item header">
+                <span class="expander-list-header-content">
+                    <span>Click me</span>
+                </span>
+                <span class="expander-icon rioglyph rioglyph-chevron-down">
+                </span>
+            </div>
+        </li>
+        <li class="list-group-item foobar expandable">
+            <div class="expander-list-header text-color-dark" aria-label="expander item header">
+                <span class="expander-list-header-content">
+                    <span>With custom classes for header and body</span>
+                </span>
+                <span class="expander-icon rioglyph rioglyph-chevron-down">
+                </span>
+            </div>
+        </li>
+        <li class="list-group-item expandable">
+            <div class="expander-list-header" aria-label="expander item header">
+                <span class="expander-list-header-content">
+                    <div class="display-grid grid-cols-3">
+                        <div class="">Grid column 1</div>
+                        <div class="">Grid column 2</div>
+                        <div class="">Grid column 3</div>
+                    </div>
+                </span>
+                <span class="expander-icon rioglyph rioglyph-chevron-down">
+                </span>
+            </div>
+        </li>
+        <li class="list-group-item expandable">
+            <div class="expander-list-header" aria-label="expander item header">
+                <span class="expander-list-header-content">
+                    <span>
+                        <span>Click me</span>
+                        <span class="badge margin-left-5">42</span>
+                    </span>
+                </span>
+                <span class="expander-icon rioglyph rioglyph-chevron-down">
+                </span>
+            </div>
+        </li>
+        <li class="list-group-item expandable">
+            <div class="expander-list-header" aria-label="expander item header">
+                <span class="expander-list-header-content">
+                    <span>
+                        <span class="rioglyph rioglyph-tasks margin-right-3" aria-hidden="true">
+                        </span>
+                        <span>Click me</span>
+                    </span>
+                </span>
+                <span class="expander-icon rioglyph rioglyph-chevron-down">
+                </span>
+            </div>
+        </li>
+        <li class="list-group-item">
+            <div class="expander-list-header" aria-label="expander item header">
+                <span class="expander-list-header-content">Not expandable since there is no body</span>
+            </div>
+        </li>
+    </ul>
+    <button type="button" class="btn btn-default btn-component" tabindex="0">Toggle first</button>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| items | Array of Objects | [] | List of items to be rendered |
+| └id | String / Number | — | The "id" property is used to know which item is expanded. It will also be used to control the component from the outside. It can be a number or a string. If there is no "id" provided, a unique id is internally generated which will be used internally for the uncontrolled case. |
+| └header | String / Node | — | The header content. |
+| └body | String / Node | — | The body content. If there is no "body" provided, the list item is not expandable. |
+| └open | Boolean | — | Defines if the item will be expanded or closed by default. |
+| └className | String | — | Additional classes to be set on list item node. |
+| └headerClassName | String | — | Additional classes to be set on "expander-list-header" node. |
+| └bodyClassName | String | — | Additional classes to be set on "expander-list-body" node. |
+| rounded | Boolean | true | Defines whether the "expander-list-body" is rounded or not. |
+| border | Boolean | true | Defines whether the "expander-list-body" has a border or not. |
+| unmountOnExit | Boolean | true | It unmounts the body component (remove it from the DOM) when it is collapsed. Set it to false to avoid the unmount. |
+| className | String | — | Additional classes to be set on the unordered list itself. |