npm - @rio-cloud/uikit-mcp - Versions diffs - 1.0.0 - Mend

@rio-cloud/uikit-mcp 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (198) hide show

package/data/pages/Templates/templates/common-table.json ADDED Viewed

@@ -0,0 +1,39 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:33.291Z",
+    "source": "https://uikit.developers.rio.cloud/#templates/common-table",
+    "category": "Templates",
+    "section": "Tables",
+    "slug": "templates/common-table",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "a70927bd1d276da8245b50f837340336f7a0f58f020d373635802b25e8d7deeb"
+  },
+  "title": "Common table",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Common table",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Label",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"table-toolbar\"><div class=\"table-toolbar-container\"><div class=\"table-toolbar-group-left\"><div class=\"table-toolbar-column\"><div class=\"display-grid grid-cols-3 display-flex-ls btn-toolbar\"><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-plus\"></span>New</button><div class=\"dropdown btn-group\"><button type=\"button\" id=\"myActionButton\" class=\"btn btn-default btn-md btn-component dropdown-toggle\" tabindex=\"0\">Button<span class=\"caret\"></span></button></div></div></div></div><div class=\"table-toolbar-group-right\"><div class=\"table-toolbar-column\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-filter\"></span>Filter</button></div><div class=\"table-toolbar-column table-toolbar-column-spacer\"><div class=\"table-toolbar-search input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-search\"></span></span><div class=\"ClearableInput input-group\"><input placeholder=\"Search in table\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div></div><div class=\"table-toolbar-column display-flex flex-row align-items-end gap-15\"><div><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 table-toolbar-label\">Label</div><div class=\"TableViewToggles btn-group display-flex flex-row\"><button class=\"btn btn-default btn-icon-only active\" type=\"button\"><span class=\"rioglyph rioglyph-table-view\"></span></button><button class=\"btn btn-default btn-icon-only\" type=\"button\"><span class=\"rioglyph rioglyph-th-list\"></span></button><button class=\"btn btn-default btn-icon-only\" type=\"button\"><span class=\"rioglyph rioglyph-split-view\"></span></button></div></div><button type=\"button\" class=\"btn btn-default btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-settings\"></span></button></div></div></div></div><div class=\"table-responsive\"><table class=\"table table-layout-fixed table-column-overflow-hidden table-bordered table-sticky table-head-filled\"><colgroup><col class=\"\" style=\"min-width: 60px; width: 60px;\"><col class=\"\" style=\"min-width: 200px; width: 200px;\"><col class=\"\"><col class=\"\"><col class=\"\"><col class=\"table-action\"></colgroup><thead><tr><th class=\"user-select-none sort-column\" data-field=\"vehicleId\" data-sortby=\"vehicleId\" title=\"Id\"><span><span class=\"sort-arrows sort-asc\"></span><span>Id</span></span></th><th class=\"user-select-none sort-column\" data-field=\"name\" data-sortby=\"name\" title=\"Name\"><span><span class=\"sort-arrows \"></span><span>Name</span></span></th><th class=\"user-select-none sort-column\" data-field=\"vin\" data-sortby=\"vin\" title=\"VIN\"><span><span class=\"sort-arrows \"></span><span>VIN</span></span></th><th class=\"user-select-none sort-column\" data-field=\"status\" data-sortby=\"status\" title=\"Status\"><span><span class=\"sort-arrows \"></span><span>Status</span></span></th><th class=\"user-select-none sort-column\" data-field=\"duration\" data-sortby=\"duration\" title=\"Duration\"><span><span class=\"sort-arrows \"></span><span>Duration</span></span></th><th class=\"user-select-none sort-column table-action\" title=\"\"></th></tr></thead><tbody><tr data-id=\"233\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>233</span></td><td data-field=\"Name\"><span>Ipsum</span></td><td data-field=\"VIN\"><span><span class=\"NoData\"><span class=\"pointer-events-none user-select-none\">No data</span></span></span></td><td data-field=\"Status\"><span>Inactive</span></td><td data-field=\"Duration\"><span>5h 15m</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"cj8wrwcq4so\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\"><span class=\"rioglyph rioglyph-option-vertical\"></span></button></div></span></td></tr><tr data-id=\"456\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>456</span></td><td data-field=\"Name\"><span><span class=\"NoData\"><span class=\"pointer-events-none user-select-none\">No data</span></span></span></td><td data-field=\"VIN\"><span>456</span></td><td data-field=\"Status\"><span>Active</span></td><td data-field=\"Duration\"><span>4h 55m</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"9np54wyj17r\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\"><span class=\"rioglyph rioglyph-option-vertical\"></span></button></div></span></td></tr><tr data-id=\"878\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>878</span></td><td data-field=\"Name\"><span><span class=\"NoData\"><span class=\"pointer-events-none user-select-none\">No data</span></span></span></td><td data-field=\"VIN\"><span>878</span></td><td data-field=\"Status\"><span>Active</span></td><td data-field=\"Duration\"><span>9h 10m</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"ajd2zsy2kfi\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\"><span class=\"rioglyph rioglyph-option-vertical\"></span></button></div></span></td></tr><tr data-id=\"895\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>895</span></td><td data-field=\"Name\"><span><span class=\"NoData\"><span class=\"pointer-events-none user-select-none\">No data</span></span></span></td><td data-field=\"VIN\"><span>895</span></td><td data-field=\"Status\"><span>Active</span></td><td data-field=\"Duration\"><span>8h 45m</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"rcatqmu0dcf\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\"><span class=\"rioglyph rioglyph-option-vertical\"></span></button></div></span></td></tr><tr data-id=\"978\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>978</span></td><td data-field=\"Name\"><span>Ipsum</span></td><td data-field=\"VIN\"><span><span class=\"NoData\"><span class=\"pointer-events-none user-select-none\">No data</span></span></span></td><td data-field=\"Status\"><span>Inactive</span></td><td data-field=\"Duration\"><span>6h 35m</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"b4j7fdlkb89\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\"><span class=\"rioglyph rioglyph-option-vertical\"></span></button></div></span></td></tr><tr data-id=\"2345\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>2345</span></td><td data-field=\"Name\"><span>Lorem</span></td><td data-field=\"VIN\"><span>2345</span></td><td data-field=\"Status\"><span>Active</span></td><td data-field=\"Duration\"><span>11h 50m</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"e9nae611mnu\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\"><span class=\"rioglyph rioglyph-option-vertical\"></span></button></div></span></td></tr><tr data-id=\"2445\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>2445</span></td><td data-field=\"Name\"><span><span class=\"NoData\"><span class=\"pointer-events-none user-select-none\">No data</span></span></span></td><td data-field=\"VIN\"><span>2445</span></td><td data-field=\"Status\"><span>Active</span></td><td data-field=\"Duration\"><span>7h 25m</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"p604umf0u3q\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\"><span class=\"rioglyph rioglyph-option-vertical\"></span></button></div></span></td></tr><tr data-id=\"3456\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>3456</span></td><td data-field=\"Name\"><span><span class=\"NoData\"><span class=\"pointer-events-none user-select-none\">No data</span></span></span></td><td data-field=\"VIN\"><span>3456</span></td><td data-field=\"Status\"><span>Active</span></td><td data-field=\"Duration\"><span>12h 00m</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"5ta3wsczs8g\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\"><span class=\"rioglyph rioglyph-option-vertical\"></span></button></div></span></td></tr><tr data-id=\"4567\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>4567</span></td><td data-field=\"Name\"><span><span class=\"NoData\"><span class=\"pointer-events-none user-select-none\">No data</span></span></span></td><td data-field=\"VIN\"><span>4567</span></td><td data-field=\"Status\"><span>Active</span></td><td data-field=\"Duration\"><span>10h 20m</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"opi8nol3mxm\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\"><span class=\"rioglyph rioglyph-option-vertical\"></span></button></div></span></td></tr><tr data-id=\"7354\" class=\"cursor-pointer\"><td data-field=\"Id\"><span>7354</span></td><td data-field=\"Name\"><span>Lorem</span></td><td data-field=\"VIN\"><span>7354</span></td><td data-field=\"Status\"><span>Active</span></td><td data-field=\"Duration\"><span>10h 30m</span></td><td class=\"table-action\"><span><div class=\"dropdown btn-group\"><button type=\"button\" id=\"01j4qrxcaeda\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\"><span class=\"rioglyph rioglyph-option-vertical\"></span></button></div></span></td></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr><tr class=\"table-card-placeholder\"></tr></tbody></table></div><div class=\"LoadMoreButton align-items-center display-flex justify-content-center margin-top-25 margin-bottom-25 non-printable\"><div class=\"min-width-150\"><div class=\"text-center margin-bottom-3\"><span class=\"text-medium\">70</span><span class=\"margin-left-5 margin-right-5\">/</span><span class=\"text-medium\">100</span></div><div class=\"progress height-2 margin-bottom-10 bg-white\"><div class=\"progress-bar\" style=\"width: 70%;\"></div></div><div class=\"display-flex justify-content-center\"><button class=\"btn btn-link padding-right-20 margin-top--5\" type=\"button\"><span class=\"rioglyph rioglyph-arrow-down\"></span>Load more</button></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useEffect, useMemo, useState } from 'react';\nimport omit from 'lodash/fp/omit';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport classNames from 'classnames';\n\nimport TableToolbar from '@rio-cloud/rio-uikit/TableToolbar';\nimport TableViewToggles, { type TableViewTogglesViewType } from '@rio-cloud/rio-uikit/TableViewToggles';\nimport TableSearch from '@rio-cloud/rio-uikit/TableSearch';\nimport TableCardsSorting from '@rio-cloud/rio-uikit/TableCardsSorting';\nimport TableSettingsDialog from '@rio-cloud/rio-uikit/TableSettingsDialog';\nimport type { SortDirectionType } from '@rio-cloud/rio-uikit/SortDirection';\nimport ButtonDropdown from '@rio-cloud/rio-uikit/ButtonDropdown';\nimport NotFoundState from '@rio-cloud/rio-uikit/NotFoundState';\nimport NoData from '@rio-cloud/rio-uikit/NoData';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport useSorting from '@rio-cloud/rio-uikit/useSorting';\nimport useTableSelection from '@rio-cloud/rio-uikit/useTableSelection';\nimport TableCol from '@rio-cloud/rio-uikit/TableCol';\nimport TableHead from '@rio-cloud/rio-uikit/TableHead';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\nimport LoadMoreButton from '@rio-cloud/rio-uikit/LoadMoreButton';\nimport ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';\nimport Checkbox from '@rio-cloud/rio-uikit/Checkbox';\nimport Dialog from '@rio-cloud/rio-uikit/Dialog';\n\nconst defaultColumnOrder = ['vehicleId', 'name', 'vin', 'status', 'duration'];\nconst disabledColumns = ['vin'];\n\ntype ColumnLabel = { [key: string]: string };\n\nconst columnLabels: ColumnLabel = {\n    vehicleId: 'Id',\n    name: 'Name',\n    vin: 'VIN',\n    status: 'Status',\n    duration: 'Duration',\n};\n\ntype ColumnDetails = {\n    [key: string]: number;\n};\n\ntype ColumnDetailsMap = {\n    [key: string]: ColumnDetails;\n};\n\nconst demoColumnsDetails: ColumnDetailsMap = {\n    vehicleId: {\n        width: 60,\n        defaultWidth: 60,\n        maxWidth: 300,\n    },\n    name: {\n        width: 200,\n        defaultWidth: 200,\n        maxWidth: 350,\n    },\n    // Note: 0 means auto width\n    vin: {\n        width: 0,\n        defaultWidth: 0,\n        maxWidth: 350,\n    },\n    status: {\n        // Not defined as it will be defined when its used\n        // width: 350,\n        // defaultWidth: 0,\n    },\n};\n\ntype Vehicle = {\n    vehicleId: number;\n    name: string | null;\n    vin: string | null;\n    status: string;\n    duration: string;\n};\n\nconst vehicleList: Vehicle[] = [\n    {\n        vehicleId: 7354,\n        name: 'Lorem',\n        vin: '7354',\n        status: 'Active',\n        duration: '10h 30m',\n    },\n    {\n        vehicleId: 233,\n        name: 'Ipsum',\n        vin: null,\n        status: 'Inactive',\n        duration: '5h 15m',\n    },\n    {\n        vehicleId: 895,\n        name: null,\n        vin: '895',\n        status: 'Active',\n        duration: '8h 45m',\n    },\n    {\n        vehicleId: 3456,\n        name: null,\n        vin: '3456',\n        status: 'Active',\n        duration: '12h 00m',\n    },\n    {\n        vehicleId: 2445,\n        name: null,\n        vin: '2445',\n        status: 'Active',\n        duration: '7h 25m',\n    },\n    {\n        vehicleId: 878,\n        name: null,\n        vin: '878',\n        status: 'Active',\n        duration: '9h 10m',\n    },\n    {\n        vehicleId: 2345,\n        name: 'Lorem',\n        vin: '2345',\n        status: 'Active',\n        duration: '11h 50m',\n    },\n    {\n        vehicleId: 978,\n        name: 'Ipsum',\n        vin: null,\n        status: 'Inactive',\n        duration: '6h 35m',\n    },\n    {\n        vehicleId: 456,\n        name: null,\n        vin: '456',\n        status: 'Active',\n        duration: '4h 55m',\n    },\n    {\n        vehicleId: 4567,\n        name: null,\n        vin: '4567',\n        status: 'Active',\n        duration: '10h 20m',\n    },\n];\n\nconst dummyActionOptions = [\n    { value: 'Option 1', onSelect: () => {} },\n    { value: 'Option 2', onSelect: () => {} },\n    { value: 'Option 3', onSelect: () => {} },\n    { divider: true },\n    { value: 'Option 4', onSelect: () => {}, disabled: true },\n];\n\nexport type TableCommonDemoProps = {\n    viewType: TableViewTogglesViewType;\n};\n\nconst TableCommonDemo = (props: TableCommonDemoProps) => {\n    const { viewType: externalViewType } = props;\n\n    const [searchValue, setSearchValue] = useState('');\n    const [showTableSettingsDialog, setShowTableSettingsDialog] = useState(false);\n\n    const [showFilterDialog, setShowFilterDialog] = useState(false);\n    const [filter, setFilter] = useState<TableFilterKey[]>([]);\n\n    const [columnOrder, setColumnOrder] = useState<string[]>(defaultColumnOrder);\n    const [hiddenColumns, setHiddenColumns] = useState<string[]>([]);\n    const [columnsDetails, setColumnsDetails] = useState(demoColumnsDetails);\n\n    const [viewType, setViewType] = useState(externalViewType || TableViewToggles.VIEW_TYPE_TABLE);\n\n    const { sortedItems, sortKey, sortDirection, setSortKey, setSortDirection, toggleDirection } = useSorting(\n        vehicleList,\n        'vehicleId'\n    );\n\n    const { tableRef, updateRowSelection, activeRowId, onActiveRowChange } = useTableSelection<Vehicle>({\n        tableData: vehicleList,\n        idKey: 'vehicleId' as keyof Vehicle, // Specify the unique identifier key\n    });\n\n    // console.log({ activeRowId });\n\n    // When the search value changes and hence the rendered rows, update the highlighting and selection\n    useEffect(() => updateRowSelection(), [searchValue]);\n\n    const handleToggleTableSettingsDialog = () => setShowTableSettingsDialog(!showTableSettingsDialog);\n    const handleViewTypeChange = (newViewType: TableViewTogglesViewType) => setViewType(newViewType);\n    const handleSearchValueChange = (newSearchValue: string) => setSearchValue(newSearchValue);\n\n    const handleColumnChange = (\n        newColumnOrder: string[],\n        newHiddenColumns: string[],\n        newColumnsDetails = columnsDetails\n    ) => {\n        setColumnOrder(newColumnOrder);\n        setHiddenColumns(newHiddenColumns);\n        setColumnsDetails(newColumnsDetails);\n    };\n\n    // For immediate effect\n    const handleColumnDetailsChange = (column: string, newColumnDetails: ColumnDetails) => {\n        const updatedColumnsDetails = { ...columnsDetails };\n        updatedColumnsDetails[column] = newColumnDetails;\n        setColumnsDetails(updatedColumnsDetails);\n    };\n\n    const handleSortChange = (event: React.MouseEvent<HTMLTableCellElement>) => {\n        const newSortBy = event.currentTarget.getAttribute('data-sortby');\n        if (newSortBy) {\n            setSortKey(newSortBy as keyof Vehicle);\n        }\n        if (newSortBy === sortKey) {\n            toggleDirection();\n        }\n    };\n\n    const handleCardSortChange = (newSortBy: string, newSortDir: SortDirectionType) => {\n        setSortKey(newSortBy as keyof Vehicle);\n        setSortDirection(newSortDir);\n    };\n\n    // Filter for hidden columns\n    const columns = columnOrder.filter(name => !hiddenColumns.includes(name));\n\n    // Filter data to omit hidden columns\n    const withoutHidden = omit(hiddenColumns);\n    const filteredRows = sortedItems.map(vehicle => ({ ...withoutHidden(vehicle) })) as Vehicle[];\n\n    // In case a search value is given, filter the data accordingly\n    const searchResult = useMemo(() => {\n        if (!searchValue) {\n            return filteredRows;\n        }\n        return filteredRows.filter((row: Partial<Vehicle>) =>\n            columns.some(col => {\n                const value = row[col as keyof Vehicle];\n                if (value == null) {\n                    return false;\n                }\n                return String(value).toLowerCase().includes(searchValue.toLowerCase());\n            })\n        );\n    }, [searchValue, filteredRows, columns]);\n\n    // Filter according to filter dialog settings\n    const rows = useMemo(() => applyFilter(searchResult, filter), [searchResult, filter]);\n\n    const tableClassNames = classNames(\n        'table',\n        'table-layout-fixed',\n        'table-column-overflow-hidden',\n        'table-bordered',\n        'table-sticky',\n        'table-head-filled',\n        viewType === TableViewToggles.VIEW_TYPE_SINGLE_CARD && 'table-cards table-single-card',\n        viewType === TableViewToggles.VIEW_TYPE_MULTI_CARDS && 'table-cards table-multi-cards'\n    );\n\n    const isViewTypeTable = viewType === TableViewToggles.VIEW_TYPE_TABLE;\n\n    const cardSortingSelectOptions = columns.map(column => {\n        return {\n            id: column,\n            label: columnLabels[column],\n            selected: column === sortKey,\n            disabled: false,\n        };\n    });\n\n    return (\n        <div>\n            <TableToolbar>\n                <div className='table-toolbar-container'>\n                    <div className='table-toolbar-group-left'>\n                        <div className='table-toolbar-column'>\n                            <ButtonToolbar className='display-grid grid-cols-3 display-flex-ls'>\n                                <Button bsStyle={Button.PRIMARY} iconName='rioglyph-plus'>\n                                    New\n                                </Button>\n                                <ButtonDropdown id='myActionButton' title='Button' items={dummyActionOptions} />\n                            </ButtonToolbar>\n                        </div>\n                    </div>\n                    <div className='table-toolbar-group-right'>\n                        <div className='table-toolbar-column'>\n                            <Button\n                                iconName={isEmpty(filter) ? 'rioglyph-filter' : 'rioglyph-filter-active'}\n                                onClick={() => setShowFilterDialog(true)}\n                            >\n                                Filter\n                            </Button>\n                            <TableFilterDialog\n                                show={showFilterDialog}\n                                onClose={() => setShowFilterDialog(false)}\n                                filter={filter}\n                                onSetFilter={setFilter}\n                            />\n                        </div>\n                        <div className='table-toolbar-column table-toolbar-column-spacer'>\n                            <TableSearch\n                                value={searchValue}\n                                onChange={handleSearchValueChange}\n                                placeholder='Search in table'\n                            />\n                        </div>\n                        <div className='table-toolbar-column display-flex flex-row align-items-end gap-15'>\n                            <div>\n                                <FormLabel className='table-toolbar-label'>Label</FormLabel>\n                                <TableViewToggles\n                                    initialViewType={viewType}\n                                    onViewTypeChange={handleViewTypeChange}\n                                    tableViewTooltipContent='Table view'\n                                    singleCardViewTooltipContent='List view'\n                                    multiCardsViewTooltipContent='Cards view'\n                                />\n                            </div>\n                            <Button iconOnly iconName='rioglyph-settings' onClick={handleToggleTableSettingsDialog} />\n                        </div>\n                    </div>\n                    {showTableSettingsDialog && (\n                        <TableSettingsDialog\n                            show={showTableSettingsDialog}\n                            title='Table settings'\n                            onHide={handleToggleTableSettingsDialog}\n                            onColumnChange={handleColumnChange}\n                            defaultColumnOrder={defaultColumnOrder}\n                            defaultHiddenColumns={[]}\n                            columnOrder={columnOrder}\n                            hiddenColumns={hiddenColumns}\n                            columnLabels={columnLabels}\n                            disabledColumns={disabledColumns}\n                            closeButtonText='Close'\n                            resetButtonText='Reset to default'\n                            searchPlaceholder='Search by column name'\n                            notFoundMessage='No column found for this search value'\n                            columnsDetails={columnsDetails}\n                            autoLabel='Auto'\n                            onColumnDetailsChange={handleColumnDetailsChange}\n                            onSearchChange={(val: string) => console.log(val)}\n                            immediateChange\n                        />\n                    )}\n                </div>\n            </TableToolbar>\n            {sortKey && !isViewTypeTable && (\n                <TableCardsSorting\n                    selectOptions={cardSortingSelectOptions}\n                    sortName={sortKey as string}\n                    sortOrder={sortDirection}\n                    onSortChange={handleCardSortChange}\n                />\n            )}\n            <div className='table-responsive'>\n                {isEmpty(rows) && !isViewTypeTable && (\n                    <NotFoundState headline='Nothing found' message='Please refine your search' />\n                )}\n                <table ref={tableRef} className={tableClassNames}>\n                    <colgroup>\n                        {columns.map(column => (\n                            <TableCol key={column} columnDetails={columnsDetails[column]} />\n                        ))}\n                        <TableCol className='table-action' />\n                    </colgroup>\n                    <thead>\n                        <tr>\n                            {columns.map(column => (\n                                <TableHead\n                                    key={column}\n                                    label={columnLabels[column]}\n                                    column={column}\n                                    sortBy={sortKey as string}\n                                    sortDir={sortDirection}\n                                    onClick={handleSortChange}\n                                />\n                            ))}\n                            <TableHead className='table-action' />\n                        </tr>\n                    </thead>\n                    <tbody>\n                        {isEmpty(rows) && isViewTypeTable && (\n                            <tr>\n                                <td colSpan={columns.length + 1}>\n                                    <NotFoundState\n                                        outerClassName='border-none'\n                                        headline='Nothing found'\n                                        message='Please refine your search'\n                                    />\n                                </td>\n                            </tr>\n                        )}\n                        {rows.map(row => (\n                            <tr\n                                key={row.vehicleId}\n                                data-id={row.vehicleId}\n                                onClick={onActiveRowChange}\n                                className='cursor-pointer'\n                            >\n                                {columns.map(col => {\n                                    const item = row[col as keyof Vehicle] ?? <NoData text='No data' />;\n                                    return (\n                                        <td key={col} data-field={columnLabels[col]}>\n                                            <span>{item}</span>\n                                        </td>\n                                    );\n                                })}\n                                <td className='table-action'>\n                                    <DummyRowDropdown />\n                                </td>\n                            </tr>\n                        ))}\n                        {/* Placeholder workaround for equal with cards of the last row */}\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                        <tr className='table-card-placeholder' />\n                    </tbody>\n                </table>\n            </div>\n            <LoadMoreButton\n                loaded={70}\n                total={100}\n                onLoadMore={() => {}}\n                loadMoreMessage='Load more'\n                noMoreMessage='Everything loaded'\n            />\n        </div>\n    );\n};\n\nconst DummyRowDropdown = () => (\n    <span>\n        <ButtonDropdown\n            title={<span className='rioglyph rioglyph-option-vertical' />}\n            variant='link'\n            iconOnly\n            items={[\n                {\n                    value: (\n                        <div className='display-flex align-items-center gap-10'>\n                            <span className='rioglyph rioglyph-pencil' />\n                            <span>Edit</span>\n                        </div>\n                    ),\n                },\n                {\n                    value: (\n                        <div className='display-flex align-items-center gap-10'>\n                            <span className='rioglyph rioglyph-duplicate' />\n                            <span>Duplicate</span>\n                        </div>\n                    ),\n                },\n                {\n                    value: (\n                        <div className='display-flex align-items-center gap-10'>\n                            <span className='rioglyph rioglyph-trash' />\n                            <span>Delete</span>\n                        </div>\n                    ),\n                },\n            ]}\n        />\n    </span>\n);\n\nconst FILTER_KAY_MISSING_VIN = 'missingVin';\ntype TableFilterKey = typeof FILTER_KAY_MISSING_VIN;\n\nconst TABLE_FILTERS: Record<TableFilterKey, { label: string }> = {\n    missingVin: { label: 'Hide items without VIN' },\n};\n\nconst applyFilter = (items: Vehicle[], filter: string[]) => {\n    const filterSet = new Set(filter);\n\n    return items.filter(item => {\n        // If 'missingVin' is in the filter set, keep only items with a VIN (!!item.vin is true).\n        // If 'missingVin' is NOT in the filter set, this specific condition doesn't remove the item.\n        if (filterSet.has(FILTER_KAY_MISSING_VIN) && !item.vin) {\n            return false; // Hide items without VIN if filter is active\n        }\n        // Add more filter conditions here as needed.\n        // If no active filter criteria cause the item to be excluded, keep it.\n        return true;\n    });\n};\n\nconst TableFilterDialog = (props: {\n    show: boolean;\n    onClose: VoidFunction;\n    filter: TableFilterKey[];\n    onSetFilter: (filter: TableFilterKey[]) => void;\n}) => {\n    const { show, onClose, filter, onSetFilter } = props;\n\n    const filterSet = new Set(filter);\n\n    const toggleFilter = (key: TableFilterKey) => {\n        const newFilter = new Set(filter);\n        if (newFilter.has(key)) {\n            newFilter.delete(key);\n        } else {\n            newFilter.add(key);\n        }\n        onSetFilter(Array.from(newFilter));\n    };\n\n    return (\n        <Dialog\n            show={show}\n            bsSize='sm'\n            onClose={onClose}\n            title='Table filter'\n            body={\n                <div>\n                    <fieldset className='margin-bottom-25'>\n                        <legend>Vehicle properties</legend>\n                        <div className='display-flex flex-column gap-10'>\n                            {Object.entries(TABLE_FILTERS).map(([key, { label }]) => (\n                                <Checkbox\n                                    key={key}\n                                    checked={filterSet.has(key as TableFilterKey)}\n                                    onChange={() => toggleFilter(key as TableFilterKey)}\n                                    className='user-select-none'\n                                >\n                                    {label}\n                                </Checkbox>\n                            ))}\n                            <Checkbox disabled>Lorem ipsum dolor</Checkbox>\n                            <Checkbox disabled>Dolor sit amet</Checkbox>\n                        </div>\n                    </fieldset>\n                    <fieldset>\n                        <legend>More filter options</legend>\n                        <div className='display-flex flex-column gap-10'>\n                            <Checkbox disabled>Lorem ipsum dolor</Checkbox>\n                            <Checkbox disabled>Dolor sit amet</Checkbox>\n                        </div>\n                    </fieldset>\n                </div>\n            }\n            footer={\n                <div className='btn-toolbar'>\n                    <Button onClick={onClose}>\n                        <span>Close</span>\n                    </Button>\n                </div>\n            }\n        />\n    );\n};\n\nexport default TableCommonDemo;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"table-toolbar\">\n        <div class=\"table-toolbar-container\">\n            <div class=\"table-toolbar-group-left\">\n                <div class=\"table-toolbar-column\">\n                    <div class=\"display-grid grid-cols-3 display-flex-ls btn-toolbar\">\n                        <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">\n                            <span class=\"rioglyph rioglyph-plus\">\n                            </span>New</button>\n                        <div class=\"dropdown btn-group\">\n                            <button type=\"button\" id=\"myActionButton\" class=\"btn btn-default btn-md btn-component dropdown-toggle\" tabindex=\"0\">Button<span class=\"caret\">\n                                </span>\n                            </button>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"table-toolbar-group-right\">\n                <div class=\"table-toolbar-column\">\n                    <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-filter\">\n                        </span>Filter</button>\n                </div>\n                <div class=\"table-toolbar-column table-toolbar-column-spacer\">\n                    <div class=\"table-toolbar-search input-group\">\n                        <span class=\"input-group-addon\">\n                            <span class=\"rioglyph rioglyph-search\">\n                            </span>\n                        </span>\n                        <div class=\"ClearableInput input-group\">\n                            <input placeholder=\"Search in table\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\">\n                            <span class=\"clearButton hide\">\n                                <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"table-toolbar-column display-flex flex-row align-items-end gap-15\">\n                    <div>\n                        <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 table-toolbar-label\">Label</div>\n                        <div class=\"TableViewToggles btn-group display-flex flex-row\">\n                            <button class=\"btn btn-default btn-icon-only active\" type=\"button\">\n                                <span class=\"rioglyph rioglyph-table-view\">\n                                </span>\n                            </button>\n                            <button class=\"btn btn-default btn-icon-only\" type=\"button\">\n                                <span class=\"rioglyph rioglyph-th-list\">\n                                </span>\n                            </button>\n                            <button class=\"btn btn-default btn-icon-only\" type=\"button\">\n                                <span class=\"rioglyph rioglyph-split-view\">\n                                </span>\n                            </button>\n                        </div>\n                    </div>\n                    <button type=\"button\" class=\"btn btn-default btn-icon-only btn-component\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-settings\">\n                        </span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"table-responsive\">\n        <table class=\"table table-layout-fixed table-column-overflow-hidden table-bordered table-sticky table-head-filled\">\n            <colgroup>\n                <col class=\"\" style=\"min-width: 60px; width: 60px;\">\n                <col class=\"\" style=\"min-width: 200px; width: 200px;\">\n                <col class=\"\">\n                <col class=\"\">\n                <col class=\"\">\n                <col class=\"table-action\">\n            </colgroup>\n            <thead>\n                <tr>\n                    <th class=\"user-select-none sort-column\" data-field=\"vehicleId\" data-sortby=\"vehicleId\" title=\"Id\">\n                        <span>\n                            <span class=\"sort-arrows sort-asc\">\n                            </span>\n                            <span>Id</span>\n                        </span>\n                    </th>\n                    <th class=\"user-select-none sort-column\" data-field=\"name\" data-sortby=\"name\" title=\"Name\">\n                        <span>\n                            <span class=\"sort-arrows \">\n                            </span>\n                            <span>Name</span>\n                        </span>\n                    </th>\n                    <th class=\"user-select-none sort-column\" data-field=\"vin\" data-sortby=\"vin\" title=\"VIN\">\n                        <span>\n                            <span class=\"sort-arrows \">\n                            </span>\n                            <span>VIN</span>\n                        </span>\n                    </th>\n                    <th class=\"user-select-none sort-column\" data-field=\"status\" data-sortby=\"status\" title=\"Status\">\n                        <span>\n                            <span class=\"sort-arrows \">\n                            </span>\n                            <span>Status</span>\n                        </span>\n                    </th>\n                    <th class=\"user-select-none sort-column\" data-field=\"duration\" data-sortby=\"duration\" title=\"Duration\">\n                        <span>\n                            <span class=\"sort-arrows \">\n                            </span>\n                            <span>Duration</span>\n                        </span>\n                    </th>\n                    <th class=\"user-select-none sort-column table-action\" title=\"\">\n                    </th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr data-id=\"233\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>233</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>Ipsum</span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>\n                            <span class=\"NoData\">\n                                <span class=\"pointer-events-none user-select-none\">No data</span>\n                            </span>\n                        </span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Inactive</span>\n                    </td>\n                    <td data-field=\"Duration\">\n                        <span>5h 15m</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"cj8wrwcq4so\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                                    <span class=\"rioglyph rioglyph-option-vertical\">\n                                    </span>\n                                </button>\n                            </div>\n                        </span>\n                    </td>\n                </tr>\n                <tr data-id=\"456\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>456</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>\n                            <span class=\"NoData\">\n                                <span class=\"pointer-events-none user-select-none\">No data</span>\n                            </span>\n                        </span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>456</span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Active</span>\n                    </td>\n                    <td data-field=\"Duration\">\n                        <span>4h 55m</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"9np54wyj17r\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                                    <span class=\"rioglyph rioglyph-option-vertical\">\n                                    </span>\n                                </button>\n                            </div>\n                        </span>\n                    </td>\n                </tr>\n                <tr data-id=\"878\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>878</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>\n                            <span class=\"NoData\">\n                                <span class=\"pointer-events-none user-select-none\">No data</span>\n                            </span>\n                        </span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>878</span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Active</span>\n                    </td>\n                    <td data-field=\"Duration\">\n                        <span>9h 10m</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"ajd2zsy2kfi\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                                    <span class=\"rioglyph rioglyph-option-vertical\">\n                                    </span>\n                                </button>\n                            </div>\n                        </span>\n                    </td>\n                </tr>\n                <tr data-id=\"895\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>895</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>\n                            <span class=\"NoData\">\n                                <span class=\"pointer-events-none user-select-none\">No data</span>\n                            </span>\n                        </span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>895</span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Active</span>\n                    </td>\n                    <td data-field=\"Duration\">\n                        <span>8h 45m</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"rcatqmu0dcf\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                                    <span class=\"rioglyph rioglyph-option-vertical\">\n                                    </span>\n                                </button>\n                            </div>\n                        </span>\n                    </td>\n                </tr>\n                <tr data-id=\"978\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>978</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>Ipsum</span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>\n                            <span class=\"NoData\">\n                                <span class=\"pointer-events-none user-select-none\">No data</span>\n                            </span>\n                        </span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Inactive</span>\n                    </td>\n                    <td data-field=\"Duration\">\n                        <span>6h 35m</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"b4j7fdlkb89\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                                    <span class=\"rioglyph rioglyph-option-vertical\">\n                                    </span>\n                                </button>\n                            </div>\n                        </span>\n                    </td>\n                </tr>\n                <tr data-id=\"2345\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>2345</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>Lorem</span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>2345</span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Active</span>\n                    </td>\n                    <td data-field=\"Duration\">\n                        <span>11h 50m</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"e9nae611mnu\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                                    <span class=\"rioglyph rioglyph-option-vertical\">\n                                    </span>\n                                </button>\n                            </div>\n                        </span>\n                    </td>\n                </tr>\n                <tr data-id=\"2445\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>2445</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>\n                            <span class=\"NoData\">\n                                <span class=\"pointer-events-none user-select-none\">No data</span>\n                            </span>\n                        </span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>2445</span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Active</span>\n                    </td>\n                    <td data-field=\"Duration\">\n                        <span>7h 25m</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"p604umf0u3q\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                                    <span class=\"rioglyph rioglyph-option-vertical\">\n                                    </span>\n                                </button>\n                            </div>\n                        </span>\n                    </td>\n                </tr>\n                <tr data-id=\"3456\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>3456</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>\n                            <span class=\"NoData\">\n                                <span class=\"pointer-events-none user-select-none\">No data</span>\n                            </span>\n                        </span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>3456</span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Active</span>\n                    </td>\n                    <td data-field=\"Duration\">\n                        <span>12h 00m</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"5ta3wsczs8g\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                                    <span class=\"rioglyph rioglyph-option-vertical\">\n                                    </span>\n                                </button>\n                            </div>\n                        </span>\n                    </td>\n                </tr>\n                <tr data-id=\"4567\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>4567</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>\n                            <span class=\"NoData\">\n                                <span class=\"pointer-events-none user-select-none\">No data</span>\n                            </span>\n                        </span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>4567</span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Active</span>\n                    </td>\n                    <td data-field=\"Duration\">\n                        <span>10h 20m</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"opi8nol3mxm\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                                    <span class=\"rioglyph rioglyph-option-vertical\">\n                                    </span>\n                                </button>\n                            </div>\n                        </span>\n                    </td>\n                </tr>\n                <tr data-id=\"7354\" class=\"cursor-pointer\">\n                    <td data-field=\"Id\">\n                        <span>7354</span>\n                    </td>\n                    <td data-field=\"Name\">\n                        <span>Lorem</span>\n                    </td>\n                    <td data-field=\"VIN\">\n                        <span>7354</span>\n                    </td>\n                    <td data-field=\"Status\">\n                        <span>Active</span>\n                    </td>\n                    <td data-field=\"Duration\">\n                        <span>10h 30m</span>\n                    </td>\n                    <td class=\"table-action\">\n                        <span>\n                            <div class=\"dropdown btn-group\">\n                                <button type=\"button\" id=\"01j4qrxcaeda\" class=\"btn btn-default btn-link btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                                    <span class=\"rioglyph rioglyph-option-vertical\">\n                                    </span>\n                                </button>\n                            </div>\n                        </span>\n                    </td>\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n                <tr class=\"table-card-placeholder\">\n                </tr>\n            </tbody>\n        </table>\n    </div>\n    <div class=\"LoadMoreButton align-items-center display-flex justify-content-center margin-top-25 margin-bottom-25 non-printable\">\n        <div class=\"min-width-150\">\n            <div class=\"text-center margin-bottom-3\">\n                <span class=\"text-medium\">70</span>\n                <span class=\"margin-left-5 margin-right-5\">/</span>\n                <span class=\"text-medium\">100</span>\n            </div>\n            <div class=\"progress height-2 margin-bottom-10 bg-white\">\n                <div class=\"progress-bar\" style=\"width: 70%;\">\n                </div>\n            </div>\n            <div class=\"display-flex justify-content-center\">\n                <button class=\"btn btn-link padding-right-20 margin-top--5\" type=\"button\">\n                    <span class=\"rioglyph rioglyph-arrow-down\">\n                    </span>Load more</button>\n            </div>\n        </div>\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Templates/templates/detail-views.json ADDED Viewed

@@ -0,0 +1,71 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:26.750Z",
+    "source": "https://uikit.developers.rio.cloud/#templates/detail-views",
+    "category": "Templates",
+    "section": "Content",
+    "slug": "templates/detail-views",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "dfff85c965eb76a1f97f65caae9248f1f1ade3ff7887ca7337559837e584f8ca"
+  },
+  "title": "Detail views",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Detail views",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Coordinates",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"margin-auto border border-top-none border-bottom-none max-width-400\"><div class=\"bg-white\"><section class=\"padding-x-20\"><div class=\"flex-1-1 padding-top-10\"><div class=\"display-flex\"><div class=\"flex-1-1 display-flex gap-10\"><div><span class=\"rioglyph rioglyph-filling-e-station text-size-18\"></span></div><div><div class=\"text-medium text-size-18 line-height-125rel\">VoltPoint</div><div class=\"margin-left-20--\"><div>Isarweg 22, 81830 München</div><div class=\"LabeledElement display-flex flex-column margin-top-15\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0\">Coordinates</div><div class=\"display-flex gap-3 align-items-center\"><span class=\"rioglyph rioglyph-map-marker text-color-dark\"></span><div>51.339695, 12.373075</div></div></div><div class=\"margin-top-15 display-flex gap-25 flex-wrap\"><div class=\"LabeledElement display-flex flex-column\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0\">Network operator</div><div class=\"display-flex gap-3 align-items-center\"><span class=\"rioglyph rioglyph-building text-color-dark\"></span><div>EnerCharge GmbH</div></div></div><div class=\"LabeledElement display-flex flex-column\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0\">Support contact</div><div class=\"display-flex gap-3 align-items-center\"><span class=\"rioglyph rioglyph-earphone text-color-dark\"></span><div>089 9876543</div></div></div></div></div></div></div><div><div class=\"dropdown btn-group\"><button type=\"button\" id=\"7czzgh1t915\" class=\"btn btn-default btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\"><span class=\"rioglyph rioglyph-option-horizontal\" aria-hidden=\"true\"></span></button></div></div></div></div></section><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 25px; padding-bottom: 25px;\"><div class=\"divider-line bg-lighter\" style=\"width: 100%; height: 1px;\"></div></div><section class=\"padding-x-20 display-flex flex-column\"><div class=\"text-size-14 text-medium text-color-darkest padding-bottom-10\">Additional information</div><div class=\"padding-15 bg-lightest rounded rounded-large display-flex align-items-start gap-15 text-left text-size-14 margin-bottom-15\"><span class=\"rioglyph rioglyph-stars text-size-300pct text-color-primary\"></span><div><div class=\"text-color-darker text-medium margin-bottom-3\">Boost your experience</div><div class=\"text-color-darker\">Book <a href=\"#\" class=\"text-medium\">Lorem Ipsum</a> to get more information, advanced settings and preferred prices.</div></div></div><div class=\"expander-panel panel panel-default margin-bottom-5\" aria-label=\"expander panel\"><div class=\"panel-heading\" aria-label=\"panel heading\"><span class=\"title\">Prices</span><span class=\"expander-icon rioglyph rioglyph-chevron-down\"></span></div></div><div class=\"expander-panel panel panel-default margin-bottom-0\" aria-label=\"expander panel\"><div class=\"panel-heading\" aria-label=\"panel heading\"><span class=\"title\">Opening hours</span><span class=\"expander-icon rioglyph rioglyph-chevron-down\"></span></div></div></section><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 25px; padding-bottom: 25px;\"><div class=\"divider-line bg-lighter\" style=\"width: 100%; height: 1px;\"></div></div><section class=\"padding-x-20 display-flex flex-column\"><ul class=\"nav nav-pills nav-pills-filled- nav-justified nav-justified-word-wrap margin-bottom-15\"><li class=\"active\"><span>Connectors</span></li><li class=\"\"><span>Amenities</span></li><li class=\"disabled\"><span>Vehicle access</span></li></ul><div><div style=\"opacity: 1; transform: none;\"><ul class=\"expander-list list-group rounded border margin-bottom-20\"><li class=\"list-group-item expandable\"><div class=\"expander-list-header padding-y-5\" aria-label=\"expander item header\"><span class=\"expander-list-header-content\"><div class=\"display-flex column-gap-10 justify-content-between padding-right-15 text-medium padding-y-2\"><span>180 kW</span><div class=\"display-flex column-gap-10 align-items-center\"><span class=\"text-color-info\">6/6</span></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 padding-y-5\" aria-label=\"expander item header\"><span class=\"expander-list-header-content\"><div class=\"display-flex column-gap-10 justify-content-between padding-right-15 text-medium padding-y-2\"><span>300 kW</span><div class=\"display-flex column-gap-10 align-items-center\"><span class=\"text-color-info\">3/4</span></div></div></span><span class=\"expander-icon rioglyph rioglyph-chevron-down\"></span></div></li></ul></div></div></section></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport Divider from '@rio-cloud/rio-uikit/Divider';\nimport LabeledElement from '@rio-cloud/rio-uikit/LabeledElement';\nimport ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';\nimport ExpanderList from '@rio-cloud/rio-uikit/ExpanderList';\nimport ButtonDropdown from '@rio-cloud/rio-uikit/ButtonDropdown';\nimport Fade from '@rio-cloud/rio-uikit/Fade';\n\nexport default () => {\n    const [currentTab, setCurrentTab] = useState(1);\n\n    return (\n        <div className='margin-auto border border-top-none border-bottom-none max-width-400'>\n            {/* Actual content comes here */}\n            <div className='bg-white'>\n                {/* Address block */}\n                <section className='padding-x-20'>\n                    <div className='flex-1-1 padding-top-10'>\n                        <div className='display-flex'>\n                            <div className='flex-1-1 display-flex gap-10'>\n                                <div>\n                                    <span className='rioglyph rioglyph-filling-e-station text-size-18' />\n                                </div>\n                                <div>\n                                    <div className='text-medium text-size-18 line-height-125rel'>VoltPoint</div>\n                                    <div className='margin-left-20--'>\n                                        <div>Isarweg 22, 81830 München</div>\n\n                                        <LabeledElement label='Coordinates' className='margin-top-15' noGap>\n                                            <div className='display-flex gap-3 align-items-center'>\n                                                <span className='rioglyph rioglyph-map-marker text-color-dark' />\n                                                <div>51.339695, 12.373075</div>\n                                            </div>\n                                        </LabeledElement>\n\n                                        <div className='margin-top-15 display-flex gap-25 flex-wrap'>\n                                            <LabeledElement label='Network operator' noGap>\n                                                <div className='display-flex gap-3 align-items-center'>\n                                                    <span className='rioglyph rioglyph-building text-color-dark' />\n                                                    <div>EnerCharge GmbH</div>\n                                                </div>\n                                            </LabeledElement>\n                                            <LabeledElement label='Support contact' noGap>\n                                                <div className='display-flex gap-3 align-items-center'>\n                                                    <span className='rioglyph rioglyph-earphone text-color-dark' />\n                                                    <div>089 9876543</div>\n                                                </div>\n                                            </LabeledElement>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div>\n                                <ButtonDropdown\n                                    title={<span className='rioglyph rioglyph-option-horizontal' aria-hidden='true' />}\n                                    items={[\n                                        {\n                                            value: 'Edit',\n                                        },\n                                        {\n                                            value: 'Share',\n                                        },\n                                        {\n                                            value: 'Report issue',\n                                        },\n                                    ]}\n                                    iconOnly\n                                    pullRight\n                                />\n                            </div>\n                        </div>\n                    </div>\n                </section>\n\n                <Divider dividerColor='lighter' spacing={25} />\n\n                {/* Additional information block */}\n                <section className='padding-x-20 display-flex flex-column'>\n                    <div className='text-size-14 text-medium text-color-darkest padding-bottom-10'>\n                        Additional information\n                    </div>\n                    <div className='padding-15 bg-lightest rounded rounded-large display-flex align-items-start gap-15 text-left text-size-14 margin-bottom-15'>\n                        <span className='rioglyph rioglyph-stars text-size-300pct text-color-primary' />\n                        <div>\n                            <div className='text-color-darker text-medium margin-bottom-3'>Boost your experience</div>\n                            <div className='text-color-darker'>\n                                Book{' '}\n                                <a href='#' className='text-medium'>\n                                    Lorem Ipsum\n                                </a>{' '}\n                                to get more information, advanced settings and preferred prices.\n                            </div>\n                        </div>\n                    </div>\n                    <ExpanderPanel className='margin-bottom-5' title='Prices' bsStyle='default'>\n                        <div className='display-grid grid-cols-2 gap-5'>\n                            <div className='text-medium'>AC Charging (Type 2):</div>\n                            <div>€0.39 / kWh</div>\n                            <div className='text-medium'>DC Fast Charging (CCS):</div>\n                            <div>€0.49 / kWh</div>\n                            <div className='text-medium'>Idle Fee:</div>\n                            <div>€0.10 / minute after 30 mins</div>\n                            <div className='text-medium'>Payment Methods:</div>\n                            <div>RFID Card, Mobile App, Credit Card</div>\n                        </div>\n                    </ExpanderPanel>\n                    <ExpanderPanel className='margin-bottom-0' title='Opening hours' bsStyle='default'>\n                        <div className='display-grid grid-cols-2 gap-3'>\n                            <div className='text-medium'>Mon – Fri:</div>\n                            <div>06:00 – 22:00</div>\n                            <div className='text-medium'>Saturday:</div>\n                            <div>08:00 – 20:00</div>\n                            <div className='text-medium'>Sunday:</div>\n                            <div>08:00 – 18:00</div>\n                            <div className='grid-colspan-2 margin-top-10'>\n                                <b>Note:</b> Charging is available 24/7, but on-site support is limited to staffed\n                                hours.\n                            </div>\n                        </div>\n                    </ExpanderPanel>\n                </section>\n\n                <Divider dividerColor='lighter' spacing={25} />\n\n                {/* Sub-content block */}\n                <section className='padding-x-20 display-flex flex-column'>\n                    <ul className='nav nav-pills nav-pills-filled- nav-justified nav-justified-word-wrap margin-bottom-15'>\n                        <li className={currentTab === 1 ? 'active' : ''} onClick={() => setCurrentTab(1)}>\n                            <span>Connectors</span>\n                        </li>\n                        <li className={currentTab === 2 ? 'active' : ''} onClick={() => setCurrentTab(2)}>\n                            <span>Amenities</span>\n                        </li>\n                        <li className='disabled'>\n                            <span>Vehicle access</span>\n                        </li>\n                    </ul>\n                    <div>\n                        <Fade initial={false} exitBeforeEnter>\n                            {currentTab === 1 && (\n                                <ExpanderList\n                                    key='content1'\n                                    className='margin-bottom-20'\n                                    items={[\n                                        {\n                                            id: 1,\n                                            header: (\n                                                <div className='display-flex column-gap-10 justify-content-between padding-right-15 text-medium padding-y-2'>\n                                                    <span>180 kW</span>\n                                                    <div className='display-flex column-gap-10 align-items-center'>\n                                                        <span className='text-color-info'>6/6</span>\n                                                    </div>\n                                                </div>\n                                            ),\n                                            headerClassName: 'padding-y-5',\n                                            body: 'Lorem ipsum',\n                                        },\n                                        {\n                                            id: 2,\n                                            header: (\n                                                <div className='display-flex column-gap-10 justify-content-between padding-right-15 text-medium padding-y-2'>\n                                                    <span>300 kW</span>\n                                                    <div className='display-flex column-gap-10 align-items-center'>\n                                                        <span className='text-color-info'>3/4</span>\n                                                    </div>\n                                                </div>\n                                            ),\n                                            headerClassName: 'padding-y-5',\n                                            body: 'Lorem ipsum',\n                                        },\n                                    ]}\n                                />\n                            )}\n                            {currentTab === 2 && (\n                                <div key='content2' className='display-grid grid-cols-2 gap-10 padding-bottom-15'>\n                                    <div className='display-flex gap-5 padding-y-10 padding-x-15 border rounded'>\n                                        <span className='rioglyph rioglyph-wifi rioglyph-align-top' />\n                                        <div>Free WiFi</div>\n                                    </div>\n                                    <div className='display-flex gap-5 padding-y-10 padding-x-15 border rounded'>\n                                        <span className='rioglyph rioglyph-car-wash rioglyph-align-top' />\n                                        <div>Truck wash</div>\n                                    </div>\n                                    <div className='display-flex gap-5 padding-y-10 padding-x-15 border rounded'>\n                                        <span className='rioglyph rioglyph-trash rioglyph-align-top' />\n                                        <div>Trash disposal</div>\n                                    </div>\n                                    <div className='display-flex gap-5 padding-y-10 padding-x-15 border rounded'>\n                                        <span className='rioglyph rioglyph-calendar-parking rioglyph-align-top' />\n                                        <div>Overnight parking</div>\n                                    </div>\n                                </div>\n                            )}\n                        </Fade>\n                    </div>\n                </section>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-auto border border-top-none border-bottom-none max-width-400\">\n    <div class=\"bg-white\">\n        <section class=\"padding-x-20\">\n            <div class=\"flex-1-1 padding-top-10\">\n                <div class=\"display-flex\">\n                    <div class=\"flex-1-1 display-flex gap-10\">\n                        <div>\n                            <span class=\"rioglyph rioglyph-filling-e-station text-size-18\">\n                            </span>\n                        </div>\n                        <div>\n                            <div class=\"text-medium text-size-18 line-height-125rel\">VoltPoint</div>\n                            <div class=\"margin-left-20--\">\n                                <div>Isarweg 22, 81830 München</div>\n                                <div class=\"LabeledElement display-flex flex-column margin-top-15\">\n                                    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0\">Coordinates</div>\n                                    <div class=\"display-flex gap-3 align-items-center\">\n                                        <span class=\"rioglyph rioglyph-map-marker text-color-dark\">\n                                        </span>\n                                        <div>51.339695, 12.373075</div>\n                                    </div>\n                                </div>\n                                <div class=\"margin-top-15 display-flex gap-25 flex-wrap\">\n                                    <div class=\"LabeledElement display-flex flex-column\">\n                                        <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0\">Network operator</div>\n                                        <div class=\"display-flex gap-3 align-items-center\">\n                                            <span class=\"rioglyph rioglyph-building text-color-dark\">\n                                            </span>\n                                            <div>EnerCharge GmbH</div>\n                                        </div>\n                                    </div>\n                                    <div class=\"LabeledElement display-flex flex-column\">\n                                        <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0\">Support contact</div>\n                                        <div class=\"display-flex gap-3 align-items-center\">\n                                            <span class=\"rioglyph rioglyph-earphone text-color-dark\">\n                                            </span>\n                                            <div>089 9876543</div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div>\n                        <div class=\"dropdown btn-group\">\n                            <button type=\"button\" id=\"7czzgh1t915\" class=\"btn btn-default btn-md btn-icon-only btn-component dropdown-toggle\" tabindex=\"0\">\n                                <span class=\"rioglyph rioglyph-option-horizontal\" aria-hidden=\"true\">\n                                </span>\n                            </button>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </section>\n        <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 25px; padding-bottom: 25px;\">\n            <div class=\"divider-line bg-lighter\" style=\"width: 100%; height: 1px;\">\n            </div>\n        </div>\n        <section class=\"padding-x-20 display-flex flex-column\">\n            <div class=\"text-size-14 text-medium text-color-darkest padding-bottom-10\">Additional information</div>\n            <div class=\"padding-15 bg-lightest rounded rounded-large display-flex align-items-start gap-15 text-left text-size-14 margin-bottom-15\">\n                <span class=\"rioglyph rioglyph-stars text-size-300pct text-color-primary\">\n                </span>\n                <div>\n                    <div class=\"text-color-darker text-medium margin-bottom-3\">Boost your experience</div>\n                    <div class=\"text-color-darker\">Book <a href=\"#\" class=\"text-medium\">Lorem Ipsum</a> to get more information, advanced settings and preferred prices.</div>\n                </div>\n            </div>\n            <div class=\"expander-panel panel panel-default margin-bottom-5\" aria-label=\"expander panel\">\n                <div class=\"panel-heading\" aria-label=\"panel heading\">\n                    <span class=\"title\">Prices</span>\n                    <span class=\"expander-icon rioglyph rioglyph-chevron-down\">\n                    </span>\n                </div>\n            </div>\n            <div class=\"expander-panel panel panel-default margin-bottom-0\" aria-label=\"expander panel\">\n                <div class=\"panel-heading\" aria-label=\"panel heading\">\n                    <span class=\"title\">Opening hours</span>\n                    <span class=\"expander-icon rioglyph rioglyph-chevron-down\">\n                    </span>\n                </div>\n            </div>\n        </section>\n        <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 25px; padding-bottom: 25px;\">\n            <div class=\"divider-line bg-lighter\" style=\"width: 100%; height: 1px;\">\n            </div>\n        </div>\n        <section class=\"padding-x-20 display-flex flex-column\">\n            <ul class=\"nav nav-pills nav-pills-filled- nav-justified nav-justified-word-wrap margin-bottom-15\">\n                <li class=\"active\">\n                    <span>Connectors</span>\n                </li>\n                <li class=\"\">\n                    <span>Amenities</span>\n                </li>\n                <li class=\"disabled\">\n                    <span>Vehicle access</span>\n                </li>\n            </ul>\n            <div>\n                <div style=\"opacity: 1; transform: none;\">\n                    <ul class=\"expander-list list-group rounded border margin-bottom-20\">\n                        <li class=\"list-group-item expandable\">\n                            <div class=\"expander-list-header padding-y-5\" aria-label=\"expander item header\">\n                                <span class=\"expander-list-header-content\">\n                                    <div class=\"display-flex column-gap-10 justify-content-between padding-right-15 text-medium padding-y-2\">\n                                        <span>180 kW</span>\n                                        <div class=\"display-flex column-gap-10 align-items-center\">\n                                            <span class=\"text-color-info\">6/6</span>\n                                        </div>\n                                    </div>\n                                </span>\n                                <span class=\"expander-icon rioglyph rioglyph-chevron-down\">\n                                </span>\n                            </div>\n                        </li>\n                        <li class=\"list-group-item expandable\">\n                            <div class=\"expander-list-header padding-y-5\" aria-label=\"expander item header\">\n                                <span class=\"expander-list-header-content\">\n                                    <div class=\"display-flex column-gap-10 justify-content-between padding-right-15 text-medium padding-y-2\">\n                                        <span>300 kW</span>\n                                        <div class=\"display-flex column-gap-10 align-items-center\">\n                                            <span class=\"text-color-info\">3/4</span>\n                                        </div>\n                                    </div>\n                                </span>\n                                <span class=\"expander-icon rioglyph rioglyph-chevron-down\">\n                                </span>\n                            </div>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </section>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Internal Directives Administrator",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"margin-auto border border-top-none border-bottom-none max-width-400\"><section class=\"bg-white padding-bottom-20\"><div class=\"padding-x-20 display-flex padding-top-10\"><div class=\"display-flex gap-15 padding-bottom-25\"><div class=\"Avatar bg-lighter\" style=\"height: 50px;\"><span class=\"Avatar-initials\">JD</span></div><div><div class=\"text-bold text-size-20\">John Doe</div><div class=\"text-color-dark\">Internal Directives Administrator</div><div class=\"margin-top-10\"><span class=\"label label-condensed label-danger\">Not Working</span></div></div></div></div><ul class=\"expander-list list-group border border-left-none border-right-none rounded-none\"><li class=\"list-group-item expandable\"><div class=\"expander-list-header\" aria-label=\"expander item header\"><span class=\"expander-list-header-content\"><div>General</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>Graduations</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>Objectives</div></span><span class=\"expander-icon rioglyph rioglyph-chevron-down\"></span></div></li></ul></section></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { dummyTextShort } from '../../../utils/data';\n\nimport ExpanderList from '@rio-cloud/rio-uikit/ExpanderList';\nimport Avatar from '@rio-cloud/rio-uikit/Avatar';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\nexport default () => {\n    return (\n        <div className='margin-auto border border-top-none border-bottom-none max-width-400'>\n            {/* Actual content comes here */}\n            <section className='bg-white padding-bottom-20'>\n                <div className='padding-x-20 display-flex padding-top-10'>\n                    <div className='display-flex gap-15 padding-bottom-25'>\n                        <Avatar name='John Doe' size={50} />\n                        <div>\n                            <div className='text-bold text-size-20'>John Doe</div>\n                            <div className='text-color-dark'>Internal Directives Administrator</div>\n                            <div className='margin-top-10'>\n                                <span className='label label-condensed label-danger'>Not Working</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <ExpanderList\n                    className='border border-left-none border-right-none rounded-none'\n                    items={[\n                        {\n                            id: 1,\n                            header: <div>General</div>,\n                            body: (\n                                <div className='divider-y-1 divider-style-solid divider-color-lighter'>\n                                    <div className='display-grid grid-cols-3 gap-15 padding-x-5 padding-y-10'>\n                                        <div className='text-color-dark'>Id</div>\n                                        <div className='grid-colspan-2 word-break'>80</div>\n                                    </div>\n                                    <div className='display-grid grid-cols-3 gap-15 padding-x-5 padding-y-10'>\n                                        <div className='text-color-dark'>Nickname</div>\n                                        <div className='grid-colspan-2 word-break'>Adelia_Rutherford</div>\n                                    </div>\n                                    <div className='display-grid grid-cols-3 gap-15 padding-x-5 padding-y-10'>\n                                        <div className='text-color-dark'>First name</div>\n                                        <div className='grid-colspan-2 word-break'>Rolando</div>\n                                    </div>\n                                    <div className='display-grid grid-cols-3 gap-15 padding-x-5 padding-y-10'>\n                                        <div className='text-color-dark'>Last name</div>\n                                        <div className='grid-colspan-2 word-break'>Schuster</div>\n                                    </div>\n                                    <div className='display-grid grid-cols-3 gap-15 padding-x-5 padding-y-10'>\n                                        <div className='text-color-dark'>Job</div>\n                                        <div className='grid-colspan-2 word-break'>\n                                            Future Applications Administrator\n                                        </div>\n                                    </div>\n                                    <div className='display-grid grid-cols-3 gap-15 padding-x-5 padding-y-10'>\n                                        <div className='text-color-dark'>Email</div>\n                                        <div className='grid-colspan-2 word-break'>Bret.Block91@yahoo.com</div>\n                                    </div>\n                                    <div className='display-grid grid-cols-3 gap-15 padding-x-5 padding-y-10'>\n                                        <div className='text-color-dark'>Phone</div>\n                                        <div className='grid-colspan-2 word-break'>243-907-0058</div>\n                                    </div>\n                                </div>\n                            ),\n                            bodyClassName: 'padding-top-0',\n                        },\n                        {\n                            id: 2,\n                            header: <div>Graduations</div>,\n                            body: dummyTextShort,\n                            bodyClassName: 'padding-top-0 padding-bottom-20',\n                        },\n                        {\n                            id: 3,\n                            header: <div>Objectives</div>,\n                            body: (\n                                <div>\n                                    <div className='form-group '>\n                                        <FormLabel htmlFor='input1'>Subject</FormLabel>\n                                        <input className='form-control' id='input1' placeholder='Subject' />\n                                    </div>\n                                    <div className='form-group '>\n                                        <FormLabel htmlFor='input2'>Category</FormLabel>\n                                        <input className='form-control' id='input2' placeholder='Enter a category' />\n                                    </div>\n                                    <div className='form-group '>\n                                        <FormLabel htmlFor='textArea'>Textarea</FormLabel>\n                                        <textarea className='form-control' rows={3} id='textArea' />\n                                    </div>\n                                </div>\n                            ),\n                            bodyClassName: 'padding-top-0',\n                        },\n                    ]}\n                />\n            </section>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-auto border border-top-none border-bottom-none max-width-400\">\n    <section class=\"bg-white padding-bottom-20\">\n        <div class=\"padding-x-20 display-flex padding-top-10\">\n            <div class=\"display-flex gap-15 padding-bottom-25\">\n                <div class=\"Avatar bg-lighter\" style=\"height: 50px;\">\n                    <span class=\"Avatar-initials\">JD</span>\n                </div>\n                <div>\n                    <div class=\"text-bold text-size-20\">John Doe</div>\n                    <div class=\"text-color-dark\">Internal Directives Administrator</div>\n                    <div class=\"margin-top-10\">\n                        <span class=\"label label-condensed label-danger\">Not Working</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <ul class=\"expander-list list-group border border-left-none border-right-none rounded-none\">\n            <li class=\"list-group-item expandable\">\n                <div class=\"expander-list-header\" aria-label=\"expander item header\">\n                    <span class=\"expander-list-header-content\">\n                        <div>General</div>\n                    </span>\n                    <span class=\"expander-icon rioglyph rioglyph-chevron-down\">\n                    </span>\n                </div>\n            </li>\n            <li class=\"list-group-item expandable\">\n                <div class=\"expander-list-header\" aria-label=\"expander item header\">\n                    <span class=\"expander-list-header-content\">\n                        <div>Graduations</div>\n                    </span>\n                    <span class=\"expander-icon rioglyph rioglyph-chevron-down\">\n                    </span>\n                </div>\n            </li>\n            <li class=\"list-group-item expandable\">\n                <div class=\"expander-list-header\" aria-label=\"expander item header\">\n                    <span class=\"expander-list-header-content\">\n                        <div>Objectives</div>\n                    </span>\n                    <span class=\"expander-icon rioglyph rioglyph-chevron-down\">\n                    </span>\n                </div>\n            </li>\n        </ul>\n    </section>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Shipment ID",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"margin-auto border border-top-none border-bottom-none max-width-400\"><div class=\"padding-20 display-flex flex-column gap-25 space-y-10\"><section><legend class=\"margin-bottom-5 padding-bottom-5 display-flex align-items-center justify-content-between gap-15\"><div class=\"display-flex align-items-center gap-5\"><span class=\"rioglyph rioglyph-parcel\"></span><span>Shipment details</span></div><div><button type=\"button\" class=\"btn btn-muted btn-sm btn-component\" tabindex=\"0\">Options</button></div></legend><div class=\"divider-y-1 divider-color-lighter divider-style-solid\"><div class=\"display-flex justify-content-between padding-y-10 padding-x-5\"><div class=\"min-width-40pct text-color-dark\">Shipment ID</div><div class=\"text-right text-color-darkest\">982-457-ABX</div></div><div class=\"display-flex justify-content-between padding-y-10 padding-x-5\"><div class=\"min-width-40pct text-color-dark\">Status</div><div class=\"text-right text-color-darkest\"><div class=\"label label-info label-condensed\">Out for delivery</div></div></div><div class=\"display-flex justify-content-between padding-y-10 padding-x-5\"><div class=\"min-width-40pct text-color-dark\">Last update</div><div class=\"text-right text-color-darkest\">July 23, 2025 – 10:31</div></div><div class=\"display-flex justify-content-between padding-y-10 padding-x-5\"><div class=\"min-width-40pct text-color-dark\">Shipping type</div><div class=\"text-right text-color-darkest\">Express</div></div><div class=\"display-flex justify-content-between padding-y-10 padding-x-5\"><div class=\"min-width-40pct text-color-dark\">Origin</div><div class=\"text-right text-color-darkest\">Hamburg, DE</div></div><div class=\"display-flex justify-content-between padding-y-10 padding-x-5\"><div class=\"min-width-40pct text-color-dark\">Destination</div><div class=\"text-right text-color-darkest\">Verona, IT</div></div></div></section><section><legend class=\"margin-bottom-5 padding-bottom-5 display-flex align-items-center justify-content-between gap-15\"><div class=\"display-flex align-items-center gap-5\"><span class=\"rioglyph rioglyph-truck\"></span><span>Vehicle information</span></div><div><button type=\"button\" class=\"btn btn-muted btn-sm btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-share-nodes\"></span></button></div></legend><div class=\"divider-y-1 divider-color-lighter divider-style-solid\"><div class=\"display-flex justify-content-between padding-y-10 padding-x-5\"><div class=\"min-width-40pct text-color-dark\">Vehicle type</div><div class=\"text-right text-color-darkest\">Truck with trailer</div></div><div class=\"display-flex justify-content-between padding-y-10 padding-x-5\"><div class=\"min-width-40pct text-color-dark\">License plate</div><div class=\"text-right text-color-darkest\">M-TD 3456</div></div><div class=\"display-flex justify-content-between padding-y-10 padding-x-5\"><div class=\"min-width-40pct text-color-dark\">Driver</div><div class=\"text-right text-color-darkest\">M. Schubert</div></div><div class=\"display-flex justify-content-between padding-y-10 padding-x-5\"><div class=\"min-width-40pct text-color-dark\">Current load</div><div class=\"text-right text-color-darkest\">19.4 t</div></div><div class=\"display-flex justify-content-between padding-y-10 padding-x-5\"><div class=\"min-width-40pct text-color-dark\">Temperature</div><div class=\"text-right text-color-darkest\">6 °C</div></div></div></section><section><legend class=\"display-flex align-items-center gap-5 margin-bottom-5\"><span class=\"rioglyph rioglyph-time\"></span><span>Time &amp; distance</span></legend><div class=\"divider-y-1 divider-color-lighter divider-style-solid\"><div class=\"display-flex justify-content-between padding-y-10 padding-x-5\"><div class=\"min-width-40pct text-color-dark\">Estimated arrival</div><div class=\"text-right text-color-darkest\">July 24, 2025 – 08:00</div></div><div class=\"display-flex justify-content-between padding-y-10 padding-x-5\"><div class=\"min-width-40pct text-color-dark\">Current position</div><div class=\"text-right text-color-darkest\"><a href=\"#\">Near Munich</a></div></div><div class=\"display-flex justify-content-between padding-y-10 padding-x-5\"><div class=\"min-width-40pct text-color-dark\">Distance to destination</div><div class=\"text-right text-color-darkest\">498 km</div></div><div class=\"display-flex justify-content-between padding-y-10 padding-x-5\"><div class=\"min-width-40pct text-color-dark\">Average speed</div><div class=\"text-right text-color-darkest\">72 km/h</div></div><div class=\"display-flex justify-content-between padding-y-10 padding-x-5\"><div class=\"min-width-40pct text-color-dark\">Last stop</div><div class=\"text-right text-color-darkest\">Regensburg (Shell)</div></div></div></section></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { dummyTextShort } from '../../../utils/data';\n\nimport ExpanderList from '@rio-cloud/rio-uikit/ExpanderList';\nimport Avatar from '@rio-cloud/rio-uikit/Avatar';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\nimport { Button } from '@rio-cloud/rio-uikit';\n\nexport default () => {\n    return (\n        <div className='margin-auto border border-top-none border-bottom-none max-width-400'>\n            {/* Actual content comes here */}\n            <div className='padding-20 display-flex flex-column gap-25 space-y-10'>\n                <section>\n                    <legend className='margin-bottom-5 padding-bottom-5 display-flex align-items-center justify-content-between gap-15'>\n                        <div className='display-flex align-items-center gap-5'>\n                            <span className='rioglyph rioglyph-parcel' />\n                            <span>Shipment details</span>\n                        </div>\n                        <div>\n                            <Button bsSize='sm' bsStyle='muted'>\n                                Options\n                            </Button>\n                        </div>\n                    </legend>\n                    <div className='divider-y-1 divider-color-lighter divider-style-solid'>\n                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>\n                            <div className='min-width-40pct text-color-dark'>Shipment ID</div>\n                            <div className='text-right text-color-darkest'>982-457-ABX</div>\n                        </div>\n                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>\n                            <div className='min-width-40pct text-color-dark'>Status</div>\n                            <div className='text-right text-color-darkest'>\n                                <div className='label label-info label-condensed'>Out for delivery</div>\n                            </div>\n                        </div>\n                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>\n                            <div className='min-width-40pct text-color-dark'>Last update</div>\n                            <div className='text-right text-color-darkest'>July 23, 2025 – 10:31</div>\n                        </div>\n                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>\n                            <div className='min-width-40pct text-color-dark'>Shipping type</div>\n                            <div className='text-right text-color-darkest'>Express</div>\n                        </div>\n                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>\n                            <div className='min-width-40pct text-color-dark'>Origin</div>\n                            <div className='text-right text-color-darkest'>Hamburg, DE</div>\n                        </div>\n                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>\n                            <div className='min-width-40pct text-color-dark'>Destination</div>\n                            <div className='text-right text-color-darkest'>Verona, IT</div>\n                        </div>\n                    </div>\n                </section>\n\n                <section>\n                    <legend className='margin-bottom-5 padding-bottom-5 display-flex align-items-center justify-content-between gap-15'>\n                        <div className='display-flex align-items-center gap-5'>\n                            <span className='rioglyph rioglyph-truck' />\n                            <span>Vehicle information</span>\n                        </div>\n                        <div>\n                            <Button bsSize='sm' bsStyle='muted' iconName='rioglyph-share-nodes' iconOnly />\n                        </div>\n                    </legend>\n                    <div className='divider-y-1 divider-color-lighter divider-style-solid'>\n                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>\n                            <div className='min-width-40pct text-color-dark'>Vehicle type</div>\n                            <div className='text-right text-color-darkest'>Truck with trailer</div>\n                        </div>\n                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>\n                            <div className='min-width-40pct text-color-dark'>License plate</div>\n                            <div className='text-right text-color-darkest'>M-TD 3456</div>\n                        </div>\n                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>\n                            <div className='min-width-40pct text-color-dark'>Driver</div>\n                            <div className='text-right text-color-darkest'>M. Schubert</div>\n                        </div>\n                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>\n                            <div className='min-width-40pct text-color-dark'>Current load</div>\n                            <div className='text-right text-color-darkest'>19.4 t</div>\n                        </div>\n                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>\n                            <div className='min-width-40pct text-color-dark'>Temperature</div>\n                            <div className='text-right text-color-darkest'>6 °C</div>\n                        </div>\n                    </div>\n                </section>\n\n                <section>\n                    <legend className='display-flex align-items-center gap-5 margin-bottom-5'>\n                        <span className='rioglyph rioglyph-time' />\n                        <span>Time & distance</span>\n                    </legend>\n                    <div className='divider-y-1 divider-color-lighter divider-style-solid'>\n                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>\n                            <div className='min-width-40pct text-color-dark'>Estimated arrival</div>\n                            <div className='text-right text-color-darkest'>July 24, 2025 – 08:00</div>\n                        </div>\n                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>\n                            <div className='min-width-40pct text-color-dark'>Current position</div>\n                            <div className='text-right text-color-darkest'>\n                                <a href='#'>Near Munich</a>\n                            </div>\n                        </div>\n                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>\n                            <div className='min-width-40pct text-color-dark'>Distance to destination</div>\n                            <div className='text-right text-color-darkest'>498 km</div>\n                        </div>\n                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>\n                            <div className='min-width-40pct text-color-dark'>Average speed</div>\n                            <div className='text-right text-color-darkest'>72 km/h</div>\n                        </div>\n                        <div className='display-flex justify-content-between padding-y-10 padding-x-5'>\n                            <div className='min-width-40pct text-color-dark'>Last stop</div>\n                            <div className='text-right text-color-darkest'>Regensburg (Shell)</div>\n                        </div>\n                    </div>\n                </section>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"margin-auto border border-top-none border-bottom-none max-width-400\">\n    <div class=\"padding-20 display-flex flex-column gap-25 space-y-10\">\n        <section>\n            <legend class=\"margin-bottom-5 padding-bottom-5 display-flex align-items-center justify-content-between gap-15\">\n                <div class=\"display-flex align-items-center gap-5\">\n                    <span class=\"rioglyph rioglyph-parcel\">\n                    </span>\n                    <span>Shipment details</span>\n                </div>\n                <div>\n                    <button type=\"button\" class=\"btn btn-muted btn-sm btn-component\" tabindex=\"0\">Options</button>\n                </div>\n            </legend>\n            <div class=\"divider-y-1 divider-color-lighter divider-style-solid\">\n                <div class=\"display-flex justify-content-between padding-y-10 padding-x-5\">\n                    <div class=\"min-width-40pct text-color-dark\">Shipment ID</div>\n                    <div class=\"text-right text-color-darkest\">982-457-ABX</div>\n                </div>\n                <div class=\"display-flex justify-content-between padding-y-10 padding-x-5\">\n                    <div class=\"min-width-40pct text-color-dark\">Status</div>\n                    <div class=\"text-right text-color-darkest\">\n                        <div class=\"label label-info label-condensed\">Out for delivery</div>\n                    </div>\n                </div>\n                <div class=\"display-flex justify-content-between padding-y-10 padding-x-5\">\n                    <div class=\"min-width-40pct text-color-dark\">Last update</div>\n                    <div class=\"text-right text-color-darkest\">July 23, 2025 – 10:31</div>\n                </div>\n                <div class=\"display-flex justify-content-between padding-y-10 padding-x-5\">\n                    <div class=\"min-width-40pct text-color-dark\">Shipping type</div>\n                    <div class=\"text-right text-color-darkest\">Express</div>\n                </div>\n                <div class=\"display-flex justify-content-between padding-y-10 padding-x-5\">\n                    <div class=\"min-width-40pct text-color-dark\">Origin</div>\n                    <div class=\"text-right text-color-darkest\">Hamburg, DE</div>\n                </div>\n                <div class=\"display-flex justify-content-between padding-y-10 padding-x-5\">\n                    <div class=\"min-width-40pct text-color-dark\">Destination</div>\n                    <div class=\"text-right text-color-darkest\">Verona, IT</div>\n                </div>\n            </div>\n        </section>\n        <section>\n            <legend class=\"margin-bottom-5 padding-bottom-5 display-flex align-items-center justify-content-between gap-15\">\n                <div class=\"display-flex align-items-center gap-5\">\n                    <span class=\"rioglyph rioglyph-truck\">\n                    </span>\n                    <span>Vehicle information</span>\n                </div>\n                <div>\n                    <button type=\"button\" class=\"btn btn-muted btn-sm btn-icon-only btn-component\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-share-nodes\">\n                        </span>\n                    </button>\n                </div>\n            </legend>\n            <div class=\"divider-y-1 divider-color-lighter divider-style-solid\">\n                <div class=\"display-flex justify-content-between padding-y-10 padding-x-5\">\n                    <div class=\"min-width-40pct text-color-dark\">Vehicle type</div>\n                    <div class=\"text-right text-color-darkest\">Truck with trailer</div>\n                </div>\n                <div class=\"display-flex justify-content-between padding-y-10 padding-x-5\">\n                    <div class=\"min-width-40pct text-color-dark\">License plate</div>\n                    <div class=\"text-right text-color-darkest\">M-TD 3456</div>\n                </div>\n                <div class=\"display-flex justify-content-between padding-y-10 padding-x-5\">\n                    <div class=\"min-width-40pct text-color-dark\">Driver</div>\n                    <div class=\"text-right text-color-darkest\">M. Schubert</div>\n                </div>\n                <div class=\"display-flex justify-content-between padding-y-10 padding-x-5\">\n                    <div class=\"min-width-40pct text-color-dark\">Current load</div>\n                    <div class=\"text-right text-color-darkest\">19.4 t</div>\n                </div>\n                <div class=\"display-flex justify-content-between padding-y-10 padding-x-5\">\n                    <div class=\"min-width-40pct text-color-dark\">Temperature</div>\n                    <div class=\"text-right text-color-darkest\">6 °C</div>\n                </div>\n            </div>\n        </section>\n        <section>\n            <legend class=\"display-flex align-items-center gap-5 margin-bottom-5\">\n                <span class=\"rioglyph rioglyph-time\">\n                </span>\n                <span>Time &amp; distance</span>\n            </legend>\n            <div class=\"divider-y-1 divider-color-lighter divider-style-solid\">\n                <div class=\"display-flex justify-content-between padding-y-10 padding-x-5\">\n                    <div class=\"min-width-40pct text-color-dark\">Estimated arrival</div>\n                    <div class=\"text-right text-color-darkest\">July 24, 2025 – 08:00</div>\n                </div>\n                <div class=\"display-flex justify-content-between padding-y-10 padding-x-5\">\n                    <div class=\"min-width-40pct text-color-dark\">Current position</div>\n                    <div class=\"text-right text-color-darkest\">\n                        <a href=\"#\">Near Munich</a>\n                    </div>\n                </div>\n                <div class=\"display-flex justify-content-between padding-y-10 padding-x-5\">\n                    <div class=\"min-width-40pct text-color-dark\">Distance to destination</div>\n                    <div class=\"text-right text-color-darkest\">498 km</div>\n                </div>\n                <div class=\"display-flex justify-content-between padding-y-10 padding-x-5\">\n                    <div class=\"min-width-40pct text-color-dark\">Average speed</div>\n                    <div class=\"text-right text-color-darkest\">72 km/h</div>\n                </div>\n                <div class=\"display-flex justify-content-between padding-y-10 padding-x-5\">\n                    <div class=\"min-width-40pct text-color-dark\">Last stop</div>\n                    <div class=\"text-right text-color-darkest\">Regensburg (Shell)</div>\n                </div>\n            </div>\n        </section>\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Templates/templates/expandable-details.json ADDED Viewed

@@ -0,0 +1,39 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:26.750Z",
+    "source": "https://uikit.developers.rio.cloud/#templates/expandable-details",
+    "category": "Templates",
+    "section": "Content",
+    "slug": "templates/expandable-details",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "634f2a064202f9f329f5f5bff48fc703b0fd89b10e4e8959a299c511cc6ff6c7"
+  },
+  "title": "Expandable details",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Expandable details",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport { generateDummyText } from '../../../utils/data';\nimport ExpanderList from '@rio-cloud/rio-uikit/ExpanderList';\nimport Divider from '@rio-cloud/rio-uikit/Divider';\n\nexport default () => {\n    const [listItems, setListItems] = useState([\n        {\n            id: 1,\n            header: (\n                <div className='padding-y-5 display-flex gap-10'>\n                    <div>\n                        <span className='rioglyph rioglyph-building text-size-18 text-color-primary' />\n                    </div>\n                    <div>\n                        <div className='text-color-primary text-medium'>Warehouse EU-Central</div>\n                        <div className='text-color-gray text-size-12'>\n                            #458712839104 | eu-central-warehouse@logistics.cloud\n                        </div>\n                    </div>\n                </div>\n            ),\n            body: <RoleList />,\n            bodyClassName: 'padding-top-0 padding-bottom-15 padding-x-25',\n        },\n        {\n            id: 2,\n            header: (\n                <div className='padding-y-5 display-flex gap-10'>\n                    <div>\n                        <span className='rioglyph rioglyph-building text-size-18 text-color-primary' />\n                    </div>\n                    <div>\n                        <div className='text-color-primary text-medium'>Distribution hub west</div>\n                        <Divider vertical />\n                        <div className='text-color-gray text-size-12'>\n                            #778944220011 | delivery-north-team@logistics.cloud\n                        </div>\n                    </div>\n                </div>\n            ),\n            body: <RoleList />,\n            bodyClassName: 'padding-top-0 padding-bottom-15 padding-x-25',\n        },\n        {\n            id: 3,\n            header: (\n                <div className='padding-y-5 display-flex gap-10'>\n                    <div>\n                        <span className='rioglyph rioglyph-factory text-size-18 text-color-primary' />\n                    </div>\n                    <div>\n                        <div className='text-color-primary text-medium'>Local delivery north</div>\n                        <div className='text-color-gray text-size-12'>\n                            #778944220011 | delivery-north-team@logistics.cloud\n                        </div>\n                    </div>\n                </div>\n            ),\n            body: <RoleList />,\n            bodyClassName: 'padding-top-0 padding-bottom-15 padding-x-25',\n        },\n    ]);\n\n    return (\n        <div className='padding-15'>\n            <ExpanderList items={listItems} />\n        </div>\n    );\n};\n\ntype RoleItem = {\n    role: string;\n    dashboardUrl: string;\n    apiUrl: string;\n};\n\nconst roles: RoleItem[] = [\n    {\n        role: 'Hub Manager',\n        dashboardUrl: '#',\n        apiUrl: '#',\n    },\n    {\n        role: 'Inventory Control',\n        dashboardUrl: '#',\n        apiUrl: '#',\n    },\n    {\n        role: 'Shipping Operator',\n        dashboardUrl: '#',\n        apiUrl: '#',\n    },\n];\n\nexport const RoleList = () => {\n    return (\n        <div className='cq-container margin-top--5 padding-left-10 divider-y-1 divider-color-lighter divider-style-solid'>\n            {roles.map(({ role, dashboardUrl, apiUrl }, index) => (\n                <div\n                    key={role}\n                    className={`\n                        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\n                        ${index === 0 ? 'rounded-top' : ''} ${index === (roles.length - 1) ? 'rounded-bottom' : ''}`}\n                >\n                    <div className='flex-1-1'>\n                        <div className='text-medium text-color-darker'>{role}</div>\n                        <div className='text-color-dark'>{generateDummyText()}</div>\n                    </div>\n                    <div className='flex-0 display-flex align-items-center padding-y-5 cq-600:padding-y-0'>\n                        <a href={dashboardUrl} className='link margin-right-5'>\n                            Fleet dashboard\n                        </a>\n                        <Divider className='height-20' vertical />\n                        <a href={apiUrl} className='link margin-left-5'>\n                            API access\n                        </a>\n                    </div>\n                </div>\n            ))}\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"padding-15\">\n    <ul class=\"expander-list list-group rounded border\">\n        <li class=\"list-group-item expandable\">\n            <div class=\"expander-list-header\" aria-label=\"expander item header\">\n                <span class=\"expander-list-header-content\">\n                    <div class=\"padding-y-5 display-flex gap-10\">\n                        <div>\n                            <span class=\"rioglyph rioglyph-building text-size-18 text-color-primary\">\n                            </span>\n                        </div>\n                        <div>\n                            <div class=\"text-color-primary text-medium\">Warehouse EU-Central</div>\n                            <div class=\"text-color-gray text-size-12\">#458712839104 | eu-central-warehouse@logistics.cloud</div>\n                        </div>\n                    </div>\n                </span>\n                <span class=\"expander-icon rioglyph rioglyph-chevron-down\">\n                </span>\n            </div>\n        </li>\n        <li class=\"list-group-item expandable\">\n            <div class=\"expander-list-header\" aria-label=\"expander item header\">\n                <span class=\"expander-list-header-content\">\n                    <div class=\"padding-y-5 display-flex gap-10\">\n                        <div>\n                            <span class=\"rioglyph rioglyph-building text-size-18 text-color-primary\">\n                            </span>\n                        </div>\n                        <div>\n                            <div class=\"text-color-primary text-medium\">Distribution hub west</div>\n                            <div class=\"Divider position-relative\" style=\"padding-left: 15px; padding-right: 15px;\">\n                                <div class=\"divider-line bg-light\" style=\"width: 1px; height: 100%;\">\n                                </div>\n                            </div>\n                            <div class=\"text-color-gray text-size-12\">#778944220011 | delivery-north-team@logistics.cloud</div>\n                        </div>\n                    </div>\n                </span>\n                <span class=\"expander-icon rioglyph rioglyph-chevron-down\">\n                </span>\n            </div>\n        </li>\n        <li class=\"list-group-item expandable\">\n            <div class=\"expander-list-header\" aria-label=\"expander item header\">\n                <span class=\"expander-list-header-content\">\n                    <div class=\"padding-y-5 display-flex gap-10\">\n                        <div>\n                            <span class=\"rioglyph rioglyph-factory text-size-18 text-color-primary\">\n                            </span>\n                        </div>\n                        <div>\n                            <div class=\"text-color-primary text-medium\">Local delivery north</div>\n                            <div class=\"text-color-gray text-size-12\">#778944220011 | delivery-north-team@logistics.cloud</div>\n                        </div>\n                    </div>\n                </span>\n                <span class=\"expander-icon rioglyph rioglyph-chevron-down\">\n                </span>\n            </div>\n        </li>\n    </ul>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}