- initial component structure and styles (#15922)

feat: add quo2 settings-list component

src/quo2/components/settings/settings_list/style.cljs

@@ -0,0 +1,46 @@
+(ns quo2.components.settings.settings-list.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def title-container
+  {:flex 1})
+
+(defn title
+  []
+  {:color (colors/theme-colors
+           colors/neutral-100
+           colors/white)})
+
+(def icon
+  {:margin-right 12})
+
+(def item-container
+  {:justify-content    :space-between
+   :height             48
+   :flex-direction     :row
+   :align-items        :center
+   :padding-horizontal 12
+   :padding-vertical   13})
+
+(defn dot
+  []
+  {:width            15
+   :height           15
+   :border-radius    8
+   :margin-right     14.5
+   :background-color (colors/theme-colors (colors/custom-color :blue 50)
+                                          (colors/custom-color :blue 60))})
+
+(defn community-icon
+  [index]
+  {:width         24
+   :height        24
+   :border-width  1
+   :border-color  (colors/theme-colors colors/white colors/black)
+   :border-radius 12
+   :position      :absolute
+   :top           "-50%"
+   :right         (* 20 index)})
+
+(def communities-container
+  {:flex         1
+   :margin-right 12})

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

@@ -0,0 +1,119 @@
+(ns quo2.components.settings.settings-list.view
+  (:require [quo2.components.settings.settings-list.style :as style]
+            [quo2.components.icon :as icons]
+            [quo2.components.selectors.selectors.view :as selectors]
+            [quo2.components.buttons.button :as button]
+            [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]))
+
+(defn settings-title
+  [title]
+  [rn/view
+   {:style style/title-container}
+   [text/text
+    {:accessibility-label :setting-item-name-text
+     :ellipsize-mode      :tail
+     :style               (style/title)
+     :number-of-lines     1
+     :weight              :medium
+     :size                :paragraph-1}
+    title]])
+
+(defn browser-context-icon
+  []
+  [rn/view
+   [icons/icon :browser-context
+    {:container-style style/icon
+     :color           (colors/theme-colors
+                       colors/neutral-50
+                       colors/neutral-40)}]])
+
+(def chevron-icon
+  [rn/view
+   [icons/icon :chevron-right
+    {:color (colors/theme-colors
+             colors/neutral-50
+             colors/neutral-40)}]])
+
+(defn toggle-button
+  [{:keys [checked?
+           on-change]}]
+  [selectors/toggle
+   {:checked?  checked?
+    :on-change (fn [new-value] (on-change new-value))}])
+
+(def badge-icon
+  [rn/view
+   {:style (style/dot)}])
+
+(defn right-button
+  [{:keys [title
+           on-press]}]
+  [button/button
+   {:type     :outline
+    :on-press on-press
+    :size     24}
+   title])
+
+(defn communities-icons
+  [{:keys [data
+           icon-style]}]
+  (let [communities-count (dec (count data))]
+    [rn/view
+     {:style style/communities-container}
+     (map-indexed
+      (fn [index {:keys [source accessibility-label]}]
+        [rn/image
+         {:key                 source
+          :source              (if (string? source)
+                                 {:uri source}
+                                 source)
+          :accessibility-label accessibility-label
+          :style               (merge (style/community-icon (- communities-count index)) icon-style)}])
+      data)]))
+
+(defn settings-list
+  "Options
+   - `title` String to show in the center of the component, right to the icon and left to optional gadgets.
+   - `on-press` Callback called when the component is pressed.
+   - `accessibility-label` String to use as accessibility-label for VoiceOver.
+   - `left-icon` Symbol to indicate icon type on the left side of the component.
+   - `chevron?` Boolean to show/hide chevron at the right border of the component.
+   - `toggle-prop` Map with the following keys:
+       `checked?` Boolean value to set check or unchecked toggle.
+       `on-change` Callback called when user toggles toggle. Will pass the new toggle value to the callback
+   - `badge?` Boolean to show/hide badge.
+   - `button-props` Map with the following keys:
+       `title` String to show as button text.
+       `on-press` Callback called when button is pressed.
+   - `communities-props` Map with the following keys:
+       `data` Array of maps containg source of the community asset.
+   - `style` Styles map to be merge with default container styles."
+  [{:keys [title
+           on-press
+           accessibility-label
+           left-icon
+           chevron?
+           toggle-props
+           badge?
+           button-props
+           communities-props
+           container-style]}]
+  [rn/touchable-without-feedback
+   {:on-press            on-press
+    :accessibility-label accessibility-label}
+   [rn/view
+    {:style (merge style/item-container container-style)}
+    (case left-icon
+      ;; TODO: Add Icon Avatar on next variants development
+      :browser-context (browser-context-icon)
+      nil)
+    [settings-title title]
+    (when toggle-props
+      (toggle-button toggle-props))
+    (when badge? badge-icon)
+    (when button-props
+      (right-button button-props))
+    (when communities-props (communities-icons communities-props))
+    (when chevron? chevron-icon)]])

src/quo2/core.cljs

@@ -83,7 +83,8 @@
     quo2.components.tags.tag
     quo2.components.tags.tags
     quo2.components.tags.token-tag
-    quo2.components.text-combinations.title.view))
+    quo2.components.text-combinations.title.view
+    quo2.components.settings.settings-list.view))
 
 (def text quo2.components.markdown.text/text)
 (def icon quo2.components.icon/icon)
@@ -198,6 +199,7 @@
 ;;;; SETTINGS
 (def privacy-option quo2.components.settings.privacy-option/card)
 (def account quo2.components.settings.accounts.view/account)
+(def settings-list quo2.components.settings.settings-list.view/settings-list)
 
 ;;;; SHARE
 (def qr-code quo2.components.share.qr-code.view/qr-code)

src/status_im2/common/resources.cljs

@@ -28,11 +28,13 @@
    :community-banner     (js/require "../resources/images/mock2/community-banner.png")
    :community-logo       (js/require "../resources/images/mock2/community-logo.png")
    :community-cover      (js/require "../resources/images/mock2/community-cover.png")
+   :decentraland         (js/require "../resources/images/mock2/decentraland.png")
    :gif                  (js/require "../resources/images/mock2/gif.png")
    :photo1               (js/require "../resources/images/mock2/photo1.png")
    :photo2               (js/require "../resources/images/mock2/photo2.png")
    :photo3               (js/require "../resources/images/mock2/photo3.png")
    :qr-code              (js/require "../resources/images/mock2/qr-code.png")
+   :rarible              (js/require "../resources/images/mock2/rarible.png")
    :small-opt-card-icon  (js/require "../resources/images/mock2/small_opt_card_icon.png")
    :small-opt-card-main  (js/require "../resources/images/mock2/small_opt_card_main.png")
    :status-logo          (js/require "../resources/images/mock2/status-logo.png")

src/status_im2/contexts/quo_preview/main.cljs

@@ -74,6 +74,7 @@
     [status-im2.contexts.quo-preview.selectors.filter :as filter]
     [status-im2.contexts.quo-preview.selectors.selectors :as selectors]
     [status-im2.contexts.quo-preview.settings.accounts :as accounts]
+    [status-im2.contexts.quo-preview.settings.settings-list :as settings-list]
     [status-im2.contexts.quo-preview.settings.privacy-option :as privacy-option]
     [status-im2.contexts.quo-preview.share.qr-code :as qr-code]
     [status-im2.contexts.quo-preview.share.share-qr-code :as share-qr-code]
@@ -300,7 +301,10 @@
                             :component privacy-option/preview-options}
                            {:name      :accounts
                             :options   {:topBar {:visible true}}
-                            :component accounts/preview-accounts}]
+                            :component accounts/preview-accounts}
+                           {:name      :settings-list
+                            :options   {:topBar {:visible true}}
+                            :component settings-list/preview-settings-list}]
    :share                 [{:name      :qr-code
                             :options   {:topBar {:visible true}}
                             :component qr-code/preview-qr-code}

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

@@ -0,0 +1,70 @@
+(ns status-im2.contexts.quo-preview.settings.settings-list
+  (:require [quo2.components.settings.settings-list.view :as quo]
+            [react-native.core :as rn]
+            [status-im2.common.resources :as resources]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:label "Account name:"
+    :key   :title
+    :type  :text}
+   {:label "Chevron:"
+    :key   :chevron?
+    :type  :boolean}
+   {:label "Badge:"
+    :key   :badge?
+    :type  :boolean}
+   {:label "Toggle:"
+    :key   :toggle-props
+    :type  :boolean}
+   {:label "Communities"
+    :key   :communities-props
+    :type  :boolean}
+   {:label "Button"
+    :key   :button-props
+    :type  :boolean
+   }])
+
+(defn get-mock-data
+  [data]
+  (when (:toggle-props data) (js/console.warn data))
+  (merge
+   data
+   {:toggle-props (when (:toggle-props data)
+                    {:checked?  true
+                     :on-change (fn [new-value] (js/alert new-value))})
+    :button-props (when (:button-props data)
+                    {:title "Button" :on-press (fn [] (js/alert "Button pressed"))})
+    :communities-props
+    (when (:communities-props data)
+      {:data
+       [{:source (resources/mock-images :rarible)}
+        {:source (resources/mock-images :decentraland)}
+        {:source (resources/mock-images :coinbase)}]})}))
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom {:title               "Account"
+                             :accessibility-label :settings-list-item
+                             :left-icon           :browser-context
+                             :chevron?            true
+                             :on-press            (fn [] (js/alert "Settings list item pressed"))})]
+    (fn []
+      [rn/view
+       {:margin-bottom 50}
+       [preview/customizer state descriptor]
+       [rn/view
+        {:padding-vertical   100
+         :padding-horizontal 40
+         :align-items        :center}
+        [quo/settings-list (get-mock-data @state)]]])))
+
+(defn preview-settings-list
+  []
+  [rn/view {:style {:flex 1}}
+   [rn/flat-list
+    {:flex                         1
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])