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

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

@@ -15,15 +15,15 @@ import {
 
 describe('Label', () => {
   it.each`
-    themeVariant
+    themeState
     ${'default'}
     ${'filled'}
     ${'error'}
     ${'disabled'}
     ${'readonly'}
-  `('renders correctly with themeVariant $themeVariant', ({ themeVariant }) => {
+  `('renders correctly with themeState $themeState', ({ themeState }) => {
     const { toJSON } = renderWithTheme(
-      <StyledLabel themeVariant={themeVariant}>Label</StyledLabel>
+      <StyledLabel themeState={themeState}>Label</StyledLabel>
     );
 
     expect(toJSON()).toMatchSnapshot();
@@ -31,24 +31,21 @@ describe('Label', () => {
 });
 describe('LabelInsideTextInput', () => {
   it.each`
-    themeVariant
+    themeState
     ${'default'}
     ${'filled'}
     ${'error'}
     ${'disabled'}
     ${'readonly'}
-  `(
-    'renders correctly with themeVariant $themeVariant',
-    ({ themeVariant }): void => {
-      const { toJSON } = renderWithTheme(
-        <StyledLabelInsideTextInput themeVariant={themeVariant}>
-          Label
-        </StyledLabelInsideTextInput>
-      );
-
-      expect(toJSON()).toMatchSnapshot();
-    }
-  );
+  `('renders correctly with themeState $themeState', ({ themeState }): void => {
+    const { toJSON } = renderWithTheme(
+      <StyledLabelInsideTextInput themeState={themeState}>
+        Label
+      </StyledLabelInsideTextInput>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
 });
 
 describe('LabelContainer', () => {
@@ -61,22 +58,19 @@ describe('LabelContainer', () => {
 
 describe('StyledAsteriskLabel', () => {
   it.each`
-    themeVariant
+    themeState
     ${'default'}
     ${'filled'}
     ${'error'}
     ${'disabled'}
     ${'readonly'}
-  `(
-    'renders correctly with themeVariant $themeVariant',
-    ({ themeVariant }): void => {
-      const { toJSON } = renderWithTheme(
-        <StyledAsteriskLabel themeVariant={themeVariant}>*</StyledAsteriskLabel>
-      );
-
-      expect(toJSON()).toMatchSnapshot();
-    }
-  );
+  `('renders correctly with themeState $themeState', ({ themeState }): void => {
+    const { toJSON } = renderWithTheme(
+      <StyledAsteriskLabel themeState={themeState}>*</StyledAsteriskLabel>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
 });
 
 describe('StyledErrorMessageContainer', () => {
@@ -99,24 +93,21 @@ describe('StyledErrorMessage', () => {
 
 describe('StyledMaxLengthMessage', () => {
   it.each`
-    themeVariant
+    themeState
     ${'default'}
     ${'filled'}
     ${'error'}
     ${'disabled'}
     ${'readonly'}
-  `(
-    'renders correctly with themeVariant $themeVariant',
-    ({ themeVariant }): void => {
-      const { toJSON } = renderWithTheme(
-        <StyledMaxLengthMessage themeVariant={themeVariant}>
-          100/255
-        </StyledMaxLengthMessage>
-      );
-
-      expect(toJSON()).toMatchSnapshot();
-    }
-  );
+  `('renders correctly with themeState $themeState', ({ themeState }): void => {
+    const { toJSON } = renderWithTheme(
+      <StyledMaxLengthMessage themeState={themeState}>
+        100/255
+      </StyledMaxLengthMessage>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
 });
 
 describe('StyledHelperText', () => {
@@ -131,29 +122,23 @@ describe('StyledHelperText', () => {
 
 describe('StyledBorderBackDrop', () => {
   it.each`
-    themeVariant
+    themeState
     ${'default'}
     ${'filled'}
     ${'error'}
     ${'disabled'}
     ${'readonly'}
-  `(
-    'renders correctly with themeVariant $themeVariant',
-    ({ themeVariant }): void => {
-      const { toJSON } = renderWithTheme(
-        <StyledBorderBackDrop
-          themeVariant={themeVariant}
-          themeFocused={false}
-        />
-      );
-
-      expect(toJSON()).toMatchSnapshot();
-    }
-  );
+  `('renders correctly with themeState $themeState', ({ themeState }): void => {
+    const { toJSON } = renderWithTheme(
+      <StyledBorderBackDrop themeState={themeState} themeFocused={false} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
 
   it('renders correctly when focused', (): void => {
     const { toJSON } = renderWithTheme(
-      <StyledBorderBackDrop themeVariant="error" themeFocused />
+      <StyledBorderBackDrop themeState="error" themeFocused />
     );
 
     expect(toJSON()).toMatchSnapshot();
@@ -161,8 +146,14 @@ describe('StyledBorderBackDrop', () => {
 });
 
 describe('StyledTextInput', () => {
-  it('renders correctly', () => {
-    const { toJSON } = renderWithTheme(<StyledTextInput />);
+  it.each`
+    themeVariant
+    ${'text'}
+    ${'textarea'}
+  `('renders correctly with $themeState state', ({ themeVariant }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledTextInput themeVariant={themeVariant} />
+    );
 
     expect(toJSON()).toMatchSnapshot();
   });

package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Label renders correctly with themeVariant default 1`] = `
+exports[`Label renders correctly with themeState default 1`] = `
 <Text
   allowFontScaling={false}
   style={
@@ -23,14 +23,14 @@ exports[`Label renders correctly with themeVariant default 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeState="default"
   themeTypeface="neutral"
-  themeVariant="default"
 >
   Label
 </Text>
 `;
 
-exports[`Label renders correctly with themeVariant disabled 1`] = `
+exports[`Label renders correctly with themeState disabled 1`] = `
 <Text
   allowFontScaling={false}
   style={
@@ -53,14 +53,14 @@ exports[`Label renders correctly with themeVariant disabled 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeState="disabled"
   themeTypeface="neutral"
-  themeVariant="disabled"
 >
   Label
 </Text>
 `;
 
-exports[`Label renders correctly with themeVariant error 1`] = `
+exports[`Label renders correctly with themeState error 1`] = `
 <Text
   allowFontScaling={false}
   style={
@@ -83,14 +83,14 @@ exports[`Label renders correctly with themeVariant error 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeState="error"
   themeTypeface="neutral"
-  themeVariant="error"
 >
   Label
 </Text>
 `;
 
-exports[`Label renders correctly with themeVariant filled 1`] = `
+exports[`Label renders correctly with themeState filled 1`] = `
 <Text
   allowFontScaling={false}
   style={
@@ -113,14 +113,14 @@ exports[`Label renders correctly with themeVariant filled 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeState="filled"
   themeTypeface="neutral"
-  themeVariant="filled"
 >
   Label
 </Text>
 `;
 
-exports[`Label renders correctly with themeVariant readonly 1`] = `
+exports[`Label renders correctly with themeState readonly 1`] = `
 <Text
   allowFontScaling={false}
   style={
@@ -143,8 +143,8 @@ exports[`Label renders correctly with themeVariant readonly 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeState="readonly"
   themeTypeface="neutral"
-  themeVariant="readonly"
 >
   Label
 </Text>
@@ -169,7 +169,7 @@ exports[`LabelContainer renders correctly 1`] = `
 />
 `;
 
-exports[`LabelInsideTextInput renders correctly with themeVariant default 1`] = `
+exports[`LabelInsideTextInput renders correctly with themeState default 1`] = `
 <Text
   allowFontScaling={false}
   style={
@@ -186,7 +186,7 @@ exports[`LabelInsideTextInput renders correctly with themeVariant default 1`] =
           "alignContent": "center",
           "alignItems": "center",
           "color": "#001f23",
-          "fontSize": 14,
+          "fontSize": 16,
           "marginTop": -2,
           "textAlignVertical": "center",
         },
@@ -197,14 +197,14 @@ exports[`LabelInsideTextInput renders correctly with themeVariant default 1`] =
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeState="default"
   themeTypeface="neutral"
-  themeVariant="default"
 >
   Label
 </Text>
 `;
 
-exports[`LabelInsideTextInput renders correctly with themeVariant disabled 1`] = `
+exports[`LabelInsideTextInput renders correctly with themeState disabled 1`] = `
 <Text
   allowFontScaling={false}
   style={
@@ -221,7 +221,7 @@ exports[`LabelInsideTextInput renders correctly with themeVariant disabled 1`] =
           "alignContent": "center",
           "alignItems": "center",
           "color": "#bfc1c5",
-          "fontSize": 14,
+          "fontSize": 16,
           "marginTop": -2,
           "textAlignVertical": "center",
         },
@@ -232,14 +232,14 @@ exports[`LabelInsideTextInput renders correctly with themeVariant disabled 1`] =
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeState="disabled"
   themeTypeface="neutral"
-  themeVariant="disabled"
 >
   Label
 </Text>
 `;
 
-exports[`LabelInsideTextInput renders correctly with themeVariant error 1`] = `
+exports[`LabelInsideTextInput renders correctly with themeState error 1`] = `
 <Text
   allowFontScaling={false}
   style={
@@ -256,7 +256,7 @@ exports[`LabelInsideTextInput renders correctly with themeVariant error 1`] = `
           "alignContent": "center",
           "alignItems": "center",
           "color": "#001f23",
-          "fontSize": 14,
+          "fontSize": 16,
           "marginTop": -2,
           "textAlignVertical": "center",
         },
@@ -267,14 +267,14 @@ exports[`LabelInsideTextInput renders correctly with themeVariant error 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeState="error"
   themeTypeface="neutral"
-  themeVariant="error"
 >
   Label
 </Text>
 `;
 
-exports[`LabelInsideTextInput renders correctly with themeVariant filled 1`] = `
+exports[`LabelInsideTextInput renders correctly with themeState filled 1`] = `
 <Text
   allowFontScaling={false}
   style={
@@ -291,7 +291,7 @@ exports[`LabelInsideTextInput renders correctly with themeVariant filled 1`] = `
           "alignContent": "center",
           "alignItems": "center",
           "color": "#001f23",
-          "fontSize": 14,
+          "fontSize": 16,
           "marginTop": -2,
           "textAlignVertical": "center",
         },
@@ -302,14 +302,14 @@ exports[`LabelInsideTextInput renders correctly with themeVariant filled 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeState="filled"
   themeTypeface="neutral"
-  themeVariant="filled"
 >
   Label
 </Text>
 `;
 
-exports[`LabelInsideTextInput renders correctly with themeVariant readonly 1`] = `
+exports[`LabelInsideTextInput renders correctly with themeState readonly 1`] = `
 <Text
   allowFontScaling={false}
   style={
@@ -326,7 +326,7 @@ exports[`LabelInsideTextInput renders correctly with themeVariant readonly 1`] =
           "alignContent": "center",
           "alignItems": "center",
           "color": "#808f91",
-          "fontSize": 14,
+          "fontSize": 16,
           "marginTop": -2,
           "textAlignVertical": "center",
         },
@@ -337,14 +337,14 @@ exports[`LabelInsideTextInput renders correctly with themeVariant readonly 1`] =
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeState="readonly"
   themeTypeface="neutral"
-  themeVariant="readonly"
 >
   Label
 </Text>
 `;
 
-exports[`StyledAsteriskLabel renders correctly with themeVariant default 1`] = `
+exports[`StyledAsteriskLabel renders correctly with themeState default 1`] = `
 <Text
   allowFontScaling={false}
   style={
@@ -367,14 +367,14 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant default 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeState="default"
   themeTypeface="neutral"
-  themeVariant="default"
 >
   *
 </Text>
 `;
 
-exports[`StyledAsteriskLabel renders correctly with themeVariant disabled 1`] = `
+exports[`StyledAsteriskLabel renders correctly with themeState disabled 1`] = `
 <Text
   allowFontScaling={false}
   style={
@@ -397,14 +397,14 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant disabled 1`] =
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeState="disabled"
   themeTypeface="neutral"
-  themeVariant="disabled"
 >
   *
 </Text>
 `;
 
-exports[`StyledAsteriskLabel renders correctly with themeVariant error 1`] = `
+exports[`StyledAsteriskLabel renders correctly with themeState error 1`] = `
 <Text
   allowFontScaling={false}
   style={
@@ -427,14 +427,14 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant error 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeState="error"
   themeTypeface="neutral"
-  themeVariant="error"
 >
   *
 </Text>
 `;
 
-exports[`StyledAsteriskLabel renders correctly with themeVariant filled 1`] = `
+exports[`StyledAsteriskLabel renders correctly with themeState filled 1`] = `
 <Text
   allowFontScaling={false}
   style={
@@ -457,14 +457,14 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant filled 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeState="filled"
   themeTypeface="neutral"
-  themeVariant="filled"
 >
   *
 </Text>
 `;
 
-exports[`StyledAsteriskLabel renders correctly with themeVariant readonly 1`] = `
+exports[`StyledAsteriskLabel renders correctly with themeState readonly 1`] = `
 <Text
   allowFontScaling={false}
   style={
@@ -487,8 +487,8 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant readonly 1`] =
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeState="readonly"
   themeTypeface="neutral"
-  themeVariant="readonly"
 >
   *
 </Text>
@@ -512,11 +512,11 @@ exports[`StyledBorderBackDrop renders correctly when focused 1`] = `
     ]
   }
   themeFocused={true}
-  themeVariant="error"
+  themeState="error"
 />
 `;
 
-exports[`StyledBorderBackDrop renders correctly with themeVariant default 1`] = `
+exports[`StyledBorderBackDrop renders correctly with themeState default 1`] = `
 <View
   style={
     Array [
@@ -534,11 +534,11 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant default 1`] =
     ]
   }
   themeFocused={false}
-  themeVariant="default"
+  themeState="default"
 />
 `;
 
-exports[`StyledBorderBackDrop renders correctly with themeVariant disabled 1`] = `
+exports[`StyledBorderBackDrop renders correctly with themeState disabled 1`] = `
 <View
   style={
     Array [
@@ -556,11 +556,11 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant disabled 1`] =
     ]
   }
   themeFocused={false}
-  themeVariant="disabled"
+  themeState="disabled"
 />
 `;
 
-exports[`StyledBorderBackDrop renders correctly with themeVariant error 1`] = `
+exports[`StyledBorderBackDrop renders correctly with themeState error 1`] = `
 <View
   style={
     Array [
@@ -578,11 +578,11 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant error 1`] = `
     ]
   }
   themeFocused={false}
-  themeVariant="error"
+  themeState="error"
 />
 `;
 
-exports[`StyledBorderBackDrop renders correctly with themeVariant filled 1`] = `
+exports[`StyledBorderBackDrop renders correctly with themeState filled 1`] = `
 <View
   style={
     Array [
@@ -600,11 +600,11 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant filled 1`] = `
     ]
   }
   themeFocused={false}
-  themeVariant="filled"
+  themeState="filled"
 />
 `;
 
-exports[`StyledBorderBackDrop renders correctly with themeVariant readonly 1`] = `
+exports[`StyledBorderBackDrop renders correctly with themeState readonly 1`] = `
 <View
   style={
     Array [
@@ -622,7 +622,7 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant readonly 1`] =
     ]
   }
   themeFocused={false}
-  themeVariant="readonly"
+  themeState="readonly"
 />
 `;
 
@@ -709,7 +709,7 @@ exports[`StyledHelperText renders correctly 1`] = `
 </Text>
 `;
 
-exports[`StyledMaxLengthMessage renders correctly with themeVariant default 1`] = `
+exports[`StyledMaxLengthMessage renders correctly with themeState default 1`] = `
 <Text
   allowFontScaling={false}
   style={
@@ -738,14 +738,14 @@ exports[`StyledMaxLengthMessage renders correctly with themeVariant default 1`]
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeState="default"
   themeTypeface="neutral"
-  themeVariant="default"
 >
   100/255
 </Text>
 `;
 
-exports[`StyledMaxLengthMessage renders correctly with themeVariant disabled 1`] = `
+exports[`StyledMaxLengthMessage renders correctly with themeState disabled 1`] = `
 <Text
   allowFontScaling={false}
   style={
@@ -774,14 +774,14 @@ exports[`StyledMaxLengthMessage renders correctly with themeVariant disabled 1`]
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeState="disabled"
   themeTypeface="neutral"
-  themeVariant="disabled"
 >
   100/255
 </Text>
 `;
 
-exports[`StyledMaxLengthMessage renders correctly with themeVariant error 1`] = `
+exports[`StyledMaxLengthMessage renders correctly with themeState error 1`] = `
 <Text
   allowFontScaling={false}
   style={
@@ -810,14 +810,14 @@ exports[`StyledMaxLengthMessage renders correctly with themeVariant error 1`] =
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeState="error"
   themeTypeface="neutral"
-  themeVariant="error"
 >
   100/255
 </Text>
 `;
 
-exports[`StyledMaxLengthMessage renders correctly with themeVariant filled 1`] = `
+exports[`StyledMaxLengthMessage renders correctly with themeState filled 1`] = `
 <Text
   allowFontScaling={false}
   style={
@@ -846,14 +846,14 @@ exports[`StyledMaxLengthMessage renders correctly with themeVariant filled 1`] =
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeState="filled"
   themeTypeface="neutral"
-  themeVariant="filled"
 >
   100/255
 </Text>
 `;
 
-exports[`StyledMaxLengthMessage renders correctly with themeVariant readonly 1`] = `
+exports[`StyledMaxLengthMessage renders correctly with themeState readonly 1`] = `
 <Text
   allowFontScaling={false}
   style={
@@ -882,27 +882,53 @@ exports[`StyledMaxLengthMessage renders correctly with themeVariant readonly 1`]
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeState="readonly"
   themeTypeface="neutral"
-  themeVariant="readonly"
 >
   100/255
 </Text>
 `;
 
-exports[`StyledTextInput renders correctly 1`] = `
+exports[`StyledTextInput renders correctly with $themeState state 1`] = `
 <TextInput
   style={
     Array [
       Object {
         "alignSelf": "stretch",
         "flexGrow": 2,
-        "fontSize": 14,
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 16,
+        "height": undefined,
         "marginHorizontal": 8,
+        "maxHeight": 144,
         "paddingVertical": 0,
         "textAlignVertical": "center",
       },
       undefined,
     ]
   }
+  themeVariant="text"
+/>
+`;
+
+exports[`StyledTextInput renders correctly with $themeState state 2`] = `
+<TextInput
+  style={
+    Array [
+      Object {
+        "alignSelf": "stretch",
+        "flexGrow": 2,
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 16,
+        "height": 144,
+        "marginHorizontal": 8,
+        "maxHeight": 144,
+        "paddingVertical": 0,
+        "textAlignVertical": "top",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="textarea"
 />
 `;