From 68f360bbf6f52b3dcbb8072d2f626705633a878e Mon Sep 17 00:00:00 2001 From: Icaro Motta Date: Tue, 25 Apr 2023 13:48:25 -0300 Subject: [PATCH] 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 --- .../links/link_preview/component_spec.cljs | 43 ++++++++++ .../components/links/link_preview/style.cljs | 43 ++++++++++ .../components/links/link_preview/view.cljs | 77 +++++++++++++++++ src/quo2/core.cljs | 2 + src/quo2/core_spec.cljs | 1 + .../quo_preview/links/link_preview.cljs | 85 +++++++++++++++++++ src/status_im2/contexts/quo_preview/main.cljs | 6 +- 7 files changed, 256 insertions(+), 1 deletion(-) create mode 100644 src/quo2/components/links/link_preview/component_spec.cljs create mode 100644 src/quo2/components/links/link_preview/style.cljs create mode 100644 src/quo2/components/links/link_preview/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/links/link_preview.cljs diff --git a/src/quo2/components/links/link_preview/component_spec.cljs b/src/quo2/components/links/link_preview/component_spec.cljs new file mode 100644 index 0000000000..24c468bd3c --- /dev/null +++ b/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)))) diff --git a/src/quo2/components/links/link_preview/style.cljs b/src/quo2/components/links/link_preview/style.cljs new file mode 100644 index 0000000000..36d6b4b11b --- /dev/null +++ b/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}) diff --git a/src/quo2/components/links/link_preview/view.cljs b/src/quo2/components/links/link_preview/view.cljs new file mode 100644 index 0000000000..e5fa244b46 --- /dev/null +++ b/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])]) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 43a942d93c..3074d0cca2 100644 --- a/src/quo2/core.cljs +++ b/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) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index ba3d96d850..d1af5f7652 100644 --- a/src/quo2/core_spec.cljs +++ b/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] diff --git a/src/status_im2/contexts/quo_preview/links/link_preview.cljs b/src/status_im2/contexts/quo_preview/links/link_preview.cljs new file mode 100644 index 0000000000..38d9bbaa3d --- /dev/null +++ b/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}]]) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 7313d63bdc..a22f1bb389 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/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}