Quo divider-label component refactor (#17035)

src/quo2/components/dividers/divider_label.cljs

@@ -1,90 +0,0 @@
-(ns quo2.components.dividers.divider-label
-  (:require [quo2.components.icon :as icons]
-            [quo2.components.markdown.text :as markdown.text]
-            [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
-            [react-native.core :as rn]))
-
-(def chevron-icon-container-width 20)
-
-(def chevron-icon-container-height 20)
-
-(defn themed-view
-  "label -> string
-   chevron-position -> :left, :right
-   chevron-icon -> keyword
-   on-press -> function
-   padding-bottom -> number
-   counter-value -> number
-   increase-padding-top? -> boolean
-   blur? -> boolean
-   theme -> theme value passed from with-theme HOC"
-  [{:keys [label
-           chevron-position
-           chevron-icon
-           counter-value
-           increase-padding-top?
-           padding-bottom
-           blur?
-           container-style
-           on-press
-           theme]}]
-  (let [dark?                       (= :dark theme)
-        border-and-counter-bg-color (if dark?
-                                      (if blur? colors/white-opa-5 colors/neutral-70)
-                                      colors/neutral-10)
-        padding-top                 (if increase-padding-top? 16 8)
-        text-and-icon-color         (if dark? colors/neutral-40 colors/neutral-50)
-        counter-text-color          (if dark? colors/white colors/neutral-100)]
-    [rn/touchable-without-feedback {:on-press on-press}
-     [rn/view
-      {:accessible          true
-       :accessibility-label :divider-label
-       :style               (merge {:border-top-width 1
-                                    :border-top-color border-and-counter-bg-color
-                                    :padding-top      padding-top
-                                    :padding-bottom   padding-bottom
-                                    :padding-left     16
-                                    :padding-right    16
-                                    :align-items      :center
-                                    :flex-direction   :row}
-                                   container-style)}
-      (when (= chevron-position :left)
-        [rn/view
-         {:test-ID :divider-label-icon-left
-          :style   {:margin-right 4}}
-         [icons/icon
-          (or chevron-icon :i/chevron-down)
-          {:color  text-and-icon-color
-           :width  chevron-icon-container-width
-           :height chevron-icon-container-height}]])
-      [markdown.text/text
-       {:size   :paragraph-2
-        :weight :medium
-        :style  {:color text-and-icon-color
-                 :flex  1}}
-       label]
-      (when (= chevron-position :right)
-        [rn/view {:test-ID :divider-label-icon-right}
-         [icons/icon
-          (or chevron-icon :i/chevron-down)
-          {:color text-and-icon-color
-           :size  chevron-icon-container-width}]])
-      (when (pos? counter-value)
-        [rn/view
-         {:style {:border-radius    6
-                  :height           16
-                  :width            (case (count counter-value)
-                                      1 16
-                                      2 20
-                                      28)
-                  :background-color border-and-counter-bg-color
-                  :align-items      :center
-                  :justify-content  :center}}
-         [markdown.text/text
-          {:size   :label
-           :weight :medium
-           :style  {:color counter-text-color}}
-          counter-value]])]]))
-
-(def divider-label (theme/with-theme themed-view))

src/quo2/components/dividers/divider_label/component_spec.cljs

@@ -0,0 +1,20 @@
+(ns quo2.components.dividers.divider-label.component-spec
+  (:require [quo2.components.dividers.divider-label.view :as divider-label]
+            [test-helpers.component :as h]))
+
+(h/describe "Divider Label"
+  (h/test "default render"
+    (h/render [divider-label/view "Welcome"])
+    (h/is-truthy (h/query-by-label-text :divider-label)))
+  (h/test "with label"
+    (h/render [divider-label/view {:tight? true} "Welcome"])
+    (h/is-truthy (h/query-by-text "Welcome")))
+  (h/test "with label & counter value"
+    (h/render [divider-label/view {:tight? true :counter? true :counter-value 5} "Public"])
+    (h/is-truthy (h/query-by-text "Public"))
+    (h/is-truthy (h/query-by-text "5")))
+  (h/test "on-press event"
+    (let [on-press (h/mock-fn)]
+      (h/render [divider-label/view {:tight? false :on-press on-press} "General"])
+      (h/fire-event :press (h/query-by-label-text :divider-label))
+      (h/was-called on-press))))

src/quo2/components/dividers/divider_label/style.cljs

@@ -0,0 +1,39 @@
+(ns quo2.components.dividers.divider-label.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn- get-border-color
+  [blur? theme]
+  (colors/theme-colors (if blur? colors/neutral-80-opa-5 colors/neutral-10)
+                       (if blur? colors/white-opa-5 colors/neutral-90)
+                       theme))
+
+(defn get-content-color
+  [blur? theme]
+  (colors/theme-colors (if blur? colors/neutral-80-opa-70 colors/neutral-50)
+                       (if blur? colors/white-opa-70 colors/neutral-40)
+                       theme))
+
+(defn container
+  [blur? tight? chevron theme]
+  {:border-top-width 1
+   :border-top-color (get-border-color blur? theme)
+   :padding-top      (if tight? 6 14)
+   :padding-bottom   7
+   :padding-left     (if (= :left chevron) 16 20)
+   :padding-right    20
+   :align-items      :center
+   :flex-direction   :row})
+
+(defn content
+  [chevron]
+  {:flex-direction (if (= chevron :right)
+                     :row-reverse
+                     :row)
+   :align-items    :center
+   :height         20
+   :flex           1})
+
+(defn text
+  [blur? theme]
+  {:color (get-content-color blur? theme)
+   :flex  1})

src/quo2/components/dividers/divider_label/view.cljs

@@ -0,0 +1,60 @@
+(ns quo2.components.dividers.divider-label.view
+  (:require [quo2.components.markdown.text :as text]
+            [quo2.components.dividers.divider-label.style :as style]
+            [quo2.theme :as quo.theme]
+            [react-native.core :as rn]
+            [quo2.components.counter.counter.view :as counter]
+            [quo2.components.icon :as icons]))
+
+(defn- view-internal
+  "Options:
+  - `counter?` (default: nil) - Display a counter on the right side of the divider.
+  - `counter-value` (default: nil) - Number to display if counter? is true.
+  - `chevron` nil/:right/:left (default: nil) - Display a chevron on the left or right side of the divider.
+  - `chevron-icon` (default: :i/chevron-right) - Icon to display when chevron is :left/:right.
+  - `tight?` (default: true) - Use a tighter padding.
+  - `blur?` (default: nil) - Use a blur background.
+  - `theme` - Theme value from with-theme HOC.
+  - `on-press` - Function called when the divider is pressed.
+  - `container-style` - Style applied to the container view.
+
+  label - String or markdown text component to display in the divider label."
+  [{:keys [counter?
+           counter-value
+           chevron
+           chevron-icon
+           tight?
+           blur?
+           theme
+           on-press
+           container-style]
+    :or   {tight? true}}
+   label]
+  [rn/pressable
+   {:on-press            on-press
+    :accessibility-label :divider-label
+    :style               (merge (style/container blur? tight? chevron theme)
+                                container-style)}
+   [rn/view
+    {:style (style/content chevron)}
+    (when chevron
+      [icons/icon (or chevron-icon :i/chevron-right)
+       {:color           (style/get-content-color blur? theme)
+        :container-style {(if (= chevron :right)
+                            :margin-left
+                            :margin-right)
+                          2}}])
+    [text/text
+     {:size   :paragraph-2
+      :weight :medium
+      :style  (style/text blur? theme)}
+     label]]
+   (when counter?
+     [counter/view
+      {:type            (if blur? :secondary :grey)
+       :container-style {:margin-left 2}}
+      counter-value])])
+
+(defn view
+  ([_ _] (quo.theme/with-theme view-internal))
+  ([label] [view {} label]))

src/quo2/components/dividers/divider_label_component_spec.cljs

@@ -1,45 +0,0 @@
-(ns quo2.components.dividers.divider-label-component-spec
-  (:require ["@testing-library/react-native" :as rtl]
-            [quo2.components.dividers.divider-label :as divider-label]
-            [reagent.core :as reagent]))
-
-(defn render-divider-label
-  ([]
-   (render-divider-label {}))
-  ([opts]
-   (rtl/render (reagent/as-element [divider-label/divider-label opts]))))
-
-(js/global.test "default render of divider-label component"
-  (fn []
-    (render-divider-label)
-    (-> (js/expect (rtl/screen.getByLabelText "divider-label"))
-        (.toBeTruthy))))
-
-(js/global.test "render divider-label component with a label"
-  (fn []
-    (render-divider-label {:label :hello})
-    (-> (js/expect (rtl/screen.getByText "hello"))
-        (.toBeTruthy))))
-
-(js/global.test "render divider-label component with a counter-value"
-  (fn []
-    (render-divider-label {:label         :hello
-                           :counter-value "1"})
-    (-> (js/expect (rtl/screen.getByText "1"))
-        (.toBeTruthy))))
-
-(js/global.test "divider-label chevron icon renders to the left when set"
-  (fn []
-    (render-divider-label {:label            :hello
-                           :counter-value    "1"
-                           :chevron-position :left})
-    (-> (js/expect (rtl/screen.getByTestId "divider-label-icon-left"))
-        (.toBeTruthy))))
-
-(js/global.test "divider-label chevron icon renders to the right when set"
-  (fn []
-    (render-divider-label {:label            :hello
-                           :counter-value    "1"
-                           :chevron-position :right})
-    (-> (js/expect (rtl/screen.getByTestId "divider-label-icon-right"))
-        (.toBeTruthy))))

src/quo2/core.cljs

@@ -33,7 +33,7 @@
     quo2.components.counter.counter.view
     quo2.components.counter.step.view
     quo2.components.dividers.date
-    quo2.components.dividers.divider-label
+    quo2.components.dividers.divider-label.view
     quo2.components.dividers.new-messages
     quo2.components.dividers.strength-divider.view
     quo2.components.drawers.action-drawers.view
@@ -182,7 +182,7 @@
 (def step quo2.components.counter.step.view/view)
 
 ;;;; Dividers
-(def divider-label quo2.components.dividers.divider-label/divider-label)
+(def divider-label quo2.components.dividers.divider-label.view/view)
 (def new-messages quo2.components.dividers.new-messages/new-messages)
 (def divider-date quo2.components.dividers.date/date)
 (def strength-divider quo2.components.dividers.strength-divider.view/view)

src/quo2/core_spec.cljs

@@ -17,7 +17,7 @@
     [quo2.components.colors.color-picker.component-spec]
     [quo2.components.counter.counter.component-spec]
     [quo2.components.counter.step.component-spec]
-    [quo2.components.dividers.divider-label-component-spec]
+    [quo2.components.dividers.divider-label.component-spec]
     [quo2.components.dividers.strength-divider.component-spec]
     [quo2.components.drawers.action-drawers.component-spec]
     [quo2.components.drawers.documentation-drawers.component-spec]

src/status_im2/common/contact_list/view.cljs

@@ -3,4 +3,4 @@
 
 (defn contacts-section-header
   [{:keys [title]}]
-  [quo/divider-label {:label title}])
+  [quo/divider-label title])

src/status_im2/contexts/chat/photo_selector/album_selector/view.cljs

@@ -47,8 +47,8 @@
   [{:keys [title]}]
   (when-not (= title no-title)
     [quo/divider-label
-     {:label           title
+     {:container-style style/divider}
-      :container-style style/divider}]))
+     title]))
 
 (defn key-fn
   [item index]

src/status_im2/contexts/communities/overview/view.cljs

@@ -83,14 +83,10 @@
         :on-layout #(on-category-layout name (int (layout-y %)))}
        (when-not (= constants/empty-category-id category-id)
          [quo/divider-label
-          {:container-style  {:padding-left   16
+          {:on-press     #(collapse-category community-id category-id collapsed?)
-                              :padding-right  20
-                              :padding-top    6 ; Because of border width of 1
-                              :padding-bottom 7}
-           :label            name
-           :on-press         #(collapse-category community-id category-id collapsed?)
            :chevron-icon (if collapsed? :i/chevron-right :i/chevron-down)
-           :chevron-position :left}])
+           :chevron      :left}
+          name])
        (when-not collapsed?
          (into [rn/view {:style {:padding-horizontal 8 :padding-bottom 8}}]
                (map #(channel-chat-item community-id community-color %))
@@ -296,8 +292,8 @@
         :blur-type     :transparent
         :overlay-color :transparent}
        [quo/divider-label
-        {:label            label
+        {:chevron :left}
-         :chevron-position :left}]])))
+        label]])))
 
 (defn page-nav-right-section-buttons
   [id]

src/status_im2/contexts/quo_preview/dividers/divider_label.cljs

@@ -4,26 +4,48 @@
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:type :text :key :label}
+  [{:key  :label
-   {:type :text :key :counter-value}
+    :type :text}
-   {:type :boolean :key :increase-padding-top?}
+   {:key     :chevron
-   {:type :boolean :key :blur?}
-   {:key     :chevron-position
     :type    :select
-    :options [{:key :left}
+    :options [{:key   :left
-              {:key :right}]}])
+               :value "Left"}
+              {:key   :right
+               :value "Right"}
+              {:key   nil
+               :value "None"}]}
+   {:key     :chevron-icon
+    :type    :select
+    :options [{:key   :i/chevron-down
+               :value "Chevron Down"}
+              {:key   :i/chevron-right
+               :value "Chevron Right"}]}
+   {:key  :tight?
+    :type :boolean}
+   {:key  :counter?
+    :type :boolean}
+   {:key  :counter-value
+    :type :text}
+   {:key  :blur?
+    :type :boolean}])
 
 (defn view
   []
-  (let [state (reagent/atom {:blur?                 false
+  (let [state (reagent/atom {:label         "Welcome"
-                             :chevron-position      :left
+                             :chevron       nil
-                             :counter-value         "0"
+                             :chevron-icon  nil
-                             :increase-padding-top? true
+                             :tight?        true
-                             :label                 "Welcome"})]
+                             :counter?      false
+                             :counter-value 0
+                             :blur?         false})]
     (fn []
       [preview/preview-container
        {:state                 state
         :descriptor            descriptor
         :blur?                 (:blur? @state)
         :show-blur-background? true}
-       [quo/divider-label @state]])))
+       [quo/divider-label
+        (assoc @state
+               :on-press
+               #(js/alert "Divider label pressed!"))
+        (:label @state)]])))

src/status_im2/contexts/syncing/setup_syncing/view.cljs

@@ -131,9 +131,7 @@
                :icon-left       :i/copy}
               (i18n/label :t/copy-qr)]])]]
         [rn/view {:style style/sync-code}
-         [quo/divider-label
+         [quo/divider-label {:tight? false} (i18n/label :t/have-a-sync-code?)]
-          {:label                 (i18n/label :t/have-a-sync-code?)
-           :increase-padding-top? true}]
          [quo/action-drawer
           [[{:icon     :i/scan
              :on-press #(rf/dispatch [:navigate-to :scan-sync-code-page])