@hero-design/rn 7.10.2 → 7.11.2

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import PinInput, { getState } from '..';
+
+describe('rendering', () => {
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(
+      <PinInput value="12" onChangeText={jest.fn()} />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(wrapper.queryAllByTestId('pin-cell-filled-mask')).toHaveLength(2);
+    expect(wrapper.queryAllByTestId('pin-cell-mask')).toHaveLength(2);
+  });
+
+  it('renders correctly when length is 6 and secure is false', () => {
+    const wrapper = renderWithTheme(
+      <PinInput
+        length={6}
+        value="123"
+        onChangeText={jest.fn()}
+        secure={false}
+      />
+    );
+
+    expect(wrapper.queryAllByText('1')).toHaveLength(1);
+    expect(wrapper.queryAllByText('2')).toHaveLength(1);
+    expect(wrapper.queryAllByText('3')).toHaveLength(1);
+    expect(wrapper.queryAllByTestId('pin-cell-mask')).toHaveLength(3);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly when there is error', () => {
+    const wrapper = renderWithTheme(
+      <PinInput
+        value="12"
+        onChangeText={jest.fn()}
+        error="PIN is not correct"
+      />
+    );
+
+    expect(wrapper.queryAllByText('PIN is not correct')).toHaveLength(1);
+    expect(wrapper.queryAllByTestId('pin-error-icon')).toHaveLength(1);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly when disabled', () => {
+    const wrapper = renderWithTheme(
+      <PinInput value="12" onChangeText={jest.fn()} disabled />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('behaviors', () => {
+  it('calls onChangeText, onFulfill with correct params', () => {
+    const onChangeText = jest.fn();
+    const onFulfill = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <PinInput value="123" onChangeText={onChangeText} onFulfill={onFulfill} />
+    );
+
+    const hiddenInput = getByTestId('pin-hidden-input');
+    fireEvent.changeText(hiddenInput, '123.4'); // 123.4 is intended to test regex behavior
+
+    expect(onChangeText).toHaveBeenCalledWith('1234');
+    expect(onFulfill).toHaveBeenCalledWith('1234');
+  });
+});
+
+describe('getState', () => {
+  it.each`
+    disabled | error                       | state
+    ${true}  | ${'PIN is not correct'}     | ${'disabled'}
+    ${true}  | ${undefined}                | ${'disabled'}
+    ${false} | ${'This field is required'} | ${'error'}
+    ${false} | ${undefined}                | ${'default'}
+  `(
+    'returns $state when disabled is $disabled, error is $error',
+    ({ disabled, error, state }) => {
+      expect(
+        getState({
+          disabled,
+          error,
+        })
+      ).toBe(state);
+    }
+  );
+});

package/src/components/PinInput/index.tsx

@@ -0,0 +1,173 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  InteractionManager,
+  StyleProp,
+  TextInput,
+  ViewStyle,
+} from 'react-native';
+import Icon from '../Icon';
+import PinCell from './PinCell';
+import {
+  StyledErrorContainer,
+  StyledErrorMessage,
+  StyledHiddenInput,
+  StyledSpacer,
+  StyledPinWrapper,
+  StyledWrapper,
+  State,
+} from './StyledPinInput';
+
+interface PinInputProps {
+  /**
+   * The value to show for the input.
+   */
+  value?: string;
+  /**
+   * Callback function that's called when the text changed.
+   */
+  onChangeText: (value: string) => void;
+  /**
+   * Callback function that's called when the input is completely filled.
+   */
+  onFulfill?: (value: string) => void;
+  /**
+   * Number of character for the input.
+   */
+  length?: number;
+  /*
+   * Whether the input is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Whether the pin value is secured using masks.
+   * By default, this is true, meaning that masks are shown to hide pin value.
+   */
+  secure?: boolean;
+  /**
+   * If true, focuses the input on componentDidMount.
+   */
+  autoFocus?: boolean;
+  /**
+   * Error message.
+   */
+  error?: string;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+export function getState({
+  disabled,
+  error,
+}: {
+  disabled?: boolean;
+  error?: string;
+}): State {
+  if (disabled) {
+    return 'disabled';
+  }
+  if (error) {
+    return 'error';
+  }
+  return 'default';
+}
+
+function PinInput({
+  value = '',
+  onChangeText,
+  onFulfill,
+  length = 4,
+  disabled = false,
+  secure = true,
+  autoFocus = false,
+  error,
+  style,
+  testID,
+}: PinInputProps) {
+  const inputRef = useRef<TextInput>(null);
+  const [focused, setFocused] = useState(autoFocus);
+  const state = getState({ disabled, error });
+
+  const focus = useCallback(() => {
+    if (inputRef?.current) {
+      inputRef.current.focus();
+      setFocused(true);
+    }
+  }, []);
+
+  const blur = useCallback(() => {
+    if (inputRef?.current) {
+      inputRef.current.blur();
+      setFocused(false);
+    }
+  }, []);
+
+  const changeText = useCallback((text: string) => {
+    const pin = (text.match(/[0-9]/g) || []).join('');
+    if (onChangeText) {
+      onChangeText(pin);
+    }
+    if (pin.length === length && onFulfill) {
+      onFulfill(pin);
+    }
+  }, []);
+
+  useEffect(() => {
+    // Must run after animations for keyboard to automatically open
+    if (autoFocus) {
+      InteractionManager.runAfterInteractions(focus);
+    }
+  }, [inputRef]);
+
+  return (
+    <StyledWrapper style={style} testID={testID}>
+      <StyledPinWrapper>
+        {[...Array(length).keys()].map(index => (
+          <React.Fragment key={index}>
+            {index !== 0 && <StyledSpacer />}
+            <PinCell
+              value={value.charAt(index)}
+              secure={secure}
+              focused={focused && index === value.length}
+              state={state}
+            />
+          </React.Fragment>
+        ))}
+      </StyledPinWrapper>
+      {state === 'error' && (
+        <StyledErrorContainer>
+          <Icon
+            icon="circle-info"
+            size="xsmall"
+            intent="danger"
+            testID="pin-error-icon"
+          />
+          <StyledErrorMessage>{error}</StyledErrorMessage>
+        </StyledErrorContainer>
+      )}
+      <StyledHiddenInput
+        themePinLength={length}
+        ref={inputRef}
+        value={value}
+        onChangeText={changeText}
+        secureTextEntry={secure}
+        editable={!disabled}
+        autoFocus={autoFocus}
+        onFocus={focus}
+        onBlur={blur}
+        maxLength={length}
+        keyboardType="numeric"
+        contextMenuHidden
+        caretHidden
+        testID="pin-hidden-input"
+      />
+    </StyledWrapper>
+  );
+}
+
+export default PinInput;

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

@@ -60,6 +60,21 @@ describe('TextInput', () => {
       ).toHaveLength(1);
     });
 
+    it('should not render input-label if label is empty', () => {
+      const { getByTestId } = renderWithTheme(
+        <TextInput
+          prefix="dollar-sign"
+          suffix="arrow-down"
+          testID="idle-text-input"
+        />
+      );
+
+      expect(getByTestId('idle-text-input')).toBeTruthy();
+      expect(
+        within(getByTestId('idle-text-input')).queryAllByTestId('input-label')
+      ).toHaveLength(0);
+    });
+
     it('onChangeText, onBlur, onFocus', () => {
       const onChangeText = jest.fn();
       const onBlur = jest.fn();

package/src/components/TextInput/index.tsx

@@ -171,14 +171,16 @@ const TextInput = ({
                 *
               </StyledAsteriskLabel>
             )}
-            <StyledLabel
-              nativeID={accessibilityLabelledBy}
-              testID="input-label"
-              fontSize="small"
-              themeVariant={variant}
-            >
-              {label}
-            </StyledLabel>
+            {!!label && (
+              <StyledLabel
+                nativeID={accessibilityLabelledBy}
+                testID="input-label"
+                fontSize="small"
+                themeVariant={variant}
+              >
+                {label}
+              </StyledLabel>
+            )}
           </StyledLabelContainer>
         )}
         {typeof prefix === 'string' ? (
@@ -200,14 +202,16 @@ const TextInput = ({
                   *
                 </StyledAsteriskLabelInsideTextInput>
               )}
-              <StyledLabelInsideTextInput
-                nativeID={accessibilityLabelledBy}
-                testID="input-label"
-                fontSize="medium"
-                themeVariant={variant}
-              >
-                {label}
-              </StyledLabelInsideTextInput>
+              {!!label && (
+                <StyledLabelInsideTextInput
+                  nativeID={accessibilityLabelledBy}
+                  testID="input-label"
+                  fontSize="medium"
+                  themeVariant={variant}
+                >
+                  {label}
+                </StyledLabelInsideTextInput>
+              )}
             </StyledLabelContainerInsideTextInput>
           )}
           <StyledTextInput

package/src/components/Typography/Text/StyledText.tsx

@@ -8,7 +8,7 @@ const FONTWEIGHT_MAP = {
 } as const;
 
 const StyledText = styled(Text)<{
-  themeFontSize: 'small' | 'medium' | 'large' | 'xlarge';
+  themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxxxlarge';
   themeFontWeight: 'light' | 'regular' | 'semi-bold';
   themeIntent:
     | 'body'

package/src/components/Typography/Text/__tests__/StyledText.spec.tsx

@@ -9,6 +9,7 @@ describe('StyledText', () => {
     ${'medium'}
     ${'large'}
     ${'xlarge'}
+    ${'xxxxxlarge'}
   `('has $fontSize fontSize style', ({ fontSize }) => {
     const { toJSON } = renderWithTheme(
       <StyledText

package/src/components/Typography/Text/__tests__/__snapshots__/StyledText.spec.tsx.snap

@@ -307,3 +307,25 @@ exports[`StyledText has xlarge fontSize style 1`] = `
   This is a test
 </Text>
 `;
+
+exports[`StyledText has xxxxxlarge fontSize style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 32,
+        "letterSpacing": 0.96,
+        "lineHeight": 40,
+      },
+      undefined,
+    ]
+  }
+  themeFontSize="xxxxxlarge"
+  themeFontWeight="regular"
+  themeIntent="body"
+>
+  This is a test
+</Text>
+`;

package/src/components/Typography/Text/index.tsx

@@ -14,7 +14,7 @@ export interface TextProps extends NativeTextProps {
   /**
    * Size of the text.
    */
-  fontSize?: 'small' | 'medium' | 'large' | 'xlarge';
+  fontSize?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxxxlarge';
   /**
    * Font weight of the text.
    */

package/src/index.ts

@@ -16,6 +16,7 @@ import Drawer from './components/Drawer';
 import FAB from './components/FAB';
 import Icon from './components/Icon';
 import List from './components/List';
+import PinInput from './components/PinInput';
 import Progress from './components/Progress';
 import Spinner from './components/Spinner';
 import Radio from './components/Radio';
@@ -50,6 +51,7 @@ export {
   FAB,
   Icon,
   List,
+  PinInput,
   Progress,
   Spinner,
   Radio,

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

@@ -354,6 +354,39 @@ Object {
         "leadingStatus": 8,
       },
     },
+    "pinInput": Object {
+      "borderWidths": Object {
+        "default": 1,
+        "focused": 2,
+      },
+      "colors": Object {
+        "default": "#292a2b",
+        "disabled": "#bfc1c5",
+        "error": "#de350b",
+        "mask": "#727478",
+      },
+      "fontSizes": Object {
+        "cellText": 28,
+        "errorMessage": 12,
+      },
+      "fonts": Object {
+        "cellText": "BeVietnamPro-SemiBold",
+        "errorMessage": "BeVietnamPro-Regular",
+      },
+      "radii": Object {
+        "cell": 8,
+        "mask": 999,
+      },
+      "sizes": Object {
+        "cellHeight": 48,
+        "cellWidth": 40,
+        "mask": 16,
+      },
+      "space": Object {
+        "errorMessagePadding": 4,
+        "spacer": 16,
+      },
+    },
     "progress": Object {
       "colors": Object {
         "background": "#dadbde",
@@ -655,6 +688,7 @@ Object {
         "medium": 14,
         "small": 12,
         "xlarge": 18,
+        "xxxxxlarge": 32,
       },
       "fonts": Object {
         "light": "BeVietnamPro-Light",
@@ -666,6 +700,7 @@ Object {
         "medium": 22,
         "small": 20,
         "xlarge": 26,
+        "xxxxxlarge": 40,
       },
     },
   },

package/src/theme/components/pinInput.ts

@@ -0,0 +1,45 @@
+import { GlobalTheme } from '../global';
+
+const getPinInputTheme = (theme: GlobalTheme) => {
+  const borderWidths = {
+    default: theme.borderWidths.base,
+    focused: theme.borderWidths.medium,
+  };
+
+  const colors = {
+    default: theme.colors.text,
+    mask: theme.colors.subduedText, // should be Maastricht Blue light 50
+    error: theme.colors.danger, // using this so that the color is the same as danger Icon, should be Vermilion
+    disabled: theme.colors.archivedDark,
+  };
+
+  const fonts = {
+    cellText: theme.fonts.semiBold,
+    errorMessage: theme.fonts.regular,
+  };
+
+  const fontSizes = {
+    cellText: theme.fontSizes.xxxxlarge,
+    errorMessage: theme.fontSizes.small,
+  };
+
+  const sizes = {
+    cellWidth: theme.space.xxlarge,
+    cellHeight: theme.space.xxxlarge,
+    mask: theme.space.medium,
+  };
+
+  const space = {
+    spacer: theme.space.medium,
+    errorMessagePadding: theme.space.xsmall,
+  };
+
+  const radii = {
+    cell: theme.radii.medium,
+    mask: theme.radii.rounded,
+  };
+
+  return { borderWidths, colors, fonts, fontSizes, sizes, space, radii };
+};
+
+export default getPinInputTheme;

package/src/theme/components/typography.ts

@@ -22,6 +22,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     medium: theme.fontSizes.medium,
     large: theme.fontSizes.large,
     xlarge: theme.fontSizes.xlarge,
+    xxxxxlarge: theme.fontSizes.xxxxxlarge,
   };
 
   const lineHeights = {
@@ -29,6 +30,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     medium: theme.lineHeights.medium,
     large: theme.lineHeights.large,
     xlarge: theme.lineHeights.xlarge,
+    xxxxxlarge: theme.lineHeights.xxxxxlarge,
   };
 
   return { colors, fonts, fontSizes, lineHeights };

package/src/theme/global/colors.ts

@@ -28,7 +28,7 @@ const systemPalette = {
   platformBackground: palette.white,
   backgroundLight: palette.greyLight95,
   backgroundDark: palette.greyDark75,
-  text: palette.greyDark75,
+  text: palette.greyDark75, // should be Maastricht Blue
   subduedText: palette.greyDark30,
   disabledText: palette.greyDark15,
   disabledLightText: palette.greyLight45,

package/src/theme/global/space.ts

@@ -14,16 +14,16 @@ interface Space {
 }
 
 const getSpace = (baseSpace: number): Space => ({
-  xxsmall: scale(baseSpace * 0.25),
-  xsmall: scale(baseSpace * 0.5),
-  small: scale(baseSpace),
-  smallMedium: scale(baseSpace) * 1.5,
-  medium: scale(baseSpace * 2),
-  large: scale(baseSpace * 3),
-  xlarge: scale(baseSpace * 4),
-  xxlarge: scale(baseSpace * 5),
-  xxxlarge: scale(baseSpace * 6),
-  xxxxlarge: scale(baseSpace * 7),
+  xxsmall: scale(baseSpace * 0.25), // 2
+  xsmall: scale(baseSpace * 0.5), // 4
+  small: scale(baseSpace), // 8
+  smallMedium: scale(baseSpace) * 1.5, // 12
+  medium: scale(baseSpace * 2), // 16
+  large: scale(baseSpace * 3), // 24
+  xlarge: scale(baseSpace * 4), // 32
+  xxlarge: scale(baseSpace * 5), // 40
+  xxxlarge: scale(baseSpace * 6), // 48
+  xxxxlarge: scale(baseSpace * 7), // 56
 });
 
 export { Space, getSpace };

package/src/theme/index.ts

@@ -22,6 +22,8 @@ import getDividerTheme from './components/divider';
 import getDrawerTheme from './components/drawer';
 import getFABTheme from './components/fab';
 import getIconTheme from './components/icon';
+import getListTheme from './components/list';
+import getPinInputTheme from './components/pinInput';
 import getProgressTheme from './components/progress';
 import getRadioTheme from './components/radio';
 import getSectionHeadingTheme from './components/sectionHeading';
@@ -34,7 +36,6 @@ import getTextInputTheme from './components/textInput';
 import getToastTheme from './components/toast';
 import getToolbarTheme from './components/toolbar';
 import getTypographyTheme from './components/typography';
-import getListTheme from './components/list';
 
 type Theme = GlobalTheme & {
   __hd__: {
@@ -51,6 +52,8 @@ type Theme = GlobalTheme & {
     drawer: ReturnType<typeof getDrawerTheme>;
     fab: ReturnType<typeof getFABTheme>;
     icon: ReturnType<typeof getIconTheme>;
+    list: ReturnType<typeof getListTheme>;
+    pinInput: ReturnType<typeof getPinInputTheme>;
     progress: ReturnType<typeof getProgressTheme>;
     radio: ReturnType<typeof getRadioTheme>;
     sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
@@ -63,7 +66,6 @@ type Theme = GlobalTheme & {
     toast: ReturnType<typeof getToastTheme>;
     toolbar: ReturnType<typeof getToolbarTheme>;
     typography: ReturnType<typeof getTypographyTheme>;
-    list: ReturnType<typeof getListTheme>;
   };
 };
 
@@ -88,6 +90,8 @@ const getTheme = (
       drawer: getDrawerTheme(globalTheme),
       fab: getFABTheme(globalTheme),
       icon: getIconTheme(globalTheme),
+      list: getListTheme(globalTheme),
+      pinInput: getPinInputTheme(globalTheme),
       progress: getProgressTheme(globalTheme),
       radio: getRadioTheme(globalTheme),
       sectionHeading: getSectionHeadingTheme(globalTheme),
@@ -100,7 +104,6 @@ const getTheme = (
       toast: getToastTheme(globalTheme),
       toolbar: getToolbarTheme(globalTheme),
       typography: getTypographyTheme(globalTheme),
-      list: getListTheme(globalTheme),
     },
   };
 };