@hero-design/rn 7.10.2-rc.0 → 7.11.2

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

@@ -25,6 +25,7 @@ import {
   StyledLabelContainerInsideTextInput,
   StyledErrorAndHelpTextContainer,
   StyledBorderBackDrop,
+  StyledErrorAndMaxLengthContainer,
 } from './StyledTextInput';
 import Icon, { IconName } from '../Icon';
 import { useTheme } from '../../theme';
@@ -139,8 +140,7 @@ const TextInput = ({
   ...nativeProps
 }: TextInputProps): JSX.Element => {
   const textInputReference = useRef<RNTextInput | null>(null);
-  const displayText = value || defaultValue || '';
-
+  const displayText = (value !== undefined ? value : defaultValue) ?? '';
   const isEmptyValue = displayText.length === 0;
 
   const [isFocused, setIsFocused] = React.useState(false);
@@ -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
@@ -255,23 +259,25 @@ const TextInput = ({
         )}
       </StyledTextInputContainer>
       <StyledErrorAndHelpTextContainer>
-        {error && (
-          <StyledErrorContainer>
-            <Icon
-              testID="input-error-icon"
-              icon="circle-info"
-              size="xsmall"
-              intent="danger"
-            />
+        <StyledErrorAndMaxLengthContainer>
+          {error && (
+            <StyledErrorContainer>
+              <Icon
+                testID="input-error-icon"
+                icon="circle-info"
+                size="xsmall"
+                intent="danger"
+              />
 
-            <StyledError testID="input-error-message">{error}</StyledError>
-          </StyledErrorContainer>
-        )}
-        {shouldShowMaxLength && (
-          <StyledMaxLengthMessage themeVariant={variant} fontSize="small">
-            {displayText.length}/{maxLength}
-          </StyledMaxLengthMessage>
-        )}
+              <StyledError testID="input-error-message">{error}</StyledError>
+            </StyledErrorContainer>
+          )}
+          {shouldShowMaxLength && (
+            <StyledMaxLengthMessage themeVariant={variant} fontSize="small">
+              {displayText.length}/{maxLength}
+            </StyledMaxLengthMessage>
+          )}
+        </StyledErrorAndMaxLengthContainer>
         {helpText && <StyledHelperText>{helpText}</StyledHelperText>}
       </StyledErrorAndHelpTextContainer>
     </StyledContainer>

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",
@@ -588,7 +621,7 @@ Object {
       "space": Object {
         "containerMarginVertical": 8,
         "containerPadding": 16,
-        "errorContainerMarginLeft": 16,
+        "errorAndHelpTextContainerPaddingLeft": 16,
         "errorContainerMarginRight": 4,
         "errorMarginLeft": 4,
         "inputHorizontalMargin": 8,
@@ -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/textInput.ts

@@ -60,10 +60,10 @@ const getTextInputTheme = (theme: GlobalTheme) => {
     labelHorizontalPadding: theme.space.xsmall,
     inputHorizontalMargin: theme.space.small,
     containerMarginVertical: theme.space.small,
-    errorContainerMarginLeft: theme.space.medium,
     errorContainerMarginRight: theme.space.xsmall,
     errorMarginLeft: theme.space.xsmall,
     maxLengthLabelMarginLeft: theme.space.xsmall,
+    errorAndHelpTextContainerPaddingLeft: theme.space.medium,
   };
 
   const fontSizes = {

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),
     },
   };
 };