@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/rules.md

@@ -0,0 +1,965 @@
+# RulesWrapper, RuleContainer and RuleConnector
+
+*Category:* Components
+*Section:* Misc
+*Source:* https://uikit.developers.rio.cloud/#components/rules
+*Captured:* 2025-12-12T12:38:59.394Z
+
+## RulesWrapper, RuleContainer and RuleConnector
+
+### Example: Example 1
+
+Default Example (interactive)Why should the rule be triggered?
+Mileage
+
+Speed
+
+Engine Speed
+
+When should the rule be triggered?
+Immediately
+
+When all conditions apply for at least
+
+#### Summary
+
+Default Example (interactive)Why should the rule be triggered?
+Mileage
+
+Speed
+
+Engine Speed
+
+When should the rule be triggered?
+Immediately
+
+When all conditions apply for at least
+
+#### React (tsx)
+
+```tsx
+import { useEffect, useState, type JSX } from 'react';
+import { isEmpty, pull, size } from 'es-toolkit/compat';
+
+import RulesWrapper from '@rio-cloud/rio-uikit/RulesWrapper';
+import RuleContainer from '@rio-cloud/rio-uikit/RuleContainer';
+import Button from '@rio-cloud/rio-uikit/Button';
+import Tag from '@rio-cloud/rio-uikit/Tag';
+import TagList from '@rio-cloud/rio-uikit/TagList';
+
+const firstRuleSetLabel = 'Why should the rule be triggered?';
+
+type Condition = {
+    id: string;
+    label: string;
+    enabled: boolean;
+    formElements: JSX.Element;
+};
+
+const firstRuleSet: Condition[] = [
+    {
+        id: 'Mileage',
+        label: 'Mileage is greater than',
+        enabled: true,
+        formElements: (
+            <div className='width-100pct margin-bottom-0'>
+                <div className='input-group min-width-100'>
+                    <input className='form-control' type='text' name='value' />
+                    <div className='input-group-addon'>km</div>
+                </div>
+            </div>
+        ),
+    },
+    {
+        id: 'Speed',
+        label: 'Speed is greater than',
+        enabled: true,
+        formElements: (
+            <div className='width-100pct margin-bottom-0'>
+                <div className='input-group min-width-100'>
+                    <input className='form-control' type='text' name='value' />
+                    <div className='input-group-addon'>km</div>
+                </div>
+            </div>
+        ),
+    },
+    {
+        id: 'Engine Speed',
+        label: 'Engine speed is greater than',
+        enabled: true,
+        formElements: (
+            <div className='width-100pct margin-bottom-0'>
+                <div className='input-group min-width-100'>
+                    <input className='form-control' type='text' name='value' />
+                    <div className='input-group-addon'>rpm</div>
+                </div>
+            </div>
+        ),
+    },
+];
+
+export default () => {
+    const [firstConditionsSelected, setFirstConditionsSelected] = useState<string[]>([]);
+
+    const handleSelectFirstCondition = (conditionId: string) =>
+        setFirstConditionsSelected([...firstConditionsSelected, conditionId]);
+
+    const handleRemoveFirstCondition = (conditionId: string) =>
+        setFirstConditionsSelected(pull(firstConditionsSelected, conditionId));
+
+    const availableFirstConditions: Condition[] = firstRuleSet.filter(condition => condition.enabled);
+
+    const hasMoreFirstConditions = size(firstConditionsSelected) !== size(firstRuleSet);
+
+    const allConditionsSelected = size(firstConditionsSelected) === size(availableFirstConditions);
+
+    const [secondRuleSelected, setSecondRuleSelected] = useState(false);
+
+    return (
+        <div>
+            <label>Default Example (interactive)</label>
+            {/* First rule set */}
+            <RulesWrapper>
+                <RuleContainer key='AllRuleTags' show={isEmpty(firstConditionsSelected)} unchecked>
+                    <ConditionsList
+                        label={firstRuleSetLabel}
+                        conditions={firstRuleSet}
+                        selectedConditions={firstConditionsSelected}
+                        onConditionSelected={handleSelectFirstCondition}
+                    />
+                </RuleContainer>
+                {firstConditionsSelected.map((selectedCondition, index) => {
+                    const isLastCondition = index === size(firstConditionsSelected) - 1;
+                    return (
+                        <RuleContainer
+                            key={selectedCondition}
+                            show={!isEmpty(firstConditionsSelected)}
+                            hideConnector={isLastCondition && allConditionsSelected}
+                        >
+                            <ConditionEditor
+                                condition={
+                                    availableFirstConditions.find(condition => condition.id === selectedCondition)!
+                                }
+                                onDelete={handleRemoveFirstCondition}
+                            />
+                        </RuleContainer>
+                    );
+                })}
+                <RuleContainer
+                    key='AddMore'
+                    show={!isEmpty(firstConditionsSelected) && hasMoreFirstConditions}
+                    hideConnector
+                >
+                    <ConditionsList
+                        showMoreOption={hasMoreFirstConditions}
+                        label={firstRuleSetLabel}
+                        conditions={firstRuleSet}
+                        selectedConditions={firstConditionsSelected}
+                        onConditionSelected={handleSelectFirstCondition}
+                    />
+                </RuleContainer>
+            </RulesWrapper>
+
+            {/* Second rule set */}
+            <RulesWrapper>
+                <RuleContainer key='secondRuleSet' unchecked={!secondRuleSelected} hideConnector={secondRuleSelected}>
+                    {secondRuleSelected ? (
+                        <ConditionEditorTwo onDelete={() => setSecondRuleSelected(false)} />
+                    ) : (
+                        <ConditionsTwo onRuleSelect={() => setSecondRuleSelected(true)} />
+                    )}
+                </RuleContainer>
+            </RulesWrapper>
+        </div>
+    );
+};
+
+// Custom components to fill the rules container - this usually is service logic and are service specific components
+
+type ConditionsListProps = {
+    showMoreOption?: boolean;
+    label: string;
+    conditions: Condition[];
+    selectedConditions: string[];
+    onConditionSelected: (id: string) => void;
+};
+
+const ConditionsList = ({
+    showMoreOption = false,
+    label,
+    conditions = [],
+    selectedConditions = [],
+    onConditionSelected,
+}: ConditionsListProps) => {
+    const [showMore, setShowMore] = useState(showMoreOption);
+    useEffect(() => setShowMore(showMoreOption), [showMoreOption]);
+
+    const handleSelectOption = (conditionId: string) => {
+        setShowMore(true);
+        onConditionSelected(conditionId);
+    };
+
+    return (
+        <div className='display-flex flex-column align-items-center'>
+            {showMore && (
+                <div
+                    key='moreButton'
+                    className='text-center text-color-primary hover-text-color-highlight-dark cursor-pointer'
+                    onClick={() => setShowMore(false)}
+                >
+                    Which additional conditions should count for this rule?
+                </div>
+            )}
+            {!showMore && (
+                <div key='tagList' className='display-flex flex-column align-items-center gap-15'>
+                    <div className='text-center'>{label}</div>
+                    <TagList>
+                        {conditions.map(condition => {
+                            if (selectedConditions.includes(condition.id)) {
+                                return null;
+                            }
+                            return (
+                                <Tag
+                                    key={condition.id}
+                                    clickable={condition.enabled}
+                                    disabled={!condition.enabled}
+                                    onClick={() => handleSelectOption(condition.id)}
+                                >
+                                    {condition.id}
+                                </Tag>
+                            );
+                        })}
+                    </TagList>
+                </div>
+            )}
+        </div>
+    );
+};
+
+type ConditionEditorProps = { condition: Condition; onDelete: (id: string) => void };
+
+const ConditionEditor = ({ condition, onDelete }: ConditionEditorProps) => {
+    return (
+        <form>
+            <div className='display-flex align-items-center gap-10 flex-1-1 flex-wrap'>
+                <div className='flex-1-1-0 line-height-125rel'>{condition.label}</div>
+                <div className='flex-1-1-0 display-flex gap-10'>
+                    {condition.formElements}
+                    <Button bsStyle={Button.MUTED} iconOnly onClick={() => onDelete(condition.id)}>
+                        <span className='rioglyph rioglyph-trash' />
+                    </Button>
+                </div>
+            </div>
+        </form>
+    );
+};
+
+type ConditionsTwoProps = { onRuleSelect: VoidFunction };
+
+const ConditionsTwo = ({ onRuleSelect }: ConditionsTwoProps) => {
+    return (
+        <div className='display-flex flex-column align-items-center gap-15'>
+            <div className='text-center'>When should the rule be triggered?</div>
+            <TagList>
+                <Tag active clickable={false}>
+                    Immediately
+                </Tag>
+                <Tag clickable onClick={onRuleSelect}>
+                    When all conditions apply for at least
+                </Tag>
+            </TagList>
+        </div>
+    );
+};
+
+type ConditionEditorTwpProps = { onDelete: VoidFunction };
+
+const ConditionEditorTwo = ({ onDelete }: ConditionEditorTwpProps) => {
+    return (
+        <form>
+            <div className='display-flex align-items-center gap-10 flex-1-1 flex-wrap'>
+                <div className='flex-1-1-0 line-height-125rel'>When all conditions apply for at least</div>
+                <div className='flex-1-1-0 display-flex gap-10'>
+                    <div className='width-100pct margin-bottom-0'>
+                        <div className='input-group min-width-100'>
+                            <input className='form-control' type='text' name='value' />
+                            <div className='input-group-addon'>minutes</div>
+                        </div>
+                    </div>
+                    <Button bsStyle={Button.MUTED} iconOnly onClick={onDelete}>
+                        <span className='rioglyph rioglyph-trash' />
+                    </Button>
+                </div>
+            </div>
+        </form>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <label>Default Example (interactive)</label>
+    <div>
+        <div>
+            <div class="RuleContainer">
+                <div class="RuleContainerBox position-relative rounded padding-20 bg-lightest border border-width border-style-dashed " data-testid="ruleContainerBox">
+                    <div style="opacity: 0;">
+                        <div class="display-flex flex-column align-items-center">
+                            <div class="display-flex flex-column align-items-center gap-15">
+                                <div class="text-center">Why should the rule be triggered?</div>
+                                <div class="taglist taglist-autowidth">
+                                    <div class="tag clickable">
+                                        <div class="tag-inner">Mileage</div>
+                                    </div>
+                                    <div class="tag clickable">
+                                        <div class="tag-inner">Speed</div>
+                                    </div>
+                                    <div class="tag clickable">
+                                        <div class="tag-inner">Engine Speed</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div data-testid="ruleConnector" class="RuleConnector height-20 display-flex justify-content-center align-items-center position-relative opacity-0">
+                    <div class="margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
+                        <div class="right-50pct position-relative width-20 height-20 bg-white">
+                        </div>
+                    </div>
+                    <span class="padding-left-20 padding-right-20 z-index-1 bg-lightest">
+                        <span class="text-color-light">
+                            <span class="rioglyph rioglyph-plus" data-testid="ruleConnectorIcon">
+                            </span>
+                        </span>
+                    </span>
+                    <div class="margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
+                        <div class="left-50pct position-relative width-20 height-20 bg-white">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div>
+        <div>
+            <div class="RuleContainer">
+                <div class="RuleContainerBox position-relative rounded padding-20 bg-lightest border border-width border-style-dashed " data-testid="ruleContainerBox">
+                    <div style="opacity: 0;">
+                        <div class="display-flex flex-column align-items-center gap-15">
+                            <div class="text-center">When should the rule be triggered?</div>
+                            <div class="taglist taglist-autowidth">
+                                <div class="tag active clickable rioglyph rioglyph-ok">
+                                    <div class="tag-inner">Immediately</div>
+                                </div>
+                                <div class="tag clickable">
+                                    <div class="tag-inner">When all conditions apply for at least</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div data-testid="ruleConnector" class="RuleConnector height-20 display-flex justify-content-center align-items-center position-relative opacity-0">
+                    <div class="margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
+                        <div class="right-50pct position-relative width-20 height-20 bg-white">
+                        </div>
+                    </div>
+                    <span class="padding-left-20 padding-right-20 z-index-1 bg-lightest">
+                        <span class="text-color-light">
+                            <span class="rioglyph rioglyph-plus" data-testid="ruleConnectorIcon">
+                            </span>
+                        </span>
+                    </span>
+                    <div class="margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
+                        <div class="left-50pct position-relative width-20 height-20 bg-white">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: RuleContainer
+
+### RuleContainer
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| show | Boolean | true | Defines whether the container is shown. |
+| unchecked | Boolean | false | Determines the container style for when no rule option is selected. It also hides the connector in this case. |
+| background | String | bg-lightest | The box background class name. |
+| borderColor | String | — | The border color class name. |
+| hideConnector | Boolean | false | Defines whether the connector is shown. |
+| customConnector | String \| Node | — | Overwrites the default connector. |
+| className | String | — | Additional classes for the wrapper element. |
+
+#### Props: RuleConnector
+
+### RuleConnector
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| placement | String | center | The placement for the connector. Possible values are "start", "center" and "end". |
+| icon | String | rioglyph-plus | The rioglyph icon name. |
+| hidden | Boolean | false | Defines whether the connector is shown. |
+| background | String | bg-lightest | Background color of the connector itself. |
+| pageBackground | String | bg-white | Background color of the surrounding area where the rule containers are placed. |
+| contentClassName | String | text-color-light | Classes to be set on the connector content. |
+| hasBorder | Boolean | false | Defines whether the connector has a border. |
+| borderColor | String | — | The border color class name. |
+| className | String | — | Additional classes for the wrapper element. |
+
+### Example: Example 2
+
+Default Example with morde conditions - (static)Mileage is greater than
+km
+
+Which additional conditions should count for this rule?
+
+Why should the rule be triggered?
+Category AMileage
+
+Fuel Level
+
+Engine speed
+
+Driving/standing
+
+Category BRemaining daily driving time
+
+Remaining weekly driving time
+
+Daily driving time
+
+Weekly driving time
+
+Category CDriver Card
+
+Power take-off
+
+Inside/Outside geofence
+
+Inside/Outside Country
+
+When should the rule be triggered?Immediately
+
+When all conditions apply for at least
+
+#### Summary
+
+Default Example with morde conditions - (static)Mileage is greater than
+km
+
+Which additional conditions should count for this rule?
+
+Why should the rule be triggered?
+Category AMileage
+
+Fuel Level
+
+Engine speed
+
+Driving/standing
+
+Category BRemaining daily driving time
+
+Remaining weekly driving time
+
+Daily driving time
+
+Weekly driving time
+
+Category CDriver Card
+
+Power take-off
+
+Inside/Outside geofence
+
+Inside/Outside Country
+
+When should the rule be triggered?Immediately
+
+When all conditions apply for at least
+
+#### React (tsx)
+
+```tsx
+import RuleContainer from '@rio-cloud/rio-uikit/RuleContainer';
+import Button from '@rio-cloud/rio-uikit/Button';
+import TagList from '@rio-cloud/rio-uikit/TagList';
+import Tag from '@rio-cloud/rio-uikit/Tag';
+import RulesWrapper from '@rio-cloud/rio-uikit/components/rules/RulesWrapper';
+
+export default () => (
+    <div>
+        <label>Default Example with morde conditions - (static)</label>
+        <RulesWrapper>
+            <RuleContainer>
+                <form>
+                    <div className='display-flex align-items-center gap-10 flex-1-1 flex-wrap'>
+                        <div className='flex-1-1-0 line-height-125rel'>Mileage is greater than</div>
+                        <div className='flex-1-1-0 display-flex gap-10'>
+                            <div className='width-100pct margin-bottom-0'>
+                                <div className='input-group min-width-100'>
+                                    <input className='form-control' type='text' name='value' />
+                                    <div className='input-group-addon'>km</div>
+                                </div>
+                            </div>
+                            <Button bsStyle={Button.MUTED} iconOnly>
+                                <span className='rioglyph rioglyph-trash' />
+                            </Button>
+                        </div>
+                    </div>
+                </form>
+            </RuleContainer>
+
+            <RuleContainer hideConnector>
+                <div className='text-center'>
+                    <div className='text-center text-color-primary hover-text-color-highlight-dark cursor-pointer'>
+                        Which additional conditions should count for this rule?
+                    </div>
+                </div>
+            </RuleContainer>
+
+            <RuleContainer unchecked hideConnector>
+                <span className='display-flex align-items-center justify-content-center'>
+                    <span data-testid='AddCondition-message'>Why should the rule be triggered?</span>
+                </span>
+
+                <div className='display-flex flex-wrap gap-20 margin-top-20'>
+                    <div className='flex-1-1-0'>
+                        <legend>Category A</legend>
+                        <TagList>
+                            <Tag clickable>Mileage</Tag>
+                            <Tag clickable>Fuel Level</Tag>
+                            <Tag clickable>Engine speed</Tag>
+                            <Tag clickable>Driving/standing</Tag>
+                        </TagList>
+                    </div>
+                    <div className='flex-1-1-0'>
+                        <legend>Category B</legend>
+                        <TagList>
+                            <Tag clickable>Remaining daily driving time</Tag>
+                            <Tag clickable>Remaining weekly driving time</Tag>
+                            <Tag clickable>Daily driving time</Tag>
+                            <Tag clickable>Weekly driving time</Tag>
+                        </TagList>
+                    </div>
+                    <div className='flex-1-1-0'>
+                        <legend>Category C</legend>
+                        <TagList>
+                            <Tag clickable>Driver Card</Tag>
+                            <Tag clickable>Power take-off</Tag>
+                            <Tag clickable>Inside/Outside geofence</Tag>
+                            <Tag clickable>Inside/Outside Country</Tag>
+                        </TagList>
+                    </div>
+                </div>
+            </RuleContainer>
+
+            <RuleContainer unchecked>
+                <div className='display-flex flex-column align-items-center gap-15'>
+                    <span>When should the rule be triggered?</span>
+
+                    <TagList>
+                        <Tag active clickable={false}>
+                            Immediately
+                        </Tag>
+                        <Tag clickable>When all conditions apply for at least</Tag>
+                    </TagList>
+                </div>
+            </RuleContainer>
+        </RulesWrapper>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <label>Default Example with morde conditions - (static)</label>
+    <div>
+        <div>
+            <div class="RuleContainer">
+                <div class="RuleContainerBox position-relative rounded padding-20 bg-lightest" data-testid="ruleContainerBox">
+                    <div style="opacity: 1;">
+                        <form>
+                            <div class="display-flex align-items-center gap-10 flex-1-1 flex-wrap">
+                                <div class="flex-1-1-0 line-height-125rel">Mileage is greater than</div>
+                                <div class="flex-1-1-0 display-flex gap-10">
+                                    <div class="width-100pct margin-bottom-0">
+                                        <div class="input-group min-width-100">
+                                            <input class="form-control" type="text" name="value">
+                                            <div class="input-group-addon">km</div>
+                                        </div>
+                                    </div>
+                                    <button type="button" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
+                                        <span class="rioglyph rioglyph-trash">
+                                        </span>
+                                    </button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                <div data-testid="ruleConnector" class="RuleConnector height-20 display-flex justify-content-center align-items-center position-relative">
+                    <div class="margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
+                        <div class="right-50pct position-relative width-20 height-20 bg-white">
+                        </div>
+                    </div>
+                    <span class="padding-left-20 padding-right-20 z-index-1 bg-lightest">
+                        <span class="text-color-light">
+                            <span class="rioglyph rioglyph-plus" data-testid="ruleConnectorIcon">
+                            </span>
+                        </span>
+                    </span>
+                    <div class="margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
+                        <div class="left-50pct position-relative width-20 height-20 bg-white">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="RuleContainer">
+                <div class="RuleContainerBox position-relative rounded padding-20 bg-lightest" data-testid="ruleContainerBox">
+                    <div style="opacity: 1;">
+                        <div class="text-center">
+                            <div class="text-center text-color-primary hover-text-color-highlight-dark cursor-pointer">Which additional conditions should count for this rule?</div>
+                        </div>
+                    </div>
+                </div>
+                <div data-testid="ruleConnector" class="RuleConnector height-20 display-flex justify-content-center align-items-center position-relative opacity-0">
+                    <div class="margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
+                        <div class="right-50pct position-relative width-20 height-20 bg-white">
+                        </div>
+                    </div>
+                    <span class="padding-left-20 padding-right-20 z-index-1 bg-lightest">
+                        <span class="text-color-light">
+                            <span class="rioglyph rioglyph-plus" data-testid="ruleConnectorIcon">
+                            </span>
+                        </span>
+                    </span>
+                    <div class="margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
+                        <div class="left-50pct position-relative width-20 height-20 bg-white">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="RuleContainer">
+                <div class="RuleContainerBox position-relative rounded padding-20 bg-lightest border border-width border-style-dashed " data-testid="ruleContainerBox">
+                    <div style="opacity: 1;">
+                        <span class="display-flex align-items-center justify-content-center">
+                            <span data-testid="AddCondition-message">Why should the rule be triggered?</span>
+                        </span>
+                    </div>
+                    <div style="opacity: 1;">
+                        <div class="display-flex flex-wrap gap-20 margin-top-20">
+                            <div class="flex-1-1-0">
+                                <legend>Category A</legend>
+                                <div class="taglist taglist-autowidth">
+                                    <div class="tag clickable">
+                                        <div class="tag-inner">Mileage</div>
+                                    </div>
+                                    <div class="tag clickable">
+                                        <div class="tag-inner">Fuel Level</div>
+                                    </div>
+                                    <div class="tag clickable">
+                                        <div class="tag-inner">Engine speed</div>
+                                    </div>
+                                    <div class="tag clickable">
+                                        <div class="tag-inner">Driving/standing</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex-1-1-0">
+                                <legend>Category B</legend>
+                                <div class="taglist taglist-autowidth">
+                                    <div class="tag clickable">
+                                        <div class="tag-inner">Remaining daily driving time</div>
+                                    </div>
+                                    <div class="tag clickable">
+                                        <div class="tag-inner">Remaining weekly driving time</div>
+                                    </div>
+                                    <div class="tag clickable">
+                                        <div class="tag-inner">Daily driving time</div>
+                                    </div>
+                                    <div class="tag clickable">
+                                        <div class="tag-inner">Weekly driving time</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex-1-1-0">
+                                <legend>Category C</legend>
+                                <div class="taglist taglist-autowidth">
+                                    <div class="tag clickable">
+                                        <div class="tag-inner">Driver Card</div>
+                                    </div>
+                                    <div class="tag clickable">
+                                        <div class="tag-inner">Power take-off</div>
+                                    </div>
+                                    <div class="tag clickable">
+                                        <div class="tag-inner">Inside/Outside geofence</div>
+                                    </div>
+                                    <div class="tag clickable">
+                                        <div class="tag-inner">Inside/Outside Country</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div data-testid="ruleConnector" class="RuleConnector height-20 display-flex justify-content-center align-items-center position-relative opacity-0">
+                    <div class="margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
+                        <div class="right-50pct position-relative width-20 height-20 bg-white">
+                        </div>
+                    </div>
+                    <span class="padding-left-20 padding-right-20 z-index-1 bg-lightest">
+                        <span class="text-color-light">
+                            <span class="rioglyph rioglyph-plus" data-testid="ruleConnectorIcon">
+                            </span>
+                        </span>
+                    </span>
+                    <div class="margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
+                        <div class="left-50pct position-relative width-20 height-20 bg-white">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="RuleContainer">
+                <div class="RuleContainerBox position-relative rounded padding-20 bg-lightest border border-width border-style-dashed " data-testid="ruleContainerBox">
+                    <div style="opacity: 1;">
+                        <div class="display-flex flex-column align-items-center gap-15">
+                            <span>When should the rule be triggered?</span>
+                            <div class="taglist taglist-autowidth">
+                                <div class="tag active clickable rioglyph rioglyph-ok">
+                                    <div class="tag-inner">Immediately</div>
+                                </div>
+                                <div class="tag clickable">
+                                    <div class="tag-inner">When all conditions apply for at least</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div data-testid="ruleConnector" class="RuleConnector height-20 display-flex justify-content-center align-items-center position-relative opacity-0">
+                    <div class="margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
+                        <div class="right-50pct position-relative width-20 height-20 bg-white">
+                        </div>
+                    </div>
+                    <span class="padding-left-20 padding-right-20 z-index-1 bg-lightest">
+                        <span class="text-color-light">
+                            <span class="rioglyph rioglyph-plus" data-testid="ruleConnectorIcon">
+                            </span>
+                        </span>
+                    </span>
+                    <div class="margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
+                        <div class="left-50pct position-relative width-20 height-20 bg-white">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: RuleContainer
+
+### RuleContainer
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| show | Boolean | true | Defines whether the container is shown. |
+| unchecked | Boolean | false | Determines the container style for when no rule option is selected. It also hides the connector in this case. |
+| background | String | bg-lightest | The box background class name. |
+| borderColor | String | — | The border color class name. |
+| hideConnector | Boolean | false | Defines whether the connector is shown. |
+| customConnector | String \| Node | — | Overwrites the default connector. |
+| className | String | — | Additional classes for the wrapper element. |
+
+#### Props: RuleConnector
+
+### RuleConnector
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| placement | String | center | The placement for the connector. Possible values are "start", "center" and "end". |
+| icon | String | rioglyph-plus | The rioglyph icon name. |
+| hidden | Boolean | false | Defines whether the connector is shown. |
+| background | String | bg-lightest | Background color of the connector itself. |
+| pageBackground | String | bg-white | Background color of the surrounding area where the rule containers are placed. |
+| contentClassName | String | text-color-light | Classes to be set on the connector content. |
+| hasBorder | Boolean | false | Defines whether the connector has a border. |
+| borderColor | String | — | The border color class name. |
+| className | String | — | Additional classes for the wrapper element. |
+
+### Example: AND
+
+Custom Example
+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.
+
+AND
+
+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.
+
+OR
+
+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.
+
+#### Summary
+
+Custom Example
+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.
+
+AND
+
+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.
+
+OR
+
+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.
+
+#### React (tsx)
+
+```tsx
+import RuleContainer from '@rio-cloud/rio-uikit/RuleContainer';
+import RuleConnector from '@rio-cloud/rio-uikit/RuleConnector';
+import { dummyTextExtraShort } from '../../../utils/data';
+
+const background = 'bg-white';
+
+export default () => (
+    <div>
+        <label>Custom Example</label>
+        <RuleContainer className='border' background={background} customConnector={<CustomConnector value='AND' />}>
+            {dummyTextExtraShort}
+        </RuleContainer>
+
+        <RuleContainer className='border' background={background} customConnector={<CustomConnector value='OR' />}>
+            {dummyTextExtraShort}
+        </RuleContainer>
+
+        <RuleContainer className='border' background={background} hideConnector>
+            {dummyTextExtraShort}
+        </RuleContainer>
+    </div>
+);
+
+const CustomConnector = ({ value }: { value: string }) => (
+    <RuleConnector
+        background={background}
+        pageBackground='bg-lightest'
+        placement='start'
+        hasBorder
+        borderColor='border-color-light'
+    >
+        <span className='text-color-dark text-size-12'>{value}</span>
+    </RuleConnector>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <label>Custom Example</label>
+    <div class="RuleContainer">
+        <div class="RuleContainerBox position-relative rounded padding-20 bg-white border" data-testid="ruleContainerBox">
+            <div style="opacity: 1;">
+                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.</div>
+        </div>
+        <div data-testid="ruleConnector" class="RuleConnector height-20 display-flex justify-content-start align-items-center position-relative">
+            <div class="margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-lightest border border-color-light">
+                <div class="right-50pct position-relative width-20 height-20 bg-lightest">
+                </div>
+            </div>
+            <span class="padding-left-20 padding-right-20 z-index-1 bg-white border border-color-white">
+                <span class="text-color-light">
+                    <span class="text-color-dark text-size-12">AND</span>
+                </span>
+            </span>
+            <div class="margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-lightest border border-color-light">
+                <div class="left-50pct position-relative width-20 height-20 bg-lightest">
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="RuleContainer">
+        <div class="RuleContainerBox position-relative rounded padding-20 bg-white border" data-testid="ruleContainerBox">
+            <div style="opacity: 1;">
+                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.</div>
+        </div>
+        <div data-testid="ruleConnector" class="RuleConnector height-20 display-flex justify-content-start align-items-center position-relative">
+            <div class="margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-lightest border border-color-light">
+                <div class="right-50pct position-relative width-20 height-20 bg-lightest">
+                </div>
+            </div>
+            <span class="padding-left-20 padding-right-20 z-index-1 bg-white border border-color-white">
+                <span class="text-color-light">
+                    <span class="text-color-dark text-size-12">OR</span>
+                </span>
+            </span>
+            <div class="margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-lightest border border-color-light">
+                <div class="left-50pct position-relative width-20 height-20 bg-lightest">
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="RuleContainer">
+        <div class="RuleContainerBox position-relative rounded padding-20 bg-white border" data-testid="ruleContainerBox">
+            <div style="opacity: 1;">
+                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.</div>
+        </div>
+        <div data-testid="ruleConnector" class="RuleConnector height-20 display-flex justify-content-center align-items-center position-relative opacity-0">
+            <div class="margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
+                <div class="right-50pct position-relative width-20 height-20 bg-white">
+                </div>
+            </div>
+            <span class="padding-left-20 padding-right-20 z-index-1 bg-lightest">
+                <span class="text-color-light">
+                    <span class="rioglyph rioglyph-plus" data-testid="ruleConnectorIcon">
+                    </span>
+                </span>
+            </span>
+            <div class="margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white">
+                <div class="left-50pct position-relative width-20 height-20 bg-white">
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: RuleContainer
+
+### RuleContainer
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| show | Boolean | true | Defines whether the container is shown. |
+| unchecked | Boolean | false | Determines the container style for when no rule option is selected. It also hides the connector in this case. |
+| background | String | bg-lightest | The box background class name. |
+| borderColor | String | — | The border color class name. |
+| hideConnector | Boolean | false | Defines whether the connector is shown. |
+| customConnector | String \| Node | — | Overwrites the default connector. |
+| className | String | — | Additional classes for the wrapper element. |
+
+#### Props: RuleConnector
+
+### RuleConnector
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| placement | String | center | The placement for the connector. Possible values are "start", "center" and "end". |
+| icon | String | rioglyph-plus | The rioglyph icon name. |
+| hidden | Boolean | false | Defines whether the connector is shown. |
+| background | String | bg-lightest | Background color of the connector itself. |
+| pageBackground | String | bg-white | Background color of the surrounding area where the rule containers are placed. |
+| contentClassName | String | text-color-light | Classes to be set on the connector content. |
+| hasBorder | Boolean | false | Defines whether the connector has a border. |
+| borderColor | String | — | The border color class name. |
+| className | String | — | Additional classes for the wrapper element. |