Add hitSlop property to IconButton and two static species name styles to the theme

package.json

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

src/components/IconButton.tsx

@@ -10,6 +10,7 @@ type Props = {
   onPress?: () => void
   icon: IconProps
   accessibilityLabel?: string
+  hitSlop?: TouchableOpacityProps['hitSlop']
   testID?: string
   Touchable?: ComponentType<TouchableOpacityProps>
 }
@@ -20,6 +21,7 @@ const IconButton = ({
   onPress,
   icon,
   accessibilityLabel,
+  hitSlop,
   testID = 'pressable',
   Touchable = TouchableOpacity,
 }: Props) => {
@@ -32,6 +34,7 @@ const IconButton = ({
       disabled={disabled}
       onPress={disabled ? undefined : onPress}
       activeOpacity={0.5}
+      hitSlop={hitSlop}
     >
       <Icon size={theme.icon.size.l} {...icon} />
     </Touchable>

src/components/__tests__/IconButton.test.tsx

@@ -40,4 +40,16 @@ describe('IconButton', () => {
     // THEN
     expect(mockOnPress).toHaveBeenCalledTimes(0)
   })
+
+  test('Applies hitSlop', () => {
+    // GIVEN
+    const hitSlop = { top: 10, bottom: 10, left: 10, right: 10 }
+    const { getByTestId } = render(<IconButton icon={icon} hitSlop={hitSlop} />)
+
+    // WHEN
+    const pressable = getByTestId('pressable')
+
+    // THEN
+    expect(pressable.props.hitSlop).toEqual(hitSlop)
+  })
 })

src/theme/tokens/text.ts

@@ -19,6 +19,22 @@ export const createTextStyles = (theme: Theme) =>
       fontStyle: 'italic',
       color: theme.color.text.system.subtler,
     },
+    speciesLocalName: {
+      fontFamily: 'Ubuntu',
+      fontStyle: 'normal',
+      fontSize: 16,
+      lineHeight: 24,
+      fontWeight: 'bold',
+      color: theme.color.text.system.strong,
+    },
+    speciesScientificName: {
+      fontFamily: 'Ubuntu',
+      fontStyle: 'italic',
+      fontSize: 12,
+      lineHeight: 16,
+      fontWeight: 'normal',
+      color: theme.color.text.system.subtler,
+    },
     body: {
       ...theme.font.medium,
       color: theme.color.text.system.subtle,

src/theme/types.ts

@@ -289,6 +289,7 @@ export type TextName =
   | 'inputLabel'
   | 'scientificName'
   | 'body'
+  | 'bodyBlack'
   | 'light'
   | 'lead'
   | 'link'
@@ -298,6 +299,30 @@ export type TextName =
   | 'title'
   | 'percentage'
   | 'thumbnail'
+  | 'subLabel'
+  | 'speciesLocalName'
+  | 'speciesScientificName'
   | keyof TextNameOverrides
 
-export type Text = Record<TextName, TextStyle>
+export interface Text {
+  iconLabel: TextStyle
+  tabIconLabel: TextStyle
+  inputLabel: TextStyle
+  /** @deprecated Use theme.text.speciesScientificName */
+  scientificName: TextStyle
+  body: TextStyle
+  bodyBlack: TextStyle
+  light: TextStyle
+  lead: TextStyle
+  link: TextStyle
+  linkBold: TextStyle
+  input: TextStyle
+  subtitle: TextStyle
+  title: TextStyle
+  percentage: TextStyle
+  thumbnail: TextStyle
+  subLabel: TextStyle
+  speciesLocalName: TextStyle
+  speciesScientificName: TextStyle
+  [name: string]: TextStyle
+}