@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,314 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:43.540Z",
+    "source": "https://uikit.developers.rio.cloud/#components/statsWidgets",
+    "category": "Components",
+    "section": "Content",
+    "slug": "components/statswidgets",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "8d298c540887d920c3f129b419021dfa47d6a5649580a8470935195f201b0865"
+  },
+  "title": "StatsWidgets",
+  "lead": null,
+  "content": [
+    {
+      "heading": "StatsWidgets",
+      "body": "StatsWidget with another body component and additional footer\n\nInteractive StatsWidget with filter option",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"StatsWidget-wrapper margin-bottom-20\"><div class=\"StatsWidget\"><div class=\"StatsWidget-header\">Fleet</div><div class=\"StatsWidget-body\"><div class=\"StatsWidgetNumber\"><div class=\"StatsWidgetNumber-counter\"><div class=\"StatsWidgetNumber-value\">23</div></div><div class=\"StatsWidgetNumber-label\">Trucks</div></div><div class=\"StatsWidget-body-column-spacer\"></div><div class=\"StatsWidgetNumber\"><div class=\"StatsWidgetNumber-counter\"><div class=\"StatsWidgetNumber-value\">14</div></div><div class=\"StatsWidgetNumber-label\">Trailer</div></div><div class=\"StatsWidget-body-column-spacer\"></div><div class=\"StatsWidgetNumber\"><div class=\"StatsWidgetNumber-counter\"><div class=\"StatsWidgetNumber-value\">111</div></div><div class=\"StatsWidgetNumber-label\">Driver</div></div><div class=\"StatsWidget-body-column-spacer\"></div></div></div><div class=\"StatsWidget\"><div class=\"StatsWidget-header\">Notifications</div><div class=\"StatsWidget-body\"><div class=\"StatsWidgetNumber text-color-danger\"><div class=\"StatsWidgetNumber-counter\"><div class=\"StatsWidgetNumber-value\">45</div></div><div class=\"StatsWidgetNumber-label\">Exceptions</div></div><div class=\"StatsWidget-body-column-spacer\"></div><div class=\"StatsWidgetNumber text-color-warning\"><div class=\"StatsWidgetNumber-counter\"><div class=\"StatsWidgetNumber-value\">144</div></div><div class=\"StatsWidgetNumber-label\">Warnings</div></div></div></div><div class=\"StatsWidget\"><span class=\"bg-light hover-bg-highlight display-flex justify-content-center align-items-center padding-2 rounded-circle position-absolute top-15 right-15 display-block height-20 width-20 cursor-pointer\"><span class=\"rioglyph rioglyph-revert text-color-white text-size-12\"></span></span><div class=\"StatsWidget-header\">Activity</div><div class=\"StatsWidget-body\"><div class=\"StatsWidgetNumber cursor-pointer text-color-status-available\"><div class=\"StatsWidgetNumber-counter\"><div class=\"StatsWidgetNumber-value\">15</div><div class=\"StatsWidgetNumber-total\">30</div></div><div class=\"StatsWidgetNumber-label\">Availability</div></div><div class=\"StatsWidget-body-column-spacer\"></div><div class=\"StatsWidgetNumber text-color-status-driving\"><div class=\"StatsWidgetNumber-counter\"><div class=\"StatsWidgetNumber-value\">12</div></div><div class=\"StatsWidgetNumber-label\">Driving</div></div><div class=\"StatsWidget-body-column-spacer\"></div><div class=\"StatsWidgetNumber text-color-status-working\"><div class=\"StatsWidgetNumber-counter\"><div class=\"StatsWidgetNumber-value\">12</div></div><div class=\"StatsWidgetNumber-label\">Working</div></div><div class=\"StatsWidget-body-column-spacer\"></div><div class=\"StatsWidgetNumber text-color-status-resting\"><div class=\"StatsWidgetNumber-counter\"><div class=\"StatsWidgetNumber-value\">9</div></div><div class=\"StatsWidgetNumber-label\">Resting</div></div></div></div></div><div class=\"StatsWidget-wrapper\"><div class=\"StatsWidget\"><div class=\"StatsWidget-header\">Full width widget</div><div class=\"StatsWidget-body full-width\"><div class=\"StatsWidget-body-column-spacer invisible\"></div><div class=\"StatsWidgetNumber\"><div class=\"StatsWidgetNumber-counter\"><div class=\"StatsWidgetNumber-value\">23</div></div><div class=\"StatsWidgetNumber-label\">Trucks</div></div><div class=\"StatsWidget-body-column-spacer\"></div><div class=\"StatsWidgetNumber\"><div class=\"StatsWidgetNumber-counter\"><div class=\"StatsWidgetNumber-value\">14</div></div><div class=\"StatsWidgetNumber-label\">Trailer</div></div><div class=\"StatsWidget-body-column-spacer\"></div><div class=\"StatsWidgetNumber\"><div class=\"StatsWidgetNumber-counter\"><div class=\"StatsWidgetNumber-value\">111</div></div><div class=\"StatsWidgetNumber-label\">Driver</div></div><div class=\"StatsWidget-body-column-spacer invisible\"></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';\nimport StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';\nimport StatsWidgetNumber from '@rio-cloud/rio-uikit/StatsWidgetNumber';\nimport StatsWidgetSpacer from '@rio-cloud/rio-uikit/StatsWidgetSpacer';\n\nexport default () => (\n    <>\n        <StatsWidgets className='margin-bottom-20'>\n            <StatsWidget>\n                <StatsWidget.Header>Fleet</StatsWidget.Header>\n                <StatsWidget.Body>\n                    <StatsWidgetNumber value='23' label='Trucks' />\n                    <StatsWidgetSpacer />\n                    <StatsWidgetNumber value='14' label='Trailer' />\n                    <StatsWidgetSpacer />\n                    <StatsWidgetNumber value='111' label='Driver' />\n                    <StatsWidgetSpacer />\n                </StatsWidget.Body>\n            </StatsWidget>\n\n            <StatsWidget>\n                <StatsWidget.Header>Notifications</StatsWidget.Header>\n                <StatsWidget.Body>\n                    <StatsWidgetNumber className='text-color-danger' value={45} label='Exceptions' />\n                    <StatsWidgetSpacer />\n                    <StatsWidgetNumber className='text-color-warning' value={144} label='Warnings' />\n                </StatsWidget.Body>\n            </StatsWidget>\n\n            <StatsWidget hasFilter onFilterReset={() => {}}>\n                <StatsWidget.Header>Activity</StatsWidget.Header>\n                <StatsWidget.Body>\n                    <StatsWidgetNumber\n                        className='text-color-status-available'\n                        value={15}\n                        total={30}\n                        label='Availability'\n                        clickable\n                    />\n                    <StatsWidgetSpacer />\n                    <StatsWidgetNumber className='text-color-status-driving' value={12} label='Driving' />\n                    <StatsWidgetSpacer />\n                    <StatsWidgetNumber className='text-color-status-working' value={12} label='Working' />\n                    <StatsWidgetSpacer />\n                    <StatsWidgetNumber className='text-color-status-resting' value={9} label='Resting' />\n                </StatsWidget.Body>\n            </StatsWidget>\n        </StatsWidgets>\n\n        <StatsWidgets>\n            <StatsWidget>\n                <StatsWidget.Header>Full width widget</StatsWidget.Header>\n                <StatsWidget.Body fullWidth>\n                    <StatsWidgetNumber value='23' label='Trucks' />\n                    <StatsWidgetSpacer />\n                    <StatsWidgetNumber value='14' label='Trailer' />\n                    <StatsWidgetSpacer />\n                    <StatsWidgetNumber value='111' label='Driver' />\n                </StatsWidget.Body>\n            </StatsWidget>\n        </StatsWidgets>\n    </>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"StatsWidget-wrapper margin-bottom-20\">\n    <div class=\"StatsWidget\">\n        <div class=\"StatsWidget-header\">Fleet</div>\n        <div class=\"StatsWidget-body\">\n            <div class=\"StatsWidgetNumber\">\n                <div class=\"StatsWidgetNumber-counter\">\n                    <div class=\"StatsWidgetNumber-value\">23</div>\n                </div>\n                <div class=\"StatsWidgetNumber-label\">Trucks</div>\n            </div>\n            <div class=\"StatsWidget-body-column-spacer\">\n            </div>\n            <div class=\"StatsWidgetNumber\">\n                <div class=\"StatsWidgetNumber-counter\">\n                    <div class=\"StatsWidgetNumber-value\">14</div>\n                </div>\n                <div class=\"StatsWidgetNumber-label\">Trailer</div>\n            </div>\n            <div class=\"StatsWidget-body-column-spacer\">\n            </div>\n            <div class=\"StatsWidgetNumber\">\n                <div class=\"StatsWidgetNumber-counter\">\n                    <div class=\"StatsWidgetNumber-value\">111</div>\n                </div>\n                <div class=\"StatsWidgetNumber-label\">Driver</div>\n            </div>\n            <div class=\"StatsWidget-body-column-spacer\">\n            </div>\n        </div>\n    </div>\n    <div class=\"StatsWidget\">\n        <div class=\"StatsWidget-header\">Notifications</div>\n        <div class=\"StatsWidget-body\">\n            <div class=\"StatsWidgetNumber text-color-danger\">\n                <div class=\"StatsWidgetNumber-counter\">\n                    <div class=\"StatsWidgetNumber-value\">45</div>\n                </div>\n                <div class=\"StatsWidgetNumber-label\">Exceptions</div>\n            </div>\n            <div class=\"StatsWidget-body-column-spacer\">\n            </div>\n            <div class=\"StatsWidgetNumber text-color-warning\">\n                <div class=\"StatsWidgetNumber-counter\">\n                    <div class=\"StatsWidgetNumber-value\">144</div>\n                </div>\n                <div class=\"StatsWidgetNumber-label\">Warnings</div>\n            </div>\n        </div>\n    </div>\n    <div class=\"StatsWidget\">\n        <span class=\"bg-light hover-bg-highlight display-flex justify-content-center align-items-center padding-2 rounded-circle position-absolute top-15 right-15 display-block height-20 width-20 cursor-pointer\">\n            <span class=\"rioglyph rioglyph-revert text-color-white text-size-12\">\n            </span>\n        </span>\n        <div class=\"StatsWidget-header\">Activity</div>\n        <div class=\"StatsWidget-body\">\n            <div class=\"StatsWidgetNumber cursor-pointer text-color-status-available\">\n                <div class=\"StatsWidgetNumber-counter\">\n                    <div class=\"StatsWidgetNumber-value\">15</div>\n                    <div class=\"StatsWidgetNumber-total\">30</div>\n                </div>\n                <div class=\"StatsWidgetNumber-label\">Availability</div>\n            </div>\n            <div class=\"StatsWidget-body-column-spacer\">\n            </div>\n            <div class=\"StatsWidgetNumber text-color-status-driving\">\n                <div class=\"StatsWidgetNumber-counter\">\n                    <div class=\"StatsWidgetNumber-value\">12</div>\n                </div>\n                <div class=\"StatsWidgetNumber-label\">Driving</div>\n            </div>\n            <div class=\"StatsWidget-body-column-spacer\">\n            </div>\n            <div class=\"StatsWidgetNumber text-color-status-working\">\n                <div class=\"StatsWidgetNumber-counter\">\n                    <div class=\"StatsWidgetNumber-value\">12</div>\n                </div>\n                <div class=\"StatsWidgetNumber-label\">Working</div>\n            </div>\n            <div class=\"StatsWidget-body-column-spacer\">\n            </div>\n            <div class=\"StatsWidgetNumber text-color-status-resting\">\n                <div class=\"StatsWidgetNumber-counter\">\n                    <div class=\"StatsWidgetNumber-value\">9</div>\n                </div>\n                <div class=\"StatsWidgetNumber-label\">Resting</div>\n            </div>\n        </div>\n    </div>\n</div>\n<div class=\"StatsWidget-wrapper\">\n    <div class=\"StatsWidget\">\n        <div class=\"StatsWidget-header\">Full width widget</div>\n        <div class=\"StatsWidget-body full-width\">\n            <div class=\"StatsWidget-body-column-spacer invisible\">\n            </div>\n            <div class=\"StatsWidgetNumber\">\n                <div class=\"StatsWidgetNumber-counter\">\n                    <div class=\"StatsWidgetNumber-value\">23</div>\n                </div>\n                <div class=\"StatsWidgetNumber-label\">Trucks</div>\n            </div>\n            <div class=\"StatsWidget-body-column-spacer\">\n            </div>\n            <div class=\"StatsWidgetNumber\">\n                <div class=\"StatsWidgetNumber-counter\">\n                    <div class=\"StatsWidgetNumber-value\">14</div>\n                </div>\n                <div class=\"StatsWidgetNumber-label\">Trailer</div>\n            </div>\n            <div class=\"StatsWidget-body-column-spacer\">\n            </div>\n            <div class=\"StatsWidgetNumber\">\n                <div class=\"StatsWidgetNumber-counter\">\n                    <div class=\"StatsWidgetNumber-value\">111</div>\n                </div>\n                <div class=\"StatsWidgetNumber-label\">Driver</div>\n            </div>\n            <div class=\"StatsWidget-body-column-spacer invisible\">\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "StatsWidgets, StatsWidget, StatsWidgetSpacer and StatsWidgetNumber",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Addional class names to be added to the element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "StatsWidget",
+                  "rows": [
+                    {
+                      "name": "hasFilter",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether a filter is active for this stats widget."
+                    },
+                    {
+                      "name": "onFilterReset",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback to reset the filter."
+                    }
+                  ]
+                },
+                {
+                  "heading": "StatsWidgetBody",
+                  "rows": [
+                    {
+                      "name": "fullWidth",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Whether to use flex space-between for StatsWidgetNumbers."
+                    }
+                  ]
+                },
+                {
+                  "heading": "StatsWidgetNumber",
+                  "rows": [
+                    {
+                      "name": "value",
+                      "type": "String / Number / Node",
+                      "default": "",
+                      "description": "The value to be shown."
+                    },
+                    {
+                      "name": "total",
+                      "type": "String / Number / Node",
+                      "default": "",
+                      "description": "The total value to be shown i.e. in combination with an active filter."
+                    },
+                    {
+                      "name": "label",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The label shown below the number."
+                    },
+                    {
+                      "name": "clickable",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the number is clickable i.e. in combination with a filter."
+                    },
+                    {
+                      "name": "onClick",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback for when the user clicks the number widget."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"StatsWidget-wrapper\"><div class=\"StatsWidget shadow-default\"><div class=\"StatsWidget-header\">Current activity</div><div class=\"StatsWidget-body padding-20\"><div class=\"StatusBar width-100pct display-flex align-items-end\"><div class=\"flex-order-1 margin-right-5\"><span class=\"rioglyph rioglyph-status-resting text-color-status-resting text-size-h3\"></span></div><div class=\"display-flex flex-1-0 flex-order-1 flex-column margin-bottom-10\"><div class=\"display-flex justify-content-center\"><span class=\"display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-resting width-0 text-size-16 text-bold\">42 min resting</span></div><div class=\"display-flex flex-1-0\"><div class=\"progress margin-0 flex-1-0 height-5\"><div class=\"progress-bar progress-bar-status-resting progress-divider\" style=\"width: 30%;\"></div><div class=\"progress-bar progress-bar-light progress-divider\" style=\"width: 70%;\"></div></div></div></div></div></div><div class=\"StatsWidget-footer bg-lightest text-color-gray\">Last update 2 minutes ago</div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';\nimport StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';\nimport StatusBar from '@rio-cloud/rio-uikit/StatusBar';\n\nexport default () => (\n    <StatsWidgets>\n        <StatsWidget className='shadow-default'>\n            <StatsWidget.Header>Current activity</StatsWidget.Header>\n            <StatsWidget.Body className='padding-20'>\n                <StatusBar\n                    icon={{\n                        name: 'rioglyph-status-resting',\n                        color: 'text-color-status-resting',\n                    }}\n                    label={{\n                        value: '42 min resting',\n                        alignment: 'top',\n                        color: 'text-color-status-resting',\n                    }}\n                    progress={[\n                        {\n                            percentage: 30,\n                            color: 'progress-bar-status-resting',\n                            tooltip: <span>30%</span>,\n                        },\n                        {\n                            percentage: 70,\n                            color: 'progress-bar-light',\n                            tooltip: <span>70%</span>,\n                        },\n                    ]}\n                />\n            </StatsWidget.Body>\n            <StatsWidget.Footer className='bg-lightest text-color-gray'>Last update 2 minutes ago</StatsWidget.Footer>\n        </StatsWidget>\n    </StatsWidgets>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"StatsWidget-wrapper\">\n    <div class=\"StatsWidget shadow-default\">\n        <div class=\"StatsWidget-header\">Current activity</div>\n        <div class=\"StatsWidget-body padding-20\">\n            <div class=\"StatusBar width-100pct display-flex align-items-end\">\n                <div class=\"flex-order-1 margin-right-5\">\n                    <span class=\"rioglyph rioglyph-status-resting text-color-status-resting text-size-h3\">\n                    </span>\n                </div>\n                <div class=\"display-flex flex-1-0 flex-order-1 flex-column margin-bottom-10\">\n                    <div class=\"display-flex justify-content-center\">\n                        <span class=\"display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-resting width-0 text-size-16 text-bold\">42 min resting</span>\n                    </div>\n                    <div class=\"display-flex flex-1-0\">\n                        <div class=\"progress margin-0 flex-1-0 height-5\">\n                            <div class=\"progress-bar progress-bar-status-resting progress-divider\" style=\"width: 30%;\">\n                            </div>\n                            <div class=\"progress-bar progress-bar-light progress-divider\" style=\"width: 70%;\">\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"StatsWidget-footer bg-lightest text-color-gray\">Last update 2 minutes ago</div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "StatsWidgets, StatsWidget, StatsWidgetSpacer and StatsWidgetNumber",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Addional class names to be added to the element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "StatsWidget",
+                  "rows": [
+                    {
+                      "name": "hasFilter",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether a filter is active for this stats widget."
+                    },
+                    {
+                      "name": "onFilterReset",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback to reset the filter."
+                    }
+                  ]
+                },
+                {
+                  "heading": "StatsWidgetBody",
+                  "rows": [
+                    {
+                      "name": "fullWidth",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Whether to use flex space-between for StatsWidgetNumbers."
+                    }
+                  ]
+                },
+                {
+                  "heading": "StatsWidgetNumber",
+                  "rows": [
+                    {
+                      "name": "value",
+                      "type": "String / Number / Node",
+                      "default": "",
+                      "description": "The value to be shown."
+                    },
+                    {
+                      "name": "total",
+                      "type": "String / Number / Node",
+                      "default": "",
+                      "description": "The total value to be shown i.e. in combination with an active filter."
+                    },
+                    {
+                      "name": "label",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The label shown below the number."
+                    },
+                    {
+                      "name": "clickable",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the number is clickable i.e. in combination with a filter."
+                    },
+                    {
+                      "name": "onClick",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback for when the user clicks the number widget."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 3",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"StatsWidget-wrapper\"><div class=\"StatsWidget\"><div class=\"StatsWidget-header\">Notifications</div><div class=\"StatsWidget-body\"><div class=\"StatsWidgetNumber cursor-pointer text-color-danger\"><div class=\"StatsWidgetNumber-counter\"><div class=\"StatsWidgetNumber-value\">45</div></div><div class=\"StatsWidgetNumber-label\">Exceptions</div></div><div class=\"StatsWidget-body-column-spacer\"></div><div class=\"StatsWidgetNumber cursor-pointer text-color-warning\"><div class=\"StatsWidgetNumber-counter\"><div class=\"StatsWidgetNumber-value\">144</div></div><div class=\"StatsWidgetNumber-label\">Warnings</div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';\nimport StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';\nimport StatsWidgetNumber from '@rio-cloud/rio-uikit/StatsWidgetNumber';\nimport StatsWidgetSpacer from '@rio-cloud/rio-uikit/StatsWidgetSpacer';\n\ntype Stat = {\n    value: number;\n    total?: number;\n};\n\ntype Stats = {\n    exceptions: Stat;\n    warnings: Stat;\n};\n\nconst defaultStats: Stats = {\n    exceptions: { value: 45 },\n    warnings: { value: 144 },\n};\n\nconst mockFilteredStats: Stats = {\n    exceptions: { value: 17, total: 45 },\n    warnings: { value: 22, total: 144 },\n};\n\nexport default () => {\n    const [hasFilter, setHasFilter] = useState(false);\n\n    const handleToggleFilter = () => setHasFilter(!hasFilter);\n    const handleResetFilters = () => setHasFilter(false);\n\n    const stats = hasFilter ? mockFilteredStats : defaultStats;\n\n    return (\n        <StatsWidgets>\n            <StatsWidget hasFilter={hasFilter} onFilterReset={handleResetFilters}>\n                <StatsWidget.Header>Notifications</StatsWidget.Header>\n                <StatsWidget.Body>\n                    <StatsWidgetNumber\n                        className='text-color-danger'\n                        value={stats.exceptions.value}\n                        total={stats.exceptions.total}\n                        label='Exceptions'\n                        onClick={handleToggleFilter}\n                        clickable\n                    />\n                    <StatsWidgetSpacer />\n                    <StatsWidgetNumber\n                        className='text-color-warning'\n                        value={stats.warnings.value}\n                        total={stats.warnings.total}\n                        label='Warnings'\n                        onClick={handleToggleFilter}\n                        clickable\n                    />\n                </StatsWidget.Body>\n            </StatsWidget>\n        </StatsWidgets>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"StatsWidget-wrapper\">\n    <div class=\"StatsWidget\">\n        <div class=\"StatsWidget-header\">Notifications</div>\n        <div class=\"StatsWidget-body\">\n            <div class=\"StatsWidgetNumber cursor-pointer text-color-danger\">\n                <div class=\"StatsWidgetNumber-counter\">\n                    <div class=\"StatsWidgetNumber-value\">45</div>\n                </div>\n                <div class=\"StatsWidgetNumber-label\">Exceptions</div>\n            </div>\n            <div class=\"StatsWidget-body-column-spacer\">\n            </div>\n            <div class=\"StatsWidgetNumber cursor-pointer text-color-warning\">\n                <div class=\"StatsWidgetNumber-counter\">\n                    <div class=\"StatsWidgetNumber-value\">144</div>\n                </div>\n                <div class=\"StatsWidgetNumber-label\">Warnings</div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "StatsWidgets, StatsWidget, StatsWidgetSpacer and StatsWidgetNumber",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Addional class names to be added to the element."
+                    }
+                  ]
+                },
+                {
+                  "heading": "StatsWidget",
+                  "rows": [
+                    {
+                      "name": "hasFilter",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether a filter is active for this stats widget."
+                    },
+                    {
+                      "name": "onFilterReset",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback to reset the filter."
+                    }
+                  ]
+                },
+                {
+                  "heading": "StatsWidgetBody",
+                  "rows": [
+                    {
+                      "name": "fullWidth",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Whether to use flex space-between for StatsWidgetNumbers."
+                    }
+                  ]
+                },
+                {
+                  "heading": "StatsWidgetNumber",
+                  "rows": [
+                    {
+                      "name": "value",
+                      "type": "String / Number / Node",
+                      "default": "",
+                      "description": "The value to be shown."
+                    },
+                    {
+                      "name": "total",
+                      "type": "String / Number / Node",
+                      "default": "",
+                      "description": "The total value to be shown i.e. in combination with an active filter."
+                    },
+                    {
+                      "name": "label",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The label shown below the number."
+                    },
+                    {
+                      "name": "clickable",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether or not the number is clickable i.e. in combination with a filter."
+                    },
+                    {
+                      "name": "onClick",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback for when the user clicks the number widget."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}