Use IconProps for passing icon info to IconButton and Tooltip (#12)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@observation.org/react-native-components",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "main": "src/index.ts",
   "repository": "[email protected]:observation/react-native-components.git",
   "author": "Observation.org",

src/components/BackButton.tsx

@@ -13,9 +13,7 @@ const BackButton = ({ navigation }: Props) => (
   <IconButton
     containerStyle={{ padding: theme.margin.common }}
     onPress={() => navigation.goBack()}
-    iconName="chevron-left"
-    size={theme.icon.size.extraExtraLarge}
-    color={theme.color.primary}
+    icon={{ name: 'chevron-left', size: theme.icon.size.extraExtraLarge, color: theme.color.primary }}
   />
 )
 

src/components/IconButton.tsx

@@ -1,33 +1,19 @@
 import React from 'react'
 import { TouchableOpacity, ViewStyle, StyleProp } from 'react-native'
 
-import { Icon } from './Icon'
-import { IconName } from '../lib/Icons'
+import { Icon, IconProps } from './Icon'
 import theme from '../styles/theme'
 
 type Props = {
   containerStyle?: StyleProp<ViewStyle>
   disabled?: boolean
   onPress?: () => void
-  iconName: IconName
-  iconStyle?: 'light' | 'solid'
-  size?: number
-  color?: string
+  icon: IconProps
   accessibilityLabel?: string
   testID?: string
 }
 
-const IconButton = ({
-  containerStyle,
-  disabled,
-  onPress,
-  iconName,
-  iconStyle,
-  size = theme.icon.size.large,
-  color,
-  accessibilityLabel,
-  testID = 'pressable',
-}: Props) => (
+const IconButton = ({ containerStyle, disabled, onPress, icon, accessibilityLabel, testID = 'pressable' }: Props) => (
   <TouchableOpacity
     testID={testID}
     accessibilityLabel={accessibilityLabel}
@@ -36,7 +22,7 @@ const IconButton = ({
     onPress={disabled ? undefined : onPress}
     activeOpacity={0.5}
   >
-    <Icon style={iconStyle} name={iconName} color={color} size={size} />
+    <Icon size={theme.icon.size.large} {...icon} />
   </TouchableOpacity>
 )
 

src/components/Tooltip.tsx

@@ -1,16 +1,15 @@
 import React from 'react'
 import { StyleSheet, View, Text, TouchableOpacity, ViewStyle, StyleProp } from 'react-native'
 
-import { Icon } from './Icon'
+import { Icon, IconProps } from './Icon'
 import LargeButton, { LargeButtonProps } from '../components/LargeButton'
-import { IconName } from '../lib/Icons'
 import textStyle from '../styles/text'
 import theme from '../styles/theme'
 
 type TooltipProps = {
   title: string
   text: string
-  iconName?: IconName
+  icon?: IconProps
   closable?: boolean
   onClose?: () => void
   buttons?: LargeButtonProps[]
@@ -20,7 +19,7 @@ type TooltipProps = {
 }
 
 const Tooltip = ({
-  iconName,
+  icon,
   title,
   text,
   closable = true,
@@ -34,9 +33,9 @@ const Tooltip = ({
     <View style={styles.tooltipContainer}>
       <View style={styles.tooltip}>
         <View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
-          {iconName && (
+          {icon && (
             <View style={{ ...styles.iconContainer, marginRight: theme.margin.common }}>
-              <Icon name={iconName} size={theme.icon.size.extraLarge} />
+              <Icon size={theme.icon.size.extraLarge} {...icon} />
             </View>
           )}
           <View style={{ flex: 1 }}>

src/components/__tests__/IconButton.test.tsx

@@ -2,14 +2,14 @@ import React from 'react'
 
 import { render, fireEvent } from '@testing-library/react-native'
 
+import { IconProps } from '../Icon'
 import IconButton from '../IconButton'
 
 describe('IconButton', () => {
+  const icon: IconProps = { name: 'chevron-left', size: 20, color: 'black' }
   test('Rendering', () => {
     // GIVEN
-    const { toJSON } = render(
-      <IconButton containerStyle={{ flex: 1 }} disabled={false} iconName="chevron-left" size={20} color="black" />,
-    )
+    const { toJSON } = render(<IconButton containerStyle={{ flex: 1 }} disabled={false} icon={icon} />)
 
     // THEN
     expect(toJSON()).toMatchSnapshot()
@@ -18,9 +18,7 @@ describe('IconButton', () => {
   test('Handle press when enabled', () => {
     // GIVEN
     const mockOnPress = jest.fn()
-    const { getByTestId } = render(
-      <IconButton disabled={false} onPress={mockOnPress} iconName="chevron-left" size={20} color="black" />,
-    )
+    const { getByTestId } = render(<IconButton disabled={false} onPress={mockOnPress} icon={icon} />)
 
     // WHEN
     const pressable = getByTestId('pressable')
@@ -33,9 +31,7 @@ describe('IconButton', () => {
   test('Do not handle press when disabled', () => {
     // GIVEN
     const mockOnPress = jest.fn()
-    const { getByTestId } = render(
-      <IconButton disabled onPress={mockOnPress} iconName="chevron-left" size={20} color="black" />,
-    )
+    const { getByTestId } = render(<IconButton disabled onPress={mockOnPress} icon={icon} />)
 
     // WHEN
     const pressable = getByTestId('pressable')

src/components/__tests__/ToolTip.test.tsx

@@ -10,7 +10,7 @@ describe('Tooltip', () => {
   describe('Rendering', () => {
     test('With icon', () => {
       // GIVEN
-      const { toJSON } = render(<Tooltip iconName="info-circle" title="Title" text="Text" />)
+      const { toJSON } = render(<Tooltip icon={{ name: 'info-circle' }} title="Title" text="Text" />)
 
       // THEN
       expect(toJSON()).toMatchSnapshot()
@@ -45,7 +45,7 @@ describe('Tooltip', () => {
     test('Click on close', () => {
       // GIVEN
       const { getByTestId } = render(
-        <Tooltip title="Title" text="Text" onClose={onCloseTooltip} iconName="info-circle" />,
+        <Tooltip title="Title" text="Text" onClose={onCloseTooltip} icon={{ name: 'info-circle' }} />,
       )
       // WHEN
       fireEvent.press(getByTestId('close'))
@@ -58,7 +58,7 @@ describe('Tooltip', () => {
       // GIVEN
       const onPress = jest.fn()
       const { getByText } = render(
-        <Tooltip title="Title" text="Text" buttons={[{ onPress, title: 'Action!' }]} iconName="info-circle" />,
+        <Tooltip title="Title" text="Text" buttons={[{ onPress, title: 'Action!' }]} icon={{ name: 'info-circle' }} />,
       )
 
       // WHEN