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

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

@@ -1,17 +1,718 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Container renders correctly 1`] = `
+exports[`Label renders correctly with themeVariant default 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#292a2b",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="default"
+>
+  Label
+</Text>
+`;
+
+exports[`Label renders correctly with themeVariant disabled 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#ccced1",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="disabled"
+>
+  Label
+</Text>
+`;
+
+exports[`Label renders correctly with themeVariant error 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#292a2b",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="error"
+>
+  Label
+</Text>
+`;
+
+exports[`Label renders correctly with themeVariant filled 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#292a2b",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="filled"
+>
+  Label
+</Text>
+`;
+
+exports[`Label renders correctly with themeVariant focused 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#292a2b",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="focused"
+>
+  Label
+</Text>
+`;
+
+exports[`Label renders correctly with themeVariant readonly 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#8b8d92",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="readonly"
+>
+  Label
+</Text>
+`;
+
+exports[`LabelContainer renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ffffff",
+        "flexDirection": "row",
+        "left": 16,
+        "paddingHorizontal": 4,
+        "position": "absolute",
+        "top": -10,
+        "zIndex": 1,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`LabelInsideTextInput renders correctly with themeVariant default 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "alignContent": "center",
+          "alignItems": "center",
+          "color": "#292a2b",
+          "fontSize": 14,
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="default"
+>
+  Label
+</Text>
+`;
+
+exports[`LabelInsideTextInput renders correctly with themeVariant disabled 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "alignContent": "center",
+          "alignItems": "center",
+          "color": "#ccced1",
+          "fontSize": 14,
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="disabled"
+>
+  Label
+</Text>
+`;
+
+exports[`LabelInsideTextInput renders correctly with themeVariant error 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "alignContent": "center",
+          "alignItems": "center",
+          "color": "#292a2b",
+          "fontSize": 14,
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="error"
+>
+  Label
+</Text>
+`;
+
+exports[`LabelInsideTextInput renders correctly with themeVariant filled 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "alignContent": "center",
+          "alignItems": "center",
+          "color": "#292a2b",
+          "fontSize": 14,
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="filled"
+>
+  Label
+</Text>
+`;
+
+exports[`LabelInsideTextInput renders correctly with themeVariant focused 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "alignContent": "center",
+          "alignItems": "center",
+          "color": "#292a2b",
+          "fontSize": 14,
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="focused"
+>
+  Label
+</Text>
+`;
+
+exports[`LabelInsideTextInput renders correctly with themeVariant readonly 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "alignContent": "center",
+          "alignItems": "center",
+          "color": "#8b8d92",
+          "fontSize": 14,
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="readonly"
+>
+  Label
+</Text>
+`;
+
+exports[`StyledAsteriskLabel renders correctly with themeVariant default 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#de350b",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="default"
+>
+  *
+</Text>
+`;
+
+exports[`StyledAsteriskLabel renders correctly with themeVariant disabled 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#ccced1",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="disabled"
+>
+  *
+</Text>
+`;
+
+exports[`StyledAsteriskLabel renders correctly with themeVariant error 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#de350b",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="error"
+>
+  *
+</Text>
+`;
+
+exports[`StyledAsteriskLabel renders correctly with themeVariant filled 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#de350b",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="filled"
+>
+  *
+</Text>
+`;
+
+exports[`StyledAsteriskLabel renders correctly with themeVariant focused 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#de350b",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="focused"
+>
+  *
+</Text>
+`;
+
+exports[`StyledAsteriskLabel renders correctly with themeVariant readonly 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "color": "#8b8d92",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="readonly"
+>
+  *
+</Text>
+`;
+
+exports[`StyledBorderBackDrop renders correctly with themeVariant default 1`] = `
 <View
   style={
     Array [
       Object {
-        "alignItems": "center",
+        "borderColor": "#292a2b",
+        "borderRadius": 8,
+        "borderWidth": 1,
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+      undefined,
+    ]
+  }
+  themeVariant="default"
+/>
+`;
+
+exports[`StyledBorderBackDrop renders correctly with themeVariant disabled 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderColor": "#ccced1",
+        "borderRadius": 8,
+        "borderWidth": 1,
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+      undefined,
+    ]
+  }
+  themeVariant="disabled"
+/>
+`;
+
+exports[`StyledBorderBackDrop renders correctly with themeVariant error 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderColor": "#de350b",
+        "borderRadius": 8,
+        "borderWidth": 1,
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+      undefined,
+    ]
+  }
+  themeVariant="error"
+/>
+`;
+
+exports[`StyledBorderBackDrop renders correctly with themeVariant filled 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderColor": "#292a2b",
+        "borderRadius": 8,
+        "borderWidth": 1,
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+      undefined,
+    ]
+  }
+  themeVariant="filled"
+/>
+`;
+
+exports[`StyledBorderBackDrop renders correctly with themeVariant focused 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderColor": "#292a2b",
+        "borderRadius": 8,
+        "borderWidth": 2,
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+      undefined,
+    ]
+  }
+  themeVariant="focused"
+/>
+`;
+
+exports[`StyledBorderBackDrop renders correctly with themeVariant readonly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderColor": "#8b8d92",
         "borderRadius": 8,
         "borderWidth": 1,
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+      undefined,
+    ]
+  }
+  themeVariant="readonly"
+/>
+`;
+
+exports[`StyledErrorMessage renders correctly 1`] = `
+<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,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+>
+  must not exceed character limit
+</Text>
+`;
+
+exports[`StyledErrorMessageContainer renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flex": 1,
         "flexDirection": "row",
-        "padding": 16,
-        "position": "relative",
-        "width": "100%",
+        "flexGrow": 4,
+        "marginLeft": 16,
+        "marginRight": 4,
       },
       undefined,
     ]
@@ -19,7 +720,7 @@ exports[`Container renders correctly 1`] = `
 />
 `;
 
-exports[`Label renders correctly 1`] = `
+exports[`StyledHelperText renders correctly 1`] = `
 <Text
   style={
     Array [
@@ -32,12 +733,12 @@ exports[`Label renders correctly 1`] = `
       },
       Array [
         Object {
-          "backgroundColor": "#ffffff",
-          "left": 16,
-          "paddingHorizontal": 4,
-          "position": "absolute",
-          "top": -10,
-          "zIndex": 1,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 24,
+          "lineHeight": 32,
+          "marginBottom": 24,
+          "marginRight": 24,
+          "textAlign": "right",
         },
         undefined,
       ],
@@ -47,7 +748,211 @@ exports[`Label renders correctly 1`] = `
   themeFontWeight="regular"
   themeIntent="body"
 >
-  Label
+  helper text
+</Text>
+`;
+
+exports[`StyledMaxLengthMessage renders correctly with themeVariant default 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "alignSelf": "flex-end",
+          "color": "#292a2b",
+          "flex": 1,
+          "flexGrow": 1,
+          "fontSize": 12,
+          "marginRight": 4,
+          "textAlign": "right",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="default"
+>
+  100/255
+</Text>
+`;
+
+exports[`StyledMaxLengthMessage renders correctly with themeVariant disabled 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "alignSelf": "flex-end",
+          "color": "#ccced1",
+          "flex": 1,
+          "flexGrow": 1,
+          "fontSize": 12,
+          "marginRight": 4,
+          "textAlign": "right",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="disabled"
+>
+  100/255
+</Text>
+`;
+
+exports[`StyledMaxLengthMessage renders correctly with themeVariant error 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "alignSelf": "flex-end",
+          "color": "#de350b",
+          "flex": 1,
+          "flexGrow": 1,
+          "fontSize": 12,
+          "marginRight": 4,
+          "textAlign": "right",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="error"
+>
+  100/255
+</Text>
+`;
+
+exports[`StyledMaxLengthMessage renders correctly with themeVariant filled 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "alignSelf": "flex-end",
+          "color": "#292a2b",
+          "flex": 1,
+          "flexGrow": 1,
+          "fontSize": 12,
+          "marginRight": 4,
+          "textAlign": "right",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="filled"
+>
+  100/255
+</Text>
+`;
+
+exports[`StyledMaxLengthMessage renders correctly with themeVariant focused 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "alignSelf": "flex-end",
+          "color": "#292a2b",
+          "flex": 1,
+          "flexGrow": 1,
+          "fontSize": 12,
+          "marginRight": 4,
+          "textAlign": "right",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="focused"
+>
+  100/255
+</Text>
+`;
+
+exports[`StyledMaxLengthMessage renders correctly with themeVariant readonly 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "alignSelf": "flex-end",
+          "color": "#8b8d92",
+          "flex": 1,
+          "flexGrow": 1,
+          "fontSize": 12,
+          "marginRight": 4,
+          "textAlign": "right",
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+  themeVariant="readonly"
+>
+  100/255
 </Text>
 `;
 
@@ -56,9 +961,11 @@ exports[`StyledTextInput renders correctly 1`] = `
   style={
     Array [
       Object {
-        "flex": 1,
-        "fontSize": 16,
+        "alignSelf": "stretch",
+        "flexGrow": 2,
+        "fontSize": 14,
         "marginHorizontal": 8,
+        "textAlignVertical": "center",
       },
       undefined,
     ]