From 39a94d980a0595200253a3ff69247b6900daa5b9 Mon Sep 17 00:00:00 2001
From: Demetrius Panovitch <demetrius.mp789@gmail.com>
Date: Sun, 1 May 2022 17:16:58 -0400
Subject: [PATCH 1/3] feat: adds gap property

---
 src/Flex.d.ts              |  1 +
 src/Flex.svelte            |  3 +++
 src/__tests__/Flex.spec.js | 12 ++++++++++++
 3 files changed, 16 insertions(+)

diff --git a/src/Flex.d.ts b/src/Flex.d.ts
index eec63fe..0772ba6 100644
--- a/src/Flex.d.ts
+++ b/src/Flex.d.ts
@@ -17,6 +17,7 @@ export interface FlexProps {
   justify?: Justify;
   direction?: Direction;
   reverse?: boolean;
+  gap?: string;
 }
 
 export default class Flex extends SvelteComponentTyped<FlexProps> {}
diff --git a/src/Flex.svelte b/src/Flex.svelte
index 41f862d..e57b983 100644
--- a/src/Flex.svelte
+++ b/src/Flex.svelte
@@ -3,6 +3,7 @@
   export let align = 'center';
   export let justify = 'center';
   export let reverse = false;
+  export let gap = '0';
 
   //  'start' | 'center' | 'end' | 'stretch'
   const alignMap = {
@@ -22,6 +23,7 @@
     evenly: 'space-evenly',
   };
 
+
   $: directionWithReverse = reverse ? `${direction}-reverse` : direction;
 </script>
 
@@ -32,6 +34,7 @@
   style:flex-direction={directionWithReverse}
   style:align-items={alignMap[align]}
   style:justify-content={justifyMap[justify]}
+  style:gap={gap}
 >
   <slot />
 </div>
diff --git a/src/__tests__/Flex.spec.js b/src/__tests__/Flex.spec.js
index 6d7f39a..20ddb8f 100644
--- a/src/__tests__/Flex.spec.js
+++ b/src/__tests__/Flex.spec.js
@@ -140,4 +140,16 @@ describe('<Flex /> component', () => {
       expect(container).not.toHaveStyle('flex-direction: column'); // default/fallback
     });
   });
+
+  describe('gap prop', () => {
+    test('gap default value', () => {
+      const container = renderFlex();
+      expect(container).toHaveStyle('gap: 0');
+    });
+
+    test('gap 1 rem', () => {
+      const container = renderFlex({ gap: '1rem' });
+      expect(container).toHaveStyle('gap: 1rem');
+    });
+  })
 });

From 01fec8b1beeaba984df5fd0de8b46e7d6a84ece3 Mon Sep 17 00:00:00 2001
From: Demetrius Panovitch <demetrius.mp789@gmail.com>
Date: Sun, 1 May 2022 17:44:05 -0400
Subject: [PATCH 2/3] feat: adds test for bad value on gap property

---
 src/__tests__/Flex.spec.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/__tests__/Flex.spec.js b/src/__tests__/Flex.spec.js
index 20ddb8f..89f3521 100644
--- a/src/__tests__/Flex.spec.js
+++ b/src/__tests__/Flex.spec.js
@@ -142,14 +142,22 @@ describe('<Flex /> component', () => {
   });
 
   describe('gap prop', () => {
-    test('gap default value', () => {
+    test('has gap prop set to 1 rem', () => {
+      const container = renderFlex({ gap: '1rem' });
+      expect(container).toHaveStyle('gap: 1rem');
+      expect(container).not.toHaveStyle('gap: 0rem');
+    });
+
+    test('does not has gap prop', () => {
       const container = renderFlex();
       expect(container).toHaveStyle('gap: 0');
+      expect(container).not.toHaveStyle('gap: 1rem');
     });
 
-    test('gap 1 rem', () => {
-      const container = renderFlex({ gap: '1rem' });
-      expect(container).toHaveStyle('gap: 1rem');
+    test('bad value', () => {
+      const container = renderFlex({ gap: 'oops' });
+      expect(container).not.toHaveStyle('gap: 1rem');
+      expect(container).not.toHaveStyle('gap: 0');
     });
   })
 });

From 840eac4c90d9684ccac6862193d4d4a91ea2483b Mon Sep 17 00:00:00 2001
From: Demetrius Panovitch <demetrius.mp789@gmail.com>
Date: Mon, 19 Sep 2022 22:55:05 -0400
Subject: [PATCH 3/3] fix: gap prop defaults to undefined, and remove test for
 unset gap prop

---
 src/Flex.svelte            | 2 +-
 src/__tests__/Flex.spec.js | 6 ------
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/Flex.svelte b/src/Flex.svelte
index e57b983..a54df70 100644
--- a/src/Flex.svelte
+++ b/src/Flex.svelte
@@ -3,7 +3,7 @@
   export let align = 'center';
   export let justify = 'center';
   export let reverse = false;
-  export let gap = '0';
+  export let gap = undefined;
 
   //  'start' | 'center' | 'end' | 'stretch'
   const alignMap = {
diff --git a/src/__tests__/Flex.spec.js b/src/__tests__/Flex.spec.js
index 89f3521..c860c66 100644
--- a/src/__tests__/Flex.spec.js
+++ b/src/__tests__/Flex.spec.js
@@ -148,12 +148,6 @@ describe('<Flex /> component', () => {
       expect(container).not.toHaveStyle('gap: 0rem');
     });
 
-    test('does not has gap prop', () => {
-      const container = renderFlex();
-      expect(container).toHaveStyle('gap: 0');
-      expect(container).not.toHaveStyle('gap: 1rem');
-    });
-
     test('bad value', () => {
       const container = renderFlex({ gap: 'oops' });
       expect(container).not.toHaveStyle('gap: 1rem');