@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,177 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:30.727Z",
+    "source": "https://uikit.developers.rio.cloud/#components/statusBar",
+    "category": "Components",
+    "section": "Progress",
+    "slug": "components/statusbar",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "73a27502251492d9be9c45718fac453e55e4ce58726af193f36a2dfacce170de"
+  },
+  "title": "StatusBar",
+  "lead": "Flexible component to showcase various states based on progress bars.",
+  "content": [
+    {
+      "heading": "StatusBar",
+      "body": "Usage: Use these components only on light backgrounds and limit the width of the wrapping element to avoid extreme long progress bars.",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"row\"><div class=\"col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs\"><div class=\"display-flex-md align-items-baseline margin-bottom-10\"><div class=\"text-size-16\">V1</div><div class=\"text-size-14 margin-left-10-md\">Top label with icon left</div></div><div class=\"StatusBar width-100pct display-flex align-items-end MyProgress\"><div class=\"flex-order-1 margin-right-5\"><span class=\"rioglyph rioglyph-status-resting text-color-status-resting text-size-h3\"></span></div><div class=\"display-flex flex-1-0 flex-order-1 flex-column margin-bottom-10\"><div class=\"display-flex justify-content-center\"><span class=\"display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-resting width-0 text-size-16 text-bold\">42 min resting</span></div><div class=\"display-flex flex-1-0\"><div class=\"progress margin-0 flex-1-0 height-5\"><div class=\"progress-bar progress-bar-status-resting progress-divider\" style=\"width: 30%;\"></div><div class=\"progress-bar progress-bar-light progress-divider\" style=\"width: 70%;\"></div></div></div></div></div></div><div class=\"col-sm-6\"><div class=\"display-flex-md align-items-baseline margin-bottom-10\"><div class=\"text-size-16\">V2</div><div class=\"text-size-14 margin-left-10-md\">Top label with icon right</div></div><div class=\"StatusBar width-100pct display-flex align-items-end\"><div class=\"flex-order-2 margin-left-5\"><span class=\"rioglyph rioglyph-status-resting text-color-status-resting text-size-h3\"></span></div><div class=\"display-flex flex-1-0 flex-order-1 flex-column margin-bottom-10\"><div class=\"display-flex justify-content-center\"><span class=\"display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-resting width-0 text-size-16 text-bold\">42 min resting</span></div><div class=\"display-flex flex-1-0\"><div class=\"progress margin-0 flex-1-0 height-5\"><div class=\"progress-bar progress-bar-status-resting progress-divider\" style=\"width: 30%;\"></div><div class=\"progress-bar progress-bar-light progress-divider\" style=\"width: 70%;\"></div></div></div></div></div></div></div><hr class=\"margin-top-25 margin-bottom-25\"><div class=\"row\"><div class=\"col-sm-6 margin-bottom-20 margin-bottom-0-sm\"><div class=\"display-flex-md align-items-baseline margin-bottom-10\"><div class=\"text-size-16\">V3</div><div class=\"text-size-14 margin-left-10-md\">Split whith icon left and label right</div></div><div class=\"StatusBar width-100pct display-flex align-items-center\"><div class=\"flex-order-1 margin-right-5\"><span class=\"rioglyph rioglyph-status-driving text-color-status-driving text-size-h3\"></span></div><div class=\"display-flex flex-1-0 flex-order-2 align-items-center\"><div class=\"flex-order-2 margin-left-10\"><span class=\"display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-driving text-size-16 text-bold\">1:45 h</span></div><div class=\"display-flex flex-1-0 flex-order-1\"><div class=\"progress margin-0 flex-1-0 height-5\"><div class=\"progress-bar progress-bar-status-driving progress-divider\" style=\"width: 85%;\"></div><div class=\"progress-bar progress-bar-light progress-divider\" style=\"width: 15%;\"></div></div></div></div></div></div><div class=\"col-sm-6\"><div class=\"display-flex-md align-items-baseline margin-bottom-10\"><div class=\"text-size-16\">V4</div><div class=\"text-size-14 margin-left-10-md\">Split whith icon right and label left</div></div><div class=\"StatusBar width-100pct display-flex align-items-center\"><div class=\"flex-order-2 margin-left-5\"><span class=\"rioglyph rioglyph-status-driving text-color-status-driving text-size-h3\"></span></div><div class=\"display-flex flex-1-0 flex-order-1 align-items-center\"><div class=\"flex-order-1 margin-right-10\"><span class=\"display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-driving text-size-16 text-bold\">1:45 h</span></div><div class=\"display-flex flex-1-0 flex-order-2\"><div class=\"progress margin-0 flex-1-0 height-5\"><div class=\"progress-bar progress-bar-status-driving progress-divider\" style=\"width: 85%;\"></div><div class=\"progress-bar progress-bar-light progress-divider\" style=\"width: 15%;\"></div></div></div></div></div></div></div><hr class=\"margin-top-25 margin-bottom-25\"><div class=\"row\"><div class=\"col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs\"><div class=\"display-flex-md align-items-baseline margin-bottom-10\"><div class=\"text-size-16\">V5</div><div class=\"text-size-14 margin-left-10-md\">Both icon and label left</div></div><div class=\"StatusBar width-100pct display-flex align-items-center\"><div class=\"flex-order-1 margin-right-5\"><span class=\"rioglyph rioglyph-status-working text-color-status-working text-size-h3\"></span></div><div class=\"display-flex flex-1-0 flex-order-2 align-items-center\"><div class=\"flex-order-1 margin-right-10\"><span class=\"display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-working text-size-16 text-bold\">13 min</span></div><div class=\"display-flex flex-1-0 flex-order-2\"><div class=\"progress margin-0 flex-1-0 height-5\"><div class=\"progress-bar progress-bar-status-working progress-divider\" style=\"width: 15%;\"></div><div class=\"progress-bar progress-bar-light progress-divider\" style=\"width: 85%;\"></div></div></div></div></div></div><div class=\"col-sm-6\"><div class=\"display-flex-md align-items-baseline margin-bottom-10\"><div class=\"text-size-16\">V6</div><div class=\"text-size-14 margin-left-10-md\">Both icon and label right</div></div><div class=\"StatusBar width-100pct display-flex align-items-center\"><div class=\"flex-order-2 margin-left-5\"><span class=\"rioglyph rioglyph-status-working text-color-status-working text-size-h3\"></span></div><div class=\"display-flex flex-1-0 flex-order-1 align-items-center\"><div class=\"flex-order-2 margin-left-10\"><span class=\"display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-working text-size-16 text-bold\">13 min</span></div><div class=\"display-flex flex-1-0 flex-order-1\"><div class=\"progress margin-0 flex-1-0 height-5\"><div class=\"progress-bar progress-bar-status-working progress-divider\" style=\"width: 15%;\"></div><div class=\"progress-bar progress-bar-light progress-divider\" style=\"width: 85%;\"></div></div></div></div></div></div></div><hr class=\"margin-top-25 margin-bottom-25\"><div class=\"row\"><div class=\"col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs\"><div class=\"display-flex-md align-items-baseline margin-bottom-10\"><div class=\"text-size-16\">V7</div><div class=\"text-size-14 margin-left-10-md\">Label left</div></div><div class=\"StatusBar width-100pct display-flex align-items-center\"><div class=\"display-flex flex-1-0 align-items-center\"><div class=\"flex-order-1 margin-right-10\"><span class=\"display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-available text-size-16 text-bold\">42 min</span></div><div class=\"display-flex flex-1-0 flex-order-2\"><div class=\"progress margin-0 flex-1-0 height-5\"><div class=\"progress-bar progress-bar-status-available progress-divider\" style=\"width: 55%;\"></div><div class=\"progress-bar progress-bar-light progress-divider\" style=\"width: 45%;\"></div></div></div></div></div></div><div class=\"col-sm-6\"><div class=\"display-flex-md align-items-baseline margin-bottom-10\"><div class=\"text-size-16\">V8</div><div class=\"text-size-14 margin-left-10-md\">Thin label right</div></div><div class=\"StatusBar width-100pct display-flex align-items-center\"><div class=\"display-flex flex-1-0 align-items-center\"><div class=\"flex-order-2 margin-left-10\"><span class=\"display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-available text-size-16\">42 min</span></div><div class=\"display-flex flex-1-0 flex-order-1\"><div class=\"progress margin-0 flex-1-0 height-5\"><div class=\"progress-bar progress-bar-status-available progress-divider\" style=\"width: 55%;\"></div><div class=\"progress-bar progress-bar-light progress-divider\" style=\"width: 45%;\"></div></div></div></div></div></div></div><hr class=\"margin-top-25 margin-bottom-25\"><div class=\"row\"><div class=\"col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs\"><div class=\"display-flex-md align-items-baseline margin-bottom-10\"><div class=\"text-size-16\">V9</div><div class=\"text-size-14 margin-left-10-md\">Large progress with large icon left</div></div><div class=\"StatusBar width-100pct display-flex align-items-center\"><div class=\"flex-order-1 margin-right-5\"><span class=\"rioglyph rioglyph-user-sign text-color-darker text-size-h2\"></span></div><div class=\"display-flex flex-1-0 flex-order-2 align-items-center\"><div class=\"display-flex flex-1-0\"><div class=\"progress margin-0 flex-1-0 height-10\"><div class=\"progress-bar progress-bar-rating-1 progress-divider\" style=\"width: 15%;\"></div><div class=\"progress-bar progress-bar-rating-2 progress-divider\" style=\"width: 25%;\"></div><div class=\"progress-bar progress-bar-rating-3 progress-divider\" style=\"width: 20%;\"></div><div class=\"progress-bar progress-bar-rating-4 progress-divider\" style=\"width: 30%;\"></div><div class=\"progress-bar progress-bar-rating-5 progress-divider\" style=\"width: 10%;\"></div></div></div></div></div></div><div class=\"col-sm-6\"><div class=\"display-flex-md align-items-baseline margin-bottom-10\"><div class=\"text-size-16\">V10</div><div class=\"text-size-14 margin-left-10-md\">Large progress with large icon right</div></div><div class=\"StatusBar width-100pct display-flex align-items-center\"><div class=\"flex-order-2 margin-left-5\"><span class=\"rioglyph rioglyph-user-sign text-color-darker text-size-h2\"></span></div><div class=\"display-flex flex-1-0 flex-order-1 align-items-center\"><div class=\"display-flex flex-1-0\"><div class=\"progress margin-0 flex-1-0 height-10\"><div class=\"progress-bar progress-bar-rating-1 progress-divider\" style=\"width: 15%;\"></div><div class=\"progress-bar progress-bar-rating-2 progress-divider\" style=\"width: 25%;\"></div><div class=\"progress-bar progress-bar-rating-3 progress-divider\" style=\"width: 20%;\"></div><div class=\"progress-bar progress-bar-rating-4 progress-divider\" style=\"width: 30%;\"></div><div class=\"progress-bar progress-bar-rating-5 progress-divider\" style=\"width: 10%;\"></div></div></div></div></div></div></div><hr class=\"margin-top-25 margin-bottom-25\"><div class=\"display-flex-md align-items-baseline margin-bottom-10\"><div class=\"text-size-16\">V11</div><div class=\"text-size-14 margin-left-10-md\">Large progress with large icon and label</div></div><div class=\"StatusBar width-100pct display-flex align-items-center\"><div class=\"flex-order-1 margin-right-5\"><span class=\"rioglyph rioglyph-status-working text-color-status-working text-size-h2\"></span></div><div class=\"display-flex flex-1-0 flex-order-2 align-items-center\"><div class=\"flex-order-2 margin-left-10\"><span class=\"display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-working text-size-h3 text-bold\">44%</span></div><div class=\"display-flex flex-1-0 flex-order-1\"><div class=\"progress margin-0 flex-1-0 height-10\"><div class=\"progress-bar progress-bar-status-working\" style=\"width: 44%;\"></div></div></div></div></div><hr class=\"margin-top-25 margin-bottom-25\"><div class=\"display-flex-md align-items-baseline margin-bottom-10\"><div class=\"text-size-16\">V12</div><div class=\"text-size-14 margin-left-10-md\">Large progress only</div></div><div class=\"StatusBar width-100pct display-flex align-items-center\"><div class=\"display-flex flex-1-0\"><div class=\"display-flex flex-1-0\"><div class=\"progress margin-0 flex-1-0 height-10\"><div class=\"progress-bar progress-bar-info progress-divider\" style=\"width: 25%;\"></div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React from 'react';\n\nimport StatusBar from '@rio-cloud/rio-uikit/StatusBar';\n\nconst Headline = ({ headline, description }: { headline: string; description: string }) => (\n    <div className='display-flex-md align-items-baseline margin-bottom-10'>\n        <div className='text-size-16'>{headline}</div>\n        <div className='text-size-14 margin-left-10-md'>{description}</div>\n    </div>\n);\n\nexport default () => (\n    <div>\n        <div className='row'>\n            <div className='col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs'>\n                <Headline headline='V1' description='Top label with icon left' />\n\n                <StatusBar\n                    icon={{ name: 'rioglyph-status-resting', color: 'text-color-status-resting' }}\n                    label={{ value: '42 min resting', alignment: 'top', color: 'text-color-status-resting' }}\n                    progress={[\n                        { percentage: 30, color: 'progress-bar-status-resting', tooltip: <span>30%</span> },\n                        { percentage: 70, color: 'progress-bar-light', tooltip: <span>70%</span> },\n                    ]}\n                    className='MyProgress'\n                />\n            </div>\n\n            <div className='col-sm-6'>\n                <Headline headline='V2' description='Top label with icon right' />\n\n                <StatusBar\n                    icon={{ name: 'rioglyph-status-resting', alignment: 'right', color: 'text-color-status-resting' }}\n                    label={{ value: '42 min resting', alignment: 'top', color: 'text-color-status-resting' }}\n                    progress={[\n                        { percentage: 30, color: 'progress-bar-status-resting', tooltip: <span>30%</span> },\n                        { percentage: 70, color: 'progress-bar-light', tooltip: <span>70%</span> },\n                    ]}\n                />\n            </div>\n        </div>\n\n        <hr className='margin-top-25 margin-bottom-25' />\n\n        <div className='row'>\n            <div className='col-sm-6 margin-bottom-20 margin-bottom-0-sm'>\n                <Headline headline='V3' description='Split whith icon left and label right' />\n\n                <StatusBar\n                    icon={{ name: 'rioglyph-status-driving', color: 'text-color-status-driving' }}\n                    label={{ value: '1:45 h', color: 'text-color-status-driving' }}\n                    progress={[\n                        { percentage: 85, color: 'progress-bar-status-driving', tooltip: <span>85%</span> },\n                        { percentage: 15, color: 'progress-bar-light', tooltip: <span>15%</span> },\n                    ]}\n                />\n            </div>\n\n            <div className='col-sm-6'>\n                <Headline headline='V4' description='Split whith icon right and label left' />\n\n                <StatusBar\n                    icon={{ name: 'rioglyph-status-driving', alignment: 'right', color: 'text-color-status-driving' }}\n                    label={{ value: '1:45 h', alignment: 'left', color: 'text-color-status-driving' }}\n                    progress={[\n                        { percentage: 85, color: 'progress-bar-status-driving', tooltip: <span>85%</span> },\n                        { percentage: 15, color: 'progress-bar-light', tooltip: <span>15%</span> },\n                    ]}\n                />\n            </div>\n        </div>\n\n        <hr className='margin-top-25 margin-bottom-25' />\n\n        <div className='row'>\n            <div className='col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs'>\n                <Headline headline='V5' description='Both icon and label left' />\n\n                <StatusBar\n                    icon={{ name: 'rioglyph-status-working', color: 'text-color-status-working' }}\n                    label={{ value: '13 min', alignment: 'left', color: 'text-color-status-working' }}\n                    progress={[\n                        { percentage: 15, color: 'progress-bar-status-working', tooltip: <span>15%</span> },\n                        { percentage: 85, color: 'progress-bar-light', tooltip: <span>85%</span> },\n                    ]}\n                />\n            </div>\n\n            <div className='col-sm-6'>\n                <Headline headline='V6' description='Both icon and label right' />\n\n                <StatusBar\n                    icon={{ name: 'rioglyph-status-working', alignment: 'right', color: 'text-color-status-working' }}\n                    label={{ value: '13 min', alignment: 'right', color: 'text-color-status-working' }}\n                    progress={[\n                        { percentage: 15, color: 'progress-bar-status-working', tooltip: <span>15%</span> },\n                        { percentage: 85, color: 'progress-bar-light', tooltip: <span>85%</span> },\n                    ]}\n                />\n            </div>\n        </div>\n\n        <hr className='margin-top-25 margin-bottom-25' />\n\n        <div className='row'>\n            <div className='col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs'>\n                <Headline headline='V7' description='Label left' />\n\n                <StatusBar\n                    label={{ value: '42 min', alignment: 'left', color: 'text-color-status-available' }}\n                    progress={[\n                        { percentage: 55, color: 'progress-bar-status-available', tooltip: <span>55%</span> },\n                        { percentage: 45, color: 'progress-bar-light', tooltip: <span>45%</span> },\n                    ]}\n                />\n            </div>\n\n            <div className='col-sm-6'>\n                <Headline headline='V8' description='Thin label right' />\n\n                <StatusBar\n                    label={{ value: '42 min', weight: 'light', color: 'text-color-status-available' }}\n                    progress={[\n                        { percentage: 55, color: 'progress-bar-status-available', tooltip: <span>55%</span> },\n                        { percentage: 45, color: 'progress-bar-light', tooltip: <span>45%</span> },\n                    ]}\n                />\n            </div>\n        </div>\n\n        <hr className='margin-top-25 margin-bottom-25' />\n\n        <div className='row'>\n            <div className='col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs'>\n                <Headline headline='V9' description='Large progress with large icon left' />\n\n                <StatusBar\n                    icon={{ name: 'rioglyph-user-sign', color: 'text-color-darker' }}\n                    progress={[\n                        { percentage: 15, color: 'progress-bar-rating-1' },\n                        { percentage: 25, color: 'progress-bar-rating-2' },\n                        { percentage: 20, color: 'progress-bar-rating-3' },\n                        { percentage: 30, color: 'progress-bar-rating-4' },\n                        { percentage: 10, color: 'progress-bar-rating-5' },\n                    ]}\n                    size='large'\n                />\n            </div>\n\n            <div className='col-sm-6'>\n                <Headline headline='V10' description='Large progress with large icon right' />\n\n                <StatusBar\n                    icon={{ name: 'rioglyph-user-sign', color: 'text-color-darker', alignment: 'right' }}\n                    progress={[\n                        { percentage: 15, color: 'progress-bar-rating-1' },\n                        { percentage: 25, color: 'progress-bar-rating-2' },\n                        { percentage: 20, color: 'progress-bar-rating-3' },\n                        { percentage: 30, color: 'progress-bar-rating-4' },\n                        { percentage: 10, color: 'progress-bar-rating-5' },\n                    ]}\n                    size='large'\n                />\n            </div>\n        </div>\n\n        <hr className='margin-top-25 margin-bottom-25' />\n\n        <Headline headline='V11' description='Large progress with large icon and label' />\n\n        <StatusBar\n            icon={{ name: 'rioglyph-status-working', color: 'text-color-status-working' }}\n            label={{ value: '44%', color: 'text-color-status-working' }}\n            progress={[{ percentage: 44, color: 'progress-bar-status-working', tooltip: <span>44%</span> }]}\n            size='large'\n            useProgressDivider={false}\n        />\n\n        <hr className='margin-top-25 margin-bottom-25' />\n\n        <Headline headline='V12' description='Large progress only' />\n\n        <StatusBar progress={[{ percentage: 25, color: 'progress-bar-info' }]} size='large' />\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"row\">\n        <div class=\"col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs\">\n            <div class=\"display-flex-md align-items-baseline margin-bottom-10\">\n                <div class=\"text-size-16\">V1</div>\n                <div class=\"text-size-14 margin-left-10-md\">Top label with icon left</div>\n            </div>\n            <div class=\"StatusBar width-100pct display-flex align-items-end MyProgress\">\n                <div class=\"flex-order-1 margin-right-5\">\n                    <span class=\"rioglyph rioglyph-status-resting text-color-status-resting text-size-h3\">\n                    </span>\n                </div>\n                <div class=\"display-flex flex-1-0 flex-order-1 flex-column margin-bottom-10\">\n                    <div class=\"display-flex justify-content-center\">\n                        <span class=\"display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-resting width-0 text-size-16 text-bold\">42 min resting</span>\n                    </div>\n                    <div class=\"display-flex flex-1-0\">\n                        <div class=\"progress margin-0 flex-1-0 height-5\">\n                            <div class=\"progress-bar progress-bar-status-resting progress-divider\" style=\"width: 30%;\">\n                            </div>\n                            <div class=\"progress-bar progress-bar-light progress-divider\" style=\"width: 70%;\">\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"col-sm-6\">\n            <div class=\"display-flex-md align-items-baseline margin-bottom-10\">\n                <div class=\"text-size-16\">V2</div>\n                <div class=\"text-size-14 margin-left-10-md\">Top label with icon right</div>\n            </div>\n            <div class=\"StatusBar width-100pct display-flex align-items-end\">\n                <div class=\"flex-order-2 margin-left-5\">\n                    <span class=\"rioglyph rioglyph-status-resting text-color-status-resting text-size-h3\">\n                    </span>\n                </div>\n                <div class=\"display-flex flex-1-0 flex-order-1 flex-column margin-bottom-10\">\n                    <div class=\"display-flex justify-content-center\">\n                        <span class=\"display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-resting width-0 text-size-16 text-bold\">42 min resting</span>\n                    </div>\n                    <div class=\"display-flex flex-1-0\">\n                        <div class=\"progress margin-0 flex-1-0 height-5\">\n                            <div class=\"progress-bar progress-bar-status-resting progress-divider\" style=\"width: 30%;\">\n                            </div>\n                            <div class=\"progress-bar progress-bar-light progress-divider\" style=\"width: 70%;\">\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <hr class=\"margin-top-25 margin-bottom-25\">\n    <div class=\"row\">\n        <div class=\"col-sm-6 margin-bottom-20 margin-bottom-0-sm\">\n            <div class=\"display-flex-md align-items-baseline margin-bottom-10\">\n                <div class=\"text-size-16\">V3</div>\n                <div class=\"text-size-14 margin-left-10-md\">Split whith icon left and label right</div>\n            </div>\n            <div class=\"StatusBar width-100pct display-flex align-items-center\">\n                <div class=\"flex-order-1 margin-right-5\">\n                    <span class=\"rioglyph rioglyph-status-driving text-color-status-driving text-size-h3\">\n                    </span>\n                </div>\n                <div class=\"display-flex flex-1-0 flex-order-2 align-items-center\">\n                    <div class=\"flex-order-2 margin-left-10\">\n                        <span class=\"display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-driving text-size-16 text-bold\">1:45 h</span>\n                    </div>\n                    <div class=\"display-flex flex-1-0 flex-order-1\">\n                        <div class=\"progress margin-0 flex-1-0 height-5\">\n                            <div class=\"progress-bar progress-bar-status-driving progress-divider\" style=\"width: 85%;\">\n                            </div>\n                            <div class=\"progress-bar progress-bar-light progress-divider\" style=\"width: 15%;\">\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"col-sm-6\">\n            <div class=\"display-flex-md align-items-baseline margin-bottom-10\">\n                <div class=\"text-size-16\">V4</div>\n                <div class=\"text-size-14 margin-left-10-md\">Split whith icon right and label left</div>\n            </div>\n            <div class=\"StatusBar width-100pct display-flex align-items-center\">\n                <div class=\"flex-order-2 margin-left-5\">\n                    <span class=\"rioglyph rioglyph-status-driving text-color-status-driving text-size-h3\">\n                    </span>\n                </div>\n                <div class=\"display-flex flex-1-0 flex-order-1 align-items-center\">\n                    <div class=\"flex-order-1 margin-right-10\">\n                        <span class=\"display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-driving text-size-16 text-bold\">1:45 h</span>\n                    </div>\n                    <div class=\"display-flex flex-1-0 flex-order-2\">\n                        <div class=\"progress margin-0 flex-1-0 height-5\">\n                            <div class=\"progress-bar progress-bar-status-driving progress-divider\" style=\"width: 85%;\">\n                            </div>\n                            <div class=\"progress-bar progress-bar-light progress-divider\" style=\"width: 15%;\">\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <hr class=\"margin-top-25 margin-bottom-25\">\n    <div class=\"row\">\n        <div class=\"col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs\">\n            <div class=\"display-flex-md align-items-baseline margin-bottom-10\">\n                <div class=\"text-size-16\">V5</div>\n                <div class=\"text-size-14 margin-left-10-md\">Both icon and label left</div>\n            </div>\n            <div class=\"StatusBar width-100pct display-flex align-items-center\">\n                <div class=\"flex-order-1 margin-right-5\">\n                    <span class=\"rioglyph rioglyph-status-working text-color-status-working text-size-h3\">\n                    </span>\n                </div>\n                <div class=\"display-flex flex-1-0 flex-order-2 align-items-center\">\n                    <div class=\"flex-order-1 margin-right-10\">\n                        <span class=\"display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-working text-size-16 text-bold\">13 min</span>\n                    </div>\n                    <div class=\"display-flex flex-1-0 flex-order-2\">\n                        <div class=\"progress margin-0 flex-1-0 height-5\">\n                            <div class=\"progress-bar progress-bar-status-working progress-divider\" style=\"width: 15%;\">\n                            </div>\n                            <div class=\"progress-bar progress-bar-light progress-divider\" style=\"width: 85%;\">\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"col-sm-6\">\n            <div class=\"display-flex-md align-items-baseline margin-bottom-10\">\n                <div class=\"text-size-16\">V6</div>\n                <div class=\"text-size-14 margin-left-10-md\">Both icon and label right</div>\n            </div>\n            <div class=\"StatusBar width-100pct display-flex align-items-center\">\n                <div class=\"flex-order-2 margin-left-5\">\n                    <span class=\"rioglyph rioglyph-status-working text-color-status-working text-size-h3\">\n                    </span>\n                </div>\n                <div class=\"display-flex flex-1-0 flex-order-1 align-items-center\">\n                    <div class=\"flex-order-2 margin-left-10\">\n                        <span class=\"display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-working text-size-16 text-bold\">13 min</span>\n                    </div>\n                    <div class=\"display-flex flex-1-0 flex-order-1\">\n                        <div class=\"progress margin-0 flex-1-0 height-5\">\n                            <div class=\"progress-bar progress-bar-status-working progress-divider\" style=\"width: 15%;\">\n                            </div>\n                            <div class=\"progress-bar progress-bar-light progress-divider\" style=\"width: 85%;\">\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <hr class=\"margin-top-25 margin-bottom-25\">\n    <div class=\"row\">\n        <div class=\"col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs\">\n            <div class=\"display-flex-md align-items-baseline margin-bottom-10\">\n                <div class=\"text-size-16\">V7</div>\n                <div class=\"text-size-14 margin-left-10-md\">Label left</div>\n            </div>\n            <div class=\"StatusBar width-100pct display-flex align-items-center\">\n                <div class=\"display-flex flex-1-0 align-items-center\">\n                    <div class=\"flex-order-1 margin-right-10\">\n                        <span class=\"display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-available text-size-16 text-bold\">42 min</span>\n                    </div>\n                    <div class=\"display-flex flex-1-0 flex-order-2\">\n                        <div class=\"progress margin-0 flex-1-0 height-5\">\n                            <div class=\"progress-bar progress-bar-status-available progress-divider\" style=\"width: 55%;\">\n                            </div>\n                            <div class=\"progress-bar progress-bar-light progress-divider\" style=\"width: 45%;\">\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"col-sm-6\">\n            <div class=\"display-flex-md align-items-baseline margin-bottom-10\">\n                <div class=\"text-size-16\">V8</div>\n                <div class=\"text-size-14 margin-left-10-md\">Thin label right</div>\n            </div>\n            <div class=\"StatusBar width-100pct display-flex align-items-center\">\n                <div class=\"display-flex flex-1-0 align-items-center\">\n                    <div class=\"flex-order-2 margin-left-10\">\n                        <span class=\"display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-available text-size-16\">42 min</span>\n                    </div>\n                    <div class=\"display-flex flex-1-0 flex-order-1\">\n                        <div class=\"progress margin-0 flex-1-0 height-5\">\n                            <div class=\"progress-bar progress-bar-status-available progress-divider\" style=\"width: 55%;\">\n                            </div>\n                            <div class=\"progress-bar progress-bar-light progress-divider\" style=\"width: 45%;\">\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <hr class=\"margin-top-25 margin-bottom-25\">\n    <div class=\"row\">\n        <div class=\"col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs\">\n            <div class=\"display-flex-md align-items-baseline margin-bottom-10\">\n                <div class=\"text-size-16\">V9</div>\n                <div class=\"text-size-14 margin-left-10-md\">Large progress with large icon left</div>\n            </div>\n            <div class=\"StatusBar width-100pct display-flex align-items-center\">\n                <div class=\"flex-order-1 margin-right-5\">\n                    <span class=\"rioglyph rioglyph-user-sign text-color-darker text-size-h2\">\n                    </span>\n                </div>\n                <div class=\"display-flex flex-1-0 flex-order-2 align-items-center\">\n                    <div class=\"display-flex flex-1-0\">\n                        <div class=\"progress margin-0 flex-1-0 height-10\">\n                            <div class=\"progress-bar progress-bar-rating-1 progress-divider\" style=\"width: 15%;\">\n                            </div>\n                            <div class=\"progress-bar progress-bar-rating-2 progress-divider\" style=\"width: 25%;\">\n                            </div>\n                            <div class=\"progress-bar progress-bar-rating-3 progress-divider\" style=\"width: 20%;\">\n                            </div>\n                            <div class=\"progress-bar progress-bar-rating-4 progress-divider\" style=\"width: 30%;\">\n                            </div>\n                            <div class=\"progress-bar progress-bar-rating-5 progress-divider\" style=\"width: 10%;\">\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"col-sm-6\">\n            <div class=\"display-flex-md align-items-baseline margin-bottom-10\">\n                <div class=\"text-size-16\">V10</div>\n                <div class=\"text-size-14 margin-left-10-md\">Large progress with large icon right</div>\n            </div>\n            <div class=\"StatusBar width-100pct display-flex align-items-center\">\n                <div class=\"flex-order-2 margin-left-5\">\n                    <span class=\"rioglyph rioglyph-user-sign text-color-darker text-size-h2\">\n                    </span>\n                </div>\n                <div class=\"display-flex flex-1-0 flex-order-1 align-items-center\">\n                    <div class=\"display-flex flex-1-0\">\n                        <div class=\"progress margin-0 flex-1-0 height-10\">\n                            <div class=\"progress-bar progress-bar-rating-1 progress-divider\" style=\"width: 15%;\">\n                            </div>\n                            <div class=\"progress-bar progress-bar-rating-2 progress-divider\" style=\"width: 25%;\">\n                            </div>\n                            <div class=\"progress-bar progress-bar-rating-3 progress-divider\" style=\"width: 20%;\">\n                            </div>\n                            <div class=\"progress-bar progress-bar-rating-4 progress-divider\" style=\"width: 30%;\">\n                            </div>\n                            <div class=\"progress-bar progress-bar-rating-5 progress-divider\" style=\"width: 10%;\">\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <hr class=\"margin-top-25 margin-bottom-25\">\n    <div class=\"display-flex-md align-items-baseline margin-bottom-10\">\n        <div class=\"text-size-16\">V11</div>\n        <div class=\"text-size-14 margin-left-10-md\">Large progress with large icon and label</div>\n    </div>\n    <div class=\"StatusBar width-100pct display-flex align-items-center\">\n        <div class=\"flex-order-1 margin-right-5\">\n            <span class=\"rioglyph rioglyph-status-working text-color-status-working text-size-h2\">\n            </span>\n        </div>\n        <div class=\"display-flex flex-1-0 flex-order-2 align-items-center\">\n            <div class=\"flex-order-2 margin-left-10\">\n                <span class=\"display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-working text-size-h3 text-bold\">44%</span>\n            </div>\n            <div class=\"display-flex flex-1-0 flex-order-1\">\n                <div class=\"progress margin-0 flex-1-0 height-10\">\n                    <div class=\"progress-bar progress-bar-status-working\" style=\"width: 44%;\">\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <hr class=\"margin-top-25 margin-bottom-25\">\n    <div class=\"display-flex-md align-items-baseline margin-bottom-10\">\n        <div class=\"text-size-16\">V12</div>\n        <div class=\"text-size-14 margin-left-10-md\">Large progress only</div>\n    </div>\n    <div class=\"StatusBar width-100pct display-flex align-items-center\">\n        <div class=\"display-flex flex-1-0\">\n            <div class=\"display-flex flex-1-0\">\n                <div class=\"progress margin-0 flex-1-0 height-10\">\n                    <div class=\"progress-bar progress-bar-info progress-divider\" style=\"width: 25%;\">\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "icon",
+                      "type": "Object",
+                      "default": "",
+                      "description": "The icon to be shown next to the progress bar."
+                    },
+                    {
+                      "name": "└name",
+                      "type": "String",
+                      "default": "",
+                      "description": "The class name of the icon i.e. \"rioglyph-cruise-control\"."
+                    },
+                    {
+                      "name": "└alignment",
+                      "type": "String",
+                      "default": "'left'",
+                      "description": "The position of the icon. Possible values are: left or right"
+                    },
+                    {
+                      "name": "└color",
+                      "type": "String",
+                      "default": "'text-color-gray'",
+                      "description": "The text color class name for the icon."
+                    },
+                    {
+                      "name": "└className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional class names for the icon."
+                    },
+                    {
+                      "name": "label",
+                      "type": "Object",
+                      "default": "",
+                      "description": "The label to be shown for the progress bar."
+                    },
+                    {
+                      "name": "└value",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The label content."
+                    },
+                    {
+                      "name": "└alignment",
+                      "type": "String",
+                      "default": "'right'",
+                      "description": "The position of the icon. Possible values are: left top right"
+                    },
+                    {
+                      "name": "└weight",
+                      "type": "String",
+                      "default": "'bold'",
+                      "description": "The text weight of the label. Possible values are: light or bold"
+                    },
+                    {
+                      "name": "└color",
+                      "type": "String",
+                      "default": "'text-color-gray'",
+                      "description": "The text color class name for the label."
+                    },
+                    {
+                      "name": "└className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional class names for the label."
+                    },
+                    {
+                      "name": "progress",
+                      "type": "list of Objects",
+                      "default": "",
+                      "description": "List of progress bars which will be stacked in given order if there are multiple."
+                    },
+                    {
+                      "name": "└percentage",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "The percentage of the progress."
+                    },
+                    {
+                      "name": "└color",
+                      "type": "String",
+                      "default": "'progress-bar-info'",
+                      "description": "The color class name for the label."
+                    },
+                    {
+                      "name": "└tooltip",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Optional tooltip content to be shown for the progress bar."
+                    },
+                    {
+                      "name": "└tooltipPosition",
+                      "type": "String",
+                      "default": "'top'",
+                      "description": "The position of the tooltip for the progress bar. Possible values are: top bottom left right"
+                    },
+                    {
+                      "name": "└tooltipDelay",
+                      "type": "Number",
+                      "default": "50",
+                      "description": "The delay in milliseconds for when the tooltip is shown when hovering the progress bar."
+                    },
+                    {
+                      "name": "└className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional class names for the progress bar."
+                    },
+                    {
+                      "name": "size",
+                      "type": "String",
+                      "default": "'small'",
+                      "description": "The size of the icon and progress bar. Possible values are: small or large"
+                    },
+                    {
+                      "name": "useProgressDivider",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Uses a divider for multiple progress bars when defined."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional class names for the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,57 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:14.470Z",
+    "source": "https://uikit.developers.rio.cloud/#components/stepButton",
+    "category": "Components",
+    "section": "Interaction",
+    "slug": "components/stepbutton",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "50c840fe3a85a61fe11093b6b46e8259a74e72b229928d9d9f11051ae72615ef"
+  },
+  "title": "StepButton",
+  "lead": "The StepButton is a convenient component designed to simplify usage and alignment of buttons with chevrons.",
+  "content": [
+    {
+      "heading": "StepButton",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Step buttons",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Step buttons</div><div class=\"btn-toolbar\"><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-primary btn-icon-right btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-chevron-right\"></span>Next</button></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import StepButton from '@rio-cloud/rio-uikit/StepButton';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\nexport default () => (\n    <div>\n        <FormLabel>Step buttons</FormLabel>\n        <div className='btn-toolbar'>\n            <StepButton direction='previous'>Previous</StepButton>\n            <StepButton direction='next' bsStyle='primary'>\n                Next\n            </StepButton>\n        </div>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Step buttons</div>\n    <div class=\"btn-toolbar\">\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-primary btn-icon-right btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-chevron-right\">\n            </span>Next</button>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "direction",
+                      "type": "'next' | 'previous'",
+                      "default": "next",
+                      "description": "Defines the chevron icon for the respective direction."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}