From 9473a0b157fafc9c6c961cf53f89e808f569bfc4 Mon Sep 17 00:00:00 2001
From: Tim R <timothy.roettger@adhocteam.us>
Date: Mon, 13 May 2024 17:41:34 -0500
Subject: [PATCH 1/4] Split out Spacer component, add unit tests, add stories

---
 .../components/src/components/Alert/Alert.tsx |  3 +-
 .../src/components/Spacer/Spacer.stories.tsx  | 85 +++++++++++++++++++
 .../src/components/Spacer/Spacer.test.tsx     | 41 +++++++++
 .../src/components/Spacer/Spacer.tsx          | 26 ++++++
 packages/components/src/utils/index.tsx       | 25 +-----
 5 files changed, 155 insertions(+), 25 deletions(-)
 create mode 100644 packages/components/src/components/Spacer/Spacer.stories.tsx
 create mode 100644 packages/components/src/components/Spacer/Spacer.test.tsx
 create mode 100644 packages/components/src/components/Spacer/Spacer.tsx

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 29ff3b47..f81ea51a 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -10,9 +10,10 @@ import {
 } from 'react-native'
 import React, { FC, useState } from 'react'
 
-import { BaseColor, Spacer, useColorScheme } from '../../utils'
+import { BaseColor, useColorScheme } from '../../utils'
 import { Button, ButtonProps, ButtonVariants } from '../Button/Button'
 import { Icon, IconProps } from '../Icon/Icon'
+import { Spacer } from '../Spacer/Spacer'
 
 /** Convenience function to set children content color correctly with light/dark mode */
 export const AlertContentColor = BaseColor
diff --git a/packages/components/src/components/Spacer/Spacer.stories.tsx b/packages/components/src/components/Spacer/Spacer.stories.tsx
new file mode 100644
index 00000000..5ca8372c
--- /dev/null
+++ b/packages/components/src/components/Spacer/Spacer.stories.tsx
@@ -0,0 +1,85 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { View, ViewStyle } from 'react-native'
+import React from 'react'
+
+import { Button } from '../Button/Button'
+import { Spacer, SpacerProps } from './Spacer'
+
+const centerProps: ViewStyle = {
+  flex: 1,
+  justifyContent: 'center',
+  alignItems: 'center',
+}
+
+const meta: Meta<SpacerProps> = {
+  title: 'Spacer',
+  component: Spacer,
+  decorators: [
+    (Story) => (
+      <View style={centerProps}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<SpacerProps>
+
+export const Horizontal: Story = {
+  name: 'Horizontal',
+  args: {
+    horizontal: true,
+  },
+  decorators: [
+    (Story) => (
+      <View
+        style={{
+          ...centerProps,
+          flexDirection: 'row',
+        }}>
+        <Button
+          label="Button before Spacer"
+          onPress={() => {
+            null
+          }}
+        />
+        <Story />
+        <Button
+          label="Button after Spacer"
+          onPress={() => {
+            null
+          }}
+        />
+      </View>
+    ),
+  ],
+}
+
+export const Vertical: Story = {
+  name: 'Vertical',
+  decorators: [
+    (Story) => (
+      <View
+        style={{
+          ...centerProps,
+          flexDirection: 'column',
+        }}>
+        <Button
+          label="Button before Spacer"
+          onPress={() => {
+            null
+          }}
+        />
+        <Story />
+        <Button
+          label="Button after Spacer"
+          onPress={() => {
+            null
+          }}
+        />
+      </View>
+    ),
+  ],
+}
diff --git a/packages/components/src/components/Spacer/Spacer.test.tsx b/packages/components/src/components/Spacer/Spacer.test.tsx
new file mode 100644
index 00000000..b2e05829
--- /dev/null
+++ b/packages/components/src/components/Spacer/Spacer.test.tsx
@@ -0,0 +1,41 @@
+import { Spacer } from './Spacer'
+import { render, screen } from '@testing-library/react-native'
+import React from 'react'
+
+describe('Spacer', () => {
+  it('renders correctly at default size (10)', () => {
+    render(<Spacer />)
+
+    const spacer = screen.root
+
+    expect(spacer.props.style.height).toBe(10)
+    expect(spacer.props.style.width).toBe('auto')
+  })
+
+  it('renders correctly at overridden size 20', () => {
+    render(<Spacer size={20} />)
+
+    const spacer = screen.root
+
+    expect(spacer.props.style.height).toBe(20)
+    expect(spacer.props.style.width).toBe('auto')
+  })
+
+  it('renders horizontally at default size (10)', () => {
+    render(<Spacer horizontal />)
+
+    const spacer = screen.root
+
+    expect(spacer.props.style.height).toBe('auto')
+    expect(spacer.props.style.width).toBe(10)
+  })
+
+  it('renders horizontally at overridden size 20', () => {
+    render(<Spacer size={20} horizontal />)
+
+    const spacer = screen.root
+
+    expect(spacer.props.style.height).toBe('auto')
+    expect(spacer.props.style.width).toBe(20)
+  })
+})
diff --git a/packages/components/src/components/Spacer/Spacer.tsx b/packages/components/src/components/Spacer/Spacer.tsx
new file mode 100644
index 00000000..1fc7b9ee
--- /dev/null
+++ b/packages/components/src/components/Spacer/Spacer.tsx
@@ -0,0 +1,26 @@
+import { View } from 'react-native'
+import React, { FC } from 'react'
+
+export type SpacerProps = {
+  /** Size of the spacer, default 10 */
+  size?: number
+  /** True for horizontal spacing */
+  horizontal?: boolean
+}
+
+/**
+ * Convenience component for handling spacing without managing margin/padding between elements
+ * @param size - Size of the spacer, default 10
+ * @param horizontal - True for horizontal spacing
+ * @returns A non-visible component sized to provide appropriate spacing
+ */
+export const Spacer: FC<SpacerProps> = ({ size = 10, horizontal = false }) => {
+  return (
+    <View
+      style={{
+        width: horizontal ? size : 'auto',
+        height: !horizontal ? size : 'auto',
+      }}
+    />
+  )
+}
diff --git a/packages/components/src/utils/index.tsx b/packages/components/src/utils/index.tsx
index 59ade94e..6e855749 100644
--- a/packages/components/src/utils/index.tsx
+++ b/packages/components/src/utils/index.tsx
@@ -4,11 +4,10 @@ import {
   PressableStateCallbackType,
   useColorScheme as RNUseColorScheme,
   StyleProp,
-  View,
   ViewStyle,
 } from 'react-native'
 import { Colors as TokenColors } from '@department-of-veterans-affairs/mobile-tokens'
-import React, { FC, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 /** Function to prefill base gray colors */
 export function BaseColor() {
@@ -75,25 +74,3 @@ export function PressableOpacityStyle(
 
   return ({ pressed }) => [{ opacity: pressed ? 0.2 : 1 }]
 }
-
-export type SpacerProps = {
-  /** Size of spacer, default 10 */
-  size?: number
-  /** True for horizontal spacing */
-  horizontal?: boolean
-}
-
-/** Convenience component for handling spacing without managing margin/padding between elements */
-export const Spacer: FC<SpacerProps> = ({
-  size = 10,
-  horizontal = false
-}) => {
-  return (
-    <View
-      style={{
-        width: horizontal ? size : 'auto',
-        height: !horizontal ? size : 'auto',
-      }}
-    />
-  )
-}
\ No newline at end of file

From 74ce263f887dcdb7bbb4eed87f7e754ddc83a603 Mon Sep 17 00:00:00 2001
From: Tim R <timothy.roettger@adhocteam.us>
Date: Tue, 14 May 2024 13:04:54 -0500
Subject: [PATCH 2/4] Alert fix, partial horizontal story fix

---
 .../src/components/Alert/Alert.stories.tsx    |  2 +-
 .../src/components/Spacer/Spacer.stories.tsx  | 30 +++++++++++--------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.stories.tsx b/packages/components/src/components/Alert/Alert.stories.tsx
index 4fc8a0a2..84eb5a17 100644
--- a/packages/components/src/components/Alert/Alert.stories.tsx
+++ b/packages/components/src/components/Alert/Alert.stories.tsx
@@ -1,7 +1,7 @@
 import { Alert, AlertProps } from './Alert'
 import { Link } from '../Link/Link'
 import { Meta, StoryObj } from '@storybook/react'
-import { Spacer } from '../../utils/'
+import { Spacer } from '../Spacer/Spacer'
 import { View } from 'react-native'
 import React from 'react'
 
diff --git a/packages/components/src/components/Spacer/Spacer.stories.tsx b/packages/components/src/components/Spacer/Spacer.stories.tsx
index 5ca8372c..7c51e32c 100644
--- a/packages/components/src/components/Spacer/Spacer.stories.tsx
+++ b/packages/components/src/components/Spacer/Spacer.stories.tsx
@@ -2,7 +2,9 @@ import { Meta, StoryObj } from '@storybook/react'
 import { View, ViewStyle } from 'react-native'
 import React from 'react'
 
-import { Button } from '../Button/Button'
+import { Button, ButtonVariants } from '../Button/Button'
+import { Icon } from '../Icon/Icon'
+import { Link } from '../Link/Link'
 import { Spacer, SpacerProps } from './Spacer'
 
 const centerProps: ViewStyle = {
@@ -27,6 +29,15 @@ export default meta
 
 type Story = StoryObj<SpacerProps>
 
+const iconViewStyle: ViewStyle = {
+  flexDirection: 'row',
+  // Below keeps icon aligned with first row of text, centered, and scalable
+  alignSelf: 'flex-start',
+  minHeight: 30,
+  alignItems: 'center',
+  justifyContent: 'center',
+}
+
 export const Horizontal: Story = {
   name: 'Horizontal',
   args: {
@@ -39,19 +50,11 @@ export const Horizontal: Story = {
           ...centerProps,
           flexDirection: 'row',
         }}>
-        <Button
-          label="Button before Spacer"
-          onPress={() => {
-            null
-          }}
-        />
+        <View {...iconViewStyle} >
+          <Icon name="Info" preventScaling />
+        </View>
         <Story />
-        <Button
-          label="Button after Spacer"
-          onPress={() => {
-            null
-          }}
-        />
+        <Link text='Link text after Spacer' type='custom' onPress={() => { null }} />
       </View>
     ),
   ],
@@ -75,6 +78,7 @@ export const Vertical: Story = {
         <Story />
         <Button
           label="Button after Spacer"
+          buttonType={ButtonVariants.Secondary}
           onPress={() => {
             null
           }}

From 0c7223be114084cf881b71e85c485d3518adefed Mon Sep 17 00:00:00 2001
From: Tim R <timothy.roettger@adhocteam.us>
Date: Tue, 14 May 2024 14:27:59 -0500
Subject: [PATCH 3/4] Story fixes

---
 .../src/components/Spacer/Spacer.stories.tsx  | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/packages/components/src/components/Spacer/Spacer.stories.tsx b/packages/components/src/components/Spacer/Spacer.stories.tsx
index 7c51e32c..fb619d02 100644
--- a/packages/components/src/components/Spacer/Spacer.stories.tsx
+++ b/packages/components/src/components/Spacer/Spacer.stories.tsx
@@ -29,15 +29,6 @@ export default meta
 
 type Story = StoryObj<SpacerProps>
 
-const iconViewStyle: ViewStyle = {
-  flexDirection: 'row',
-  // Below keeps icon aligned with first row of text, centered, and scalable
-  alignSelf: 'flex-start',
-  minHeight: 30,
-  alignItems: 'center',
-  justifyContent: 'center',
-}
-
 export const Horizontal: Story = {
   name: 'Horizontal',
   args: {
@@ -50,11 +41,15 @@ export const Horizontal: Story = {
           ...centerProps,
           flexDirection: 'row',
         }}>
-        <View {...iconViewStyle} >
-          <Icon name="Info" preventScaling />
-        </View>
+        <Icon name="Info" preventScaling />
         <Story />
-        <Link text='Link text after Spacer' type='custom' onPress={() => { null }} />
+        <Link
+          text="Link text after Spacer"
+          type="custom"
+          onPress={() => {
+            null
+          }}
+        />
       </View>
     ),
   ],

From a6cb639d6407e8bdbcd6e172ee1f7a86b7bbe5ff Mon Sep 17 00:00:00 2001
From: Tim R <timothy.roettger@adhocteam.us>
Date: Wed, 15 May 2024 11:19:46 -0500
Subject: [PATCH 4/4] Add export so Spacer available via NPM

---
 packages/components/src/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx
index f7931a52..0fd43835 100644
--- a/packages/components/src/index.tsx
+++ b/packages/components/src/index.tsx
@@ -12,3 +12,4 @@ export { Button, ButtonVariants } from './components/Button/Button'
 export { Icon } from './components/Icon/Icon'
 export { Link } from './components/Link/Link'
 export { SegmentedControl } from './components/SegmentedControl/SegmentedControl'
+export { Spacer } from './components/Spacer/Spacer'