Merge pull request #322 from department-of-veterans-affairs/feature/2…

…57-roettger-SpacerComponent

[Feature] Standalone Spacer component

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'
 

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

packages/components/src/components/Spacer/Spacer.stories.tsx

@@ -0,0 +1,84 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { View, ViewStyle } from 'react-native'
+import React from 'react'
+
+import { Button, ButtonVariants } from '../Button/Button'
+import { Icon } from '../Icon/Icon'
+import { Link } from '../Link/Link'
+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',
+        }}>
+        <Icon name="Info" preventScaling />
+        <Story />
+        <Link
+          text="Link text after Spacer"
+          type="custom"
+          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"
+          buttonType={ButtonVariants.Secondary}
+          onPress={() => {
+            null
+          }}
+        />
+      </View>
+    ),
+  ],
+}

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)
+  })
+})

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',
+      }}
+    />
+  )
+}

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'

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',
-      }}
-    />
-  )
-}