@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,410 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:57.190Z",
+    "source": "https://uikit.developers.rio.cloud/#components/rules",
+    "category": "Components",
+    "section": "Misc",
+    "slug": "components/rules",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "e8e04bae09ac41cfc1391a6661e7e10a814c7c382ddbf2b2fcba00e7de9b22ad"
+  },
+  "title": "RulesWrapper, RuleContainer and RuleConnector",
+  "lead": null,
+  "content": [
+    {
+      "heading": "RulesWrapper, RuleContainer and RuleConnector",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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.0555556;\"><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.0555556;\"><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useEffect, useState, type JSX } from 'react';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport pull from 'lodash/fp/pull';\nimport size from 'lodash/fp/size';\n\nimport RulesWrapper from '@rio-cloud/rio-uikit/RulesWrapper';\nimport RuleContainer from '@rio-cloud/rio-uikit/RuleContainer';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport Tag from '@rio-cloud/rio-uikit/Tag';\nimport TagList from '@rio-cloud/rio-uikit/TagList';\n\nconst firstRuleSetLabel = 'Why should the rule be triggered?';\n\ntype Condition = {\n    id: string;\n    label: string;\n    enabled: boolean;\n    formElements: JSX.Element;\n};\n\nconst firstRuleSet: Condition[] = [\n    {\n        id: 'Mileage',\n        label: 'Mileage is greater than',\n        enabled: true,\n        formElements: (\n            <div className='width-100pct margin-bottom-0'>\n                <div className='input-group min-width-100'>\n                    <input className='form-control' type='text' name='value' />\n                    <div className='input-group-addon'>km</div>\n                </div>\n            </div>\n        ),\n    },\n    {\n        id: 'Speed',\n        label: 'Speed is greater than',\n        enabled: true,\n        formElements: (\n            <div className='width-100pct margin-bottom-0'>\n                <div className='input-group min-width-100'>\n                    <input className='form-control' type='text' name='value' />\n                    <div className='input-group-addon'>km</div>\n                </div>\n            </div>\n        ),\n    },\n    {\n        id: 'Engine Speed',\n        label: 'Engine speed is greater than',\n        enabled: true,\n        formElements: (\n            <div className='width-100pct margin-bottom-0'>\n                <div className='input-group min-width-100'>\n                    <input className='form-control' type='text' name='value' />\n                    <div className='input-group-addon'>rpm</div>\n                </div>\n            </div>\n        ),\n    },\n];\n\nexport default () => {\n    const [firstConditionsSelected, setFirstConditionsSelected] = useState<string[]>([]);\n\n    const handleSelectFirstCondition = (conditionId: string) =>\n        setFirstConditionsSelected([...firstConditionsSelected, conditionId]);\n\n    const handleRemoveFirstCondition = (conditionId: string) =>\n        setFirstConditionsSelected(pull(conditionId)(firstConditionsSelected));\n\n    const availableFirstConditions: Condition[] = firstRuleSet.filter(condition => condition.enabled);\n\n    const hasMoreFirstConditions = size(firstConditionsSelected) !== size(firstRuleSet);\n\n    const allConditionsSelected = size(firstConditionsSelected) === size(availableFirstConditions);\n\n    const [secondRuleSelected, setSecondRuleSelected] = useState(false);\n\n    return (\n        <div>\n            <label>Default Example (interactive)</label>\n            {/* First rule set */}\n            <RulesWrapper>\n                <RuleContainer key='AllRuleTags' show={isEmpty(firstConditionsSelected)} unchecked>\n                    <ConditionsList\n                        label={firstRuleSetLabel}\n                        conditions={firstRuleSet}\n                        selectedConditions={firstConditionsSelected}\n                        onConditionSelected={handleSelectFirstCondition}\n                    />\n                </RuleContainer>\n                {firstConditionsSelected.map((selectedCondition, index) => {\n                    const isLastCondition = index === size(firstConditionsSelected) - 1;\n                    return (\n                        <RuleContainer\n                            key={selectedCondition}\n                            show={!isEmpty(firstConditionsSelected)}\n                            hideConnector={isLastCondition && allConditionsSelected}\n                        >\n                            <ConditionEditor\n                                condition={\n                                    availableFirstConditions.find(condition => condition.id === selectedCondition)!\n                                }\n                                onDelete={handleRemoveFirstCondition}\n                            />\n                        </RuleContainer>\n                    );\n                })}\n                <RuleContainer\n                    key='AddMore'\n                    show={!isEmpty(firstConditionsSelected) && hasMoreFirstConditions}\n                    hideConnector\n                >\n                    <ConditionsList\n                        showMoreOption={hasMoreFirstConditions}\n                        label={firstRuleSetLabel}\n                        conditions={firstRuleSet}\n                        selectedConditions={firstConditionsSelected}\n                        onConditionSelected={handleSelectFirstCondition}\n                    />\n                </RuleContainer>\n            </RulesWrapper>\n\n            {/* Second rule set */}\n            <RulesWrapper>\n                <RuleContainer key='secondRuleSet' unchecked={!secondRuleSelected} hideConnector={secondRuleSelected}>\n                    {secondRuleSelected ? (\n                        <ConditionEditorTwo onDelete={() => setSecondRuleSelected(false)} />\n                    ) : (\n                        <ConditionsTwo onRuleSelect={() => setSecondRuleSelected(true)} />\n                    )}\n                </RuleContainer>\n            </RulesWrapper>\n        </div>\n    );\n};\n\n// Custom components to fill the rules container - this usually is service logic and are service specific components\n\ntype ConditionsListProps = {\n    showMoreOption?: boolean;\n    label: string;\n    conditions: Condition[];\n    selectedConditions: string[];\n    onConditionSelected: (id: string) => void;\n};\n\nconst ConditionsList = ({\n    showMoreOption = false,\n    label,\n    conditions = [],\n    selectedConditions = [],\n    onConditionSelected,\n}: ConditionsListProps) => {\n    const [showMore, setShowMore] = useState(showMoreOption);\n    useEffect(() => setShowMore(showMoreOption), [showMoreOption]);\n\n    const handleSelectOption = (conditionId: string) => {\n        setShowMore(true);\n        onConditionSelected(conditionId);\n    };\n\n    return (\n        <div className='display-flex flex-column align-items-center'>\n            {showMore && (\n                <div\n                    key='moreButton'\n                    className='text-center text-color-primary hover-text-color-highlight-dark cursor-pointer'\n                    onClick={() => setShowMore(false)}\n                >\n                    Which additional conditions should count for this rule?\n                </div>\n            )}\n            {!showMore && (\n                <div key='tagList' className='display-flex flex-column align-items-center gap-15'>\n                    <div className='text-center'>{label}</div>\n                    <TagList>\n                        {conditions.map(condition => {\n                            if (selectedConditions.includes(condition.id)) {\n                                return null;\n                            }\n                            return (\n                                <Tag\n                                    key={condition.id}\n                                    clickable={condition.enabled}\n                                    disabled={!condition.enabled}\n                                    onClick={() => handleSelectOption(condition.id)}\n                                >\n                                    {condition.id}\n                                </Tag>\n                            );\n                        })}\n                    </TagList>\n                </div>\n            )}\n        </div>\n    );\n};\n\ntype ConditionEditorProps = { condition: Condition; onDelete: (id: string) => void };\n\nconst ConditionEditor = ({ condition, onDelete }: ConditionEditorProps) => {\n    return (\n        <form>\n            <div className='display-flex align-items-center gap-10 flex-1-1 flex-wrap'>\n                <div className='flex-1-1-0 line-height-125rel'>{condition.label}</div>\n                <div className='flex-1-1-0 display-flex gap-10'>\n                    {condition.formElements}\n                    <Button bsStyle={Button.MUTED} iconOnly onClick={() => onDelete(condition.id)}>\n                        <span className='rioglyph rioglyph-trash' />\n                    </Button>\n                </div>\n            </div>\n        </form>\n    );\n};\n\ntype ConditionsTwoProps = { onRuleSelect: VoidFunction };\n\nconst ConditionsTwo = ({ onRuleSelect }: ConditionsTwoProps) => {\n    return (\n        <div className='display-flex flex-column align-items-center gap-15'>\n            <div className='text-center'>When should the rule be triggered?</div>\n            <TagList>\n                <Tag active clickable={false}>\n                    Immediately\n                </Tag>\n                <Tag clickable onClick={onRuleSelect}>\n                    When all conditions apply for at least\n                </Tag>\n            </TagList>\n        </div>\n    );\n};\n\ntype ConditionEditorTwpProps = { onDelete: VoidFunction };\n\nconst ConditionEditorTwo = ({ onDelete }: ConditionEditorTwpProps) => {\n    return (\n        <form>\n            <div className='display-flex align-items-center gap-10 flex-1-1 flex-wrap'>\n                <div className='flex-1-1-0 line-height-125rel'>When all conditions apply for at least</div>\n                <div className='flex-1-1-0 display-flex gap-10'>\n                    <div className='width-100pct margin-bottom-0'>\n                        <div className='input-group min-width-100'>\n                            <input className='form-control' type='text' name='value' />\n                            <div className='input-group-addon'>minutes</div>\n                        </div>\n                    </div>\n                    <Button bsStyle={Button.MUTED} iconOnly onClick={onDelete}>\n                        <span className='rioglyph rioglyph-trash' />\n                    </Button>\n                </div>\n            </div>\n        </form>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <label>Default Example (interactive)</label>\n    <div>\n        <div>\n            <div class=\"RuleContainer\">\n                <div class=\"RuleContainerBox position-relative rounded padding-20 bg-lightest border border-width border-style-dashed \" data-testid=\"ruleContainerBox\">\n                    <div style=\"opacity: 1;\">\n                        <div class=\"display-flex flex-column align-items-center\">\n                            <div class=\"display-flex flex-column align-items-center gap-15\">\n                                <div class=\"text-center\">Why should the rule be triggered?</div>\n                                <div class=\"taglist taglist-autowidth\">\n                                    <div class=\"tag clickable\">\n                                        <div class=\"tag-inner\">Mileage</div>\n                                    </div>\n                                    <div class=\"tag clickable\">\n                                        <div class=\"tag-inner\">Speed</div>\n                                    </div>\n                                    <div class=\"tag clickable\">\n                                        <div class=\"tag-inner\">Engine Speed</div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div data-testid=\"ruleConnector\" class=\"RuleConnector height-20 display-flex justify-content-center align-items-center position-relative opacity-0\">\n                    <div class=\"margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white\">\n                        <div class=\"right-50pct position-relative width-20 height-20 bg-white\">\n                        </div>\n                    </div>\n                    <span class=\"padding-left-20 padding-right-20 z-index-1 bg-lightest\">\n                        <span class=\"text-color-light\">\n                            <span class=\"rioglyph rioglyph-plus\" data-testid=\"ruleConnectorIcon\">\n                            </span>\n                        </span>\n                    </span>\n                    <div class=\"margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white\">\n                        <div class=\"left-50pct position-relative width-20 height-20 bg-white\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div>\n        <div>\n            <div class=\"RuleContainer\">\n                <div class=\"RuleContainerBox position-relative rounded padding-20 bg-lightest border border-width border-style-dashed \" data-testid=\"ruleContainerBox\">\n                    <div style=\"opacity: 1;\">\n                        <div class=\"display-flex flex-column align-items-center gap-15\">\n                            <div class=\"text-center\">When should the rule be triggered?</div>\n                            <div class=\"taglist taglist-autowidth\">\n                                <div class=\"tag active clickable rioglyph rioglyph-ok\">\n                                    <div class=\"tag-inner\">Immediately</div>\n                                </div>\n                                <div class=\"tag clickable\">\n                                    <div class=\"tag-inner\">When all conditions apply for at least</div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div data-testid=\"ruleConnector\" class=\"RuleConnector height-20 display-flex justify-content-center align-items-center position-relative opacity-0\">\n                    <div class=\"margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white\">\n                        <div class=\"right-50pct position-relative width-20 height-20 bg-white\">\n                        </div>\n                    </div>\n                    <span class=\"padding-left-20 padding-right-20 z-index-1 bg-lightest\">\n                        <span class=\"text-color-light\">\n                            <span class=\"rioglyph rioglyph-plus\" data-testid=\"ruleConnectorIcon\">\n                            </span>\n                        </span>\n                    </span>\n                    <div class=\"margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white\">\n                        <div class=\"left-50pct position-relative width-20 height-20 bg-white\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "RuleContainer",
+                  "rows": [
+                    {
+                      "name": "show",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines whether the container is shown."
+                    },
+                    {
+                      "name": "unchecked",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Determines the container style for when no rule option is selected. It also hides the connector in this case."
+                    },
+                    {
+                      "name": "background",
+                      "type": "String",
+                      "default": "bg-lightest",
+                      "description": "The box background class name."
+                    },
+                    {
+                      "name": "borderColor",
+                      "type": "String",
+                      "default": "",
+                      "description": "The border color class name."
+                    },
+                    {
+                      "name": "hideConnector",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the connector is shown."
+                    },
+                    {
+                      "name": "customConnector",
+                      "type": "String | Node",
+                      "default": "",
+                      "description": "Overwrites the default connector."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the wrapper element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "RuleConnector",
+                  "rows": [
+                    {
+                      "name": "placement",
+                      "type": "String",
+                      "default": "center",
+                      "description": "The placement for the connector. Possible values are \"start\", \"center\" and \"end\"."
+                    },
+                    {
+                      "name": "icon",
+                      "type": "String",
+                      "default": "rioglyph-plus",
+                      "description": "The rioglyph icon name."
+                    },
+                    {
+                      "name": "hidden",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the connector is shown."
+                    },
+                    {
+                      "name": "background",
+                      "type": "String",
+                      "default": "bg-lightest",
+                      "description": "Background color of the connector itself."
+                    },
+                    {
+                      "name": "pageBackground",
+                      "type": "String",
+                      "default": "bg-white",
+                      "description": "Background color of the surrounding area where the rule containers are placed."
+                    },
+                    {
+                      "name": "contentClassName",
+                      "type": "String",
+                      "default": "text-color-light",
+                      "description": "Classes to be set on the connector content."
+                    },
+                    {
+                      "name": "hasBorder",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the connector has a border."
+                    },
+                    {
+                      "name": "borderColor",
+                      "type": "String",
+                      "default": "",
+                      "description": "The border color class name."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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: 0.0555556;\"><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: 0.0555556;\"><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: 0.0555556;\"><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: 0.0555556;\"><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: 0.0555556;\"><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import RuleContainer from '@rio-cloud/rio-uikit/RuleContainer';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport TagList from '@rio-cloud/rio-uikit/TagList';\nimport Tag from '@rio-cloud/rio-uikit/Tag';\nimport RulesWrapper from '@rio-cloud/rio-uikit/components/rules/RulesWrapper';\n\nexport default () => (\n    <div>\n        <label>Default Example with morde conditions - (static)</label>\n        <RulesWrapper>\n            <RuleContainer>\n                <form>\n                    <div className='display-flex align-items-center gap-10 flex-1-1 flex-wrap'>\n                        <div className='flex-1-1-0 line-height-125rel'>Mileage is greater than</div>\n                        <div className='flex-1-1-0 display-flex gap-10'>\n                            <div className='width-100pct margin-bottom-0'>\n                                <div className='input-group min-width-100'>\n                                    <input className='form-control' type='text' name='value' />\n                                    <div className='input-group-addon'>km</div>\n                                </div>\n                            </div>\n                            <Button bsStyle={Button.MUTED} iconOnly>\n                                <span className='rioglyph rioglyph-trash' />\n                            </Button>\n                        </div>\n                    </div>\n                </form>\n            </RuleContainer>\n\n            <RuleContainer hideConnector>\n                <div className='text-center'>\n                    <div className='text-center text-color-primary hover-text-color-highlight-dark cursor-pointer'>\n                        Which additional conditions should count for this rule?\n                    </div>\n                </div>\n            </RuleContainer>\n\n            <RuleContainer unchecked hideConnector>\n                <span className='display-flex align-items-center justify-content-center'>\n                    <span data-testid='AddCondition-message'>Why should the rule be triggered?</span>\n                </span>\n\n                <div className='display-flex flex-wrap gap-20 margin-top-20'>\n                    <div className='flex-1-1-0'>\n                        <legend>Category A</legend>\n                        <TagList>\n                            <Tag clickable>Mileage</Tag>\n                            <Tag clickable>Fuel Level</Tag>\n                            <Tag clickable>Engine speed</Tag>\n                            <Tag clickable>Driving/standing</Tag>\n                        </TagList>\n                    </div>\n                    <div className='flex-1-1-0'>\n                        <legend>Category B</legend>\n                        <TagList>\n                            <Tag clickable>Remaining daily driving time</Tag>\n                            <Tag clickable>Remaining weekly driving time</Tag>\n                            <Tag clickable>Daily driving time</Tag>\n                            <Tag clickable>Weekly driving time</Tag>\n                        </TagList>\n                    </div>\n                    <div className='flex-1-1-0'>\n                        <legend>Category C</legend>\n                        <TagList>\n                            <Tag clickable>Driver Card</Tag>\n                            <Tag clickable>Power take-off</Tag>\n                            <Tag clickable>Inside/Outside geofence</Tag>\n                            <Tag clickable>Inside/Outside Country</Tag>\n                        </TagList>\n                    </div>\n                </div>\n            </RuleContainer>\n\n            <RuleContainer unchecked>\n                <div className='display-flex flex-column align-items-center gap-15'>\n                    <span>When should the rule be triggered?</span>\n\n                    <TagList>\n                        <Tag active clickable={false}>\n                            Immediately\n                        </Tag>\n                        <Tag clickable>When all conditions apply for at least</Tag>\n                    </TagList>\n                </div>\n            </RuleContainer>\n        </RulesWrapper>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <label>Default Example with morde conditions - (static)</label>\n    <div>\n        <div>\n            <div class=\"RuleContainer\">\n                <div class=\"RuleContainerBox position-relative rounded padding-20 bg-lightest\" data-testid=\"ruleContainerBox\">\n                    <div style=\"opacity: 1;\">\n                        <form>\n                            <div class=\"display-flex align-items-center gap-10 flex-1-1 flex-wrap\">\n                                <div class=\"flex-1-1-0 line-height-125rel\">Mileage is greater than</div>\n                                <div class=\"flex-1-1-0 display-flex gap-10\">\n                                    <div class=\"width-100pct margin-bottom-0\">\n                                        <div class=\"input-group min-width-100\">\n                                            <input class=\"form-control\" type=\"text\" name=\"value\">\n                                            <div class=\"input-group-addon\">km</div>\n                                        </div>\n                                    </div>\n                                    <button type=\"button\" class=\"btn btn-muted btn-icon-only btn-component\" tabindex=\"0\">\n                                        <span class=\"rioglyph rioglyph-trash\">\n                                        </span>\n                                    </button>\n                                </div>\n                            </div>\n                        </form>\n                    </div>\n                </div>\n                <div data-testid=\"ruleConnector\" class=\"RuleConnector height-20 display-flex justify-content-center align-items-center position-relative\">\n                    <div class=\"margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white\">\n                        <div class=\"right-50pct position-relative width-20 height-20 bg-white\">\n                        </div>\n                    </div>\n                    <span class=\"padding-left-20 padding-right-20 z-index-1 bg-lightest\">\n                        <span class=\"text-color-light\">\n                            <span class=\"rioglyph rioglyph-plus\" data-testid=\"ruleConnectorIcon\">\n                            </span>\n                        </span>\n                    </span>\n                    <div class=\"margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white\">\n                        <div class=\"left-50pct position-relative width-20 height-20 bg-white\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"RuleContainer\">\n                <div class=\"RuleContainerBox position-relative rounded padding-20 bg-lightest\" data-testid=\"ruleContainerBox\">\n                    <div style=\"opacity: 1;\">\n                        <div class=\"text-center\">\n                            <div class=\"text-center text-color-primary hover-text-color-highlight-dark cursor-pointer\">Which additional conditions should count for this rule?</div>\n                        </div>\n                    </div>\n                </div>\n                <div data-testid=\"ruleConnector\" class=\"RuleConnector height-20 display-flex justify-content-center align-items-center position-relative opacity-0\">\n                    <div class=\"margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white\">\n                        <div class=\"right-50pct position-relative width-20 height-20 bg-white\">\n                        </div>\n                    </div>\n                    <span class=\"padding-left-20 padding-right-20 z-index-1 bg-lightest\">\n                        <span class=\"text-color-light\">\n                            <span class=\"rioglyph rioglyph-plus\" data-testid=\"ruleConnectorIcon\">\n                            </span>\n                        </span>\n                    </span>\n                    <div class=\"margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white\">\n                        <div class=\"left-50pct position-relative width-20 height-20 bg-white\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"RuleContainer\">\n                <div class=\"RuleContainerBox position-relative rounded padding-20 bg-lightest border border-width border-style-dashed \" data-testid=\"ruleContainerBox\">\n                    <div style=\"opacity: 1;\">\n                        <span class=\"display-flex align-items-center justify-content-center\">\n                            <span data-testid=\"AddCondition-message\">Why should the rule be triggered?</span>\n                        </span>\n                    </div>\n                    <div style=\"opacity: 1;\">\n                        <div class=\"display-flex flex-wrap gap-20 margin-top-20\">\n                            <div class=\"flex-1-1-0\">\n                                <legend>Category A</legend>\n                                <div class=\"taglist taglist-autowidth\">\n                                    <div class=\"tag clickable\">\n                                        <div class=\"tag-inner\">Mileage</div>\n                                    </div>\n                                    <div class=\"tag clickable\">\n                                        <div class=\"tag-inner\">Fuel Level</div>\n                                    </div>\n                                    <div class=\"tag clickable\">\n                                        <div class=\"tag-inner\">Engine speed</div>\n                                    </div>\n                                    <div class=\"tag clickable\">\n                                        <div class=\"tag-inner\">Driving/standing</div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"flex-1-1-0\">\n                                <legend>Category B</legend>\n                                <div class=\"taglist taglist-autowidth\">\n                                    <div class=\"tag clickable\">\n                                        <div class=\"tag-inner\">Remaining daily driving time</div>\n                                    </div>\n                                    <div class=\"tag clickable\">\n                                        <div class=\"tag-inner\">Remaining weekly driving time</div>\n                                    </div>\n                                    <div class=\"tag clickable\">\n                                        <div class=\"tag-inner\">Daily driving time</div>\n                                    </div>\n                                    <div class=\"tag clickable\">\n                                        <div class=\"tag-inner\">Weekly driving time</div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"flex-1-1-0\">\n                                <legend>Category C</legend>\n                                <div class=\"taglist taglist-autowidth\">\n                                    <div class=\"tag clickable\">\n                                        <div class=\"tag-inner\">Driver Card</div>\n                                    </div>\n                                    <div class=\"tag clickable\">\n                                        <div class=\"tag-inner\">Power take-off</div>\n                                    </div>\n                                    <div class=\"tag clickable\">\n                                        <div class=\"tag-inner\">Inside/Outside geofence</div>\n                                    </div>\n                                    <div class=\"tag clickable\">\n                                        <div class=\"tag-inner\">Inside/Outside Country</div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div data-testid=\"ruleConnector\" class=\"RuleConnector height-20 display-flex justify-content-center align-items-center position-relative opacity-0\">\n                    <div class=\"margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white\">\n                        <div class=\"right-50pct position-relative width-20 height-20 bg-white\">\n                        </div>\n                    </div>\n                    <span class=\"padding-left-20 padding-right-20 z-index-1 bg-lightest\">\n                        <span class=\"text-color-light\">\n                            <span class=\"rioglyph rioglyph-plus\" data-testid=\"ruleConnectorIcon\">\n                            </span>\n                        </span>\n                    </span>\n                    <div class=\"margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white\">\n                        <div class=\"left-50pct position-relative width-20 height-20 bg-white\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"RuleContainer\">\n                <div class=\"RuleContainerBox position-relative rounded padding-20 bg-lightest border border-width border-style-dashed \" data-testid=\"ruleContainerBox\">\n                    <div style=\"opacity: 1;\">\n                        <div class=\"display-flex flex-column align-items-center gap-15\">\n                            <span>When should the rule be triggered?</span>\n                            <div class=\"taglist taglist-autowidth\">\n                                <div class=\"tag active clickable rioglyph rioglyph-ok\">\n                                    <div class=\"tag-inner\">Immediately</div>\n                                </div>\n                                <div class=\"tag clickable\">\n                                    <div class=\"tag-inner\">When all conditions apply for at least</div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div data-testid=\"ruleConnector\" class=\"RuleConnector height-20 display-flex justify-content-center align-items-center position-relative opacity-0\">\n                    <div class=\"margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white\">\n                        <div class=\"right-50pct position-relative width-20 height-20 bg-white\">\n                        </div>\n                    </div>\n                    <span class=\"padding-left-20 padding-right-20 z-index-1 bg-lightest\">\n                        <span class=\"text-color-light\">\n                            <span class=\"rioglyph rioglyph-plus\" data-testid=\"ruleConnectorIcon\">\n                            </span>\n                        </span>\n                    </span>\n                    <div class=\"margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white\">\n                        <div class=\"left-50pct position-relative width-20 height-20 bg-white\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "RuleContainer",
+                  "rows": [
+                    {
+                      "name": "show",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines whether the container is shown."
+                    },
+                    {
+                      "name": "unchecked",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Determines the container style for when no rule option is selected. It also hides the connector in this case."
+                    },
+                    {
+                      "name": "background",
+                      "type": "String",
+                      "default": "bg-lightest",
+                      "description": "The box background class name."
+                    },
+                    {
+                      "name": "borderColor",
+                      "type": "String",
+                      "default": "",
+                      "description": "The border color class name."
+                    },
+                    {
+                      "name": "hideConnector",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the connector is shown."
+                    },
+                    {
+                      "name": "customConnector",
+                      "type": "String | Node",
+                      "default": "",
+                      "description": "Overwrites the default connector."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the wrapper element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "RuleConnector",
+                  "rows": [
+                    {
+                      "name": "placement",
+                      "type": "String",
+                      "default": "center",
+                      "description": "The placement for the connector. Possible values are \"start\", \"center\" and \"end\"."
+                    },
+                    {
+                      "name": "icon",
+                      "type": "String",
+                      "default": "rioglyph-plus",
+                      "description": "The rioglyph icon name."
+                    },
+                    {
+                      "name": "hidden",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the connector is shown."
+                    },
+                    {
+                      "name": "background",
+                      "type": "String",
+                      "default": "bg-lightest",
+                      "description": "Background color of the connector itself."
+                    },
+                    {
+                      "name": "pageBackground",
+                      "type": "String",
+                      "default": "bg-white",
+                      "description": "Background color of the surrounding area where the rule containers are placed."
+                    },
+                    {
+                      "name": "contentClassName",
+                      "type": "String",
+                      "default": "text-color-light",
+                      "description": "Classes to be set on the connector content."
+                    },
+                    {
+                      "name": "hasBorder",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the connector has a border."
+                    },
+                    {
+                      "name": "borderColor",
+                      "type": "String",
+                      "default": "",
+                      "description": "The border color class name."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "AND",
+          "rendered_html": "<div class=\"playground-content  bg-lightest padding-20 padding-bottom-25\" style=\"width: 100%;\"><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: 0.0555556;\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</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: 0.0555556;\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</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: 0.0555556;\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</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>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import RuleContainer from '@rio-cloud/rio-uikit/RuleContainer';\nimport RuleConnector from '@rio-cloud/rio-uikit/RuleConnector';\nimport { dummyTextExtraShort } from '../../../utils/data';\n\nconst background = 'bg-white';\n\nexport default () => (\n    <div>\n        <label>Custom Example</label>\n        <RuleContainer className='border' background={background} customConnector={<CustomConnector value='AND' />}>\n            {dummyTextExtraShort}\n        </RuleContainer>\n\n        <RuleContainer className='border' background={background} customConnector={<CustomConnector value='OR' />}>\n            {dummyTextExtraShort}\n        </RuleContainer>\n\n        <RuleContainer className='border' background={background} hideConnector>\n            {dummyTextExtraShort}\n        </RuleContainer>\n    </div>\n);\n\nconst CustomConnector = ({ value }: { value: string }) => (\n    <RuleConnector\n        background={background}\n        pageBackground='bg-lightest'\n        placement='start'\n        hasBorder\n        borderColor='border-color-light'\n    >\n        <span className='text-color-dark text-size-12'>{value}</span>\n    </RuleConnector>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <label>Custom Example</label>\n    <div class=\"RuleContainer\">\n        <div class=\"RuleContainerBox position-relative rounded padding-20 bg-white border\" data-testid=\"ruleContainerBox\">\n            <div style=\"opacity: 1;\">\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</div>\n        </div>\n        <div data-testid=\"ruleConnector\" class=\"RuleConnector height-20 display-flex justify-content-start align-items-center position-relative\">\n            <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\">\n                <div class=\"right-50pct position-relative width-20 height-20 bg-lightest\">\n                </div>\n            </div>\n            <span class=\"padding-left-20 padding-right-20 z-index-1 bg-white border border-color-white\">\n                <span class=\"text-color-light\">\n                    <span class=\"text-color-dark text-size-12\">AND</span>\n                </span>\n            </span>\n            <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\">\n                <div class=\"left-50pct position-relative width-20 height-20 bg-lightest\">\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"RuleContainer\">\n        <div class=\"RuleContainerBox position-relative rounded padding-20 bg-white border\" data-testid=\"ruleContainerBox\">\n            <div style=\"opacity: 1;\">\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</div>\n        </div>\n        <div data-testid=\"ruleConnector\" class=\"RuleConnector height-20 display-flex justify-content-start align-items-center position-relative\">\n            <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\">\n                <div class=\"right-50pct position-relative width-20 height-20 bg-lightest\">\n                </div>\n            </div>\n            <span class=\"padding-left-20 padding-right-20 z-index-1 bg-white border border-color-white\">\n                <span class=\"text-color-light\">\n                    <span class=\"text-color-dark text-size-12\">OR</span>\n                </span>\n            </span>\n            <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\">\n                <div class=\"left-50pct position-relative width-20 height-20 bg-lightest\">\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"RuleContainer\">\n        <div class=\"RuleContainerBox position-relative rounded padding-20 bg-white border\" data-testid=\"ruleContainerBox\">\n            <div style=\"opacity: 1;\">\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</div>\n        </div>\n        <div data-testid=\"ruleConnector\" class=\"RuleConnector height-20 display-flex justify-content-center align-items-center position-relative opacity-0\">\n            <div class=\"margin-right--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white\">\n                <div class=\"right-50pct position-relative width-20 height-20 bg-white\">\n                </div>\n            </div>\n            <span class=\"padding-left-20 padding-right-20 z-index-1 bg-lightest\">\n                <span class=\"text-color-light\">\n                    <span class=\"rioglyph rioglyph-plus\" data-testid=\"ruleConnectorIcon\">\n                    </span>\n                </span>\n            </span>\n            <div class=\"margin-left--10 width-20 height-20 rounded-circle position-relative z-index-2 box-sizing-content-box bg-white\">\n                <div class=\"left-50pct position-relative width-20 height-20 bg-white\">\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "RuleContainer",
+                  "rows": [
+                    {
+                      "name": "show",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines whether the container is shown."
+                    },
+                    {
+                      "name": "unchecked",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Determines the container style for when no rule option is selected. It also hides the connector in this case."
+                    },
+                    {
+                      "name": "background",
+                      "type": "String",
+                      "default": "bg-lightest",
+                      "description": "The box background class name."
+                    },
+                    {
+                      "name": "borderColor",
+                      "type": "String",
+                      "default": "",
+                      "description": "The border color class name."
+                    },
+                    {
+                      "name": "hideConnector",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the connector is shown."
+                    },
+                    {
+                      "name": "customConnector",
+                      "type": "String | Node",
+                      "default": "",
+                      "description": "Overwrites the default connector."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the wrapper element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "RuleConnector",
+                  "rows": [
+                    {
+                      "name": "placement",
+                      "type": "String",
+                      "default": "center",
+                      "description": "The placement for the connector. Possible values are \"start\", \"center\" and \"end\"."
+                    },
+                    {
+                      "name": "icon",
+                      "type": "String",
+                      "default": "rioglyph-plus",
+                      "description": "The rioglyph icon name."
+                    },
+                    {
+                      "name": "hidden",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the connector is shown."
+                    },
+                    {
+                      "name": "background",
+                      "type": "String",
+                      "default": "bg-lightest",
+                      "description": "Background color of the connector itself."
+                    },
+                    {
+                      "name": "pageBackground",
+                      "type": "String",
+                      "default": "bg-white",
+                      "description": "Background color of the surrounding area where the rule containers are placed."
+                    },
+                    {
+                      "name": "contentClassName",
+                      "type": "String",
+                      "default": "text-color-light",
+                      "description": "Classes to be set on the connector content."
+                    },
+                    {
+                      "name": "hasBorder",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the connector has a border."
+                    },
+                    {
+                      "name": "borderColor",
+                      "type": "String",
+                      "default": "",
+                      "description": "The border color class name."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes for the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}