@hero-design/rn 7.10.1 → 7.10.2

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

@@ -1,5 +1,512 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
+<View
+  pointerEvents="auto"
+  style={
+    Array [
+      Object {
+        "marginVertical": 8,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#292a2b",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="filled"
+    />
+    <View
+      pointerEvents="none"
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "flexDirection": "row",
+            "left": 16,
+            "paddingHorizontal": 4,
+            "position": "absolute",
+            "top": -10,
+            "zIndex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
+              "letterSpacing": 0.36,
+              "lineHeight": 20,
+            },
+            Array [
+              Object {
+                "color": "#de350b",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeFontSize="small"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeVariant="filled"
+      >
+        *
+      </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
+              "letterSpacing": 0.36,
+              "lineHeight": 20,
+            },
+            Array [
+              Object {
+                "color": "#292a2b",
+              },
+              undefined,
+            ],
+          ]
+        }
+        testID="input-label"
+        themeFontSize="small"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeVariant="filled"
+      >
+        Amount (AUD)
+      </Text>
+    </View>
+    <HeroIcon
+      name="dollar-sign"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 16,
+          },
+          undefined,
+        ]
+      }
+      testID="input-prefix"
+      themeIntent="text"
+      themeSize="xsmall"
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "alignSelf": "stretch",
+            "flexDirection": "row",
+            "flexGrow": 2,
+          },
+          undefined,
+        ]
+      }
+    >
+      <TextInput
+        accessibilityState={
+          Object {
+            "disabled": false,
+          }
+        }
+        defaultValue="1000"
+        editable={true}
+        maxLength={255}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        style={
+          Array [
+            Object {
+              "alignSelf": "stretch",
+              "flexGrow": 2,
+              "fontSize": 14,
+              "marginHorizontal": 8,
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#292a2b",
+            },
+          ]
+        }
+        testID="text-input"
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "paddingLeft": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
+              "letterSpacing": 0.36,
+              "lineHeight": 20,
+            },
+            Array [
+              Object {
+                "alignSelf": "flex-end",
+                "color": "#292a2b",
+                "flex": 1,
+                "flexGrow": 1,
+                "fontSize": 12,
+                "marginRight": 4,
+                "textAlign": "right",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeFontSize="small"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeVariant="filled"
+      >
+        4
+        /
+        255
+      </Text>
+    </View>
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          Array [
+            Object {
+              "fontSize": 12,
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      This is helper text
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`TextInput defaultValue default Value and Value renders correctly with 2000 1`] = `
+<View
+  pointerEvents="auto"
+  style={
+    Array [
+      Object {
+        "marginVertical": 8,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#292a2b",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="filled"
+    />
+    <View
+      pointerEvents="none"
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "flexDirection": "row",
+            "left": 16,
+            "paddingHorizontal": 4,
+            "position": "absolute",
+            "top": -10,
+            "zIndex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
+              "letterSpacing": 0.36,
+              "lineHeight": 20,
+            },
+            Array [
+              Object {
+                "color": "#de350b",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeFontSize="small"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeVariant="filled"
+      >
+        *
+      </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
+              "letterSpacing": 0.36,
+              "lineHeight": 20,
+            },
+            Array [
+              Object {
+                "color": "#292a2b",
+              },
+              undefined,
+            ],
+          ]
+        }
+        testID="input-label"
+        themeFontSize="small"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeVariant="filled"
+      >
+        Amount (AUD)
+      </Text>
+    </View>
+    <HeroIcon
+      name="dollar-sign"
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 16,
+          },
+          undefined,
+        ]
+      }
+      testID="input-prefix"
+      themeIntent="text"
+      themeSize="xsmall"
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "alignSelf": "stretch",
+            "flexDirection": "row",
+            "flexGrow": 2,
+          },
+          undefined,
+        ]
+      }
+    >
+      <TextInput
+        accessibilityState={
+          Object {
+            "disabled": false,
+          }
+        }
+        defaultValue="1000"
+        editable={true}
+        maxLength={255}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        style={
+          Array [
+            Object {
+              "alignSelf": "stretch",
+              "flexGrow": 2,
+              "fontSize": 14,
+              "marginHorizontal": 8,
+              "textAlignVertical": "center",
+            },
+            Object {
+              "color": "#292a2b",
+            },
+          ]
+        }
+        testID="text-input"
+        value="2000"
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "paddingLeft": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
+              "letterSpacing": 0.36,
+              "lineHeight": 20,
+            },
+            Array [
+              Object {
+                "alignSelf": "flex-end",
+                "color": "#292a2b",
+                "flex": 1,
+                "flexGrow": 1,
+                "fontSize": 12,
+                "marginRight": 4,
+                "textAlign": "right",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeFontSize="small"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeVariant="filled"
+      >
+        4
+        /
+        255
+      </Text>
+    </View>
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          Array [
+            Object {
+              "fontSize": 12,
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      This is helper text
+    </Text>
+  </View>
+</View>
+`;
+
 exports[`TextInput disabled renders correctly 1`] = `
 <View
   pointerEvents="none"
@@ -159,14 +666,24 @@ exports[`TextInput disabled renders correctly 1`] = `
     style={
       Array [
         Object {
-          "flex": 1,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
+          "paddingLeft": 16,
         },
         undefined,
       ]
     }
-  />
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          undefined,
+        ]
+      }
+    />
+  </View>
 </View>
 `;
 
@@ -341,7 +858,6 @@ exports[`TextInput error renders correctly 1`] = `
           ]
         }
         testID="text-input"
-        value=""
       />
     </View>
   </View>
@@ -349,9 +865,7 @@ exports[`TextInput error renders correctly 1`] = `
     style={
       Array [
         Object {
-          "flex": 1,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
+          "paddingLeft": 16,
         },
         undefined,
       ]
@@ -361,59 +875,70 @@ exports[`TextInput error renders correctly 1`] = `
       style={
         Array [
           Object {
-            "alignItems": "center",
-            "flex": 1,
             "flexDirection": "row",
-            "flexGrow": 4,
-            "marginLeft": 16,
-            "marginRight": 4,
+            "justifyContent": "space-between",
           },
           undefined,
         ]
       }
     >
-      <HeroIcon
-        name="circle-info"
+      <View
         style={
           Array [
             Object {
-              "color": "#de350b",
-              "fontSize": 16,
+              "alignItems": "center",
+              "flex": 1,
+              "flexDirection": "row",
+              "flexGrow": 4,
+              "marginRight": 4,
             },
             undefined,
           ]
         }
-        testID="input-error-icon"
-        themeIntent="danger"
-        themeSize="xsmall"
-      />
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "#292a2b",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.42,
-              "lineHeight": 22,
-            },
+      >
+        <HeroIcon
+          name="circle-info"
+          style={
             Array [
               Object {
                 "color": "#de350b",
-                "fontSize": 12,
-                "marginLeft": 4,
+                "fontSize": 16,
               },
               undefined,
-            ],
-          ]
-        }
-        testID="input-error-message"
-        themeFontSize="medium"
-        themeFontWeight="regular"
-        themeIntent="body"
-      >
-        This field is required
-      </Text>
+            ]
+          }
+          testID="input-error-icon"
+          themeIntent="danger"
+          themeSize="xsmall"
+        />
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.42,
+                "lineHeight": 22,
+              },
+              Array [
+                Object {
+                  "color": "#de350b",
+                  "fontSize": 12,
+                  "marginLeft": 4,
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="input-error-message"
+          themeFontSize="medium"
+          themeFontWeight="regular"
+          themeIntent="body"
+        >
+          This field is required
+        </Text>
+      </View>
     </View>
   </View>
 </View>
@@ -582,14 +1107,24 @@ exports[`TextInput filled renders correctly 1`] = `
     style={
       Array [
         Object {
-          "flex": 1,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
+          "paddingLeft": 16,
         },
         undefined,
       ]
     }
-  />
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          undefined,
+        ]
+      }
+    />
+  </View>
 </View>
 `;
 
@@ -764,7 +1299,6 @@ exports[`TextInput helper text renders correctly 1`] = `
           ]
         }
         testID="text-input"
-        value=""
       />
     </View>
   </View>
@@ -772,14 +1306,23 @@ exports[`TextInput helper text renders correctly 1`] = `
     style={
       Array [
         Object {
-          "flex": 1,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
+          "paddingLeft": 16,
         },
         undefined,
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          undefined,
+        ]
+      }
+    />
     <Text
       style={
         Array [
@@ -793,7 +1336,6 @@ exports[`TextInput helper text renders correctly 1`] = `
           Array [
             Object {
               "fontSize": 12,
-              "marginLeft": 4,
             },
             undefined,
           ],
@@ -955,7 +1497,6 @@ exports[`TextInput idle renders correctly 1`] = `
           ]
         }
         testID="text-input"
-        value=""
       />
     </View>
     <HeroIcon
@@ -978,14 +1519,24 @@ exports[`TextInput idle renders correctly 1`] = `
     style={
       Array [
         Object {
-          "flex": 1,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
+          "paddingLeft": 16,
         },
         undefined,
       ]
     }
-  />
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          undefined,
+        ]
+      }
+    />
+  </View>
 </View>
 `;
 
@@ -1160,7 +1711,6 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
           ]
         }
         testID="text-input"
-        value=""
       />
     </View>
     <HeroIcon
@@ -1183,14 +1733,24 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
     style={
       Array [
         Object {
-          "flex": 1,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
+          "paddingLeft": 16,
         },
         undefined,
       ]
     }
-  />
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          undefined,
+        ]
+      }
+    />
+  </View>
 </View>
 `;
 
@@ -1354,9 +1914,7 @@ exports[`TextInput max length renders correctly 1`] = `
     style={
       Array [
         Object {
-          "flex": 1,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
+          "paddingLeft": 16,
         },
         undefined,
       ]
@@ -1366,93 +1924,104 @@ exports[`TextInput max length renders correctly 1`] = `
       style={
         Array [
           Object {
-            "alignItems": "center",
-            "flex": 1,
             "flexDirection": "row",
-            "flexGrow": 4,
-            "marginLeft": 16,
-            "marginRight": 4,
+            "justifyContent": "space-between",
           },
           undefined,
         ]
       }
     >
-      <HeroIcon
-        name="circle-info"
+      <View
         style={
           Array [
             Object {
-              "color": "#de350b",
-              "fontSize": 16,
+              "alignItems": "center",
+              "flex": 1,
+              "flexDirection": "row",
+              "flexGrow": 4,
+              "marginRight": 4,
             },
             undefined,
           ]
         }
-        testID="input-error-icon"
-        themeIntent="danger"
-        themeSize="xsmall"
-      />
+      >
+        <HeroIcon
+          name="circle-info"
+          style={
+            Array [
+              Object {
+                "color": "#de350b",
+                "fontSize": 16,
+              },
+              undefined,
+            ]
+          }
+          testID="input-error-icon"
+          themeIntent="danger"
+          themeSize="xsmall"
+        />
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.42,
+                "lineHeight": 22,
+              },
+              Array [
+                Object {
+                  "color": "#de350b",
+                  "fontSize": 12,
+                  "marginLeft": 4,
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="input-error-message"
+          themeFontSize="medium"
+          themeFontWeight="regular"
+          themeIntent="body"
+        >
+          must not exceed character limit
+        </Text>
+      </View>
       <Text
         style={
           Array [
             Object {
               "color": "#292a2b",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.42,
-              "lineHeight": 22,
+              "fontSize": 12,
+              "letterSpacing": 0.36,
+              "lineHeight": 20,
             },
             Array [
               Object {
+                "alignSelf": "flex-end",
                 "color": "#de350b",
+                "flex": 1,
+                "flexGrow": 1,
                 "fontSize": 12,
-                "marginLeft": 4,
+                "marginRight": 4,
+                "textAlign": "right",
               },
               undefined,
             ],
           ]
         }
-        testID="input-error-message"
-        themeFontSize="medium"
+        themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeVariant="error"
       >
-        must not exceed character limit
+        18
+        /
+        255
       </Text>
     </View>
-    <Text
-      style={
-        Array [
-          Object {
-            "color": "#292a2b",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 12,
-            "letterSpacing": 0.36,
-            "lineHeight": 20,
-          },
-          Array [
-            Object {
-              "alignSelf": "flex-end",
-              "color": "#de350b",
-              "flex": 1,
-              "flexGrow": 1,
-              "fontSize": 12,
-              "marginRight": 4,
-              "textAlign": "right",
-            },
-            undefined,
-          ],
-        ]
-      }
-      themeFontSize="small"
-      themeFontWeight="regular"
-      themeIntent="body"
-      themeVariant="error"
-    >
-      18
-      /
-      255
-    </Text>
   </View>
 </View>
 `;
@@ -1628,7 +2197,6 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
           ]
         }
         testID="text-input"
-        value=""
       />
     </View>
   </View>
@@ -1636,14 +2204,23 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
     style={
       Array [
         Object {
-          "flex": 1,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
+          "paddingLeft": 16,
         },
         undefined,
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          undefined,
+        ]
+      }
+    />
     <Text
       style={
         Array [
@@ -1657,7 +2234,6 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
           Array [
             Object {
               "fontSize": 12,
-              "marginLeft": 4,
             },
             undefined,
           ],
@@ -1861,14 +2437,24 @@ exports[`TextInput readonly renders correctly 1`] = `
     style={
       Array [
         Object {
-          "flex": 1,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
+          "paddingLeft": 16,
         },
         undefined,
       ]
     }
-  />
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          undefined,
+        ]
+      }
+    />
+  </View>
 </View>
 `;
 
@@ -2043,7 +2629,6 @@ exports[`TextInput required renders correctly 1`] = `
           ]
         }
         testID="text-input"
-        value=""
       />
     </View>
     <HeroIcon
@@ -2066,13 +2651,23 @@ exports[`TextInput required renders correctly 1`] = `
     style={
       Array [
         Object {
-          "flex": 1,
-          "flexDirection": "row",
-          "justifyContent": "space-between",
+          "paddingLeft": 16,
         },
         undefined,
       ]
     }
-  />
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          undefined,
+        ]
+      }
+    />
+  </View>
 </View>
 `;