@aws-amplify/ui-react-native 1.0.0 → 1.1.0

package/src/primitives/PasswordField/__tests__/__snapshots__/PasswordField.spec.tsx.snap

@@ -0,0 +1,629 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PasswordField applies theme and style props 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "flex-start",
+      },
+      Array [
+        Object {},
+        Object {
+          "backgroundColor": "red",
+        },
+      ],
+    ]
+  }
+  testID="amplify__text-field-container"
+>
+  <Text
+    accessibilityLabel="Label"
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Array [
+          Object {
+            "color": "hsl(210, 25%, 25%)",
+            "lineHeight": 21,
+            "padding": 4,
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    Label
+  </Text>
+  <View
+    accessible={true}
+    style={
+      Object {
+        "alignItems": "center",
+        "borderColor": "hsl(210, 8%, 55%)",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "paddingHorizontal": 8,
+      }
+    }
+    testID="amplify__text-field__input-container"
+  >
+    <TextInput
+      accessibilityState={
+        Object {
+          "disabled": undefined,
+        }
+      }
+      accessible={true}
+      autoCapitalize="none"
+      editable={true}
+      placeholderTextColor="hsl(210, 10%, 40%)"
+      secureTextEntry={true}
+      selectionColor="hsl(210, 50%, 10%)"
+      style={
+        Array [
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+            "flexGrow": 1,
+            "fontSize": 16,
+            "paddingVertical": 12,
+          },
+          undefined,
+        ]
+      }
+      testID="passwordInput"
+    />
+    <View
+      accessibilityLabel="Show password"
+      accessibilityRole="button"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {},
+          null,
+          null,
+          undefined,
+        ]
+      }
+    >
+      <Image
+        accessibilityRole="image"
+        source={
+          Object {
+            "testUri": "../../../src/assets/icons/visibilityOff.png",
+          }
+        }
+        style={
+          Array [
+            Object {
+              "height": 16,
+              "resizeMode": "contain",
+              "tintColor": undefined,
+              "width": 16,
+            },
+            Array [
+              Object {
+                "tintColor": "hsl(210, 10%, 40%)",
+              },
+              Object {
+                "backgroundColor": "blue",
+              },
+            ],
+          ]
+        }
+      />
+    </View>
+  </View>
+</View>
+`;
+
+exports[`PasswordField renders as expected 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "flex-start",
+      },
+      Array [
+        Object {},
+        undefined,
+      ],
+    ]
+  }
+  testID="amplify__text-field-container"
+>
+  <Text
+    accessibilityLabel="Label"
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Array [
+          Object {
+            "color": "hsl(210, 25%, 25%)",
+            "lineHeight": 21,
+            "padding": 4,
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    Label
+  </Text>
+  <View
+    accessible={true}
+    style={
+      Object {
+        "alignItems": "center",
+        "borderColor": "hsl(210, 8%, 55%)",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "paddingHorizontal": 8,
+      }
+    }
+    testID="amplify__text-field__input-container"
+  >
+    <TextInput
+      accessibilityState={
+        Object {
+          "disabled": undefined,
+        }
+      }
+      accessible={true}
+      autoCapitalize="none"
+      editable={true}
+      placeholderTextColor="hsl(210, 10%, 40%)"
+      secureTextEntry={true}
+      selectionColor="hsl(210, 50%, 10%)"
+      style={
+        Array [
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+            "flexGrow": 1,
+            "fontSize": 16,
+            "paddingVertical": 12,
+          },
+          undefined,
+        ]
+      }
+      testID="passwordInput"
+    />
+    <View
+      accessibilityLabel="Show password"
+      accessibilityRole="button"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {},
+          null,
+          null,
+          undefined,
+        ]
+      }
+    >
+      <Image
+        accessibilityRole="image"
+        source={
+          Object {
+            "testUri": "../../../src/assets/icons/visibilityOff.png",
+          }
+        }
+        style={
+          Array [
+            Object {
+              "height": 16,
+              "resizeMode": "contain",
+              "tintColor": undefined,
+              "width": 16,
+            },
+            Array [
+              Object {
+                "tintColor": "hsl(210, 10%, 40%)",
+              },
+              undefined,
+            ],
+          ]
+        }
+      />
+    </View>
+  </View>
+</View>
+`;
+
+exports[`PasswordField renders as expected when disabled 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "flex-start",
+      },
+      Array [
+        Object {},
+        undefined,
+      ],
+    ]
+  }
+  testID="amplify__text-field-container"
+>
+  <Text
+    accessibilityLabel="Label"
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Array [
+          Object {
+            "color": "hsl(210, 25%, 25%)",
+            "lineHeight": 21,
+            "padding": 4,
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    Label
+  </Text>
+  <View
+    accessible={true}
+    style={
+      Object {
+        "alignItems": "center",
+        "borderColor": "hsl(210, 8%, 55%)",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "opacity": 0.6,
+        "paddingHorizontal": 8,
+      }
+    }
+    testID="amplify__text-field__input-container"
+  >
+    <TextInput
+      accessibilityState={
+        Object {
+          "disabled": true,
+        }
+      }
+      accessible={true}
+      autoCapitalize="none"
+      editable={false}
+      placeholderTextColor="hsl(210, 10%, 40%)"
+      secureTextEntry={true}
+      selectionColor="hsl(210, 50%, 10%)"
+      style={
+        Array [
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+            "flexGrow": 1,
+            "fontSize": 16,
+            "paddingVertical": 12,
+          },
+          undefined,
+        ]
+      }
+      testID="passwordInput"
+    />
+    <View
+      accessibilityLabel="Show password"
+      accessibilityRole="button"
+      accessibilityState={
+        Object {
+          "disabled": true,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {},
+          Object {
+            "opacity": 0.6,
+          },
+          null,
+          undefined,
+        ]
+      }
+    >
+      <Image
+        accessibilityRole="image"
+        source={
+          Object {
+            "testUri": "../../../src/assets/icons/visibilityOff.png",
+          }
+        }
+        style={
+          Array [
+            Object {
+              "height": 16,
+              "resizeMode": "contain",
+              "tintColor": undefined,
+              "width": 16,
+            },
+            Array [
+              Object {
+                "tintColor": "hsl(210, 10%, 40%)",
+              },
+              undefined,
+            ],
+          ]
+        }
+      />
+    </View>
+  </View>
+</View>
+`;
+
+exports[`PasswordField should be able to hide show password icon 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "flex-start",
+      },
+      Array [
+        Object {},
+        undefined,
+      ],
+    ]
+  }
+  testID="amplify__text-field-container"
+>
+  <Text
+    accessibilityLabel="Label"
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Array [
+          Object {
+            "color": "hsl(210, 25%, 25%)",
+            "lineHeight": 21,
+            "padding": 4,
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    Label
+  </Text>
+  <View
+    accessible={true}
+    style={
+      Object {
+        "alignItems": "center",
+        "borderColor": "hsl(210, 8%, 55%)",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "paddingHorizontal": 8,
+      }
+    }
+    testID="amplify__text-field__input-container"
+  >
+    <TextInput
+      accessibilityState={
+        Object {
+          "disabled": undefined,
+        }
+      }
+      accessible={true}
+      autoCapitalize="none"
+      editable={true}
+      placeholderTextColor="hsl(210, 10%, 40%)"
+      secureTextEntry={true}
+      selectionColor="hsl(210, 50%, 10%)"
+      style={
+        Array [
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+            "flexGrow": 1,
+            "fontSize": 16,
+            "paddingVertical": 12,
+          },
+          undefined,
+        ]
+      }
+      testID="passwordInput"
+    />
+  </View>
+</View>
+`;
+
+exports[`PasswordField should be able to obscure text programmatically 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "flex-start",
+      },
+      Array [
+        Object {},
+        undefined,
+      ],
+    ]
+  }
+  testID="amplify__text-field-container"
+>
+  <Text
+    accessibilityLabel="Label"
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Array [
+          Object {
+            "color": "hsl(210, 25%, 25%)",
+            "lineHeight": 21,
+            "padding": 4,
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    Label
+  </Text>
+  <View
+    accessible={true}
+    style={
+      Object {
+        "alignItems": "center",
+        "borderColor": "hsl(210, 8%, 55%)",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "paddingHorizontal": 8,
+      }
+    }
+    testID="amplify__text-field__input-container"
+  >
+    <TextInput
+      accessibilityState={
+        Object {
+          "disabled": undefined,
+        }
+      }
+      accessible={true}
+      autoCapitalize="none"
+      editable={true}
+      placeholderTextColor="hsl(210, 10%, 40%)"
+      secureTextEntry={false}
+      selectionColor="hsl(210, 50%, 10%)"
+      style={
+        Array [
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+            "flexGrow": 1,
+            "fontSize": 16,
+            "paddingVertical": 12,
+          },
+          undefined,
+        ]
+      }
+      testID="passwordInput"
+    />
+    <View
+      accessibilityLabel="Hide password"
+      accessibilityRole="button"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {},
+          null,
+          null,
+          undefined,
+        ]
+      }
+    >
+      <Image
+        accessibilityRole="image"
+        source={
+          Object {
+            "testUri": "../../../src/assets/icons/visibilityOn.png",
+          }
+        }
+        style={
+          Array [
+            Object {
+              "height": 16,
+              "resizeMode": "contain",
+              "tintColor": undefined,
+              "width": 16,
+            },
+            Array [
+              Object {
+                "tintColor": "hsl(210, 10%, 40%)",
+              },
+              undefined,
+            ],
+          ]
+        }
+      />
+    </View>
+  </View>
+</View>
+`;

package/src/primitives/PasswordField/index.ts

@@ -0,0 +1,2 @@
+export { default as PasswordField } from './PasswordField';
+export { PasswordFieldProps, PasswordFieldStyles } from './types';

package/src/primitives/PasswordField/styles.ts

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+
+import { StrictTheme } from '../../theme';
+import { PasswordFieldStyles } from './types';
+
+export const getThemedStyles = ({
+  components,
+  tokens: { colors },
+}: StrictTheme): PasswordFieldStyles => {
+  return StyleSheet.create({
+    container: {
+      ...components?.passwordField?.container,
+    },
+    icon: {
+      // match to `TextField` placeholder color
+      tintColor: colors.font.tertiary,
+      ...components?.passwordField?.icon,
+    },
+  });
+};

package/src/primitives/PasswordField/types.ts

@@ -0,0 +1,27 @@
+import { ImageStyle } from 'react-native';
+import { IconButtonProps } from '../IconButton';
+import { TextFieldProps, TextFieldStyles } from '../TextField';
+
+export interface PasswordFieldProps extends TextFieldProps {
+  /**
+   * @description
+   * For password fields, will toggle visibility of the "show password" button
+   */
+  showPasswordButton?: boolean;
+
+  /**
+   * @description
+   * Styling for the icon
+   */
+  iconStyle?: IconButtonProps['iconStyle'];
+
+  /**
+   * @description
+   * Accessibility label for the icon
+   */
+  iconAccessibilityLabel?: string;
+}
+
+export interface PasswordFieldStyles extends Partial<TextFieldStyles> {
+  icon?: ImageStyle;
+}

package/src/primitives/PhoneNumberField/PhoneNumberField.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { useTheme } from '../../theme';
+import { getThemedStyles } from './styles';
+import { TextField } from '../TextField';
+import { PhoneNumberFieldProps } from './types';
+
+export default function PhoneNumberField({
+  disabled,
+  fieldStyle,
+  labelStyle,
+  style,
+  ...rest
+}: PhoneNumberFieldProps): JSX.Element {
+  const theme = useTheme();
+  const themedStyle = getThemedStyles(theme);
+
+  return (
+    <TextField
+      {...rest}
+      disabled={disabled}
+      fieldStyle={[themedStyle.field, fieldStyle]}
+      keyboardType="phone-pad"
+      labelStyle={[themedStyle.label, labelStyle]}
+      style={[themedStyle.container, style]}
+    />
+  );
+}