New component: Link Preview (#15732)

Fixes https://github.com/status-im/status-mobile/issues/15731

Figma > Design System > Links:
https://www.figma.com/file/WQZcp6S0EnzxdTL4taoKDv/Design-System-for-Mobile?node-id=5626-159413&t=ghr8u97I2GNX8YZY-0

src/quo2/components/links/link_preview/component_spec.cljs

@@ -0,0 +1,43 @@
+(ns quo2.components.links.link-preview.component-spec
+  (:require [quo2.components.links.link-preview.view :as view]
+            [test-helpers.component :as h]))
+
+(def props
+  {:title       "Some title"
+   :description "Some description"
+   :link        "status.im"
+   :thumbnail   "data:image/png,whatever"})
+
+(h/describe "Links - Link Preview"
+  (h/test "default render"
+    (h/render [view/view])
+    (h/is-truthy (h/query-by-label-text :link-preview))
+    (h/is-null (h/query-by-label-text :button-enable-preview)))
+
+  (h/test "renders with most common props"
+    (h/render [view/view props])
+    (h/is-truthy (h/query-by-text (:title props)))
+    (h/is-truthy (h/query-by-text (:description props)))
+    (h/is-truthy (h/query-by-text (:link props)))
+    (h/is-truthy (h/query-by-label-text :thumbnail)))
+
+  (h/test "does not render thumbnail if prop is not present"
+    (h/render [view/view (dissoc props :thumbnail)])
+    (h/is-null (h/query-by-label-text :thumbnail)))
+
+  (h/test "shows button to enable preview when preview is disabled"
+    (h/render [view/view
+               (assoc props
+                      :enabled?      false
+                      :disabled-text "I'm disabled")])
+    (h/is-truthy (h/query-by-label-text :button-enable-preview))
+    (h/is-truthy (h/query-by-text "I'm disabled")))
+
+  (h/test "on-enable event"
+    (let [on-enable (h/mock-fn)]
+      (h/render [view/view
+                 (assoc props
+                        :enabled?  false
+                        :on-enable on-enable)])
+      (h/fire-event :press (h/get-by-label-text :button-enable-preview))
+      (h/was-called on-enable))))

src/quo2/components/links/link_preview/style.cljs

@@ -0,0 +1,43 @@
+(ns quo2.components.links.link-preview.style
+  (:require
+    [quo2.foundations.colors :as colors]))
+
+(defn container
+  [preview-enabled?]
+  (merge {:border-width       1
+          :border-color       (colors/theme-colors colors/neutral-20 colors/neutral-80)
+          :background-color   (colors/theme-colors colors/white colors/neutral-80-opa-40)
+          :border-radius      16
+          :padding-horizontal 12
+          :padding-top        10
+          :padding-bottom     12}
+         (when-not preview-enabled?
+           {:height          139
+            :align-items     :center
+            :justify-content :center})))
+
+(def header-container
+  {:flex-direction :row
+   :align-items    :center})
+
+(def title
+  {:flex          1
+   :margin-bottom 2})
+
+(defn link
+  []
+  {:margin-top 8
+   :color      (colors/theme-colors colors/neutral-50 colors/neutral-40)})
+
+(defn thumbnail
+  [size]
+  {:width         "100%"
+   :height        (if (= size :large) 271 139)
+   :margin-top    12
+   :border-radius 12})
+
+(def logo
+  {:margin-right  6
+   :width         16
+   :height        16
+   :border-radius 8})

src/quo2/components/links/link_preview/view.cljs

@@ -0,0 +1,77 @@
+(ns quo2.components.links.link-preview.view
+  (:require [quo2.components.buttons.button :as button]
+            [quo2.components.links.link-preview.style :as style]
+            [quo2.components.markdown.text :as text]
+            [react-native.core :as rn]))
+
+(defn- button-disabled
+  [disabled-text on-enable]
+  [button/button
+   {:before              :i/reveal
+    :size                32
+    :type                :grey
+    :on-press            on-enable
+    :accessibility-label :button-enable-preview}
+   disabled-text])
+
+(defn- description-comp
+  [description]
+  [text/text
+   {:size                :paragraph-2
+    :number-of-lines     3
+    :accessibility-label :description}
+   description])
+
+(defn- link-comp
+  [link]
+  [text/text
+   {:size                :paragraph-2
+    :weight              :medium
+    :style               (style/link)
+    :accessibility-label :link}
+   link])
+
+(defn- title-comp
+  [title]
+  [text/text
+   {:size                :paragraph-1
+    :number-of-lines     1
+    :weight              :semi-bold
+    :style               style/title
+    :accessibility-label :title}
+   title])
+
+(defn- thumbnail-comp
+  [thumbnail size]
+  [rn/image
+   {:style               (style/thumbnail size)
+    :source              (if (string? thumbnail)
+                           {:uri thumbnail}
+                           thumbnail)
+    :accessibility-label :thumbnail}])
+
+(defn- logo-comp
+  [logo]
+  [rn/image
+   {:accessibility-label :logo
+    :source              logo
+    :style               style/logo}])
+
+(defn view
+  [{:keys [title logo description link thumbnail
+           enabled? on-enable disabled-text
+           container-style thumbnail-size]
+    :or   {enabled? true}}]
+  [rn/view
+   {:style               (merge (style/container enabled?) container-style)
+    :accessibility-label :link-preview}
+   (if enabled?
+     [:<>
+      [rn/view {:style style/header-container}
+       [logo-comp logo]
+       [title-comp title]]
+      [description-comp description]
+      [link-comp link]
+      (when thumbnail
+        [thumbnail-comp thumbnail thumbnail-size])]
+     [button-disabled disabled-text on-enable])])

src/quo2/core.cljs

@@ -38,6 +38,7 @@
     quo2.components.inputs.title-input.view
     quo2.components.links.url-preview-list.view
     quo2.components.links.url-preview.view
+    quo2.components.links.link-preview.view
     quo2.components.list-items.channel
     quo2.components.list-items.menu-item
     quo2.components.list-items.preview-list
@@ -210,3 +211,4 @@
 ;;;; LINKS
 (def url-preview quo2.components.links.url-preview.view/view)
 (def url-preview-list quo2.components.links.url-preview-list.view/view)
+(def link-preview quo2.components.links.link-preview.view/view)

src/quo2/core_spec.cljs

@@ -17,6 +17,7 @@
     [quo2.components.inputs.title-input.component-spec]
     [quo2.components.links.url-preview-list.component-spec]
     [quo2.components.links.url-preview.component-spec]
+    [quo2.components.links.link-preview.component-spec]
     [quo2.components.markdown.--tests--.text-component-spec]
     [quo2.components.notifications.notification.component-spec]
     [quo2.components.onboarding.small-option-card.component-spec]

src/status_im2/contexts/quo_preview/links/link_preview.cljs

@@ -0,0 +1,85 @@
+(ns status-im2.contexts.quo-preview.links.link-preview
+  (:require [clojure.string :as string]
+            [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
+            [status-im2.common.resources :as resources]
+            [status-im2.contexts.quo-preview.preview :as preview]
+            utils.number))
+
+(def descriptor
+  [{:label "Title"
+    :key   :title
+    :type  :text}
+   {:label "Description"
+    :key   :description
+    :type  :text}
+   {:label "Link"
+    :key   :link
+    :type  :text}
+   {:label "Container width"
+    :key   :width
+    :type  :text}
+   {:label "Disabled text"
+    :key   :disabled-text
+    :type  :text}
+   {:label "Enabled?"
+    :key   :enabled?
+    :type  :boolean}
+   {:label   "Thumbnail"
+    :key     :thumbnail
+    :type    :select
+    :options (mapv (fn [k]
+                     {:key   k
+                      :value (string/capitalize (name k))})
+                   (keys resources/mock-images))}
+   {:label   "Thumbnail size"
+    :key     :thumbnail-size
+    :type    :select
+    :options [{:key   :normal
+               :value :normal}
+              {:key   :large
+               :value :large}]}])
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom
+               {:title          "Rarible - NFT Marketplace"
+                :description    "Turn your products or services into publicly tradeable items"
+                :link           "rarible.com"
+                :thumbnail      :collectible
+                :width          "295"
+                :enabled?       true
+                :thumbnail-size :normal
+                :disabled-text  "Enable Preview"})]
+    (fn []
+      (let [width     (utils.number/parse-int (:width @state) 295)
+            thumbnail (get resources/mock-images (:thumbnail @state))]
+        [rn/view {:style {:margin-bottom 20}}
+         [preview/customizer state descriptor]
+         [rn/view
+          {:style {:align-items :center
+                   :margin-top  20}}
+          [quo/link-preview
+           {:logo            (resources/get-mock-image :status-logo)
+            :title           (:title @state)
+            :description     (:description @state)
+            :enabled?        (:enabled? @state)
+            :on-enable       #(js/alert "Button pressed")
+            :disabled-text   (:disabled-text @state)
+            :link            (:link @state)
+            :thumbnail       thumbnail
+            :thumbnail-size  (:thumbnail-size @state)
+            :container-style {:width width}}]]]))))
+
+(defn preview
+  []
+  [rn/view
+   {:style {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)
+            :flex             1}}
+   [rn/flat-list
+    {:flex                         1
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/main.cljs

@@ -45,6 +45,7 @@
     [status-im2.contexts.quo-preview.inputs.title-input :as title-input]
     [status-im2.contexts.quo-preview.links.url-preview :as url-preview]
     [status-im2.contexts.quo-preview.links.url-preview-list :as url-preview-list]
+    [status-im2.contexts.quo-preview.links.link-preview :as link-preview]
     [status-im2.contexts.quo-preview.list-items.channel :as channel]
     [status-im2.contexts.quo-preview.list-items.preview-lists :as preview-lists]
     [status-im2.contexts.quo-preview.list-items.user-list :as user-list]
@@ -200,7 +201,10 @@
                             :component url-preview/preview}
                            {:name      :url-preview-list
                             :options   {:insets {:top? true}}
-                            :component url-preview-list/preview}]
+                            :component url-preview-list/preview}
+                           {:name      :link-preview
+                            :options   {:insets {:top? true}}
+                            :component link-preview/preview}]
    :list-items            [{:name      :channel
                             :insets    {:top false}
                             :component channel/preview-channel}