From 003b0ffb1e450946eb753d06a17d5d68fd520133 Mon Sep 17 00:00:00 2001 From: Guilherme Devincenzi Date: Mon, 19 Dec 2022 19:12:58 +0000 Subject: [PATCH] feat: add privacy options component (#14500) --- .../components/settings/privacy_option.cljs | 63 +++++++++++++ src/quo2/components/settings/style.cljs | 93 ++++++++++++++++++ src/quo2/core.cljs | 4 + src/status_im2/contexts/quo_preview/main.cljs | 4 + .../quo_preview/settings/privacy_option.cljs | 94 +++++++++++++++++++ 5 files changed, 258 insertions(+) create mode 100644 src/quo2/components/settings/privacy_option.cljs create mode 100644 src/quo2/components/settings/style.cljs create mode 100644 src/status_im2/contexts/quo_preview/settings/privacy_option.cljs diff --git a/src/quo2/components/settings/privacy_option.cljs b/src/quo2/components/settings/privacy_option.cljs new file mode 100644 index 0000000000..503bfa2646 --- /dev/null +++ b/src/quo2/components/settings/privacy_option.cljs @@ -0,0 +1,63 @@ +(ns quo2.components.settings.privacy-option + (:require [react-native.core :as rn] + [quo2.components.icon :as icons] + [quo2.components.selectors.selectors :as selectors] + [quo2.components.settings.style :as style] + [quo2.components.markdown.text :as text] + [quo2.foundations.colors :as colors])) + +(defn- bullet + [] + [rn/view {:style style/bullet-container} + [rn/view {:style (style/bullet)}]]) + +(defn- unordered-list + [container-style list-items] + [rn/view {:style (merge style/list-container container-style)} + (for [item list-items] + ^{:key (hash item)} + [rn/view {:style style/list-item} + [bullet] + [text/text {:size :paragraph-2} item]])]) + +(defn- card-footer + [{:keys [active? label on-toggle]}] + [rn/touchable-without-feedback + [rn/view {:style (style/card-footer)} + [rn/view {:style style/card-footer-label-container} + [text/text {:size :paragraph-2} label]] + [rn/view {:style style/card-footer-toggle-container} + [selectors/toggle {:disabled? (not active?) + :on-change on-toggle}]]]]) + +(defn- selection-indicator + [active?] + [rn/view {:style (style/selection-indicator-container active?)} + [rn/view {:style (style/selection-indicator active?)}]]) + +(defn- card-header + [{:keys [icon label active?]}] + [rn/view {:style style/card-header-container} + [icons/icon icon {:size 20 + :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}] + [rn/view {:style style/card-header-label-container} + [text/text {:weight :semi-bold} label]] + [selection-indicator active?]]) + +(defn card + [{:keys [active? header footer list-items icon on-select on-toggle] + :or {icon :i/world + active? false}}] + [rn/touchable-without-feedback + {:on-press on-select + :accessibility-label :privacy-option-card + :testID :privacy-option-card} + [rn/view (style/privacy-option-card active?) + [card-header {:active? active? + :icon icon + :label header}] + [unordered-list (when-not footer {:margin-bottom 8}) list-items] + (when footer + [card-footer {:active? active? + :label footer + :on-toggle on-toggle}])]]) diff --git a/src/quo2/components/settings/style.cljs b/src/quo2/components/settings/style.cljs new file mode 100644 index 0000000000..82323432b7 --- /dev/null +++ b/src/quo2/components/settings/style.cljs @@ -0,0 +1,93 @@ +(ns quo2.components.settings.style + (:require [quo2.foundations.colors :as colors])) + +(def bullet-container + {:width 20 + :height 20 + :margin-right 8 + :align-self :flex-start}) + +(defn bullet + [] + {:background-color (colors/theme-colors colors/neutral-40 colors/neutral-50) + :border-radius 100 + :width 8 + :height 8 + :position :absolute + :left 6 + :top 6}) + +(def list-container + {:margin-right 12}) + +(def list-item + {:flex 1 + :flex-direction :row + :align-items :center + :padding-vertical 6 + :padding-horizontal 12}) + +(defn selection-indicator-container + [active?] + {:height 20 + :width 20 + :border-radius 20 + :border-width 1 + :border-color (if active? + (colors/theme-colors colors/primary-50 colors/primary-60) + (colors/theme-colors colors/neutral-20 colors/neutral-80))}) + +(defn selection-indicator + [active?] + {:margin-left :auto + :height 14 + :width 14 + :background-color (if active? + (colors/theme-colors colors/primary-50 colors/primary-60) + (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)) + :border-radius 20 + :margin-right :auto + :margin-top :auto + :margin-bottom :auto}) + +(def card-footer-label-container + {:flex 0.9 + :margin-left 16}) + +(def card-footer-toggle-container + {:flex 0.1 + :margin-horizontal 12 + :align-self :center}) + +(defn card-footer + [] + {:flex 1 + :flex-direction :row + :justify-content :space-between + :margin-horizontal 12 + :margin-top 8 + :margin-bottom 12 + :padding-vertical 12 + :border-radius 12 + :border-width 1 + :background-color (colors/theme-colors colors/neutral-5 colors/neutral-90) + :border-color (colors/theme-colors colors/neutral-10 colors/neutral-80)}) + +(def card-header-container + {:flex-direction :row + :align-items :center + :padding-top 12 + :padding-bottom 8 + :padding-horizontal 12}) + +(def card-header-label-container + {:flex 1 + :margin-left 4}) + +(defn privacy-option-card + [active?] + {:border-radius 16 + :border-width 1 + :border-color (if active? + (colors/theme-colors colors/primary-50 colors/primary-60) + (colors/theme-colors colors/neutral-10 colors/neutral-80))}) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 5fe78160b2..e565859ebd 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -42,6 +42,7 @@ quo2.components.navigation.page-nav quo2.components.selectors.disclaimer quo2.components.selectors.selectors + quo2.components.settings.privacy-option quo2.components.loaders.skeleton)) (def button quo2.components.buttons.button/button) @@ -106,3 +107,6 @@ (def activity-log quo2.components.notifications.activity-log.view/view) (def info-count quo2.components.notifications.info-count/info-count) (def notification-dot quo2.components.notifications.notification-dot/notification-dot) + +;;;; SETTINGS +(def privacy-option quo2.components.settings.privacy-option/card) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index b2db5f0371..e22cd3b5cc 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -37,6 +37,7 @@ [status-im2.contexts.quo-preview.reactions.react :as react] [status-im2.contexts.quo-preview.selectors.disclaimer :as disclaimer] [status-im2.contexts.quo-preview.selectors.selectors :as selectors] + [status-im2.contexts.quo-preview.settings.privacy-option :as privacy-option] [status-im2.contexts.quo-preview.switcher.switcher-cards :as switcher-cards] [status-im2.contexts.quo-preview.navigation.top-nav :as top-nav] [status-im2.contexts.quo-preview.navigation.bottom-nav-tab :as bottom-nav-tab] @@ -172,6 +173,9 @@ {:name :selectors :insets {:top false} :component selectors/preview-selectors}] + :settings [{:name :privacy-option + :insets {:top false} + :component privacy-option/preview-options}] :tabs [{:name :segmented :insets {:top false} :component segmented/preview-segmented} diff --git a/src/status_im2/contexts/quo_preview/settings/privacy_option.cljs b/src/status_im2/contexts/quo_preview/settings/privacy_option.cljs new file mode 100644 index 0000000000..1de92513e7 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/settings/privacy_option.cljs @@ -0,0 +1,94 @@ +(ns status-im2.contexts.quo-preview.settings.privacy-option + (:require [reagent.core :as reagent] + [react-native.core :as rn] + [quo2.foundations.colors :as colors] + [quo2.core :as quo] + [status-im2.contexts.quo-preview.preview :as preview])) + +(def descriptor + [{:label "Header:" + :key :header + :type :text} + {:label "Footer:" + :key :footer + :type :text} + {:label "Line 1:" + :key :li1 + :type :text} + {:label "Line 2:" + :key :li2 + :type :text} + {:label "Line 3:" + :key :li3 + :type :text}]) + +(defn cool-preview + [] + (let [state (reagent/atom {:selected :contacts + :header "header" + :footer "footer" + :li1 "line item 1" + :li2 "line item 2" + :li3 "line item 3"})] + (fn [] + (let [header (:header @state) + footer (:footer @state) + list-items (->> (select-keys @state [:li1 :li2 :li3]) + vals + (remove empty?))] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:margin-horizontal 20 + :padding 16 + :flex 1} + [rn/view {:margin-vertical 2} + [quo/text {:size :paragraph-2} "Dynamic sample"]] + [rn/view {:flex 1} + [preview/customizer state descriptor]] + [rn/view {:margin-vertical 8} + [quo/privacy-option + (cond-> {:on-select #(swap! state assoc :selected :preview) + :on-toggle #(js/alert "dynamic card toggled") + :active? (= :preview (:selected @state))} + (not-empty header) (assoc :header header) + (not-empty footer) (assoc :footer footer) + (not-empty list-items) (assoc :list-items list-items))]] + + [rn/view {:margin-vertical 2} + [quo/text {:size :paragraph-2} "Static samples"]] + [rn/view {:margin-vertical 8} + [quo/privacy-option {:header "Contacts only" + :icon :i/contact-book + :on-select #(swap! state assoc :selected :contacts) + :active? (= :contacts (:selected @state)) + :list-items ["Only add people from your contact list" + "Added members can add their own contacts" + "There is no link or QR for this group" + "No public information available"]}]] + [rn/view {:margin-vertical 8} + [quo/privacy-option {:icon :i/world + :header "Anyone can request to join" + :on-select #(swap! state assoc :selected :anyone) + :on-toggle #(js/alert "card toggled") + :active? (= :anyone (:selected @state)) + :footer "Members can approve join requests" + :list-items ["Add people from your contact list" + "Invite prople from outside your contact list" + "Group is shareable via link" + "Group name and number of people is public"]}]] + [rn/view {:margin-vertical 8} + [quo/privacy-option {:icon :i/world + :header "Sample card with very long text to test proper overflow behavior" + :on-select #(swap! state assoc :selected :overflow) + :on-toggle #(js/alert "card toggled") + :active? (= :overflow (:selected @state)) + :footer "This footer is exceedingly long to test the overflowing behavior of text in it" + :list-items ["A very, very very long text line that serves to test the overflow behavior of this component"]}]]]])))) + +(defn preview-options + [] + [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) + :flex 1} + [rn/flat-list {:flex 1 + :keyboardShouldPersistTaps :always + :header [cool-preview] + :key-fn str}]])