Introduced Typography component and using it in a 3rd demo panel

Author: forman

dashipy/dashipy/components/__init__.py

@@ -1,4 +1,6 @@
 from .box import Box
 from .button import Button
+from .checkbox import Checkbox
 from .dropdown import Dropdown
 from .plot import Plot
+from .typography import Typography

dashipy/dashipy/components/typography.py

@@ -0,0 +1,8 @@
+from dataclasses import dataclass
+
+from dashipy import Component
+
+
+@dataclass(frozen=True)
+class Typography(Component):
+    text: str | None = None

dashipy/my_extension/__init__.py

@@ -1,7 +1,9 @@
 from dashipy import Extension
 from .my_panel_1 import panel as my_panel_1
 from .my_panel_2 import panel as my_panel_2
+from .my_panel_3 import panel as my_panel_3
 
 ext = Extension(__name__)
 ext.add(my_panel_1)
 ext.add(my_panel_2)
+ext.add(my_panel_3)

dashipy/my_extension/my_panel_3.py

@@ -0,0 +1,73 @@
+from dashipy import Component, Input, Output
+from dashipy.components import Box, Dropdown, Checkbox, Typography
+from dashipy.demo.contribs import Panel
+from dashipy.demo.context import Context
+
+
+panel = Panel(__name__, title="Panel C")
+
+
+COLORS = [("red", 0), ("green", 1), ("blue", 2), ("yellow", 3)]
+
+
+@panel.layout(
+    Input(kind="AppState", property="selectedDatasetId"),
+)
+def render_panel(
+    ctx: Context,
+    dataset_id: str = "",
+) -> Component:
+
+    opaque = False
+    color = 0
+
+    opaque_checkbox = Checkbox(
+        id="opaque",
+        value=opaque,
+        label="Opaque",
+    )
+
+    color_dropdown = Dropdown(
+        id="color",
+        value=color,
+        label="Color",
+        options=COLORS,
+        style={"flexGrow": 0, "minWidth": 80},
+    )
+
+    info_text = Typography(
+        id="info_text", text=update_info_text(ctx, dataset_id, opaque, color)
+    )
+
+    return Box(
+        style={
+            "display": "flex",
+            "flexDirection": "column",
+            "width": "100%",
+            "height": "100%",
+            "gap": "6px",
+        },
+        children=[opaque_checkbox, color_dropdown, info_text],
+    )
+
+
+# noinspection PyUnusedLocal
+@panel.callback(
+    Input(kind="AppState", property="selectedDatasetId"),
+    Input("opaque"),
+    Input("color"),
+    Output("info_text", "text"),
+)
+def update_info_text(
+    ctx: Context,
+    dataset_id: str = "",
+    opaque: bool = False,
+    color: int = 0,
+) -> str:
+    opaque = opaque or False
+    color = color if color is not None else 0
+    return (
+        f"The dataset is {dataset_id},"
+        f" the color is {COLORS[color][0]} and"
+        f" it {'is' if opaque else 'is not'} opaque"
+    )