@aws-amplify/ui-react-native 1.2.20 → 1.2.22

package/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx

@@ -9,7 +9,7 @@ import {
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
-import { DefaultConfirmSignUpComponent } from '../types';
+import { DefaultConfirmSignUpProps } from '../types';
 
 const COMPONENT_NAME = 'ConfirmSignUp';
 
@@ -21,7 +21,7 @@ const {
   getResendCodeText,
 } = authenticatorTextUtil;
 
-const ConfirmSignUp: DefaultConfirmSignUpComponent = ({
+const ConfirmSignUp = ({
   codeDeliveryDetails,
   fields,
   handleBlur,
@@ -29,11 +29,13 @@ const ConfirmSignUp: DefaultConfirmSignUpComponent = ({
   handleSubmit,
   isPending,
   resendCode,
+  validationErrors,
   ...rest
-}) => {
+}: DefaultConfirmSignUpProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
@@ -41,6 +43,7 @@ const ConfirmSignUp: DefaultConfirmSignUpComponent = ({
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getDeliveryMethodText(codeDeliveryDetails);
@@ -74,6 +77,7 @@ const ConfirmSignUp: DefaultConfirmSignUpComponent = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

package/src/Authenticator/Defaults/ConfirmSignUp/__tests__/ConfirmSignUp.spec.tsx

@@ -16,6 +16,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   Header: ConfirmSignUp.Header,
   isPending: false,
   resendCode: jest.fn(),

package/src/Authenticator/Defaults/ConfirmSignUp/__tests__/__snapshots__/ConfirmSignUp.spec.tsx.snap

@@ -11,7 +11,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -28,9 +28,9 @@ Array [
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -82,8 +82,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }
@@ -168,7 +167,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -185,9 +184,9 @@ Array [
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -239,8 +238,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }
@@ -325,7 +323,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -342,9 +340,9 @@ Array [
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -455,8 +453,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }

package/src/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.tsx

@@ -9,7 +9,7 @@ import {
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
-import { DefaultConfirmVerifyUserComponent } from '../types';
+import { DefaultConfirmVerifyUserProps } from '../types';
 
 const COMPONENT_NAME = 'ConfirmVerifyUser';
 
@@ -20,18 +20,20 @@ const {
   getSubmittingText,
 } = authenticatorTextUtil;
 
-const ConfirmVerifyUser: DefaultConfirmVerifyUserComponent = ({
+const ConfirmVerifyUser = ({
   fields,
   handleBlur,
   handleChange,
   handleSubmit,
   isPending,
   skipVerification,
+  validationErrors,
   ...rest
-}) => {
+}: DefaultConfirmVerifyUserProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
@@ -39,6 +41,7 @@ const ConfirmVerifyUser: DefaultConfirmVerifyUserComponent = ({
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getAccountRecoveryInfoText();
@@ -70,6 +73,7 @@ const ConfirmVerifyUser: DefaultConfirmVerifyUserComponent = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

package/src/Authenticator/Defaults/ConfirmVerifyUser/__tests__/ConfirmVerifyUser.spec.tsx

@@ -18,6 +18,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   Header: ConfirmVerifyUser.Header,
   isPending: false,
   skipVerification: jest.fn(),

package/src/Authenticator/Defaults/ConfirmVerifyUser/__tests__/__snapshots__/ConfirmVerifyUser.spec.tsx.snap

@@ -11,7 +11,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -61,8 +61,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }
@@ -156,7 +155,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -206,8 +205,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }
@@ -301,7 +299,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -410,8 +408,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }

package/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx

@@ -9,14 +9,14 @@ import {
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
-import { DefaultForceNewPasswordComponent } from '../types';
+import { DefaultForceNewPasswordProps } from '../types';
 
 const COMPONENT_NAME = 'ForceNewPassword';
 
 const { getChangePasswordText, getChangingText, getBackToSignInText } =
   authenticatorTextUtil;
 
-const ForceNewPassword: DefaultForceNewPasswordComponent = ({
+const ForceNewPassword = ({
   fields,
   handleBlur,
   handleChange,
@@ -24,11 +24,13 @@ const ForceNewPassword: DefaultForceNewPasswordComponent = ({
   hasValidationErrors,
   isPending,
   toSignIn,
+  validationErrors,
   ...rest
-}) => {
+}: DefaultForceNewPasswordProps): JSX.Element => {
   const {
     disableFormSubmit,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
@@ -36,6 +38,7 @@ const ForceNewPassword: DefaultForceNewPasswordComponent = ({
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const disabled = hasValidationErrors || disableFormSubmit;
@@ -70,6 +73,7 @@ const ForceNewPassword: DefaultForceNewPasswordComponent = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

package/src/Authenticator/Defaults/ForceNewPassword/__tests__/__snapshots__/ForceNewPassword.spec.tsx.snap

@@ -11,7 +11,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -35,6 +35,7 @@ Array [
         Array [
           Object {
             "alignItems": "flex-start",
+            "marginBottom": 8,
           },
           Array [
             Object {},
@@ -79,6 +80,7 @@ Array [
                 "color": "hsl(210, 50%, 10%)",
                 "flexGrow": 1,
                 "fontSize": 16,
+                "paddingHorizontal": 4,
                 "paddingVertical": 12,
               },
               Object {},
@@ -242,8 +244,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }
@@ -337,7 +338,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -361,6 +362,7 @@ Array [
         Array [
           Object {
             "alignItems": "flex-start",
+            "marginBottom": 8,
           },
           Array [
             Object {},
@@ -405,6 +407,7 @@ Array [
                 "color": "hsl(210, 50%, 10%)",
                 "flexGrow": 1,
                 "fontSize": 16,
+                "paddingHorizontal": 4,
                 "paddingVertical": 12,
               },
               Object {},
@@ -509,8 +512,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }
@@ -604,7 +606,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -628,6 +630,7 @@ Array [
         Array [
           Object {
             "alignItems": "flex-start",
+            "marginBottom": 8,
           },
           Array [
             Object {},
@@ -644,7 +647,7 @@ Array [
         style={
           Object {
             "alignItems": "center",
-            "borderColor": "hsl(210, 10%, 58%)",
+            "borderColor": "hsl(0, 95%, 30%)",
             "borderRadius": 4,
             "borderWidth": 1,
             "flexDirection": "row",
@@ -673,6 +676,7 @@ Array [
                 "color": "hsl(210, 50%, 10%)",
                 "flexGrow": 1,
                 "fontSize": 16,
+                "paddingHorizontal": 4,
                 "paddingVertical": 12,
               },
               Object {},
@@ -808,8 +812,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }

package/src/Authenticator/Defaults/ResetPassword/ResetPassword.tsx

@@ -9,7 +9,7 @@ import {
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
-import { DefaultResetPasswordComponent } from '../types';
+import { DefaultResetPasswordProps } from '../types';
 
 const COMPONENT_NAME = 'ResetPassword';
 const {
@@ -19,18 +19,20 @@ const {
   getBackToSignInText,
 } = authenticatorTextUtil;
 
-const ResetPassword: DefaultResetPasswordComponent = ({
+const ResetPassword = ({
   fields,
   handleBlur,
   handleChange,
   handleSubmit,
   isPending,
   toSignIn,
+  validationErrors,
   ...rest
-}) => {
+}: DefaultResetPasswordProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
@@ -38,6 +40,7 @@ const ResetPassword: DefaultResetPasswordComponent = ({
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getResetYourPasswordText();
@@ -69,6 +72,7 @@ const ResetPassword: DefaultResetPasswordComponent = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

package/src/Authenticator/Defaults/ResetPassword/__tests__/ResetPassword.spec.tsx

@@ -21,6 +21,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   Header: ResetPassword.Header,
   isPending: false,
   toSignIn: jest.fn(),

package/src/Authenticator/Defaults/ResetPassword/__tests__/__snapshots__/ResetPassword.spec.tsx.snap

@@ -11,7 +11,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -35,6 +35,7 @@ Array [
         Array [
           Object {
             "alignItems": "flex-start",
+            "marginBottom": 8,
           },
           Object {
             "paddingHorizontal": 12,
@@ -49,9 +50,9 @@ Array [
         style={
           Array [
             Object {
-              "fontSize": 14,
+              "fontSize": 16,
               "fontWeight": "400",
-              "lineHeight": 21,
+              "lineHeight": 24,
             },
             Object {
               "color": "hsl(210, 50%, 10%)",
@@ -59,8 +60,7 @@ Array [
             Array [
               Object {
                 "color": "hsl(210, 25%, 25%)",
-                "lineHeight": 21,
-                "padding": 4,
+                "paddingVertical": 8,
               },
               undefined,
             ],
@@ -102,6 +102,7 @@ Array [
                 "color": "hsl(210, 50%, 10%)",
                 "flexGrow": 1,
                 "fontSize": 16,
+                "paddingHorizontal": 4,
                 "paddingVertical": 12,
               },
               Object {},
@@ -201,8 +202,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }
@@ -296,7 +296,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -320,6 +320,7 @@ Array [
         Array [
           Object {
             "alignItems": "flex-start",
+            "marginBottom": 8,
           },
           Object {
             "paddingHorizontal": 12,
@@ -334,9 +335,9 @@ Array [
         style={
           Array [
             Object {
-              "fontSize": 14,
+              "fontSize": 16,
               "fontWeight": "400",
-              "lineHeight": 21,
+              "lineHeight": 24,
             },
             Object {
               "color": "hsl(210, 50%, 10%)",
@@ -344,8 +345,7 @@ Array [
             Array [
               Object {
                 "color": "hsl(210, 25%, 25%)",
-                "lineHeight": 21,
-                "padding": 4,
+                "paddingVertical": 8,
               },
               undefined,
             ],
@@ -387,6 +387,7 @@ Array [
                 "color": "hsl(210, 50%, 10%)",
                 "flexGrow": 1,
                 "fontSize": 16,
+                "paddingHorizontal": 4,
                 "paddingVertical": 12,
               },
               Object {},
@@ -427,8 +428,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }

package/src/Authenticator/Defaults/SetupTOTP/SetupTOTP.tsx

@@ -12,7 +12,7 @@ import {
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
-import { DefaultSetupTOTPComponent } from '../types';
+import { DefaultSetupTOTPProps } from '../types';
 import { styles } from './styles';
 
 const COMPONENT_NAME = 'SetupTOTP';
@@ -25,7 +25,7 @@ const {
   getSetupTOTPInstructionsText,
 } = authenticatorTextUtil;
 
-const SetupTOTP: DefaultSetupTOTPComponent = ({
+const SetupTOTP = ({
   fields,
   handleBlur,
   handleChange,
@@ -33,11 +33,13 @@ const SetupTOTP: DefaultSetupTOTPComponent = ({
   isPending,
   toSignIn,
   totpSecretCode,
+  validationErrors,
   ...rest
-}) => {
+}: DefaultSetupTOTPProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
@@ -45,6 +47,7 @@ const SetupTOTP: DefaultSetupTOTPComponent = ({
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getSetupTOTPText();
@@ -88,6 +91,7 @@ const SetupTOTP: DefaultSetupTOTPComponent = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

package/src/Authenticator/Defaults/SetupTOTP/__tests__/SetupTOTP.spec.tsx

@@ -22,6 +22,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   isPending: false,
   toSignIn,
   totpSecretCode: "Let's keep it hush hush",