-
Notifications
You must be signed in to change notification settings - Fork 985
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* Move docstring to be available while using `colors/resolve-color` * Add text combinations - username component and tests * Add username related svg icons
- Loading branch information
Showing
10 changed files
with
275 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
68 changes: 68 additions & 0 deletions
68
src/quo/components/text_combinations/username/component_spec.cljs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| (ns quo.components.text-combinations.username.component-spec | ||
| (:require [quo.components.text-combinations.username.view :as username] | ||
| [test-helpers.component :as h])) | ||
|
|
||
| (defn test-all-status | ||
| [component-to-render component-props] | ||
| (h/test "Verified status" | ||
| (h/render [component-to-render (assoc component-props :status :verified)]) | ||
| (h/is-truthy (h/get-by-label-text :username-status-icon))) | ||
|
|
||
| (h/test "Contact status" | ||
| (h/render [component-to-render (assoc component-props :status :contact)]) | ||
| (h/is-truthy (h/get-by-label-text :username-status-icon))) | ||
|
|
||
| (h/test "Untrustworthy status" | ||
| (h/render [component-to-render (assoc component-props :status :untrustworthy)]) | ||
| (h/is-truthy (h/get-by-label-text :username-status-icon))) | ||
|
|
||
| (h/test "Untrustworthy contact status" | ||
| (h/render [component-to-render (assoc component-props :status :untrustworthy-contact)]) | ||
| (let [icons (h/get-all-by-label-text :username-status-icon)] | ||
| (h/is-truthy (aget icons 0)) | ||
| (h/is-truthy (aget icons 1)))) | ||
|
|
||
| (h/test "Blocked status" | ||
| (h/render [component-to-render (assoc component-props :status :blocked)]) | ||
| (h/is-truthy (h/get-by-label-text :username-status-icon)))) | ||
|
|
||
| (h/describe "Text combinations - Username" | ||
| (h/test "Renders default" | ||
| (h/render [username/view {:username "Test username"}]) | ||
| (h/is-truthy (h/get-by-text "Test username"))) | ||
|
|
||
| (h/describe "Render different :name-type values" | ||
| (h/describe "default" | ||
| (let [props {:name-type :default | ||
| :username "Test username"}] | ||
|
|
||
| (h/test "default render" | ||
| (h/render [username/view props]) | ||
| (h/is-truthy (h/get-by-text "Test username"))) | ||
|
|
||
| (h/describe "All status are rendered" | ||
| (test-all-status username/view props)))) | ||
|
|
||
| (h/describe "ens" | ||
| (let [props {:name-type :ens | ||
| :username "test-username.eth"}] | ||
|
|
||
| (h/test "no status render" | ||
| (h/render [username/view props]) | ||
| (h/is-truthy (h/get-by-text "test-username.eth"))) | ||
|
|
||
| (h/describe "All status are rendered" | ||
| (test-all-status username/view props)))) | ||
|
|
||
| (h/describe "nickname" | ||
| (let [props {:name-type :nickname | ||
| :username "Nickname" | ||
| :name "Real name"}] | ||
|
|
||
| (h/test "no status render" | ||
| (h/render [username/view props]) | ||
| (h/is-truthy (h/get-by-text "Nickname")) | ||
| (h/is-truthy (h/get-by-text "Real name"))) | ||
|
|
||
| (h/describe "All status are rendered" | ||
| (test-all-status username/view props)))))) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| (ns quo.components.text-combinations.username.style | ||
| (:require [quo.foundations.colors :as colors])) | ||
|
|
||
| (def container | ||
| {:flex-direction :row | ||
| :height 32}) | ||
|
|
||
| (def username-text-container | ||
| {:flex-direction :row | ||
| :align-items :flex-end}) | ||
|
|
||
| (defn real-name-text | ||
| [theme blur?] | ||
| {:color (if blur? | ||
| (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme) | ||
| (colors/theme-colors colors/neutral-60 colors/neutral-40 theme))}) | ||
|
|
||
| (defn real-name-dot | ||
| [theme blur?] | ||
| (assoc (real-name-text theme blur?) :margin-horizontal 6)) | ||
|
|
||
| (defn status-icon-container | ||
| [name-type status] | ||
| (cond-> {:flex-direction :row | ||
| :margin-left 4} | ||
| (#{:default :ens} name-type) (assoc :margin-top 8 | ||
| :margin-bottom 4) | ||
| (= :nickname name-type) (assoc :margin-top 10 | ||
| :margin-bottom 2) | ||
| (= status :untrustworthy-contact) (assoc :margin-right 2))) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| (ns quo.components.text-combinations.username.view | ||
| (:require [quo.components.icon :as icon] | ||
| [quo.components.markdown.text :as text] | ||
| [quo.components.text-combinations.username.style :as style] | ||
| [quo.foundations.colors :as colors] | ||
| [quo.theme] | ||
| [react-native.core :as rn])) | ||
|
|
||
| (defn- username-text | ||
| [{:keys [theme name-type username blur?] | ||
| real-name :name}] | ||
| [rn/view {:style style/username-text-container} | ||
| [text/text | ||
| {:size :heading-1 | ||
| :weight :semi-bold} | ||
| username] | ||
| (when (= name-type :nickname) | ||
| [:<> | ||
| [text/text | ||
| {:style (style/real-name-dot theme blur?) | ||
| :size :paragraph-1 | ||
| :weight :medium} | ||
| "∙"] | ||
| [text/text | ||
| {:style (style/real-name-text theme blur?) | ||
| :size :paragraph-1 | ||
| :weight :medium} | ||
| real-name]])]) | ||
|
|
||
| (defn- icon-20 | ||
| [icon-name theme color] | ||
| [icon/icon icon-name | ||
| {:accessibility-label :username-status-icon | ||
| :size 20 | ||
| :color (colors/resolve-color color theme)}]) | ||
|
|
||
| (defn status-icon | ||
| [{:keys [theme name-type status] | ||
| :or {name-type :default}}] | ||
| [rn/view {:style (style/status-icon-container name-type status)} | ||
| (case status | ||
| :verified [icon-20 :i/verified theme :success] | ||
| :contact [icon-20 :i/contact theme :blue] | ||
| :untrustworthy [icon-20 :i/untrustworthy theme :danger] | ||
| :blocked [icon-20 :i/block theme :danger] | ||
| :untrustworthy-contact [:<> | ||
| [icon-20 :i/untrustworthy theme :danger] | ||
| [icon-20 :i/contact theme :blue]] | ||
| nil)]) | ||
|
|
||
| (defn view-internal | ||
| [props] | ||
| [rn/view {:style style/container} | ||
| [username-text props] | ||
| [status-icon props]]) | ||
|
|
||
| (def view (quo.theme/with-theme view-internal)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 52 additions & 0 deletions
52
src/status_im2/contexts/quo_preview/text_combinations/username.cljs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| (ns status-im2.contexts.quo-preview.text-combinations.username | ||
| (:require [quo.core :as quo] | ||
| [reagent.core :as reagent] | ||
| [status-im2.contexts.quo-preview.preview :as preview])) | ||
|
|
||
| (def descriptor | ||
| [{:key :name-type | ||
| :type :select | ||
| :options [{:key :default} | ||
| {:key :ens | ||
| :value "ENS"} | ||
| {:key :nickname}]} | ||
| {:key :username | ||
| :type :text} | ||
| {:key :name | ||
| :type :text} | ||
| {:key :status | ||
| :type :select | ||
| :options [{:key nil | ||
| :value "(Nothing)"} | ||
| {:key :verified} | ||
| {:key :contact} | ||
| {:key :untrustworthy} | ||
| {:key :untrustworthy-contact} | ||
| {:key :blocked}]} | ||
| {:key :blur? | ||
| :type :boolean}]) | ||
|
|
||
| (defn- set-username-based-on-name-type | ||
| [_ ratom {previous-type :name-type} {new-type :name-type}] | ||
| (when (not= previous-type new-type) | ||
| (swap! ratom assoc | ||
| :username | ||
| (if (= new-type :ens) | ||
| "juan.eth" | ||
| "Juanito Mdz")))) | ||
|
|
||
| (defn view | ||
| [] | ||
| (let [state (reagent/atom {:name-type :default | ||
| :username "Juanito Mdz" | ||
| :name "Juan Méndez" | ||
| :status nil | ||
| :blur? true}) | ||
| _ (add-watch state :on-state-change set-username-based-on-name-type)] | ||
| (fn [] | ||
| [preview/preview-container | ||
| {:state state | ||
| :descriptor descriptor | ||
| :show-blur-background? true | ||
| :blur? (:blur? @state)} | ||
| [quo/username @state]]))) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters