@rio-cloud/uikit-mcp 1.1.9 → 1.1.10

package/dist/docs/templates/expandable-details.md

@@ -0,0 +1,214 @@
+# Expandable details
+
+*Category:* Templates
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#/templates/expandable-details
+*Captured:* 2026-04-20T12:55:40.482Z
+
+## Expandable details
+
+### Example: Example 1
+
+Warehouse EU-Central
+#458712839104 | eu-central-warehouse@logistics.cloud
+
+Distribution hub west
+
+#778944220011 | delivery-north-team@logistics.cloud
+
+Local delivery north
+#778944220011 | delivery-north-team@logistics.cloud
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import { generateDummyText } from '../../../utils/data';
+import ExpanderList from '@rio-cloud/rio-uikit/ExpanderList';
+import Divider from '@rio-cloud/rio-uikit/Divider';
+
+export default () => {
+    const [listItems, setListItems] = useState([
+        {
+            id: 1,
+            header: (
+                <div className='padding-y-5 display-flex gap-10'>
+                    <div>
+                        <span className='rioglyph rioglyph-building text-size-18 text-color-primary' />
+                    </div>
+                    <div>
+                        <div className='text-color-primary text-medium'>Warehouse EU-Central</div>
+                        <div className='text-color-gray text-size-12'>
+                            #458712839104 | eu-central-warehouse@logistics.cloud
+                        </div>
+                    </div>
+                </div>
+            ),
+            body: <RoleList />,
+            bodyClassName: 'padding-top-0 padding-bottom-15 padding-x-25',
+        },
+        {
+            id: 2,
+            header: (
+                <div className='padding-y-5 display-flex gap-10'>
+                    <div>
+                        <span className='rioglyph rioglyph-building text-size-18 text-color-primary' />
+                    </div>
+                    <div>
+                        <div className='text-color-primary text-medium'>Distribution hub west</div>
+                        <Divider vertical />
+                        <div className='text-color-gray text-size-12'>
+                            #778944220011 | delivery-north-team@logistics.cloud
+                        </div>
+                    </div>
+                </div>
+            ),
+            body: <RoleList />,
+            bodyClassName: 'padding-top-0 padding-bottom-15 padding-x-25',
+        },
+        {
+            id: 3,
+            header: (
+                <div className='padding-y-5 display-flex gap-10'>
+                    <div>
+                        <span className='rioglyph rioglyph-factory text-size-18 text-color-primary' />
+                    </div>
+                    <div>
+                        <div className='text-color-primary text-medium'>Local delivery north</div>
+                        <div className='text-color-gray text-size-12'>
+                            #778944220011 | delivery-north-team@logistics.cloud
+                        </div>
+                    </div>
+                </div>
+            ),
+            body: <RoleList />,
+            bodyClassName: 'padding-top-0 padding-bottom-15 padding-x-25',
+        },
+    ]);
+
+    return (
+        <div className='padding-15'>
+            <ExpanderList items={listItems} />
+        </div>
+    );
+};
+
+type RoleItem = {
+    role: string;
+    dashboardUrl: string;
+    apiUrl: string;
+};
+
+const roles: RoleItem[] = [
+    {
+        role: 'Hub Manager',
+        dashboardUrl: '#',
+        apiUrl: '#',
+    },
+    {
+        role: 'Inventory Control',
+        dashboardUrl: '#',
+        apiUrl: '#',
+    },
+    {
+        role: 'Shipping Operator',
+        dashboardUrl: '#',
+        apiUrl: '#',
+    },
+];
+
+export const RoleList = () => (
+    <div className='cq-container margin-top--5 padding-left-10 divider-y-1 divider-color-lighter divider-style-solid'>
+        {roles.map(({ role, dashboardUrl, apiUrl }, index) => (
+            <div
+                key={role}
+                className={`
+                        display-flex flex-column cq-600:flex-row column-gap-25 row-gap-5 padding-y-10 padding-left-10 padding-right-15 hover-bg-highlight-decent
+                        ${index === 0 ? 'rounded-top' : ''} ${index === (roles.length - 1) ? 'rounded-bottom' : ''}`}
+            >
+                <div className='flex-1-1'>
+                    <div className='text-medium text-color-darker'>{role}</div>
+                    <div className='text-color-dark'>{generateDummyText()}</div>
+                </div>
+                <div className='flex-0 display-flex align-items-center padding-y-5 cq-600:padding-y-0'>
+                    <a href={dashboardUrl} className='link margin-right-5'>
+                        Fleet dashboard
+                    </a>
+                    <Divider className='height-20' vertical />
+                    <a href={apiUrl} className='link margin-left-5'>
+                        API access
+                    </a>
+                </div>
+            </div>
+        ))}
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="padding-15">
+    <ul class="expander-list list-group rounded border">
+        <li class="list-group-item expandable">
+            <div class="expander-list-header" aria-label="expander item header">
+                <span class="expander-list-header-content">
+                    <div class="padding-y-5 display-flex gap-10">
+                        <div>
+                            <span class="rioglyph rioglyph-building text-size-18 text-color-primary">
+                            </span>
+                        </div>
+                        <div>
+                            <div class="text-color-primary text-medium">Warehouse EU-Central</div>
+                            <div class="text-color-gray text-size-12">#458712839104 | eu-central-warehouse@logistics.cloud</div>
+                        </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">
+                    <div class="padding-y-5 display-flex gap-10">
+                        <div>
+                            <span class="rioglyph rioglyph-building text-size-18 text-color-primary">
+                            </span>
+                        </div>
+                        <div>
+                            <div class="text-color-primary text-medium">Distribution hub west</div>
+                            <div class="Divider position-relative" style="padding-left: 15px; padding-right: 15px;">
+                                <div class="divider-line bg-light" style="width: 1px; height: 100%;">
+                                </div>
+                            </div>
+                            <div class="text-color-gray text-size-12">#778944220011 | delivery-north-team@logistics.cloud</div>
+                        </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">
+                    <div class="padding-y-5 display-flex gap-10">
+                        <div>
+                            <span class="rioglyph rioglyph-factory text-size-18 text-color-primary">
+                            </span>
+                        </div>
+                        <div>
+                            <div class="text-color-primary text-medium">Local delivery north</div>
+                            <div class="text-color-gray text-size-12">#778944220011 | delivery-north-team@logistics.cloud</div>
+                        </div>
+                    </div>
+                </span>
+                <span class="expander-icon rioglyph rioglyph-chevron-down">
+                </span>
+            </div>
+        </li>
+    </ul>
+</div>
+```