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

feat: add markdown list component to quo2 (#16411)

This commit is contained in:
Jamie Caprani 2023-07-03 21:08:19 +01:00 committed by GitHub
parent 97b254c514
commit 1f6f907d57
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 222 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/quo2/components/counter/step/style.cljs
View File

@ -14,11 +14,11 @@
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-10 theme)
(colors/theme-colors colors/neutral-20 colors/neutral-80 theme)))
(def active-background-color (colors/custom-color :blue 50 10))
(def complete-background-color (colors/custom-color :blue 50))
(defn active-background-color [customization-color] (colors/custom-color customization-color 50 10))
(defn complete-background-color [customization-color] (colors/custom-color customization-color 50))
(defn container
[size type in-blur-view? theme]
[{:keys [size type in-blur-view? theme customization-color]}]
(cond-> container-base
(#{1 2} size) (assoc :width 20)
(= size 3) (assoc :width 28)
@ -28,10 +28,10 @@
:border-color (neutral-border-color in-blur-view? theme))
(= type :active)
(assoc :background-color active-background-color)
(assoc :background-color (active-background-color customization-color))
(= type :complete)
(assoc :background-color complete-background-color)))
(assoc :background-color (complete-background-color customization-color))))
(defn text-color
([type] (text-color type nil))

12
src/quo2/components/counter/step/view.cljs
View File

@ -6,8 +6,8 @@
[react-native.core :as rn]
[utils.number]))
(defn themed-step
[{:keys [type accessibility-label theme in-blur-view?]} value]
(defn step-internal
[{:keys [type accessibility-label theme in-blur-view? customization-color]} value]
(let [type (or type :neutral)
value (utils.number/parse-int value)
label (str value)
@ -15,10 +15,14 @@
[rn/view
{:accessible true
:accessibility-label (or accessibility-label :step-counter)
:style (style/container size type in-blur-view? theme)}
:style (style/container {:size size
:type type
:in-blur-view? in-blur-view?
:theme theme
:customization-color customization-color})}
[text/text
{:weight :medium
:size :label
:style {:color (style/text-color type theme)}} label]]))
(def step (theme/with-theme themed-step))
(def step (theme/with-theme step-internal))

38
src/quo2/components/markdown/list/component_spec.cljs Normal file
View File

@ -0,0 +1,38 @@
(ns quo2.components.markdown.list.component-spec
(:require [quo2.components.markdown.list.view :as list]
[test-helpers.component :as h]))
(h/describe "tests for markdown/list component"
(h/test "renders component with title"
(h/render [list/view {:title "test title"}])
(h/is-truthy (h/get-by-text "test title")))
(h/test "renders component with description"
(h/render [list/view
{:title "test title"
:description "test description"}])
(h/is-truthy (h/get-by-text "test description")))
(h/test "renders component with title and description"
(h/render [list/view
{:title "test title"
:description "test description"}])
(h/is-truthy (h/get-by-text "test title"))
(h/is-truthy (h/get-by-text "test description")))
(h/test "renders step component when step-number is valid and type is step"
(h/render [list/view
{:type :step
:step-number 1}])
(h/is-truthy (h/get-by-label-text :step-counter)))
(h/test "renders decription with a context tag component and description after the tag"
(h/render [list/view
{:step-number 1
:description "Lorem ipsum "
:tag-name "dolor"
:description-after-tag "text after tag"}])
(h/is-truthy (h/get-by-text "Lorem ipsum"))
(h/is-truthy (h/get-by-label-text :user-avatar))
(h/is-truthy (h/get-by-text "dolor"))
(h/is-truthy (h/get-by-text "text after tag"))))

15
src/quo2/components/markdown/list/style.cljs Normal file
View File

@ -0,0 +1,15 @@
(ns quo2.components.markdown.list.style)
(defn container
[container-style]
(merge container-style
{:flex-direction :row
:flex 1
:align-items :flex-start}))
(def index
{:margin-left 5})
(def text-container
{:margin-left 8
:flex 1})

65
src/quo2/components/markdown/list/view.cljs Normal file
View File

@ -0,0 +1,65 @@
(ns quo2.components.markdown.list.view
(:require [react-native.core :as rn]
[quo2.components.markdown.text :as text]
[quo2.components.counter.step.view :as step]
[quo2.components.markdown.list.style :as style]
[quo2.components.icon :as icon]
[quo2.foundations.colors :as colors]
[quo2.theme :as theme]
[quo2.components.tags.context-tag.view :as context-tag]))
(defn get-colors
[theme blur?]
(cond (and blur? (= theme :dark)) colors/white-opa-40
(= theme :dark) colors/neutral-50
:else colors/neutral-40))
(defn description-text
[{:keys [description tag-name tag-picture description-after-tag blur?]}]
(if-not tag-name
[text/text
{:accessibility-label :list-item-description
:size :paragraph-2}
description]
[rn/view {:style {:flex-direction :row :align-items :center}}
[text/text
{:accessibility-label :list-item-description
:size :paragraph-2}
description]
[rn/view {:style {:margin-left 4}}
[context-tag/context-tag {:blur? blur?} tag-picture tag-name]]
[text/text
{:style {:margin-left 4}
:accessibility-label :list-item-description-after-tag
:size :paragraph-2}
description-after-tag]]))
(defn- internal-view
[{:keys [theme title description tag-picture tag-name description-after-tag step-number
customization-color type blur? container-style]
:or {type :bullet}}]
[rn/view {:style (style/container container-style)}
[rn/view {:style style/index}
(if (= type :step)
[step/step
{:in-blur-view? blur?
:customization-color customization-color
:type (if customization-color :complete :neutral)} step-number]
[icon/icon :i/bullet {:color (get-colors theme blur?)}])]
[rn/view {:style style/text-container}
(when title
[text/text
{:accessibility-label :list-item-title
:weight :semi-bold
:size :paragraph-2}
title])
(when description
[rn/view (when title {:style {:margin-top 0}})
[description-text
{:description description
:tag-name tag-name
:tag-picture tag-picture
:description-after-tag description-after-tag
:blur? blur?}]])]])
(def view (theme/with-theme internal-view))

6
src/quo2/core.cljs
View File

@ -49,6 +49,7 @@
quo2.components.list-items.preview-list
quo2.components.list-items.user-list
quo2.components.loaders.skeleton
quo2.components.markdown.list.view
quo2.components.markdown.text
quo2.components.messages.author.view
quo2.components.messages.gap
@ -91,7 +92,6 @@
quo2.components.settings.reorder-item.view
quo2.components.community.channel-actions))
(def text quo2.components.markdown.text/text)
(def icon quo2.components.icon/icon)
(def separator quo2.components.separator/separator)
(def header quo2.components.header/header)
@ -194,6 +194,10 @@
(def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
(def page-nav quo2.components.navigation.page-nav/page-nav)
;;;; MARKDOWN
(def markdown-list quo2.components.markdown.list.view/view)
(def text quo2.components.markdown.text/text)
;;;; NOTIFICATIONS
(def activity-log quo2.components.notifications.activity-log.view/view)
(def info-count quo2.components.notifications.info-count/info-count)

1
src/quo2/core_spec.cljs
View File

@ -23,6 +23,7 @@
[quo2.components.links.url-preview-list.component-spec]
[quo2.components.links.url-preview.component-spec]
[quo2.components.markdown.--tests--.text-component-spec]
[quo2.components.markdown.list.component-spec]
[quo2.components.notifications.notification.component-spec]
[quo2.components.onboarding.small-option-card.component-spec]
[quo2.components.password.tips.component-spec]

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

@ -54,6 +54,7 @@
[status-im2.contexts.quo-preview.list-items.preview-lists :as preview-lists]
[status-im2.contexts.quo-preview.list-items.user-list :as user-list]
[status-im2.contexts.quo-preview.markdown.text :as text]
[status-im2.contexts.quo-preview.markdown.list :as markdown-list]
[status-im2.contexts.quo-preview.messages.author :as messages-author]
[status-im2.contexts.quo-preview.messages.gap :as messages-gap]
[status-im2.contexts.quo-preview.messages.system-message :as system-message]
@ -245,7 +246,10 @@
:component user-list/preview-user-list}]
:markdown [{:name :texts
:options {:topBar {:visible true}}
:component text/preview-text}]
:component text/preview-text}
{:name :markdown-list
:options {:topBar {:visible true}}
:component markdown-list/preview-markdown-list}]
:messages [{:name :gap
:options {:topBar {:visible true}}
:component messages-gap/preview-messages-gap}

80
src/status_im2/contexts/quo_preview/markdown/list.cljs Normal file
View File

@ -0,0 +1,80 @@
(ns status-im2.contexts.quo-preview.markdown.list
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]
[status-im2.common.resources :as resources]))
(def descriptor
[{:label "Title:"
:key :title
:type :text}
{:label "Description:"
:key :description
:type :text}
{:label "Tag name:"
:key :tag-name
:type :text}
{:label "Description After Tag (Set tag name):"
:key :description-after-tag
:type :text}
{:label "Type: (step uses index)"
:key :type
:type :select
:options [{:key :bullet
:value :bullet}
{:key :step
:value :step}]}
{:label "Step Number:"
:key :step-number
:type :text}
{:label "Customization Color:"
:key :customization-color
:type :select
:options [{:key :blue
:value :blue}
{:key :army
:value :army}
{:key :none
:value :none}]}
{:label "Blur? (Dark only):"
:key :blur?
:type :boolean}])
(defn cool-preview
[]
(let [state (reagent/atom {:title "Be respectful"
:description "Lorem ipsum dolor sit amet."})]
(fn []
(let [{:keys [title step-number customization-color description tag-name description-after-tag type
blur?]} @state
tag-picture (when tag-name (resources/get-mock-image :monkey))]
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view
{:padding-vertical 60
:background-color (when blur? "#484F5E")}
[quo/markdown-list
{:type type
:blur? blur?
:title (when (pos? (count title)) title)
:step-number step-number
:description description
:tag-name tag-name
:tag-picture tag-picture
:description-after-tag description-after-tag
:customization-color customization-color}]]]]))))
(defn preview-markdown-list
[]
[rn/view
{:background-color
(colors/theme-colors colors/white colors/neutral-95)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])