✨ Add a way to add markdown to context notifications

frontend/src/app/main/ui/dashboard/fonts.cljs

@@ -17,6 +17,7 @@
    [app.main.ui.components.context-menu-a11y :refer [context-menu-a11y]]
    [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.icons :as i]
+   [app.main.ui.notifications.context-notification :refer [context-notification]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
@@ -130,18 +131,14 @@
                            :ref input-ref
                            :on-selected handle-selected}]]
 
-       [:div {:class (stl/css :banner)}
+       [:& context-notification {:content (tr "dashboard.fonts.hero-text2")
-        [:div {:class (stl/css :icon)} i/msg-neutral-refactor]
+                                 :type :default
-        [:div {:class (stl/css :content)}
+                                 :is-html true}]
-         [:& i18n/tr-html {:tag-name "span"
-                           :label "dashboard.fonts.hero-text2"}]]]
 
        (when problematic-fonts?
-         [:div {:class (stl/css :banner :warning)}
+         [:& context-notification {:content (tr "dashboard.fonts.warning-text")
-          [:div {:class (stl/css :icon)} i/msg-neutral-refactor]
+                                   :type :warning
-          [:div {:class (stl/css :content)}
+                                   :is-html true}])]]
-           [:& i18n/tr-html {:tag-name "span"
-                             :label "dashboard.fonts.warning-text"}]]])]]
 
      [:*
       (when (some? (vals fonts))

frontend/src/app/main/ui/dashboard/fonts.scss

@@ -255,50 +255,6 @@
     }
   }
 
-  .banner {
-    @include bodyMedTipography;
-    --bg-color: var(--alert-background-color-default);
-    --fg-color: var(--alert-text-foreground-color-default);
-    --icon-color: var(--alert-icon-foreground-color-default);
-    --border-color: var(--alert-border-color-default);
-    overflow: hidden;
-    display: grid;
-    grid-template-columns: $s-16 1fr;
-    gap: $s-8;
-    padding: $s-8 $s-8 $s-8 $s-16;
-    border-radius: $br-12;
-    border: $s-1 solid var(--border-color);
-    border-radius: $br-12;
-    background-color: var(--bg-color);
-    color: var(--fg-color);
-    font-size: $fs-12;
-
-    .icon {
-      display: flex;
-      align-items: flex-start;
-      justify-content: center;
-
-      svg {
-        stroke: var(--icon-color);
-        fill: none;
-        height: $s-16;
-        width: $s-16;
-      }
-    }
-    .content a {
-      color: $da-primary;
-    }
-    &.warning {
-      --bg-color: var(--alert-background-color-warning);
-      --fg-color: var(--alert-text-foreground-color-warning);
-      --icon-color: var(--alert-icon-foreground-color-warning);
-      --border-color: var(--alert-border-color-warning);
-      .icon svg {
-        stroke: var(--element-foreground-warning);
-      }
-    }
-  }
-
   .btn-primary {
     flex-shrink: 0;
   }

frontend/src/app/main/ui/notifications/context_notification.cljs

@@ -39,23 +39,29 @@
    They are contextual messages in specific areas off the app"
 
   {::mf/props :obj}
-  [{:keys [type content links] :as props}]
+  [{:keys [type content links is-html] :as props}]
 
   [:aside {:class (stl/css-case :context-notification true
-                                :warning    (= type :warning)
+                                :contain-html is-html
-                                :error      (= type :error)
+                                :warning      (= type :warning)
-                                :success    (= type :success)
+                                :error        (= type :error)
-                                :info       (= type :info))}
+                                :success      (= type :success)
+                                :info         (= type :info))}
 
    (get-icon-by-type type)
 
-   [:div {:class (stl/css :context-text)}
+   ;; The content can arrive in markdown format, in these cases
-    content]
+   ;;  we will use the prop is-html to true to indicate it and
+   ;; that the html injection is performed and the necessary css classes are applied.
+   [:div {:class (stl/css :context-text)
+          :dangerouslySetInnerHTML (when is-html #js {:__html content})}
+    (when-not is-html
+      content)]
 
    (when (some? links)
      [:nav {:class (stl/css :link-nav)}
       (for [[index link] (d/enumerate links)]
-      ;; TODO Review this component
+        ;; TODO Review this component
         [:& lb/link-button {:class (stl/css :link)
                             :on-click (:callback link)
                             :value (:label link)

frontend/src/app/main/ui/notifications/context_notification.scss

@@ -59,7 +59,7 @@
 
 .icon {
   @extend .button-icon;
-  height: 100%;
+  align-self: self-start;
   stroke: var(--icon-color);
 }
 
@@ -76,7 +76,12 @@
   margin: auto 0;
 }
 
-.link {
+// The second rule only applies when the element receives embedded
+// links within the content by means of the dangerouslySetInnerHTML.
+// Only in this case the contain-html class will be used.
+
+.link,
+.contain-html .context-text a {
   @include bodyMedTipography;
   align-self: center;
   height: $s-16;