From 618ac4365a99e01829a6bf778fd93c0de1573a26 Mon Sep 17 00:00:00 2001
From: Iveta <quietbits@gmail.com>
Date: Wed, 27 Mar 2024 16:40:38 -0400
Subject: [PATCH] Box component + tweak ExpandBox

---
 src/app/(sidebar)/account/create/page.tsx   | 13 ++++-----
 src/app/(sidebar)/account/styles.scss       |  1 -
 src/components/ExpandBox/index.tsx          | 13 +++++++--
 src/components/ExpandBox/styles.scss        | 30 ++++++++++++++++++++-
 src/components/FormElements/AssetPicker.tsx |  2 ++
 src/components/layout/Box/index.tsx         | 21 +++++++++++++++
 src/components/layout/Box/styles.scss       | 28 +++++++++++++++++++
 src/styles/globals.scss                     | 10 +++++++
 8 files changed, 108 insertions(+), 10 deletions(-)
 create mode 100644 src/components/layout/Box/index.tsx
 create mode 100644 src/components/layout/Box/styles.scss

diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx
index a8320527..a8cc01fa 100644
--- a/src/app/(sidebar)/account/create/page.tsx
+++ b/src/app/(sidebar)/account/create/page.tsx
@@ -52,13 +52,14 @@ export default function CreateAccount() {
               Fund account with Friendbot
             </Button>
           </div>
+
+          <ExpandBox isExpanded={Boolean(account.publicKey)} offsetTop="xl">
+            <GenerateKeypair
+              publicKey={account.publicKey}
+              secretKey={secretKey}
+            />
+          </ExpandBox>
         </div>
-        <ExpandBox isExpanded={Boolean(account.publicKey)}>
-          <GenerateKeypair
-            publicKey={account.publicKey}
-            secretKey={secretKey}
-          />
-        </ExpandBox>
       </Card>
     </div>
   );
diff --git a/src/app/(sidebar)/account/styles.scss b/src/app/(sidebar)/account/styles.scss
index 6bc7c7e4..6270f70a 100644
--- a/src/app/(sidebar)/account/styles.scss
+++ b/src/app/(sidebar)/account/styles.scss
@@ -24,7 +24,6 @@
     display: flex;
     align-items: flex-start;
     flex-direction: column;
-    margin-top: pxToRem(24px);
     gap: pxToRem(16px);
 
     .Input__side-element--right {
diff --git a/src/components/ExpandBox/index.tsx b/src/components/ExpandBox/index.tsx
index b26fbcee..e23fba49 100644
--- a/src/components/ExpandBox/index.tsx
+++ b/src/components/ExpandBox/index.tsx
@@ -4,7 +4,15 @@ import "./styles.scss";
 export const ExpandBox = ({
   children,
   isExpanded,
-}: {
+  offsetTop,
+  customValue,
+}: (
+  | {
+      offsetTop: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+      customValue?: undefined;
+    }
+  | { offsetTop: "custom"; customValue: string }
+) & {
   children: React.ReactNode;
   isExpanded: boolean;
 }) => {
@@ -24,7 +32,8 @@ export const ExpandBox = ({
 
   return (
     <div
-      className="ExpandBox"
+      className={`ExpandBox ExpandBox--${offsetTop}`}
+      {...(offsetTop === "custom" ? { marginTop: customValue } : {})}
       data-is-expanded={isExpanded}
       data-is-open={isOpen}
     >
diff --git a/src/components/ExpandBox/styles.scss b/src/components/ExpandBox/styles.scss
index 09ddd20f..a2928a44 100644
--- a/src/components/ExpandBox/styles.scss
+++ b/src/components/ExpandBox/styles.scss
@@ -1,10 +1,38 @@
 .ExpandBox {
   display: grid;
   grid-template-rows: 0fr;
-  transition: grid-template-rows 100ms ease-out;
+  transition:
+    grid-template-rows 100ms ease-out,
+    margin-top 100ms ease-out;
+  margin-top: 0;
+
+  &--xs {
+    margin-top: calc(var(--sds-gap-xs) * -1);
+  }
+
+  &--sm {
+    margin-top: calc(var(--sds-gap-sm) * -1);
+  }
+
+  &--md {
+    margin-top: calc(var(--sds-gap-md) * -1);
+  }
+
+  &--lg {
+    margin-top: calc(var(--sds-gap-lg) * -1);
+  }
+
+  &--xl {
+    margin-top: calc(var(--sds-gap-xl) * -1);
+  }
+
+  &--xxl {
+    margin-top: calc(var(--sds-gap-xxl) * -1);
+  }
 
   &[data-is-expanded="true"] {
     grid-template-rows: 1fr;
+    margin-top: 0;
   }
 
   &[data-is-open="true"] {
diff --git a/src/components/FormElements/AssetPicker.tsx b/src/components/FormElements/AssetPicker.tsx
index 23786616..f529fa70 100644
--- a/src/components/FormElements/AssetPicker.tsx
+++ b/src/components/FormElements/AssetPicker.tsx
@@ -107,6 +107,8 @@ export const AssetPicker = ({
               value.type,
             ),
         )}
+        offsetTop="custom"
+        customValue="0"
       >
         <AssetPickerFields
           id={id}
diff --git a/src/components/layout/Box/index.tsx b/src/components/layout/Box/index.tsx
new file mode 100644
index 00000000..932531ba
--- /dev/null
+++ b/src/components/layout/Box/index.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import "./styles.scss";
+
+export const Box = ({
+  gap,
+  children,
+  customValue,
+  addlClassName,
+}: (
+  | { gap: "xs" | "sm" | "md" | "lg" | "xl" | "xxl"; customValue?: undefined }
+  | { gap: "custom"; customValue: string }
+) & { children: React.ReactElement; addlClassName?: string }) => {
+  return (
+    <div
+      className={`Box Box--${gap} ${addlClassName}`}
+      {...(gap === "custom" ? { gap: customValue } : {})}
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/src/components/layout/Box/styles.scss b/src/components/layout/Box/styles.scss
new file mode 100644
index 00000000..d78edf39
--- /dev/null
+++ b/src/components/layout/Box/styles.scss
@@ -0,0 +1,28 @@
+.Box {
+  display: flex;
+  flex-direction: column;
+
+  &--xs {
+    gap: var(--sds-gap-xs);
+  }
+
+  &--sm {
+    gap: var(--sds-gap-sm);
+  }
+
+  &--md {
+    gap: var(--sds-gap-md);
+  }
+
+  &--lg {
+    gap: var(--sds-gap-lg);
+  }
+
+  &--xl {
+    gap: var(--sds-gap-xl);
+  }
+
+  &--xxl {
+    gap: var(--sds-gap-xxl);
+  }
+}
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 4491da7f..67ee458a 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -3,6 +3,16 @@
 // Fonts for SDS
 @import url("https://fonts.googleapis.com/css2?family=Inter+Tight&family=Inter:wght@400;500;600&family=Roboto+Mono&display=swap");
 
+// TODO: move to SDS when ready
+:root {
+  --sds-gap-xs: #{pxToRem(4px)};
+  --sds-gap-sm: #{pxToRem(8px)};
+  --sds-gap-md: #{pxToRem(12px)};
+  --sds-gap-lg: #{pxToRem(16px)};
+  --sds-gap-xl: #{pxToRem(24px)};
+  --sds-gap-xxl: #{pxToRem(32px)};
+}
+
 // Layout
 #root {
   min-width: auto !important;