@hero-design/rn 8.57.0 → 8.58.0

package/src/components/Carousel/__tests__/index.spec.tsx

@@ -7,8 +7,10 @@ import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Button from '../../Button/Button';
 import HeroDesignProvider from '../../HeroDesignProvider';
 import Image from '../../Image';
+import { getCardCarouselValidIndex } from '../CardCarousel';
+import { CarouselData } from '../types';
 
-const carouselData = [
+const carouselData: CarouselData[] = [
   {
     image: 1, // Test the case when we import .png files as React Native component, it's convert to ImageRequireSource type (which is a number).
     heading: 'Welcome to the new Employment Hero app',
@@ -42,6 +44,10 @@ const carouselData = [
     heading: 'Test slide 4',
     background: theme.colors.decorativePrimarySurface,
   },
+  {
+    heading: 'Test slide 5',
+    background: theme.colors.decorativePrimarySurface,
+  },
 ];
 
 describe('Carousel', () => {
@@ -179,4 +185,31 @@ describe('Carousel', () => {
 
     expect(queryByTestId('page-control-indicator1')).toBeFalsy();
   });
+  it('should render correctly when image is undefined', () => {
+    const onPress = jest.fn();
+    const { toJSON } = renderWithTheme(
+      <Carousel
+        testID="carousel"
+        items={[carouselData[4]]}
+        renderActions={(_) => {
+          return <Button text="Skip" onPress={onPress} />;
+        }}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+// write test for getCardCarouselValidIndex
+describe('getCardCarouselValidIndex', () => {
+  it('should return 0 when index is less than 0', () => {
+    expect(getCardCarouselValidIndex(-1, 3)).toBe(0);
+  });
+  it('should return 2 when index is equal to 2', () => {
+    expect(getCardCarouselValidIndex(2, 3)).toBe(2);
+  });
+  it('should return 2 when index is greater than 2', () => {
+    expect(getCardCarouselValidIndex(3, 3)).toBe(2);
+  });
 });

package/src/components/Carousel/types.ts

@@ -2,13 +2,13 @@ import { ReactNode } from 'react';
 import { ImageSourcePropType, ImageResizeMode } from 'react-native';
 
 export type CarouselImageProps = ImageSourcePropType & {
-  height?: number;
-  width?: number;
+  height?: number | `${number}%`;
+  width?: number | `${number}%`;
   resizeMode?: ImageResizeMode;
 };
 
 export type CarouselData = {
-  image: CarouselImageProps | string;
+  image?: CarouselImageProps | string;
   content?: ReactNode;
   heading: string;
   body?: string;

package/src/components/DatePicker/__tests__/DatePickerCalendar.spec.tsx

@@ -63,38 +63,41 @@ describe('DatePickerCalendar', () => {
     platform
     ${'ios'}
     ${'android'}
-  `('renders month year picker when pressing on title', ({ platform }) => {
-    jest.mock('react-native/Libraries/Utilities/Platform', () => ({
-      OS: platform,
-      select: () => null,
-    }));
+  `(
+    'renders month year picker when pressing on title',
+    ({ platform: mockedPlatform }) => {
+      jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+        OS: mockedPlatform,
+        select: () => null,
+      }));
 
-    const { queryByText, getByText, getByTestId } = renderWithTheme(
-      <DatePickerCalendar
-        value={new Date('December 21, 1995')}
-        label="Start date"
-        confirmLabel="Confirm"
-        helpText="This is help text"
-        onChange={jest.fn()}
-      />
-    );
+      const { queryByText, getByText, getByTestId } = renderWithTheme(
+        <DatePickerCalendar
+          value={new Date('December 21, 1995')}
+          label="Start date"
+          confirmLabel="Confirm"
+          helpText="This is help text"
+          onChange={jest.fn()}
+        />
+      );
 
-    fireEvent.press(getByText('Start date'));
-    fireEvent.press(getByText('December 1995'));
+      fireEvent.press(getByText('Start date'));
+      fireEvent.press(getByText('December 1995'));
 
-    if (platform === 'ios') {
-      expect(queryByText('IOS picker')).toBeDefined();
-    } else {
-      expect(queryByText('Android picker')).toBeDefined();
-    }
+      if (mockedPlatform === 'ios') {
+        expect(queryByText('IOS picker')).toBeDefined();
+      } else {
+        expect(queryByText('Android picker')).toBeDefined();
+      }
 
-    // Selecting month
-    fireEvent(
-      getByTestId('calendar'),
-      'onMonthChange',
-      new Date('January 17, 1993')
-    );
+      // Selecting month
+      fireEvent(
+        getByTestId('calendar'),
+        'onMonthChange',
+        new Date('January 17, 1993')
+      );
 
-    expect(queryByText('January 1993')).toBeDefined();
-  });
+      expect(queryByText('January 1993')).toBeDefined();
+    }
+  );
 });

package/src/components/Tabs/ScrollableTabsHeader/ScrollableTabsHeader.tsx

@@ -156,21 +156,19 @@ const ScrollableTabHeader = ({
             100
           );
         }}
-        style={
-          // Border styles specified in contentContainerStyle don't work
-          // so they need to be placed here instead on Android.
-          Platform.OS === 'android'
-            ? {
-                borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
-                borderBottomWidth: theme.__hd__.tabs.sizes.indicator,
-              }
-            : undefined
-        }
-        contentContainerStyle={{
-          paddingHorizontal: theme.__hd__.tabs.space.flatListHorizontalPadding,
+        style={{
           borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
           borderBottomWidth: theme.__hd__.tabs.sizes.indicator,
         }}
+        contentContainerStyle={{
+          paddingHorizontal: theme.__hd__.tabs.space.flatListHorizontalPadding,
+
+          // Specify it here again or the indicator won't show
+          ...(Platform.OS === 'android' && {
+            borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
+            borderBottomWidth: theme.__hd__.tabs.sizes.indicator,
+          }),
+        }}
         renderItem={({ item: tab, index }) => {
           const {
             key,

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap

@@ -145,8 +145,6 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
         <RCTScrollView
           contentContainerStyle={
             {
-              "borderBottomColor": "#e8e9ea",
-              "borderBottomWidth": 2,
               "paddingHorizontal": 8,
             }
           }
@@ -209,6 +207,12 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
           scrollEventThrottle={50}
           showsHorizontalScrollIndicator={false}
           stickyHeaderIndices={[]}
+          style={
+            {
+              "borderBottomColor": "#e8e9ea",
+              "borderBottomWidth": 2,
+            }
+          }
           viewabilityConfigCallbackPairs={[]}
         >
           <View>
@@ -1061,8 +1065,6 @@ exports[`Tabs.Scroll renders correctly 1`] = `
         <RCTScrollView
           contentContainerStyle={
             {
-              "borderBottomColor": "#e8e9ea",
-              "borderBottomWidth": 2,
               "paddingHorizontal": 8,
             }
           }
@@ -1125,6 +1127,12 @@ exports[`Tabs.Scroll renders correctly 1`] = `
           scrollEventThrottle={50}
           showsHorizontalScrollIndicator={false}
           stickyHeaderIndices={[]}
+          style={
+            {
+              "borderBottomColor": "#e8e9ea",
+              "borderBottomWidth": 2,
+            }
+          }
           viewabilityConfigCallbackPairs={[]}
         >
           <View>
@@ -1977,8 +1985,6 @@ exports[`useIsFocused renders correctly 1`] = `
         <RCTScrollView
           contentContainerStyle={
             {
-              "borderBottomColor": "#e8e9ea",
-              "borderBottomWidth": 2,
               "paddingHorizontal": 8,
             }
           }
@@ -2041,6 +2047,12 @@ exports[`useIsFocused renders correctly 1`] = `
           scrollEventThrottle={50}
           showsHorizontalScrollIndicator={false}
           stickyHeaderIndices={[]}
+          style={
+            {
+              "borderBottomColor": "#e8e9ea",
+              "borderBottomWidth": 2,
+            }
+          }
           viewabilityConfigCallbackPairs={[]}
         >
           <View>

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabsHeader.spec.tsx.snap

@@ -40,8 +40,6 @@ exports[`ScrollableTabsHeader highlighted variant renders correctly 1`] = `
       <RCTScrollView
         contentContainerStyle={
           {
-            "borderBottomColor": "#e8e9ea",
-            "borderBottomWidth": 2,
             "paddingHorizontal": 8,
           }
         }
@@ -104,6 +102,12 @@ exports[`ScrollableTabsHeader highlighted variant renders correctly 1`] = `
         scrollEventThrottle={50}
         showsHorizontalScrollIndicator={false}
         stickyHeaderIndices={[]}
+        style={
+          {
+            "borderBottomColor": "#e8e9ea",
+            "borderBottomWidth": 2,
+          }
+        }
         viewabilityConfigCallbackPairs={[]}
       >
         <View>
@@ -700,8 +704,6 @@ exports[`ScrollableTabsHeader underlined variant renders correctly 1`] = `
       <RCTScrollView
         contentContainerStyle={
           {
-            "borderBottomColor": "#e8e9ea",
-            "borderBottomWidth": 2,
             "paddingHorizontal": 8,
           }
         }
@@ -764,6 +766,12 @@ exports[`ScrollableTabsHeader underlined variant renders correctly 1`] = `
         scrollEventThrottle={50}
         showsHorizontalScrollIndicator={false}
         stickyHeaderIndices={[]}
+        style={
+          {
+            "borderBottomColor": "#e8e9ea",
+            "borderBottomWidth": 2,
+          }
+        }
         viewabilityConfigCallbackPairs={[]}
       >
         <View>

package/src/components/TextInput/__tests__/index.spec.tsx

@@ -4,7 +4,15 @@ import { TextInput as RNTextInput } from 'react-native';
 import { theme } from '../../..';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Icon from '../../Icon';
-import TextInput, { getState, TextInputHandles } from '../index';
+import TextInput, {
+  getState,
+  renderErrorOrHelpText,
+  renderInput,
+  renderMaxLengthMessage,
+  renderPrefix,
+  renderSuffix,
+  TextInputHandles,
+} from '../index';
 
 describe('getState', () => {
   it.each`
@@ -496,3 +504,142 @@ describe('TextInput', () => {
     });
   });
 });
+
+describe('renderErrorOrHelpText', () => {
+  it('renders correctly with error', () => {
+    const { queryAllByText } = renderWithTheme(
+      <>
+        {renderErrorOrHelpText({
+          error: 'This is error',
+          helpText: 'This is help text',
+        })}
+      </>
+    );
+
+    expect(queryAllByText('This is error')).toHaveLength(1);
+    expect(queryAllByText('This is help text')).toHaveLength(0);
+  });
+
+  it('renders correctly with help text', () => {
+    const { queryAllByText } = renderWithTheme(
+      <>
+        {renderErrorOrHelpText({
+          error: '',
+          helpText: 'This is help text',
+        })}
+      </>
+    );
+
+    expect(queryAllByText('This is help text')).toHaveLength(1);
+  });
+});
+
+describe('renderInput', () => {
+  it('renders correctly with renderInputValue', () => {
+    const wrapper = renderWithTheme(
+      <>
+        {renderInput({
+          variant: 'textarea',
+          nativeInputProps: {},
+          renderInputValue: (props) => {
+            return (
+              <RNTextInput
+                {...props}
+                value="customised text"
+                testID="custom-text-input"
+              />
+            );
+          },
+        })}
+      </>
+    );
+
+    expect(wrapper.queryAllByTestId('custom-text-input')).toHaveLength(1);
+    expect(wrapper.queryAllByDisplayValue('customised text')).toHaveLength(1);
+  });
+
+  it('renders correctly without renderInputValue', () => {
+    const wrapper = renderWithTheme(
+      <>
+        {renderInput({
+          variant: 'textarea',
+          nativeInputProps: {
+            testID: 'text-input',
+            value: 'text input value',
+          },
+        })}
+      </>
+    );
+
+    expect(wrapper.queryAllByTestId('text-input')).toHaveLength(1);
+    expect(wrapper.queryAllByDisplayValue('text input value')).toHaveLength(1);
+  });
+});
+describe('renderSuffix', () => {
+  it('renders loading icon with loading', () => {
+    const wrapper = renderWithTheme(
+      <>
+        {renderSuffix({
+          loading: true,
+          suffix: 'dollar-sign',
+          state: 'default',
+        })}
+      </>
+    );
+
+    expect(wrapper.getByTestId('input-suffix')).toHaveProp('name', 'loading');
+  });
+
+  it('renders suffix icon', () => {
+    const wrapper = renderWithTheme(
+      <>
+        {renderSuffix({
+          loading: false,
+          suffix: 'dollar-sign',
+          state: 'default',
+        })}
+      </>
+    );
+
+    // verify element has prop name = icon
+    expect(wrapper.getByTestId('input-suffix')).toHaveProp(
+      'name',
+      'dollar-sign'
+    );
+  });
+});
+
+describe('renderPrefix', () => {
+  it('renders prefix icon', () => {
+    const wrapper = renderWithTheme(
+      <>
+        {renderPrefix({
+          prefix: 'dollar-sign',
+          state: 'default',
+        })}
+      </>
+    );
+
+    expect(wrapper.getByTestId('input-prefix')).toHaveProp(
+      'name',
+      'dollar-sign'
+    );
+  });
+});
+
+describe('renderMaxLengthMessage', () => {
+  it('renders correctly with maxLength', () => {
+    const { queryAllByText } = renderWithTheme(
+      <>
+        {renderMaxLengthMessage({
+          maxLength: 10,
+          state: 'default',
+          currentLength: 5,
+          hideCharacterCount: false,
+        })}
+      </>
+    );
+
+    expect(queryAllByText('5/10')).toHaveLength(1);
+  });
+});

package/src/components/TextInput/index.tsx

@@ -46,6 +46,8 @@ export type TextInputHandles = Pick<
   'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'
 >;
 
+export type TextInputVariant = 'text' | 'textarea';
+
 export interface TextInputProps extends NativeTextInputProps {
   /**
    * Field label.
@@ -123,7 +125,7 @@ export interface TextInputProps extends NativeTextInputProps {
   /**
    * Component variant.
    */
-  variant?: 'text' | 'textarea';
+  variant?: TextInputVariant;
 }
 
 export const getState = ({
@@ -161,6 +163,120 @@ const EMPTY_PLACEHOLDER_VALUE = ' ';
 
 export const LABEL_ANIMATION_DURATION = 150;
 
+export const renderErrorOrHelpText = ({
+  error,
+  helpText,
+}: {
+  error?: string;
+  helpText?: string;
+}) => {
+  return error ? (
+    <StyledErrorContainer>
+      <Icon
+        testID="input-error-icon"
+        icon="circle-info"
+        size="xsmall"
+        intent="danger"
+      />
+
+      <StyledError testID="input-error-message">{error}</StyledError>
+    </StyledErrorContainer>
+  ) : (
+    !!helpText && <StyledHelperText>{helpText}</StyledHelperText>
+  );
+};
+
+export const renderInput = ({
+  variant,
+  nativeInputProps,
+  renderInputValue,
+  ref,
+}: {
+  variant: TextInputVariant;
+  nativeInputProps: NativeTextInputProps;
+  multiline?: boolean;
+  renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+  ref?: React.Ref<RNTextInput>;
+}) => {
+  return renderInputValue ? (
+    renderInputValue(nativeInputProps)
+  ) : (
+    <StyledTextInput
+      {...nativeInputProps}
+      themeVariant={variant}
+      multiline={variant === 'textarea' || nativeInputProps.multiline}
+      ref={ref}
+    />
+  );
+};
+
+export const renderSuffix = ({
+  state,
+  loading,
+  suffix,
+}: {
+  state: State;
+  loading: boolean;
+  suffix?: IconName | React.ReactElement;
+}) => {
+  const actualSuffix = loading ? 'loading' : suffix;
+  return typeof actualSuffix === 'string' ? (
+    <Icon
+      intent={state === 'disabled' ? 'disabled-text' : 'text'}
+      testID="input-suffix"
+      icon={actualSuffix}
+      spin={actualSuffix === 'loading'}
+      size="medium"
+    />
+  ) : (
+    suffix
+  );
+};
+
+export const renderPrefix = ({
+  state,
+  prefix,
+}: {
+  state: State;
+  prefix?: IconName | React.ReactElement;
+}) => {
+  return typeof prefix === 'string' ? (
+    <Icon
+      intent={state === 'disabled' ? 'disabled-text' : 'text'}
+      testID="input-prefix"
+      icon={prefix}
+      size="xsmall"
+    />
+  ) : (
+    prefix
+  );
+};
+
+export const renderMaxLengthMessage = ({
+  maxLength,
+  state,
+  currentLength,
+  hideCharacterCount,
+}: {
+  state: State;
+  currentLength: number;
+  maxLength?: number;
+  hideCharacterCount: boolean;
+}) => {
+  const shouldShowMaxLength = maxLength !== undefined && !hideCharacterCount;
+  return (
+    shouldShowMaxLength && (
+      <StyledMaxLengthMessage themeState={state}>
+        {currentLength}/{maxLength}
+      </StyledMaxLengthMessage>
+    )
+  );
+};
+
+export const getDisplayText = (value?: string, defaultValue?: string) => {
+  return (value !== undefined ? value : defaultValue) ?? '';
+};
+
 const TextInput = forwardRef<TextInputHandles, TextInputProps>(
   (
     {
@@ -188,9 +304,8 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
     }: TextInputProps,
     ref?: React.Ref<TextInputHandles>
   ) => {
-    const displayText = (value !== undefined ? value : defaultValue) ?? '';
+    const displayText = getDisplayText(value, defaultValue);
     const isEmptyValue = displayText.length === 0;
-    const actualSuffix = loading ? 'loading' : suffix;
 
     const [inputSize, setInputSize] = React.useState<{
       height: number;
@@ -210,8 +325,6 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       isEmptyValue,
     });
 
-    const shouldShowMaxLength = maxLength !== undefined && !hideCharacterCount;
-
     const theme = useTheme();
 
     const focusAnimation = useRef(new Animated.Value(0)).current;
@@ -346,16 +459,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
           />
 
           <View onLayout={onPrefixLayout}>
-            {typeof prefix === 'string' ? (
-              <Icon
-                intent={state === 'disabled' ? 'disabled-text' : 'text'}
-                testID="input-prefix"
-                icon={prefix}
-                size="xsmall"
-              />
-            ) : (
-              prefix
-            )}
+            {renderPrefix({ state, prefix })}
           </View>
           <StyledLabelContainerInsideTextInput
             themeVariant={variant}
@@ -424,52 +528,26 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
           </StyledLabelContainerInsideTextInput>
 
           <StyledTextInputAndLabelContainer>
-            {renderInputValue ? (
-              renderInputValue(nativeInputProps)
-            ) : (
-              <StyledTextInput
-                {...nativeInputProps}
-                themeVariant={variant}
-                multiline={variant === 'textarea' || nativeProps.multiline}
-                ref={(reference) => {
-                  innerTextInput.current = reference;
-                }}
-              />
-            )}
+            {renderInput({
+              variant,
+              nativeInputProps,
+              renderInputValue,
+              ref: (rnTextInputRef) => {
+                innerTextInput.current = rnTextInputRef;
+              },
+            })}
           </StyledTextInputAndLabelContainer>
-          {typeof actualSuffix === 'string' ? (
-            <Icon
-              intent={state === 'disabled' ? 'disabled-text' : 'text'}
-              testID="input-suffix"
-              icon={actualSuffix}
-              spin={actualSuffix === 'loading'}
-              size="medium"
-            />
-          ) : (
-            suffix
-          )}
+          {renderSuffix({ state, loading, suffix })}
         </StyledTextInputContainer>
         <StyledErrorAndHelpTextContainer>
           <StyledErrorAndMaxLengthContainer>
-            {error ? (
-              <StyledErrorContainer>
-                <Icon
-                  testID="input-error-icon"
-                  icon="circle-info"
-                  size="xsmall"
-                  intent="danger"
-                />
-
-                <StyledError testID="input-error-message">{error}</StyledError>
-              </StyledErrorContainer>
-            ) : (
-              !!helpText && <StyledHelperText>{helpText}</StyledHelperText>
-            )}
-            {shouldShowMaxLength && (
-              <StyledMaxLengthMessage themeState={state}>
-                {displayText.length}/{maxLength}
-              </StyledMaxLengthMessage>
-            )}
+            {renderErrorOrHelpText({ error, helpText })}
+            {renderMaxLengthMessage({
+              state,
+              currentLength: displayText.length,
+              maxLength,
+              hideCharacterCount,
+            })}
           </StyledErrorAndMaxLengthContainer>
         </StyledErrorAndHelpTextContainer>
       </StyledContainer>