Added text and divider component

vizro-core/src/vizro/models/_controls/divider.py

@@ -0,0 +1,32 @@
+from typing import Dict, Literal
+
+from dash import html
+
+from vizro.models import VizroBaseModel
+from vizro.models._models_utils import _log_call
+
+
+class Divider(VizroBaseModel):
+    """Creates a divider utilizing dash html component.
+
+    Args:
+        type (Literal["divider"]): Defaults to `"divider"`.
+        style (Dict[str, str]): Style dictionary to pass to html component. Default to
+            a solid gray line with 100% width.
+    """
+
+    type: Literal["divider"] = "divider"
+    style: Dict[str, str] = {
+        "borderWidth": "0.1vh",
+        "width": "100%",
+        "borderColor": "#33353f",
+        "borderStyle": "solid",
+    }
+
+    @_log_call
+    def build(self):
+        return html.Hr(
+            style=self.style,
+            className="divider_container",
+            id=f"{self.id}_outer",
+        )

vizro-core/src/vizro/models/_controls/text.py

@@ -0,0 +1,32 @@
+from typing import Literal
+
+from dash import dcc, html
+
+from vizro.models import VizroBaseModel
+from vizro.models._models_utils import _log_call
+
+
+class Text(VizroBaseModel):
+    """Creates a text utilizing `dcc.Markdown` as text component.
+
+    Args:
+        type (Literal["text"]): Defaults to `"text"`.
+        text (str): Markdown string to create text that should adhere to the CommonMark Spec.
+    """
+
+    type: Literal["text"] = "text"
+    text: str
+
+    @_log_call
+    def build(self):
+        text = dcc.Markdown(
+            self.text,
+            className="text",
+            dangerously_allow_html=False,
+            id=self.id,
+        )
+        return html.Div(
+            text,
+            className="text_container",
+            id=f"{self.id}_outer",
+        )

vizro-core/src/vizro/models/types.py

@@ -255,7 +255,7 @@ class OptionsDictType(TypedDict):
 ]
 
 ControlType = Annotated[
-    Union["Filter", "Parameter"],
+    Union["Divider", "Filter", "Parameter", "Text"],
     Field(
         discriminator="type",
         description="Control that affects components on the page.",