@hero-design/rn 8.22.0 → 8.24.0-alpha.0

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

@@ -4,9 +4,9 @@ import { TextInput as RNTextInput } from 'react-native';
 import { theme } from '../../..';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Icon from '../../Icon';
-import TextInput, { getVariant, TextInputHandles } from '../index';
+import TextInput, { getState, TextInputHandles } from '../index';
 
-describe('getVariant', () => {
+describe('getState', () => {
   it.each`
     disabled | error                       | editable | loading  | isEmptyValue | expected
     ${false} | ${undefined}                | ${true}  | ${false} | ${true}      | ${'default'}
@@ -15,10 +15,10 @@ describe('getVariant', () => {
     ${false} | ${'This field is required'} | ${false} | ${false} | ${true}      | ${'error'}
     ${true}  | ${'This field is required'} | ${false} | ${false} | ${true}      | ${'disabled'}
   `(
-    'should return the correct variant when disabled $disabled, errorMessage $errorMessage, editable $false, isEmptyValue $isEmptyValue',
+    'should return the correct state when disabled $disabled, errorMessage $errorMessage, editable $false, isEmptyValue $isEmptyValue',
     ({ disabled, error, editable, loading, isEmptyValue, expected }) => {
       expect(
-        getVariant({
+        getState({
           disabled,
           error,
           editable,
@@ -250,6 +250,35 @@ describe('TextInput', () => {
 
       expect(getByTestId('text-input')).not.toHaveProp('multiline', 'true');
     });
+
+    it('renders correctly with hide character count', () => {
+      const {
+        toJSON,
+        queryAllByTestId,
+        queryAllByText,
+        queryAllByDisplayValue,
+        getByTestId,
+      } = renderWithTheme(
+        <TextInput
+          label="Shout out"
+          value="shout out Tung Van"
+          required
+          maxLength={255}
+          multiline
+          error="must not exceed character limit"
+          hideCharacterCount
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByText('Shout out')).toHaveLength(1);
+      expect(queryAllByDisplayValue('shout out Tung Van')).toHaveLength(1);
+      expect(queryAllByText('18/255')).toHaveLength(0);
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
+
+      expect(getByTestId('text-input')).not.toHaveProp('multiline', 'true');
+    });
   });
 
   describe('disabled', () => {
@@ -454,4 +483,16 @@ describe('TextInput', () => {
       expect(blurSpy).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('variants', () => {
+    it('renders textarea variant correctly', () => {
+      const { toJSON, queryByText, queryByDisplayValue } = renderWithTheme(
+        <TextInput label="Amount (AUD)" value="2000" variant="textarea" />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryByText('Amount (AUD)')).toBeTruthy();
+      expect(queryByDisplayValue('2000')).toBeTruthy();
+    });
+  });
 });

package/src/components/TextInput/index.tsx

@@ -27,7 +27,7 @@ import {
 } from './StyledTextInput';
 import Icon from '../Icon';
 import { useTheme } from '../../theme';
-import type { Variant } from './StyledTextInput';
+import type { State } from './StyledTextInput';
 import type { IconName } from '../Icon';
 import { omit, pick } from '../../utils/helpers';
 
@@ -94,6 +94,10 @@ export interface TextInputProps extends NativeTextInputProps {
    * If the max length is set, the input will display the current length and the max length.
    * */
   maxLength?: number;
+  /**
+   * Whether to hide the character count.
+   * */
+  hideCharacterCount?: boolean;
   /**
    * The helper text to display.
    */
@@ -106,9 +110,13 @@ export interface TextInputProps extends NativeTextInputProps {
    * Component ref.
    */
   ref?: React.Ref<TextInputHandles>;
+  /**
+   * Component variant.
+   */
+  variant?: 'text' | 'textarea';
 }
 
-export const getVariant = ({
+export const getState = ({
   disabled,
   error,
   editable,
@@ -121,7 +129,7 @@ export const getVariant = ({
   loading: boolean;
   isFocused?: boolean;
   isEmptyValue?: boolean;
-}): Variant => {
+}): State => {
   if (disabled) {
     return 'disabled';
   }
@@ -157,11 +165,13 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       disabled = false,
       loading = false,
       maxLength,
+      hideCharacterCount = false,
       helpText,
       value,
       defaultValue,
       renderInputValue,
       allowFontScaling = false,
+      variant = 'text',
       ...nativeProps
     }: TextInputProps,
     ref?: React.Ref<TextInputHandles>
@@ -172,7 +182,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
 
     const [isFocused, setIsFocused] = React.useState(false);
 
-    const variant = getVariant({
+    const state = getState({
       disabled,
       error,
       editable,
@@ -181,7 +191,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       isEmptyValue,
     });
 
-    const shouldShowMaxLength = maxLength !== undefined;
+    const shouldShowMaxLength = maxLength !== undefined && !hideCharacterCount;
 
     const theme = useTheme();
 
@@ -247,7 +257,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       ]),
       testID: 'text-input',
       accessibilityState: {
-        disabled: variant === 'disabled' || variant === 'readonly',
+        disabled: state === 'disabled' || state === 'readonly',
       },
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
@@ -279,14 +289,14 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       <StyledContainer
         style={styleWithoutBackgroundColor}
         pointerEvents={
-          variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto'
+          state === 'disabled' || state === 'readonly' ? 'none' : 'auto'
         }
         testID={testID}
       >
         <StyledTextInputContainer>
           <StyledBorderBackDrop
             themeFocused={isFocused}
-            themeVariant={variant}
+            themeState={state}
             testID="text-input-border"
             style={[{ backgroundColor }, borderStyle]}
           />
@@ -297,7 +307,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
               style={{ backgroundColor }}
             >
               {required && (
-                <StyledAsteriskLabel themeVariant={variant} fontSize="small">
+                <StyledAsteriskLabel themeState={state} fontSize="small">
                   *
                 </StyledAsteriskLabel>
               )}
@@ -306,7 +316,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
                   nativeID={accessibilityLabelledBy}
                   testID="input-label"
                   fontSize="small"
-                  themeVariant={variant}
+                  themeState={state}
                   style={{ backgroundColor }}
                 >
                   {label}
@@ -316,7 +326,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
           )}
           {typeof prefix === 'string' ? (
             <Icon
-              intent={variant === 'disabled' ? 'disabled-text' : 'text'}
+              intent={state === 'disabled' ? 'disabled-text' : 'text'}
               testID="input-prefix"
               icon={prefix}
               size="xsmall"
@@ -326,9 +336,12 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
           )}
           <StyledTextInputAndLabelContainer>
             {!isFocused && isEmptyValue && (
-              <StyledLabelContainerInsideTextInput pointerEvents="none">
+              <StyledLabelContainerInsideTextInput
+                themeVariant={variant}
+                pointerEvents="none"
+              >
                 {required && (
-                  <StyledAsteriskLabelInsideTextInput themeVariant={variant}>
+                  <StyledAsteriskLabelInsideTextInput themeState={state}>
                     *
                   </StyledAsteriskLabelInsideTextInput>
                 )}
@@ -337,7 +350,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
                     nativeID={accessibilityLabelledBy}
                     testID="input-label"
                     fontSize="medium"
-                    themeVariant={variant}
+                    themeState={state}
                   >
                     {label}
                   </StyledLabelInsideTextInput>
@@ -349,6 +362,8 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
             ) : (
               <StyledTextInput
                 {...nativeInputProps}
+                themeVariant={variant}
+                multiline={variant === 'textarea' || nativeProps.multiline}
                 ref={(reference) => {
                   innerTextInput.current = reference;
                 }}
@@ -357,7 +372,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
           </StyledTextInputAndLabelContainer>
           {typeof actualSuffix === 'string' ? (
             <Icon
-              intent={variant === 'disabled' ? 'disabled-text' : 'text'}
+              intent={state === 'disabled' ? 'disabled-text' : 'text'}
               testID="input-suffix"
               icon={actualSuffix}
               spin={actualSuffix === 'loading'}
@@ -384,7 +399,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
               !!helpText && <StyledHelperText>{helpText}</StyledHelperText>
             )}
             {shouldShowMaxLength && (
-              <StyledMaxLengthMessage themeVariant={variant} fontSize="small">
+              <StyledMaxLengthMessage themeState={state} fontSize="small">
                 {displayText.length}/{maxLength}
               </StyledMaxLengthMessage>
             )}

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap

@@ -76,7 +76,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
           }
           testID="text-input-border"
           themeFocused={false}
-          themeVariant="filled"
+          themeState="filled"
         />
         <View
           pointerEvents="none"
@@ -123,8 +123,8 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
             themeFontSize="small"
             themeFontWeight="regular"
             themeIntent="body"
+            themeState="filled"
             themeTypeface="neutral"
-            themeVariant="filled"
           >
             Break time
           </Text>
@@ -160,8 +160,11 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
                 Object {
                   "alignSelf": "stretch",
                   "flexGrow": 2,
-                  "fontSize": 14,
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "height": undefined,
                   "marginHorizontal": 8,
+                  "maxHeight": 144,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
@@ -172,6 +175,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
               ]
             }
             testID="text-input"
+            themeVariant="text"
             value="03:24 AM"
           />
         </View>
@@ -307,7 +311,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
           }
           testID="text-input-border"
           themeFocused={false}
-          themeVariant="filled"
+          themeState="filled"
         />
         <View
           pointerEvents="none"
@@ -354,8 +358,8 @@ exports[`TimePickerAndroid renders correctly 1`] = `
             themeFontSize="small"
             themeFontWeight="regular"
             themeIntent="body"
+            themeState="filled"
             themeTypeface="neutral"
-            themeVariant="filled"
           >
             Break time
           </Text>
@@ -391,8 +395,11 @@ exports[`TimePickerAndroid renders correctly 1`] = `
                 Object {
                   "alignSelf": "stretch",
                   "flexGrow": 2,
-                  "fontSize": 14,
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "height": undefined,
                   "marginHorizontal": 8,
+                  "maxHeight": 144,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
@@ -403,6 +410,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
               ]
             }
             testID="text-input"
+            themeVariant="text"
             value="03:24 AM"
           />
         </View>

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -76,7 +76,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
           }
           testID="text-input-border"
           themeFocused={false}
-          themeVariant="filled"
+          themeState="filled"
         />
         <View
           pointerEvents="none"
@@ -123,8 +123,8 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
             themeFontSize="small"
             themeFontWeight="regular"
             themeIntent="body"
+            themeState="filled"
             themeTypeface="neutral"
-            themeVariant="filled"
           >
             Break time
           </Text>
@@ -160,8 +160,11 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
                 Object {
                   "alignSelf": "stretch",
                   "flexGrow": 2,
-                  "fontSize": 14,
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "height": undefined,
                   "marginHorizontal": 8,
+                  "maxHeight": 144,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
@@ -172,6 +175,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
               ]
             }
             testID="text-input"
+            themeVariant="text"
             value="03:24 AM"
           />
         </View>
@@ -307,7 +311,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
           }
           testID="text-input-border"
           themeFocused={false}
-          themeVariant="filled"
+          themeState="filled"
         />
         <View
           pointerEvents="none"
@@ -354,8 +358,8 @@ exports[`TimePickerIOS renders correctly 1`] = `
             themeFontSize="small"
             themeFontWeight="regular"
             themeIntent="body"
+            themeState="filled"
             themeTypeface="neutral"
-            themeVariant="filled"
           >
             Break time
           </Text>
@@ -391,8 +395,11 @@ exports[`TimePickerIOS renders correctly 1`] = `
                 Object {
                   "alignSelf": "stretch",
                   "flexGrow": 2,
-                  "fontSize": 14,
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 16,
+                  "height": undefined,
                   "marginHorizontal": 8,
+                  "maxHeight": 144,
                   "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
@@ -403,6 +410,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
               ]
             }
             testID="text-input"
+            themeVariant="text"
             value="03:24 AM"
           />
         </View>

package/src/index.ts

@@ -46,6 +46,7 @@ import Radio from './components/Radio';
 import SectionHeading from './components/SectionHeading';
 import Select from './components/Select';
 import Skeleton from './components/Skeleton';
+import Success from './components/Success';
 import Switch from './components/Switch';
 import Tabs from './components/Tabs';
 import Tag from './components/Tag';
@@ -107,6 +108,7 @@ export {
   Radio,
   SectionHeading,
   Select,
+  Success,
   Switch,
   Tabs,
   Tag,

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -417,7 +417,7 @@ Object {
       },
       "space": Object {
         "imageMargin": 24,
-        "titleMargin": 16,
+        "titleMargin": 8,
         "wrapperPadding": 16,
       },
     },
@@ -446,7 +446,7 @@ Object {
           "wrapperHorizontalPadding": 16,
           "wrapperVerticalPadding": 48,
         },
-        "imageMarginBottom": 32,
+        "imageMarginBottom": 24,
         "titleMarginBottom": 8,
         "wrapperPadding": 24,
       },
@@ -793,6 +793,36 @@ Object {
         },
       },
     },
+    "success": Object {
+      "colors": Object {
+        "description": "#4d6265",
+        "fullScreenBackground": "#ccd2d3",
+        "inPageBackground": "#f6f6f7",
+        "title": "#001f23",
+      },
+      "fontSizes": Object {
+        "description": 18,
+        "title": 24,
+      },
+      "fonts": Object {
+        "description": "RebondGrotesque",
+        "title": "RebondGrotesque-SemiBold",
+      },
+      "sizes": Object {
+        "image": 176,
+      },
+      "space": Object {
+        "button": Object {
+          "margin": 16,
+          "padding": 16,
+          "wrapperHorizontalPadding": 16,
+          "wrapperVerticalPadding": 48,
+        },
+        "imageMarginBottom": 32,
+        "titleMarginBottom": 8,
+        "wrapperPadding": 24,
+      },
+    },
     "swipeable": Object {
       "colors": Object {
         "danger": "#f46363",
@@ -874,7 +904,7 @@ Object {
         "dangerBackground": "#fcebe7",
         "info": "#4568fb",
         "infoBackground": "#ecf0ff",
-        "primary": "#401960",
+        "primary": "#001f23",
         "primaryBackground": undefined,
         "success": "#017d6d",
         "successBackground": "#f0fef4",
@@ -945,17 +975,22 @@ Object {
         "text": "#001f23",
       },
       "fontSizes": Object {
-        "asteriskLabel": 14,
+        "asteriskLabel": 16,
         "error": 12,
-        "labelInsideTextInput": 14,
+        "labelInsideTextInput": 16,
         "maxLength": 12,
-        "text": 14,
+        "text": 16,
+      },
+      "fonts": Object {
+        "text": "BeVietnamPro-Regular",
       },
       "radii": Object {
         "container": 8,
       },
       "sizes": Object {
         "errorAndHelpTextContainerHeight": 16,
+        "textInputMaxHeight": 144,
+        "textareaHeight": 144,
       },
       "space": Object {
         "containerMarginTop": 8,

package/src/theme/components/empty.ts

@@ -2,7 +2,7 @@ import type { GlobalTheme } from '../global';
 
 const getEmptyTheme = (theme: GlobalTheme) => {
   const space = {
-    titleMargin: theme.space.medium,
+    titleMargin: theme.space.small,
     imageMargin: theme.space.large,
     wrapperPadding: theme.space.medium,
   };

package/src/theme/components/error.ts

@@ -3,7 +3,7 @@ import type { GlobalTheme } from '../global';
 const getErrorTheme = (theme: GlobalTheme) => {
   const space = {
     titleMarginBottom: theme.space.small,
-    imageMarginBottom: theme.space.xlarge,
+    imageMarginBottom: theme.space.large,
     wrapperPadding: theme.space.large,
     button: {
       wrapperHorizontalPadding: theme.space.medium,

package/src/theme/components/success.ts

@@ -0,0 +1,40 @@
+import type { GlobalTheme } from '../global';
+
+const getSuccessTheme = (theme: GlobalTheme) => {
+  const space = {
+    titleMarginBottom: theme.space.small,
+    imageMarginBottom: theme.space.xlarge,
+    wrapperPadding: theme.space.large,
+    button: {
+      wrapperHorizontalPadding: theme.space.medium,
+      wrapperVerticalPadding: theme.space.xxxlarge,
+      margin: theme.space.medium,
+      padding: theme.space.medium,
+    },
+  };
+
+  const sizes = {
+    image: theme.sizes['19xlarge'],
+  };
+
+  const colors = {
+    title: theme.colors.onDefaultGlobalSurface,
+    description: theme.colors.mutedOnDefaultGlobalSurface,
+    fullScreenBackground: theme.colors.decorativePrimarySurface,
+    inPageBackground: theme.colors.neutralGlobalSurface,
+  };
+
+  const fontSizes = {
+    title: theme.fontSizes.xxxlarge,
+    description: theme.fontSizes.xlarge,
+  };
+
+  const fonts = {
+    title: theme.fonts.playful.semiBold,
+    description: theme.fonts.playful.regular,
+  };
+
+  return { fontSizes, colors, sizes, space, fonts };
+};
+
+export default getSuccessTheme;

package/src/theme/components/tag.ts

@@ -6,7 +6,7 @@ const getTagTheme = (theme: GlobalTheme) => {
   };
 
   const colors = {
-    primary: theme.colors.primary,
+    primary: theme.colors.onDefaultGlobalSurface,
     primaryBackground: undefined,
     info: theme.colors.onInfoSurface,
     infoBackground: theme.colors.infoSurface,

package/src/theme/components/textInput.ts

@@ -58,12 +58,16 @@ const getTextInputTheme = (theme: GlobalTheme) => {
     labelInsideTextInputMarginTop: -theme.space.xxsmall,
   };
 
+  const fonts = {
+    text: theme.fonts.neutral.regular,
+  };
+
   const fontSizes = {
-    text: theme.fontSizes.medium,
-    labelInsideTextInput: theme.fontSizes.medium,
+    text: theme.fontSizes.large,
+    labelInsideTextInput: theme.fontSizes.large,
     error: theme.fontSizes.small,
     maxLength: theme.fontSizes.small,
-    asteriskLabel: theme.fontSizes.medium,
+    asteriskLabel: theme.fontSizes.large,
   };
 
   const borderWidths = {
@@ -79,9 +83,11 @@ const getTextInputTheme = (theme: GlobalTheme) => {
 
   const sizes = {
     errorAndHelpTextContainerHeight: theme.sizes.medium,
+    textareaHeight: theme.sizes['15xlarge'],
+    textInputMaxHeight: theme.sizes['15xlarge'],
   };
 
-  return { colors, space, fontSizes, borderWidths, radii, sizes };
+  return { colors, space, fonts, fontSizes, borderWidths, radii, sizes };
 };
 
 export default getTextInputTheme;

package/src/theme/getTheme.ts

@@ -34,6 +34,7 @@ import getSelectTheme from './components/select';
 import getSkeletonTheme from './components/skeleton';
 import getSliderTheme from './components/slider';
 import getSpinnerTheme from './components/spinner';
+import getSuccessTheme from './components/success';
 import getSwipeableTheme from './components/swipeable';
 import getSwitchTheme from './components/switch';
 import getTabsTheme from './components/tabs';
@@ -82,6 +83,7 @@ type Theme = GlobalTheme & {
     skeleton: ReturnType<typeof getSkeletonTheme>;
     slider: ReturnType<typeof getSliderTheme>;
     spinner: ReturnType<typeof getSpinnerTheme>;
+    success: ReturnType<typeof getSuccessTheme>;
     swipeable: ReturnType<typeof getSwipeableTheme>;
     switch: ReturnType<typeof getSwitchTheme>;
     tabs: ReturnType<typeof getTabsTheme>;
@@ -136,6 +138,7 @@ const getTheme = (
       skeleton: getSkeletonTheme(globalTheme),
       slider: getSliderTheme(globalTheme),
       spinner: getSpinnerTheme(globalTheme),
+      success: getSuccessTheme(globalTheme),
       swipeable: getSwipeableTheme(globalTheme),
       switch: getSwitchTheme(globalTheme),
       tabs: getTabsTheme(globalTheme),

package/src/utils/hooks.ts

@@ -23,7 +23,7 @@ export const useDeprecation = (message: string, cond = true) => {
   useEffect(() => {
     // eslint-disable-next-line no-console
     if (cond) {
-      console.error(message);
+      console.warn(message);
     }
   }, [message, cond]);
 };

package/testUtils/setup.tsx

@@ -40,6 +40,12 @@ jest.mock('react-native-pager-view', () => {
       this.index = Math.max(0, Math.min(page, React.Children.count(children)));
     };
 
+    setPageWithoutAnimation = (page: number) => {
+      const { children } = this.props;
+
+      this.index = Math.max(0, Math.min(page, React.Children.count(children)));
+    };
+
     render() {
       const { children } = this.props;
       return <RealComponent>{children}</RealComponent>;