Add support for capitalize prop for IconText

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@observation.org/react-native-components",
-  "version": "1.93.0",
+  "version": "1.94.0",
   "main": "src/index.ts",
   "exports": {
     ".": "./src/index.ts",

src/components/IconText.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { StyleProp, StyleSheet, Text, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native'
 
+import CapitalizeText from './CapitalizeText'
 import { Theme, useStyles } from '../theme'
 
 type IconTextStyle = {
@@ -15,17 +16,20 @@ type Props = {
   style: IconTextStyle
   onPress?: () => void
   singleLineText?: boolean
+  capitalize?: boolean
 }
 
-const IconText = ({ icon, text, style, onPress, singleLineText = false }: Props) => {
+const IconText = ({ icon, text, style, onPress, singleLineText = false, capitalize = false }: Props) => {
   const styles = useStyles(createStyles)
 
+  const TextComponent = capitalize ? CapitalizeText : Text
+
   const content = (
     <View style={[styles.containerStyle, style.containerStyle]}>
       <View style={[styles.iconContainer, style.iconContainerStyle]}>{icon}</View>
-      <Text numberOfLines={singleLineText ? 1 : undefined} style={[{ flexShrink: 1 }, style.textStyle]}>
+      <TextComponent numberOfLines={singleLineText ? 1 : undefined} style={[{ flexShrink: 1 }, style.textStyle]}>
         {text}
-      </Text>
+      </TextComponent>
     </View>
   )
 

src/components/__tests__/IconText.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { Text } from 'react-native'
+
+import { describe, expect, jest, test } from '@jest/globals'
+import { fireEvent, render } from '@testing-library/react-native'
+
+import IconText from '../IconText'
+
+describe('IconText', () => {
+  const icon = <Text>icon</Text>
+
+  describe('Rendering', () => {
+    test('With content', () => {
+      const { toJSON } = render(<IconText icon={icon} text={'Some text'} style={{}} />)
+
+      expect(toJSON()).toMatchSnapshot()
+    })
+
+    test('Single line text', () => {
+      const { toJSON } = render(<IconText icon={icon} text={'Some text'} style={{}} singleLineText />)
+
+      expect(toJSON()).toMatchSnapshot()
+    })
+
+    test('Capitalize text', () => {
+      const { toJSON, queryByText } = render(<IconText icon={icon} text={'some text'} style={{}} capitalize />)
+
+      expect(queryByText('Some text')).toBeTruthy()
+      expect(toJSON()).toMatchSnapshot()
+    })
+  })
+
+  describe('Interaction', () => {
+    test('Click', async () => {
+      // GIVEN
+      const onPress = jest.fn()
+      const { getByText } = render(<IconText icon={icon} text={'Some text'} style={{}} onPress={onPress} />)
+
+      // WHEN
+      await fireEvent.press(getByText('Some text'))
+
+      // THEN
+      expect(onPress).toHaveBeenCalledTimes(1)
+    })
+  })
+})

src/components/__tests__/__snapshots__/IconText.test.tsx.snap

@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`IconText Rendering Capitalize text 1`] = `
+<View
+  style={
+    [
+      {
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "justifyContent": "center",
+          "marginRight": 8,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      icon
+    </Text>
+  </View>
+  <Text
+    style={
+      [
+        {
+          "flexShrink": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    Some text
+  </Text>
+</View>
+`;
+
+exports[`IconText Rendering Single line text 1`] = `
+<View
+  style={
+    [
+      {
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "justifyContent": "center",
+          "marginRight": 8,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      icon
+    </Text>
+  </View>
+  <Text
+    numberOfLines={1}
+    style={
+      [
+        {
+          "flexShrink": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    Some text
+  </Text>
+</View>
+`;
+
+exports[`IconText Rendering With content 1`] = `
+<View
+  style={
+    [
+      {
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "justifyContent": "center",
+          "marginRight": 8,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      icon
+    </Text>
+  </View>
+  <Text
+    style={
+      [
+        {
+          "flexShrink": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    Some text
+  </Text>
+</View>
+`;