Quo2: section label (#17219)

* feat: added section-label to quo2

* fix: addressed review comments

* ref: reorder and small change

* fix: blur only for dark and adjusted styling

src/quo2/components/settings/section_label/view.cljs

@@ -0,0 +1,43 @@
+(ns quo2.components.settings.section-label.view
+  (:require
+    [quo2.theme :as quo.theme]
+    [quo2.components.markdown.text :as text]
+    [quo2.foundations.colors :as colors]))
+
+(defn- get-text-color
+  [theme blur?]
+  (if blur?
+    colors/white-opa-40
+    (colors/theme-colors colors/neutral-50
+                         colors/neutral-40
+                         theme)))
+
+(defn label-style
+  [color]
+  {:color         color
+   :margin-bottom 2})
+
+(defn- view-internal
+  "Props:
+   - section - the label of the section
+   - description (optional) - description of the section
+   - blur? (optional) - use blurred styling
+   - theme - light or dark"
+  [{:keys [section description blur? theme]}]
+  (let [color        (get-text-color theme (or blur? false))
+        description? (not (nil? description))]
+    [:<>
+     [text/text
+      {:number-of-lines 1
+       :size            (if description? :paragraph-1 :paragraph-2)
+       :weight          :medium
+       :style           (label-style color)}
+      section]
+     (when description?
+       [text/text
+        {:size   :paragraph-1
+         :weight :regular
+         :style  {:color color}}
+        description])]))
+
+(def view (quo.theme/with-theme view-internal))

src/quo2/core.cljs

@@ -106,6 +106,7 @@
     quo2.components.settings.reorder-item.view
     quo2.components.settings.settings-item.view
     quo2.components.settings.category.view
+    quo2.components.settings.section-label.view
     quo2.components.share.qr-code.view
     quo2.components.share.share-qr-code.view
     quo2.components.tabs.account-selector
@@ -310,12 +311,13 @@
 (def checkbox quo2.components.selectors.selectors.view/checkbox)
 
 ;;;; Settings
-(def privacy-option quo2.components.settings.privacy-option.view/view)
 (def account quo2.components.settings.accounts.view/account)
-(def settings-item quo2.components.settings.settings-item.view/view)
-(def reorder-item quo2.components.settings.reorder-item.view/reorder-item)
 (def category quo2.components.settings.category.view/category)
 (def data-item quo2.components.settings.data-item.view/view)
+(def privacy-option quo2.components.settings.privacy-option.view/view)
+(def reorder-item quo2.components.settings.reorder-item.view/reorder-item)
+(def section-label quo2.components.settings.section-label.view/view)
+(def settings-item quo2.components.settings.settings-item.view/view)
 
 ;;;; Share
 (def qr-code quo2.components.share.qr-code.view/qr-code)

src/status_im2/contexts/quo_preview/main.cljs

@@ -102,6 +102,7 @@
     [status-im2.contexts.quo-preview.settings.privacy-option :as privacy-option]
     [status-im2.contexts.quo-preview.settings.reorder-item :as reorder-item]
     [status-im2.contexts.quo-preview.settings.category :as category]
+    [status-im2.contexts.quo-preview.settings.section-label :as section-label]
     [status-im2.contexts.quo-preview.share.qr-code :as qr-code]
     [status-im2.contexts.quo-preview.share.share-qr-code :as share-qr-code]
     [status-im2.contexts.quo-preview.switcher.switcher-cards :as switcher-cards]
@@ -348,7 +349,9 @@
                        {:name      :category
                         :component category/preview}
                        {:name      :data-item
-                        :component data-item/preview-data-item}]
+                        :component data-item/preview-data-item}
+                       {:name      :section-label
+                        :component section-label/preview}]
    :share             [{:name      :qr-code
                         :component qr-code/preview-qr-code}
                        {:name      :share-qr-code

src/status_im2/contexts/quo_preview/settings/section_label.cljs

@@ -0,0 +1,35 @@
+(ns status-im2.contexts.quo-preview.settings.section-label
+  (:require
+    [reagent.core :as reagent]
+    [status-im2.contexts.quo-preview.preview :as preview]
+    [quo2.core :as quo]))
+
+(def ^:private descriptor
+  [{:key  :section
+    :type :text}
+   {:key  :description
+    :type :text}
+   {:key  :blur?
+    :type :boolean}])
+
+(defn preview
+  []
+  (let [state       (reagent/atom {:section     "Section label"
+                                   :description ""
+                                   :blur?       false})
+        description (reagent/cursor state [:description])
+        section     (reagent/cursor state [:section])
+        blur?       (reagent/cursor state [:blur?])]
+    (fn []
+      [preview/preview-container
+       {:state                 state
+        :descriptor            descriptor
+        :show-blur-background? true
+        :blur-dark-only?       true
+        :blur?                 @blur?
+        :blur-height           150}
+       [quo/section-label
+        {:section     @section
+         :description (when-not (empty? @description)
+                        @description)
+         :blur?       @blur?}]])))