@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/steppedProgressBars.md

@@ -0,0 +1,1064 @@
+# SteppedProgressBar - Circle
+
+*Category:* Components
+*Section:* Progress
+*Source:* https://uikit.developers.rio.cloud/#components/steppedProgressBars
+*Captured:* 2025-12-12T12:38:36.094Z
+
+## SteppedProgressBar - Circle
+
+### Example: Example 1
+
+1
+Label for step 1
+
+2
+Label for step 2
+
+Label for final step
+
+Content of page 2
+
+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.
+Click here to complete this step. There is no other way forward.PreviousNext
+
+#### Summary
+
+1
+Label for step 1
+
+2
+Label for step 2
+
+Label for final step
+
+Content of page 2
+
+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.
+Click here to complete this step. There is no other way forward.PreviousNext
+
+#### React (tsx)
+
+```tsx
+import { type ChangeEvent, useState } from 'react';
+
+import SteppedProgressBar from '@rio-cloud/rio-uikit/SteppedProgressBar';
+import Button from '@rio-cloud/rio-uikit/Button';
+import { dummyText, dummyTextShort } from '../../../utils/data';
+import Checkbox from '@rio-cloud/rio-uikit/components/checkbox/Checkbox';
+
+const SteppedProgressBarExampleDefault = () => {
+    const [selectedStep, setSelectedStep] = useState(1);
+    const [disableFollowingPages, setDisableFollowingPages] = useState<number>();
+
+    const handlePageNext = () => {
+        setSelectedStep(selectedStep + 1);
+        setDisableFollowingPages(3);
+    };
+
+    const handlePagePrevious = () => setSelectedStep(selectedStep - 1);
+    const handleSelectedChanged = (selectedKey: number) => setSelectedStep(selectedKey);
+    const handleDisableFollowingPages = (pageNumber: number) => setDisableFollowingPages(pageNumber);
+
+    const pageContent = [
+        <FirstPageContent key='firstStep' pageNumber={1} onClickNext={handlePageNext} />,
+        <SecondPageContent
+            key='secondStep'
+            pageNumber={2}
+            onClickNext={handlePageNext}
+            onClickPrevious={handlePagePrevious}
+            onDisableFollowingPages={handleDisableFollowingPages}
+        />,
+        <ThirdPageContent key='thirdStep' pageNumber={3} onClickPrevious={handlePagePrevious} />,
+    ];
+
+    return (
+        <div className='steppedProgressBarExample'>
+            <div className='margin-bottom-25'>
+                <SteppedProgressBar
+                    variant='circle'
+                    selectedStepNumber={selectedStep}
+                    onSelectedChanged={handleSelectedChanged}
+                    disableFollowingPages={disableFollowingPages}
+                    mobileBreakpoint={false}
+                    labels={[
+                        { icon: '1', label: 'Label for step 1' },
+                        { icon: '2', label: 'Label for step 2' },
+                        { icon: <i className='rioglyph rioglyph-ok' />, label: 'Label for final step' },
+                    ]}
+                />
+            </div>
+            {pageContent[selectedStep]}
+        </div>
+    );
+};
+
+export default SteppedProgressBarExampleDefault;
+
+type FirstPageContentProps = { pageNumber: number; onClickNext: VoidFunction };
+
+const FirstPageContent = ({ pageNumber, onClickNext }: FirstPageContentProps) => (
+    <div className='panel panel-default panel-body padding-25'>
+        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>
+        <div className='padding-y-25'>{dummyText}</div>
+        <div className='btn-toolbar justify-content-end'>
+            <Button className='btn-icon-right' iconName='rioglyph-chevron-right' onClick={onClickNext}>
+                Next
+            </Button>
+        </div>
+    </div>
+);
+
+type SecondPageContentProps = {
+    pageNumber: number;
+    onClickNext: VoidFunction;
+    onClickPrevious: VoidFunction;
+    onDisableFollowingPages: (pageNumber: number) => void;
+};
+
+const SecondPageContent = (props: SecondPageContentProps) => {
+    const { pageNumber, onClickNext, onClickPrevious, onDisableFollowingPages } = props;
+
+    const [isAccepted, setIsAccepted] = useState(false);
+
+    const handleNext = () => isAccepted && onClickNext();
+
+    const handleAccept = (event: ChangeEvent<HTMLInputElement>) => {
+        setIsAccepted(event.target.checked);
+        if (!event.target.checked) {
+            onDisableFollowingPages(pageNumber);
+        }
+    };
+
+    return (
+        <div className='panel panel-default panel-body padding-25'>
+            <div className='text-size-h3'>{`Content of page ${pageNumber}`}</div>
+            <div className='padding-y-20'>{dummyTextShort}</div>
+            <Checkbox
+                onChange={handleAccept}
+                checked={isAccepted}
+                className={`padding-15 border rounded margin-bottom-20 ${isAccepted ? 'border-color-highlight' : ''}`}
+            >
+                Click here to complete this step. There is no other way forward.
+            </Checkbox>
+            <div className='btn-toolbar justify-content-between'>
+                <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>
+                    Previous
+                </Button>
+                <Button
+                    className='btn-icon-right'
+                    iconName='rioglyph-chevron-right'
+                    onClick={handleNext}
+                    disabled={!isAccepted}
+                >
+                    Next
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+type ThirdPageContentProps = {
+    pageNumber: number;
+    onClickPrevious: VoidFunction;
+};
+
+const ThirdPageContent = ({ pageNumber, onClickPrevious }: ThirdPageContentProps) => (
+    <div className='panel panel-default panel-body padding-25'>
+        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>
+        <div className='padding-y-25'>{dummyText}</div>
+        <div className='btn-toolbar'>
+            <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>
+                Previous
+            </Button>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<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">
+            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>
+        <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>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| labels | Array of Objects | — | Objects to define the icon and the label of the navigation items. The icon can be a string or an icon. |
+| └icon | String / Node | — | The element shown in the step element. This can be a single step number or an icon element. |
+| └label | String / Node | — | The label shown below the step element. |
+| └labelClassName | String | — | Additional classes to be set on the label element. |
+| └labelWrapperClassName | String | — | Additional classes to be set on the label wrapping element. |
+| selectedStepNumber | Number | — | Index of the selected navigation item. |
+| onSelectedChanged | Function | () => {} | Called with the new selected index after the user clicked a nav item. |
+| variant | String | circle | The SteppedProgressBar Variant. One of "circle", "rectangle" or "roadsign". |
+| disableFollowingPages | Number | — | All navigation items with a higher index than this will be disabled. |
+| mobileBreakpoint | Boolean | true | Deactivating the Wrapping of bubbles on mobile |
+| className | String | — | Additional classes to be set on the wrapper element. |
+
+## SteppedProgressBar - Rectangle
+
+### Example: Example 2
+
+Label for step 1
+
+Label for step 2
+
+Label for final step
+
+Content of page 2
+
+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.
+Click here to complete this step. There is no other way forward.PreviousNext
+
+#### Summary
+
+Label for step 1
+
+Label for step 2
+
+Label for final step
+
+Content of page 2
+
+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.
+Click here to complete this step. There is no other way forward.PreviousNext
+
+#### React (tsx)
+
+```tsx
+import { type ChangeEvent, useState } from 'react';
+
+import SteppedProgressBar from '@rio-cloud/rio-uikit/SteppedProgressBar';
+import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
+import Button from '@rio-cloud/rio-uikit/Button';
+import { dummyText, dummyTextShort } from '../../../utils/data';
+
+const SteppedProgressBarExampleDefault = () => {
+    const [selectedStep, setSelectedStep] = useState(1);
+    const [disableFollowingPages, setDisableFollowingPages] = useState<number>();
+
+    const handlePageNext = () => {
+        setSelectedStep(selectedStep + 1);
+        setDisableFollowingPages(3);
+    };
+
+    const handlePagePrevious = () => setSelectedStep(selectedStep - 1);
+    const handleSelectedChanged = (selectedKey: number) => setSelectedStep(selectedKey);
+    const handleDisableFollowingPages = (pageNumber: number) => setDisableFollowingPages(pageNumber - 1);
+
+    const pageContent = [
+        <FirstPageContent key='firstStep' pageNumber={1} onClickNext={handlePageNext} />,
+        <SecondPageContent
+            key='secondStep'
+            pageNumber={2}
+            onClickNext={handlePageNext}
+            onClickPrevious={handlePagePrevious}
+            onDisableFollowingPages={handleDisableFollowingPages}
+        />,
+        <ThirdPageContent key='thirdStep' pageNumber={3} onClickPrevious={handlePagePrevious} />,
+    ];
+
+    return (
+        <div className='steppedProgressBarExample'>
+            <div className='margin-bottom-25'>
+                <SteppedProgressBar
+                    variant={SteppedProgressBar.VARIANT_RECTANGLE}
+                    selectedStepNumber={selectedStep}
+                    onSelectedChanged={handleSelectedChanged}
+                    disableFollowingPages={disableFollowingPages}
+                    mobileBreakpoint={false}
+                    labels={[
+                        {
+                            icon: <i className='rioglyph rioglyph-document' />,
+                            label: 'Label for step 1',
+                            labelWrapperClassName: 'flex-1-1-0',
+                        },
+                        {
+                            icon: <i className='rioglyph rioglyph-pdf-file' />,
+                            label: 'Label for step 2',
+                            labelWrapperClassName: 'flex-1-1-0',
+                        },
+                        {
+                            icon: <i className='rioglyph rioglyph-print' />,
+                            label: 'Label for final step',
+                            labelWrapperClassName: 'flex-1-1-0',
+                        },
+                    ]}
+                />
+            </div>
+            {pageContent[selectedStep]}
+        </div>
+    );
+};
+
+export default SteppedProgressBarExampleDefault;
+
+type FirstPageContentProps = { pageNumber: number; onClickNext: VoidFunction };
+
+const FirstPageContent = ({ pageNumber, onClickNext }: FirstPageContentProps) => (
+    <div className='panel panel-default panel-body padding-25'>
+        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>
+        <div className='padding-y-25'>{dummyText}</div>
+        <div className='btn-toolbar justify-content-end'>
+            <Button className='btn-icon-right' iconName='rioglyph-chevron-right' onClick={onClickNext}>
+                Next
+            </Button>
+        </div>
+    </div>
+);
+
+type SecondPageContentProps = {
+    pageNumber: number;
+    onClickNext: VoidFunction;
+    onClickPrevious: VoidFunction;
+    onDisableFollowingPages: (pageNumber: number) => void;
+};
+
+const SecondPageContent = (props: SecondPageContentProps) => {
+    const { pageNumber, onClickNext, onClickPrevious, onDisableFollowingPages } = props;
+
+    const [isAccepted, setIsAccepted] = useState(false);
+
+    const handleNext = () => isAccepted && onClickNext();
+
+    const handleAccept = (event: ChangeEvent<HTMLInputElement>) => {
+        setIsAccepted(event.target.checked);
+        if (!event.target.checked) {
+            onDisableFollowingPages(pageNumber);
+        }
+    };
+
+    return (
+        <div className='panel panel-default panel-body padding-25'>
+            <div className='text-size-h3'>{`Content of page ${pageNumber}`}</div>
+            <div className='padding-y-20'>{dummyTextShort}</div>
+            <Checkbox
+                onChange={handleAccept}
+                checked={isAccepted}
+                className={`padding-15 border rounded margin-bottom-20 ${isAccepted ? 'border-color-highlight' : ''}`}
+            >
+                Click here to complete this step. There is no other way forward.
+            </Checkbox>
+            <div className='btn-toolbar justify-content-between'>
+                <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>
+                    Previous
+                </Button>
+                <Button
+                    className='btn-icon-right'
+                    iconName='rioglyph-chevron-right'
+                    onClick={handleNext}
+                    disabled={!isAccepted}
+                >
+                    Next
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+type ThirdPageContentProps = {
+    pageNumber: number;
+    onClickPrevious: VoidFunction;
+};
+
+const ThirdPageContent = ({ pageNumber, onClickPrevious }: ThirdPageContentProps) => (
+    <div className='panel panel-default panel-body padding-25'>
+        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>
+        <div className='padding-y-25'>{dummyText}</div>
+        <div className='btn-toolbar'>
+            <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>
+                Previous
+            </Button>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<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">
+            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>
+        <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>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| labels | Array of Objects | — | Objects to define the icon and the label of the navigation items. The icon can be a string or an icon. |
+| └icon | String / Node | — | The element shown in the step element. This can be a single step number or an icon element. |
+| └label | String / Node | — | The label shown below the step element. |
+| └labelClassName | String | — | Additional classes to be set on the label element. |
+| └labelWrapperClassName | String | — | Additional classes to be set on the label wrapping element. |
+| selectedStepNumber | Number | — | Index of the selected navigation item. |
+| onSelectedChanged | Function | () => {} | Called with the new selected index after the user clicked a nav item. |
+| variant | String | circle | The SteppedProgressBar Variant. One of "circle", "rectangle" or "roadsign". |
+| disableFollowingPages | Number | — | All navigation items with a higher index than this will be disabled. |
+| mobileBreakpoint | Boolean | true | Deactivating the Wrapping of bubbles on mobile |
+| className | String | — | Additional classes to be set on the wrapper element. |
+
+## SteppedProgressBar - Rectangle with custom content
+
+### Example: Example 3
+
+Initial step
+Lorem ipsum dolor
+
+Second step
+Lorem ipsum dolor
+
+Final step
+Lorem ipsum dolor
+
+Content of page 2
+
+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.
+Click here to complete this step. There is no other way forward.PreviousNext
+
+#### Summary
+
+Initial step
+Lorem ipsum dolor
+
+Second step
+Lorem ipsum dolor
+
+Final step
+Lorem ipsum dolor
+
+Content of page 2
+
+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.
+Click here to complete this step. There is no other way forward.PreviousNext
+
+#### React (tsx)
+
+```tsx
+import { type ChangeEvent, useState } from 'react';
+
+import SteppedProgressBar from '@rio-cloud/rio-uikit/SteppedProgressBar';
+import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
+import Button from '@rio-cloud/rio-uikit/Button';
+import { dummyText, dummyTextShort } from '../../../utils/data';
+
+const SteppedProgressBarExampleDefault = () => {
+    const [selectedStep, setSelectedStep] = useState(1);
+    const [disableFollowingPages, setDisableFollowingPages] = useState<number>();
+
+    const handlePageNext = () => {
+        setSelectedStep(selectedStep + 1);
+        setDisableFollowingPages(3);
+    };
+
+    const handlePagePrevious = () => setSelectedStep(selectedStep - 1);
+    const handleSelectedChanged = (selectedKey: number) => setSelectedStep(selectedKey);
+    const handleDisableFollowingPages = (pageNumber: number) => setDisableFollowingPages(pageNumber - 1);
+
+    const pageContent = [
+        <FirstPageContent key='firstStep' pageNumber={1} onClickNext={handlePageNext} />,
+        <SecondPageContent
+            key='secondStep'
+            pageNumber={2}
+            onClickNext={handlePageNext}
+            onClickPrevious={handlePagePrevious}
+            onDisableFollowingPages={handleDisableFollowingPages}
+        />,
+        <ThirdPageContent key='thirdStep' pageNumber={3} onClickPrevious={handlePagePrevious} />,
+    ];
+
+    return (
+        <div className='steppedProgressBarExample'>
+            <div className='margin-bottom-25'>
+                <SteppedProgressBar
+                    variant={SteppedProgressBar.VARIANT_RECTANGLE}
+                    selectedStepNumber={selectedStep}
+                    onSelectedChanged={handleSelectedChanged}
+                    disableFollowingPages={disableFollowingPages}
+                    mobileBreakpoint={false}
+                    labels={[
+                        {
+                            label: (
+                                <StepLabelContent
+                                    label='Initial step'
+                                    description='Lorem ipsum dolor'
+                                    icon='rioglyph rioglyph-clipboard'
+                                    done={selectedStep > 0}
+                                />
+                            ),
+                            labelClassName: 'width-100pct text-left',
+                            labelWrapperClassName: 'flex-1-1-0',
+                        },
+                        {
+                            label: (
+                                <StepLabelContent
+                                    label='Second step'
+                                    description='Lorem ipsum dolor'
+                                    icon='rioglyph rioglyph-parcel'
+                                    done={selectedStep > 1}
+                                />
+                            ),
+                            labelClassName: 'width-100pct text-left',
+                            labelWrapperClassName: 'flex-1-1-0',
+                        },
+                        {
+                            label: (
+                                <StepLabelContent
+                                    label='Final step'
+                                    description='Lorem ipsum dolor'
+                                    icon='rioglyph rioglyph-print'
+                                    done={selectedStep > 2}
+                                />
+                            ),
+                            labelClassName: 'width-100pct text-left',
+                            labelWrapperClassName: 'flex-1-1-0',
+                        },
+                    ]}
+                />
+            </div>
+            {pageContent[selectedStep]}
+        </div>
+    );
+};
+
+export default SteppedProgressBarExampleDefault;
+
+type StepLabelContentProps = {
+    label: string;
+    description: string;
+    icon: string;
+    done: boolean;
+};
+
+const StepLabelContent = ({ label, description, icon, done }: StepLabelContentProps) => {
+    return (
+        <div className='display-flex align-items-center gap-10'>
+            <span className={`${done ? 'rioglyph rioglyph-ok text-color-success' : icon}  margin-x-10 text-size-h2`} />
+            <div>
+                <div className='text-colot-darkest text-medium'>{label}</div>
+                <div className='text-color-darker'>{description}</div>
+            </div>
+        </div>
+    );
+};
+
+type FirstPageContentProps = { pageNumber: number; onClickNext: VoidFunction };
+
+const FirstPageContent = ({ pageNumber, onClickNext }: FirstPageContentProps) => (
+    <div className='panel panel-default panel-body padding-25'>
+        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>
+        <div className='padding-y-25'>{dummyText}</div>
+        <div className='btn-toolbar justify-content-end'>
+            <Button className='btn-icon-right' iconName='rioglyph-chevron-right' onClick={onClickNext}>
+                Next
+            </Button>
+        </div>
+    </div>
+);
+
+type SecondPageContentProps = {
+    pageNumber: number;
+    onClickNext: VoidFunction;
+    onClickPrevious: VoidFunction;
+    onDisableFollowingPages: (pageNumber: number) => void;
+};
+
+const SecondPageContent = (props: SecondPageContentProps) => {
+    const { pageNumber, onClickNext, onClickPrevious, onDisableFollowingPages } = props;
+
+    const [isAccepted, setIsAccepted] = useState(false);
+
+    const handleNext = () => isAccepted && onClickNext();
+
+    const handleAccept = (event: ChangeEvent<HTMLInputElement>) => {
+        setIsAccepted(event.target.checked);
+        if (!event.target.checked) {
+            onDisableFollowingPages(pageNumber);
+        }
+    };
+
+    return (
+        <div className='panel panel-default panel-body padding-25'>
+            <div className='text-size-h3'>{`Content of page ${pageNumber}`}</div>
+            <div className='padding-y-20'>{dummyTextShort}</div>
+            <Checkbox
+                onChange={handleAccept}
+                checked={isAccepted}
+                className={`padding-15 border rounded margin-bottom-20 ${isAccepted ? 'border-color-highlight' : ''}`}
+            >
+                Click here to complete this step. There is no other way forward.
+            </Checkbox>
+            <div className='btn-toolbar justify-content-between'>
+                <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>
+                    Previous
+                </Button>
+                <Button
+                    className='btn-icon-right'
+                    iconName='rioglyph-chevron-right'
+                    onClick={handleNext}
+                    disabled={!isAccepted}
+                >
+                    Next
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+type ThirdPageContentProps = {
+    pageNumber: number;
+    onClickPrevious: VoidFunction;
+};
+
+const ThirdPageContent = ({ pageNumber, onClickPrevious }: ThirdPageContentProps) => (
+    <div className='panel panel-default panel-body padding-25'>
+        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>
+        <div className='padding-y-25'>{dummyText}</div>
+        <div className='btn-toolbar'>
+            <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>
+                Previous
+            </Button>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<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">
+            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>
+        <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>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| labels | Array of Objects | — | Objects to define the icon and the label of the navigation items. The icon can be a string or an icon. |
+| └icon | String / Node | — | The element shown in the step element. This can be a single step number or an icon element. |
+| └label | String / Node | — | The label shown below the step element. |
+| └labelClassName | String | — | Additional classes to be set on the label element. |
+| └labelWrapperClassName | String | — | Additional classes to be set on the label wrapping element. |
+| selectedStepNumber | Number | — | Index of the selected navigation item. |
+| onSelectedChanged | Function | () => {} | Called with the new selected index after the user clicked a nav item. |
+| variant | String | circle | The SteppedProgressBar Variant. One of "circle", "rectangle" or "roadsign". |
+| disableFollowingPages | Number | — | All navigation items with a higher index than this will be disabled. |
+| mobileBreakpoint | Boolean | true | Deactivating the Wrapping of bubbles on mobile |
+| className | String | — | Additional classes to be set on the wrapper element. |
+
+## SteppedProgressBar - Road Sign
+
+### Example: Example 4
+
+Label for step 1
+
+Label for step 2
+
+Label for final step
+
+Content of page 2
+
+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.
+Click here to complete this step. There is no other way forward.PreviousNext
+
+#### Summary
+
+Label for step 1
+
+Label for step 2
+
+Label for final step
+
+Content of page 2
+
+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.
+Click here to complete this step. There is no other way forward.PreviousNext
+
+#### React (tsx)
+
+```tsx
+import { type ChangeEvent, useState } from 'react';
+
+import SteppedProgressBar from '@rio-cloud/rio-uikit/SteppedProgressBar';
+import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
+import Button from '@rio-cloud/rio-uikit/Button';
+import { dummyText, dummyTextShort } from '../../../utils/data';
+
+const SteppedProgressBarExampleDefault = () => {
+    const [selectedStep, setSelectedStep] = useState(1);
+    const [disableFollowingPages, setDisableFollowingPages] = useState<number>();
+
+    const handlePageNext = () => {
+        setSelectedStep(selectedStep + 1);
+        setDisableFollowingPages(3);
+    };
+
+    const handlePagePrevious = () => setSelectedStep(selectedStep - 1);
+    const handleSelectedChanged = (selectedKey: number) => setSelectedStep(selectedKey);
+    const handleDisableFollowingPages = (pageNumber: number) => setDisableFollowingPages(pageNumber - 1);
+
+    const pageContent = [
+        <FirstPageContent key='firstStep' pageNumber={1} onClickNext={handlePageNext} />,
+        <SecondPageContent
+            key='secondStep'
+            pageNumber={2}
+            onClickNext={handlePageNext}
+            onClickPrevious={handlePagePrevious}
+            onDisableFollowingPages={handleDisableFollowingPages}
+        />,
+        <ThirdPageContent key='thirdStep' pageNumber={3} onClickPrevious={handlePagePrevious} />,
+    ];
+
+    return (
+        <div className='steppedProgressBarExample'>
+            <div className='margin-bottom-25'>
+                <SteppedProgressBar
+                    variant={SteppedProgressBar.VARIANT_ROADSIGN}
+                    selectedStepNumber={selectedStep}
+                    onSelectedChanged={handleSelectedChanged}
+                    disableFollowingPages={disableFollowingPages}
+                    mobileBreakpoint={false}
+                    labels={[
+                        {
+                            icon: <i className='rioglyph rioglyph-document' />,
+                            label: 'Label for step 1',
+                        },
+                        {
+                            icon: <i className='rioglyph rioglyph-pdf-file' />,
+                            label: 'Label for step 2',
+                        },
+                        {
+                            icon: <i className='rioglyph rioglyph-print' />,
+                            label: 'Label for final step',
+                        },
+                    ]}
+                />
+            </div>
+            {pageContent[selectedStep]}
+        </div>
+    );
+};
+
+export default SteppedProgressBarExampleDefault;
+
+type FirstPageContentProps = { pageNumber: number; onClickNext: VoidFunction };
+
+const FirstPageContent = ({ pageNumber, onClickNext }: FirstPageContentProps) => (
+    <div className='panel panel-default panel-body padding-25'>
+        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>
+        <div className='padding-y-25'>{dummyText}</div>
+        <div className='btn-toolbar justify-content-end'>
+            <Button className='btn-icon-right' iconName='rioglyph-chevron-right' onClick={onClickNext}>
+                Next
+            </Button>
+        </div>
+    </div>
+);
+
+type SecondPageContentProps = {
+    pageNumber: number;
+    onClickNext: VoidFunction;
+    onClickPrevious: VoidFunction;
+    onDisableFollowingPages: (pageNumber: number) => void;
+};
+
+const SecondPageContent = (props: SecondPageContentProps) => {
+    const { pageNumber, onClickNext, onClickPrevious, onDisableFollowingPages } = props;
+
+    const [isAccepted, setIsAccepted] = useState(false);
+
+    const handleNext = () => isAccepted && onClickNext();
+
+    const handleAccept = (event: ChangeEvent<HTMLInputElement>) => {
+        setIsAccepted(event.target.checked);
+        if (!event.target.checked) {
+            onDisableFollowingPages(pageNumber);
+        }
+    };
+
+    return (
+        <div className='panel panel-default panel-body padding-25'>
+            <div className='text-size-h3'>{`Content of page ${pageNumber}`}</div>
+            <div className='padding-y-20'>{dummyTextShort}</div>
+            <Checkbox
+                onChange={handleAccept}
+                checked={isAccepted}
+                className={`padding-15 border rounded margin-bottom-20 ${isAccepted ? 'border-color-highlight' : ''}`}
+            >
+                Click here to complete this step. There is no other way forward.
+            </Checkbox>
+            <div className='btn-toolbar justify-content-between'>
+                <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>
+                    Previous
+                </Button>
+                <Button
+                    className='btn-icon-right'
+                    iconName='rioglyph-chevron-right'
+                    onClick={handleNext}
+                    disabled={!isAccepted}
+                >
+                    Next
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+type ThirdPageContentProps = {
+    pageNumber: number;
+    onClickPrevious: VoidFunction;
+};
+
+const ThirdPageContent = ({ pageNumber, onClickPrevious }: ThirdPageContentProps) => (
+    <div className='panel panel-default panel-body padding-25'>
+        <div className='text-size-h2'>{`Content of page ${pageNumber}`}</div>
+        <div className='padding-y-25'>{dummyText}</div>
+        <div className='btn-toolbar'>
+            <Button iconName='rioglyph-chevron-left' onClick={onClickPrevious}>
+                Previous
+            </Button>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<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">
+            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>
+        <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>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| labels | Array of Objects | — | Objects to define the icon and the label of the navigation items. The icon can be a string or an icon. |
+| └icon | String / Node | — | The element shown in the step element. This can be a single step number or an icon element. |
+| └label | String / Node | — | The label shown below the step element. |
+| └labelClassName | String | — | Additional classes to be set on the label element. |
+| └labelWrapperClassName | String | — | Additional classes to be set on the label wrapping element. |
+| selectedStepNumber | Number | — | Index of the selected navigation item. |
+| onSelectedChanged | Function | () => {} | Called with the new selected index after the user clicked a nav item. |
+| variant | String | circle | The SteppedProgressBar Variant. One of "circle", "rectangle" or "roadsign". |
+| disableFollowingPages | Number | — | All navigation items with a higher index than this will be disabled. |
+| mobileBreakpoint | Boolean | true | Deactivating the Wrapping of bubbles on mobile |
+| className | String | — | Additional classes to be set on the wrapper element. |