@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/data/pages/Components/components/animations.json

@@ -1,87 +0,0 @@
-{
-  "metadata": {
-    "captured_at": "2025-11-21T12:07:33.340Z",
-    "source": "https://uikit.developers.rio.cloud/#components/animations",
-    "category": "Components",
-    "section": "Content",
-    "slug": "components/animations",
-    "version": "v1.13.2",
-    "hash_algorithm": "sha256",
-    "hash": "bd99dbe57b8592fa85354f1d2a37c06c0e84130a5de435e73bd24cf6e3824d78"
-  },
-  "title": "Animations",
-  "lead": "The UIKIT uses the famous animation library Framer Motion. To allow services to use Framer Motion without adding it as a depemdency to their project, the UIKIT re-exports all framer-motioncomponents.",
-  "content": [
-    {
-      "heading": "Animations",
-      "body": "The official documentation can be found here www.framer.com/motion",
-      "examples": [
-        {
-          "caption": "Example 1",
-          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div style=\"opacity: 0.999644;\"><div class=\"margin-10\"><label>Some Data</label><div>\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div></div></div></div>",
-          "tabs": [
-            {
-              "label": "React",
-              "language": "tsx",
-              "code": "import { motion } from '@rio-cloud/rio-uikit/framer-motion';\n\nimport { dummyText } from '../../../utils/data';\n\nexport default () => {\n    return (\n        <motion.div\n            animate={{ opacity: [1, 0, 1] }}\n            transition={{\n                // Keyframes that match to the keyframes of the opacity settings above\n                times: [0, 0.5, 1],\n                repeat: Infinity,\n                ease: 'easeInOut',\n                duration: 2.5,\n                repeatDelay: 2,\n            }}\n        >\n            <div className='margin-10'>\n                <label>Some Data</label>\n                <div>{dummyText}</div>\n            </div>\n        </motion.div>\n    );\n};"
-            },
-            {
-              "label": "HTML",
-              "language": "html",
-              "code": "<div style=\"opacity: 0.857835;\">\n    <div class=\"margin-10\">\n        <label>Some Data</label>\n        <div>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>\n    </div>\n</div>"
-            }
-          ]
-        },
-        {
-          "caption": "Example 2",
-          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex gap-20 text-color-darker\" style=\"opacity: 0.0555556;\"><div style=\"opacity: 0.0555556;\"><svg width=\"50\" height=\"50\" class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\" stroke-dashoffset=\"0px\" stroke-dasharray=\"0px 37.798988342285156px\"></path></svg></div><div style=\"opacity: 0;\"><svg width=\"50\" height=\"50\" class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" stroke-dashoffset=\"0px\" stroke-dasharray=\"0px 19.79899024963379px\"></path></svg></div><div style=\"opacity: 0;\"><svg width=\"50\" height=\"50\" class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\" stroke-dashoffset=\"0px\" stroke-dasharray=\"0px 63.5682487487793px\"></path></svg></div></div></div>",
-          "tabs": [
-            {
-              "label": "React",
-              "language": "tsx",
-              "code": "import { AnimatePresence, motion } from '@rio-cloud/rio-uikit/framer-motion';\n\nconst icons = {\n    check: {\n        d: 'M5 13l4 4L19 7',\n    },\n    arrowRight: {\n        d: 'M14 5l7 7m0 0l-7 7m7-7H3',\n    },\n    externalLink: {\n        d: 'M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14',\n    },\n};\n\nconst AnimatedIcon = props => {\n    const { icon = 'check', delay = 0.2, ...remainingProps } = props;\n    return (\n        <svg\n            {...remainingProps}\n            className='w-6 h-6'\n            fill='none'\n            stroke='currentColor'\n            viewBox='0 0 24 24'\n            xmlns='http://www.w3.org/2000/svg'\n        >\n            <motion.path\n                key={icon}\n                initial={{ pathLength: 0 }}\n                animate={{ pathLength: 1 }}\n                transition={{ duration: 0.5, delay, type: 'tween', ease: 'easeOut' }}\n                strokeLinecap='round'\n                strokeLinejoin='round'\n                strokeWidth='2'\n                {...icons[icon]}\n            />\n        </svg>\n    );\n};\n\nconst container = {\n    hidden: { opacity: 0 },\n    show: {\n        opacity: 1,\n        transition: {\n            staggerChildren: 0.2,\n        },\n    },\n};\n\nconst item = {\n    hidden: { opacity: 0 },\n    show: { opacity: 1 },\n};\n\nexport default () => (\n    <>\n        <motion.div\n            variants={container}\n            initial='hidden'\n            animate='show'\n            className='display-flex gap-20 text-color-darker'\n        >\n            <motion.div key='1' variants={item}>\n                <AnimatedIcon key='arrowRight' delay={0.2} icon='arrowRight' width='50' height='50' />\n            </motion.div>\n            <motion.div key='2' variants={item}>\n                <AnimatedIcon key='check' delay={0.4} icon='check' width='50' height='50' />\n            </motion.div>\n            <motion.div key='3' variants={item}>\n                <AnimatedIcon key='externalLink' delay={0.8} icon='externalLink' width='50' height='50' />\n            </motion.div>\n        </motion.div>\n    </>\n);"
-            },
-            {
-              "label": "HTML",
-              "language": "html",
-              "code": "<div class=\"display-flex gap-20 text-color-darker\" style=\"opacity: 1;\">\n    <div style=\"opacity: 1;\">\n        <svg width=\"50\" height=\"50\" class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\" stroke-dashoffset=\"0px\" stroke-dasharray=\"37.798988342285156px 37.798988342285156px\">\n            </path>\n        </svg>\n    </div>\n    <div style=\"opacity: 1;\">\n        <svg width=\"50\" height=\"50\" class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" stroke-dashoffset=\"0px\" stroke-dasharray=\"18.389653773926696px 19.79899024963379px\">\n            </path>\n        </svg>\n    </div>\n    <div style=\"opacity: 1;\">\n        <svg width=\"50\" height=\"50\" class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\" stroke-dashoffset=\"0px\" stroke-dasharray=\"0px 63.5682487487793px\">\n            </path>\n        </svg>\n    </div>\n</div>"
-            }
-          ]
-        },
-        {
-          "caption": "Example 3",
-          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Add Item</button><div class=\"border rounded bg-white padding-15 margin-top-25 overflow-hidden\"><div style=\"height: 3.2796px;\"><div style=\"opacity: 0.0555556;\"><div class=\"display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only\"><div>Item T8IQ5N3PGI</div><button type=\"button\" class=\"btn btn-muted btn-sm btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-remove text-size-14\"></span></button></div></div></div><div style=\"height: 3.2796px;\"><div style=\"opacity: 0.0555556;\"><div class=\"display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only\"><div>Item QUEP70WQ4J</div><button type=\"button\" class=\"btn btn-muted btn-sm btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-remove text-size-14\"></span></button></div></div></div><div style=\"height: 3.2796px;\"><div style=\"opacity: 0.0555556;\"><div class=\"display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only\"><div>Item U3LH1YBJI2</div><button type=\"button\" class=\"btn btn-muted btn-sm btn-icon-only btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-remove text-size-14\"></span></button></div></div></div></div><div class=\"margin-top-15\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div></div></div>",
-          "tabs": [
-            {
-              "label": "React",
-              "language": "tsx",
-              "code": "import { useState } from 'react';\n\nimport { AnimatePresence, motion } from '@rio-cloud/rio-uikit/framer-motion';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\nimport { dummyText } from '../../../utils/data';\n\nconst getRandomString = () => (Math.random() + 1).toString(36).toUpperCase().substring(2);\nconst generateItems = length => Array.from({ length }, () => getRandomString());\n\nexport default () => {\n    const [items, setItems] = useState([...generateItems(3)]);\n\n    const handleAddItem = () => setItems(items => [...items, getRandomString()]);\n    const handleRemoveItem = item => setItems(items => items.filter(i => i !== item));\n\n    return (\n        <div>\n            <Button onClick={handleAddItem}>Add Item</Button>\n            <div className='border rounded bg-white padding-15 margin-top-25 overflow-hidden'>\n                <AnimatePresence>\n                    {items.map(item => (\n                        <motion.div\n                            key={item}\n                            initial={{ height: 0 }}\n                            animate={{ height: 'auto' }}\n                            exit={{ height: 0 }}\n                        >\n                            <motion.div\n                                initial={{ opacity: 0 }}\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                transition={{\n                                    opacity: { duration: 0.1 },\n                                }}\n                            >\n                                <div className='display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only'>\n                                    <div>Item {item}</div>\n                                    <Button onClick={() => handleRemoveItem(item)} bsStyle='muted' bsSize='sm' iconOnly>\n                                        <span className='rioglyph rioglyph-remove text-size-14' />\n                                    </Button>\n                                </div>\n                            </motion.div>\n                        </motion.div>\n                    ))}\n                </AnimatePresence>\n            </div>\n            <div className='margin-top-15'>{dummyText}</div>\n        </div>\n    );\n};"
-            },
-            {
-              "label": "HTML",
-              "language": "html",
-              "code": "<div>\n    <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Add Item</button>\n    <div class=\"border rounded bg-white padding-15 margin-top-25 overflow-hidden\">\n        <div style=\"height: auto;\">\n            <div style=\"opacity: 1;\">\n                <div class=\"display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only\">\n                    <div>Item T8IQ5N3PGI</div>\n                    <button type=\"button\" class=\"btn btn-muted btn-sm btn-icon-only btn-component\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-remove text-size-14\">\n                        </span>\n                    </button>\n                </div>\n            </div>\n        </div>\n        <div style=\"height: auto;\">\n            <div style=\"opacity: 1;\">\n                <div class=\"display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only\">\n                    <div>Item QUEP70WQ4J</div>\n                    <button type=\"button\" class=\"btn btn-muted btn-sm btn-icon-only btn-component\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-remove text-size-14\">\n                        </span>\n                    </button>\n                </div>\n            </div>\n        </div>\n        <div style=\"height: auto;\">\n            <div style=\"opacity: 1;\">\n                <div class=\"display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only\">\n                    <div>Item U3LH1YBJI2</div>\n                    <button type=\"button\" class=\"btn btn-muted btn-sm btn-icon-only btn-component\" tabindex=\"0\">\n                        <span class=\"rioglyph rioglyph-remove text-size-14\">\n                        </span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"margin-top-15\">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>\n</div>"
-            }
-          ]
-        },
-        {
-          "caption": "Example 4",
-          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Load Items</button><ul class=\"list-group margin-top-25 width-300\"><li style=\"opacity: 1; transform: none;\"><label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\"><input type=\"checkbox\" class=\"list-group-item margin-bottom-10\"><span class=\"checkbox-text\"><span><div class=\"display-flex gap-5\"><span>Item TZ5V6W1OYD</span></div></span></span></label></li><li style=\"opacity: 1; transform: none;\"><label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\"><input type=\"checkbox\" class=\"list-group-item margin-bottom-10\"><span class=\"checkbox-text\"><span><div class=\"display-flex gap-5\"><span>Item 9KUDIUKG57</span></div></span></span></label></li><li style=\"opacity: 1; transform: none;\"><label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\"><input type=\"checkbox\" class=\"list-group-item margin-bottom-10\"><span class=\"checkbox-text\"><span><div class=\"display-flex gap-5\"><span>Item XN40M4M8Y8</span></div></span></span></label></li><li style=\"opacity: 1; transform: none;\"><label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\"><input type=\"checkbox\" class=\"list-group-item margin-bottom-10\"><span class=\"checkbox-text\"><span><div class=\"display-flex gap-5\"><span>Item IA501W1S8L</span></div></span></span></label></li><li style=\"opacity: 1; transform: none;\"><label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\"><input type=\"checkbox\" class=\"list-group-item margin-bottom-10\"><span class=\"checkbox-text\"><span><div class=\"display-flex gap-5\"><span>Item 9GBYWQUU6R</span></div></span></span></label></li><li style=\"opacity: 1; transform: none;\"><label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\"><input type=\"checkbox\" class=\"list-group-item margin-bottom-10\"><span class=\"checkbox-text\"><span><div class=\"display-flex gap-5\"><span>Item 9TP2B7VZUJ</span></div></span></span></label></li></ul></div></div>",
-          "tabs": [
-            {
-              "label": "React",
-              "language": "tsx",
-              "code": "import { useState } from 'react';\n\nimport { AnimatePresence, motion } from '@rio-cloud/rio-uikit/framer-motion';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport Checkbox from '@rio-cloud/rio-uikit/Checkbox';\n\nconst getRandomString = () => (Math.random() + 1).toString(36).toUpperCase().substring(2);\nconst generateItems = () => Array.from({ length: 6 }, () => getRandomString());\n\nexport default () => {\n    const [items, setItems] = useState([...generateItems()]);\n\n    const handleGenerateItem = () => setItems(generateItems());\n\n    return (\n        <div>\n            <Button onClick={handleGenerateItem}>Load Items</Button>\n            <ul className='list-group margin-top-25 width-300'>\n                <AnimatePresence initial={false}>\n                    {items.map((item, index) => (\n                        <motion.li\n                            key={item}\n                            variants={{\n                                hidden: { opacity: 0, y: -50 },\n                                visible: index => ({\n                                    opacity: 1,\n                                    y: 0,\n                                    transition: {\n                                        delay: index * 0.1,\n                                    },\n                                }),\n                            }}\n                            initial='hidden'\n                            animate='visible'\n                            custom={index}\n                        >\n                            <Checkbox className='list-group-item margin-bottom-10'>\n                                <div className='display-flex gap-5'>\n                                    <span>Item {item}</span>\n                                </div>\n                            </Checkbox>\n                        </motion.li>\n                    ))}\n                </AnimatePresence>\n            </ul>\n        </div>\n    );\n};"
-            },
-            {
-              "label": "HTML",
-              "language": "html",
-              "code": "<div>\n    <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Load Items</button>\n    <ul class=\"list-group margin-top-25 width-300\">\n        <li style=\"opacity: 1; transform: none;\">\n            <label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\">\n                <input type=\"checkbox\" class=\"list-group-item margin-bottom-10\">\n                <span class=\"checkbox-text\">\n                    <span>\n                        <div class=\"display-flex gap-5\">\n                            <span>Item TZ5V6W1OYD</span>\n                        </div>\n                    </span>\n                </span>\n            </label>\n        </li>\n        <li style=\"opacity: 1; transform: none;\">\n            <label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\">\n                <input type=\"checkbox\" class=\"list-group-item margin-bottom-10\">\n                <span class=\"checkbox-text\">\n                    <span>\n                        <div class=\"display-flex gap-5\">\n                            <span>Item 9KUDIUKG57</span>\n                        </div>\n                    </span>\n                </span>\n            </label>\n        </li>\n        <li style=\"opacity: 1; transform: none;\">\n            <label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\">\n                <input type=\"checkbox\" class=\"list-group-item margin-bottom-10\">\n                <span class=\"checkbox-text\">\n                    <span>\n                        <div class=\"display-flex gap-5\">\n                            <span>Item XN40M4M8Y8</span>\n                        </div>\n                    </span>\n                </span>\n            </label>\n        </li>\n        <li style=\"opacity: 1; transform: none;\">\n            <label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\">\n                <input type=\"checkbox\" class=\"list-group-item margin-bottom-10\">\n                <span class=\"checkbox-text\">\n                    <span>\n                        <div class=\"display-flex gap-5\">\n                            <span>Item IA501W1S8L</span>\n                        </div>\n                    </span>\n                </span>\n            </label>\n        </li>\n        <li style=\"opacity: 1; transform: none;\">\n            <label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\">\n                <input type=\"checkbox\" class=\"list-group-item margin-bottom-10\">\n                <span class=\"checkbox-text\">\n                    <span>\n                        <div class=\"display-flex gap-5\">\n                            <span>Item 9GBYWQUU6R</span>\n                        </div>\n                    </span>\n                </span>\n            </label>\n        </li>\n        <li style=\"opacity: 1; transform: none;\">\n            <label class=\"checkbox list-group-item margin-bottom-10\" tabindex=\"0\">\n                <input type=\"checkbox\" class=\"list-group-item margin-bottom-10\">\n                <span class=\"checkbox-text\">\n                    <span>\n                        <div class=\"display-flex gap-5\">\n                            <span>Item 9TP2B7VZUJ</span>\n                        </div>\n                    </span>\n                </span>\n            </label>\n        </li>\n    </ul>\n</div>"
-            }
-          ]
-        }
-      ]
-    }
-  ],
-  "see_also": []
-}

package/data/pages/Components/components/appheader.json

@@ -1,291 +0,0 @@
-{
-  "metadata": {
-    "captured_at": "2025-11-21T12:07:04.142Z",
-    "source": "https://uikit.developers.rio.cloud/#components/appHeader",
-    "category": "Components",
-    "section": "Application",
-    "slug": "components/appheader",
-    "version": "v1.13.2",
-    "hash_algorithm": "sha256",
-    "hash": "a1486a960820924f5e995469c4252a5a5a6a229861d96124b8d675fe2fb15870"
-  },
-  "title": "ApplicationHeader",
-  "lead": "This is the header component for all services. All navigation link components that are passed into the header should be based on react-router",
-  "content": [
-    {
-      "heading": "ApplicationHeader",
-      "body": "",
-      "examples": [
-        {
-          "caption": "Example 1",
-          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"ApplicationLayout\"><div class=\"ApplicationLayoutHeader\" id=\"ApplicationLayoutHeader\"><nav class=\"ApplicationHeader user-select-none\"><div class=\"navbar-header\"><span class=\"navbar-brand home-icon\"><a aria-current=\"page\" class=\"active\" href=\"#\"></a></span></div><ul class=\"ModuleNavigation AppMenu user-select-none hasModules appNavigatorClassName\"><li class=\"dropdown\"><a class=\"ModuleNavigation-dropdown dropdown-toggle justify-content-between\" role=\"button\" id=\"basic-nav-dropdown\"><span>ApplicationHeader</span><span class=\"caret\"></span></a><ul role=\"menu\" class=\"dropdown-menu ModuleNavigation-dropdown-menu\"><li role=\"presentation\"><div class=\"display-flex flex-column padding-10\"><a href=\"/\" target=\"_top\" class=\"rounded link bg-white display-flex align-items-start gap-15 user-select-none text-decoration-none hover-bg-lightest padding-15\"><div class=\"position-relative padding-20 border border-size-2 border-color-primary bg-white\"><div class=\"position-absolute inset-0 display-grid place-items-center\"><span class=\"text-size-20 rioglyph rioglyph-number-1\"></span></div></div><div class=\"flex-1-1\"><div class=\"line-height-125rel margin-top--3\"><div class=\"text-size-18 text-medium margin-bottom-3 text-color-primary\">Headline 1</div><div class=\"text-size-14 text-color-darkest text-capitalize\">Subline 1</div></div></div></a><a href=\"/\" target=\"_top\" class=\"rounded link bg-white display-flex align-items-start gap-15 user-select-none text-decoration-none hover-bg-lightest padding-15\"><div class=\"position-relative padding-20 border border-size-2 border-color-primary bg-white\"><div class=\"position-absolute inset-0 display-grid place-items-center\"><span class=\"text-size-20 rioglyph rioglyph-number-2\"></span></div></div><div class=\"flex-1-1\"><div class=\"line-height-125rel margin-top--3\"><div class=\"text-size-18 text-medium margin-bottom-3 text-color-primary\">Headline 2</div><div class=\"text-size-14 text-color-darkest text-capitalize\">Subline 2</div></div></div></a><a href=\"/\" target=\"_top\" class=\"rounded link bg-white display-flex align-items-start gap-15 user-select-none text-decoration-none hover-bg-lightest padding-15\"><div class=\"position-relative padding-20 border border-size-2 border-color-primary bg-white\"><div class=\"position-absolute inset-0 display-grid place-items-center\"><span class=\"text-size-20 rioglyph rioglyph-number-3\"></span></div></div><div class=\"flex-1-1\"><div class=\"line-height-125rel margin-top--3\"><div class=\"text-size-18 text-medium margin-bottom-3 text-color-primary\">Headline 3</div><div class=\"text-size-14 text-color-darkest text-capitalize\">Subline 3</div></div></div></a></div></li></ul></li></ul><ul class=\"SubmoduleNavigation nav\"><li class=\"submodule \" data-nav-item-key=\"A\"><a aria-current=\"page\" class=\"active\" href=\"#components/appHeader\">Test A</a></li><li class=\"submodule \" data-nav-item-key=\"B\"><a href=\"#2\">Test B</a></li><li class=\"submodule \" data-nav-item-key=\"C\"><a href=\"#3\">Test C</a></li><li class=\"submodule \" data-nav-item-key=\"D\"><a href=\"#4\">Test D</a></li><li class=\"CollapsedDropdown dropdown \"><a id=\"basic-nav-dropdown\" role=\"button\" class=\"dropdown-toggle text-color-gray\" aria-haspopup=\"true\" aria-expanded=\"true\"><span class=\"rioglyph rioglyph-option-horizontal\" aria-hidden=\"true\"></span></a><ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"basic-nav-dropdown\"><li class=\"submodule\" data-nav-item-key=\"E\"><a href=\"#5\">Test E</a></li></ul></li></ul><ul class=\"ApplicationActionBar nav navbar-nav navbar-right \"><li role=\"presentation\" class=\"navigationItem\"><div class=\"ActionBarItem\"><div class=\"ActionBarItemIcon\"><span class=\"icon rioglyph rioglyph-cog\"></span></div></div></li><li role=\"presentation\" class=\"navigationItem\"><div class=\"ActionBarItem\"><div class=\"ActionBarItemIcon\"><span class=\"icon rioglyph rioglyph-user\"></span></div></div></li></ul></nav></div></div><div class=\"margin-top-20 margin-bottom-20\"><button type=\"button\" class=\"btn btn-default\">Load different Nav Items</button></div></div></div>",
-          "tabs": [
-            {
-              "label": "React",
-              "language": "tsx",
-              "code": "import { useEffect, useRef, useState } from 'react';\nimport { NavLink } from 'react-router-dom';\n\nimport ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';\nimport ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';\nimport ActionBarItem from '@rio-cloud/rio-uikit/ActionBarItem';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\nimport Dialog from '@rio-cloud/rio-uikit/Dialog';\nimport Checkbox from '@rio-cloud/rio-uikit/Checkbox';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';\n\nconst manyNavItems = [\n    { key: 'A', route: <NavLink to='/components/appHeader'>Test A</NavLink> },\n    { key: 'B', route: <NavLink to='/2'>Test B</NavLink> },\n    { key: 'C', route: <NavLink to='/3'>Test C</NavLink> },\n    { key: 'D', route: <NavLink to='/4'>Test D</NavLink> },\n    { key: 'E', route: <NavLink to='/5'>Test E</NavLink> },\n];\n\nconst fewNavItems = [\n    { key: '1', route: <NavLink to='/6'>Lorem</NavLink> },\n    { key: '2', route: <NavLink to='/7'>Ipsum</NavLink> },\n    { key: '3', route: <NavLink to='/8'>Dolor</NavLink> },\n];\n\nconst fakeAppNavigator = (\n    <div className='display-flex flex-column padding-10'>\n        {[1, 2, 3].map(index => (\n            <a\n                key={index}\n                href='/'\n                target='_top'\n                className='rounded link bg-white display-flex align-items-start gap-15 user-select-none text-decoration-none hover-bg-lightest padding-15'\n            >\n                <div className='position-relative padding-20 border border-size-2 border-color-primary bg-white'>\n                    <div className='position-absolute inset-0 display-grid place-items-center'>\n                        <span className={`text-size-20 rioglyph rioglyph-number-${index}`} />\n                    </div>\n                </div>\n                <div className='flex-1-1'>\n                    <div className='line-height-125rel margin-top--3'>\n                        <div className='text-size-18 text-medium margin-bottom-3 text-color-primary'>\n                            Headline {index}\n                        </div>\n                        <div className='text-size-14 text-color-darkest text-capitalize'>Subline {index}</div>\n                    </div>\n                </div>\n            </a>\n        ))}\n    </div>\n);\n\n// We use this component to simulate a pre rendered component\nconst PreRendered = () => {\n    const [index, setIndex] = useState(0);\n\n    useEffect(() => {\n        let counter = 0;\n        const id = setInterval(() => {\n            setIndex(counter++);\n        }, 1000);\n        return () => clearInterval(id);\n    }, []);\n\n    return (\n        <div className='display-flex flex-row justify-content-between align-items-center'>\n            <div>\n                <span className='margin-right-5 text-color-gray'>Counter:</span>\n                <span>{index}</span>\n            </div>\n            <div>\n                <button\n                    className='btn btn-default'\n                    type='button'\n                    onClick={() => Notification.info(`Button clicked with ${index}`)}\n                >\n                    Click Me\n                </button>\n            </div>\n        </div>\n    );\n};\n\nconst AccountMenuComponent = (\n    <ActionBarItem id='accountMenu'>\n        <ActionBarItem.Icon>\n            <span className='icon rioglyph rioglyph-user' />\n        </ActionBarItem.Icon>\n        <ActionBarItem.Popover title='Prerending the Popover' useOffscreen>\n            <PreRendered />\n        </ActionBarItem.Popover>\n    </ActionBarItem>\n);\n\nconst AppHeaderExample = () => {\n    const [navItems, setNavItems] = useState(manyNavItems);\n\n    const [showSettingsDialog, setShowSettingsDialog] = useState(false);\n\n    const headerRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        if (headerRef.current) {\n            console.log('Header mounted');\n        }\n    }, [headerRef.current]);\n\n    const handleOnClick = () => {\n        setNavItems(prevNavItems => (prevNavItems === fewNavItems ? manyNavItems : fewNavItems));\n    };\n\n    const sampleActionBarComponent = (\n        <ActionBarItem id='cog'>\n            <ActionBarItem.Icon onClick={() => setShowSettingsDialog(true)}>\n                <span className='icon rioglyph rioglyph-cog' />\n            </ActionBarItem.Icon>\n            <Dialog\n                show={showSettingsDialog}\n                body={\n                    <div>\n                        <div className='margin-bottom-15'>\n                            <i>\n                                This is the place for some service specific settings, that are not global for all\n                                services.\n                            </i>\n                        </div>\n                        <div className='margin-bottom-25'>\n                            <legend>Category one settings</legend>\n                            <div className='form-group'>\n                                <label className='width-100pct'>\n                                    <div>Lorem ipsum</div>\n                                    <input\n                                        className='form-control margin-y-5'\n                                        type='text'\n                                        placeholder='Lorem Ipsum Dolor'\n                                    />\n                                </label>\n                                <label className='width-100pct'>\n                                    <div className='margin-bottom-5'>Lorem ipsum</div>\n                                    <div className='input-group'>\n                                        <span className='input-group-addon'>\n                                            <span className='rioglyph rioglyph-user' />\n                                        </span>\n                                        <input className='form-control' type='text' placeholder='Lorem Ipsum Dolor' />\n                                    </div>\n                                </label>\n                            </div>\n                        </div>\n                        <div>\n                            <legend>Category two settings</legend>\n                            <div className='form-group space-y-10'>\n                                <Checkbox>Lorem ipsum solor</Checkbox>\n                                <Checkbox defaultChecked>Ipsum dolor sit</Checkbox>\n                                <Checkbox>Dolor sit amet</Checkbox>\n                            </div>\n                        </div>\n                    </div>\n                }\n                title='Service settings'\n                footer={\n                    <ButtonToolbar>\n                        <Button onClick={() => setShowSettingsDialog(false)}>Discard</Button>\n                        <Button bsStyle='primary' onClick={() => setShowSettingsDialog(false)}>\n                            Apply changes\n                        </Button>\n                    </ButtonToolbar>\n                }\n                onClose={() => setShowSettingsDialog(false)}\n                bsSize={Dialog.SIZE_SM}\n                showCloseButton\n            />\n        </ActionBarItem>\n    );\n\n    return (\n        <div>\n            <ApplicationLayout>\n                <ApplicationLayout.Header>\n                    <ApplicationHeader\n                        ref={headerRef}\n                        label='ApplicationHeader'\n                        homeRoute={<NavLink to='/' />}\n                        appNavigator={fakeAppNavigator}\n                        appNavigatorClassName='appNavigatorClassName'\n                        navItems={navItems}\n                        onToggleAppMenu={isMenuOpen => console.log({ isMenuOpen })}\n                        actionBarItems={[sampleActionBarComponent, AccountMenuComponent]}\n                    />\n                </ApplicationLayout.Header>\n            </ApplicationLayout>\n            <div className='margin-top-20 margin-bottom-20'>\n                <button type='button' className='btn btn-default' onClick={handleOnClick}>\n                    Load different Nav Items\n                </button>\n            </div>\n        </div>\n    );\n};\n\nexport default AppHeaderExample;"
-            },
-            {
-              "label": "HTML",
-              "language": "html",
-              "code": "<div>\n    <div class=\"ApplicationLayout\">\n        <div class=\"ApplicationLayoutHeader\" id=\"ApplicationLayoutHeader\">\n            <nav class=\"ApplicationHeader user-select-none\">\n                <div class=\"navbar-header\">\n                    <span class=\"navbar-brand home-icon\">\n                        <a aria-current=\"page\" class=\"active\" href=\"#\">\n                        </a>\n                    </span>\n                </div>\n                <ul class=\"ModuleNavigation AppMenu user-select-none hasModules appNavigatorClassName\">\n                    <li class=\"dropdown\">\n                        <a class=\"ModuleNavigation-dropdown dropdown-toggle justify-content-between\" role=\"button\" id=\"basic-nav-dropdown\">\n                            <span>ApplicationHeader</span>\n                            <span class=\"caret\">\n                            </span>\n                        </a>\n                        <ul role=\"menu\" class=\"dropdown-menu ModuleNavigation-dropdown-menu\">\n                            <li role=\"presentation\">\n                                <div class=\"display-flex flex-column padding-10\">\n                                    <a href=\"/\" target=\"_top\" class=\"rounded link bg-white display-flex align-items-start gap-15 user-select-none text-decoration-none hover-bg-lightest padding-15\">\n                                        <div class=\"position-relative padding-20 border border-size-2 border-color-primary bg-white\">\n                                            <div class=\"position-absolute inset-0 display-grid place-items-center\">\n                                                <span class=\"text-size-20 rioglyph rioglyph-number-1\">\n                                                </span>\n                                            </div>\n                                        </div>\n                                        <div class=\"flex-1-1\">\n                                            <div class=\"line-height-125rel margin-top--3\">\n                                                <div class=\"text-size-18 text-medium margin-bottom-3 text-color-primary\">Headline 1</div>\n                                                <div class=\"text-size-14 text-color-darkest text-capitalize\">Subline 1</div>\n                                            </div>\n                                        </div>\n                                    </a>\n                                    <a href=\"/\" target=\"_top\" class=\"rounded link bg-white display-flex align-items-start gap-15 user-select-none text-decoration-none hover-bg-lightest padding-15\">\n                                        <div class=\"position-relative padding-20 border border-size-2 border-color-primary bg-white\">\n                                            <div class=\"position-absolute inset-0 display-grid place-items-center\">\n                                                <span class=\"text-size-20 rioglyph rioglyph-number-2\">\n                                                </span>\n                                            </div>\n                                        </div>\n                                        <div class=\"flex-1-1\">\n                                            <div class=\"line-height-125rel margin-top--3\">\n                                                <div class=\"text-size-18 text-medium margin-bottom-3 text-color-primary\">Headline 2</div>\n                                                <div class=\"text-size-14 text-color-darkest text-capitalize\">Subline 2</div>\n                                            </div>\n                                        </div>\n                                    </a>\n                                    <a href=\"/\" target=\"_top\" class=\"rounded link bg-white display-flex align-items-start gap-15 user-select-none text-decoration-none hover-bg-lightest padding-15\">\n                                        <div class=\"position-relative padding-20 border border-size-2 border-color-primary bg-white\">\n                                            <div class=\"position-absolute inset-0 display-grid place-items-center\">\n                                                <span class=\"text-size-20 rioglyph rioglyph-number-3\">\n                                                </span>\n                                            </div>\n                                        </div>\n                                        <div class=\"flex-1-1\">\n                                            <div class=\"line-height-125rel margin-top--3\">\n                                                <div class=\"text-size-18 text-medium margin-bottom-3 text-color-primary\">Headline 3</div>\n                                                <div class=\"text-size-14 text-color-darkest text-capitalize\">Subline 3</div>\n                                            </div>\n                                        </div>\n                                    </a>\n                                </div>\n                            </li>\n                        </ul>\n                    </li>\n                </ul>\n                <ul class=\"SubmoduleNavigation nav\">\n                    <li class=\"submodule \" data-nav-item-key=\"A\">\n                        <a aria-current=\"page\" class=\"active\" href=\"#components/appHeader\">Test A</a>\n                    </li>\n                    <li class=\"submodule \" data-nav-item-key=\"B\">\n                        <a href=\"#2\">Test B</a>\n                    </li>\n                    <li class=\"submodule \" data-nav-item-key=\"C\">\n                        <a href=\"#3\">Test C</a>\n                    </li>\n                    <li class=\"submodule \" data-nav-item-key=\"D\">\n                        <a href=\"#4\">Test D</a>\n                    </li>\n                    <li class=\"CollapsedDropdown dropdown \">\n                        <a id=\"basic-nav-dropdown\" role=\"button\" class=\"dropdown-toggle text-color-gray\" aria-haspopup=\"true\" aria-expanded=\"true\">\n                            <span class=\"rioglyph rioglyph-option-horizontal\" aria-hidden=\"true\">\n                            </span>\n                        </a>\n                        <ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"basic-nav-dropdown\">\n                            <li class=\"submodule\" data-nav-item-key=\"E\">\n                                <a href=\"#5\">Test E</a>\n                            </li>\n                        </ul>\n                    </li>\n                </ul>\n                <ul class=\"ApplicationActionBar nav navbar-nav navbar-right \">\n                    <li role=\"presentation\" class=\"navigationItem\">\n                        <div class=\"ActionBarItem\">\n                            <div class=\"ActionBarItemIcon\">\n                                <span class=\"icon rioglyph rioglyph-cog\">\n                                </span>\n                            </div>\n                        </div>\n                    </li>\n                    <li role=\"presentation\" class=\"navigationItem\">\n                        <div class=\"ActionBarItem\">\n                            <div class=\"ActionBarItemIcon\">\n                                <span class=\"icon rioglyph rioglyph-user\">\n                                </span>\n                            </div>\n                        </div>\n                    </li>\n                </ul>\n            </nav>\n        </div>\n    </div>\n    <div class=\"margin-top-20 margin-bottom-20\">\n        <button type=\"button\" class=\"btn btn-default\">Load different Nav Items</button>\n    </div>\n</div>"
-            },
-            {
-              "label": "Props",
-              "language": "json",
-              "code": null,
-              "props": [
-                {
-                  "heading": null,
-                  "rows": [
-                    {
-                      "name": "label",
-                      "type": "Node",
-                      "default": "",
-                      "description": "The service name shown as the navigator dropdown label."
-                    },
-                    {
-                      "name": "homeRoute",
-                      "type": "Node",
-                      "default": "",
-                      "description": "The home URL that shall be used for the home button. Pass a react-router-dom NavLink as homeRoute into the header. For example: <NavLink to='https://home.rio.cloud' />"
-                    },
-                    {
-                      "name": "showHomeIcon",
-                      "type": "Boolean",
-                      "default": "true",
-                      "description": "Defines to either show the home icon or the RIO logo as brand logo."
-                    },
-                    {
-                      "name": "appNavigator",
-                      "type": "Node",
-                      "default": "",
-                      "description": "The component for the navigation between apps which will be shown inside the main dropdown. Platform apps may use the default AppNavigator but there are also other cases like support apps where it's just a simple list In this case, use the prop appMenuItems. If no appNavigator is defined, the dropdown menu will not be rendered."
-                    },
-                    {
-                      "name": "appNavigatorClassName",
-                      "type": "String",
-                      "default": "",
-                      "description": "Additional class names that are added to the appNavigator."
-                    },
-                    {
-                      "name": "appMenuItems",
-                      "type": "Array",
-                      "default": "",
-                      "description": "List of application navigation link components."
-                    },
-                    {
-                      "name": "└key",
-                      "type": "String",
-                      "default": "",
-                      "description": "Unique key for the navigation component."
-                    },
-                    {
-                      "name": "└route",
-                      "type": "Node",
-                      "default": "",
-                      "description": "The navigation link component used for rendering the name and for routing. For example: <NavLink to='/app1'>{'App 1'}</NavLink>"
-                    },
-                    {
-                      "name": "navItems",
-                      "type": "Array",
-                      "default": "",
-                      "description": "List of sub-module navigation component of an app. Items collapse into a dropdown if remaining space in the header is not sufficient."
-                    },
-                    {
-                      "name": "└key",
-                      "type": "String",
-                      "default": "",
-                      "description": "Unique key for the sub-module navigation component of an app."
-                    },
-                    {
-                      "name": "└route",
-                      "type": "Node",
-                      "default": "",
-                      "description": "The navigation link component used for rendering the name and for routing. For example: <NavLink to='/app/ipsum'>{'Lorem ipsum'}</NavLink>"
-                    },
-                    {
-                      "name": "actionBarItems",
-                      "type": "Array of Nodes",
-                      "default": "[]",
-                      "description": "List of external smart components like the rio-accountmenu or application owned components such as a ServiceInfo icon. These components are based on the ActionBarItem"
-                    },
-                    {
-                      "name": "onToggleAppMenu",
-                      "type": "(isOpen: boolean) => void",
-                      "default": "",
-                      "description": "Callback function triggered when the application menu is open or closed."
-                    },
-                    {
-                      "name": "className",
-                      "type": "String",
-                      "default": "",
-                      "description": "Additional class names that are added to the wrapper component."
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "heading": "ActionBarItem",
-      "body": "The ActionBarItem components consists mainly of two sub-components: Icon and Popover. The Icon component is mandatory and is shown in the header. The Popover component is optional and it's content will be shown inside a Popover.",
-      "examples": [
-        {
-          "caption": "Example 2",
-          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"ApplicationLayout\"><div class=\"ApplicationLayoutHeader\" id=\"ApplicationLayoutHeader\"><nav class=\"ApplicationHeader user-select-none\"><div class=\"navbar-header\"><span class=\"navbar-brand home-icon\"></span></div><ul class=\"ModuleNavigation AppMenu user-select-none pointer-events-none\"><li class=\"dropdown\"><a class=\"ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive\" role=\"button\" id=\"basic-nav-dropdown\"><span>ApplicationHeader</span></a></li></ul><ul class=\"SubmoduleNavigation nav\"></ul><ul class=\"ApplicationActionBar nav navbar-nav navbar-right \"><li role=\"presentation\" class=\"navigationItem\"><div class=\"ActionBarItem\"><div class=\"ActionBarItemIcon\"><span class=\"icon rioglyph rioglyph-support\"></span></div></div></li><li role=\"presentation\" class=\"navigationItem\"><div class=\"ActionBarItem myItem\"><div class=\"ActionBarItemIcon\"><span class=\"icon rioglyph rioglyph-info-sign\"></span></div></div></li><li role=\"presentation\" class=\"navigationItem\"><div class=\"ActionBarItem\"><div class=\"ActionBarItemIcon\"><span class=\"icon rioglyph rioglyph-notification\"></span><span class=\"badge badge-primary badge-indicator badge-indicator-pinging\">4</span></div></div></li><li role=\"presentation\" class=\"navigationItem\"><div class=\"ActionBarItem\"><div class=\"ActionBarItemIcon\"><span class=\"icon rioglyph rioglyph-user\"></span></div></div></li></ul></nav></div></div></div>",
-          "tabs": [
-            {
-              "label": "React",
-              "language": "tsx",
-              "code": "import React, { useState, type ChangeEvent } from 'react';\nimport { Link } from 'react-router-dom';\n\nimport ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';\nimport ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';\nimport ActionBarItem from '@rio-cloud/rio-uikit/ActionBarItem';\nimport Select from '@rio-cloud/rio-uikit/Select';\nimport Fade from '@rio-cloud/rio-uikit/Fade';\nimport ToggleButton from '@rio-cloud/rio-uikit/ToggleButton';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\nconst ActionBarItemsExample = () => {\n    const [showFeedbackNotification, setShowFeedbackNotification] = useState(false);\n    const [feedbackButtonText, setFeedbackButtonText] = useState('Send feedback');\n    const [value, setValue] = useState('');\n    const [rows, setRows] = useState(5);\n    const [minRows, setMinRows] = useState(5);\n    const [maxRows, setMaxRows] = useState(30);\n\n    const handleFeedbackCategory = (id: string) => {\n        switch (id) {\n            case '1':\n                setFeedbackButtonText('Send usability feedback');\n                break;\n            case '2':\n                setFeedbackButtonText('Send bug report');\n                break;\n            case '3':\n                setFeedbackButtonText('Send feature request');\n                break;\n            default:\n                setFeedbackButtonText('Send feedback');\n                break;\n        }\n    };\n\n    const handleAutosize = (event: ChangeEvent<HTMLTextAreaElement>) => {\n        const textareaLineHeight = 20.1; // 1.42857143 + 14px\n\n        const previousRows = event.target.rows;\n        event.target.rows = minRows; // reset number of rows in textarea\n\n        const currentRows = Math.floor(event.target.scrollHeight / textareaLineHeight);\n\n        if (currentRows === previousRows) {\n            event.target.rows = currentRows;\n        }\n\n        if (currentRows >= maxRows) {\n            event.target.rows = maxRows;\n            event.target.scrollTop = event.target.scrollHeight;\n        }\n\n        setValue(event.target.value);\n        setRows(currentRows < maxRows ? currentRows : maxRows);\n    };\n\n    const title = (\n        <div>\n            <span>Service XYZ</span>\n            <span className='text-color-gray margin-left-10'>v1.1.0</span>\n        </div>\n    );\n\n    const FeedbackComponent = (\n        <ActionBarItem id='feedback' hidePopoverOnClick={false} popoverWidth={400}>\n            <ActionBarItem.Icon>\n                <span className='icon rioglyph rioglyph-support' />\n            </ActionBarItem.Icon>\n            <ActionBarItem.Popover title='Customer care center' className='padding-20'>\n                <div className='padding-top-5 padding-bottom-5'>\n                    <div className='text-center padding-top-10 padding-bottom-25'>\n                        <a className='text-size-h4' hre='tel:0049-0800-22550746'>\n                            Hotline +(49) 08 00 / 22 55 07 46\n                        </a>\n                        <div className='text-size-16'>Monday - Friday: 8:00 am - 04:30 pm (MEZ)</div>\n                    </div>\n                    <form>\n                        <div className='form-group'>\n                            <input className='form-control' type='email' placeholder='logged.in@user.email' disabled />\n                        </div>\n                        <div className='form-group'>\n                            <Select\n                                placeholder='Type of feedback'\n                                options={[\n                                    {\n                                        id: '1',\n                                        label: 'Usability',\n                                    },\n                                    {\n                                        id: '2',\n                                        label: 'Bug report',\n                                    },\n                                    {\n                                        id: '3',\n                                        label: 'Missing feature',\n                                    },\n                                    {\n                                        id: '4',\n                                        label: 'Other',\n                                    },\n                                ]}\n                                onChange={item => handleFeedbackCategory(item.id)}\n                            />\n                        </div>\n                        <div className='form-group'>\n                            <textarea\n                                rows={rows}\n                                value={value}\n                                className='form-control'\n                                onChange={event => handleAutosize(event)}\n                            />\n                        </div>\n                        <div className='display-flex justify-content-end'>\n                            <ToggleButton\n                                className='margin-bottom-10'\n                                active={showFeedbackNotification}\n                                onClick={() => setShowFeedbackNotification(!showFeedbackNotification)}\n                            >\n                                {feedbackButtonText}\n                            </ToggleButton>\n                        </div>\n                        <Fade show={showFeedbackNotification}>\n                            <div className='alert alert-success margin-bottom-0'>\n                                <strong>Thank you for your feedback!</strong> We will use your feedback for future\n                                improvement. In case it`s necessary, we will contact you for further clarification.\n                            </div>\n                        </Fade>\n                    </form>\n                </div>\n            </ActionBarItem.Popover>\n        </ActionBarItem>\n    );\n\n    const ServiceInfo = () => (\n        <ActionBarItem.List>\n            <ActionBarItem.ListItem icon='rioglyph-hand-right' onClick={() => Notification.info('Show welcome dialog')}>\n                <div className='display-flex align-items-center gap-5'>\n                    <span>Welcome</span>\n                    <span className='badge badge-primary'>1</span>\n                </div>\n            </ActionBarItem.ListItem>\n            <ActionBarItem.ListItem\n                icon='rioglyph-exclamation-sign'\n                onClick={() => Notification.info(\"Show what's new dialog\")}\n            >\n                What's new?\n            </ActionBarItem.ListItem>\n            <ActionBarItem.ListItem\n                icon='rioglyph-question-sign'\n                onClick={() => Notification.info('Show features dialog')}\n            >\n                Features\n            </ActionBarItem.ListItem>\n            <ActionBarItem.ListSeparator />\n            <ActionBarItem.ListItem icon='rioglyph-envelope' hasLink>\n                <Link to='/components/appHeader'>Feedback</Link>\n            </ActionBarItem.ListItem>\n        </ActionBarItem.List>\n    );\n\n    const ServiceInfoComponent = (\n        <ActionBarItem id='serviceInfo' className='myItem'>\n            <ActionBarItem.Icon>\n                <span className='icon rioglyph rioglyph-info-sign' />\n            </ActionBarItem.Icon>\n            <ActionBarItem.Popover className='myItemPopover' title={title}>\n                <ServiceInfo />\n            </ActionBarItem.Popover>\n        </ActionBarItem>\n    );\n\n    const AccountMenuComponent = (\n        <ActionBarItem>\n            <ActionBarItem.Icon>\n                <span className='icon rioglyph rioglyph-user' />\n            </ActionBarItem.Icon>\n            <ActionBarItem.Popover>\n                <ActionBarItem.List>\n                    <div className='padding-10'>\n                        <div className='text-medium'>This is just an example</div>\n                        <div>The real content goes here...</div>\n                    </div>\n                    <ActionBarItem.ListSeparator />\n                    <ActionBarItem.ListItem>\n                        <Button\n                            bsStyle='default'\n                            variant='link'\n                            iconName='rioglyph-logout'\n                            onClick={() => Notification.info('Logout')}\n                        >\n                            <span className='hover-text-decoration-none'>Logout</span>\n                        </Button>\n                    </ActionBarItem.ListItem>\n                </ActionBarItem.List>\n            </ActionBarItem.Popover>\n        </ActionBarItem>\n    );\n\n    const Notifications = (\n        <ActionBarItem>\n            <ActionBarItem.Icon>\n                <span className='icon rioglyph rioglyph-notification' />\n                <span className='badge badge-primary badge-indicator badge-indicator-pinging'>4</span>\n            </ActionBarItem.Icon>\n        </ActionBarItem>\n    );\n\n    return (\n        <ApplicationLayout>\n            <ApplicationLayout.Header>\n                <ApplicationHeader\n                    label='ApplicationHeader'\n                    actionBarItems={[FeedbackComponent, ServiceInfoComponent, Notifications, AccountMenuComponent]}\n                />\n            </ApplicationLayout.Header>\n        </ApplicationLayout>\n    );\n};\n\nexport default ActionBarItemsExample;"
-            },
-            {
-              "label": "HTML",
-              "language": "html",
-              "code": "<div class=\"ApplicationLayout\">\n    <div class=\"ApplicationLayoutHeader\" id=\"ApplicationLayoutHeader\">\n        <nav class=\"ApplicationHeader user-select-none\">\n            <div class=\"navbar-header\">\n                <span class=\"navbar-brand home-icon\">\n                </span>\n            </div>\n            <ul class=\"ModuleNavigation AppMenu user-select-none pointer-events-none\">\n                <li class=\"dropdown\">\n                    <a class=\"ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive\" role=\"button\" id=\"basic-nav-dropdown\">\n                        <span>ApplicationHeader</span>\n                    </a>\n                </li>\n            </ul>\n            <ul class=\"SubmoduleNavigation nav\">\n            </ul>\n            <ul class=\"ApplicationActionBar nav navbar-nav navbar-right \">\n                <li role=\"presentation\" class=\"navigationItem\">\n                    <div class=\"ActionBarItem\">\n                        <div class=\"ActionBarItemIcon\">\n                            <span class=\"icon rioglyph rioglyph-support\">\n                            </span>\n                        </div>\n                    </div>\n                </li>\n                <li role=\"presentation\" class=\"navigationItem\">\n                    <div class=\"ActionBarItem myItem\">\n                        <div class=\"ActionBarItemIcon\">\n                            <span class=\"icon rioglyph rioglyph-info-sign\">\n                            </span>\n                        </div>\n                    </div>\n                </li>\n                <li role=\"presentation\" class=\"navigationItem\">\n                    <div class=\"ActionBarItem\">\n                        <div class=\"ActionBarItemIcon\">\n                            <span class=\"icon rioglyph rioglyph-notification\">\n                            </span>\n                            <span class=\"badge badge-primary badge-indicator badge-indicator-pinging\">4</span>\n                        </div>\n                    </div>\n                </li>\n                <li role=\"presentation\" class=\"navigationItem\">\n                    <div class=\"ActionBarItem\">\n                        <div class=\"ActionBarItemIcon\">\n                            <span class=\"icon rioglyph rioglyph-user\">\n                            </span>\n                        </div>\n                    </div>\n                </li>\n            </ul>\n        </nav>\n    </div>\n</div>"
-            },
-            {
-              "label": "Props",
-              "language": "json",
-              "code": null,
-              "props": [
-                {
-                  "heading": "ActionBarItem",
-                  "rows": [
-                    {
-                      "name": "id",
-                      "type": "String",
-                      "default": "",
-                      "description": "The id is used to identify the item in the DOM. If not provided, a random id is used instead."
-                    },
-                    {
-                      "name": "title",
-                      "type": "String",
-                      "default": "",
-                      "description": "The title property for the sub component ActionBarItem.Popover. This can be a String or another component as well as a React-Intl component."
-                    },
-                    {
-                      "name": "className",
-                      "type": "String",
-                      "default": "",
-                      "description": "Additional class names that are added to the respective component. It can be defined for the parent and all sub components."
-                    },
-                    {
-                      "name": "mobileDialogBodyClassName",
-                      "type": "String",
-                      "default": "",
-                      "description": "Additional class names that are added to dialog fallback modal-body element."
-                    },
-                    {
-                      "name": "hidePopoverOnClick",
-                      "type": "Boolean",
-                      "default": "true",
-                      "description": "Defined if the popover should close when any child element is being clicked."
-                    },
-                    {
-                      "name": "popoverWidth",
-                      "type": "Number",
-                      "default": "250",
-                      "description": "Possible values are: 100, 150, 200, 250, 300, 350, 400, 450 or 500"
-                    },
-                    {
-                      "name": "useOffscreen",
-                      "type": "Boolean",
-                      "default": "",
-                      "description": "Set on ActionBarItem.Popover in order to render the Popover content in the offscreen to have it in place and loaded when the Popover is shown. This flag ignored for mobile, in order to save energy."
-                    },
-                    {
-                      "name": "children",
-                      "type": "any",
-                      "default": "",
-                      "description": "Any component given to the sub components will be within the respective area. NoteChild elements for ActionItemBar.Icon such as rioglyph or svg icons that shall be shown as icon in the header must have set the class icon"
-                    }
-                  ]
-                },
-                {
-                  "heading": "ActionBarItem.List",
-                  "rows": [
-                    {
-                      "name": "className",
-                      "type": "String",
-                      "default": "",
-                      "description": "Additional class names that are added to the wrapping list item component."
-                    }
-                  ]
-                },
-                {
-                  "heading": "ActionBarItem.ListItem",
-                  "rows": [
-                    {
-                      "name": "hasLink",
-                      "type": "Boolean",
-                      "default": "",
-                      "description": "Set it to true when you want to use the item as link item. In case, please use the Link component from react-router-dom instead of an anchor tag to prevent side effects when automatically closing the popover."
-                    },
-                    {
-                      "name": "icon",
-                      "type": "String",
-                      "default": "",
-                      "description": "The name of the icon to be used for the item."
-                    },
-                    {
-                      "name": "onClick",
-                      "type": "Function",
-                      "default": "",
-                      "description": "Callback function to be triggered when the internal button of a list item is clicked. Note: When no callback function is provided, the children are rendered as is without wrapping them in a button."
-                    },
-                    {
-                      "name": "className",
-                      "type": "String",
-                      "default": "",
-                      "description": "Additional class names that are added to the wrapping list item component."
-                    }
-                  ]
-                },
-                {
-                  "heading": "ActionBarItem.ListSeparator",
-                  "rows": [
-                    {
-                      "name": "className",
-                      "type": "String",
-                      "default": "",
-                      "description": "Additional class names that are added to the wrapping list item component."
-                    }
-                  ]
-                },
-                {
-                  "heading": "ActionBarItem.Popover",
-                  "rows": [
-                    {
-                      "name": "title",
-                      "type": "String / Node",
-                      "default": "",
-                      "description": "The popover title."
-                    },
-                    {
-                      "name": "useOffscreen",
-                      "type": "Boolean",
-                      "default": "false",
-                      "description": "Define whether the popover content shall be rendered behind the scene to pre-load content or to avoid unmounting the content component"
-                    },
-                    {
-                      "name": "className",
-                      "type": "String",
-                      "default": "",
-                      "description": "Additional class names that are added to the popover content."
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ],
-  "see_also": []
-}