From 5148a3c748daf3e1f9ee6d98df43f56d891c5dd8 Mon Sep 17 00:00:00 2001 From: Ajay Sivan Date: Thu, 24 Aug 2023 12:29:26 -0700 Subject: [PATCH] Quo divider-label component refactor (#17035) --- .../components/dividers/divider_label.cljs | 90 ------------------- .../divider_label/component_spec.cljs | 20 +++++ .../dividers/divider_label/style.cljs | 39 ++++++++ .../dividers/divider_label/view.cljs | 60 +++++++++++++ .../divider_label_component_spec.cljs | 45 ---------- src/quo2/core.cljs | 4 +- src/quo2/core_spec.cljs | 2 +- src/status_im2/common/contact_list/view.cljs | 2 +- .../photo_selector/album_selector/view.cljs | 4 +- .../contexts/communities/overview/view.cljs | 16 ++-- .../quo_preview/dividers/divider_label.cljs | 48 +++++++--- .../contexts/syncing/setup_syncing/view.cljs | 4 +- 12 files changed, 167 insertions(+), 167 deletions(-) delete mode 100644 src/quo2/components/dividers/divider_label.cljs create mode 100644 src/quo2/components/dividers/divider_label/component_spec.cljs create mode 100644 src/quo2/components/dividers/divider_label/style.cljs create mode 100644 src/quo2/components/dividers/divider_label/view.cljs delete mode 100644 src/quo2/components/dividers/divider_label_component_spec.cljs diff --git a/src/quo2/components/dividers/divider_label.cljs b/src/quo2/components/dividers/divider_label.cljs deleted file mode 100644 index e84e936470..0000000000 --- a/src/quo2/components/dividers/divider_label.cljs +++ /dev/null @@ -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)) diff --git a/src/quo2/components/dividers/divider_label/component_spec.cljs b/src/quo2/components/dividers/divider_label/component_spec.cljs new file mode 100644 index 0000000000..96b5f6776d --- /dev/null +++ b/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)))) diff --git a/src/quo2/components/dividers/divider_label/style.cljs b/src/quo2/components/dividers/divider_label/style.cljs new file mode 100644 index 0000000000..866137c2fb --- /dev/null +++ b/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}) diff --git a/src/quo2/components/dividers/divider_label/view.cljs b/src/quo2/components/dividers/divider_label/view.cljs new file mode 100644 index 0000000000..4d5b8739e4 --- /dev/null +++ b/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])) diff --git a/src/quo2/components/dividers/divider_label_component_spec.cljs b/src/quo2/components/dividers/divider_label_component_spec.cljs deleted file mode 100644 index 89167b4782..0000000000 --- a/src/quo2/components/dividers/divider_label_component_spec.cljs +++ /dev/null @@ -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)))) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index d067440a5a..093ed4bfda 100644 --- a/src/quo2/core.cljs +++ b/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) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 5fa0810941..d1d4523285 100644 --- a/src/quo2/core_spec.cljs +++ b/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] diff --git a/src/status_im2/common/contact_list/view.cljs b/src/status_im2/common/contact_list/view.cljs index 78571d641e..8cd138479c 100644 --- a/src/status_im2/common/contact_list/view.cljs +++ b/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]) diff --git a/src/status_im2/contexts/chat/photo_selector/album_selector/view.cljs b/src/status_im2/contexts/chat/photo_selector/album_selector/view.cljs index 0fd1edf929..6494ada7e9 100644 --- a/src/status_im2/contexts/chat/photo_selector/album_selector/view.cljs +++ b/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] diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs index ee5672fdec..95b0d396d0 100644 --- a/src/status_im2/contexts/communities/overview/view.cljs +++ b/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 - :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}]) + {:on-press #(collapse-category community-id category-id collapsed?) + :chevron-icon (if collapsed? :i/chevron-right :i/chevron-down) + :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-position :left}]]))) + {:chevron :left} + label]]))) (defn page-nav-right-section-buttons [id] diff --git a/src/status_im2/contexts/quo_preview/dividers/divider_label.cljs b/src/status_im2/contexts/quo_preview/dividers/divider_label.cljs index cc492bc33d..9b0206d4a2 100644 --- a/src/status_im2/contexts/quo_preview/dividers/divider_label.cljs +++ b/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} - {:type :text :key :counter-value} - {:type :boolean :key :increase-padding-top?} - {:type :boolean :key :blur?} - {:key :chevron-position + [{:key :label + :type :text} + {:key :chevron :type :select - :options [{:key :left} - {:key :right}]}]) + :options [{:key :left + :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 - :chevron-position :left - :counter-value "0" - :increase-padding-top? true - :label "Welcome"})] + (let [state (reagent/atom {:label "Welcome" + :chevron nil + :chevron-icon nil + :tight? true + :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)]]))) diff --git a/src/status_im2/contexts/syncing/setup_syncing/view.cljs b/src/status_im2/contexts/syncing/setup_syncing/view.cljs index 459f437540..3ce1abd073 100644 --- a/src/status_im2/contexts/syncing/setup_syncing/view.cljs +++ b/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 - {:label (i18n/label :t/have-a-sync-code?) - :increase-padding-top? true}] + [quo/divider-label {:tight? false} (i18n/label :t/have-a-sync-code?)] [quo/action-drawer [[{:icon :i/scan :on-press #(rf/dispatch [:navigate-to :scan-sync-code-page])