@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,680 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:38.062Z",
+    "source": "https://uikit.developers.rio.cloud/#components/dataTabs",
+    "category": "Components",
+    "section": "Content",
+    "slug": "components/datatabs",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "89840828de8ea9f6b42daabf85646261178f1b0e49e04b57aa4319bdaef9aefb"
+  },
+  "title": "DataTabs",
+  "lead": "Passing a single tab content component via commonTabContent prop into the DataTabs component allows to update that single component when switching tabs. This comes in handy for instance when you want to animate a graph with different values from each tab.",
+  "content": [
+    {
+      "heading": "DataTabs",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"h6\">Horizontal layout</div><div class=\"DataTabsContainer DataTab-bordered DataTabs-horizontal\"><div class=\"DataTabsWrapper \"><ul class=\"DataTabs\" role=\"tabList\"><li class=\"DataTab tab active bg-highlight-dark text-color-white\" data-tabkey=\"tab1\"><div><div>Ø - Consumption</div><div class=\"text-bold text-size-18\">13,5 km/l</div></div><div class=\"arrow bg-highlight-dark border-color-transparent in\"></div></li><li class=\"DataTab tab cursor-pointer\" data-tabkey=\"tab2\"><div><div>Ø - C02 Emission</div><div class=\"text-bold text-size-18\">12,2 kg</div></div><div class=\"arrow bg-highlight-dark border-color-transparent \"></div></li><li class=\"DataTab tab cursor-pointer\" data-tabkey=\"tab3\"><div><div>Ø - Range</div><div class=\"text-bold text-size-18\">32,8 l/100</div></div><div class=\"arrow bg-highlight-dark border-color-transparent \"></div></li><li class=\"DataTab tab cursor-pointer\" data-tabkey=\"tab4\"><div><div>Ø - Route type</div><div class=\"text-bold text-size-18\"><div><span class=\"text-color-light\">A</span><span class=\"text-color-light\">B</span><span class=\"text-color-light\">C</span><span class=\"text-color-light\">D</span><span class=\"text-color-warning\">E</span><span class=\"text-color-light\">F</span></div></div></div><div class=\"arrow bg-highlight-dark border-color-transparent \"></div></li></ul></div><div class=\"tab-content \" role=\"tabpanel\"><div class=\"fade in\" style=\"opacity: 1; transform: none;\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { useState } from 'react';\n\nimport DataTabs from '@rio-cloud/rio-uikit/DataTabs';\nimport DataTab from '@rio-cloud/rio-uikit/DataTab';\nimport { dummyText } from '../../../utils/data';\n\nexport default () => {\n    const [tabKey, setTabKey] = useState<string>();\n\n    return (\n        <div>\n            <div className='h6'>Horizontal layout</div>\n            <DataTabs activeKey={tabKey} onSelectTab={newTabKey => setTabKey(newTabKey)}>\n                <DataTab tabKey='tab1' title={<Title text='Ø - Consumption' value='13,5 km/l' />}>\n                    {dummyText}\n                </DataTab>\n                <DataTab tabKey='tab2' title={<Title text='Ø - C02 Emission' value='12,2 kg' />}>\n                    {dummyText + dummyText}\n                </DataTab>\n                <DataTab tabKey='tab3' title={<Title text='Ø - Range' value='32,8 l/100' />}>\n                    {dummyText}\n                </DataTab>\n                <DataTab tabKey='tab4' title={<Title text='Ø - Route type' value={<RouteType />} />}>\n                    {dummyText}\n                </DataTab>\n            </DataTabs>\n        </div>\n    );\n};\n\nexport const Title = ({ text, value }: { text: string; value: React.ReactNode }) => (\n    <div>\n        <div>{text}</div>\n        <div className='text-bold text-size-18'>{value}</div>\n    </div>\n);\n\nexport const RouteType = () => (\n    <div>\n        <span className='text-color-light'>A</span>\n        <span className='text-color-light'>B</span>\n        <span className='text-color-light'>C</span>\n        <span className='text-color-light'>D</span>\n        <span className='text-color-warning'>E</span>\n        <span className='text-color-light'>F</span>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"h6\">Horizontal layout</div>\n    <div class=\"DataTabsContainer DataTab-bordered DataTabs-horizontal\">\n        <div class=\"DataTabsWrapper \">\n            <ul class=\"DataTabs\" role=\"tabList\">\n                <li class=\"DataTab tab active bg-highlight-dark text-color-white\" data-tabkey=\"tab1\">\n                    <div>\n                        <div>Ø - Consumption</div>\n                        <div class=\"text-bold text-size-18\">13,5 km/l</div>\n                    </div>\n                    <div class=\"arrow bg-highlight-dark border-color-transparent in\">\n                    </div>\n                </li>\n                <li class=\"DataTab tab cursor-pointer\" data-tabkey=\"tab2\">\n                    <div>\n                        <div>Ø - C02 Emission</div>\n                        <div class=\"text-bold text-size-18\">12,2 kg</div>\n                    </div>\n                    <div class=\"arrow bg-highlight-dark border-color-transparent \">\n                    </div>\n                </li>\n                <li class=\"DataTab tab cursor-pointer\" data-tabkey=\"tab3\">\n                    <div>\n                        <div>Ø - Range</div>\n                        <div class=\"text-bold text-size-18\">32,8 l/100</div>\n                    </div>\n                    <div class=\"arrow bg-highlight-dark border-color-transparent \">\n                    </div>\n                </li>\n                <li class=\"DataTab tab cursor-pointer\" data-tabkey=\"tab4\">\n                    <div>\n                        <div>Ø - Route type</div>\n                        <div class=\"text-bold text-size-18\">\n                            <div>\n                                <span class=\"text-color-light\">A</span>\n                                <span class=\"text-color-light\">B</span>\n                                <span class=\"text-color-light\">C</span>\n                                <span class=\"text-color-light\">D</span>\n                                <span class=\"text-color-warning\">E</span>\n                                <span class=\"text-color-light\">F</span>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"arrow bg-highlight-dark border-color-transparent \">\n                    </div>\n                </li>\n            </ul>\n        </div>\n        <div class=\"tab-content \" role=\"tabpanel\">\n            <div class=\"fade in\" style=\"opacity: 1; transform: none;\">\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "DataTabs",
+                  "rows": [
+                    {
+                      "name": "activeKey",
+                      "type": "String",
+                      "default": "\"\"",
+                      "description": "Sets key and id."
+                    },
+                    {
+                      "name": "onSelectTab",
+                      "type": "Boolean",
+                      "default": "() => {}",
+                      "description": "Called when a tab is being activated."
+                    },
+                    {
+                      "name": "commonTabContent",
+                      "type": "Node",
+                      "default": "",
+                      "description": "Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component."
+                    },
+                    {
+                      "name": "vertical",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Whether the layout should be vertical."
+                    },
+                    {
+                      "name": "bordered",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Whether the component should add a border."
+                    },
+                    {
+                      "name": "disableTransition",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    },
+                    {
+                      "name": "tabContentClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the tabContent wrapper element."
+                    },
+                    {
+                      "name": "tabsWrapperClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the tabs wrapper element."
+                    },
+                    {
+                      "name": "arrowClassName",
+                      "type": "String",
+                      "default": "bg-highlight-dark",
+                      "description": "Additional classes to be set on the arrow."
+                    },
+                    {
+                      "name": "tabClassName",
+                      "type": "String",
+                      "default": "bg-white",
+                      "description": "Additional classes to be set on the tab element."
+                    },
+                    {
+                      "name": "tabHoverClassName",
+                      "type": "String",
+                      "default": "text-color-darkest",
+                      "description": "Utility hover classes to be set on the tab element."
+                    },
+                    {
+                      "name": "tabActiveClassName",
+                      "type": "String",
+                      "default": "text-color-darkest",
+                      "description": "Utility active classes to be set on the tab element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "DataTab",
+                  "rows": [
+                    {
+                      "name": "tabKey",
+                      "type": "String",
+                      "default": "",
+                      "description": "Used to identify the tab."
+                    },
+                    {
+                      "name": "title",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The content for the tab."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"h6\">Vertical layout</div><div class=\"DataTabsContainer DataTab-bordered DataTabs-vertical\"><div class=\"DataTabsWrapper \"><ul class=\"DataTabs\" role=\"tabList\"><li class=\"DataTab tab active bg-highlight-dark text-color-white\" data-tabkey=\"tab1\"><div><div>Ø - Consumption</div><div class=\"text-bold text-size-18\">13,5 km/l</div></div><div class=\"arrow bg-highlight-dark border-color-transparent in\"></div></li><li class=\"DataTab tab cursor-pointer\" data-tabkey=\"tab2\"><div><div>Ø - C02 Emission</div><div class=\"text-bold text-size-18\">12,2 kg</div></div><div class=\"arrow bg-highlight-dark border-color-transparent \"></div></li><li class=\"DataTab tab cursor-pointer\" data-tabkey=\"tab3\"><div><div>Ø - Range</div><div class=\"text-bold text-size-18\">32,8 l/100</div></div><div class=\"arrow bg-highlight-dark border-color-transparent \"></div></li><li class=\"DataTab tab cursor-pointer\" data-tabkey=\"tab4\"><div><div>Ø - Route type</div><div class=\"text-bold text-size-18\"><div><span class=\"text-color-light\">A</span><span class=\"text-color-light\">B</span><span class=\"text-color-light\">C</span><span class=\"text-color-light\">D</span><span class=\"text-color-warning\">E</span><span class=\"text-color-light\">F</span></div></div></div><div class=\"arrow bg-highlight-dark border-color-transparent \"></div></li></ul></div><div class=\"tab-content \" role=\"tabpanel\"><div class=\"fade in\" style=\"opacity: 1; transform: none;\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { useState } from 'react';\n\nimport DataTabs from '@rio-cloud/rio-uikit/DataTabs';\nimport DataTab from '@rio-cloud/rio-uikit/DataTab';\nimport { dummyText } from '../../../utils/data';\n\nexport default () => {\n    const [tabKey, setTabKey] = useState<string>();\n\n    return (\n        <div>\n            <div className='h6'>Vertical layout</div>\n            <DataTabs activeKey={tabKey} onSelectTab={newTabKey => setTabKey(newTabKey)} vertical>\n                <DataTab tabKey='tab1' title={<Title text='Ø - Consumption' value='13,5 km/l' />}>\n                    {dummyText}\n                </DataTab>\n                <DataTab tabKey='tab2' title={<Title text='Ø - C02 Emission' value='12,2 kg' />}>\n                    {dummyText + dummyText}\n                </DataTab>\n                <DataTab tabKey='tab3' title={<Title text='Ø - Range' value='32,8 l/100' />}>\n                    {dummyText}\n                </DataTab>\n                <DataTab tabKey='tab4' title={<Title text='Ø - Route type' value={<RouteType />} />}>\n                    {dummyText}\n                </DataTab>\n            </DataTabs>\n        </div>\n    );\n};\n\nexport const Title = ({ text, value }: { text: string; value: React.ReactNode }) => (\n    <div>\n        <div>{text}</div>\n        <div className='text-bold text-size-18'>{value}</div>\n    </div>\n);\n\nexport const RouteType = () => (\n    <div>\n        <span className='text-color-light'>A</span>\n        <span className='text-color-light'>B</span>\n        <span className='text-color-light'>C</span>\n        <span className='text-color-light'>D</span>\n        <span className='text-color-warning'>E</span>\n        <span className='text-color-light'>F</span>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"h6\">Vertical layout</div>\n    <div class=\"DataTabsContainer DataTab-bordered DataTabs-vertical\">\n        <div class=\"DataTabsWrapper \">\n            <ul class=\"DataTabs\" role=\"tabList\">\n                <li class=\"DataTab tab active bg-highlight-dark text-color-white\" data-tabkey=\"tab1\">\n                    <div>\n                        <div>Ø - Consumption</div>\n                        <div class=\"text-bold text-size-18\">13,5 km/l</div>\n                    </div>\n                    <div class=\"arrow bg-highlight-dark border-color-transparent in\">\n                    </div>\n                </li>\n                <li class=\"DataTab tab cursor-pointer\" data-tabkey=\"tab2\">\n                    <div>\n                        <div>Ø - C02 Emission</div>\n                        <div class=\"text-bold text-size-18\">12,2 kg</div>\n                    </div>\n                    <div class=\"arrow bg-highlight-dark border-color-transparent \">\n                    </div>\n                </li>\n                <li class=\"DataTab tab cursor-pointer\" data-tabkey=\"tab3\">\n                    <div>\n                        <div>Ø - Range</div>\n                        <div class=\"text-bold text-size-18\">32,8 l/100</div>\n                    </div>\n                    <div class=\"arrow bg-highlight-dark border-color-transparent \">\n                    </div>\n                </li>\n                <li class=\"DataTab tab cursor-pointer\" data-tabkey=\"tab4\">\n                    <div>\n                        <div>Ø - Route type</div>\n                        <div class=\"text-bold text-size-18\">\n                            <div>\n                                <span class=\"text-color-light\">A</span>\n                                <span class=\"text-color-light\">B</span>\n                                <span class=\"text-color-light\">C</span>\n                                <span class=\"text-color-light\">D</span>\n                                <span class=\"text-color-warning\">E</span>\n                                <span class=\"text-color-light\">F</span>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"arrow bg-highlight-dark border-color-transparent \">\n                    </div>\n                </li>\n            </ul>\n        </div>\n        <div class=\"tab-content \" role=\"tabpanel\">\n            <div class=\"fade in\" style=\"opacity: 1; transform: none;\">\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "DataTabs",
+                  "rows": [
+                    {
+                      "name": "activeKey",
+                      "type": "String",
+                      "default": "\"\"",
+                      "description": "Sets key and id."
+                    },
+                    {
+                      "name": "onSelectTab",
+                      "type": "Boolean",
+                      "default": "() => {}",
+                      "description": "Called when a tab is being activated."
+                    },
+                    {
+                      "name": "commonTabContent",
+                      "type": "Node",
+                      "default": "",
+                      "description": "Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component."
+                    },
+                    {
+                      "name": "vertical",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Whether the layout should be vertical."
+                    },
+                    {
+                      "name": "bordered",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Whether the component should add a border."
+                    },
+                    {
+                      "name": "disableTransition",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    },
+                    {
+                      "name": "tabContentClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the tabContent wrapper element."
+                    },
+                    {
+                      "name": "tabsWrapperClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the tabs wrapper element."
+                    },
+                    {
+                      "name": "arrowClassName",
+                      "type": "String",
+                      "default": "bg-highlight-dark",
+                      "description": "Additional classes to be set on the arrow."
+                    },
+                    {
+                      "name": "tabClassName",
+                      "type": "String",
+                      "default": "bg-white",
+                      "description": "Additional classes to be set on the tab element."
+                    },
+                    {
+                      "name": "tabHoverClassName",
+                      "type": "String",
+                      "default": "text-color-darkest",
+                      "description": "Utility hover classes to be set on the tab element."
+                    },
+                    {
+                      "name": "tabActiveClassName",
+                      "type": "String",
+                      "default": "text-color-darkest",
+                      "description": "Utility active classes to be set on the tab element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "DataTab",
+                  "rows": [
+                    {
+                      "name": "tabKey",
+                      "type": "String",
+                      "default": "",
+                      "description": "Used to identify the tab."
+                    },
+                    {
+                      "name": "title",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The content for the tab."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "DataTabs inside an ExpanderPanel and custom color",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 3",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"expander-panel panel panel-default shadow-default\" aria-label=\"expander panel\"><div class=\"panel-heading open\" aria-label=\"panel heading\"><span class=\"title\">DataTabs inside an ExpanderPanel</span><span class=\"expander-icon rioglyph rioglyph-chevron-down\"></span></div><div class=\"collapse display-block width-100pct\" style=\"opacity: 1; height: auto;\"><div><div class=\"panel-body padding-0\"><div class=\"DataTabsContainer DataTabs-horizontal\"><div class=\"DataTabsWrapper bg-lightest\"><ul class=\"DataTabs\" role=\"tabList\"><li class=\"DataTab tab active bg-white\" data-tabkey=\"tab1\"><div><div>Ø - Consumption</div><div class=\"text-bold text-size-18\"><span>13,5 km/l</span></div></div><div class=\"arrow bg-white border-color-light margin-bottom--1 in\"></div></li><li class=\"DataTab tab bg-lightest cursor-pointer\" data-tabkey=\"tab2\"><div><div>Ø - C02 Emission</div><div class=\"text-bold text-size-18\"><span>12,2 kg</span></div></div><div class=\"arrow bg-white border-color-light margin-bottom--1 \"></div></li><li class=\"DataTab tab bg-lightest cursor-pointer\" data-tabkey=\"tab3\"><div><div>Ø - Range</div><div class=\"text-bold text-size-18\"><span>32,8 l/100</span></div></div><div class=\"arrow bg-white border-color-light margin-bottom--1 \"></div></li><li class=\"DataTab tab bg-lightest cursor-pointer\" data-tabkey=\"tab4\"><div><div>Ø - Route Type</div><div class=\"text-bold text-size-18\"><span><div><span class=\"text-color-light\">A</span><span class=\"text-color-light\">B</span><span class=\"text-color-light\">C</span><span class=\"text-color-light\">D</span><span class=\"text-color-warning\">E</span><span class=\"text-color-light\">F</span></div></span></div></div><div class=\"arrow bg-white border-color-light margin-bottom--1 \"></div></li></ul></div><div class=\"tab-content rounded-bottom bg-lightest\" role=\"tabpanel\"><div>\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div><div></div><div></div><div></div></div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { useState } from 'react';\n\nimport ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';\nimport DataTabs from '@rio-cloud/rio-uikit/DataTabs';\nimport DataTab from '@rio-cloud/rio-uikit/DataTab';\nimport SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';\nimport { dummyText } from '../../../utils/data';\n\nexport default () => {\n    const [tabKey, setTabKey] = useState('tab1');\n\n    return (\n        <ExpanderPanel\n            className='shadow-default'\n            bodyClassName='padding-0'\n            title='DataTabs inside an ExpanderPanel'\n            bsStyle='default'\n            open\n        >\n            <DataTabs\n                activeKey={tabKey}\n                onSelectTab={newTabKey => setTabKey(newTabKey)}\n                bordered={false}\n                disableTransition\n                tabsWrapperClassName='bg-lightest'\n                arrowClassName='bg-white border-color-light margin-bottom--1'\n                tabClassName='bg-lightest'\n                tabHoverClassName='bg-white'\n                tabActiveClassName='bg-white'\n                tabContentClassName='rounded-bottom bg-lightest'\n            >\n                <DataTab tabKey='tab1' title={<Title text='Ø - Consumption' value='13,5 km/l' />}>\n                    {dummyText}\n                </DataTab>\n                <DataTab tabKey='tab2' title={<Title text='Ø - C02 Emission' value='12,2 kg' />}>\n                    {dummyText + dummyText}\n                </DataTab>\n                <DataTab tabKey='tab3' title={<Title text='Ø - Range' value='32,8 l/100' />}>\n                    {dummyText}\n                </DataTab>\n                <DataTab tabKey='tab4' title={<Title text='Ø - Route Type' value={<RouteType />} />}>\n                    {dummyText}\n                </DataTab>\n            </DataTabs>\n        </ExpanderPanel>\n    );\n};\n\nexport const Title = ({ text, value }: { text: string; value: React.ReactNode }) => (\n    <div>\n        <div>{text}</div>\n\n        <div className='text-bold text-size-18'>\n            <SimpleTooltip content='This is a tooltip inside a DataTab'>\n                <span>{value}</span>\n            </SimpleTooltip>\n        </div>\n    </div>\n);\n\nexport const RouteType = () => (\n    <div>\n        <span className='text-color-light'>A</span>\n        <span className='text-color-light'>B</span>\n        <span className='text-color-light'>C</span>\n        <span className='text-color-light'>D</span>\n        <span className='text-color-warning'>E</span>\n        <span className='text-color-light'>F</span>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"expander-panel panel panel-default shadow-default\" aria-label=\"expander panel\">\n    <div class=\"panel-heading open\" aria-label=\"panel heading\">\n        <span class=\"title\">DataTabs inside an ExpanderPanel</span>\n        <span class=\"expander-icon rioglyph rioglyph-chevron-down\">\n        </span>\n    </div>\n    <div class=\"collapse display-block width-100pct\" style=\"opacity: 1; height: auto;\">\n        <div>\n            <div class=\"panel-body padding-0\">\n                <div class=\"DataTabsContainer DataTabs-horizontal\">\n                    <div class=\"DataTabsWrapper bg-lightest\">\n                        <ul class=\"DataTabs\" role=\"tabList\">\n                            <li class=\"DataTab tab active bg-white\" data-tabkey=\"tab1\">\n                                <div>\n                                    <div>Ø - Consumption</div>\n                                    <div class=\"text-bold text-size-18\">\n                                        <span>13,5 km/l</span>\n                                    </div>\n                                </div>\n                                <div class=\"arrow bg-white border-color-light margin-bottom--1 in\">\n                                </div>\n                            </li>\n                            <li class=\"DataTab tab bg-lightest cursor-pointer\" data-tabkey=\"tab2\">\n                                <div>\n                                    <div>Ø - C02 Emission</div>\n                                    <div class=\"text-bold text-size-18\">\n                                        <span>12,2 kg</span>\n                                    </div>\n                                </div>\n                                <div class=\"arrow bg-white border-color-light margin-bottom--1 \">\n                                </div>\n                            </li>\n                            <li class=\"DataTab tab bg-lightest cursor-pointer\" data-tabkey=\"tab3\">\n                                <div>\n                                    <div>Ø - Range</div>\n                                    <div class=\"text-bold text-size-18\">\n                                        <span>32,8 l/100</span>\n                                    </div>\n                                </div>\n                                <div class=\"arrow bg-white border-color-light margin-bottom--1 \">\n                                </div>\n                            </li>\n                            <li class=\"DataTab tab bg-lightest cursor-pointer\" data-tabkey=\"tab4\">\n                                <div>\n                                    <div>Ø - Route Type</div>\n                                    <div class=\"text-bold text-size-18\">\n                                        <span>\n                                            <div>\n                                                <span class=\"text-color-light\">A</span>\n                                                <span class=\"text-color-light\">B</span>\n                                                <span class=\"text-color-light\">C</span>\n                                                <span class=\"text-color-light\">D</span>\n                                                <span class=\"text-color-warning\">E</span>\n                                                <span class=\"text-color-light\">F</span>\n                                            </div>\n                                        </span>\n                                    </div>\n                                </div>\n                                <div class=\"arrow bg-white border-color-light margin-bottom--1 \">\n                                </div>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"tab-content rounded-bottom bg-lightest\" role=\"tabpanel\">\n                        <div>\n                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>\n                        <div>\n                        </div>\n                        <div>\n                        </div>\n                        <div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "DataTabs",
+                  "rows": [
+                    {
+                      "name": "activeKey",
+                      "type": "String",
+                      "default": "\"\"",
+                      "description": "Sets key and id."
+                    },
+                    {
+                      "name": "onSelectTab",
+                      "type": "Boolean",
+                      "default": "() => {}",
+                      "description": "Called when a tab is being activated."
+                    },
+                    {
+                      "name": "commonTabContent",
+                      "type": "Node",
+                      "default": "",
+                      "description": "Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component."
+                    },
+                    {
+                      "name": "vertical",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Whether the layout should be vertical."
+                    },
+                    {
+                      "name": "bordered",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Whether the component should add a border."
+                    },
+                    {
+                      "name": "disableTransition",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    },
+                    {
+                      "name": "tabContentClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the tabContent wrapper element."
+                    },
+                    {
+                      "name": "tabsWrapperClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the tabs wrapper element."
+                    },
+                    {
+                      "name": "arrowClassName",
+                      "type": "String",
+                      "default": "bg-highlight-dark",
+                      "description": "Additional classes to be set on the arrow."
+                    },
+                    {
+                      "name": "tabClassName",
+                      "type": "String",
+                      "default": "bg-white",
+                      "description": "Additional classes to be set on the tab element."
+                    },
+                    {
+                      "name": "tabHoverClassName",
+                      "type": "String",
+                      "default": "text-color-darkest",
+                      "description": "Utility hover classes to be set on the tab element."
+                    },
+                    {
+                      "name": "tabActiveClassName",
+                      "type": "String",
+                      "default": "text-color-darkest",
+                      "description": "Utility active classes to be set on the tab element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "DataTab",
+                  "rows": [
+                    {
+                      "name": "tabKey",
+                      "type": "String",
+                      "default": "",
+                      "description": "Used to identify the tab."
+                    },
+                    {
+                      "name": "title",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The content for the tab."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "DataTabs with shared common tab content and custom styling",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 4",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"expander-panel panel panel-default shadow-default\" aria-label=\"expander panel\"><div class=\"panel-heading open\" aria-label=\"panel heading\"><span class=\"title\">DataTabs inside an ExpanderPanel with one common tab content</span><span class=\"expander-icon rioglyph rioglyph-chevron-down\"></span></div><div class=\"collapse display-block width-100pct\" style=\"opacity: 1; height: auto;\"><div><div class=\"panel-body padding-0\"><div class=\"DataTabsContainer DataTabs-horizontal\"><div class=\"DataTabsWrapper bg-white\"><ul class=\"DataTabs\" role=\"tabList\"><li class=\"DataTab tab active bg-white text-color-primary opacity-100 margin-bottom--1 border border-top-none border-bottom-none margin-top-1 padding-y-5 border-left-none\" data-tabkey=\"tab1\"><div><div>Ø - Consumption</div><div class=\"text-bold text-size-18\">13,5 km/l</div></div><div class=\"arrow left-10 right-10 width-auto bg-primary rotate-0 height-2 bottom-0 in\"></div></li><li class=\"DataTab tab bg-lighter opacity-50 border border-color-transparent padding-y-5 cursor-pointer\" data-tabkey=\"tab2\"><div><div>Ø - C02 Emission</div><div class=\"text-bold text-size-18\">12,2 kg</div></div><div class=\"arrow left-10 right-10 width-auto bg-primary rotate-0 height-2 bottom-0 \"></div></li><li class=\"DataTab tab bg-lighter opacity-50 border border-color-transparent padding-y-5 cursor-pointer\" data-tabkey=\"tab3\"><div><div>Ø - Range</div><div class=\"text-bold text-size-18\">32,8 l/100</div></div><div class=\"arrow left-10 right-10 width-auto bg-primary rotate-0 height-2 bottom-0 \"></div></li><li class=\"DataTab tab bg-lighter opacity-50 border border-color-transparent padding-y-5 cursor-pointer border-right-none\" data-tabkey=\"tab4\"><div><div>Ø - Route type</div><div class=\"text-bold text-size-18\"><div><span class=\"text-color-light\">A</span><span class=\"text-color-light\">B</span><span class=\"text-color-light\">C</span><span class=\"text-color-light\">D</span><span class=\"text-color-warning\">E</span><span class=\"text-color-light\">F</span></div></div></div><div class=\"arrow left-10 right-10 width-auto bg-primary rotate-0 height-2 bottom-0 \"></div></li></ul></div><div class=\"tab-content padding-left-0 padding-right-0\" role=\"tabpanel\"><div><div class=\"padding-left-15 padding-right-15\"><div class=\"height-200 max-width-500\"><div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\"><div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 200px; max-width: 500px;\"><svg class=\"recharts-surface\" width=\"500\" height=\"200\" viewBox=\"0 0 500 200\" style=\"width: 100%; height: 100%;\"><title></title><desc></desc><defs><clipPath id=\"recharts1-clip\"><rect x=\"15\" y=\"15\" height=\"140\" width=\"470\"></rect></clipPath></defs><g class=\"recharts-cartesian-grid\"><g class=\"recharts-cartesian-grid-horizontal\"><line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"470\" height=\"140\" x1=\"15\" y1=\"155\" x2=\"485\" y2=\"155\"></line><line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"470\" height=\"140\" x1=\"15\" y1=\"120\" x2=\"485\" y2=\"120\"></line><line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"470\" height=\"140\" x1=\"15\" y1=\"85\" x2=\"485\" y2=\"85\"></line><line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"470\" height=\"140\" x1=\"15\" y1=\"50\" x2=\"485\" y2=\"50\"></line><line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"470\" height=\"140\" x1=\"15\" y1=\"15\" x2=\"485\" y2=\"15\"></line></g></g><g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\"><line orientation=\"bottom\" width=\"470\" height=\"30\" x=\"15\" y=\"155\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"15\" y1=\"155\" x2=\"485\" y2=\"155\"></line><g class=\"recharts-cartesian-axis-ticks\"><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"470\" height=\"30\" x=\"15\" y=\"155\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"45\" y1=\"161\" x2=\"45\" y2=\"155\"></line><text orientation=\"bottom\" width=\"470\" height=\"30\" stroke=\"none\" x=\"45\" y=\"163\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"45\" dy=\"0.71em\">Page A</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"470\" height=\"30\" x=\"15\" y=\"155\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"113.33333333333333\" y1=\"161\" x2=\"113.33333333333333\" y2=\"155\"></line><text orientation=\"bottom\" width=\"470\" height=\"30\" stroke=\"none\" x=\"113.33333333333333\" y=\"163\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"113.33333333333333\" dy=\"0.71em\">Page B</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"470\" height=\"30\" x=\"15\" y=\"155\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"181.66666666666666\" y1=\"161\" x2=\"181.66666666666666\" y2=\"155\"></line><text orientation=\"bottom\" width=\"470\" height=\"30\" stroke=\"none\" x=\"181.66666666666666\" y=\"163\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"181.66666666666666\" dy=\"0.71em\">Page C</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"470\" height=\"30\" x=\"15\" y=\"155\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"250\" y1=\"161\" x2=\"250\" y2=\"155\"></line><text orientation=\"bottom\" width=\"470\" height=\"30\" stroke=\"none\" x=\"250\" y=\"163\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"250\" dy=\"0.71em\">Page D</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"470\" height=\"30\" x=\"15\" y=\"155\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"318.3333333333333\" y1=\"161\" x2=\"318.3333333333333\" y2=\"155\"></line><text orientation=\"bottom\" width=\"470\" height=\"30\" stroke=\"none\" x=\"318.3333333333333\" y=\"163\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"318.3333333333333\" dy=\"0.71em\">Page E</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"470\" height=\"30\" x=\"15\" y=\"155\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"386.66666666666663\" y1=\"161\" x2=\"386.66666666666663\" y2=\"155\"></line><text orientation=\"bottom\" width=\"470\" height=\"30\" stroke=\"none\" x=\"386.66666666666663\" y=\"163\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"386.66666666666663\" dy=\"0.71em\">Page F</tspan></text></g><g class=\"recharts-layer recharts-cartesian-axis-tick\"><line orientation=\"bottom\" width=\"470\" height=\"30\" x=\"15\" y=\"155\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"455\" y1=\"161\" x2=\"455\" y2=\"155\"></line><text orientation=\"bottom\" width=\"470\" height=\"30\" stroke=\"none\" x=\"455\" y=\"163\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\"><tspan x=\"455\" dy=\"0.71em\">Page G</tspan></text></g></g></g><g class=\"recharts-layer recharts-line\"><path stroke=\"#67abc5 \" stroke-width=\"1\" fill=\"none\" width=\"470\" height=\"140\" class=\"recharts-curve recharts-line-curve\" stroke-dasharray=\"0px 446.5513916015625px\" d=\"M45,77.222C67.778,48.25,90.556,19.278,113.333,19.278C136.111,19.278,158.889,19.278,181.667,19.278C204.444,19.278,227.222,31.204,250,38.333C272.778,45.463,295.556,62.056,318.333,62.056C341.111,62.056,363.889,38.333,386.667,38.333C409.444,38.333,432.222,42.611,455,46.889\"></path></g></svg><div tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(15px, 15px);\"><div class=\"recharts-default-tooltip\" style=\"margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;\"><p class=\"recharts-tooltip-label\" style=\"margin: 0px;\"></p></div></div></div></div></div></div><hr><div class=\"padding-left-15 padding-right-15\"><span class=\"\">The padding can be changes on demand by passing in util classes via \"tabContentClassName\" prop.</span></div></div></div></div></div></div></div></div><button type=\"button\" class=\"btn btn-default btn-toggle btn-component\" tabindex=\"0\">Hide last tab</button></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "/* eslint-disable max-len */\nimport React, { useState } from 'react';\nimport faker from 'faker';\n\nimport ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';\nimport DataTabs from '@rio-cloud/rio-uikit/DataTabs';\nimport DataTab from '@rio-cloud/rio-uikit/DataTab';\nimport ToggleButton from '@rio-cloud/rio-uikit/ToggleButton';\nimport LineChart from '@rio-cloud/rio-uikit/components/charts/LineChart';\nimport Line from '@rio-cloud/rio-uikit/components/charts/Line';\nimport { dummyText } from '../../../utils/data';\n\ntype DummyItem = { name: string; value: number };\n\nconst getData = (): DummyItem[] =>\n    ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'].map(item => ({\n        name: item,\n        value: faker.random.arrayElement([3200, 3000, 2000, 2780, 1890, 2390, 3490]),\n    }));\n\nconst DummyContent = ({ tabKey }: { tabKey: string }) => (\n    <div>\n        <div className='padding-left-15 padding-right-15'>\n            {tabKey === 'tab3' && dummyText}\n            <div className='height-200 max-width-500'>\n                <LineChart\n                    data={getData()}\n                    dataKey={(entry: DummyItem) => entry.name}\n                    xAxisOptions={{ padding: { left: 30, right: 30 } }}\n                    showGrid\n                    gridOptions={{ vertical: false, strokeDasharray: '0', stroke: 'gray-lighter' }}\n                    lines={[<Line key='line' dataKey={(entry: DummyItem) => `${entry.value}`} />]}\n                />\n            </div>\n        </div>\n        <hr />\n        <div className='padding-left-15 padding-right-15'>\n            <span className={tabKey === 'tab2' ? 'text-medium text-color-darker' : ''}>\n                The padding can be changes on demand by passing in util classes via \"tabContentClassName\" prop.\n            </span>\n        </div>\n    </div>\n);\n\nexport default () => {\n    const [tabKey, setTabKey] = useState('tab1');\n    const [hideLastTab, setHideLastTab] = useState(false);\n\n    const handleHideLastTab = () => {\n        setHideLastTab(!hideLastTab);\n        setTabKey('tab1');\n    };\n\n    return (\n        <>\n            <ExpanderPanel\n                className='shadow-default'\n                bodyClassName='padding-0'\n                title='DataTabs inside an ExpanderPanel with one common tab content'\n                bsStyle='default'\n                open\n            >\n                <DataTabs\n                    activeKey={tabKey}\n                    bordered={false}\n                    disableTransition={false}\n                    commonTabContent={<DummyContent tabKey={tabKey} />}\n                    onSelectTab={newTabKey => setTabKey(newTabKey)}\n                    tabsWrapperClassName='bg-white'\n                    tabClassName='bg-lighter opacity-50 border border-color-transparent padding-y-5'\n                    tabHoverClassName='bg-lightest opacity-100 border border-color-transparent padding-y-5'\n                    tabActiveClassName='bg-white text-color-primary opacity-100 margin-bottom--1 border border-top-none border-bottom-none margin-top-1 padding-y-5'\n                    tabContentClassName='padding-left-0 padding-right-0'\n                    arrowClassName='left-10 right-10 width-auto bg-primary rotate-0 height-2 bottom-0'\n                >\n                    <DataTab\n                        tabKey='tab1'\n                        className='border-left-none'\n                        title={<Title text='Ø - Consumption' value='13,5 km/l' />}\n                    />\n                    <DataTab tabKey='tab2' title={<Title text='Ø - C02 Emission' value='12,2 kg' />} />\n                    <DataTab tabKey='tab3' title={<Title text='Ø - Range' value='32,8 l/100' />} />\n                    {!hideLastTab && (\n                        <DataTab\n                            tabKey='tab4'\n                            className='border-right-none'\n                            title={<Title text='Ø - Route type' value={<RouteType />} />}\n                        />\n                    )}\n                </DataTabs>\n            </ExpanderPanel>\n            <ToggleButton onClick={handleHideLastTab}>Hide last tab</ToggleButton>\n        </>\n    );\n};\n\nexport const Title = ({ text, value }: { text: string; value: React.ReactNode }) => (\n    <div>\n        <div>{text}</div>\n        <div className='text-bold text-size-18'>{value}</div>\n    </div>\n);\n\nexport const RouteType = () => (\n    <div>\n        <span className='text-color-light'>A</span>\n        <span className='text-color-light'>B</span>\n        <span className='text-color-light'>C</span>\n        <span className='text-color-light'>D</span>\n        <span className='text-color-warning'>E</span>\n        <span className='text-color-light'>F</span>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"expander-panel panel panel-default shadow-default\" aria-label=\"expander panel\">\n    <div class=\"panel-heading open\" aria-label=\"panel heading\">\n        <span class=\"title\">DataTabs inside an ExpanderPanel with one common tab content</span>\n        <span class=\"expander-icon rioglyph rioglyph-chevron-down\">\n        </span>\n    </div>\n    <div class=\"collapse display-block width-100pct\" style=\"opacity: 1; height: auto;\">\n        <div>\n            <div class=\"panel-body padding-0\">\n                <div class=\"DataTabsContainer DataTabs-horizontal\">\n                    <div class=\"DataTabsWrapper bg-white\">\n                        <ul class=\"DataTabs\" role=\"tabList\">\n                            <li class=\"DataTab tab active bg-white text-color-primary opacity-100 margin-bottom--1 border border-top-none border-bottom-none margin-top-1 padding-y-5 border-left-none\" data-tabkey=\"tab1\">\n                                <div>\n                                    <div>Ø - Consumption</div>\n                                    <div class=\"text-bold text-size-18\">13,5 km/l</div>\n                                </div>\n                                <div class=\"arrow left-10 right-10 width-auto bg-primary rotate-0 height-2 bottom-0 in\">\n                                </div>\n                            </li>\n                            <li class=\"DataTab tab bg-lighter opacity-50 border border-color-transparent padding-y-5 cursor-pointer\" data-tabkey=\"tab2\">\n                                <div>\n                                    <div>Ø - C02 Emission</div>\n                                    <div class=\"text-bold text-size-18\">12,2 kg</div>\n                                </div>\n                                <div class=\"arrow left-10 right-10 width-auto bg-primary rotate-0 height-2 bottom-0 \">\n                                </div>\n                            </li>\n                            <li class=\"DataTab tab bg-lighter opacity-50 border border-color-transparent padding-y-5 cursor-pointer\" data-tabkey=\"tab3\">\n                                <div>\n                                    <div>Ø - Range</div>\n                                    <div class=\"text-bold text-size-18\">32,8 l/100</div>\n                                </div>\n                                <div class=\"arrow left-10 right-10 width-auto bg-primary rotate-0 height-2 bottom-0 \">\n                                </div>\n                            </li>\n                            <li class=\"DataTab tab bg-lighter opacity-50 border border-color-transparent padding-y-5 cursor-pointer border-right-none\" data-tabkey=\"tab4\">\n                                <div>\n                                    <div>Ø - Route type</div>\n                                    <div class=\"text-bold text-size-18\">\n                                        <div>\n                                            <span class=\"text-color-light\">A</span>\n                                            <span class=\"text-color-light\">B</span>\n                                            <span class=\"text-color-light\">C</span>\n                                            <span class=\"text-color-light\">D</span>\n                                            <span class=\"text-color-warning\">E</span>\n                                            <span class=\"text-color-light\">F</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"arrow left-10 right-10 width-auto bg-primary rotate-0 height-2 bottom-0 \">\n                                </div>\n                            </li>\n                        </ul>\n                    </div>\n                    <div class=\"tab-content padding-left-0 padding-right-0\" role=\"tabpanel\">\n                        <div>\n                            <div class=\"padding-left-15 padding-right-15\">\n                                <div class=\"height-200 max-width-500\">\n                                    <div class=\"recharts-responsive-container\" style=\"width: 100%; height: 100%; min-width: 0px;\">\n                                        <div class=\"recharts-wrapper\" style=\"position: relative; cursor: default; width: 100%; height: 100%; max-height: 200px; max-width: 500px;\">\n                                            <svg class=\"recharts-surface\" width=\"500\" height=\"200\" viewBox=\"0 0 500 200\" style=\"width: 100%; height: 100%;\">\n                                                <title>\n                                                </title>\n                                                <desc>\n                                                </desc>\n                                                <defs>\n                                                    <clipPath id=\"recharts1-clip\">\n                                                        <rect x=\"15\" y=\"15\" height=\"140\" width=\"470\">\n                                                        </rect>\n                                                    </clipPath>\n                                                </defs>\n                                                <g class=\"recharts-cartesian-grid\">\n                                                    <g class=\"recharts-cartesian-grid-horizontal\">\n                                                        <line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"470\" height=\"140\" x1=\"15\" y1=\"155\" x2=\"485\" y2=\"155\">\n                                                        </line>\n                                                        <line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"470\" height=\"140\" x1=\"15\" y1=\"120\" x2=\"485\" y2=\"120\">\n                                                        </line>\n                                                        <line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"470\" height=\"140\" x1=\"15\" y1=\"85\" x2=\"485\" y2=\"85\">\n                                                        </line>\n                                                        <line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"470\" height=\"140\" x1=\"15\" y1=\"50\" x2=\"485\" y2=\"50\">\n                                                        </line>\n                                                        <line stroke-dasharray=\"0\" stroke=\"#e5ebf0 \" fill=\"none\" x=\"15\" y=\"15\" width=\"470\" height=\"140\" x1=\"15\" y1=\"15\" x2=\"485\" y2=\"15\">\n                                                        </line>\n                                                    </g>\n                                                </g>\n                                                <g class=\"recharts-layer recharts-cartesian-axis recharts-xAxis xAxis\">\n                                                    <line orientation=\"bottom\" width=\"470\" height=\"30\" x=\"15\" y=\"155\" class=\"recharts-cartesian-axis-line\" stroke=\"#666\" fill=\"none\" x1=\"15\" y1=\"155\" x2=\"485\" y2=\"155\">\n                                                    </line>\n                                                    <g class=\"recharts-cartesian-axis-ticks\">\n                                                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                                                            <line orientation=\"bottom\" width=\"470\" height=\"30\" x=\"15\" y=\"155\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"45\" y1=\"161\" x2=\"45\" y2=\"155\">\n                                                            </line>\n                                                            <text orientation=\"bottom\" width=\"470\" height=\"30\" stroke=\"none\" x=\"45\" y=\"163\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                                                <tspan x=\"45\" dy=\"0.71em\">Page A</tspan>\n                                                            </text>\n                                                        </g>\n                                                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                                                            <line orientation=\"bottom\" width=\"470\" height=\"30\" x=\"15\" y=\"155\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"113.33333333333333\" y1=\"161\" x2=\"113.33333333333333\" y2=\"155\">\n                                                            </line>\n                                                            <text orientation=\"bottom\" width=\"470\" height=\"30\" stroke=\"none\" x=\"113.33333333333333\" y=\"163\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                                                <tspan x=\"113.33333333333333\" dy=\"0.71em\">Page B</tspan>\n                                                            </text>\n                                                        </g>\n                                                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                                                            <line orientation=\"bottom\" width=\"470\" height=\"30\" x=\"15\" y=\"155\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"181.66666666666666\" y1=\"161\" x2=\"181.66666666666666\" y2=\"155\">\n                                                            </line>\n                                                            <text orientation=\"bottom\" width=\"470\" height=\"30\" stroke=\"none\" x=\"181.66666666666666\" y=\"163\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                                                <tspan x=\"181.66666666666666\" dy=\"0.71em\">Page C</tspan>\n                                                            </text>\n                                                        </g>\n                                                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                                                            <line orientation=\"bottom\" width=\"470\" height=\"30\" x=\"15\" y=\"155\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"250\" y1=\"161\" x2=\"250\" y2=\"155\">\n                                                            </line>\n                                                            <text orientation=\"bottom\" width=\"470\" height=\"30\" stroke=\"none\" x=\"250\" y=\"163\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                                                <tspan x=\"250\" dy=\"0.71em\">Page D</tspan>\n                                                            </text>\n                                                        </g>\n                                                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                                                            <line orientation=\"bottom\" width=\"470\" height=\"30\" x=\"15\" y=\"155\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"318.3333333333333\" y1=\"161\" x2=\"318.3333333333333\" y2=\"155\">\n                                                            </line>\n                                                            <text orientation=\"bottom\" width=\"470\" height=\"30\" stroke=\"none\" x=\"318.3333333333333\" y=\"163\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                                                <tspan x=\"318.3333333333333\" dy=\"0.71em\">Page E</tspan>\n                                                            </text>\n                                                        </g>\n                                                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                                                            <line orientation=\"bottom\" width=\"470\" height=\"30\" x=\"15\" y=\"155\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"386.66666666666663\" y1=\"161\" x2=\"386.66666666666663\" y2=\"155\">\n                                                            </line>\n                                                            <text orientation=\"bottom\" width=\"470\" height=\"30\" stroke=\"none\" x=\"386.66666666666663\" y=\"163\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                                                <tspan x=\"386.66666666666663\" dy=\"0.71em\">Page F</tspan>\n                                                            </text>\n                                                        </g>\n                                                        <g class=\"recharts-layer recharts-cartesian-axis-tick\">\n                                                            <line orientation=\"bottom\" width=\"470\" height=\"30\" x=\"15\" y=\"155\" class=\"recharts-cartesian-axis-tick-line\" stroke=\"#666\" fill=\"none\" x1=\"455\" y1=\"161\" x2=\"455\" y2=\"155\">\n                                                            </line>\n                                                            <text orientation=\"bottom\" width=\"470\" height=\"30\" stroke=\"none\" x=\"455\" y=\"163\" class=\"recharts-text recharts-cartesian-axis-tick-value\" text-anchor=\"middle\" fill=\"#666\">\n                                                                <tspan x=\"455\" dy=\"0.71em\">Page G</tspan>\n                                                            </text>\n                                                        </g>\n                                                    </g>\n                                                </g>\n                                                <g class=\"recharts-layer recharts-line\">\n                                                    <path stroke=\"#67abc5 \" stroke-width=\"1\" fill=\"none\" width=\"470\" height=\"140\" class=\"recharts-curve recharts-line-curve\" stroke-dasharray=\"446.5513916015625px 0px\" d=\"M45,77.222C67.778,48.25,90.556,19.278,113.333,19.278C136.111,19.278,158.889,19.278,181.667,19.278C204.444,19.278,227.222,31.204,250,38.333C272.778,45.463,295.556,62.056,318.333,62.056C341.111,62.056,363.889,38.333,386.667,38.333C409.444,38.333,432.222,42.611,455,46.889\">\n                                                    </path>\n                                                    <g class=\"recharts-layer\">\n                                                    </g>\n                                                    <g class=\"recharts-layer recharts-line-dots\">\n                                                        <circle r=\"3\" stroke=\"#67abc5 \" stroke-width=\"1\" fill=\"#fff\" width=\"470\" height=\"140\" cx=\"45\" cy=\"77.22222222222221\" class=\"recharts-dot recharts-line-dot\">\n                                                        </circle>\n                                                        <circle r=\"3\" stroke=\"#67abc5 \" stroke-width=\"1\" fill=\"#fff\" width=\"470\" height=\"140\" cx=\"113.33333333333333\" cy=\"19.27777777777778\" class=\"recharts-dot recharts-line-dot\">\n                                                        </circle>\n                                                        <circle r=\"3\" stroke=\"#67abc5 \" stroke-width=\"1\" fill=\"#fff\" width=\"470\" height=\"140\" cx=\"181.66666666666666\" cy=\"19.27777777777778\" class=\"recharts-dot recharts-line-dot\">\n                                                        </circle>\n                                                        <circle r=\"3\" stroke=\"#67abc5 \" stroke-width=\"1\" fill=\"#fff\" width=\"470\" height=\"140\" cx=\"250\" cy=\"38.33333333333333\" class=\"recharts-dot recharts-line-dot\">\n                                                        </circle>\n                                                        <circle r=\"3\" stroke=\"#67abc5 \" stroke-width=\"1\" fill=\"#fff\" width=\"470\" height=\"140\" cx=\"318.3333333333333\" cy=\"62.05555555555556\" class=\"recharts-dot recharts-line-dot\">\n                                                        </circle>\n                                                        <circle r=\"3\" stroke=\"#67abc5 \" stroke-width=\"1\" fill=\"#fff\" width=\"470\" height=\"140\" cx=\"386.66666666666663\" cy=\"38.33333333333333\" class=\"recharts-dot recharts-line-dot\">\n                                                        </circle>\n                                                        <circle r=\"3\" stroke=\"#67abc5 \" stroke-width=\"1\" fill=\"#fff\" width=\"470\" height=\"140\" cx=\"455\" cy=\"46.888888888888886\" class=\"recharts-dot recharts-line-dot\">\n                                                        </circle>\n                                                    </g>\n                                                </g>\n                                            </svg>\n                                            <div tabindex=\"-1\" class=\"recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom\" style=\"visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(15px, 15px);\">\n                                                <div class=\"recharts-default-tooltip\" style=\"margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;\">\n                                                    <p class=\"recharts-tooltip-label\" style=\"margin: 0px;\">\n                                                    </p>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <hr>\n                            <div class=\"padding-left-15 padding-right-15\">\n                                <span class=\"\">The padding can be changes on demand by passing in util classes via \"tabContentClassName\" prop.</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n<button type=\"button\" class=\"btn btn-default btn-toggle btn-component\" tabindex=\"0\">Hide last tab</button>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "DataTabs",
+                  "rows": [
+                    {
+                      "name": "activeKey",
+                      "type": "String",
+                      "default": "\"\"",
+                      "description": "Sets key and id."
+                    },
+                    {
+                      "name": "onSelectTab",
+                      "type": "Boolean",
+                      "default": "() => {}",
+                      "description": "Called when a tab is being activated."
+                    },
+                    {
+                      "name": "commonTabContent",
+                      "type": "Node",
+                      "default": "",
+                      "description": "Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component."
+                    },
+                    {
+                      "name": "vertical",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Whether the layout should be vertical."
+                    },
+                    {
+                      "name": "bordered",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Whether the component should add a border."
+                    },
+                    {
+                      "name": "disableTransition",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    },
+                    {
+                      "name": "tabContentClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the tabContent wrapper element."
+                    },
+                    {
+                      "name": "tabsWrapperClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the tabs wrapper element."
+                    },
+                    {
+                      "name": "arrowClassName",
+                      "type": "String",
+                      "default": "bg-highlight-dark",
+                      "description": "Additional classes to be set on the arrow."
+                    },
+                    {
+                      "name": "tabClassName",
+                      "type": "String",
+                      "default": "bg-white",
+                      "description": "Additional classes to be set on the tab element."
+                    },
+                    {
+                      "name": "tabHoverClassName",
+                      "type": "String",
+                      "default": "text-color-darkest",
+                      "description": "Utility hover classes to be set on the tab element."
+                    },
+                    {
+                      "name": "tabActiveClassName",
+                      "type": "String",
+                      "default": "text-color-darkest",
+                      "description": "Utility active classes to be set on the tab element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "DataTab",
+                  "rows": [
+                    {
+                      "name": "tabKey",
+                      "type": "String",
+                      "default": "",
+                      "description": "Used to identify the tab."
+                    },
+                    {
+                      "name": "title",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The content for the tab."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 5",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"btn-group margin-bottom-15\"><button type=\"button\" class=\"btn btn-default active btn-component margin-top-15\" tabindex=\"0\">Data Set 1</button><button type=\"button\" class=\"btn btn-default btn-component margin-top-15\" tabindex=\"0\">Data Set 2</button></div><div class=\"DataTabsContainer DataTabs-horizontal\"><div class=\"DataTabsWrapper \"><ul class=\"DataTabs\" role=\"tabList\"><li class=\"DataTab tab active bg-highlight-dark text-color-white\" data-tabkey=\"tab1\"><div><div>Ø - Consumption</div><div class=\"text-bold text-size-18\">13,5 km/l</div></div><div class=\"arrow bg-highlight-dark border-color-transparent in\"></div></li><li class=\"DataTab tab cursor-pointer\" data-tabkey=\"tab2\"><div><div>Ø - C02 Emission</div><div class=\"text-bold text-size-18\">12,2 kg</div></div><div class=\"arrow bg-highlight-dark border-color-transparent \"></div></li><li class=\"DataTab tab cursor-pointer\" data-tabkey=\"tab3\"><div><div>Ø - Range</div><div class=\"text-bold text-size-18\">32,8 l/100</div></div><div class=\"arrow bg-highlight-dark border-color-transparent \"></div></li></ul></div><div class=\"tab-content \" role=\"tabpanel\"><div class=\"padding-left-15 padding-right-15\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "/* eslint-disable max-len */\nimport React, { useState } from 'react';\n\nimport DataTabs from '@rio-cloud/rio-uikit/DataTabs';\nimport DataTab from '@rio-cloud/rio-uikit/DataTab';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport { dummyText, dummyTextExtraLong, dummyTextLong, dummyTextShort } from '../../../utils/data';\n\ntype DummyTab = { id: string; title: React.ReactNode };\n\nexport const Title = ({ text, value }: { text: string; value: React.ReactNode }) => (\n    <div>\n        <div>{text}</div>\n        <div className='text-bold text-size-18'>{value}</div>\n    </div>\n);\n\nconst DummyContent = ({ tabKey }: { tabKey: string }) => (\n    <div className='padding-left-15 padding-right-15'>\n        {tabKey === 'tab1' && dummyText}\n        {tabKey === 'tab2' && dummyTextLong}\n        {tabKey === 'tab3' && dummyTextShort}\n        {tabKey === 'tab4' && dummyTextExtraLong}\n    </div>\n);\n\nconst MyDataTabs = ({\n    tabs = [],\n    activeTab,\n    onTabChange,\n}: {\n    tabs: DummyTab[];\n    activeTab: string;\n    onTabChange: (newTab: string) => void;\n}) => {\n    return (\n        <DataTabs\n            activeKey={activeTab}\n            bordered={false}\n            disableTransition={false}\n            commonTabContent={<DummyContent tabKey={activeTab} />}\n            onSelectTab={onTabChange}\n        >\n            {tabs.map(item => (\n                <DataTab key={item.id} tabKey={item.id} title={item.title} />\n            ))}\n        </DataTabs>\n    );\n};\n\nconst tabSetOne: DummyTab[] = [\n    {\n        id: 'tab1',\n        title: <Title text='Ø - Consumption' value='13,5 km/l' />,\n    },\n    {\n        id: 'tab2',\n        title: <Title text='Ø - C02 Emission' value='12,2 kg' />,\n    },\n    {\n        id: 'tab3',\n        title: <Title text='Ø - Range' value='32,8 l/100' />,\n    },\n    {\n        id: 'tab4',\n        title: <Title text='Ø - Route type' value='Foobar' />,\n    },\n];\n\nconst tabSetTwo: DummyTab[] = [\n    {\n        id: 'tab1',\n        title: <Title text='Ø - Consumption' value='13,5 km/l' />,\n    },\n    {\n        id: 'tab2',\n        title: <Title text='Ø - C02 Emission' value='12,2 kg' />,\n    },\n    {\n        id: 'tab3',\n        title: <Title text='Ø - Range' value='32,8 l/100' />,\n    },\n];\n\nexport default () => {\n    const [tabKey, setTabKey] = useState('tab1');\n    const [activeDataSet, setActiveDataSet] = useState(1);\n\n    const handleSetDataSet = (id: number) => {\n        setActiveDataSet(id);\n        setTabKey('tab1');\n    };\n\n    return (\n        <>\n            <div className='btn-group margin-bottom-15'>\n                <Button className='margin-top-15' onClick={() => handleSetDataSet(1)} active={activeDataSet === 1}>\n                    Data Set 1\n                </Button>\n                <Button className='margin-top-15' onClick={() => handleSetDataSet(2)} active={activeDataSet === 2}>\n                    Data Set 2\n                </Button>\n            </div>\n            <MyDataTabs\n                activeTab={tabKey}\n                tabs={activeDataSet === 1 ? tabSetTwo : tabSetOne}\n                onTabChange={(newTabKey: string) => setTabKey(newTabKey)}\n            />\n        </>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"btn-group margin-bottom-15\">\n    <button type=\"button\" class=\"btn btn-default active btn-component margin-top-15\" tabindex=\"0\">Data Set 1</button>\n    <button type=\"button\" class=\"btn btn-default btn-component margin-top-15\" tabindex=\"0\">Data Set 2</button>\n</div>\n<div class=\"DataTabsContainer DataTabs-horizontal\">\n    <div class=\"DataTabsWrapper \">\n        <ul class=\"DataTabs\" role=\"tabList\">\n            <li class=\"DataTab tab active bg-highlight-dark text-color-white\" data-tabkey=\"tab1\">\n                <div>\n                    <div>Ø - Consumption</div>\n                    <div class=\"text-bold text-size-18\">13,5 km/l</div>\n                </div>\n                <div class=\"arrow bg-highlight-dark border-color-transparent in\">\n                </div>\n            </li>\n            <li class=\"DataTab tab cursor-pointer\" data-tabkey=\"tab2\">\n                <div>\n                    <div>Ø - C02 Emission</div>\n                    <div class=\"text-bold text-size-18\">12,2 kg</div>\n                </div>\n                <div class=\"arrow bg-highlight-dark border-color-transparent \">\n                </div>\n            </li>\n            <li class=\"DataTab tab cursor-pointer\" data-tabkey=\"tab3\">\n                <div>\n                    <div>Ø - Range</div>\n                    <div class=\"text-bold text-size-18\">32,8 l/100</div>\n                </div>\n                <div class=\"arrow bg-highlight-dark border-color-transparent \">\n                </div>\n            </li>\n        </ul>\n    </div>\n    <div class=\"tab-content \" role=\"tabpanel\">\n        <div class=\"padding-left-15 padding-right-15\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "DataTabs",
+                  "rows": [
+                    {
+                      "name": "activeKey",
+                      "type": "String",
+                      "default": "\"\"",
+                      "description": "Sets key and id."
+                    },
+                    {
+                      "name": "onSelectTab",
+                      "type": "Boolean",
+                      "default": "() => {}",
+                      "description": "Called when a tab is being activated."
+                    },
+                    {
+                      "name": "commonTabContent",
+                      "type": "Node",
+                      "default": "",
+                      "description": "Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component."
+                    },
+                    {
+                      "name": "vertical",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Whether the layout should be vertical."
+                    },
+                    {
+                      "name": "bordered",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Whether the component should add a border."
+                    },
+                    {
+                      "name": "disableTransition",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    },
+                    {
+                      "name": "tabContentClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the tabContent wrapper element."
+                    },
+                    {
+                      "name": "tabsWrapperClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the tabs wrapper element."
+                    },
+                    {
+                      "name": "arrowClassName",
+                      "type": "String",
+                      "default": "bg-highlight-dark",
+                      "description": "Additional classes to be set on the arrow."
+                    },
+                    {
+                      "name": "tabClassName",
+                      "type": "String",
+                      "default": "bg-white",
+                      "description": "Additional classes to be set on the tab element."
+                    },
+                    {
+                      "name": "tabHoverClassName",
+                      "type": "String",
+                      "default": "text-color-darkest",
+                      "description": "Utility hover classes to be set on the tab element."
+                    },
+                    {
+                      "name": "tabActiveClassName",
+                      "type": "String",
+                      "default": "text-color-darkest",
+                      "description": "Utility active classes to be set on the tab element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "DataTab",
+                  "rows": [
+                    {
+                      "name": "tabKey",
+                      "type": "String",
+                      "default": "",
+                      "description": "Used to identify the tab."
+                    },
+                    {
+                      "name": "title",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The content for the tab."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}