From 1f6f907d5751a9d5241338261365eb1ebf3b947b Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Mon, 3 Jul 2023 21:08:19 +0100 Subject: [PATCH] feat: add markdown list component to quo2 (#16411) --- src/quo2/components/counter/step/style.cljs | 10 +-- src/quo2/components/counter/step/view.cljs | 12 ++- .../markdown/list/component_spec.cljs | 38 +++++++++ src/quo2/components/markdown/list/style.cljs | 15 ++++ src/quo2/components/markdown/list/view.cljs | 65 +++++++++++++++ src/quo2/core.cljs | 6 +- src/quo2/core_spec.cljs | 1 + src/status_im2/contexts/quo_preview/main.cljs | 6 +- .../contexts/quo_preview/markdown/list.cljs | 80 +++++++++++++++++++ 9 files changed, 222 insertions(+), 11 deletions(-) create mode 100644 src/quo2/components/markdown/list/component_spec.cljs create mode 100644 src/quo2/components/markdown/list/style.cljs create mode 100644 src/quo2/components/markdown/list/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/markdown/list.cljs diff --git a/src/quo2/components/counter/step/style.cljs b/src/quo2/components/counter/step/style.cljs index 766409cae9..7722a36b35 100644 --- a/src/quo2/components/counter/step/style.cljs +++ b/src/quo2/components/counter/step/style.cljs @@ -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)) diff --git a/src/quo2/components/counter/step/view.cljs b/src/quo2/components/counter/step/view.cljs index c58664e30a..5b1c06f671 100644 --- a/src/quo2/components/counter/step/view.cljs +++ b/src/quo2/components/counter/step/view.cljs @@ -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)) diff --git a/src/quo2/components/markdown/list/component_spec.cljs b/src/quo2/components/markdown/list/component_spec.cljs new file mode 100644 index 0000000000..7863a98816 --- /dev/null +++ b/src/quo2/components/markdown/list/component_spec.cljs @@ -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")))) diff --git a/src/quo2/components/markdown/list/style.cljs b/src/quo2/components/markdown/list/style.cljs new file mode 100644 index 0000000000..dcdf6c5071 --- /dev/null +++ b/src/quo2/components/markdown/list/style.cljs @@ -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}) diff --git a/src/quo2/components/markdown/list/view.cljs b/src/quo2/components/markdown/list/view.cljs new file mode 100644 index 0000000000..638c650b9e --- /dev/null +++ b/src/quo2/components/markdown/list/view.cljs @@ -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)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index e17d50133b..402f9dcb6c 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -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) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index b16d32b8c9..0cc4959ab0 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -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] diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 514d1b03eb..0f0e5fc5bc 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -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} diff --git a/src/status_im2/contexts/quo_preview/markdown/list.cljs b/src/status_im2/contexts/quo_preview/markdown/list.cljs new file mode 100644 index 0000000000..3c097eb55c --- /dev/null +++ b/src/status_im2/contexts/quo_preview/markdown/list.cljs @@ -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}]])