From 4a301ec26688ec734f0d3c3f9e666ea7a4234f30 Mon Sep 17 00:00:00 2001 From: kevin Date: Tue, 7 Apr 2020 15:55:07 -0300 Subject: [PATCH 01/14] Fix collapsible example --- react/components/Collapsible/README.md | 408 ++++++++++++++----------- 1 file changed, 235 insertions(+), 173 deletions(-) diff --git a/react/components/Collapsible/README.md b/react/components/Collapsible/README.md index 353e8f232..f67c5c2af 100644 --- a/react/components/Collapsible/README.md +++ b/react/components/Collapsible/README.md @@ -11,24 +11,6 @@ - Avoid using the right-aligned variation with widths larger than around 600px or if affordance might be at stake. - Avoid using the muted variation if affordance is not well secured. - -Usage - -```js -initialState = { isOpen1: false, isOpen2: false } -;
- Here goes your header} - onClick={e => setState({ isOpen1: e.target.isOpen })} - isOpen={state.isOpen1} - > -
- Here goes your content -
- -
-``` - "Read-more-like" example ```js @@ -49,16 +31,15 @@ initialState = { isOpen: false } } onClick={e => setState({ isOpen: e.target.isOpen })} - isOpen={state.isOpen} - > -
-
- -
-
- -
+ isOpen={state.isOpen}> +
+
+
+
+ +
+
@@ -69,35 +50,30 @@ Custom Caret Color Example ```js initialState = { isOpen1: false, isOpen2: false, isOpen3: false } ;
- Here goes your base header} - onClick={e => setState({ isOpen1: e.target.isOpen })} - isOpen={state.isOpen1} - caretColor="base" - > -
- Here goes your content -
- - Here goes your primary header} - onClick={e => setState({ isOpen2: e.target.isOpen })} - isOpen={state.isOpen2} - caretColor="primary" - > -
- Here goes your content -
- +
+ Here goes your base header} + onClick={e => setState({ isOpen1: e.target.isOpen })} + isOpen={state.isOpen1} + caretColor="base"> +
Here goes your content
+ +
+
+ Here goes your primary header} + onClick={e => setState({ isOpen2: e.target.isOpen })} + isOpen={state.isOpen2} + caretColor="primary"> +
Here goes your content
+ +
Here goes your muted header} onClick={e => setState({ isOpen3: e.target.isOpen })} isOpen={state.isOpen3} - caretColor="muted" - > -
- Here goes your content -
+ caretColor="muted"> +
Here goes your content
``` @@ -107,103 +83,154 @@ Navigation bar example ```js const PageBlock = require('../PageBlock').default initialState = { isOpen1: false, isOpen2: false, isOpen3: false } - ;
-
+
- - - - - - - - - Catalog - -
- } - align="right" - onClick={e => setState({ isOpen1: e.target.isOpen })} - isOpen={state.isOpen1} - caretColor="muted" - > -
- Products and SKUs - Categories - Brands - Import and export - Reports -
- -
+ header={ +
+ + + + + + + + Catalog +
+ } + align="right" + onClick={e => setState({ isOpen1: e.target.isOpen })} + isOpen={state.isOpen1} + caretColor="muted"> +
+ + Products and SKUs + + + Categories + + + Brands + + + Import and export + + + Reports + +
+ +
-
- - - - - - - - - Payments - -
- } - align="right" - onClick={e => setState({ isOpen2: e.target.isOpen })} - isOpen={state.isOpen2} - caretColor="muted" - > -
- Transactions - Bank conciliation - Gift card - Settings -
- -
+
+ + + + + + + + Payments +
+ } + align="right" + onClick={e => setState({ isOpen2: e.target.isOpen })} + isOpen={state.isOpen2} + caretColor="muted"> +
+ + Transactions + + + Bank conciliation + + + Gift card + + + Settings + +
+ + -
- - - - - +
+ + + + + - - - Inventory & shipping - -
- } - align="right" - onClick={e => setState({ isOpen3: e.target.isOpen })} - isOpen={state.isOpen3} - caretColor="muted" - > -
- Dashboard - Shipping - Inventory - Pickup points - Settings -
- -
+ + Inventory & shipping + + } + align="right" + onClick={e => setState({ isOpen3: e.target.isOpen })} + isOpen={state.isOpen3} + caretColor="muted"> +
+ + Dashboard + + + Shipping + + + Inventory + + + Pickup points + + + Settings + +
+ + ``` @@ -217,9 +244,10 @@ const Box = require('../Box').default initialState = { openQuestion: null } function toggleAccordion(questionNbr) { - return e => setState( - { openQuestion: state.openQuestion !== questionNbr ? questionNbr : null } - ); + return e => + setState({ + openQuestion: state.openQuestion !== questionNbr ? questionNbr : null, + }) } ;
@@ -229,63 +257,97 @@ function toggleAccordion(questionNbr) { - What is your name? + What is a sub-acquirer?
} onClick={toggleAccordion(1)} - isOpen={ state.openQuestion===1 } - > -
- Arthur, King of the Britons. -
+ isOpen={state.openQuestion === 1}> +
+

+ A sub-acquirer is a company that processes + payments and transmits the generated data to the other players + involved in the payment flow. Its role is similar to that of an + acquirer, but it doesn't completely replace it. Thus, it can be + understood as a kind of intermediary player between acquirer and + store. +

+
-
+
- What is your quest? + What is the connector? } onClick={toggleAccordion(2)} - isOpen={ state.openQuestion===2 } - > -
- To seek the Holy Grail. -
+ isOpen={state.openQuestion === 2}> +
+

+ Connectors are communication protocols that your store needs to + use to enable data transmission between itself and acquirers, + sub-acquirers, or gateways. +

+

+ For example, for your web site to offer a particular payment + method to your customers, you need to enable the connector that + will communicate with the gateway responsible for the processing. +

+
-
+
- What is your favorite color? + What is the PCI SSC } onClick={toggleAccordion(3)} - isOpen={ state.openQuestion===3 } - > -
- Pink. -
+ isOpen={state.openQuestion === 3}> +
+

+ PCI Security Standards Council is a global forum open to + continuous development, enhancement, storage, dissemination and + implementation of data protection security standards. +

+

+ It was founded by American Express, Discover Financial Services, + JCB International, MasterCard and Visa Inc. +

+
-
+
- What is the air-speed velocity of an unladen swallow? + What is a transaction? } onClick={toggleAccordion(4)} - isOpen={ state.openQuestion===4 } - > -
- What do you mean? An African or European swallow? -
+ isOpen={state.openQuestion === 4}> +
+

+ The movement that money makes when exchanged for a product or + service is what we call transaction. Thus, + payment is only one step in a process that involves an intense + flow of information exchange between several parties: gateways, + sub-acquirers and/or acquirers, brands and issuing banks. +

+

+ In a VTEX store, a transaction starts every time a user chooses a + payment condition and closes their order. From there, the purchase + data is sent for the validation of each of the members involved in + this process. You can track each step of the transaction flow on + the Payments. With this module, you accurately visualize the + status of a payment through each status. +

+
From 0b04e368200a0eeaced46c7375a071f66f2517b9 Mon Sep 17 00:00:00 2001 From: kevin Date: Wed, 8 Apr 2020 09:18:29 -0300 Subject: [PATCH 02/14] Update react/components/Collapsible/README.md Co-Authored-By: Lucas Cordeiro --- react/components/Collapsible/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/components/Collapsible/README.md b/react/components/Collapsible/README.md index f67c5c2af..e0b8d9a49 100644 --- a/react/components/Collapsible/README.md +++ b/react/components/Collapsible/README.md @@ -303,7 +303,7 @@ function toggleAccordion(questionNbr) { - What is the PCI SSC + What is the PCI SSC? } onClick={toggleAccordion(3)} From 636527275c4948a4aefc83be746882993c670629 Mon Sep 17 00:00:00 2001 From: kevin Date: Thu, 9 Apr 2020 15:15:26 -0300 Subject: [PATCH 03/14] Update react/components/Collapsible/README.md Co-Authored-By: Emerson Laurentino --- react/components/Collapsible/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/react/components/Collapsible/README.md b/react/components/Collapsible/README.md index e0b8d9a49..698dede08 100644 --- a/react/components/Collapsible/README.md +++ b/react/components/Collapsible/README.md @@ -31,7 +31,8 @@ initialState = { isOpen: false } } onClick={e => setState({ isOpen: e.target.isOpen })} - isOpen={state.isOpen}> + isOpen={state.isOpen} + >
From f6887135da624bb1c15594bae3d6617c9f11aab3 Mon Sep 17 00:00:00 2001 From: kevin Date: Thu, 9 Apr 2020 15:15:33 -0300 Subject: [PATCH 04/14] Update react/components/Collapsible/README.md Co-Authored-By: Emerson Laurentino --- react/components/Collapsible/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/react/components/Collapsible/README.md b/react/components/Collapsible/README.md index 698dede08..98eb83741 100644 --- a/react/components/Collapsible/README.md +++ b/react/components/Collapsible/README.md @@ -56,7 +56,8 @@ initialState = { isOpen1: false, isOpen2: false, isOpen3: false } header={Here goes your base header} onClick={e => setState({ isOpen1: e.target.isOpen })} isOpen={state.isOpen1} - caretColor="base"> + caretColor="base" + >
Here goes your content
From 7ef928aeaec551a805844dc6fc8ef921ec3eae0a Mon Sep 17 00:00:00 2001 From: kevin Date: Thu, 9 Apr 2020 15:15:40 -0300 Subject: [PATCH 05/14] Update react/components/Collapsible/README.md Co-Authored-By: Emerson Laurentino --- react/components/Collapsible/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/react/components/Collapsible/README.md b/react/components/Collapsible/README.md index 98eb83741..08112c769 100644 --- a/react/components/Collapsible/README.md +++ b/react/components/Collapsible/README.md @@ -118,7 +118,8 @@ initialState = { isOpen1: false, isOpen2: false, isOpen3: false } align="right" onClick={e => setState({ isOpen1: e.target.isOpen })} isOpen={state.isOpen1} - caretColor="muted"> + caretColor="muted" + >
Products and SKUs From c8c0b1ccfe417ea096a2c35e79b609b1453cb1fb Mon Sep 17 00:00:00 2001 From: kevin Date: Thu, 9 Apr 2020 15:15:46 -0300 Subject: [PATCH 06/14] Update react/components/Collapsible/README.md Co-Authored-By: Emerson Laurentino --- react/components/Collapsible/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/react/components/Collapsible/README.md b/react/components/Collapsible/README.md index 08112c769..eabc95510 100644 --- a/react/components/Collapsible/README.md +++ b/react/components/Collapsible/README.md @@ -214,7 +214,8 @@ initialState = { isOpen1: false, isOpen2: false, isOpen3: false } align="right" onClick={e => setState({ isOpen3: e.target.isOpen })} isOpen={state.isOpen3} - caretColor="muted"> + caretColor="muted" + > } onClick={toggleAccordion(1)} - isOpen={state.openQuestion === 1}> + isOpen={state.openQuestion === 1} + >

A sub-acquirer is a company that processes From e868104cc324761e2c7f7c28bd67b36b38d51f58 Mon Sep 17 00:00:00 2001 From: kevin Date: Thu, 9 Apr 2020 15:16:01 -0300 Subject: [PATCH 08/14] Update react/components/Collapsible/README.md Co-Authored-By: Emerson Laurentino --- react/components/Collapsible/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/react/components/Collapsible/README.md b/react/components/Collapsible/README.md index 554fe827b..b9903f992 100644 --- a/react/components/Collapsible/README.md +++ b/react/components/Collapsible/README.md @@ -288,7 +288,8 @@ function toggleAccordion(questionNbr) {

} onClick={toggleAccordion(2)} - isOpen={state.openQuestion === 2}> + isOpen={state.openQuestion === 2} + >

Connectors are communication protocols that your store needs to From 54cf4ad761cf779d793dd56890f8371221705bb0 Mon Sep 17 00:00:00 2001 From: kevin Date: Thu, 9 Apr 2020 15:16:09 -0300 Subject: [PATCH 09/14] Update react/components/Collapsible/README.md Co-Authored-By: Emerson Laurentino --- react/components/Collapsible/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/react/components/Collapsible/README.md b/react/components/Collapsible/README.md index b9903f992..2005e44c9 100644 --- a/react/components/Collapsible/README.md +++ b/react/components/Collapsible/README.md @@ -336,7 +336,8 @@ function toggleAccordion(questionNbr) {

} onClick={toggleAccordion(4)} - isOpen={state.openQuestion === 4}> + isOpen={state.openQuestion === 4} + >

The movement that money makes when exchanged for a product or From d0f4a960b5b89aa4ca4ca04f659dae7688e4cef9 Mon Sep 17 00:00:00 2001 From: kevin Date: Thu, 9 Apr 2020 15:16:16 -0300 Subject: [PATCH 10/14] Update react/components/Collapsible/README.md Co-Authored-By: Emerson Laurentino --- react/components/Collapsible/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/react/components/Collapsible/README.md b/react/components/Collapsible/README.md index 2005e44c9..af9302b19 100644 --- a/react/components/Collapsible/README.md +++ b/react/components/Collapsible/README.md @@ -313,7 +313,8 @@ function toggleAccordion(questionNbr) {

} onClick={toggleAccordion(3)} - isOpen={state.openQuestion === 3}> + isOpen={state.openQuestion === 3} + >

PCI Security Standards Council is a global forum open to From 8fd7d4ee96a05789736bceb59baf4ada9c7865aa Mon Sep 17 00:00:00 2001 From: kevin Date: Thu, 9 Apr 2020 15:16:23 -0300 Subject: [PATCH 11/14] Update react/components/Collapsible/README.md Co-Authored-By: Emerson Laurentino --- react/components/Collapsible/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/react/components/Collapsible/README.md b/react/components/Collapsible/README.md index af9302b19..bd807e31a 100644 --- a/react/components/Collapsible/README.md +++ b/react/components/Collapsible/README.md @@ -150,7 +150,8 @@ initialState = { isOpen1: false, isOpen2: false, isOpen3: false } height="16" viewBox="0 0 16 16" fill="none" - xmlns="http://www.w3.org/2000/svg"> + xmlns="http://www.w3.org/2000/svg" + > Date: Thu, 9 Apr 2020 15:16:30 -0300 Subject: [PATCH 12/14] Update react/components/Collapsible/README.md Co-Authored-By: Emerson Laurentino --- react/components/Collapsible/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/react/components/Collapsible/README.md b/react/components/Collapsible/README.md index bd807e31a..1f027bc8e 100644 --- a/react/components/Collapsible/README.md +++ b/react/components/Collapsible/README.md @@ -97,7 +97,8 @@ initialState = { isOpen1: false, isOpen2: false, isOpen3: false } height="16" viewBox="0 0 16 16" fill="none" - xmlns="http://www.w3.org/2000/svg"> + xmlns="http://www.w3.org/2000/svg" + > Date: Thu, 9 Apr 2020 15:16:39 -0300 Subject: [PATCH 13/14] Update react/components/Collapsible/README.md Co-Authored-By: Emerson Laurentino --- react/components/Collapsible/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/react/components/Collapsible/README.md b/react/components/Collapsible/README.md index 1f027bc8e..8185d1781 100644 --- a/react/components/Collapsible/README.md +++ b/react/components/Collapsible/README.md @@ -171,7 +171,8 @@ initialState = { isOpen1: false, isOpen2: false, isOpen3: false } align="right" onClick={e => setState({ isOpen2: e.target.isOpen })} isOpen={state.isOpen2} - caretColor="muted"> + caretColor="muted" + >