status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
Icaro Motta 2023-04-25 13:48:25 -03:00 committed by GitHub
parent 30f0b436e9
commit 68f360bbf6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 256 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/quo2/components/links/link_preview/component_spec.cljs Normal file
View File

@ -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))))

43
src/quo2/components/links/link_preview/style.cljs Normal file
View File

@ -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})

77
src/quo2/components/links/link_preview/view.cljs Normal file
View File

@ -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])])

2
src/quo2/core.cljs
View File

@ -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)

1
src/quo2/core_spec.cljs
View File

@ -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]

85
src/status_im2/contexts/quo_preview/links/link_preview.cljs Normal file
View File

@ -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}]])

6
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -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}