🎉 Add blur panel to inspect styles tab (#7397)

frontend/src/app/main/ui/inspect/styles.cljs

@@ -15,6 +15,7 @@
    [app.common.types.tokens-lib :as ctob]
    [app.main.data.style-dictionary :as sd]
    [app.main.refs :as refs]
+   [app.main.ui.inspect.styles.panels.blur :refer [blur-panel*]]
    [app.main.ui.inspect.styles.panels.fill :refer [fill-panel*]]
    [app.main.ui.inspect.styles.panels.geometry :refer [geometry-panel*]]
    [app.main.ui.inspect.styles.panels.layout :refer [layout-panel*]]
@@ -63,6 +64,8 @@
    (not (contains? #{:text :group} (:type shape)))
    (seq (:fills shape))))
 
+(defn- has-blur? [shape]
+  (:blur shape))
 
 (defn- get-shape-type
   [shapes first-shape first-component]
@@ -172,6 +175,13 @@
               [:> style-box* {:panel :svg}
                [:> svg-panel* {:shape shape
                                :objects objects}]]))
+          ;; BLUR PANEL
+          :blur
+          (let [shapes (->> shapes (filter has-blur?))]
+            (when (seq shapes)
+              [:> style-box* {:panel :blur}
+               [:> blur-panel* {:shapes shapes
+                                :objects objects}]]))
           ;; DEFAULT WIP
           [:> style-box* {:panel panel}
            [:div color-space]])])]))

frontend/src/app/main/ui/inspect/styles/panels/blur.cljs

@@ -0,0 +1,29 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.inspect.styles.panels.blur
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data.macros :as dm]
+   [app.main.ui.inspect.attributes.common :as cmm]
+   [app.main.ui.inspect.styles.rows.properties-row :refer [properties-row*]]
+   [app.util.code-gen.style-css :as css]
+   [rumext.v2 :as mf]))
+
+(mf/defc blur-panel*
+  [{:keys [shapes objects]}]
+  [:div {:class (stl/css :blur-panel)}
+   (for [shape shapes]
+     [:div {:key (:id shape) :class "blur-shape"}
+      (let [property :filter
+            value (css/get-css-value objects shape property)
+            property-name (cmm/get-css-rule-humanized property)
+            property-value (css/get-css-property objects shape property)]
+        [:> properties-row* {:key (dm/str "blur-property-" property)
+                             :term property-name
+                             :detail (dm/str value)
+                             :property property-value
+                             :copiable true}])])])