Implement InfoBox and InAppGuide widgets

aiidalab_widgets_base/infobox.py

@@ -0,0 +1,31 @@
+from __future__ import annotations
+
+import ipywidgets as ipw
+
+
+class InfoBox(ipw.VBox):
+    """The `InfoBox` component is used to provide additional info regarding a widget or an app."""
+
+    def __init__(self, **kwargs):
+        """`InfoBox` constructor."""
+        super().__init__(**kwargs)
+        self.add_class("info-box")
+        if "custom-css" in kwargs:
+            self.add_class(kwargs.pop("custom-css"))
+
+
+class InAppGuide(InfoBox):
+    """The `InfoAppGuide` is used to set up in-app guides that may be toggle in unison."""
+
+    def __init__(self, guide_class="", **kwargs):
+        """`InAppGuide` constructor.
+
+        parameters
+        ----------
+        `guide_class` : `str`
+            A CSS class marking the widget as part of a guide collection.
+            May also be used for custom styling.
+        """
+        super().__init__(**kwargs)
+        self.add_class("in-app-guide")
+        self.add_class(guide_class)

aiidalab_widgets_base/static/styles/infobox.css

@@ -0,0 +1,18 @@
+.info-box {
+  display: none;
+  margin: 2px;
+  padding: 1em;
+  border: 3px solid orangered;
+  background-color: #ffedcc;
+  border-radius: 1em;
+  -webkit-border-radius: 1em;
+  -moz-border-radius: 1em;
+  -ms-border-radius: 1em;
+  -o-border-radius: 1em;
+}
+.info-box p {
+  line-height: 24px;
+}
+.info-box.in-app-guide.show {
+  display: flex !important;
+}

aiidalab_widgets_base/static/styles/scss/infobox.scss

@@ -0,0 +1,22 @@
+.info-box {
+  display: none;
+  margin: 2px;
+  padding: 1em;
+  border: 3px solid orangered;
+  background-color: #ffedcc;
+  border-radius: 1em;
+  -webkit-border-radius: 1em;
+  -moz-border-radius: 1em;
+  -ms-border-radius: 1em;
+  -o-border-radius: 1em;
+
+  p {
+    line-height: 24px;
+  }
+
+  &.in-app-guide {
+    &.show {
+      display: flex !important;
+    }
+  }
+}

tests/test_infobox.py

@@ -0,0 +1,29 @@
+from aiidalab_widgets_base.infobox import InAppGuide, InfoBox
+
+
+def test_infobox_classes():
+    """Test `InfoBox` classes."""
+    infobox = InfoBox()
+    assert "info-box" in infobox._dom_classes
+    infobox = InfoBox(**{"custom-css": "custom-info-box"})
+    assert all(
+        css_class in infobox._dom_classes
+        for css_class in (
+            "info-box",
+            "custom-info-box",
+        )
+    )
+
+
+def test_in_app_guide():
+    """Test `InAppGuide` class."""
+    guide_class = "some_guide"
+    in_app_guide = InAppGuide(guide_class=guide_class)
+    assert all(
+        css_class in in_app_guide._dom_classes
+        for css_class in (
+            "info-box",
+            "in-app-guide",
+            guide_class,
+        )
+    )