@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,417 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:33.674Z",
+    "source": "https://uikit.developers.rio.cloud/#components/steppedProgressBars",
+    "category": "Components",
+    "section": "Progress",
+    "slug": "components/steppedprogressbars",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "1031cb5de243152dbeb249eeda3ac7dfb65ffd05bbef4e56e347bd39d2443074"
+  },
+  "title": "SteppedProgressBar - Circle",
+  "lead": null,
+  "content": [
+    {
+      "heading": "SteppedProgressBar - Circle",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"steppedProgressBarExample\"><div class=\"margin-bottom-25\"><div class=\"stepped-progress-bar variant-circle nav\"><a data-rb-event-key=\"0\" class=\"step-tab nav-link\"><div class=\"step-tab-content\"><div class=\"item-icon\">1</div><div class=\"item-label\">Label for step 1</div></div></a><a data-rb-event-key=\"1\" class=\"step-tab nav-link active\"><div class=\"step-tab-content\"><div class=\"item-icon\">2</div><div class=\"item-label\">Label for step 2</div></div></a><a disabled=\"\" data-rb-event-key=\"2\" class=\"step-tab nav-link disabled\"><div class=\"step-tab-content\"><div class=\"item-icon\"><i class=\"rioglyph rioglyph-ok\"></i></div><div class=\"item-label\">Label for final step</div></div></a></div></div><div class=\"panel panel-default panel-body padding-25\"><div class=\"text-size-h3\">Content of page 2</div><div class=\"padding-y-20\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div><label class=\"checkbox padding-15 border rounded margin-bottom-20 \" tabindex=\"0\"><input type=\"checkbox\" class=\"padding-15 border rounded margin-bottom-20 \"><span class=\"checkbox-text\"><span>Click here to complete this step. There is no other way forward.</span></span></label><div class=\"btn-toolbar justify-content-between\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-chevron-left\"></span>Previous</button><button type=\"button\" class=\"btn btn-default btn-component btn-icon-right\" disabled=\"\" tabindex=\"0\"><span class=\"rioglyph rioglyph-chevron-right\"></span>Next</button></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { type ChangeEvent, useState } from 'react';\n\nimport SteppedProgressBar from '@rio-cloud/rio-uikit/SteppedProgressBar';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport { dummyText, dummyTextShort } from '../../../utils/data';\nimport Checkbox from '@rio-cloud/rio-uikit/components/checkbox/Checkbox';\n\nconst SteppedProgressBarExampleDefault = () => {\n    const [selectedStep, setSelectedStep] = useState(1);\n    const [disableFollowingPages, setDisableFollowingPages] = useState<number>();\n\n    const handlePageNext = () => {\n        setSelectedStep(selectedStep + 1);\n        setDisableFollowingPages(3);\n    };\n\n    const handlePagePrevious = () => setSelectedStep(selectedStep - 1);\n    const handleSelectedChanged = (selectedKey: number) => setSelectedStep(selectedKey);\n    const handleDisableFollowingPages = (pageNumber: number) => setDisableFollowingPages(pageNumber);\n\n    const pageContent = [\n        <FirstPageContent key='firstStep' pageNumber={1} onClickNext={handlePageNext} />,\n        <SecondPageContent\n            key='secondStep'\n            pageNumber={2}\n            onClickNext={handlePageNext}\n            onClickPrevious={handlePagePrevious}\n            onDisableFollowingPages={handleDisableFollowingPages}\n        />,\n        <ThirdPageContent key='thirdStep' pageNumber={3} onClickPrevious={handlePagePrevious} />,\n    ];\n\n    return (\n        <div className='steppedProgressBarExample'>\n            <div className='margin-bottom-25'>\n                <SteppedProgressBar\n                    variant='circle'\n                    selectedStepNumber={selectedStep}\n                    onSelectedChanged={handleSelectedChanged}\n                    disableFollowingPages={disableFollowingPages}\n                    mobileBreakpoint={false}\n                    labels={[\n                        { icon: '1', label: 'Label for step 1' },\n                        { icon: '2', label: 'Label for step 2' },\n                        { icon: <i className='rioglyph rioglyph-ok' />, label: 'Label for final step' },\n                    ]}\n                />\n            </div>\n            {pageContent[selectedStep]}\n        </div>\n    );\n};\n\nexport default SteppedProgressBarExampleDefault;\n\ntype FirstPageContentProps = { pageNumber: number; onClickNext: VoidFunction };\n\nconst FirstPageContent = ({ pageNumber, onClickNext }: FirstPageContentProps) => (\n    <div className='panel panel-default panel-body padding-25'>\n        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>\n        <div className='padding-y-25'>{dummyText}</div>\n        <div className='btn-toolbar justify-content-end'>\n            <Button className='btn-icon-right' iconName='rioglyph-chevron-right' onClick={onClickNext}>\n                Next\n            </Button>\n        </div>\n    </div>\n);\n\ntype SecondPageContentProps = {\n    pageNumber: number;\n    onClickNext: VoidFunction;\n    onClickPrevious: VoidFunction;\n    onDisableFollowingPages: (pageNumber: number) => void;\n};\n\nconst SecondPageContent = (props: SecondPageContentProps) => {\n    const { pageNumber, onClickNext, onClickPrevious, onDisableFollowingPages } = props;\n\n    const [isAccepted, setIsAccepted] = useState(false);\n\n    const handleNext = () => isAccepted && onClickNext();\n\n    const handleAccept = (event: ChangeEvent<HTMLInputElement>) => {\n        setIsAccepted(event.target.checked);\n        if (!event.target.checked) {\n            onDisableFollowingPages(pageNumber);\n        }\n    };\n\n    return (\n        <div className='panel panel-default panel-body padding-25'>\n            <div className='text-size-h3'>{`Content of page ${pageNumber}`}</div>\n            <div className='padding-y-20'>{dummyTextShort}</div>\n            <Checkbox\n                onChange={handleAccept}\n                checked={isAccepted}\n                className={`padding-15 border rounded margin-bottom-20 ${isAccepted ? 'border-color-highlight' : ''}`}\n            >\n                Click here to complete this step. There is no other way forward.\n            </Checkbox>\n            <div className='btn-toolbar justify-content-between'>\n                <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>\n                    Previous\n                </Button>\n                <Button\n                    className='btn-icon-right'\n                    iconName='rioglyph-chevron-right'\n                    onClick={handleNext}\n                    disabled={!isAccepted}\n                >\n                    Next\n                </Button>\n            </div>\n        </div>\n    );\n};\n\ntype ThirdPageContentProps = {\n    pageNumber: number;\n    onClickPrevious: VoidFunction;\n};\n\nconst ThirdPageContent = ({ pageNumber, onClickPrevious }: ThirdPageContentProps) => (\n    <div className='panel panel-default panel-body padding-25'>\n        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>\n        <div className='padding-y-25'>{dummyText}</div>\n        <div className='btn-toolbar'>\n            <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>\n                Previous\n            </Button>\n        </div>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"steppedProgressBarExample\">\n    <div class=\"margin-bottom-25\">\n        <div class=\"stepped-progress-bar variant-circle nav\">\n            <a data-rb-event-key=\"0\" class=\"step-tab nav-link\">\n                <div class=\"step-tab-content\">\n                    <div class=\"item-icon\">1</div>\n                    <div class=\"item-label\">Label for step 1</div>\n                </div>\n            </a>\n            <a data-rb-event-key=\"1\" class=\"step-tab nav-link active\">\n                <div class=\"step-tab-content\">\n                    <div class=\"item-icon\">2</div>\n                    <div class=\"item-label\">Label for step 2</div>\n                </div>\n            </a>\n            <a disabled=\"\" data-rb-event-key=\"2\" class=\"step-tab nav-link disabled\">\n                <div class=\"step-tab-content\">\n                    <div class=\"item-icon\">\n                        <i class=\"rioglyph rioglyph-ok\">\n                        </i>\n                    </div>\n                    <div class=\"item-label\">Label for final step</div>\n                </div>\n            </a>\n        </div>\n    </div>\n    <div class=\"panel panel-default panel-body padding-25\">\n        <div class=\"text-size-h3\">Content of page 2</div>\n        <div class=\"padding-y-20\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div>\n        <label class=\"checkbox padding-15 border rounded margin-bottom-20 \" tabindex=\"0\">\n            <input type=\"checkbox\" class=\"padding-15 border rounded margin-bottom-20 \">\n            <span class=\"checkbox-text\">\n                <span>Click here to complete this step. There is no other way forward.</span>\n            </span>\n        </label>\n        <div class=\"btn-toolbar justify-content-between\">\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">\n                <span class=\"rioglyph rioglyph-chevron-left\">\n                </span>Previous</button>\n            <button type=\"button\" class=\"btn btn-default btn-component btn-icon-right\" disabled=\"\" tabindex=\"0\">\n                <span class=\"rioglyph rioglyph-chevron-right\">\n                </span>Next</button>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "labels",
+                      "type": "Array of Objects",
+                      "default": "",
+                      "description": "Objects to define the icon and the label of the navigation items. The icon can be a string or an icon."
+                    },
+                    {
+                      "name": "└icon",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The element shown in the step element. This can be a single step number or an icon element."
+                    },
+                    {
+                      "name": "└label",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The label shown below the step element."
+                    },
+                    {
+                      "name": "└labelClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the label element."
+                    },
+                    {
+                      "name": "└labelWrapperClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the label wrapping element."
+                    },
+                    {
+                      "name": "selectedStepNumber",
+                      "type": "Number",
+                      "default": "",
+                      "description": "Index of the selected navigation item."
+                    },
+                    {
+                      "name": "onSelectedChanged",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Called with the new selected index after the user clicked a nav item."
+                    },
+                    {
+                      "name": "variant",
+                      "type": "String",
+                      "default": "circle",
+                      "description": "The SteppedProgressBar Variant. One of \"circle\", \"rectangle\" or \"roadsign\"."
+                    },
+                    {
+                      "name": "disableFollowingPages",
+                      "type": "Number",
+                      "default": "",
+                      "description": "All navigation items with a higher index than this will be disabled."
+                    },
+                    {
+                      "name": "mobileBreakpoint",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Deactivating the Wrapping of bubbles on mobile"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "SteppedProgressBar - Rectangle",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"steppedProgressBarExample\"><div class=\"margin-bottom-25\"><div class=\"stepped-progress-bar variant-rectangle nav\"><a data-rb-event-key=\"0\" class=\"step-tab flex-1-1-0 nav-link\"><div class=\"step-tab-content\"><div class=\"item-icon\"><i class=\"rioglyph rioglyph-document\"></i></div><div class=\"item-label\">Label for step 1</div></div></a><a data-rb-event-key=\"1\" class=\"step-tab flex-1-1-0 nav-link active\"><div class=\"step-tab-content\"><div class=\"item-icon\"><i class=\"rioglyph rioglyph-pdf-file\"></i></div><div class=\"item-label\">Label for step 2</div></div></a><a disabled=\"\" data-rb-event-key=\"2\" class=\"step-tab flex-1-1-0 nav-link disabled\"><div class=\"step-tab-content\"><div class=\"item-icon\"><i class=\"rioglyph rioglyph-print\"></i></div><div class=\"item-label\">Label for final step</div></div></a></div></div><div class=\"panel panel-default panel-body padding-25\"><div class=\"text-size-h3\">Content of page 2</div><div class=\"padding-y-20\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div><label class=\"checkbox padding-15 border rounded margin-bottom-20 \" tabindex=\"0\"><input type=\"checkbox\" class=\"padding-15 border rounded margin-bottom-20 \"><span class=\"checkbox-text\"><span>Click here to complete this step. There is no other way forward.</span></span></label><div class=\"btn-toolbar justify-content-between\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-chevron-left\"></span>Previous</button><button type=\"button\" class=\"btn btn-default btn-component btn-icon-right\" disabled=\"\" tabindex=\"0\"><span class=\"rioglyph rioglyph-chevron-right\"></span>Next</button></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { type ChangeEvent, useState } from 'react';\n\nimport SteppedProgressBar from '@rio-cloud/rio-uikit/SteppedProgressBar';\nimport Checkbox from '@rio-cloud/rio-uikit/Checkbox';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport { dummyText, dummyTextShort } from '../../../utils/data';\n\nconst SteppedProgressBarExampleDefault = () => {\n    const [selectedStep, setSelectedStep] = useState(1);\n    const [disableFollowingPages, setDisableFollowingPages] = useState<number>();\n\n    const handlePageNext = () => {\n        setSelectedStep(selectedStep + 1);\n        setDisableFollowingPages(3);\n    };\n\n    const handlePagePrevious = () => setSelectedStep(selectedStep - 1);\n    const handleSelectedChanged = (selectedKey: number) => setSelectedStep(selectedKey);\n    const handleDisableFollowingPages = (pageNumber: number) => setDisableFollowingPages(pageNumber - 1);\n\n    const pageContent = [\n        <FirstPageContent key='firstStep' pageNumber={1} onClickNext={handlePageNext} />,\n        <SecondPageContent\n            key='secondStep'\n            pageNumber={2}\n            onClickNext={handlePageNext}\n            onClickPrevious={handlePagePrevious}\n            onDisableFollowingPages={handleDisableFollowingPages}\n        />,\n        <ThirdPageContent key='thirdStep' pageNumber={3} onClickPrevious={handlePagePrevious} />,\n    ];\n\n    return (\n        <div className='steppedProgressBarExample'>\n            <div className='margin-bottom-25'>\n                <SteppedProgressBar\n                    variant={SteppedProgressBar.VARIANT_RECTANGLE}\n                    selectedStepNumber={selectedStep}\n                    onSelectedChanged={handleSelectedChanged}\n                    disableFollowingPages={disableFollowingPages}\n                    mobileBreakpoint={false}\n                    labels={[\n                        {\n                            icon: <i className='rioglyph rioglyph-document' />,\n                            label: 'Label for step 1',\n                            labelWrapperClassName: 'flex-1-1-0',\n                        },\n                        {\n                            icon: <i className='rioglyph rioglyph-pdf-file' />,\n                            label: 'Label for step 2',\n                            labelWrapperClassName: 'flex-1-1-0',\n                        },\n                        {\n                            icon: <i className='rioglyph rioglyph-print' />,\n                            label: 'Label for final step',\n                            labelWrapperClassName: 'flex-1-1-0',\n                        },\n                    ]}\n                />\n            </div>\n            {pageContent[selectedStep]}\n        </div>\n    );\n};\n\nexport default SteppedProgressBarExampleDefault;\n\ntype FirstPageContentProps = { pageNumber: number; onClickNext: VoidFunction };\n\nconst FirstPageContent = ({ pageNumber, onClickNext }: FirstPageContentProps) => (\n    <div className='panel panel-default panel-body padding-25'>\n        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>\n        <div className='padding-y-25'>{dummyText}</div>\n        <div className='btn-toolbar justify-content-end'>\n            <Button className='btn-icon-right' iconName='rioglyph-chevron-right' onClick={onClickNext}>\n                Next\n            </Button>\n        </div>\n    </div>\n);\n\ntype SecondPageContentProps = {\n    pageNumber: number;\n    onClickNext: VoidFunction;\n    onClickPrevious: VoidFunction;\n    onDisableFollowingPages: (pageNumber: number) => void;\n};\n\nconst SecondPageContent = (props: SecondPageContentProps) => {\n    const { pageNumber, onClickNext, onClickPrevious, onDisableFollowingPages } = props;\n\n    const [isAccepted, setIsAccepted] = useState(false);\n\n    const handleNext = () => isAccepted && onClickNext();\n\n    const handleAccept = (event: ChangeEvent<HTMLInputElement>) => {\n        setIsAccepted(event.target.checked);\n        if (!event.target.checked) {\n            onDisableFollowingPages(pageNumber);\n        }\n    };\n\n    return (\n        <div className='panel panel-default panel-body padding-25'>\n            <div className='text-size-h3'>{`Content of page ${pageNumber}`}</div>\n            <div className='padding-y-20'>{dummyTextShort}</div>\n            <Checkbox\n                onChange={handleAccept}\n                checked={isAccepted}\n                className={`padding-15 border rounded margin-bottom-20 ${isAccepted ? 'border-color-highlight' : ''}`}\n            >\n                Click here to complete this step. There is no other way forward.\n            </Checkbox>\n            <div className='btn-toolbar justify-content-between'>\n                <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>\n                    Previous\n                </Button>\n                <Button\n                    className='btn-icon-right'\n                    iconName='rioglyph-chevron-right'\n                    onClick={handleNext}\n                    disabled={!isAccepted}\n                >\n                    Next\n                </Button>\n            </div>\n        </div>\n    );\n};\n\ntype ThirdPageContentProps = {\n    pageNumber: number;\n    onClickPrevious: VoidFunction;\n};\n\nconst ThirdPageContent = ({ pageNumber, onClickPrevious }: ThirdPageContentProps) => (\n    <div className='panel panel-default panel-body padding-25'>\n        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>\n        <div className='padding-y-25'>{dummyText}</div>\n        <div className='btn-toolbar'>\n            <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>\n                Previous\n            </Button>\n        </div>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"steppedProgressBarExample\">\n    <div class=\"margin-bottom-25\">\n        <div class=\"stepped-progress-bar variant-rectangle nav\">\n            <a data-rb-event-key=\"0\" class=\"step-tab flex-1-1-0 nav-link\">\n                <div class=\"step-tab-content\">\n                    <div class=\"item-icon\">\n                        <i class=\"rioglyph rioglyph-document\">\n                        </i>\n                    </div>\n                    <div class=\"item-label\">Label for step 1</div>\n                </div>\n            </a>\n            <a data-rb-event-key=\"1\" class=\"step-tab flex-1-1-0 nav-link active\">\n                <div class=\"step-tab-content\">\n                    <div class=\"item-icon\">\n                        <i class=\"rioglyph rioglyph-pdf-file\">\n                        </i>\n                    </div>\n                    <div class=\"item-label\">Label for step 2</div>\n                </div>\n            </a>\n            <a disabled=\"\" data-rb-event-key=\"2\" class=\"step-tab flex-1-1-0 nav-link disabled\">\n                <div class=\"step-tab-content\">\n                    <div class=\"item-icon\">\n                        <i class=\"rioglyph rioglyph-print\">\n                        </i>\n                    </div>\n                    <div class=\"item-label\">Label for final step</div>\n                </div>\n            </a>\n        </div>\n    </div>\n    <div class=\"panel panel-default panel-body padding-25\">\n        <div class=\"text-size-h3\">Content of page 2</div>\n        <div class=\"padding-y-20\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div>\n        <label class=\"checkbox padding-15 border rounded margin-bottom-20 \" tabindex=\"0\">\n            <input type=\"checkbox\" class=\"padding-15 border rounded margin-bottom-20 \">\n            <span class=\"checkbox-text\">\n                <span>Click here to complete this step. There is no other way forward.</span>\n            </span>\n        </label>\n        <div class=\"btn-toolbar justify-content-between\">\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">\n                <span class=\"rioglyph rioglyph-chevron-left\">\n                </span>Previous</button>\n            <button type=\"button\" class=\"btn btn-default btn-component btn-icon-right\" disabled=\"\" tabindex=\"0\">\n                <span class=\"rioglyph rioglyph-chevron-right\">\n                </span>Next</button>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "labels",
+                      "type": "Array of Objects",
+                      "default": "",
+                      "description": "Objects to define the icon and the label of the navigation items. The icon can be a string or an icon."
+                    },
+                    {
+                      "name": "└icon",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The element shown in the step element. This can be a single step number or an icon element."
+                    },
+                    {
+                      "name": "└label",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The label shown below the step element."
+                    },
+                    {
+                      "name": "└labelClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the label element."
+                    },
+                    {
+                      "name": "└labelWrapperClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the label wrapping element."
+                    },
+                    {
+                      "name": "selectedStepNumber",
+                      "type": "Number",
+                      "default": "",
+                      "description": "Index of the selected navigation item."
+                    },
+                    {
+                      "name": "onSelectedChanged",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Called with the new selected index after the user clicked a nav item."
+                    },
+                    {
+                      "name": "variant",
+                      "type": "String",
+                      "default": "circle",
+                      "description": "The SteppedProgressBar Variant. One of \"circle\", \"rectangle\" or \"roadsign\"."
+                    },
+                    {
+                      "name": "disableFollowingPages",
+                      "type": "Number",
+                      "default": "",
+                      "description": "All navigation items with a higher index than this will be disabled."
+                    },
+                    {
+                      "name": "mobileBreakpoint",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Deactivating the Wrapping of bubbles on mobile"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "SteppedProgressBar - Rectangle with custom content",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 3",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"steppedProgressBarExample\"><div class=\"margin-bottom-25\"><div class=\"stepped-progress-bar variant-rectangle nav\"><a data-rb-event-key=\"0\" class=\"step-tab flex-1-1-0 nav-link\"><div class=\"step-tab-content\"><div class=\"item-icon\"></div><div class=\"item-label width-100pct text-left\"><div class=\"display-flex align-items-center gap-10\"><span class=\"rioglyph rioglyph-ok text-color-success  margin-x-10 text-size-h2\"></span><div><div class=\"text-colot-darkest text-medium\">Initial step</div><div class=\"text-color-darker\">Lorem ipsum dolor</div></div></div></div></div></a><a data-rb-event-key=\"1\" class=\"step-tab flex-1-1-0 nav-link active\"><div class=\"step-tab-content\"><div class=\"item-icon\"></div><div class=\"item-label width-100pct text-left\"><div class=\"display-flex align-items-center gap-10\"><span class=\"rioglyph rioglyph-parcel  margin-x-10 text-size-h2\"></span><div><div class=\"text-colot-darkest text-medium\">Second step</div><div class=\"text-color-darker\">Lorem ipsum dolor</div></div></div></div></div></a><a disabled=\"\" data-rb-event-key=\"2\" class=\"step-tab flex-1-1-0 nav-link disabled\"><div class=\"step-tab-content\"><div class=\"item-icon\"></div><div class=\"item-label width-100pct text-left\"><div class=\"display-flex align-items-center gap-10\"><span class=\"rioglyph rioglyph-print  margin-x-10 text-size-h2\"></span><div><div class=\"text-colot-darkest text-medium\">Final step</div><div class=\"text-color-darker\">Lorem ipsum dolor</div></div></div></div></div></a></div></div><div class=\"panel panel-default panel-body padding-25\"><div class=\"text-size-h3\">Content of page 2</div><div class=\"padding-y-20\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div><label class=\"checkbox padding-15 border rounded margin-bottom-20 \" tabindex=\"0\"><input type=\"checkbox\" class=\"padding-15 border rounded margin-bottom-20 \"><span class=\"checkbox-text\"><span>Click here to complete this step. There is no other way forward.</span></span></label><div class=\"btn-toolbar justify-content-between\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-chevron-left\"></span>Previous</button><button type=\"button\" class=\"btn btn-default btn-component btn-icon-right\" disabled=\"\" tabindex=\"0\"><span class=\"rioglyph rioglyph-chevron-right\"></span>Next</button></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { type ChangeEvent, useState } from 'react';\n\nimport SteppedProgressBar from '@rio-cloud/rio-uikit/SteppedProgressBar';\nimport Checkbox from '@rio-cloud/rio-uikit/Checkbox';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport { dummyText, dummyTextShort } from '../../../utils/data';\n\nconst SteppedProgressBarExampleDefault = () => {\n    const [selectedStep, setSelectedStep] = useState(1);\n    const [disableFollowingPages, setDisableFollowingPages] = useState<number>();\n\n    const handlePageNext = () => {\n        setSelectedStep(selectedStep + 1);\n        setDisableFollowingPages(3);\n    };\n\n    const handlePagePrevious = () => setSelectedStep(selectedStep - 1);\n    const handleSelectedChanged = (selectedKey: number) => setSelectedStep(selectedKey);\n    const handleDisableFollowingPages = (pageNumber: number) => setDisableFollowingPages(pageNumber - 1);\n\n    const pageContent = [\n        <FirstPageContent key='firstStep' pageNumber={1} onClickNext={handlePageNext} />,\n        <SecondPageContent\n            key='secondStep'\n            pageNumber={2}\n            onClickNext={handlePageNext}\n            onClickPrevious={handlePagePrevious}\n            onDisableFollowingPages={handleDisableFollowingPages}\n        />,\n        <ThirdPageContent key='thirdStep' pageNumber={3} onClickPrevious={handlePagePrevious} />,\n    ];\n\n    return (\n        <div className='steppedProgressBarExample'>\n            <div className='margin-bottom-25'>\n                <SteppedProgressBar\n                    variant={SteppedProgressBar.VARIANT_RECTANGLE}\n                    selectedStepNumber={selectedStep}\n                    onSelectedChanged={handleSelectedChanged}\n                    disableFollowingPages={disableFollowingPages}\n                    mobileBreakpoint={false}\n                    labels={[\n                        {\n                            label: (\n                                <StepLabelContent\n                                    label='Initial step'\n                                    description='Lorem ipsum dolor'\n                                    icon='rioglyph rioglyph-clipboard'\n                                    done={selectedStep > 0}\n                                />\n                            ),\n                            labelClassName: 'width-100pct text-left',\n                            labelWrapperClassName: 'flex-1-1-0',\n                        },\n                        {\n                            label: (\n                                <StepLabelContent\n                                    label='Second step'\n                                    description='Lorem ipsum dolor'\n                                    icon='rioglyph rioglyph-parcel'\n                                    done={selectedStep > 1}\n                                />\n                            ),\n                            labelClassName: 'width-100pct text-left',\n                            labelWrapperClassName: 'flex-1-1-0',\n                        },\n                        {\n                            label: (\n                                <StepLabelContent\n                                    label='Final step'\n                                    description='Lorem ipsum dolor'\n                                    icon='rioglyph rioglyph-print'\n                                    done={selectedStep > 2}\n                                />\n                            ),\n                            labelClassName: 'width-100pct text-left',\n                            labelWrapperClassName: 'flex-1-1-0',\n                        },\n                    ]}\n                />\n            </div>\n            {pageContent[selectedStep]}\n        </div>\n    );\n};\n\nexport default SteppedProgressBarExampleDefault;\n\ntype StepLabelContentProps = {\n    label: string;\n    description: string;\n    icon: string;\n    done: boolean;\n};\n\nconst StepLabelContent = ({ label, description, icon, done }: StepLabelContentProps) => {\n    return (\n        <div className='display-flex align-items-center gap-10'>\n            <span className={`${done ? 'rioglyph rioglyph-ok text-color-success' : icon}  margin-x-10 text-size-h2`} />\n            <div>\n                <div className='text-colot-darkest text-medium'>{label}</div>\n                <div className='text-color-darker'>{description}</div>\n            </div>\n        </div>\n    );\n};\n\ntype FirstPageContentProps = { pageNumber: number; onClickNext: VoidFunction };\n\nconst FirstPageContent = ({ pageNumber, onClickNext }: FirstPageContentProps) => (\n    <div className='panel panel-default panel-body padding-25'>\n        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>\n        <div className='padding-y-25'>{dummyText}</div>\n        <div className='btn-toolbar justify-content-end'>\n            <Button className='btn-icon-right' iconName='rioglyph-chevron-right' onClick={onClickNext}>\n                Next\n            </Button>\n        </div>\n    </div>\n);\n\ntype SecondPageContentProps = {\n    pageNumber: number;\n    onClickNext: VoidFunction;\n    onClickPrevious: VoidFunction;\n    onDisableFollowingPages: (pageNumber: number) => void;\n};\n\nconst SecondPageContent = (props: SecondPageContentProps) => {\n    const { pageNumber, onClickNext, onClickPrevious, onDisableFollowingPages } = props;\n\n    const [isAccepted, setIsAccepted] = useState(false);\n\n    const handleNext = () => isAccepted && onClickNext();\n\n    const handleAccept = (event: ChangeEvent<HTMLInputElement>) => {\n        setIsAccepted(event.target.checked);\n        if (!event.target.checked) {\n            onDisableFollowingPages(pageNumber);\n        }\n    };\n\n    return (\n        <div className='panel panel-default panel-body padding-25'>\n            <div className='text-size-h3'>{`Content of page ${pageNumber}`}</div>\n            <div className='padding-y-20'>{dummyTextShort}</div>\n            <Checkbox\n                onChange={handleAccept}\n                checked={isAccepted}\n                className={`padding-15 border rounded margin-bottom-20 ${isAccepted ? 'border-color-highlight' : ''}`}\n            >\n                Click here to complete this step. There is no other way forward.\n            </Checkbox>\n            <div className='btn-toolbar justify-content-between'>\n                <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>\n                    Previous\n                </Button>\n                <Button\n                    className='btn-icon-right'\n                    iconName='rioglyph-chevron-right'\n                    onClick={handleNext}\n                    disabled={!isAccepted}\n                >\n                    Next\n                </Button>\n            </div>\n        </div>\n    );\n};\n\ntype ThirdPageContentProps = {\n    pageNumber: number;\n    onClickPrevious: VoidFunction;\n};\n\nconst ThirdPageContent = ({ pageNumber, onClickPrevious }: ThirdPageContentProps) => (\n    <div className='panel panel-default panel-body padding-25'>\n        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>\n        <div className='padding-y-25'>{dummyText}</div>\n        <div className='btn-toolbar'>\n            <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>\n                Previous\n            </Button>\n        </div>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"steppedProgressBarExample\">\n    <div class=\"margin-bottom-25\">\n        <div class=\"stepped-progress-bar variant-rectangle nav\">\n            <a data-rb-event-key=\"0\" class=\"step-tab flex-1-1-0 nav-link\">\n                <div class=\"step-tab-content\">\n                    <div class=\"item-icon\">\n                    </div>\n                    <div class=\"item-label width-100pct text-left\">\n                        <div class=\"display-flex align-items-center gap-10\">\n                            <span class=\"rioglyph rioglyph-ok text-color-success  margin-x-10 text-size-h2\">\n                            </span>\n                            <div>\n                                <div class=\"text-colot-darkest text-medium\">Initial step</div>\n                                <div class=\"text-color-darker\">Lorem ipsum dolor</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </a>\n            <a data-rb-event-key=\"1\" class=\"step-tab flex-1-1-0 nav-link active\">\n                <div class=\"step-tab-content\">\n                    <div class=\"item-icon\">\n                    </div>\n                    <div class=\"item-label width-100pct text-left\">\n                        <div class=\"display-flex align-items-center gap-10\">\n                            <span class=\"rioglyph rioglyph-parcel  margin-x-10 text-size-h2\">\n                            </span>\n                            <div>\n                                <div class=\"text-colot-darkest text-medium\">Second step</div>\n                                <div class=\"text-color-darker\">Lorem ipsum dolor</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </a>\n            <a disabled=\"\" data-rb-event-key=\"2\" class=\"step-tab flex-1-1-0 nav-link disabled\">\n                <div class=\"step-tab-content\">\n                    <div class=\"item-icon\">\n                    </div>\n                    <div class=\"item-label width-100pct text-left\">\n                        <div class=\"display-flex align-items-center gap-10\">\n                            <span class=\"rioglyph rioglyph-print  margin-x-10 text-size-h2\">\n                            </span>\n                            <div>\n                                <div class=\"text-colot-darkest text-medium\">Final step</div>\n                                <div class=\"text-color-darker\">Lorem ipsum dolor</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </a>\n        </div>\n    </div>\n    <div class=\"panel panel-default panel-body padding-25\">\n        <div class=\"text-size-h3\">Content of page 2</div>\n        <div class=\"padding-y-20\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div>\n        <label class=\"checkbox padding-15 border rounded margin-bottom-20 \" tabindex=\"0\">\n            <input type=\"checkbox\" class=\"padding-15 border rounded margin-bottom-20 \">\n            <span class=\"checkbox-text\">\n                <span>Click here to complete this step. There is no other way forward.</span>\n            </span>\n        </label>\n        <div class=\"btn-toolbar justify-content-between\">\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">\n                <span class=\"rioglyph rioglyph-chevron-left\">\n                </span>Previous</button>\n            <button type=\"button\" class=\"btn btn-default btn-component btn-icon-right\" disabled=\"\" tabindex=\"0\">\n                <span class=\"rioglyph rioglyph-chevron-right\">\n                </span>Next</button>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "labels",
+                      "type": "Array of Objects",
+                      "default": "",
+                      "description": "Objects to define the icon and the label of the navigation items. The icon can be a string or an icon."
+                    },
+                    {
+                      "name": "└icon",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The element shown in the step element. This can be a single step number or an icon element."
+                    },
+                    {
+                      "name": "└label",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The label shown below the step element."
+                    },
+                    {
+                      "name": "└labelClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the label element."
+                    },
+                    {
+                      "name": "└labelWrapperClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the label wrapping element."
+                    },
+                    {
+                      "name": "selectedStepNumber",
+                      "type": "Number",
+                      "default": "",
+                      "description": "Index of the selected navigation item."
+                    },
+                    {
+                      "name": "onSelectedChanged",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Called with the new selected index after the user clicked a nav item."
+                    },
+                    {
+                      "name": "variant",
+                      "type": "String",
+                      "default": "circle",
+                      "description": "The SteppedProgressBar Variant. One of \"circle\", \"rectangle\" or \"roadsign\"."
+                    },
+                    {
+                      "name": "disableFollowingPages",
+                      "type": "Number",
+                      "default": "",
+                      "description": "All navigation items with a higher index than this will be disabled."
+                    },
+                    {
+                      "name": "mobileBreakpoint",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Deactivating the Wrapping of bubbles on mobile"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "SteppedProgressBar - Road Sign",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 4",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"steppedProgressBarExample\"><div class=\"margin-bottom-25\"><div class=\"stepped-progress-bar variant-roadsign nav\"><a data-rb-event-key=\"0\" class=\"step-tab nav-link\"><div class=\"step-tab-content\"><div class=\"item-icon\"><i class=\"rioglyph rioglyph-document\"></i></div><div class=\"item-label\">Label for step 1</div></div></a><a data-rb-event-key=\"1\" class=\"step-tab nav-link active\"><div class=\"step-tab-content\"><div class=\"item-icon\"><i class=\"rioglyph rioglyph-pdf-file\"></i></div><div class=\"item-label\">Label for step 2</div></div></a><a disabled=\"\" data-rb-event-key=\"2\" class=\"step-tab nav-link disabled\"><div class=\"step-tab-content\"><div class=\"item-icon\"><i class=\"rioglyph rioglyph-print\"></i></div><div class=\"item-label\">Label for final step</div></div></a></div></div><div class=\"panel panel-default panel-body padding-25\"><div class=\"text-size-h3\">Content of page 2</div><div class=\"padding-y-20\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div><label class=\"checkbox padding-15 border rounded margin-bottom-20 \" tabindex=\"0\"><input type=\"checkbox\" class=\"padding-15 border rounded margin-bottom-20 \"><span class=\"checkbox-text\"><span>Click here to complete this step. There is no other way forward.</span></span></label><div class=\"btn-toolbar justify-content-between\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-chevron-left\"></span>Previous</button><button type=\"button\" class=\"btn btn-default btn-component btn-icon-right\" disabled=\"\" tabindex=\"0\"><span class=\"rioglyph rioglyph-chevron-right\"></span>Next</button></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { type ChangeEvent, useState } from 'react';\n\nimport SteppedProgressBar from '@rio-cloud/rio-uikit/SteppedProgressBar';\nimport Checkbox from '@rio-cloud/rio-uikit/Checkbox';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport { dummyText, dummyTextShort } from '../../../utils/data';\n\nconst SteppedProgressBarExampleDefault = () => {\n    const [selectedStep, setSelectedStep] = useState(1);\n    const [disableFollowingPages, setDisableFollowingPages] = useState<number>();\n\n    const handlePageNext = () => {\n        setSelectedStep(selectedStep + 1);\n        setDisableFollowingPages(3);\n    };\n\n    const handlePagePrevious = () => setSelectedStep(selectedStep - 1);\n    const handleSelectedChanged = (selectedKey: number) => setSelectedStep(selectedKey);\n    const handleDisableFollowingPages = (pageNumber: number) => setDisableFollowingPages(pageNumber - 1);\n\n    const pageContent = [\n        <FirstPageContent key='firstStep' pageNumber={1} onClickNext={handlePageNext} />,\n        <SecondPageContent\n            key='secondStep'\n            pageNumber={2}\n            onClickNext={handlePageNext}\n            onClickPrevious={handlePagePrevious}\n            onDisableFollowingPages={handleDisableFollowingPages}\n        />,\n        <ThirdPageContent key='thirdStep' pageNumber={3} onClickPrevious={handlePagePrevious} />,\n    ];\n\n    return (\n        <div className='steppedProgressBarExample'>\n            <div className='margin-bottom-25'>\n                <SteppedProgressBar\n                    variant={SteppedProgressBar.VARIANT_ROADSIGN}\n                    selectedStepNumber={selectedStep}\n                    onSelectedChanged={handleSelectedChanged}\n                    disableFollowingPages={disableFollowingPages}\n                    mobileBreakpoint={false}\n                    labels={[\n                        {\n                            icon: <i className='rioglyph rioglyph-document' />,\n                            label: 'Label for step 1',\n                        },\n                        {\n                            icon: <i className='rioglyph rioglyph-pdf-file' />,\n                            label: 'Label for step 2',\n                        },\n                        {\n                            icon: <i className='rioglyph rioglyph-print' />,\n                            label: 'Label for final step',\n                        },\n                    ]}\n                />\n            </div>\n            {pageContent[selectedStep]}\n        </div>\n    );\n};\n\nexport default SteppedProgressBarExampleDefault;\n\ntype FirstPageContentProps = { pageNumber: number; onClickNext: VoidFunction };\n\nconst FirstPageContent = ({ pageNumber, onClickNext }: FirstPageContentProps) => (\n    <div className='panel panel-default panel-body padding-25'>\n        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>\n        <div className='padding-y-25'>{dummyText}</div>\n        <div className='btn-toolbar justify-content-end'>\n            <Button className='btn-icon-right' iconName='rioglyph-chevron-right' onClick={onClickNext}>\n                Next\n            </Button>\n        </div>\n    </div>\n);\n\ntype SecondPageContentProps = {\n    pageNumber: number;\n    onClickNext: VoidFunction;\n    onClickPrevious: VoidFunction;\n    onDisableFollowingPages: (pageNumber: number) => void;\n};\n\nconst SecondPageContent = (props: SecondPageContentProps) => {\n    const { pageNumber, onClickNext, onClickPrevious, onDisableFollowingPages } = props;\n\n    const [isAccepted, setIsAccepted] = useState(false);\n\n    const handleNext = () => isAccepted && onClickNext();\n\n    const handleAccept = (event: ChangeEvent<HTMLInputElement>) => {\n        setIsAccepted(event.target.checked);\n        if (!event.target.checked) {\n            onDisableFollowingPages(pageNumber);\n        }\n    };\n\n    return (\n        <div className='panel panel-default panel-body padding-25'>\n            <div className='text-size-h3'>{`Content of page ${pageNumber}`}</div>\n            <div className='padding-y-20'>{dummyTextShort}</div>\n            <Checkbox\n                onChange={handleAccept}\n                checked={isAccepted}\n                className={`padding-15 border rounded margin-bottom-20 ${isAccepted ? 'border-color-highlight' : ''}`}\n            >\n                Click here to complete this step. There is no other way forward.\n            </Checkbox>\n            <div className='btn-toolbar justify-content-between'>\n                <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>\n                    Previous\n                </Button>\n                <Button\n                    className='btn-icon-right'\n                    iconName='rioglyph-chevron-right'\n                    onClick={handleNext}\n                    disabled={!isAccepted}\n                >\n                    Next\n                </Button>\n            </div>\n        </div>\n    );\n};\n\ntype ThirdPageContentProps = {\n    pageNumber: number;\n    onClickPrevious: VoidFunction;\n};\n\nconst ThirdPageContent = ({ pageNumber, onClickPrevious }: ThirdPageContentProps) => (\n    <div className='panel panel-default panel-body padding-25'>\n        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>\n        <div className='padding-y-25'>{dummyText}</div>\n        <div className='btn-toolbar'>\n            <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>\n                Previous\n            </Button>\n        </div>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"steppedProgressBarExample\">\n    <div class=\"margin-bottom-25\">\n        <div class=\"stepped-progress-bar variant-roadsign nav\">\n            <a data-rb-event-key=\"0\" class=\"step-tab nav-link\">\n                <div class=\"step-tab-content\">\n                    <div class=\"item-icon\">\n                        <i class=\"rioglyph rioglyph-document\">\n                        </i>\n                    </div>\n                    <div class=\"item-label\">Label for step 1</div>\n                </div>\n            </a>\n            <a data-rb-event-key=\"1\" class=\"step-tab nav-link active\">\n                <div class=\"step-tab-content\">\n                    <div class=\"item-icon\">\n                        <i class=\"rioglyph rioglyph-pdf-file\">\n                        </i>\n                    </div>\n                    <div class=\"item-label\">Label for step 2</div>\n                </div>\n            </a>\n            <a disabled=\"\" data-rb-event-key=\"2\" class=\"step-tab nav-link disabled\">\n                <div class=\"step-tab-content\">\n                    <div class=\"item-icon\">\n                        <i class=\"rioglyph rioglyph-print\">\n                        </i>\n                    </div>\n                    <div class=\"item-label\">Label for final step</div>\n                </div>\n            </a>\n        </div>\n    </div>\n    <div class=\"panel panel-default panel-body padding-25\">\n        <div class=\"text-size-h3\">Content of page 2</div>\n        <div class=\"padding-y-20\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt.</div>\n        <label class=\"checkbox padding-15 border rounded margin-bottom-20 \" tabindex=\"0\">\n            <input type=\"checkbox\" class=\"padding-15 border rounded margin-bottom-20 \">\n            <span class=\"checkbox-text\">\n                <span>Click here to complete this step. There is no other way forward.</span>\n            </span>\n        </label>\n        <div class=\"btn-toolbar justify-content-between\">\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">\n                <span class=\"rioglyph rioglyph-chevron-left\">\n                </span>Previous</button>\n            <button type=\"button\" class=\"btn btn-default btn-component btn-icon-right\" disabled=\"\" tabindex=\"0\">\n                <span class=\"rioglyph rioglyph-chevron-right\">\n                </span>Next</button>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "labels",
+                      "type": "Array of Objects",
+                      "default": "",
+                      "description": "Objects to define the icon and the label of the navigation items. The icon can be a string or an icon."
+                    },
+                    {
+                      "name": "└icon",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The element shown in the step element. This can be a single step number or an icon element."
+                    },
+                    {
+                      "name": "└label",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The label shown below the step element."
+                    },
+                    {
+                      "name": "└labelClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the label element."
+                    },
+                    {
+                      "name": "└labelWrapperClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the label wrapping element."
+                    },
+                    {
+                      "name": "selectedStepNumber",
+                      "type": "Number",
+                      "default": "",
+                      "description": "Index of the selected navigation item."
+                    },
+                    {
+                      "name": "onSelectedChanged",
+                      "type": "Function",
+                      "default": "() => {}",
+                      "description": "Called with the new selected index after the user clicked a nav item."
+                    },
+                    {
+                      "name": "variant",
+                      "type": "String",
+                      "default": "circle",
+                      "description": "The SteppedProgressBar Variant. One of \"circle\", \"rectangle\" or \"roadsign\"."
+                    },
+                    {
+                      "name": "disableFollowingPages",
+                      "type": "Number",
+                      "default": "",
+                      "description": "All navigation items with a higher index than this will be disabled."
+                    },
+                    {
+                      "name": "mobileBreakpoint",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Deactivating the Wrapping of bubbles on mobile"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}