@rio-cloud/uikit-mcp 1.1.7 → 1.1.8

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

@@ -1,228 +0,0 @@
-# Expandable details
-
-*Category:* Templates
-*Section:* Content
-*Source:* https://uikit.developers.rio.cloud/#/templates/expandable-details
-*Captured:* 2026-02-23T15:49:32.869Z
-
-## 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
-
-#### Summary
-
-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 = () => {
-    return (
-        <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>
-```