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

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

@@ -0,0 +1,165 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Divider applies theme and style props 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "hsl(0, 0%, 0%)",
+          "flex": 1,
+          "height": 0.5,
+        },
+        Object {
+          "backgroundColor": "blue",
+        },
+      ]
+    }
+    testID="amplify__divider__line"
+  />
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Array [
+          Object {
+            "fontSize": 16,
+            "margin": 16,
+            "textAlign": "center",
+          },
+          Object {
+            "color": "red",
+          },
+        ],
+      ]
+    }
+  >
+    Divider label
+  </Text>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "hsl(0, 0%, 0%)",
+          "flex": 1,
+          "height": 0.5,
+        },
+        Object {
+          "backgroundColor": "blue",
+        },
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Divider renders as expected with label 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "hsl(0, 0%, 0%)",
+          "flex": 1,
+          "height": 0.5,
+        },
+        undefined,
+      ]
+    }
+    testID="amplify__divider__line"
+  />
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Array [
+          Object {
+            "fontSize": 16,
+            "margin": 16,
+            "textAlign": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    Divider label
+  </Text>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "hsl(0, 0%, 0%)",
+          "flex": 1,
+          "height": 0.5,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Divider renders as expected without label 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "hsl(0, 0%, 0%)",
+          "flex": 1,
+          "height": 0.5,
+        },
+        undefined,
+      ]
+    }
+    testID="amplify__divider__line"
+  />
+</View>
+`;

package/src/primitives/Divider/index.ts

@@ -0,0 +1,2 @@
+export { default as Divider } from './Divider';
+export { DividerProps, DividerStyles } from './types';

package/src/primitives/Divider/styles.ts

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native';
+
+import { StrictTheme } from '../../theme';
+import { DividerStyles } from './types';
+
+export const getThemedStyles = (theme: StrictTheme): DividerStyles => {
+  const { tokens, components } = theme;
+  const { colors, fontSizes, space } = tokens;
+
+  return StyleSheet.create({
+    container: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      ...components?.divider?.container,
+    },
+    label: {
+      fontSize: fontSizes.medium,
+      margin: space.medium,
+      textAlign: 'center',
+      ...components?.divider?.label,
+    },
+    line: {
+      backgroundColor: colors.black,
+      flex: 1,
+      height: StyleSheet.hairlineWidth,
+      ...components?.divider?.line,
+    },
+  });
+};

package/src/primitives/Divider/types.ts

@@ -0,0 +1,21 @@
+import { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native';
+
+export interface DividerProps extends ViewProps {
+  /*
+   * @description
+   * Styles for the label
+   */
+  labelStyle?: StyleProp<TextStyle>;
+
+  /*
+   * @description
+   * Styles for the line
+   */
+  lineStyle?: StyleProp<ViewStyle>;
+}
+
+export interface DividerStyles {
+  container?: ViewStyle;
+  label?: TextStyle;
+  line?: ViewStyle;
+}

package/src/primitives/ErrorMessage/ErrorMessage.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+import { icons } from '../../assets';
+import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+
+import { useTheme } from '../../theme';
+import { getThemedStyles } from './styles';
+import { ErrorMessageProps } from './types';
+
+export const CLOSE_BUTTON_TEST_ID =
+  'authenticator--error-message--close-button';
+
+export default function ErrorMessage({
+  children,
+  labelStyle,
+  onDismiss,
+  style,
+  ...rest
+}: ErrorMessageProps): JSX.Element {
+  const theme = useTheme();
+  const themedStyle = getThemedStyles(theme);
+
+  return (
+    <View
+      {...rest}
+      accessibilityRole="alert"
+      style={[themedStyle.container, style]}
+    >
+      <Icon size={20} source={icons.error} style={themedStyle.icon} />
+      <Text style={[themedStyle.label, labelStyle]}>{children}</Text>
+      {onDismiss ? (
+        <IconButton
+          onPress={onDismiss}
+          size={20}
+          source={icons.close}
+          style={themedStyle.icon}
+          testID={CLOSE_BUTTON_TEST_ID}
+        />
+      ) : null}
+    </View>
+  );
+}

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { fireEvent, render, renderHook } from '@testing-library/react-native';
+
+import { useTheme } from '../../../theme';
+import { CLOSE_BUTTON_TEST_ID } from '../ErrorMessage';
+import ErrorMessage from '../ErrorMessage';
+import { getThemedStyles } from '../styles';
+
+describe('ErrorMessage', () => {
+  it('renders default ErrorMessage as expected', () => {
+    const { toJSON, queryByTestId } = render(
+      <ErrorMessage>Default ErrorMessage</ErrorMessage>
+    );
+    expect(toJSON()).toMatchSnapshot();
+    expect(queryByTestId(CLOSE_BUTTON_TEST_ID)).toBeFalsy();
+  });
+
+  it('handles an onDismiss callback', () => {
+    const customOnDismiss = jest.fn();
+    const { getByTestId } = render(
+      <ErrorMessage onDismiss={customOnDismiss}>
+        Default ErrorMessage
+      </ErrorMessage>
+    );
+
+    const dismissButton = getByTestId(CLOSE_BUTTON_TEST_ID);
+    fireEvent.press(dismissButton);
+
+    expect(customOnDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it('applies theme and style props', () => {
+    const customStyle = { backgroundColor: 'blue' };
+    const customLabelStyle = { color: 'white' };
+    const labelText = 'Themed ErrorMessage';
+
+    const { getByRole, getByText, toJSON } = render(
+      <ErrorMessage labelStyle={customLabelStyle} style={customStyle}>
+        {labelText}
+      </ErrorMessage>
+    );
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    const alert = getByRole('alert');
+    const label = getByText(labelText);
+
+    expect(alert.props.style).toStrictEqual([
+      themedStyle.container,
+      customStyle,
+    ]);
+
+    expect(label.props.style).toStrictEqual([
+      themedStyle.label,
+      customLabelStyle,
+    ]);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ErrorMessage applies theme and style props 1`] = `
+<View
+  accessibilityRole="alert"
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "hsl(0, 75%, 85%)",
+        "flexDirection": "row",
+        "paddingHorizontal": 8,
+        "paddingVertical": 32,
+      },
+      Object {
+        "backgroundColor": "blue",
+      },
+    ]
+  }
+>
+  <Image
+    accessibilityRole="image"
+    source={
+      Object {
+        "testUri": "../../../src/assets/icons/error.png",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "height": 20,
+          "resizeMode": "contain",
+          "tintColor": undefined,
+          "width": 20,
+        },
+        Object {
+          "margin": 8,
+        },
+      ]
+    }
+  />
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "hsl(0, 100%, 20%)",
+          "flex": 1,
+          "paddingHorizontal": 8,
+        },
+        Object {
+          "color": "white",
+        },
+      ]
+    }
+  >
+    Themed ErrorMessage
+  </Text>
+</View>
+`;
+
+exports[`ErrorMessage renders default ErrorMessage as expected 1`] = `
+<View
+  accessibilityRole="alert"
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "hsl(0, 75%, 85%)",
+        "flexDirection": "row",
+        "paddingHorizontal": 8,
+        "paddingVertical": 32,
+      },
+      undefined,
+    ]
+  }
+>
+  <Image
+    accessibilityRole="image"
+    source={
+      Object {
+        "testUri": "../../../src/assets/icons/error.png",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "height": 20,
+          "resizeMode": "contain",
+          "tintColor": undefined,
+          "width": 20,
+        },
+        Object {
+          "margin": 8,
+        },
+      ]
+    }
+  />
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "hsl(0, 100%, 20%)",
+          "flex": 1,
+          "paddingHorizontal": 8,
+        },
+        undefined,
+      ]
+    }
+  >
+    Default ErrorMessage
+  </Text>
+</View>
+`;

package/src/primitives/ErrorMessage/index.ts

@@ -0,0 +1,2 @@
+export { default as ErrorMessage } from './ErrorMessage';
+export { ErrorMessageProps, ErrorMessageStyles } from './types';

package/src/primitives/ErrorMessage/styles.ts

@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+
+import { StrictTheme } from '../../theme';
+import { ErrorMessageStyles } from './types';
+
+export const getThemedStyles = (theme: StrictTheme): ErrorMessageStyles => {
+  const {
+    tokens: { colors, space },
+    components,
+  } = theme;
+
+  return StyleSheet.create({
+    container: {
+      alignItems: 'center',
+      backgroundColor: colors.background.error,
+      flexDirection: 'row',
+      paddingHorizontal: space.xs,
+      paddingVertical: space.xl,
+      ...components?.errorMessage?.container,
+    },
+    icon: {
+      margin: space.xs,
+      ...components?.errorMessage?.icon,
+    },
+    label: {
+      color: colors.font.error,
+      flex: 1,
+      paddingHorizontal: space.xs,
+      ...components?.errorMessage?.label,
+    },
+  });
+};

package/src/primitives/ErrorMessage/types.ts

@@ -0,0 +1,18 @@
+import {
+  ImageStyle,
+  StyleProp,
+  TextStyle,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+
+export interface ErrorMessageProps extends ViewProps {
+  labelStyle?: StyleProp<TextStyle>;
+  onDismiss?: () => void;
+}
+
+export interface ErrorMessageStyles {
+  container?: ViewStyle;
+  icon?: ImageStyle;
+  label?: TextStyle;
+}

package/src/primitives/Heading/Heading.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Text } from 'react-native';
-import { styles } from './styles';
+
+import { useTheme } from '../../theme';
+import { getThemedStyles } from './styles';
 import { HeadingProps } from './types';
 
 export default function Heading({
@@ -10,11 +12,14 @@ export default function Heading({
   style,
   ...rest
 }: HeadingProps): JSX.Element {
+  const theme = useTheme();
+  const themedStyle = getThemedStyles(theme);
+
   return (
     <Text
       {...rest}
       accessibilityRole={accessibilityRole}
-      style={[styles.text, styles[level], style]}
+      style={[themedStyle.text, themedStyle[level], style]}
     >
       {children}
     </Text>

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

@@ -1,36 +1,73 @@
 import React from 'react';
-import TestRenderer from 'react-test-renderer';
+import { render, renderHook } from '@testing-library/react-native';
+
+import { useTheme } from '../../../theme';
 import Heading from '../Heading';
 import { HeadingProps } from '../types';
+import { getThemedStyles } from '../styles';
 
-const title = 'Test Heading';
 const levels: HeadingProps['level'][] = [1, 2, 3, 4, 5, 6];
 
 describe('Heading', () => {
   it('renders a level 6 Heading by default', () => {
-    const defaultHeading = TestRenderer.create(<Heading>{title}</Heading>);
-    const headingLevel6 = TestRenderer.create(
-      <Heading level={6}>{title}</Heading>
-    );
+    const title = 'Test Heading';
+
+    const { toJSON, getByText } = render(<Heading>{title}</Heading>);
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
 
-    expect(defaultHeading.toJSON()).toEqual(headingLevel6.toJSON());
+    const heading = getByText(title);
+
+    expect(heading.props.style).toStrictEqual([
+      themedStyle.text,
+      themedStyle[6],
+      undefined,
+    ]);
+
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it.each(levels)('renders a level %i Heading as expected', (level) => {
-    const heading = TestRenderer.create(
-      <Heading level={level}>{`Heading level ${level}`}</Heading>
+    const title = `Heading level ${level}`;
+
+    const { toJSON, getByText } = render(
+      <Heading level={level}>{title}</Heading>
     );
-    expect(heading.toJSON()).toMatchSnapshot();
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    const heading = getByText(title);
+
+    expect(heading.props.style).toStrictEqual([
+      themedStyle.text,
+      themedStyle[level ?? 6],
+      undefined,
+    ]);
+
+    expect(toJSON()).toMatchSnapshot();
   });
 
-  it('applies style props', () => {
+  it('applies theme and style props', () => {
     const customStyle = { color: 'red' };
+    const title = 'Styled Heading';
 
-    const styledHeading = TestRenderer.create(
+    const { toJSON, getByText } = render(
       <Heading style={customStyle}>{title}</Heading>
     );
 
-    expect(styledHeading.toJSON()).toMatchSnapshot();
-    expect(styledHeading.root.props.style).toBe(customStyle);
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    const heading = getByText(title);
+
+    expect(heading.props.style).toStrictEqual([
+      themedStyle.text,
+      themedStyle[6],
+      customStyle,
+    ]);
+
+    expect(toJSON()).toMatchSnapshot();
   });
 });