From d8f351e058bae6b084404f514a0e04a67d799787 Mon Sep 17 00:00:00 2001
From: Nicolas Brugneaux <nicolas.brugneaux@gmail.com>
Date: Wed, 20 Nov 2019 20:01:49 +0100
Subject: [PATCH 1/2] [ui] feat: add data-test-id to actionable components

---
 .../__snapshots__/storyshots.test.js.snap     | 185 ++++++++++--------
 packages/ui/components/button.js              |  12 +-
 packages/ui/components/form-field.js          |   3 +
 packages/ui/components/text-area.js           |  12 +-
 packages/ui/components/toggle.js              |  12 +-
 packages/ui/modals/confirm.js                 |  12 +-
 6 files changed, 144 insertions(+), 92 deletions(-)

diff --git a/packages/storybook/__snapshots__/storyshots.test.js.snap b/packages/storybook/__snapshots__/storyshots.test.js.snap
index 5f91e4d5b..395cf61c1 100644
--- a/packages/storybook/__snapshots__/storyshots.test.js.snap
+++ b/packages/storybook/__snapshots__/storyshots.test.js.snap
@@ -18,11 +18,11 @@ exports[`Storyshots Components/Button All buttons 1`] = `
       <div
         className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jjMsVw"
         disabled={false}
-        onClick={[Function]}
       >
         <button
           className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
           onBlur={[Function]}
+          onClick={[Function]}
           onFocus={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -41,11 +41,11 @@ exports[`Storyshots Components/Button All buttons 1`] = `
       <div
         className="StyledBox-sc-13pk1d4-0 cQpePc sc-bwzfXH fWiwzu"
         disabled={false}
-        onClick={[Function]}
       >
         <button
           className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
           onBlur={[Function]}
+          onClick={[Function]}
           onFocus={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -64,11 +64,11 @@ exports[`Storyshots Components/Button All buttons 1`] = `
       <div
         className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jNrsIw"
         disabled={true}
-        onClick={null}
       >
         <button
           className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
           onBlur={[Function]}
+          onClick={null}
           onFocus={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -87,11 +87,11 @@ exports[`Storyshots Components/Button All buttons 1`] = `
       <div
         className="StyledBox-sc-13pk1d4-0 cQpePc sc-bwzfXH isAOSX"
         disabled={true}
-        onClick={null}
       >
         <button
           className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
           onBlur={[Function]}
+          onClick={null}
           onFocus={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -110,11 +110,11 @@ exports[`Storyshots Components/Button All buttons 1`] = `
       <div
         className="StyledBox-sc-13pk1d4-0 btZOKq sc-bwzfXH bPNHik"
         disabled={false}
-        onClick={[Function]}
       >
         <button
           className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
           onBlur={[Function]}
+          onClick={[Function]}
           onFocus={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -133,11 +133,11 @@ exports[`Storyshots Components/Button All buttons 1`] = `
       <div
         className="StyledBox-sc-13pk1d4-0 gTxMM sc-bwzfXH bHtVNS"
         disabled={false}
-        onClick={[Function]}
       >
         <button
           className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
           onBlur={[Function]}
+          onClick={[Function]}
           onFocus={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -156,11 +156,11 @@ exports[`Storyshots Components/Button All buttons 1`] = `
       <div
         className="StyledBox-sc-13pk1d4-0 btZOKq sc-bwzfXH jNrsIw"
         disabled={true}
-        onClick={null}
       >
         <button
           className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
           onBlur={[Function]}
+          onClick={null}
           onFocus={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -179,11 +179,11 @@ exports[`Storyshots Components/Button All buttons 1`] = `
       <div
         className="StyledBox-sc-13pk1d4-0 gTxMM sc-bwzfXH isAOSX"
         disabled={true}
-        onClick={null}
       >
         <button
           className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
           onBlur={[Function]}
+          onClick={null}
           onFocus={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -245,11 +245,11 @@ exports[`Storyshots Components/Button Async Buttons 1`] = `
       <div
         className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jjMsVw"
         disabled={false}
-        onClick={[Function]}
       >
         <button
           className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
           onBlur={[Function]}
+          onClick={[Function]}
           onFocus={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -268,11 +268,11 @@ exports[`Storyshots Components/Button Async Buttons 1`] = `
       <div
         className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jNrsIw"
         disabled={true}
-        onClick={null}
       >
         <button
           className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
           onBlur={[Function]}
+          onClick={null}
           onFocus={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -392,11 +392,11 @@ exports[`Storyshots Components/Permission Settings/Container With data point 1`]
                 <div
                   className="StyledBox-sc-13pk1d4-0 jCctPJ sc-bwzfXH kZnGNa"
                   disabled={false}
-                  onClick={[Function]}
                 >
                   <button
                     className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                     onBlur={[Function]}
+                    onClick={[Function]}
                     onFocus={[Function]}
                     onMouseOut={[Function]}
                     onMouseOver={[Function]}
@@ -632,11 +632,11 @@ exports[`Storyshots Components/Permission Settings/Container With data point 1`]
                 <div
                   className="StyledBox-sc-13pk1d4-0 gTxMM sc-bwzfXH bHtVNS"
                   disabled={false}
-                  onClick={[Function]}
                 >
                   <button
                     className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                     onBlur={[Function]}
+                    onClick={[Function]}
                     onFocus={[Function]}
                     onMouseOut={[Function]}
                     onMouseOver={[Function]}
@@ -656,11 +656,11 @@ exports[`Storyshots Components/Permission Settings/Container With data point 1`]
                 <div
                   className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jjMsVw"
                   disabled={false}
-                  onClick={[Function]}
                 >
                   <button
                     className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                     onBlur={[Function]}
+                    onClick={[Function]}
                     onFocus={[Function]}
                     onMouseOut={[Function]}
                     onMouseOver={[Function]}
@@ -1843,11 +1843,11 @@ exports[`Storyshots Components/Permission Settings/Layout Default 1`] = `
                     <div
                       className="StyledBox-sc-13pk1d4-0 jCctPJ sc-bwzfXH kZnGNa"
                       disabled={false}
-                      onClick={[Function]}
                     >
                       <button
                         className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                         onBlur={[Function]}
+                        onClick={[Function]}
                         onFocus={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
@@ -2083,11 +2083,11 @@ exports[`Storyshots Components/Permission Settings/Layout Default 1`] = `
                     <div
                       className="StyledBox-sc-13pk1d4-0 gTxMM sc-bwzfXH bHtVNS"
                       disabled={false}
-                      onClick={[Function]}
                     >
                       <button
                         className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                         onBlur={[Function]}
+                        onClick={[Function]}
                         onFocus={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
@@ -2107,11 +2107,11 @@ exports[`Storyshots Components/Permission Settings/Layout Default 1`] = `
                     <div
                       className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jjMsVw"
                       disabled={false}
-                      onClick={[Function]}
                     >
                       <button
                         className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                         onBlur={[Function]}
+                        onClick={[Function]}
                         onFocus={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
@@ -2748,11 +2748,11 @@ exports[`Storyshots Components/Permission Settings/Layout With Many Pending Requ
                     <div
                       className="StyledBox-sc-13pk1d4-0 jCctPJ sc-bwzfXH kZnGNa"
                       disabled={false}
-                      onClick={[Function]}
                     >
                       <button
                         className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                         onBlur={[Function]}
+                        onClick={[Function]}
                         onFocus={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
@@ -2988,11 +2988,11 @@ exports[`Storyshots Components/Permission Settings/Layout With Many Pending Requ
                     <div
                       className="StyledBox-sc-13pk1d4-0 gTxMM sc-bwzfXH bHtVNS"
                       disabled={false}
-                      onClick={[Function]}
                     >
                       <button
                         className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                         onBlur={[Function]}
+                        onClick={[Function]}
                         onFocus={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
@@ -3012,11 +3012,11 @@ exports[`Storyshots Components/Permission Settings/Layout With Many Pending Requ
                     <div
                       className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jjMsVw"
                       disabled={false}
-                      onClick={[Function]}
                     >
                       <button
                         className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                         onBlur={[Function]}
+                        onClick={[Function]}
                         onFocus={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
@@ -3653,11 +3653,11 @@ exports[`Storyshots Components/Permission Settings/Layout With Pending Requests
                     <div
                       className="StyledBox-sc-13pk1d4-0 jCctPJ sc-bwzfXH kZnGNa"
                       disabled={false}
-                      onClick={[Function]}
                     >
                       <button
                         className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                         onBlur={[Function]}
+                        onClick={[Function]}
                         onFocus={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
@@ -3893,11 +3893,11 @@ exports[`Storyshots Components/Permission Settings/Layout With Pending Requests
                     <div
                       className="StyledBox-sc-13pk1d4-0 gTxMM sc-bwzfXH bHtVNS"
                       disabled={false}
-                      onClick={[Function]}
                     >
                       <button
                         className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                         onBlur={[Function]}
+                        onClick={[Function]}
                         onFocus={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
@@ -3917,11 +3917,11 @@ exports[`Storyshots Components/Permission Settings/Layout With Pending Requests
                     <div
                       className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jjMsVw"
                       disabled={false}
-                      onClick={[Function]}
                     >
                       <button
                         className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                         onBlur={[Function]}
+                        onClick={[Function]}
                         onFocus={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
@@ -4558,11 +4558,11 @@ exports[`Storyshots Components/Permission Settings/Layout With Too Many Pending
                     <div
                       className="StyledBox-sc-13pk1d4-0 jCctPJ sc-bwzfXH kZnGNa"
                       disabled={false}
-                      onClick={[Function]}
                     >
                       <button
                         className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                         onBlur={[Function]}
+                        onClick={[Function]}
                         onFocus={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
@@ -4798,11 +4798,11 @@ exports[`Storyshots Components/Permission Settings/Layout With Too Many Pending
                     <div
                       className="StyledBox-sc-13pk1d4-0 gTxMM sc-bwzfXH bHtVNS"
                       disabled={false}
-                      onClick={[Function]}
                     >
                       <button
                         className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                         onBlur={[Function]}
+                        onClick={[Function]}
                         onFocus={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
@@ -4822,11 +4822,11 @@ exports[`Storyshots Components/Permission Settings/Layout With Too Many Pending
                     <div
                       className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jjMsVw"
                       disabled={false}
-                      onClick={[Function]}
                     >
                       <button
                         className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                         onBlur={[Function]}
+                        onClick={[Function]}
                         onFocus={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
@@ -5450,11 +5450,11 @@ exports[`Storyshots Components/Permission Settings/Layout with custom theme 1`]
                     <div
                       className="StyledBox-sc-13pk1d4-0 jCctPJ sc-bwzfXH kZnGNa"
                       disabled={false}
-                      onClick={[Function]}
                     >
                       <button
                         className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                         onBlur={[Function]}
+                        onClick={[Function]}
                         onFocus={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
@@ -5690,11 +5690,11 @@ exports[`Storyshots Components/Permission Settings/Layout with custom theme 1`]
                     <div
                       className="StyledBox-sc-13pk1d4-0 gTxMM sc-bwzfXH bHtVNS"
                       disabled={false}
-                      onClick={[Function]}
                     >
                       <button
                         className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                         onBlur={[Function]}
+                        onClick={[Function]}
                         onFocus={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
@@ -5714,11 +5714,11 @@ exports[`Storyshots Components/Permission Settings/Layout with custom theme 1`]
                     <div
                       className="StyledBox-sc-13pk1d4-0 PATZW sc-bwzfXH fqdtvJ"
                       disabled={false}
-                      onClick={[Function]}
                     >
                       <button
                         className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                         onBlur={[Function]}
+                        onClick={[Function]}
                         onFocus={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
@@ -5821,11 +5821,12 @@ exports[`Storyshots Modals/Confirm Alert 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 jCctPJ sc-bwzfXH kZnGNa"
                     disabled={false}
-                    onClick={[Function]}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 ooFkS sc-bdVaJa kmMYJA"
+                      data-test-id="undefined-cancel-btn"
                       onBlur={[Function]}
+                      onClick={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -5874,11 +5875,12 @@ exports[`Storyshots Modals/Confirm Alert 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 huPmvm sc-bwzfXH bHtVNS"
                     disabled={false}
-                    onClick={[Function]}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
+                      data-test-id="undefined-cancel-btn"
                       onBlur={[Function]}
+                      onClick={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -5896,11 +5898,12 @@ exports[`Storyshots Modals/Confirm Alert 1`] = `
                     className="StyledBox-sc-13pk1d4-0 bVohSC sc-bwzfXH eSLPHi"
                     color="white"
                     disabled={false}
-                    onClick={[Function]}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
+                      data-test-id="undefined-confirm-btn"
                       onBlur={[Function]}
+                      onClick={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -6006,11 +6009,12 @@ exports[`Storyshots Modals/Confirm Custom buttons 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 jCctPJ sc-bwzfXH kZnGNa"
                     disabled={false}
-                    onClick={[Function]}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 ooFkS sc-bdVaJa kmMYJA"
+                      data-test-id="undefined-cancel-btn"
                       onBlur={[Function]}
+                      onClick={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -6059,11 +6063,12 @@ exports[`Storyshots Modals/Confirm Custom buttons 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 huPmvm sc-bwzfXH bHtVNS"
                     disabled={false}
-                    onClick={[Function]}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
+                      data-test-id="undefined-cancel-btn"
                       onBlur={[Function]}
+                      onClick={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -6080,11 +6085,12 @@ exports[`Storyshots Modals/Confirm Custom buttons 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 cmWXih sc-bwzfXH iWFvjw"
                     disabled={false}
-                    onClick={[Function]}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
+                      data-test-id="undefined-confirm-btn"
                       onBlur={[Function]}
+                      onClick={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -6190,11 +6196,12 @@ exports[`Storyshots Modals/Confirm Default 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 jCctPJ sc-bwzfXH kZnGNa"
                     disabled={false}
-                    onClick={[Function]}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 ooFkS sc-bdVaJa kmMYJA"
+                      data-test-id="undefined-cancel-btn"
                       onBlur={[Function]}
+                      onClick={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -6243,11 +6250,12 @@ exports[`Storyshots Modals/Confirm Default 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 huPmvm sc-bwzfXH bHtVNS"
                     disabled={false}
-                    onClick={[Function]}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
+                      data-test-id="undefined-cancel-btn"
                       onBlur={[Function]}
+                      onClick={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -6264,11 +6272,12 @@ exports[`Storyshots Modals/Confirm Default 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 cmWXih sc-bwzfXH iWFvjw"
                     disabled={false}
-                    onClick={[Function]}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
+                      data-test-id="undefined-confirm-btn"
                       onBlur={[Function]}
+                      onClick={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -6374,11 +6383,12 @@ exports[`Storyshots Modals/Confirm Double Confirm 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 jCctPJ sc-bwzfXH kZnGNa"
                     disabled={false}
-                    onClick={[Function]}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 ooFkS sc-bdVaJa kmMYJA"
+                      data-test-id="undefined-cancel-btn"
                       onBlur={[Function]}
+                      onClick={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -6436,6 +6446,7 @@ exports[`Storyshots Modals/Confirm Double Confirm 1`] = `
                       <input
                         checked={false}
                         className="StyledCheckBox__StyledCheckBoxInput-sc-1dbk5ju-2 AeFgN"
+                        data-test-id="undefined-confirm-checkbox"
                         onBlur={[Function]}
                         onChange={[Function]}
                         onFocus={[Function]}
@@ -6462,11 +6473,12 @@ exports[`Storyshots Modals/Confirm Double Confirm 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 huPmvm sc-bwzfXH bHtVNS"
                     disabled={false}
-                    onClick={[Function]}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
+                      data-test-id="undefined-cancel-btn"
                       onBlur={[Function]}
+                      onClick={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -6484,11 +6496,12 @@ exports[`Storyshots Modals/Confirm Double Confirm 1`] = `
                     className="StyledBox-sc-13pk1d4-0 bVohSC sc-bwzfXH jNrsIw"
                     color="white"
                     disabled={true}
-                    onClick={null}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
+                      data-test-id="undefined-confirm-btn"
                       onBlur={[Function]}
+                      onClick={null}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -6615,11 +6628,11 @@ exports[`Storyshots Modals/Tx Details Default 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 jCctPJ sc-bwzfXH kZnGNa"
                     disabled={false}
-                    onClick={[Function]}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 ooFkS sc-bdVaJa kmMYJA"
                       onBlur={[Function]}
+                      onClick={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -6756,11 +6769,11 @@ exports[`Storyshots Modals/Tx Details Default 1`] = `
                 <div
                   className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jjMsVw"
                   disabled={false}
-                  onClick={[Function]}
                 >
                   <button
                     className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                     onBlur={[Function]}
+                    onClick={[Function]}
                     onFocus={[Function]}
                     onMouseOut={[Function]}
                     onMouseOver={[Function]}
@@ -6951,11 +6964,11 @@ exports[`Storyshots Modals/Tx Details With Long Strings 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 jCctPJ sc-bwzfXH kZnGNa"
                     disabled={false}
-                    onClick={[Function]}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 ooFkS sc-bdVaJa kmMYJA"
                       onBlur={[Function]}
+                      onClick={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -7092,11 +7105,11 @@ exports[`Storyshots Modals/Tx Details With Long Strings 1`] = `
                 <div
                   className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jjMsVw"
                   disabled={false}
-                  onClick={[Function]}
                 >
                   <button
                     className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                     onBlur={[Function]}
+                    onClick={[Function]}
                     onFocus={[Function]}
                     onMouseOut={[Function]}
                     onMouseOver={[Function]}
@@ -7686,11 +7699,11 @@ exports[`Storyshots Screens/Admin Brand - Default 1`] = `
                       <div
                         className="StyledBox-sc-13pk1d4-0 gTxMM sc-bwzfXH bHtVNS"
                         disabled={false}
-                        onClick={[Function]}
                       >
                         <button
                           className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                           onBlur={[Function]}
+                          onClick={[Function]}
                           onFocus={[Function]}
                           onMouseOut={[Function]}
                           onMouseOver={[Function]}
@@ -7711,11 +7724,11 @@ exports[`Storyshots Screens/Admin Brand - Default 1`] = `
                     <div
                       className="StyledBox-sc-13pk1d4-0 jCctPJ sc-bwzfXH kZnGNa"
                       disabled={false}
-                      onClick={[Function]}
                     >
                       <button
                         className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                         onBlur={[Function]}
+                        onClick={[Function]}
                         onFocus={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
@@ -7875,11 +7888,11 @@ exports[`Storyshots Screens/Admin Brand - Default 1`] = `
                       <div
                         className="StyledBox-sc-13pk1d4-0 gTxMM sc-bwzfXH bHtVNS"
                         disabled={false}
-                        onClick={[Function]}
                       >
                         <button
                           className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                           onBlur={[Function]}
+                          onClick={[Function]}
                           onFocus={[Function]}
                           onMouseOut={[Function]}
                           onMouseOver={[Function]}
@@ -7900,11 +7913,11 @@ exports[`Storyshots Screens/Admin Brand - Default 1`] = `
                     <div
                       className="StyledBox-sc-13pk1d4-0 jCctPJ sc-bwzfXH kZnGNa"
                       disabled={false}
-                      onClick={[Function]}
                     >
                       <button
                         className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                         onBlur={[Function]}
+                        onClick={[Function]}
                         onFocus={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
@@ -8162,11 +8175,11 @@ exports[`Storyshots Screens/Admin/Account settings Form - Default 1`] = `
                     <div
                       className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jjMsVw"
                       disabled={false}
-                      onClick={[Function]}
                     >
                       <button
                         className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                         onBlur={[Function]}
+                        onClick={[Function]}
                         onFocus={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
@@ -8517,11 +8530,11 @@ exports[`Storyshots Screens/Admin/Configure Configure - Category details 1`] = `
                     <div
                       className="StyledBox-sc-13pk1d4-0 gTxMM sc-bwzfXH bHtVNS sc-Rmtcm eFMnKF"
                       disabled={false}
-                      onClick={[Function]}
                     >
                       <button
                         className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                         onBlur={[Function]}
+                        onClick={[Function]}
                         onFocus={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
@@ -8580,11 +8593,11 @@ exports[`Storyshots Screens/Admin/Configure Configure - Category details 1`] = `
                       <div
                         className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jjMsVw"
                         disabled={false}
-                        onClick={[Function]}
                       >
                         <button
                           className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                           onBlur={[Function]}
+                          onClick={[Function]}
                           onFocus={[Function]}
                           onMouseOut={[Function]}
                           onMouseOver={[Function]}
@@ -8756,11 +8769,11 @@ exports[`Storyshots Screens/Admin/Configure Configure - Create category 1`] = `
               <div
                 className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jjMsVw"
                 disabled={false}
-                onClick={[Function]}
               >
                 <button
                   className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                   onBlur={[Function]}
+                  onClick={[Function]}
                   onFocus={[Function]}
                   onMouseOut={[Function]}
                   onMouseOver={[Function]}
@@ -8835,11 +8848,11 @@ exports[`Storyshots Screens/Admin/Configure Configure - Create data points group
         <div
           className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jjMsVw"
           disabled={false}
-          onClick={[Function]}
         >
           <button
             className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
             onBlur={[Function]}
+            onClick={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -9124,11 +9137,11 @@ exports[`Storyshots Screens/Admin/Configure Configure - Create use case 1`] = `
               <div
                 className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jjMsVw"
                 disabled={false}
-                onClick={[Function]}
               >
                 <button
                   className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                   onBlur={[Function]}
+                  onClick={[Function]}
                   onFocus={[Function]}
                   onMouseOut={[Function]}
                   onMouseOver={[Function]}
@@ -9661,11 +9674,11 @@ exports[`Storyshots Screens/Admin/Configure Configure - Default 1`] = `
                     <div
                       className="StyledBox-sc-13pk1d4-0 gTxMM sc-bwzfXH bHtVNS sc-Rmtcm eFMnKF"
                       disabled={false}
-                      onClick={[Function]}
                     >
                       <button
                         className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                         onBlur={[Function]}
+                        onClick={[Function]}
                         onFocus={[Function]}
                         onMouseOut={[Function]}
                         onMouseOver={[Function]}
@@ -9724,11 +9737,11 @@ exports[`Storyshots Screens/Admin/Configure Configure - Default 1`] = `
                       <div
                         className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jjMsVw"
                         disabled={false}
-                        onClick={[Function]}
                       >
                         <button
                           className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                           onBlur={[Function]}
+                          onClick={[Function]}
                           onFocus={[Function]}
                           onMouseOut={[Function]}
                           onMouseOver={[Function]}
@@ -9892,11 +9905,11 @@ exports[`Storyshots Screens/Admin/Configure Configure - Edit category 1`] = `
           <div
             className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jjMsVw"
             disabled={false}
-            onClick={[Function]}
           >
             <button
               className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
               onBlur={[Function]}
+              onClick={[Function]}
               onFocus={[Function]}
               onMouseOut={[Function]}
               onMouseOver={[Function]}
@@ -9969,11 +9982,11 @@ exports[`Storyshots Screens/Admin/Configure Configure - Edit data points group 1
         <div
           className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jjMsVw"
           disabled={false}
-          onClick={[Function]}
         >
           <button
             className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
             onBlur={[Function]}
+            onClick={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -10257,11 +10270,11 @@ exports[`Storyshots Screens/Admin/Configure Configure - Edit section description
               <div
                 className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jjMsVw"
                 disabled={false}
-                onClick={[Function]}
               >
                 <button
                   className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                   onBlur={[Function]}
+                  onClick={[Function]}
                   onFocus={[Function]}
                   onMouseOut={[Function]}
                   onMouseOver={[Function]}
@@ -10383,12 +10396,12 @@ exports[`Storyshots Screens/Admin/Integrations/Data Requests Connection missing
             <div
               className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jjMsVw"
               disabled={false}
-              onClick={[Function]}
               size="large"
             >
               <button
                 className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                 onBlur={[Function]}
+                onClick={[Function]}
                 onFocus={[Function]}
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
@@ -11124,12 +11137,12 @@ exports[`Storyshots Screens/Admin/Integrations/Data Requests/Providers Trello -
             <div
               className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jjMsVw"
               disabled={false}
-              onClick={[Function]}
               size="large"
             >
               <button
                 className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                 onBlur={[Function]}
+                onClick={[Function]}
                 onFocus={[Function]}
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
@@ -11888,12 +11901,12 @@ exports[`Storyshots Screens/Admin/Integrations/Data Requests/Providers Trello 1`
             <div
               className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jjMsVw"
               disabled={false}
-              onClick={[Function]}
               size="large"
             >
               <button
                 className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                 onBlur={[Function]}
+                onClick={[Function]}
                 onFocus={[Function]}
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
@@ -13020,11 +13033,11 @@ exports[`Storyshots Screens/Admin/Versions Draft diff - Empty 1`] = `
                 <div
                   className="StyledBox-sc-13pk1d4-0 jCctPJ sc-bwzfXH jNrsIw"
                   disabled={true}
-                  onClick={null}
                 >
                   <button
                     className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                     onBlur={[Function]}
+                    onClick={null}
                     onFocus={[Function]}
                     onMouseOut={[Function]}
                     onMouseOver={[Function]}
@@ -13044,11 +13057,11 @@ exports[`Storyshots Screens/Admin/Versions Draft diff - Empty 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jNrsIw"
                     disabled={true}
-                    onClick={null}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                       onBlur={[Function]}
+                      onClick={null}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -13174,11 +13187,11 @@ exports[`Storyshots Screens/Admin/Versions Draft diff - With changes all types 1
                 <div
                   className="StyledBox-sc-13pk1d4-0 jCctPJ sc-bwzfXH jNrsIw"
                   disabled={true}
-                  onClick={null}
                 >
                   <button
                     className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                     onBlur={[Function]}
+                    onClick={null}
                     onFocus={[Function]}
                     onMouseOut={[Function]}
                     onMouseOver={[Function]}
@@ -13198,11 +13211,11 @@ exports[`Storyshots Screens/Admin/Versions Draft diff - With changes all types 1
                   <div
                     className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jNrsIw"
                     disabled={true}
-                    onClick={null}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                       onBlur={[Function]}
+                      onClick={null}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -13323,11 +13336,11 @@ exports[`Storyshots Screens/Data Lookup Check email 1`] = `
               <div
                 className="StyledBox-sc-13pk1d4-0 jiBgGV sc-bwzfXH bHtVNS"
                 disabled={false}
-                onClick={[Function]}
               >
                 <button
                   className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                   onBlur={[Function]}
+                  onClick={[Function]}
                   onFocus={[Function]}
                   onMouseOut={[Function]}
                   onMouseOver={[Function]}
@@ -13355,11 +13368,11 @@ exports[`Storyshots Screens/Data Lookup Check email 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 hkHuJq sc-bwzfXH jjMsVw"
                     disabled={false}
-                    onClick={[Function]}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                       onBlur={[Function]}
+                      onClick={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -13385,11 +13398,11 @@ exports[`Storyshots Screens/Data Lookup Check email 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 jGLiwe sc-bwzfXH jjMsVw"
                     disabled={false}
-                    onClick={[Function]}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                       onBlur={[Function]}
+                      onClick={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -13500,11 +13513,11 @@ exports[`Storyshots Screens/Data Lookup Check existing 1`] = `
               <div
                 className="StyledBox-sc-13pk1d4-0 jiBgGV sc-bwzfXH bHtVNS"
                 disabled={false}
-                onClick={[Function]}
               >
                 <button
                   className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                   onBlur={[Function]}
+                  onClick={[Function]}
                   onFocus={[Function]}
                   onMouseOut={[Function]}
                   onMouseOver={[Function]}
@@ -13532,11 +13545,11 @@ exports[`Storyshots Screens/Data Lookup Check existing 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 hkHuJq sc-bwzfXH jjMsVw"
                     disabled={false}
-                    onClick={[Function]}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                       onBlur={[Function]}
+                      onClick={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -13562,11 +13575,11 @@ exports[`Storyshots Screens/Data Lookup Check existing 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 jGLiwe sc-bwzfXH jjMsVw"
                     disabled={false}
-                    onClick={[Function]}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                       onBlur={[Function]}
+                      onClick={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -13657,11 +13670,11 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - DONE 1`] = `
               <div
                 className="StyledBox-sc-13pk1d4-0 dEMaqB sc-bwzfXH jjMsVw"
                 disabled={false}
-                onClick={[Function]}
               >
                 <button
                   className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                   onBlur={[Function]}
+                  onClick={[Function]}
                   onFocus={[Function]}
                   onMouseOut={[Function]}
                   onMouseOver={[Function]}
@@ -13978,11 +13991,11 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 bjubTJ sc-bwzfXH iWFvjw"
                     disabled={false}
-                    onClick={[Function]}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                       onBlur={[Function]}
+                      onClick={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -14102,11 +14115,11 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 bjubTJ sc-bwzfXH iWFvjw"
                     disabled={false}
-                    onClick={[Function]}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                       onBlur={[Function]}
+                      onClick={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -14277,11 +14290,11 @@ exports[`Storyshots Screens/Data Lookup Existing email 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 AjHta sc-bwzfXH bHtVNS"
                     disabled={false}
-                    onClick={[Function]}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                       onBlur={[Function]}
+                      onClick={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -14297,11 +14310,11 @@ exports[`Storyshots Screens/Data Lookup Existing email 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 jGLiwe sc-bwzfXH jNrsIw"
                     disabled={true}
-                    onClick={null}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                       onBlur={[Function]}
+                      onClick={null}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -14415,11 +14428,11 @@ exports[`Storyshots Screens/Data Lookup Home 1`] = `
                 <div
                   className="StyledBox-sc-13pk1d4-0 kCHbcv sc-bwzfXH jjMsVw"
                   disabled={false}
-                  onClick={[Function]}
                 >
                   <button
                     className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                     onBlur={[Function]}
+                    onClick={[Function]}
                     onFocus={[Function]}
                     onMouseOut={[Function]}
                     onMouseOver={[Function]}
@@ -14436,11 +14449,11 @@ exports[`Storyshots Screens/Data Lookup Home 1`] = `
                   className="StyledBox-sc-13pk1d4-0 btZOKq sc-bwzfXH bPNHik"
                   color="dark-4"
                   disabled={false}
-                  onClick={[Function]}
                 >
                   <button
                     className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                     onBlur={[Function]}
+                    onClick={[Function]}
                     onFocus={[Function]}
                     onMouseOut={[Function]}
                     onMouseOver={[Function]}
@@ -14588,11 +14601,11 @@ exports[`Storyshots Screens/Data Lookup Phone code - ERROR 1`] = `
                 <div
                   className="StyledBox-sc-13pk1d4-0 AjHta sc-bwzfXH bHtVNS"
                   disabled={false}
-                  onClick={[Function]}
                 >
                   <button
                     className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                     onBlur={[Function]}
+                    onClick={[Function]}
                     onFocus={[Function]}
                     onMouseOut={[Function]}
                     onMouseOver={[Function]}
@@ -14608,11 +14621,11 @@ exports[`Storyshots Screens/Data Lookup Phone code - ERROR 1`] = `
                 <div
                   className="StyledBox-sc-13pk1d4-0 jGLiwe sc-bwzfXH jjMsVw"
                   disabled={false}
-                  onClick={[Function]}
                 >
                   <button
                     className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                     onBlur={[Function]}
+                    onClick={[Function]}
                     onFocus={[Function]}
                     onMouseOut={[Function]}
                     onMouseOver={[Function]}
@@ -14760,11 +14773,11 @@ exports[`Storyshots Screens/Data Lookup Phone code 1`] = `
                 <div
                   className="StyledBox-sc-13pk1d4-0 AjHta sc-bwzfXH bHtVNS"
                   disabled={false}
-                  onClick={[Function]}
                 >
                   <button
                     className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                     onBlur={[Function]}
+                    onClick={[Function]}
                     onFocus={[Function]}
                     onMouseOut={[Function]}
                     onMouseOver={[Function]}
@@ -14780,11 +14793,11 @@ exports[`Storyshots Screens/Data Lookup Phone code 1`] = `
                 <div
                   className="StyledBox-sc-13pk1d4-0 jGLiwe sc-bwzfXH jjMsVw"
                   disabled={false}
-                  onClick={[Function]}
                 >
                   <button
                     className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                     onBlur={[Function]}
+                    onClick={[Function]}
                     onFocus={[Function]}
                     onMouseOut={[Function]}
                     onMouseOver={[Function]}
@@ -15306,11 +15319,11 @@ exports[`Storyshots Screens/Data Lookup Request Form 1`] = `
       <div
         className="StyledBox-sc-13pk1d4-0 BwhWM sc-bwzfXH jjMsVw"
         disabled={false}
-        onClick={[Function]}
       >
         <button
           className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
           onBlur={[Function]}
+          onClick={[Function]}
           onFocus={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -15428,11 +15441,11 @@ exports[`Storyshots Screens/Data Lookup Waiting room 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 iIXOkV sc-bwzfXH jjMsVw"
                     disabled={false}
-                    onClick={[Function]}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                       onBlur={[Function]}
+                      onClick={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
@@ -15538,11 +15551,11 @@ exports[`Storyshots Screens/Identity Home 1`] = `
                   <div
                     className="StyledBox-sc-13pk1d4-0 iHvwyH sc-bwzfXH jjMsVw"
                     disabled={false}
-                    onClick={[Function]}
                   >
                     <button
                       className="StyledButton-sc-323bzc-0 jMTvbD sc-bdVaJa kmMYJA"
                       onBlur={[Function]}
+                      onClick={[Function]}
                       onFocus={[Function]}
                       onMouseOut={[Function]}
                       onMouseOver={[Function]}
diff --git a/packages/ui/components/button.js b/packages/ui/components/button.js
index 3c55b2d6e..8ab3d78c0 100644
--- a/packages/ui/components/button.js
+++ b/packages/ui/components/button.js
@@ -50,6 +50,7 @@ const Button = ({
   plain,
   icon,
   reverseIcon,
+  testId,
   ...props
 }) => {
   let backgroundColor = primary ? 'primary' : 'light-2';
@@ -71,10 +72,16 @@ const Button = ({
       justify="center"
       align="center"
       disabled={disabled}
-      onClick={disabled ? null : onClick}
       {...props}
     >
-      <Btn plain label={label} icon={icon} reverse={reverseIcon} />
+      <Btn
+        plain
+        label={label}
+        icon={icon}
+        reverse={reverseIcon}
+        data-test-id={testId}
+        onClick={disabled ? null : onClick}
+      />
     </BtnContainer>
   );
 };
@@ -97,6 +104,7 @@ Button.propTypes = {
   plain: PropTypes.bool,
   icon: PropTypes.node,
   onClick: PropTypes.func,
+  testId: PropTypes.string.isRequired,
   ...GrommetButton.propTypes,
 };
 
diff --git a/packages/ui/components/form-field.js b/packages/ui/components/form-field.js
index b57a3ad8b..4995355da 100644
--- a/packages/ui/components/form-field.js
+++ b/packages/ui/components/form-field.js
@@ -73,6 +73,7 @@ const FormField = ({
   onRemove,
   disabled,
   autoComplete,
+  testId,
   ...props
 }) => (
   <>
@@ -91,6 +92,7 @@ const FormField = ({
         onChange={onChange}
         error={error}
         autoComplete={autoComplete}
+        data-test-id={testId}
       />
       {onRemove && <Remove onClick={onRemove} />}
     </Box>
@@ -113,6 +115,7 @@ FormField.propTypes = {
   name: PropTypes.string,
   disabled: PropTypes.bool,
   autoComplete: PropTypes.string,
+  testId: PropTypes.string.isRequired,
 };
 
 FormField.defaultProps = {
diff --git a/packages/ui/components/text-area.js b/packages/ui/components/text-area.js
index 504691cf3..17883ad9d 100644
--- a/packages/ui/components/text-area.js
+++ b/packages/ui/components/text-area.js
@@ -39,7 +39,15 @@ const StyledTextArea = styled(GrommetTextArea)`
   }
 `;
 
-const TextArea = ({placeholder, value, name, onChange, error, disabled}) => {
+const TextArea = ({
+  placeholder,
+  value,
+  name,
+  onChange,
+  error,
+  disabled,
+  testId,
+}) => {
   const ref = useRef(null);
   useEffect(() => {
     if (ref.current) {
@@ -60,6 +68,7 @@ const TextArea = ({placeholder, value, name, onChange, error, disabled}) => {
           onChange={onChange}
           ref={ref}
           resize={false}
+          data-test-id={testId}
         />
         {error && typeof error === 'string' && (
           <Text color="red" margin={{left: 'small', top: 'small'}}>
@@ -78,6 +87,7 @@ TextArea.propTypes = {
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
+  testId: PropTypes.string.isRequired,
 };
 
 TextArea.defaultProps = {
diff --git a/packages/ui/components/toggle.js b/packages/ui/components/toggle.js
index a7750f6c2..2a3cdcb57 100644
--- a/packages/ui/components/toggle.js
+++ b/packages/ui/components/toggle.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import {bool, func} from 'prop-types';
+import {bool, func, string} from 'prop-types';
 
 function cursorStyle({readOnly, disabled}) {
   if (readOnly) {
@@ -62,7 +62,13 @@ const CheckBox = styled.input.attrs(({readOnly, disabled}) => ({
   height: 22px;
 `;
 
-export default function Toggle({checked, onChange, disabled, readOnly}) {
+export default function Toggle({
+  checked,
+  onChange,
+  disabled,
+  readOnly,
+  testId,
+}) {
   return (
     <CheckBoxLabel checked={checked} disabled={disabled} readOnly={readOnly}>
       <CheckBox
@@ -71,6 +77,7 @@ export default function Toggle({checked, onChange, disabled, readOnly}) {
         disabled={disabled}
         readOnly={readOnly}
         onChange={event => (readOnly ? null : onChange(event.target.checked))}
+        data-test-id={testId}
       />
     </CheckBoxLabel>
   );
@@ -86,4 +93,5 @@ Toggle.propTypes = {
   disabled: bool,
   onChange: func.isRequired,
   readOnly: bool,
+  testId: string.isRequired,
 };
diff --git a/packages/ui/modals/confirm.js b/packages/ui/modals/confirm.js
index 1f150c675..44f2ee324 100644
--- a/packages/ui/modals/confirm.js
+++ b/packages/ui/modals/confirm.js
@@ -29,6 +29,7 @@ const ConfirmModal = ({
   cancelText,
   requiresDoubleConfirm,
   disabled,
+  testId,
 }) => {
   const [canClickConfirm, setCanClickConfirm] = useState(
     !requiresDoubleConfirm,
@@ -51,7 +52,12 @@ const ConfirmModal = ({
       >
         {renderHeader()}
         <CloseBtnContainer>
-          <Button onClick={onDismiss} icon={<Close size="small" />} plain />
+          <Button
+            onClick={onDismiss}
+            icon={<Close size="small" />}
+            plain
+            testId={`${testId}-cancel-btn`}
+          />
         </CloseBtnContainer>
       </Box>
       <Box pad={{horizontal: 'large', bottom: 'small'}}>{renderBody()}</Box>
@@ -64,6 +70,7 @@ const ConfirmModal = ({
             <CheckBox
               checked={canClickConfirm}
               onChange={() => setCanClickConfirm(currentValue => !currentValue)}
+              data-test-id={`${testId}-confirm-checkbox`}
             />
             <FormattedText
               id="modal.confirm.double"
@@ -85,6 +92,7 @@ const ConfirmModal = ({
                 {cancelText}
               </Text>
             }
+            testId={`${testId}-cancel-btn`}
             onClick={onDismiss}
           />
           <Button
@@ -98,6 +106,7 @@ const ConfirmModal = ({
                 {confirmText}
               </Text>
             }
+            testId={`${testId}-confirm-btn`}
           />
         </Box>
       </Box>
@@ -123,6 +132,7 @@ ConfirmModal.propTypes = {
   requiresDoubleConfirm: PropTypes.bool,
   alert: PropTypes.bool,
   disabled: PropTypes.bool,
+  testId: PropTypes.string.isRequired,
 };
 
 export default ConfirmModal;

From be614108f692a605faf7658fb18384ba35161cbd Mon Sep 17 00:00:00 2001
From: Nicolas Brugneaux <nicolas.brugneaux@gmail.com>
Date: Thu, 21 Nov 2019 12:32:28 +0100
Subject: [PATCH 2/2] [*] fix: remove all invalid dates

---
 .../permission-settings/src/containers/manage-data-details.js   | 2 +-
 packages/permission-settings/src/state/activity.js              | 2 +-
 .../stories/modals/permissioning-app/tx-details-modal.js        | 2 +-
 packages/ui/modals/permissioning-app/tx-details-modal.js        | 2 +-
 packages/ui/screens/activity/record.js                          | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/permission-settings/src/containers/manage-data-details.js b/packages/permission-settings/src/containers/manage-data-details.js
index 873a3137f..5c251adf4 100644
--- a/packages/permission-settings/src/containers/manage-data-details.js
+++ b/packages/permission-settings/src/containers/manage-data-details.js
@@ -82,7 +82,7 @@ function ManageDataDetailsDisplay({categoryId, useCaseId, onBackButtonClick}) {
             },
           ],
           blockNumber: R.path(['activity', 'txDetails', 'blockNumber'], u),
-          date: R.path(['activity', 'date'], u),
+          date: new Date(R.path(['activity', 'date'], u)).toLocaleString(),
           transactionHash: R.path(['activity', 'txDetails', 'hash'], u),
         },
       }))}
diff --git a/packages/permission-settings/src/state/activity.js b/packages/permission-settings/src/state/activity.js
index f2793ba4c..fd7858f2b 100644
--- a/packages/permission-settings/src/state/activity.js
+++ b/packages/permission-settings/src/state/activity.js
@@ -7,7 +7,7 @@ import useFetch from '../utils/use-fetch';
 import User from './user';
 
 function parseDate(date) {
-  return new Date(date).toLocaleString();
+  return new Date(date);
 }
 
 function parseStatus(status) {
diff --git a/packages/storybook/stories/modals/permissioning-app/tx-details-modal.js b/packages/storybook/stories/modals/permissioning-app/tx-details-modal.js
index 21791f109..53e92ecc0 100644
--- a/packages/storybook/stories/modals/permissioning-app/tx-details-modal.js
+++ b/packages/storybook/stories/modals/permissioning-app/tx-details-modal.js
@@ -20,7 +20,7 @@ const txDetailsParams = {
     },
   ],
   blockNumber: '5513415',
-  date: 0 + new Date(0).getTimezoneOffset() * 60 * 1000,
+  date: new Date(0 + new Date(0).getTimezoneOffset() * 60 * 1000),
   transactionHash:
     '22140E794F78B853E29C810F7FE59260B610E845D0315E82F68162DCB8DD9C81',
 };
diff --git a/packages/ui/modals/permissioning-app/tx-details-modal.js b/packages/ui/modals/permissioning-app/tx-details-modal.js
index c956fbb3c..dc5953d65 100644
--- a/packages/ui/modals/permissioning-app/tx-details-modal.js
+++ b/packages/ui/modals/permissioning-app/tx-details-modal.js
@@ -61,7 +61,7 @@ const TxDetailsModal = ({
               defaultMessage="Written"
               color="dark-2"
             />
-            <Text color="dark-2">{new Date(date).toLocaleString()}</Text>
+            <Text color="dark-2">{date.toLocaleString()}</Text>
           </Box>
         </Box>
         <CloseBtnContainer>
diff --git a/packages/ui/screens/activity/record.js b/packages/ui/screens/activity/record.js
index b46048175..0591710e1 100644
--- a/packages/ui/screens/activity/record.js
+++ b/packages/ui/screens/activity/record.js
@@ -60,7 +60,7 @@ const ActivityRecord = ({
             </Box>
           </Box>
           <Text color="dark-2" margin={{top: 'xsmall'}}>
-            {date}
+            {date.toLocaleString()}
           </Text>
           {permissionModalVisible && (
             <TxDetailsModal