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

package/src/primitives/IconButton/__tests__/IconButton.spec.tsx

@@ -1,23 +1,71 @@
 import React from 'react';
-import TestRenderer from 'react-test-renderer';
+import { fireEvent, render, renderHook } from '@testing-library/react-native';
 
+import { useTheme } from '../../../theme';
 import IconButton from '../IconButton';
+import { getThemedStyles } from '../styles';
 
 const source = { uri: 'icon.png' };
 
 describe('IconButton', () => {
   it('renders as expected', () => {
-    const iconButton = TestRenderer.create(<IconButton source={source} />);
-    expect(iconButton.toJSON()).toMatchSnapshot();
+    const { toJSON, getByRole } = render(<IconButton source={source} />);
+
+    expect(getByRole('button')).toBeDefined();
+    expect(getByRole('image')).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('handles disabled state', () => {
+    const onPressMock = jest.fn();
+
+    const { toJSON, getByRole } = render(
+      <IconButton disabled source={source} />
+    );
+
+    const button = getByRole('button');
+    fireEvent.press(button);
+    expect(onPressMock).not.toHaveBeenCalled();
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    expect(button.props.style).toStrictEqual([
+      themedStyle.container,
+      themedStyle.disabled,
+      null,
+      undefined,
+    ]);
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it('renders as expected with custom icon style', () => {
-    const iconButton = TestRenderer.create(
-      <IconButton
-        iconStyle={{ backgroundColor: 'antiquewhite' }}
-        source={source}
-      />
+    const customIconStyle = { backgroundColor: 'antiquewhite' };
+    const { toJSON, getByRole } = render(
+      <IconButton iconStyle={customIconStyle} source={source} />
     );
-    expect(iconButton.toJSON()).toMatchSnapshot();
+
+    const icon = getByRole('image');
+    expect(icon.props.style).toContain(customIconStyle);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('applies theme and style props', () => {
+    const customStyle = { backgroundColor: 'blue' };
+
+    const { toJSON, getByRole } = render(
+      <IconButton source={source} style={customStyle} />
+    );
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    expect(getByRole('button').props.style).toStrictEqual([
+      themedStyle.container,
+      null,
+      null,
+      customStyle,
+    ]);
+    expect(toJSON()).toMatchSnapshot();
   });
 });

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

@@ -1,7 +1,109 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`IconButton applies theme and style props 1`] = `
+<View
+  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,
+      Object {
+        "backgroundColor": "blue",
+      },
+    ]
+  }
+>
+  <Image
+    accessibilityRole="image"
+    source={
+      Object {
+        "uri": "icon.png",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "height": 24,
+          "resizeMode": "contain",
+          "tintColor": undefined,
+          "width": 24,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`IconButton handles disabled state 1`] = `
+<View
+  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 {
+        "uri": "icon.png",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "height": 24,
+          "resizeMode": "contain",
+          "tintColor": undefined,
+          "width": 24,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`IconButton renders as expected 1`] = `
 <View
+  accessibilityRole="button"
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -14,8 +116,17 @@ exports[`IconButton renders as expected 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {},
+      null,
+      null,
+      undefined,
+    ]
+  }
 >
   <Image
+    accessibilityRole="image"
     source={
       Object {
         "uri": "icon.png",
@@ -24,10 +135,10 @@ exports[`IconButton renders as expected 1`] = `
     style={
       Array [
         Object {
-          "height": 16,
+          "height": 24,
           "resizeMode": "contain",
           "tintColor": undefined,
-          "width": 16,
+          "width": 24,
         },
         undefined,
       ]
@@ -38,6 +149,7 @@ exports[`IconButton renders as expected 1`] = `
 
 exports[`IconButton renders as expected with custom icon style 1`] = `
 <View
+  accessibilityRole="button"
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -50,8 +162,17 @@ exports[`IconButton renders as expected with custom icon style 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {},
+      null,
+      null,
+      undefined,
+    ]
+  }
 >
   <Image
+    accessibilityRole="image"
     source={
       Object {
         "uri": "icon.png",
@@ -60,10 +181,10 @@ exports[`IconButton renders as expected with custom icon style 1`] = `
     style={
       Array [
         Object {
-          "height": 16,
+          "height": 24,
           "resizeMode": "contain",
           "tintColor": undefined,
-          "width": 16,
+          "width": 24,
         },
         Object {
           "backgroundColor": "antiquewhite",

package/src/primitives/IconButton/styles.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native';
+
+import { StrictTheme } from '../../theme';
+import { IconButtonStyles } from './types';
+
+export const getThemedStyles = (theme: StrictTheme): IconButtonStyles => {
+  const {
+    components,
+    tokens: { opacities },
+  } = theme;
+
+  return StyleSheet.create({
+    container: {
+      ...components?.iconButton?.container,
+    },
+    disabled: {
+      opacity: opacities[60],
+      ...components?.iconButton?.disabled,
+    },
+    pressed: {
+      opacity: opacities[60],
+      ...components?.iconButton?.pressed,
+    },
+  });
+};

package/src/primitives/IconButton/types.ts

@@ -4,10 +4,13 @@ import {
   ImageStyle,
   PressableProps,
   StyleProp,
+  ViewStyle,
 } from 'react-native';
 
 export interface IconButtonStyles {
-  icon: ImageStyle;
+  container?: ViewStyle;
+  disabled?: ViewStyle;
+  pressed?: ViewStyle;
 }
 
 export interface IconButtonProps extends PressableProps {

package/src/primitives/Label/Label.tsx

@@ -1,20 +1,23 @@
 import React from 'react';
 import { Text } from 'react-native';
+
+import { useTheme } from '../../theme';
 import { LabelProps } from './types';
-import { styles } from './styles';
+import { getThemedStyles } from './styles';
 
 export default function Label({
   accessibilityRole = 'text',
   children,
   style,
+  variant = 'primary',
   ...rest
 }: LabelProps): JSX.Element {
+  const theme = useTheme();
+  const themedStyle = getThemedStyles(theme);
+  const textStyle = [themedStyle.text, themedStyle[variant], style];
+
   return (
-    <Text
-      {...rest}
-      accessibilityRole={accessibilityRole}
-      style={[styles.label, style]}
-    >
+    <Text {...rest} accessibilityRole={accessibilityRole} style={textStyle}>
       {children}
     </Text>
   );

package/src/primitives/Label/__tests__/Label.spec.tsx

@@ -1,22 +1,75 @@
 import React from 'react';
-import TestRenderer from 'react-test-renderer';
+import { render, renderHook } from '@testing-library/react-native';
+
+import { useTheme } from '../../../theme';
+import { getThemedStyles } from '../styles';
 import Label from '../Label';
 
+const text = 'Default Label';
+const testID = 'labelID';
+const props = {
+  testID,
+};
+
 describe('Label', () => {
   it('renders a default Label', () => {
-    const defaultLabel = TestRenderer.create(<Label>Default Label</Label>);
+    const { toJSON, getByText, getByRole } = render(
+      <Label {...props}>{text}</Label>
+    );
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(getByText(text)).toBeDefined();
+    expect(getByRole('text')).toBeDefined();
+  });
+
+  it('applies accessibility role', () => {
+    const { toJSON, queryByRole, getByRole } = render(
+      <Label {...props} accessibilityRole="none">
+        {text}
+      </Label>
+    );
+    expect(toJSON()).toMatchSnapshot();
 
-    expect(defaultLabel.toJSON()).toMatchSnapshot();
+    expect(queryByRole('text')).toBe(null);
+    expect(getByRole('none')).toBeDefined();
   });
 
-  it('applies style props', () => {
+  it('should apply theme and style props', () => {
     const customStyle = { color: 'red' };
 
-    const styledLabel = TestRenderer.create(
-      <Label style={customStyle}>Red Label</Label>
+    const { toJSON, getByTestId } = render(
+      <Label {...props} style={customStyle}>
+        Red Label
+      </Label>
+    );
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByTestId(testID).props.style).toStrictEqual([
+      themedStyle.text,
+      themedStyle['primary'],
+      customStyle,
+    ]);
+  });
+
+  it('should apply variant styles', () => {
+    const variant = 'success';
+
+    const { toJSON, getByTestId } = render(
+      <Label {...props} variant={variant}>
+        Label
+      </Label>
     );
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
 
-    expect(styledLabel.toJSON()).toMatchSnapshot();
-    expect(styledLabel.root.props.style).toBe(customStyle);
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByTestId(testID).props.style).toStrictEqual([
+      themedStyle.text,
+      themedStyle[variant],
+      undefined, // no custom styles
+    ]);
   });
 });

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

@@ -1,39 +1,91 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Label applies style props 1`] = `
+exports[`Label applies accessibility role 1`] = `
+<Text
+  accessibilityRole="none"
+  style={
+    Array [
+      Object {
+        "fontSize": 14,
+        "fontWeight": "400",
+        "lineHeight": 21,
+      },
+      Object {
+        "color": "hsl(210, 50%, 10%)",
+      },
+      undefined,
+    ]
+  }
+  testID="labelID"
+>
+  Default Label
+</Text>
+`;
+
+exports[`Label renders a default Label 1`] = `
+<Text
+  accessibilityRole="text"
+  style={
+    Array [
+      Object {
+        "fontSize": 14,
+        "fontWeight": "400",
+        "lineHeight": 21,
+      },
+      Object {
+        "color": "hsl(210, 50%, 10%)",
+      },
+      undefined,
+    ]
+  }
+  testID="labelID"
+>
+  Default Label
+</Text>
+`;
+
+exports[`Label should apply theme and style props 1`] = `
 <Text
   accessibilityRole="text"
   style={
     Array [
       Object {
-        "fontSize": 16,
-        "marginHorizontal": 4,
-        "marginVertical": 2,
+        "fontSize": 14,
+        "fontWeight": "400",
+        "lineHeight": 21,
+      },
+      Object {
+        "color": "hsl(210, 50%, 10%)",
       },
       Object {
         "color": "red",
       },
     ]
   }
+  testID="labelID"
 >
   Red Label
 </Text>
 `;
 
-exports[`Label renders a default Label 1`] = `
+exports[`Label should apply variant styles 1`] = `
 <Text
   accessibilityRole="text"
   style={
     Array [
       Object {
-        "fontSize": 16,
-        "marginHorizontal": 4,
-        "marginVertical": 2,
+        "fontSize": 14,
+        "fontWeight": "400",
+        "lineHeight": 21,
+      },
+      Object {
+        "color": "hsl(130, 27%, 29%)",
       },
       undefined,
     ]
   }
+  testID="labelID"
 >
-  Default Label
+  Label
 </Text>
 `;

package/src/primitives/Label/index.ts

@@ -1,2 +1,2 @@
 export { default as Label } from './Label';
-export { LabelProps } from './types';
+export { LabelProps, LabelStyles } from './types';

package/src/primitives/Label/styles.ts

@@ -1,7 +1,49 @@
 import { StyleSheet } from 'react-native';
 
+import { StrictTheme } from '../../theme';
+import { getLineHeight } from '../../utils';
 import { LabelStyles } from './types';
 
-export const styles: LabelStyles = StyleSheet.create({
-  label: { fontSize: 16, marginVertical: 2, marginHorizontal: 4 },
-});
+export const getThemedStyles = (theme: StrictTheme): LabelStyles => {
+  const {
+    components,
+    tokens: { colors, fontSizes, fontWeights },
+  } = theme;
+
+  return StyleSheet.create({
+    text: {
+      fontSize: fontSizes.small,
+      fontWeight: fontWeights.normal,
+      lineHeight: getLineHeight(fontSizes.small),
+      ...components?.label?.text,
+    },
+    primary: {
+      color: colors.font.primary,
+      ...components?.label?.primary,
+    },
+    secondary: {
+      color: colors.font.secondary,
+      ...components?.label?.secondary,
+    },
+    tertiary: {
+      color: colors.font.tertiary,
+      ...components?.label?.tertiary,
+    },
+    error: {
+      color: colors.font.error,
+      ...components?.label?.error,
+    },
+    warning: {
+      color: colors.font.warning,
+      ...components?.label?.warning,
+    },
+    success: {
+      color: colors.font.success,
+      ...components?.label?.success,
+    },
+    info: {
+      color: colors.font.info,
+      ...components?.label?.info,
+    },
+  });
+};

package/src/primitives/Label/types.ts

@@ -1,8 +1,31 @@
 import { TextProps, TextStyle } from 'react-native';
 
-export interface LabelProps extends TextProps {}
+export interface LabelProps extends TextProps {
+  /**
+   * @description
+   * The variant property will affect the color of the Label.
+   */
+  variant?: LabelVariant;
+}
 
 export type LabelPosition = 'start' | 'end' | 'top' | 'bottom';
+
+export type LabelVariant =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'error'
+  | 'warning'
+  | 'info'
+  | 'success';
+
 export interface LabelStyles {
-  label: TextStyle;
+  text?: TextStyle;
+  primary?: TextStyle;
+  secondary?: TextStyle;
+  tertiary?: TextStyle;
+  error?: TextStyle;
+  warning?: TextStyle;
+  success?: TextStyle;
+  info?: TextStyle;
 }

package/src/primitives/PasswordField/PasswordField.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+
+import { icons } from '../../assets';
+import { useTheme } from '../../theme';
+import { IconButton } from '../IconButton';
+import { TextField } from '../TextField';
+
+import { PasswordFieldProps } from './types';
+import { getThemedStyles } from './styles';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+
+const { getHidePasswordText, getShowPasswordText } = authenticatorTextUtil;
+
+export default function PasswordField({
+  disabled,
+  iconAccessibilityLabel,
+  iconStyle,
+  secureTextEntry = true,
+  showPasswordButton = true,
+  style,
+  ...rest
+}: PasswordFieldProps): JSX.Element {
+  const theme = useTheme();
+  const themedStyle = getThemedStyles(theme);
+
+  const [obscureText, setObscureText] = useState(secureTextEntry);
+
+  const handleOnPress = React.useCallback(() => {
+    setObscureText(!obscureText);
+  }, [obscureText]);
+
+  const toggleVisibilityAccessibilityLabel =
+    iconAccessibilityLabel ?? obscureText
+      ? getShowPasswordText()
+      : getHidePasswordText();
+
+  return (
+    <TextField
+      {...rest}
+      disabled={disabled}
+      secureTextEntry={obscureText}
+      style={[themedStyle.container, style]}
+      endAccessory={
+        showPasswordButton ? (
+          <IconButton
+            accessibilityLabel={toggleVisibilityAccessibilityLabel}
+            disabled={disabled}
+            iconStyle={[themedStyle.icon, iconStyle]}
+            size={16}
+            source={obscureText ? icons.visibilityOff : icons.visibilityOn}
+            onPress={handleOnPress}
+          />
+        ) : null
+      }
+    />
+  );
+}