Implement status list item component (#22443)

Author: Parveshdhull

resources/images/icons2/20x20/[email protected]

@@ -0,0 +1,13 @@
+(ns quo.components.list-items.status-list-item.component-spec
+  (:require
+    [quo.components.list-items.status-list-item.view :as status-list-item]
+    [test-helpers.component :as h]))
+
+(h/describe "Status List Item"
+  (h/test "With title and description"
+    (h/render [status-list-item/view
+               {:status      :positive
+                :title       "Account"
+                :description "This is a description"}])
+    (h/is-truthy (h/get-by-text "Account"))
+    (h/is-truthy (h/get-by-text "This is a description"))))

resources/images/icons2/20x20/[email protected]

@@ -0,0 +1,12 @@
+(ns quo.components.list-items.status-list-item.schema)
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map {:closed true}
+      [:status [:enum :positive :negative]]
+      [:title [:maybe string?]]
+      [:description {:optional true} [:maybe string?]]
+      [:blur? {:optional true} [:maybe boolean?]]]]]
+   :any])

resources/images/icons2/20x20/[email protected]

@@ -0,0 +1,15 @@
+(ns quo.components.list-items.status-list-item.style
+  (:require [quo.foundations.colors :as colors]))
+
+(def container
+  {:padding-vertical   5
+   :padding-horizontal 20
+   :flex-direction     :row})
+
+(defn title
+  [theme]
+  {:color (colors/theme-colors colors/neutral-100 colors/white theme)})
+
+(defn description
+  [theme]
+  {:color (colors/theme-colors colors/neutral-50 colors/white-opa-40 theme)})

resources/images/icons2/20x20/[email protected]

@@ -0,0 +1,40 @@
+(ns quo.components.list-items.status-list-item.view
+  (:require
+    [clojure.string :as string]
+    [quo.components.icon :as quo.icons]
+    [quo.components.list-items.status-list-item.schema :as component-schema]
+    [quo.components.list-items.status-list-item.style :as style]
+    [quo.components.markdown.text :as text]
+    [quo.context :as quo.context]
+    [quo.foundations.colors :as colors]
+    [react-native.core :as rn]
+    [schema.core :as schema]))
+
+(defn view-internal
+  [{:keys [status title description]}]
+  (let [theme      (quo.context/use-theme)
+        positive?  (= status :positive)
+        icon-color (if positive?
+                     (colors/theme-colors colors/success-50 colors/success-60 theme)
+                     (colors/theme-colors colors/danger-50 colors/danger-60 theme))]
+    [rn/view
+     {:style               style/container
+      :accessibility-label :status-list-item}
+     [quo.icons/icon (if positive? :i/correct :i/warning)
+      {:size            20
+       :color           icon-color
+       :container-style {:margin-vertical 1}}]
+     [rn/view
+      {:style {:flex-direction :column :margin-left 8}}
+      [text/text
+       {:weight :regular
+        :size   :paragraph-1
+        :style  (style/title theme)} title]
+      (when-not (string/blank? description)
+        [text/text
+         {:weight :regular
+          :size   :paragraph-2
+          :style  (style/description theme)}
+         description])]]))
+
+(def view (schema/instrument #'view-internal component-schema/?schema))