@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,1492 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:45.377Z",
+    "source": "https://uikit.developers.rio.cloud/#components/dialogs",
+    "category": "Components",
+    "section": "Content",
+    "slug": "components/dialogs",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "38c7d090a783e8898449bf77109fda0700062337574cd28453995a013f28f3f4"
+  },
+  "title": "Dialog",
+  "lead": "This component allows the user to create a generic modal dialog.",
+  "content": [
+    {
+      "heading": "Dialog",
+      "body": "You can create React nodes and pass those as title, body or footer props to the Dialog component.",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"btn-toolbar margin-bottom-20\"><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Dialog</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Subtitle dialog</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Long dialog</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Long dialog with overflow</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Dialog with overflow and light background</button></div><label>Dialog sizes</label><div class=\"btn-toolbar\"><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Size xs (320px)</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Size sm (480px)</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Size md (768px - default)</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Size lg (1280px)</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Size xl (1440px)</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Size fullwidth</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Size fullheight</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Size fullheight lg</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Size fullheight xl</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Size fullscreen</button></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport Dialog from '@rio-cloud/rio-uikit/Dialog';\nimport Tooltip from '@rio-cloud/rio-uikit/Tooltip';\nimport OverlayTrigger from '@rio-cloud/rio-uikit/OverlayTrigger';\n\nimport { dummyTextExtraLong } from '../../../utils/data';\nimport { exampleTitle, exampleSubtitle, ExampleBody, exampleFullScreenBody, exampleFooter } from './DialogData';\n\nexport default () => {\n    const [showDialog, setShowDialog] = useState(false);\n    const [showSubtitleDialog, setShowSubtitleDialog] = useState(false);\n    const [showLongDialog, setShowLongDialog] = useState(false);\n    const [showLongOverflowDialog, setShowLongOverflowDialog] = useState(false);\n    const [showLongOverflow2Dialog, setShowLongOverflow2Dialog] = useState(false);\n    const [showSizeXSDialog, setShowSizeXSDialog] = useState(false);\n    const [showSizeSMDialog, setShowSizeSMDialog] = useState(false);\n    const [showSizeLGDialog, setShowSizeLGDialog] = useState(false);\n    const [showSizeXLDialog, setShowSizeXLDialog] = useState(false);\n    const [showSizeFullWidthDialog, setShowSizeFullWidthDialog] = useState(false);\n    const [showSizeFullHeightDialog, setShowSizeFullHeightDialog] = useState(false);\n    const [showSizeFullHeightLGDialog, setShowSizeFullHeightLGDialog] = useState(false);\n    const [showSizeFullHeightXLDialog, setShowSizeFullHeightXLDialog] = useState(false);\n    const [showSizeFullScreenDialog, setShowSizeFullScreenDialog] = useState(false);\n\n    const renderDialog = () => {\n        const onClose = () => setShowDialog(false);\n\n        const headerButtons = (\n            <>\n                <OverlayTrigger placement='bottom' overlay={<Tooltip width='auto'>Download</Tooltip>}>\n                    <Button bsStyle='muted' iconOnly iconName='rioglyph-cloud-download' />\n                </OverlayTrigger>\n                <OverlayTrigger placement='bottom' overlay={<Tooltip width='auto'>More options</Tooltip>}>\n                    <Button bsStyle='muted' iconOnly iconName='rioglyph-option-horizontal' />\n                </OverlayTrigger>\n            </>\n        );\n\n        return (\n            <Dialog\n                show={showDialog}\n                title={exampleTitle}\n                footer={exampleFooter(onClose)}\n                body={<ExampleBody />}\n                headerButtons={headerButtons}\n                onClose={onClose}\n                className='exampleDialog'\n                showCloseButton\n                bsSize='md'\n            />\n        );\n    };\n\n    const renderSubtitleDialog = () => (\n        <Dialog\n            show={showSubtitleDialog}\n            title={exampleTitle}\n            subtitle={exampleSubtitle}\n            footer={exampleFooter(() => setShowSubtitleDialog(false))}\n            body={<ExampleBody />}\n            onClose={() => setShowSubtitleDialog(false)}\n            bodyClassName='exampleDialog'\n            showCloseButton\n        />\n    );\n\n    const renderLongDialog = () => (\n        <Dialog\n            show={showLongDialog}\n            title={exampleTitle}\n            body={dummyTextExtraLong}\n            footer={exampleFooter(() => setShowLongDialog(false))}\n            onClose={() => setShowLongDialog(false)}\n            className='longExampleDialog'\n            showCloseButton\n        />\n    );\n\n    const renderLongOverflowDialog = () => (\n        <Dialog\n            show={showLongOverflowDialog}\n            title={exampleTitle}\n            body={dummyTextExtraLong}\n            footer={exampleFooter(() => setShowLongOverflowDialog(false))}\n            onClose={() => setShowLongOverflowDialog(false)}\n            className='longExampleDialog'\n            showCloseButton\n            useOverflow\n        />\n    );\n\n    const renderLongOverflow2Dialog = () => (\n        <Dialog\n            show={showLongOverflow2Dialog}\n            title={exampleTitle}\n            body={dummyTextExtraLong}\n            bodyClassName='no-overflow-gradient bg-lightest'\n            footerClassName='shadow-smooth-up'\n            footer={exampleFooter(() => setShowLongOverflow2Dialog(false))}\n            onClose={() => setShowLongOverflow2Dialog(false)}\n            className='longExample2Dialog'\n            showCloseButton\n            useOverflow\n        />\n    );\n\n    const renderSizeXSDialog = () => (\n        <Dialog\n            show={showSizeXSDialog}\n            title='The smallest dialog'\n            footer={\n                <div className='display-flex justify-content-end'>\n                    <Button bsStyle='primary' onClick={() => setShowSizeXSDialog(false)}>\n                        Ok\n                    </Button>\n                </div>\n            }\n            body=\"This is our smallest dialog. Please treat it lightly and don't scare him\"\n            bsSize={Dialog.SIZE_XS}\n            onClose={() => setShowSizeXSDialog(false)}\n        />\n    );\n\n    const renderSizeSMDialog = () => (\n        <Dialog\n            show={showSizeSMDialog}\n            title={exampleTitle}\n            footer={exampleFooter(() => setShowSizeSMDialog(false))}\n            body={<ExampleBody />}\n            bsSize={Dialog.SIZE_SM}\n            onClose={() => setShowSizeSMDialog(false)}\n            className='exampleDialog'\n            showCloseButton\n        />\n    );\n\n    const renderSizeLGDialog = () => (\n        <Dialog\n            show={showSizeLGDialog}\n            title={exampleTitle}\n            footer={exampleFooter(() => setShowSizeLGDialog(false))}\n            body={<ExampleBody />}\n            bsSize={Dialog.SIZE_LG}\n            onClose={() => setShowSizeLGDialog(false)}\n            className='exampleDialog'\n            showCloseButton\n        />\n    );\n\n    const renderSizeXLDialog = () => (\n        <Dialog\n            show={showSizeXLDialog}\n            title={exampleTitle}\n            footer={exampleFooter(() => setShowSizeXLDialog(false))}\n            body={<ExampleBody />}\n            bsSize={Dialog.SIZE_XL}\n            onClose={() => setShowSizeXLDialog(false)}\n            className='exampleDialog'\n            showCloseButton\n        />\n    );\n\n    const renderSizeFullWidthDialog = () => (\n        <Dialog\n            show={showSizeFullWidthDialog}\n            title={exampleTitle}\n            footer={exampleFooter(() => setShowSizeFullWidthDialog(false))}\n            body={<ExampleBody />}\n            bsSize={Dialog.SIZE_FULL_WIDTH}\n            onClose={() => setShowSizeFullWidthDialog(false)}\n            className='exampleDialog'\n            showCloseButton\n        />\n    );\n\n    const renderSizeFullHeightDialog = () => (\n        <Dialog\n            show={showSizeFullHeightDialog}\n            title={exampleTitle}\n            footer={exampleFooter(() => setShowSizeFullHeightDialog(false))}\n            body={<ExampleBody />}\n            bsSize={Dialog.SIZE_FULL_HEIGHT}\n            onClose={() => setShowSizeFullHeightDialog(false)}\n            className='exampleDialog'\n            showCloseButton\n        />\n    );\n\n    const renderSizeFullHeightLGDialog = () => (\n        <Dialog\n            show={showSizeFullHeightLGDialog}\n            title={exampleTitle}\n            footer={exampleFooter(() => setShowSizeFullHeightLGDialog(false))}\n            body={<ExampleBody />}\n            bsSize={Dialog.SIZE_FULL_HEIGHT_LG}\n            onClose={() => setShowSizeFullHeightLGDialog(false)}\n            className='foobar'\n            showCloseButton\n        />\n    );\n\n    const renderSizeFullHeightXLDialog = () => (\n        <Dialog\n            show={showSizeFullHeightXLDialog}\n            title={exampleTitle}\n            footer={exampleFooter(() => setShowSizeFullHeightXLDialog(false))}\n            body={<ExampleBody />}\n            bsSize={Dialog.SIZE_FULL_HEIGHT_XL}\n            onClose={() => setShowSizeFullHeightXLDialog(false)}\n            showCloseButton\n        />\n    );\n\n    const renderSizeFullScreenDialog = () => (\n        <Dialog\n            show={showSizeFullScreenDialog}\n            title={exampleTitle}\n            body={exampleFullScreenBody}\n            footer={exampleFooter(() => setShowSizeFullScreenDialog(false))}\n            className='exampleDialog'\n            bodyClassName='padding-0'\n            bsSize={Dialog.SIZE_FULL_SCREEN}\n            onClose={() => setShowSizeFullScreenDialog(false)}\n            showCloseButton\n        />\n    );\n\n    return (\n        <div>\n            <div className='btn-toolbar margin-bottom-20'>\n                <Button bsStyle='primary' onClick={() => setShowDialog(true)}>\n                    Dialog\n                </Button>\n                {renderDialog()}\n\n                <Button bsStyle='primary' onClick={() => setShowSubtitleDialog(true)}>\n                    Subtitle dialog\n                </Button>\n                {renderSubtitleDialog()}\n\n                <Button bsStyle='primary' onClick={() => setShowLongDialog(true)}>\n                    Long dialog\n                </Button>\n                {renderLongDialog()}\n\n                <Button bsStyle='primary' onClick={() => setShowLongOverflowDialog(true)}>\n                    Long dialog with overflow\n                </Button>\n                {renderLongOverflowDialog()}\n\n                <Button bsStyle='primary' onClick={() => setShowLongOverflow2Dialog(true)}>\n                    Dialog with overflow and light background\n                </Button>\n                {renderLongOverflow2Dialog()}\n            </div>\n\n            <label>Dialog sizes</label>\n            <div className='btn-toolbar'>\n                <Button bsStyle='primary' onClick={() => setShowSizeXSDialog(true)}>\n                    Size xs (320px)\n                </Button>\n                {renderSizeXSDialog()}\n\n                <Button bsStyle='primary' onClick={() => setShowSizeSMDialog(true)}>\n                    Size sm (480px)\n                </Button>\n                {renderSizeSMDialog()}\n\n                <Button bsStyle='primary' onClick={() => setShowDialog(true)}>\n                    Size md (768px - default)\n                </Button>\n                <Button type='button' bsStyle='primary' onClick={() => setShowSizeLGDialog(true)}>\n                    Size lg (1280px)\n                </Button>\n                {renderSizeLGDialog()}\n\n                <Button bsStyle='primary' onClick={() => setShowSizeXLDialog(true)}>\n                    Size xl (1440px)\n                </Button>\n                {renderSizeXLDialog()}\n\n                <Button bsStyle='primary' onClick={() => setShowSizeFullWidthDialog(true)}>\n                    Size fullwidth\n                </Button>\n                {renderSizeFullWidthDialog()}\n\n                <Button bsStyle='primary' onClick={() => setShowSizeFullHeightDialog(true)}>\n                    Size fullheight\n                </Button>\n                {renderSizeFullHeightDialog()}\n\n                <Button bsStyle='primary' onClick={() => setShowSizeFullHeightLGDialog(true)}>\n                    Size fullheight lg\n                </Button>\n                {renderSizeFullHeightLGDialog()}\n\n                <Button bsStyle='primary' onClick={() => setShowSizeFullHeightXLDialog(true)}>\n                    Size fullheight xl\n                </Button>\n                {renderSizeFullHeightXLDialog()}\n\n                <Button bsStyle='primary' onClick={() => setShowSizeFullScreenDialog(true)}>\n                    Size fullscreen\n                </Button>\n                {renderSizeFullScreenDialog()}\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class='modal show exampleDialog modal-enter-done' tabindex='1' role='dialog'>\n<div class='modal-dialog' role='document'>\n    <div class='modal-content'>\n        <div class='modal-header'>\n            <div class='modal-header-text'>\n                <div class='modal-header-title'>Dialog title</div>\n            </div>\n            <div class='modal-header-buttons'>\n                <button type='button' class='btn btn-muted btn-icon-only'>\n                    <span class='rioglyph rioglyph-cloud-download'></span>\n                </button>\n                <button type='button' class='btn btn-muted btn-icon-only'>\n                    <span class='rioglyph rioglyph-option-horizontal'></span>\n                </button>\n                <div class='modal-header-buttons-spacer'></div>\n                <button\n                    type='button'\n                    class='btn btn-icon-only btn-muted modal-header-close close'\n                    data-testid='close'\n                >\n                    <span class='rioglyph rioglyph-remove' aria-hidden='true'></span>\n                </button>\n            </div>\n        </div>\n        <div class='modal-body'>\n            {/* Body Content */}\n        </div>\n        <div class='modal-footer'>\n            {/* Footer Content */}\n        </div>\n    </div>\n</div>\n<div class='modal-backdrop'></div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "show",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Opens the dialog when set to true"
+                    },
+                    {
+                      "name": "title",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The dialog title (can also be a FormattedMessage component)"
+                    },
+                    {
+                      "name": "subtitle",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The subtitle content"
+                    },
+                    {
+                      "name": "body",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The dialog body content"
+                    },
+                    {
+                      "name": "footer",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The dialog footer content"
+                    },
+                    {
+                      "name": "onClose",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "A callback function invoked when the dialog closes"
+                    },
+                    {
+                      "name": "onCloseValidation",
+                      "type": "Function",
+                      "default": "() => true",
+                      "description": "A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed."
+                    },
+                    {
+                      "name": "showCloseButton",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Shows a close button when set to true"
+                    },
+                    {
+                      "name": "disableEsc",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables or disabled closing the dialog via esc key"
+                    },
+                    {
+                      "name": "onEsc",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "A callback fired when esc key is pressed and the dialog is about to close"
+                    },
+                    {
+                      "name": "useOverflow",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables the modal body to overflow and use inline scrolling if needed.Set the class \"no-overflow-gradient\" to remove the overflow gradient in case it is problematic like when the background is gray."
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "String",
+                      "default": "md",
+                      "description": "Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZE_XS, Dialog.SIZE_SM, Dialog.SIZE_LG, Dialog.SIZE_XL, Dialog.SIZE_FULL_WIDTH, Dialog.SIZE_FULL_HEIGHT, Dialog.SIZE_FULL_SCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen'"
+                    },
+                    {
+                      "name": "headerButtons",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Allows to add additional buttons to the dialog header"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the modal element"
+                    },
+                    {
+                      "name": "bodyClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the modal-body element"
+                    },
+                    {
+                      "name": "footerClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the modal-footer element"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "Dialog compound components",
+      "body": "To accommodate forms within the dialog body and have the submit button in the footer or wrapping individual parts of the dialog, a more flexible approach to rendering its individual components is needed. In this scenario, you can make use of the dialog compound components.",
+      "examples": [
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"btn-toolbar margin-bottom-20\"><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Dialog with form</button></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport Dialog from '@rio-cloud/rio-uikit/Dialog';\n\nimport { exampleTitle } from './DialogData';\n\nexport default () => {\n    const [showDialog, setShowDialog] = useState(false);\n    const [enableSubmit, setEnableSubmit] = useState(false);\n    const [submittedFormData, setSubmittedFormData] = useState<{ [k: string]: FormDataEntryValue } | undefined>();\n\n    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n        // Avoid page reload on form submit\n        event.preventDefault();\n\n        // Get form data of all input elements\n        const formData = new FormData(event.target as HTMLFormElement);\n\n        // Convert all form data into an object for further use\n        const entries = Object.fromEntries(formData.entries());\n        setSubmittedFormData(entries);\n\n        // Individual debug output of the form inputs\n        for (const [key, value] of formData) {\n            console.log({ key, value });\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        setEnableSubmit(Boolean(event.currentTarget.value));\n    };\n\n    const handleClose = () => {\n        setShowDialog(false);\n        setSubmittedFormData(undefined);\n    };\n\n    return (\n        <div>\n            <div className='btn-toolbar margin-bottom-20'>\n                <Button bsStyle='primary' onClick={() => setShowDialog(true)}>\n                    Dialog with form\n                </Button>\n                <Dialog show={showDialog} onClose={handleClose} showCloseButton bsSize='md'>\n                    <form onSubmit={handleSubmit}>\n                        <Dialog.Title\n                            title={exampleTitle}\n                            subtitle='This is a subtitle'\n                            headerButtons={<Button bsStyle='muted' iconOnly iconName='rioglyph-cloud-download' />}\n                        />\n                        <Dialog.Body className='foo'>\n                            <div>\n                                <div className='form-group'>\n                                    <label htmlFor='demoInput'>Some random input to submit (required)</label>\n                                    <input\n                                        className='form-control'\n                                        name='demoInput'\n                                        placeholder='Please add something to continue'\n                                        onChange={handleInputChange}\n                                        required\n                                    />\n                                </div>\n                                <div className='text-italic margin-top-25'>{JSON.stringify(submittedFormData)}</div>\n                            </div>\n                        </Dialog.Body>\n                        <Dialog.Footer className='foobar'>\n                            <div>\n                                <Button bsStyle='primary' type='submit' disabled={!enableSubmit}>\n                                    Submit\n                                </Button>\n                            </div>\n                        </Dialog.Footer>\n                    </form>\n                </Dialog>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class='modal show exampleDialog modal-enter-done' tabindex='1' role='dialog'>\n<div class='modal-dialog' role='document'>\n    <div class='modal-content'>\n        <div class='modal-header'>\n            <div class='modal-header-text'>\n                <div class='modal-header-title'>Dialog title</div>\n            </div>\n            <div class='modal-header-buttons'>\n                <button type='button' class='btn btn-muted btn-icon-only'>\n                    <span class='rioglyph rioglyph-cloud-download'></span>\n                </button>\n                <button type='button' class='btn btn-muted btn-icon-only'>\n                    <span class='rioglyph rioglyph-option-horizontal'></span>\n                </button>\n                <div class='modal-header-buttons-spacer'></div>\n                <button\n                    type='button'\n                    class='btn btn-icon-only btn-muted modal-header-close close'\n                    data-testid='close'\n                >\n                    <span class='rioglyph rioglyph-remove' aria-hidden='true'></span>\n                </button>\n            </div>\n        </div>\n        <div class='modal-body'>\n            {/* Body Content */}\n        </div>\n        <div class='modal-footer'>\n            {/* Footer Content */}\n        </div>\n    </div>\n</div>\n<div class='modal-backdrop'></div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "Dialog.Title",
+                  "rows": [
+                    {
+                      "name": "title",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The dialog title (can also be a FormattedMessage component)"
+                    },
+                    {
+                      "name": "subtitle",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The subtitle content"
+                    },
+                    {
+                      "name": "headerButtons",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Allows to add additional buttons to the dialog header"
+                    }
+                  ]
+                },
+                {
+                  "heading": "Dialog.Body",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes set on the wrapper element"
+                    }
+                  ]
+                },
+                {
+                  "heading": "Dialog.Footer",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes set on the wrapper element"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "Dialogs with validation",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 3",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Open dialog</button></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { useEffect, useRef, useState } from 'react';\n\nimport Dialog from '@rio-cloud/rio-uikit/Dialog';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\ntype DemoContentProps = {\n    inputValue: string;\n    showError: boolean;\n    onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n};\n\nconst DemoContent = (props: DemoContentProps) => {\n    const { inputValue, showError, onInputChange } = props;\n\n    // Set the focus on the input.\n    // Note: the dialog body need to be in the component that re-renders,\n    // otherwise the focus is not set initially.\n    const inputRef = useRef<HTMLInputElement>(null);\n    useEffect(() => {\n        if (inputRef.current) {\n            console.log('focus input');\n            inputRef.current.focus();\n        }\n    }, [inputRef.current]);\n\n    return (\n        <div className={`form-group has-feedback ${showError ? 'has-error' : ''} margin-bottom-15`}>\n            <label htmlFor='input'>Some input</label>\n            <div className='input-group'>\n                <input\n                    className='form-control'\n                    value={inputValue}\n                    id='input'\n                    type='text'\n                    placeholder='Please type in something'\n                    onChange={onInputChange}\n                    ref={inputRef}\n                />\n            </div>\n            {showError && (\n                <span className='help-block'>\n                    <span>Please enter something</span>\n                </span>\n            )}\n        </div>\n    );\n};\n\nexport default () => {\n    const [state, setState] = useState({\n        showDialog: false,\n        hasError: false,\n        inputValue: '',\n    });\n\n    const handleValidation = () => {\n        if (!state.inputValue) {\n            setState({ ...state, hasError: true });\n            return false;\n        }\n        return true;\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = event.currentTarget.value;\n        setState({ ...state, inputValue, hasError: !inputValue });\n    };\n\n    return (\n        <>\n            <Button bsStyle='primary' onClick={() => setState({ ...state, showDialog: true })}>\n                Open dialog\n            </Button>\n            <Dialog\n                show={state.showDialog}\n                title='Dialog with validation example'\n                body={\n                    <DemoContent\n                        inputValue={state.inputValue}\n                        showError={state.hasError}\n                        onInputChange={handleInputChange}\n                    />\n                }\n                onClose={() => setState({ ...state, showDialog: false, inputValue: '' })}\n                onCloseValidation={handleValidation}\n            />\n        </>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Open dialog</button>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "show",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Opens the dialog when set to true"
+                    },
+                    {
+                      "name": "title",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The dialog title (can also be a FormattedMessage component)"
+                    },
+                    {
+                      "name": "subtitle",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The subtitle content"
+                    },
+                    {
+                      "name": "body",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The dialog body content"
+                    },
+                    {
+                      "name": "footer",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The dialog footer content"
+                    },
+                    {
+                      "name": "onClose",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "A callback function invoked when the dialog closes"
+                    },
+                    {
+                      "name": "onCloseValidation",
+                      "type": "Function",
+                      "default": "() => true",
+                      "description": "A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed."
+                    },
+                    {
+                      "name": "showCloseButton",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Shows a close button when set to true"
+                    },
+                    {
+                      "name": "disableEsc",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables or disabled closing the dialog via esc key"
+                    },
+                    {
+                      "name": "onEsc",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "A callback fired when esc key is pressed and the dialog is about to close"
+                    },
+                    {
+                      "name": "useOverflow",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables the modal body to overflow and use inline scrolling if needed.Set the class \"no-overflow-gradient\" to remove the overflow gradient in case it is problematic like when the background is gray."
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "String",
+                      "default": "md",
+                      "description": "Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZE_XS, Dialog.SIZE_SM, Dialog.SIZE_LG, Dialog.SIZE_XL, Dialog.SIZE_FULL_WIDTH, Dialog.SIZE_FULL_HEIGHT, Dialog.SIZE_FULL_SCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen'"
+                    },
+                    {
+                      "name": "headerButtons",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Allows to add additional buttons to the dialog header"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the modal element"
+                    },
+                    {
+                      "name": "bodyClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the modal-body element"
+                    },
+                    {
+                      "name": "footerClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the modal-footer element"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 4",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><label>Validation with separate validation error dialog</label></div><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Open dialog</button></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { useState, useRef, useEffect } from 'react';\n\nimport Dialog from '@rio-cloud/rio-uikit/Dialog';\nimport SimpleDialog from '@rio-cloud/rio-uikit/SimpleDialog';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\ntype DemoContentProps = {\n    inputRef: React.MutableRefObject<HTMLInputElement>;\n    inputValue: string;\n    showError: boolean;\n    onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n};\n\nconst DemoContent = (props: DemoContentProps) => {\n    const { inputRef, inputValue, showError, onInputChange } = props;\n\n    // Set the focus on the input.\n    // Note: the dialog body need to be in the component that re-renders,\n    // otherwise the focus is not set initially.\n    useEffect(() => {\n        if (inputRef.current) {\n            console.log('focus input');\n            inputRef.current.focus();\n        }\n    }, [inputRef.current]);\n\n    return (\n        <div className={`form-group has-feedback ${showError ? 'has-error' : ''} margin-bottom-15`}>\n            <label htmlFor='input'>Some input</label>\n            <div className='input-group'>\n                <input\n                    className='form-control'\n                    value={inputValue}\n                    id='input'\n                    type='text'\n                    placeholder='Please type in something'\n                    onChange={onInputChange}\n                    ref={inputRef}\n                />\n            </div>\n            {showError && (\n                <span className='help-block'>\n                    <span>Please enter something</span>\n                </span>\n            )}\n        </div>\n    );\n};\n\nexport default () => {\n    const [state, setState] = useState({\n        showDialog: false,\n        hasError: false,\n        showErrorDialog: false,\n        inputValue: '',\n    });\n\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const handleValidation = () => {\n        if (!state.inputValue) {\n            setState({ ...state, hasError: true, showErrorDialog: true });\n            return false;\n        }\n        return true;\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = event.currentTarget.value;\n        setState({ ...state, inputValue, hasError: !inputValue });\n    };\n\n    const handleCloseErrorDialog = () => {\n        setState({ ...state, showErrorDialog: false });\n        inputRef?.current?.focus();\n    };\n\n    const handleClose = () => {\n        handleValidation() && setState({ ...state, showDialog: false, inputValue: '' });\n    };\n\n    const showError = state.hasError && !state.showErrorDialog;\n\n    return (\n        <>\n            <div>\n                <label>Validation with separate validation error dialog</label>\n            </div>\n            <Button bsStyle='primary' onClick={() => setState({ ...state, showDialog: true })}>\n                Open dialog\n            </Button>\n\n            <Dialog\n                show={state.showDialog}\n                title='Dialog with validation example'\n                body={\n                    <DemoContent\n                        inputRef={inputRef}\n                        inputValue={state.inputValue}\n                        showError={showError}\n                        onInputChange={handleInputChange}\n                    />\n                }\n                footer={\n                    <Button bsStyle='primary' onClick={handleClose}>\n                        Close\n                    </Button>\n                }\n                onClose={handleClose}\n                onCloseValidation={handleValidation}\n            />\n            <SimpleDialog\n                show={state.showErrorDialog}\n                bsSize='xs'\n                title='Validation failed'\n                content='Input may not be empty. Please enter some value.'\n                footer={\n                    <Button bsStyle='primary' onClick={handleCloseErrorDialog}>\n                        Got it\n                    </Button>\n                }\n            />\n        </>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <label>Validation with separate validation error dialog</label>\n</div>\n<button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Open dialog</button>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "show",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Opens the dialog when set to true"
+                    },
+                    {
+                      "name": "title",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The dialog title (can also be a FormattedMessage component)"
+                    },
+                    {
+                      "name": "subtitle",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The subtitle content"
+                    },
+                    {
+                      "name": "body",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The dialog body content"
+                    },
+                    {
+                      "name": "footer",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The dialog footer content"
+                    },
+                    {
+                      "name": "onClose",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "A callback function invoked when the dialog closes"
+                    },
+                    {
+                      "name": "onCloseValidation",
+                      "type": "Function",
+                      "default": "() => true",
+                      "description": "A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed."
+                    },
+                    {
+                      "name": "showCloseButton",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Shows a close button when set to true"
+                    },
+                    {
+                      "name": "disableEsc",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables or disabled closing the dialog via esc key"
+                    },
+                    {
+                      "name": "onEsc",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "A callback fired when esc key is pressed and the dialog is about to close"
+                    },
+                    {
+                      "name": "useOverflow",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables the modal body to overflow and use inline scrolling if needed.Set the class \"no-overflow-gradient\" to remove the overflow gradient in case it is problematic like when the background is gray."
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "String",
+                      "default": "md",
+                      "description": "Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZE_XS, Dialog.SIZE_SM, Dialog.SIZE_LG, Dialog.SIZE_XL, Dialog.SIZE_FULL_WIDTH, Dialog.SIZE_FULL_HEIGHT, Dialog.SIZE_FULL_SCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen'"
+                    },
+                    {
+                      "name": "headerButtons",
+                      "type": "ReactNode",
+                      "default": "",
+                      "description": "Allows to add additional buttons to the dialog header"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the modal element"
+                    },
+                    {
+                      "name": "bodyClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the modal-body element"
+                    },
+                    {
+                      "name": "footerClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the modal-footer element"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "SimpleDialog",
+      "body": "This component allows the user to create a simple dialog. It uses the dialog component described above.",
+      "examples": [
+        {
+          "caption": "Example 5",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Simple dialog button</button></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport SimpleDialog from '@rio-cloud/rio-uikit/SimpleDialog';\n\nexport default () => {\n    const [show, setShow] = useState(false);\n\n    return (\n        <>\n            <Button bsStyle='primary' onClick={() => setShow(true)}>\n                Simple dialog button\n            </Button>\n            <SimpleDialog\n                show={show}\n                title='Simple dialog title'\n                content='Simple dialog body content'\n                bodyClassName='my-content'\n                onClose={() => setShow(false)}\n            />\n        </>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div content='Save Dialog Body Content' class='modal show simple-dialog modal-enter-done' tabindex='1' role='dialog'>\n<div class='modal-dialog' role='document'>\n    <div class='modal-content'>\n        <div class='modal-header'>\n            <div class='modal-header-text'>\n                <div class='modal-header-title'>Save Dialog Title</div>\n            </div>\n            <div class='modal-header-buttons'>\n                <button\n                    type='button'\n                    class='btn btn-icon-only btn-muted modal-header-close close'\n                    data-testid='close'\n                >\n                    <span class='rioglyph rioglyph-remove' aria-hidden='true'></span>\n                </button>\n            </div>\n        </div>\n        <div class='modal-body'>Save Dialog Body Content</div>\n    </div>\n</div>\n<div class='modal-backdrop'></div>\n</div>;"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "show",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Opens the dialog when set to true"
+                    },
+                    {
+                      "name": "title",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The dialog title (can also be a FormattedMessage component)"
+                    },
+                    {
+                      "name": "subtitle",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The subtitle content"
+                    },
+                    {
+                      "name": "content",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The content of the dialog body itself"
+                    },
+                    {
+                      "name": "footer",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The dialog footer content"
+                    },
+                    {
+                      "name": "footerClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the modal-footer element"
+                    },
+                    {
+                      "name": "bodyClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the modal-body element"
+                    },
+                    {
+                      "name": "onClose",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "A callback function invoked when the dialog closes"
+                    },
+                    {
+                      "name": "onCloseValidation",
+                      "type": "Function",
+                      "default": "() => true",
+                      "description": "A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed."
+                    },
+                    {
+                      "name": "showCloseButton",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Shows a close button when set to true"
+                    },
+                    {
+                      "name": "disableEsc",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables or disabled closing the dialog via esc key"
+                    },
+                    {
+                      "name": "onEsc",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "A callback fired when esc key is pressed and the dialog is about to close"
+                    },
+                    {
+                      "name": "useOverflow",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables the modal body to overflow and use inline scrolling if needed.Set the class \"no-overflow-gradient\" to remove the overflow gradient in case it is problematic like when the background is gray."
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "String",
+                      "default": "md",
+                      "description": "Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZE_XS, Dialog.SIZE_SM, Dialog.SIZE_LG, Dialog.SIZE_XL, Dialog.SIZE_FULL_WIDTH, Dialog.SIZE_FULL_HEIGHT, Dialog.SIZE_FULL_SCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen'"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the modal element"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "ConfirmationDialog",
+      "body": "This component allows the user to create a confirmation dialog. It uses the dialog component described above.",
+      "examples": [
+        {
+          "caption": "Example 6",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><button type=\"button\" class=\"btn btn-primary\">Confirmation dialog</button></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport Dialog from '@rio-cloud/rio-uikit/Dialog';\nimport ConfirmationDialog from '@rio-cloud/rio-uikit/ConfirmationDialog';\n\nexport default () => {\n    const [show, setShow] = useState(false);\n\n    return (\n        <div>\n            <button type='button' className='btn btn-primary' onClick={() => setShow(true)}>\n                Confirmation dialog\n            </button>\n            <ConfirmationDialog\n                show={show}\n                title='ConfirmationDialog title'\n                content='ConfirmationDialog body content'\n                bsSize={Dialog.SIZE_SM}\n                onClickConfirm={() => setShow(false)}\n                onClickCancel={() => setShow(false)}\n                cancelButtonText='Abort the action'\n                confirmButtonText={\n                    <>\n                        <span className='rioglyph rioglyph-ok margin-right-5' />\n                        <span>Confirm the action</span>\n                    </>\n                }\n                useOverflow\n            />\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class='modal show confirmation-dialog modal-enter-done' tabindex='1' role='dialog'>\n<div class='modal-dialog modal-overflow modal-sm' role='document'>\n    <div class='modal-content'>\n        <div class='modal-header'>\n            <div class='modal-header-text'>\n                <div class='modal-header-title'>Confirmation dialog title</div>\n            </div>\n            <div class='modal-header-buttons'></div>\n        </div>\n        <div class='modal-body'>Confirmation dialog body content</div>\n        <div class='modal-footer'>\n            <div class='btn-toolbar'>\n                <button type='button' class='CancelButton btn btn-default'>\n                    Abort the action\n                </button>\n                <button type='button' class='ConfirmationButton btn btn-primary'>\n                    Confirm the action\n                </button>\n            </div>\n        </div>\n    </div>\n</div>\n<div class='modal-backdrop'></div>\n</div>;"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "show",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Opens the dialog when set to true"
+                    },
+                    {
+                      "name": "title",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The dialog title (can also be a FormattedMessage component)"
+                    },
+                    {
+                      "name": "subtitle",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The subtitle content"
+                    },
+                    {
+                      "name": "content",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The content of the dialog body itself"
+                    },
+                    {
+                      "name": "useOverflow",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables the modal body to overflow and use inline scrolling if needed.Set the class \"no-overflow-gradient\" to remove the overflow gradient in case it is problematic like when the background is gray."
+                    },
+                    {
+                      "name": "onClickConfirm",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "A callback fired when the confirmation button is clicked."
+                    },
+                    {
+                      "name": "onClickCancel",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "A callback fired when the cancel button is clicked or the dialog is closed."
+                    },
+                    {
+                      "name": "cancelButtonText",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The content of the cancel button. (Usually a text, can also be a FormattedMessage component)."
+                    },
+                    {
+                      "name": "confirmButtonText",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The content of the confirmation button. Since it is a node, it can be a simple text or any JSX node like a div element with an icon and a text."
+                    },
+                    {
+                      "name": "disableConfirm",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "When set to true the confirmation button will be disabled"
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "String",
+                      "default": "md",
+                      "description": "Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZE_XS, Dialog.SIZE_SM, Dialog.SIZE_LG, Dialog.SIZE_XL, Dialog.SIZE_FULL_WIDTH, Dialog.SIZE_FULL_HEIGHT, Dialog.SIZE_FULL_SCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen'"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "SaveDialog",
+      "body": "This component allows the user to create a save dialog. It uses the dialog component described above.",
+      "examples": [
+        {
+          "caption": "Example 7",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Save dialog</button></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport SaveDialog from '@rio-cloud/rio-uikit/SaveDialog';\n\nexport default () => {\n    const [show, setShow] = useState(false);\n\n    return (\n        <>\n            <Button bsStyle='primary' onClick={() => setShow(true)}>\n                Save dialog\n            </Button>\n            <SaveDialog\n                show={show}\n                title='Save Dialog Title'\n                content='Save Dialog Body Content'\n                onClickConfirm={() => setShow(false)}\n                onClickCancel={() => setShow(false)}\n                onClickDiscard={() => setShow(false)}\n                discardButtonText='Discard changes'\n                cancelButtonText='Continue editing'\n                confirmButtonText={\n                    <>\n                        <span className='rioglyph rioglyph-save margin-right-5' />\n                        <span>Save changes</span>\n                    </>\n                }\n            />\n        </>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class='modal show save-dialog modal-enter-done' tabindex='1' role='dialog'>\n<div class='modal-dialog' role='document'>\n    <div class='modal-content'>\n        <div class='modal-header'>\n            <div class='modal-header-text'>\n                <div class='modal-header-title'>Save Dialog Title</div>\n            </div>\n            <div class='modal-header-buttons'>\n                <button\n                    type='button'\n                    class='btn btn-icon-only btn-muted modal-header-close close'\n                    data-testid='close'\n                >\n                    <span class='rioglyph rioglyph-remove' aria-hidden='true'></span>\n                </button>\n            </div>\n        </div>\n        <div class='modal-body'>Save Dialog Body Content</div>\n        <div class='modal-footer'>\n            <div class='btn-toolbar'>\n                <button type='button' class='DiscardButton btn btn-default'>\n                    Discard\n                </button>\n                <button type='button' class='CancelButton btn btn-default'>\n                    Abort\n                </button>\n                <button type='button' class='ConfirmationButton btn btn-primary'>\n                    <span> Save</span>\n                </button>\n            </div>\n        </div>\n    </div>\n</div>\n<div class='modal-backdrop'></div>\n</div>;"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "show",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Opens the dialog when set to true"
+                    },
+                    {
+                      "name": "title",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The dialog title (can also be a FormattedMessage component)"
+                    },
+                    {
+                      "name": "subtitle",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The subtitle content"
+                    },
+                    {
+                      "name": "content",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The content of the dialog body itself"
+                    },
+                    {
+                      "name": "onClickCancel",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "A callback fired when the cancel button is clicked or the dialog is closed."
+                    },
+                    {
+                      "name": "onClickDiscard",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "A callback fired when the discard button is clicked."
+                    },
+                    {
+                      "name": "onClickConfirm",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "A callback fired when the confirmation button is clicked."
+                    },
+                    {
+                      "name": "discardButtonText",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The content of the discard button. (Usually a text, can also be a FormattedMessage component)."
+                    },
+                    {
+                      "name": "cancelButtonText",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The content of the cancel button. (Usually a text, can also be a FormattedMessage component)."
+                    },
+                    {
+                      "name": "confirmButtonText",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The content of the confirmation button. Since it is a node, it can be a simple text or any JSX node like a div element with an icon and a text."
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "String",
+                      "default": "md",
+                      "description": "Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZE_XS, Dialog.SIZE_SM, Dialog.SIZE_LG, Dialog.SIZE_XL, Dialog.SIZE_FULL_WIDTH, Dialog.SIZE_FULL_HEIGHT, Dialog.SIZE_FULL_SCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen'"
+                    },
+                    {
+                      "name": "onClose",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "A callback function invoked when the dialog closes"
+                    },
+                    {
+                      "name": "onCloseValidation",
+                      "type": "Function",
+                      "default": "() => true",
+                      "description": "A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed."
+                    },
+                    {
+                      "name": "showCloseButton",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Shows a close button when set to true"
+                    },
+                    {
+                      "name": "useOverflow",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables the modal body to overflow and use inline scrolling if needed.Set the class \"no-overflow-gradient\" to remove the overflow gradient in case it is problematic like when the background is gray."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the modal element"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "SplitDialog",
+      "body": "This component allows the user to create a split dialog. It uses the dialog component described above.",
+      "examples": [
+        {
+          "caption": "Example 8",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"btn-toolbar\"><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Split dialog</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Split dialog large</button></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport composition from '../../../assets/getting_started_composition.webp';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport SplitDialog from '@rio-cloud/rio-uikit/SplitDialog';\nimport ListMenu from '@rio-cloud/rio-uikit/ListMenu';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\nimport { dummyTextLong, dummyTextShort } from '../../../utils/data';\n\nexport default () => {\n    const [show, setShow] = useState(false);\n    const [showLg, setShowLg] = useState(false);\n\n    const handleClose = () => {\n        setShow(false);\n        console.log('dialog closed');\n    };\n\n    return (\n        <div className='btn-toolbar'>\n            <Button bsStyle='primary' onClick={() => setShow(true)}>\n                Split dialog\n            </Button>\n            <SplitDialog\n                show={show}\n                title='Split dialog title'\n                onClose={handleClose}\n                leftContent={<ListMenu menuItems={menuItems} groupClassName='padding-left-0' />}\n                rightContentClassName='bg-lightest'\n                footer={<div>Sample footer</div>}\n                rightContent={\n                    <>\n                        <div className='h4'>Dolor sit amet</div>\n                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p>\n                        <div className='padding-top-15'>\n                            <div className='panel panel-default shadow-default'>\n                                <div className='panel-heading text-color-darkest text-bold'>Admin</div>\n                                <div className='panel-body'>\n                                    <ul className='padding-left-20 margin-0'>\n                                        <li>Permission to read all vehicles and their master data.</li>\n                                        <li>Permission to change driver emails.</li>\n                                    </ul>\n                                </div>\n                            </div>\n                            <div className='panel panel-default shadow-default'>\n                                <div className='panel-heading text-color-darkest text-bold'>Reader</div>\n                                <div className='panel-body'>\n                                    <ul className='padding-left-20 margin-0'>\n                                        <li>Permission to read all reports</li>\n                                    </ul>\n                                </div>\n                            </div>\n                            <div className='panel panel-default shadow-default'>\n                                <div className='panel-heading text-color-darkest text-bold'>Lorem ipsum</div>\n                                <div className='panel-body' />\n                            </div>\n                            <div className='panel panel-default shadow-default'>\n                                <div className='panel-heading text-color-darkest text-bold'>Lorem ipsum</div>\n                                <div className='panel-body' />\n                            </div>\n                            <div className='panel panel-default shadow-default'>\n                                <div className='panel-heading text-color-darkest text-bold'>Lorem ipsum</div>\n                                <div className='panel-body' />\n                            </div>\n                            <div className='panel panel-default shadow-default'>\n                                <div className='panel-heading text-color-darkest text-bold'>Lorem ipsum</div>\n                                <div className='panel-body' />\n                            </div>\n                            <div className='panel panel-default shadow-default'>\n                                <div className='panel-heading text-color-darkest text-bold'>Lorem ipsum</div>\n                                <div className='panel-body' />\n                            </div>\n                            <div className='panel panel-default shadow-default'>\n                                <div className='panel-heading text-color-darkest text-bold'>Lorem ipsum</div>\n                                <div className='panel-body' />\n                            </div>\n                            <div className='panel panel-default shadow-default'>\n                                <div className='panel-heading text-color-darkest text-bold'>Lorem ipsum</div>\n                                <div className='panel-body' />\n                            </div>\n                            <div className='panel panel-default shadow-default'>\n                                <div className='panel-heading text-color-darkest text-bold'>Lorem ipsum</div>\n                                <div className='panel-body' />\n                            </div>\n                            <div className='panel panel-default shadow-default'>\n                                <div className='panel-heading text-color-darkest text-bold'>Lorem ipsum</div>\n                                <div className='panel-body' />\n                            </div>\n                            <div className='panel panel-default shadow-default'>\n                                <div className='panel-heading text-color-darkest text-bold'>Lorem ipsum</div>\n                                <div className='panel-body' />\n                            </div>\n                            <div className='panel panel-default shadow-default'>\n                                <div className='panel-heading text-color-darkest text-bold'>Lorem ipsum</div>\n                                <div className='panel-body' />\n                            </div>\n                            <div className='panel panel-default shadow-default'>\n                                <div className='panel-heading text-color-darkest text-bold'>Lorem ipsum</div>\n                                <div className='panel-body' />\n                            </div>\n                            <div className='panel panel-default shadow-default'>\n                                <div className='panel-heading text-color-darkest text-bold'>Lorem ipsum</div>\n                                <div className='panel-body' />\n                            </div>\n                            <div className='panel panel-default shadow-default'>\n                                <div className='panel-heading text-color-darkest text-bold'>Lorem ipsum</div>\n                                <div className='panel-body' />\n                            </div>\n                            <div className='panel panel-default shadow-default'>\n                                <div className='panel-heading text-color-darkest text-bold'>Lorem ipsum</div>\n                                <div className='panel-body' />\n                            </div>\n                            <div className='panel panel-default shadow-default'>\n                                <div className='panel-heading text-color-darkest text-bold'>Lorem ipsum</div>\n                                <div className='panel-body' />\n                            </div>\n                        </div>\n                    </>\n                }\n            />\n\n            <Button bsStyle='primary' onClick={() => setShowLg(true)}>\n                Split dialog large\n            </Button>\n            <SplitDialog\n                show={showLg}\n                bsSize='lg'\n                title='Split dialog title'\n                onClose={() => setShowLg(false)}\n                leftContent={\n                    <ListMenu menuItems={menuItems2} groupClassName='padding-left-0' className='padding-top-5' />\n                }\n                leftContentClassName='padding-top-25'\n                showDivider={false}\n                rightContent={\n                    <>\n                        <div className='text-size-h2 text-medium margin-bottom-15'>Dolor sit amet</div>\n                        <p>{dummyTextShort}</p>\n                        <img className='img-responsive border rounded' alt='Intro' src={composition} />\n                        <div className='display-flex gap-50 margin-top-25'>\n                            <div className='flex-1-1'>\n                                <p className='h4'>Lorem ipsum dolor sit amet</p>\n                                <div>{dummyTextLong}</div>\n                            </div>\n                            <div className='flex-1-1'>\n                                <p className='h4'>Lorem ipsum dolor sit amet</p>\n                                <div>{dummyTextLong}</div>\n                            </div>\n                        </div>\n                    </>\n                }\n            />\n        </div>\n    );\n};\n\nconst menuItems = [\n    {\n        group: 'Rolls',\n        navItems: [\n            {\n                key: '1',\n                item: (\n                    <span className='active' onClick={() => Notification.info('Fleetadmin clicked')}>\n                        Fleetadmin\n                    </span>\n                ),\n            },\n            {\n                key: '2',\n                item: <span onClick={() => Notification.info('Fleetuser clicked')}>Fleetuser</span>,\n            },\n            {\n                key: '3',\n                item: <span onClick={() => Notification.info('Fleetdriver clicked')}>Fleetdriver</span>,\n            },\n        ],\n    },\n];\n\nconst menuItems2 = [\n    {\n        group: 'Service name',\n        navItems: [\n            {\n                key: '1',\n                item: <span className='active'>Welcome</span>,\n            },\n            {\n                key: '2',\n                item: <span>What's new</span>,\n            },\n        ],\n    },\n    {\n        group: 'Features',\n        navItems: [\n            {\n                key: '1',\n                item: <span>Feature name one</span>,\n            },\n            {\n                key: '2',\n                item: <span>Another cool feature for this</span>,\n            },\n            {\n                key: '2',\n                item: <span>That is a nice feature</span>,\n            },\n        ],\n    },\n];"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class='modal show split-dialog modal-enter-done' tabindex='1' role='dialog'>\n<div class='modal-dialog modal-overflow' role='document'>\n    <div class='modal-content'>\n        <div class='modal-header'>\n            <div class='modal-header-text'>\n                <div class='modal-header-title'>Split Dialog Title</div>\n            </div>\n            <div class='modal-header-buttons'>\n                <button\n                    type='button'\n                    class='btn btn-icon-only btn-muted modal-header-close close'\n                    data-testid='close'\n                >\n                    <span class='rioglyph rioglyph-remove' aria-hidden='true'></span>\n                </button>\n            </div>\n        </div>\n        <div class='modal-body'>\n            <div class='split-wrapper'>\n                <div class='split-left '>\n                    {/* <!-- Left Content --> */}\n                    <div class='split-divider bg-lighter'></div>\n                </div>\n                <div class='split-right bg-lightest'>\n                    {/* <!-- Right Content --> */}\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n<div class='modal-backdrop'></div>\n</div>;"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "show",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Opens the dialog when set to true"
+                    },
+                    {
+                      "name": "title",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The dialog title (can also be a FormattedMessage component)"
+                    },
+                    {
+                      "name": "subtitle",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The subtitle content"
+                    },
+                    {
+                      "name": "leftContent",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The content to be shown on the left side."
+                    },
+                    {
+                      "name": "leftContentClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the left content element."
+                    },
+                    {
+                      "name": "rightContent",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The content to be shown on the right side."
+                    },
+                    {
+                      "name": "rightContentClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the right content element."
+                    },
+                    {
+                      "name": "onClose",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "A callback function invoked when the dialog closes"
+                    },
+                    {
+                      "name": "onCloseValidation",
+                      "type": "Function",
+                      "default": "() => true",
+                      "description": "A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed."
+                    },
+                    {
+                      "name": "showCloseButton",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Shows a close button when set to true"
+                    },
+                    {
+                      "name": "disableEsc",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables or disabled closing the dialog via esc key"
+                    },
+                    {
+                      "name": "onEsc",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "A callback fired when esc key is pressed and the dialog is about to close"
+                    },
+                    {
+                      "name": "useOverflow",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Enables the modal body to overflow and use inline scrolling if needed.Set the class \"no-overflow-gradient\" to remove the overflow gradient in case it is problematic like when the background is gray."
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "String",
+                      "default": "md",
+                      "description": "Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZE_XS, Dialog.SIZE_SM, Dialog.SIZE_LG, Dialog.SIZE_XL, Dialog.SIZE_FULL_WIDTH, Dialog.SIZE_FULL_HEIGHT, Dialog.SIZE_FULL_SCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen'"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the modal element"
+                    },
+                    {
+                      "name": "footerClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the modal-footer element"
+                    },
+                    {
+                      "name": "footer",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The dialog footer content"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "InfoDialog",
+      "body": "This component allows the user to create a dialog without title and footer. It uses the dialog component described above.",
+      "examples": [
+        {
+          "caption": "Example 9",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Info dialog</button></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport InfoDialog from '@rio-cloud/rio-uikit/InfoDialog';\n\nconst InfoDialogExample = () => {\n    const [show, setShow] = useState(false);\n\n    const handleShow = () => setShow(true);\n    const handleHide = () => setShow(false);\n\n    return (\n        <div>\n            <Button bsStyle='primary' onClick={handleShow}>\n                Info dialog\n            </Button>\n            <InfoDialog\n                show={show}\n                onClose={handleHide}\n                content={\n                    <div className='text-center'>\n                        <div className='margin-bottom-25'>\n                            <h2>Lorem ipsum dolor sit amet</h2>\n                            <p>\n                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.Aliquam laoreet nec neque ut\n                                fermentum. Vestibulum erat enim.\n                            </p>\n                        </div>\n                        <Button className='margin-bottom-20' onClick={handleHide}>\n                            Got it\n                        </Button>\n                    </div>\n                }\n            />\n        </div>\n    );\n};\n\nexport default InfoDialogExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class='modal show info-dialog modal-enter-done' tabindex='1' role='dialog'>\n<div class='modal-dialog' role='document'>\n    <div class='modal-content'>\n        <div class='modal-body'>\n            <div class='text-center'>\n                <div class='margin-bottom-25'>\n                    <h2>Lorem ipsum dolor sit amet</h2>\n                    <p>\n                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet nec neque ut\n                        fermentum. Vestibulum erat enim.\n                    </p>\n                </div>\n                <button type='button' class='btn btn-primary margin-bottom-20'>\n                    Understood, close me\n                </button>\n            </div>\n        </div>\n    </div>\n</div>\n<div class='modal-backdrop'></div>\n</div>;"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "show",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Opens the dialog when set to true"
+                    },
+                    {
+                      "name": "title",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The dialog title (can also be a FormattedMessage component)"
+                    },
+                    {
+                      "name": "subtitle",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The subtitle content"
+                    },
+                    {
+                      "name": "content",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The content of the dialog body itself"
+                    },
+                    {
+                      "name": "footer",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The dialog footer content"
+                    },
+                    {
+                      "name": "footerClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the modal-footer element"
+                    },
+                    {
+                      "name": "bodyClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the modal-body element"
+                    },
+                    {
+                      "name": "onClose",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "A callback function invoked when the dialog closes"
+                    },
+                    {
+                      "name": "onCloseValidation",
+                      "type": "Function",
+                      "default": "() => true",
+                      "description": "A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed."
+                    },
+                    {
+                      "name": "showCloseButton",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Shows a close button when set to true"
+                    },
+                    {
+                      "name": "disableEsc",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables or disabled closing the dialog via esc key"
+                    },
+                    {
+                      "name": "onEsc",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "A callback fired when esc key is pressed and the dialog is about to close"
+                    },
+                    {
+                      "name": "useOverflow",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables the modal body to overflow and use inline scrolling if needed.Set the class \"no-overflow-gradient\" to remove the overflow gradient in case it is problematic like when the background is gray."
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "String",
+                      "default": "md",
+                      "description": "Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZE_XS, Dialog.SIZE_SM, Dialog.SIZE_LG, Dialog.SIZE_XL, Dialog.SIZE_FULL_WIDTH, Dialog.SIZE_FULL_HEIGHT, Dialog.SIZE_FULL_SCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen'"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the modal element"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 10",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Feature info dialog</button></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport composition from '../../../assets/getting_started_composition.webp';\nimport InfoDialog from '@rio-cloud/rio-uikit/InfoDialog';\nimport SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport { dummyText } from '../../../utils/data';\n\nconst InfoDialogFeatureExample = () => {\n    const [show, setShow] = useState(false);\n\n    const handleShow = () => setShow(true);\n    const handleHide = () => setShow(false);\n\n    return (\n        <div>\n            <Button bsStyle='primary' onClick={handleShow}>\n                Feature info dialog\n            </Button>\n            <InfoDialog\n                show={show}\n                onClose={handleHide}\n                bodyClassName='padding-0'\n                content={\n                    <div>\n                        <div>\n                            <img\n                                className='img-responsive rounded-top-right-extra-large rounded-top-left-extra-large'\n                                src={composition}\n                            />\n                        </div>\n                        <div className='position-relative padding-20 margin-top-10 margin-x-20'>\n                            <SimpleTooltip placement='bottom' content='Close'>\n                                <div\n                                    className='position-absolute top-20 right-20 text-color-gray cursor-pointer'\n                                    onClick={handleHide}\n                                >\n                                    <span className='rioglyph rioglyph-remove' />\n                                </div>\n                            </SimpleTooltip>\n                            <div className='text-size-h3 text-medium margin-bottom-15 margin-right-20'>\n                                Feature Lorem Ipsum dolor sit amet (Beta)\n                            </div>\n                            <p>{dummyText}</p>\n                        </div>\n                        <div\n                            className={\n                                'display-flex flex-row-sm flex-column gap-10 justify-content-between ' +\n                                'align-items-start align-items-center-sm width-100pct bg-lightest ' +\n                                'padding-20 rounded-bottom-right-extra-large rounded-bottom-left-extra-large'\n                            }\n                        >\n                            <div className='btn-toolbar text-transform-uppercase margin-x-20 text-medium'>\n                                How important is this feature to you?\n                            </div>\n                            <div className='btn-toolbar text-transform-uppercase margin-x-20'>\n                                <SimpleTooltip placement='top' content='This would be cool, convenient or useful'>\n                                    <Button bsStyle={Button.INFO} onClick={handleHide}>\n                                        Nice-to-have\n                                    </Button>\n                                </SimpleTooltip>\n                                <SimpleTooltip placement='top' content='This would solve a major need'>\n                                    <Button bsStyle={Button.INFO} onClick={handleHide}>\n                                        Important\n                                    </Button>\n                                </SimpleTooltip>\n                                <SimpleTooltip placement='top' content='Withou it, we cannot use the service'>\n                                    <Button bsStyle={Button.INFO} onClick={handleHide}>\n                                        Critical\n                                    </Button>\n                                </SimpleTooltip>\n                            </div>\n                        </div>\n                    </div>\n                }\n            />\n        </div>\n    );\n};\n\nexport default InfoDialogFeatureExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class='modal show info-dialog modal-enter-done' tabindex='1' role='dialog'>\n<div class='modal-dialog' role='document'>\n    <div class='modal-content'>\n        <div class='modal-body'>\n            <div class='text-center'>\n                <div class='margin-bottom-25'>\n                    <h2>Lorem ipsum dolor sit amet</h2>\n                    <p>\n                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet nec neque ut\n                        fermentum. Vestibulum erat enim.\n                    </p>\n                </div>\n                <button type='button' class='btn btn-primary margin-bottom-20'>\n                    Understood, close me\n                </button>\n            </div>\n        </div>\n    </div>\n</div>\n<div class='modal-backdrop'></div>\n</div>;"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "show",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Opens the dialog when set to true"
+                    },
+                    {
+                      "name": "title",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The dialog title (can also be a FormattedMessage component)"
+                    },
+                    {
+                      "name": "subtitle",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The subtitle content"
+                    },
+                    {
+                      "name": "content",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The content of the dialog body itself"
+                    },
+                    {
+                      "name": "footer",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The dialog footer content"
+                    },
+                    {
+                      "name": "footerClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the modal-footer element"
+                    },
+                    {
+                      "name": "bodyClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the modal-body element"
+                    },
+                    {
+                      "name": "onClose",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "A callback function invoked when the dialog closes"
+                    },
+                    {
+                      "name": "onCloseValidation",
+                      "type": "Function",
+                      "default": "() => true",
+                      "description": "A callback function to be executed before closing the dialog. If the function returns false the dialog will not be closed."
+                    },
+                    {
+                      "name": "showCloseButton",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Shows a close button when set to true"
+                    },
+                    {
+                      "name": "disableEsc",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables or disabled closing the dialog via esc key"
+                    },
+                    {
+                      "name": "onEsc",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "A callback fired when esc key is pressed and the dialog is about to close"
+                    },
+                    {
+                      "name": "useOverflow",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables the modal body to overflow and use inline scrolling if needed.Set the class \"no-overflow-gradient\" to remove the overflow gradient in case it is problematic like when the background is gray."
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "String",
+                      "default": "md",
+                      "description": "Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZE_XS, Dialog.SIZE_SM, Dialog.SIZE_LG, Dialog.SIZE_XL, Dialog.SIZE_FULL_WIDTH, Dialog.SIZE_FULL_HEIGHT, Dialog.SIZE_FULL_SCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen'"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the modal element"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "OnboardingDialog",
+      "body": "The OnboardingDialog component is a customizable dialog designed to guide users through the initial steps of an onboarding tour. It displays a welcome message, a brief description of the onboarding process, and action buttons to either start the tour or skip it.",
+      "examples": [
+        {
+          "caption": "Example 11",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Onboarding dialog</button></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport composition from '../../../assets/getting_started_composition.webp';\nimport OnboardingDialog from '@rio-cloud/rio-uikit/OnboardingDialog';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\nexport default () => {\n    const [show, setShow] = useState(false);\n\n    const handleShow = () => setShow(true);\n    const handleHide = () => setShow(false);\n\n    const handleTakeTour = () => {\n        // Start onboarding tour - see useOnboardingTour() hook\n        setShow(false);\n    };\n\n    return (\n        <div>\n            <Button bsStyle='primary' onClick={handleShow}>\n                Onboarding dialog\n            </Button>\n            <OnboardingDialog\n                show={show}\n                imageSrc={composition}\n                imageAlt='Onboarding hero'\n                title='Welcome to the RIO UIKIT!'\n                description={\n                    <span>\n                        <span className='text-medium'>Get started with a quick tour</span> to explore UIKIT and discover\n                        its key features. It's the easiest way to get familiar with the service and make the most of\n                        your experience.\n                    </span>\n                }\n                onboardingRestartHint='Not ready to take the tour now?'\n                onboardingRestartDescription='If you choose to skip the tour now, don’t worry — you can always start it later from the service info option in the application header.'\n                skipButtonText='Skip it'\n                tourButtonText='Take the tour'\n                onClose={handleHide}\n                onStartTour={handleTakeTour}\n            />\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Onboarding dialog</button>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "show",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Opens the dialog when set to true"
+                    },
+                    {
+                      "name": "imageSrc",
+                      "type": "string",
+                      "default": "",
+                      "description": "The source URL of the image to be displayed in the dialog."
+                    },
+                    {
+                      "name": "imageAlt",
+                      "type": "string",
+                      "default": "",
+                      "description": "Alternative text for the image, used for accessibility."
+                    },
+                    {
+                      "name": "title",
+                      "type": "string | React.ReactNode",
+                      "default": "",
+                      "description": "The title of the dialog. A welcome message."
+                    },
+                    {
+                      "name": "description",
+                      "type": "string | React.ReactNode",
+                      "default": "",
+                      "description": "A short description of the service and its onboarding."
+                    },
+                    {
+                      "name": "onboardingRestartHint",
+                      "type": "string | React.ReactNode",
+                      "default": "",
+                      "description": "Hint text for restarting the onboarding process."
+                    },
+                    {
+                      "name": "onboardingRestartDescription",
+                      "type": "string | React.ReactNode",
+                      "default": "",
+                      "description": "Detailed description for restarting the onboarding process."
+                    },
+                    {
+                      "name": "skipButtonText",
+                      "type": "string | React.ReactNode",
+                      "default": "",
+                      "description": "Text for the skip button."
+                    },
+                    {
+                      "name": "tourButtonText",
+                      "type": "string | React.ReactNode",
+                      "default": "",
+                      "description": "Text for the button to start the tour."
+                    },
+                    {
+                      "name": "onStartTour",
+                      "type": "() => void",
+                      "default": "",
+                      "description": "Callback function to be called when the tour starts."
+                    },
+                    {
+                      "name": "onClose",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "A callback function invoked when the dialog closes"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the modal element"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "MediaDialog",
+      "body": "This component allows the user to show media inside a dialog like a set of images or a video. It uses the dialog component described above.",
+      "examples": [
+        {
+          "caption": "Example 12",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"btn-toolbar\"><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Media dialog with multiple images</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Media dialog with single image</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Media dialog with video</button></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport MediaDialog from '@rio-cloud/rio-uikit/MediaDialog';\nimport ResponsiveVideo from '@rio-cloud/rio-uikit/ResponsiveVideo';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\n\nexport default () => {\n    const [showMediaDialog, setShowMediaDialog] = useState(false);\n    const [showSingleMediaDialog, setShowSingleMediaDialog] = useState(false);\n    const [showVideoMediaDialog, setShowVideoMediaDialog] = useState(false);\n\n    return (\n        <div>\n            <div className='btn-toolbar'>\n                <Button bsStyle='primary' onClick={() => setShowMediaDialog(true)}>\n                    Media dialog with multiple images\n                </Button>\n                <Button bsStyle='primary' onClick={() => setShowSingleMediaDialog(true)}>\n                    Media dialog with single image\n                </Button>\n                <Button bsStyle='primary' onClick={() => setShowVideoMediaDialog(true)}>\n                    Media dialog with video\n                </Button>\n            </div>\n\n            {/* Multiple images */}\n            <MediaDialog\n                show={showMediaDialog}\n                onClose={() => setShowMediaDialog(false)}\n                previousButtonText='Previous'\n                useOverflow={false}\n                previousButtonCallback={(mediaIndex: number) => mediaIndex === 1 && Notification.info('Cycled through')}\n                nextButtonText='Next'\n                nextButtonCallback={(mediaIndex: number) => mediaIndex === 0 && Notification.info('Cycled through')}\n                media={[\n                    {\n                        src: 'https://picsum.photos/1920/1080',\n                        type: MediaDialog.MEDIA_TYPE_IMAGE,\n                        title: 'Image 1',\n                    },\n                    {\n                        src: 'https://picsum.photos/1080/1920',\n                        type: MediaDialog.MEDIA_TYPE_IMAGE,\n                        title: 'Image 2',\n                        subtitle: 'Lorem ipsum dolor sit amet',\n                    },\n                ]}\n            />\n\n            {/* Single image */}\n            <MediaDialog\n                show={showSingleMediaDialog}\n                previousButtonText='Previous'\n                nextButtonText='Next'\n                onClose={() => setShowSingleMediaDialog(false)}\n                media={[\n                    {\n                        src: 'https://picsum.photos/1920/1080',\n                        type: MediaDialog.MEDIA_TYPE_IMAGE,\n                        title: 'Lonely Image',\n                    },\n                ]}\n            />\n\n            {/* Embedded video */}\n            <MediaDialog\n                show={showVideoMediaDialog}\n                previousButtonText='Previous'\n                nextButtonText='Next'\n                onClose={() => setShowVideoMediaDialog(false)}\n                media={[\n                    {\n                        title: 'Video',\n                        src: 'https://www.youtube.com/embed/znckWdXTbTk',\n                        type: MediaDialog.MEDIA_TYPE_VIDEO,\n                        aspectRatio: ResponsiveVideo.ASPECT_RATIO_16_BY_9,\n                        className: 'foobar',\n                    },\n                ]}\n            />\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class='modal show media-dialog' tabindex='1' role='dialog'>\n    <div class='modal-dialog modal-lg' role='document'>\n        <div class='modal-content'>\n            <div class='modal-header'>\n                <div class='modal-header-text'>\n                    <div class='modal-header-title'>Image 1</div>\n                </div>\n                <div class='modal-header-buttons'>\n                    <button\n                        type='button'\n                        class='btn btn-icon-only btn-muted modal-header-close close'\n                        data-testid='close'>\n                        <span class='rioglyph rioglyph-remove' aria-hidden='true'></span>\n                    </button>\n                </div>\n            </div>\n            <div class='modal-body padding-0'>\n                <div class='media-content content-center'>\n                    <img class='ani-fade-in' src='https://......' />\n                </div>\n            </div>\n            <div class=\"modal-footer\" aria-label=\"dialog footer\"><button type=\"button\" class=\"btn btn-primary btn-link pull-left\"><span class=\"rioglyph rioglyph-chevron-left\"></span>Previous</button>\n                <div>1 / 2</div><button type=\"button\" class=\"btn btn-primary btn-link btn-icon-right\"><span class=\"rioglyph rioglyph-chevron-right\"></span>Next</button>\n            </div>\n        </div>\n    </div>\n    <div class='modal-backdrop'></div>\n</div>;"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "show",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Opens the dialog when set to true"
+                    },
+                    {
+                      "name": "title",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The dialog title (can also be a FormattedMessage component)"
+                    },
+                    {
+                      "name": "subtitle",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The subtitle content"
+                    },
+                    {
+                      "name": "useOverflow",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables the modal body to overflow and use inline scrolling if needed.Set the class \"no-overflow-gradient\" to remove the overflow gradient in case it is problematic like when the background is gray."
+                    },
+                    {
+                      "name": "onClose",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "A callback function invoked when the dialog closes"
+                    },
+                    {
+                      "name": "disableEsc",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Enables or disabled closing the dialog via esc key"
+                    },
+                    {
+                      "name": "bsSize",
+                      "type": "String",
+                      "default": "md",
+                      "description": "Defined how large the dialog will be rendered. By default, the dialog has a medium size and thus it can be omitted. Possible values are: Dialog.SIZE_XS, Dialog.SIZE_SM, Dialog.SIZE_LG, Dialog.SIZE_XL, Dialog.SIZE_FULL_WIDTH, Dialog.SIZE_FULL_HEIGHT, Dialog.SIZE_FULL_SCREEN or 'xs', 'sm', 'lg', 'xl', 'fullwidth', 'fullheight', 'fullheight-lg', 'fullheight-xl', 'fullscreen'"
+                    },
+                    {
+                      "name": "previousButtonText",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The button text for switching to the previous media if there are multiple."
+                    },
+                    {
+                      "name": "previousButtonCallback",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function for when the previous button is clicked."
+                    },
+                    {
+                      "name": "nextButtonText",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The button text for switching to the next media if there are multiple."
+                    },
+                    {
+                      "name": "nextButtonCallback",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Callback function for when the next button is clicked."
+                    },
+                    {
+                      "name": "media",
+                      "type": "Array of Objects",
+                      "default": "",
+                      "description": "List of media objects."
+                    },
+                    {
+                      "name": "└type",
+                      "type": "String",
+                      "default": "",
+                      "description": "Defines the media type that is going to be displayed. Possible values are: MediaDialog.MEDIA_TYPE_IMAGE, MediaDialog.MEDIA_TYPE_VIDEO or 'image', 'video'"
+                    },
+                    {
+                      "name": "└src",
+                      "type": "String",
+                      "default": "",
+                      "description": "The source location for the media data."
+                    },
+                    {
+                      "name": "└aspectRatio",
+                      "type": "String",
+                      "default": "",
+                      "description": "Only relevant for videos where the aspect of the video is defined. Possible values are: ResponsiveVideo.ASPECT_RATIO_4_BY_3, ResponsiveVideo.ASPECT_RATIO_16_BY_9 or '4by3', '16by9'"
+                    },
+                    {
+                      "name": "└className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the image element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "FrameDialog",
+      "body": "This component allows the user to create a dialog in a parent window triggered and controlled by a widget iframe.\n\nFor more details, please visit iframe guidlines",
+      "examples": [
+        {
+          "caption": "Example 13",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"iframe-wrapper\"><iframe title=\"iframe\" id=\"widgetDialogFrame\" src=\"https://uikit.developers.rio.cloud/#widgetDemo\" class=\"unstyled width-100pct\" style=\"width: 1px; min-width: 100%; overflow: hidden;\" scrolling=\"no\"></iframe></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React from 'react';\nimport IframeResizer from 'iframe-resizer-react';\n\nimport FrameDialog from '../../../../../../src/FrameDialog';\nimport { PREFIX } from '../../../widgets/WidgetDemo';\n\nconst IFrameWidgetExample = React.memo(() => {\n    return (\n        <>\n            <div className='iframe-wrapper'>\n                <IframeResizer\n                    id='widgetDialogFrame'\n                    src={`${window.location.origin}${window.location.pathname}#widgetDemo`}\n                    className='unstyled width-100pct'\n                    style={{ width: '1px', minWidth: '100%' }}\n                />\n            </div>\n            <FrameDialog\n                eventPrefix={PREFIX}\n                getSourceFrame={() => document.getElementById('widgetDialogFrame') as HTMLIFrameElement}\n            />\n        </>\n    );\n});\n\nexport default IFrameWidgetExample;\n\n// ----------------------------------------------------------\nimport { useState } from 'react';\n\nimport Button from '../../../../src/Button';\nimport { OPEN_DIALOG_EVENT, CLOSE_DIALOG_EVENT, OPEN_DIALOG_EVENT_TYPE } from '../../../../src/FrameDialog';\nimport usePostMessage, { type RemoteAction } from '../../../../src/usePostMessage';\n\nexport const PREFIX = 'EVENT_UIKIT_WIDGET_DEMO';\n\nconst WidgetDemo = () => {\n    const [messageFromDialog, setMessageFromDialog] = useState('-');\n\n    const { sendMessageToParent } = usePostMessage(PREFIX, (remoteAction: RemoteAction) => {\n        console.log(remoteAction);\n\n        if (remoteAction.type === `${PREFIX}${CLOSE_DIALOG_EVENT}`) {\n            setMessageFromDialog(remoteAction.payload);\n        }\n    });\n\n    const handleOpenDialog = () => {\n        const payload: OPEN_DIALOG_EVENT_TYPE = {\n            src: `${window.location.origin}${window.location.pathname}#widgetDemoDialog`,\n            dialogProps: {\n                bsSize: 'sm',\n            },\n        };\n\n        sendMessageToParent({\n            type: `${PREFIX}${OPEN_DIALOG_EVENT}`,\n            payload,\n        });\n    };\n\n    return (\n        <div className='bg-white border rounded padding-20 height-200'>\n            <div className='text-medium'>This is a widget embedded via an iframe</div>\n            <div className='btn-toolbar margin-top-20'>\n                <Button onClick={handleOpenDialog}>Open dialog in parent frame</Button>\n            </div>\n            <div className='margin-top-20'>\n                <label>Closing message from dialog:</label>\n                <div>{messageFromDialog}</div>\n            </div>\n        </div>\n    );\n};\n\nexport default WidgetDemo;\n\n// ----------------------------------------------------------\nimport Button from '../../../../src/Button';\nimport Dialog from '../../../../src/Dialog';\nimport usePostMessage from '../../../../src/usePostMessage';\nimport { CLOSE_DIALOG_EVENT } from '../../../../src/FrameDialog';\n\nimport { dummyText } from '../../utils/data';\nimport { PREFIX } from './WidgetDemo';\n\nconst WidgetDemo = () => {\n    const { sendMessageToParent } = usePostMessage(PREFIX);\n\n    const handleCloseDialog = () => {\n        sendMessageToParent({\n            type: `${PREFIX}${CLOSE_DIALOG_EVENT}`,\n            payload: 'hello from the dialog view',\n        });\n    };\n\n    return (\n        <div className='bg-white min-height-200'>\n            <Dialog.Title title='Widget dialog' onCloseButtonClick={handleCloseDialog} />\n\n            <Dialog.Body className='padding-20'>\n                <div className='text-medium'>This is the widget dialog content embedded via an iframe</div>\n                <p>{dummyText}</p>\n            </Dialog.Body>\n\n            <Dialog.Footer>\n                <div>\n                    <Button onClick={handleCloseDialog}>Close dialog in parent frame</Button>\n                </div>\n            </Dialog.Footer>\n        </div>\n    );\n};\n\nexport default WidgetDemo;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"iframe-wrapper\">\n    <iframe title=\"iframe\" id=\"widgetDialogFrame\" src=\"https://uikit.developers.rio.cloud/#widgetDemo\" class=\"unstyled width-100pct\" style=\"width: 1px; min-width: 100%; overflow: hidden; height: 200px;\" scrolling=\"no\">\n    </iframe>\n</div>"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "ReleaseNotesDialog",
+      "body": "The ReleaseNotesDialog component is meant to be used for the release notes of a service.Note there exists also a separate ReleaseNotes component.",
+      "examples": [
+        {
+          "caption": "Example 14",
+          "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>Service</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-info-sign\"></span><span class=\"badge bg-primary badge-indicator\">1</span></div></div></li></ul></nav></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport ReleaseNotesDialog from '@rio-cloud/rio-uikit/ReleaseNotesDialog';\nimport ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';\nimport ActionBarItem from '@rio-cloud/rio-uikit/ActionBarItem';\nimport ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';\n\nimport packageJson from '../../../../package.json';\nconst currentVersion = packageJson.version;\n\nconst RELEASE_NOTES_ITEM = 'TEAMNAME.RELEASENOTES';\n\nconst currentVersionNumbers = currentVersion.split('.');\n\nconst isNewVersion = (localVersion: string | null) => {\n    if (!localVersion) {\n        return true;\n    }\n\n    const localVersionNumbers = localVersion.split('.');\n\n    return !(\n        currentVersionNumbers[0] === localVersionNumbers[0] && currentVersionNumbers[1] === localVersionNumbers[1]\n    );\n};\n\nconst releaseNotes = {\n    'en-GB': {\n        '1.1.0': {\n            date: '23.07.2018',\n            content: (\n                <div>{`Map view within the tour history table\n• Modern map design as used in the Beta of the fleet monitor\n• Works with all event types\n• Event specific map marker\n• Map size adjustable via slider`}</div>\n            ),\n        },\n        '1.0.0': {\n            date: '27.06.2018',\n            content: [\n                <div key='1'>New feature XYZ has been added ...</div>,\n                <div key='2'>fixed bugs in ...</div>,\n                <div key='3'>Another feature has been added</div>,\n            ],\n        },\n    },\n};\n\nconst translationKey = 'en-GB';\n\nconst translations = {\n    whatsNew: 'What`s new?',\n    close: 'Close',\n    'module.name': 'Modulename',\n};\n\nconst handleRemoveReleaseNotesItem = () => {\n    window.localStorage.removeItem(RELEASE_NOTES_ITEM);\n};\n\nexport default () => {\n    const [show, setShow] = useState(false);\n\n    const hasNewReleaseNotes = isNewVersion(window.localStorage.getItem(RELEASE_NOTES_ITEM));\n    const actionBarItemTitle = `${translations['module.name']} v.${currentVersion}`;\n\n    const actionBarItem = (\n        <ActionBarItem id='serviceInfoReleaseNotes'>\n            <ActionBarItem.Icon>\n                <span className='icon rioglyph rioglyph-info-sign' />\n                {hasNewReleaseNotes && <span className='badge bg-primary badge-indicator'>1</span>}\n            </ActionBarItem.Icon>\n            <ActionBarItem.Popover title={actionBarItemTitle}>\n                <ActionBarItem.List>\n                    <ActionBarItem.ListItem icon='rioglyph-exclamation-sign' onClick={() => setShow(true)}>\n                        {translations.whatsNew ?? 'What`s new?'}\n                        {hasNewReleaseNotes && <span className='badge badge-primary margin-left-5'>1</span>}\n                    </ActionBarItem.ListItem>\n                </ActionBarItem.List>\n                <ActionBarItem.List>\n                    <ActionBarItem.ListItem icon='rioglyph-erase' onClick={handleRemoveReleaseNotesItem}>\n                        Remove Release Notes flag\n                    </ActionBarItem.ListItem>\n                </ActionBarItem.List>\n            </ActionBarItem.Popover>\n        </ActionBarItem>\n    );\n\n    return (\n        <>\n            <ApplicationLayout>\n                <ApplicationLayout.Header>\n                    <ApplicationHeader label='Service' actionBarItems={[actionBarItem]} />\n                </ApplicationLayout.Header>\n            </ApplicationLayout>\n\n            <ReleaseNotesDialog\n                showReleaseNotes={show}\n                setShowReleaseNotes={setShow}\n                moduleName={translations['module.name']}\n                whatsNewTitle={translations.whatsNew}\n                closeButtonText={translations.close}\n                translatedReleaseNotes={releaseNotes[translationKey]}\n                currentVersion={currentVersion}\n                RELEASE_NOTES_ITEM={RELEASE_NOTES_ITEM}\n            />\n        </>\n    );\n};"
+            },
+            {
+              "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>Service</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-info-sign\">\n                            </span>\n                            <span class=\"badge bg-primary badge-indicator\">1</span>\n                        </div>\n                    </div>\n                </li>\n            </ul>\n        </nav>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": "{\n    \"0.1.2\": {\n        date: String,\n        content: arrayOf(nodes) or single node,\n    }\n}"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}