@hero-design/rn 8.98.0 → 8.99.0

package/src/components/ContentNavigator/__tests__/__snapshots__/index.spec.tsx.snap

@@ -207,7 +207,7 @@ exports[`rendering renders correctly when icon buttons are disabled 1`] = `
       }
       accessible={true}
       collapsable={false}
-      focusable={true}
+      focusable={false}
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -280,7 +280,7 @@ exports[`rendering renders correctly when icon buttons are disabled 1`] = `
       }
       accessible={true}
       collapsable={false}
-      focusable={true}
+      focusable={false}
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -27,7 +27,6 @@ exports[`ActionGroup has active false 1`] = `
   >
     <View
       collapsable={false}
-      style={{}}
     >
       <View
         accessibilityState={
@@ -220,7 +219,6 @@ exports[`ActionGroup has active true 1`] = `
   >
     <View
       collapsable={false}
-      style={{}}
     >
       <View
         accessibilityState={
@@ -334,7 +332,7 @@ exports[`ActionGroup has active true 1`] = `
                         "textAlign": "center",
                         "textAlignVertical": "center",
                       },
-                      {},
+                      undefined,
                     ],
                   ]
                 }
@@ -1155,7 +1153,7 @@ exports[`ActionGroup has active true 1`] = `
                           "textAlign": "center",
                           "textAlignVertical": "center",
                         },
-                        {},
+                        undefined,
                       ],
                     ]
                   }

package/src/components/FAB/__tests__/__snapshots__/AnimatedFABIcon.spec.tsx.snap

@@ -35,7 +35,7 @@ exports[`AnimatedFABIcon renders correctly when isActive is false 1`] = `
               "textAlign": "center",
               "textAlignVertical": "center",
             },
-            {},
+            undefined,
           ],
         ]
       }
@@ -101,7 +101,7 @@ exports[`AnimatedFABIcon renders correctly when isActive is true 1`] = `
               "textAlign": "center",
               "textAlignVertical": "center",
             },
-            {},
+            undefined,
           ],
         ]
       }

package/src/components/FAB/__tests__/__snapshots__/index.spec.tsx.snap

@@ -256,7 +256,7 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
                     "textAlign": "center",
                     "textAlignVertical": "center",
                   },
-                  {},
+                  undefined,
                 ],
               ]
             }

package/src/components/Radio/Radio.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement, ReactNode } from 'react';
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-
+import type { IconName } from '../Icon';
 import { Circle, InnerCircle, StyledRadio } from './StyledRadio';
 
 export interface RadioProps {
@@ -37,6 +37,10 @@ export interface RadioProps {
    * Children to be rendered inside the component.
    */
   children?: ReactNode;
+  /**
+   * Prefix to be rendered before the radio text.
+   */
+  prefix?: IconName | ReactElement;
 }
 
 const RadioCircle = ({
@@ -57,12 +61,14 @@ const Radio = ({
   testID,
   inactiveIntent = 'light',
   children,
+  prefix,
 }: RadioProps): ReactElement => (
   <StyledRadio
     onPress={onPress}
     selected={checked}
     title={text}
     subtitle={subText}
+    prefix={prefix}
     suffix={<RadioCircle checked={checked} text={text} />}
     style={style}
     testID={testID}

package/src/components/Radio/RadioGroup.tsx

@@ -74,6 +74,7 @@ const RadioGroup = <T,>({
           checked={option.value === value}
           onPress={() => onPress(option.value)}
           inactiveIntent={inactiveIntent}
+          prefix={option.prefix}
         >
           {option.children}
         </Radio>

package/src/components/Radio/__tests__/Radio.spec.tsx

@@ -2,6 +2,7 @@ import { fireEvent } from '@testing-library/react-native';
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Radio from '../Radio';
+import { Typography } from '../../..';
 
 describe('rendering', () => {
   it.each`
@@ -56,6 +57,20 @@ describe('rendering', () => {
     expect(getByText('Option A')).toBeDefined();
     expect(getByText('Option label')).toBeDefined();
   });
+
+  it('allows rendering of prefix', () => {
+    const { getByText, getByTestId } = renderWithTheme(
+      <Radio
+        text="Option A"
+        prefix={<Typography.Body testID="prefix">🏢</Typography.Body>}
+        onPress={jest.fn()}
+        checked
+      />
+    );
+
+    expect(getByText('Option A')).toBeVisible();
+    expect(getByTestId('prefix')).toBeVisible();
+  });
 });
 
 describe('behavior', () => {

package/src/components/Radio/__tests__/RadioGroup.spec.tsx

@@ -2,6 +2,7 @@ import { fireEvent } from '@testing-library/react-native';
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import RadioGroup from '../RadioGroup';
+import { Typography } from '../../..';
 
 const options = [
   { text: 'Everything', value: 'everything' },
@@ -14,6 +15,19 @@ const optionsWithSubtext = [
   { text: 'Daily', subText: 'InstaPay Daily', value: 'daily' },
 ];
 
+const optionsWithPrefix = [
+  {
+    text: 'In the office',
+    prefix: <Typography.Body testID="prefix-office">🏢</Typography.Body>,
+    value: 'in_the_office',
+  },
+  {
+    text: 'At home',
+    prefix: <Typography.Body testID="prefix-home">🏠</Typography.Body>,
+    value: 'at_home',
+  },
+];
+
 describe('rendering', () => {
   it.each`
     inactiveIntent
@@ -54,6 +68,19 @@ describe('rendering', () => {
     expect(getByText('Daily')).toBeDefined();
     expect(getByText('InstaPay Daily')).toBeDefined();
   });
+
+  it('renders correctly with prefix', () => {
+    const { getByTestId } = renderWithTheme(
+      <RadioGroup
+        options={optionsWithPrefix}
+        value="in_the_office"
+        onPress={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('prefix-office')).toBeVisible();
+    expect(getByTestId('prefix-home')).toBeVisible();
+  });
 });
 
 describe('behavior', () => {

package/src/components/Radio/types.ts

@@ -1,4 +1,5 @@
-import { ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
+import { IconName } from '../Icon';
 
 export type OptionType<T> = {
   value: T;
@@ -6,4 +7,5 @@ export type OptionType<T> = {
   subText?: string;
   key?: string;
   children?: ReactNode;
+  prefix?: IconName | ReactElement;
 };