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

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

@@ -0,0 +1,175 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tabs applies theme and custom styling 1`] = `
+<View
+  accessibilityRole="tablist"
+  style={
+    Array [
+      Object {
+        "flexDirection": "row",
+        "width": "100%",
+      },
+      Object {
+        "backgroundColor": "blue",
+      },
+    ]
+  }
+>
+  <View
+    accessibilityRole="tab"
+    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 {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 12,
+        },
+        Object {
+          "borderColor": "hsl(210, 8%, 55%)",
+          "borderWidth": 1,
+        },
+        null,
+        null,
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderBottomColor": "hsl(210, 5%, 87%)",
+            "borderBottomWidth": 2,
+            "borderRadius": 0,
+            "borderWidth": 0,
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "paddingHorizontal": 16,
+            "paddingVertical": 12,
+          },
+          Object {
+            "opacity": 1,
+          },
+          Object {
+            "backgroundColor": "hsl(0, 0%, 100%)",
+            "borderBottomColor": "hsl(190, 95%, 30%)",
+            "color": "hsl(190, 95%, 30%)",
+          },
+          null,
+        ],
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+            "fontSize": 16,
+            "fontWeight": "700",
+            "textAlign": "center",
+          },
+          Array [
+            Object {
+              "color": "hsl(210, 25%, 25%)",
+              "fontSize": 16,
+              "fontWeight": "700",
+            },
+            undefined,
+            Object {
+              "backgroundColor": "hsl(0, 0%, 100%)",
+              "borderBottomColor": "hsl(190, 95%, 30%)",
+              "color": "hsl(190, 95%, 30%)",
+            },
+          ],
+        ]
+      }
+    >
+      Sign In
+    </Text>
+  </View>
+  <View
+    accessibilityRole="tab"
+    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 {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 12,
+        },
+        Object {
+          "borderColor": "hsl(210, 8%, 55%)",
+          "borderWidth": 1,
+        },
+        null,
+        null,
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderBottomColor": "hsl(210, 5%, 87%)",
+            "borderBottomWidth": 2,
+            "borderRadius": 0,
+            "borderWidth": 0,
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "paddingHorizontal": 16,
+            "paddingVertical": 12,
+          },
+          null,
+          null,
+          null,
+        ],
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "hsl(210, 50%, 10%)",
+            "fontSize": 16,
+            "fontWeight": "700",
+            "textAlign": "center",
+          },
+          Array [
+            Object {
+              "color": "hsl(210, 25%, 25%)",
+              "fontSize": 16,
+              "fontWeight": "700",
+            },
+            undefined,
+            null,
+          ],
+        ]
+      }
+    >
+      Create Account
+    </Text>
+  </View>
+</View>
+`;

package/src/primitives/Tabs/index.ts

@@ -0,0 +1,3 @@
+export { default as Tab } from './Tab';
+export { default as Tabs } from './Tabs';
+export { TabProps, TabsProps, TabsStyles } from './types';

package/src/primitives/Tabs/styles.ts

@@ -0,0 +1,62 @@
+import { StyleSheet, ViewStyle } from 'react-native';
+
+import { StrictTheme } from '../../theme';
+import { TabsProps, TabsStyles } from './types';
+
+export const getThemedStyles = (
+  theme: StrictTheme,
+  indicatorPosition?: TabsProps['indicatorPosition']
+): TabsStyles => {
+  const {
+    components,
+    tokens: { colors, fontSizes, fontWeights, opacities, space, borderWidths },
+  } = theme;
+
+  const selectedTabBorderStyles: ViewStyle = {};
+  const tabBorderStyles: ViewStyle = {};
+
+  if (indicatorPosition && indicatorPosition === 'top') {
+    selectedTabBorderStyles.borderTopColor = colors.brand.primary[80];
+    tabBorderStyles.borderTopWidth = borderWidths.medium;
+    tabBorderStyles.borderTopColor = colors.border.secondary;
+  } else {
+    selectedTabBorderStyles.borderBottomColor = colors.brand.primary[80];
+    tabBorderStyles.borderBottomWidth = borderWidths.medium;
+    tabBorderStyles.borderBottomColor = colors.border.secondary;
+  }
+
+  return StyleSheet.create({
+    readonly: {
+      opacity: opacities[100],
+      ...components?.tabs?.readonly,
+    },
+    tabList: {
+      flexDirection: 'row',
+      width: '100%',
+      ...components?.tabs?.tabList,
+    },
+    tab: {
+      backgroundColor: colors.transparent,
+      borderRadius: 0,
+      flexBasis: 0,
+      flexGrow: 1,
+      paddingVertical: space.small,
+      paddingHorizontal: space.medium,
+      borderWidth: 0,
+      ...tabBorderStyles,
+      ...components?.tabs?.tab,
+    },
+    tabText: {
+      color: colors.font.secondary,
+      fontSize: fontSizes.medium,
+      fontWeight: fontWeights.bold,
+      ...components?.tabs?.tabText,
+    },
+    selected: {
+      backgroundColor: colors.background.primary,
+      color: colors.brand.primary[80],
+      ...selectedTabBorderStyles,
+      ...components?.tabs?.selected,
+    },
+  });
+};

package/src/primitives/Tabs/types.ts

@@ -0,0 +1,51 @@
+import { TextStyle, ViewProps, ViewStyle } from 'react-native';
+
+import { ButtonProps } from '../Button';
+
+type IndicatorPosition = 'top' | 'bottom';
+
+export interface TabsProps extends ViewProps {
+  /**
+   * @description
+   * The Tabs component only accepts Tab components as children.
+   */
+  children: React.ReactElement<TabProps>[];
+
+  /**
+   * @description
+   * For controlled usage, use the `onChange` event to listen to when a Tab is
+   * clicked and update the `selectedIndex` accordingly. The index of the Tab
+   * clicked is passed to `onChange`.
+   */
+  onChange?: (index: number) => void;
+
+  /**
+   * @description
+   * The controlled index of the currently selected Tab. This should be
+   * used in tandem with `onChange` to use Tabs as a controlled component.
+   */
+  selectedIndex?: number;
+
+  /**
+   * @description
+   * Sets the border and indicator of the tabs to be the top or bottom.
+   */
+  indicatorPosition?: IndicatorPosition;
+}
+
+export interface TabProps extends ButtonProps {
+  /**
+   * @description
+   * Indicates if a Tab is currently selected
+   */
+  selected?: boolean;
+  indicatorPosition?: IndicatorPosition;
+}
+
+export interface TabsStyles {
+  readonly?: ViewStyle;
+  selected?: ViewStyle;
+  tabList?: ViewStyle;
+  tab?: ViewStyle;
+  tabText?: TextStyle;
+}

package/src/primitives/TextField/TextField.tsx

@@ -0,0 +1,77 @@
+import React, { useMemo } from 'react';
+import { TextInput, View, ViewStyle } from 'react-native';
+import { Label } from '../Label';
+
+import { useTheme } from '../../theme';
+import { getThemedStyles } from './styles';
+import { TextFieldProps } from './types';
+
+export const TEXTFIELD_CONTAINER_TEST_ID = 'amplify__text-field-container';
+export const INPUT_CONTAINER_TEST_ID = 'amplify__text-field__input-container';
+
+export default function TextField({
+  accessibilityLabel,
+  accessibilityRole,
+  accessibilityState,
+  accessible = true,
+  autoCapitalize = 'none',
+  disabled,
+  endAccessory,
+  error,
+  errorMessage,
+  errorMessageStyle,
+  fieldStyle,
+  label,
+  labelStyle,
+  style,
+  ...rest
+}: TextFieldProps): JSX.Element {
+  const theme = useTheme();
+  const themedStyle = getThemedStyles(theme);
+
+  const fieldContainerStyle: ViewStyle = useMemo(
+    () => ({
+      ...themedStyle.fieldContainer,
+      ...(disabled && themedStyle.disabled),
+    }),
+    [disabled, themedStyle]
+  );
+
+  return (
+    <View
+      testID={TEXTFIELD_CONTAINER_TEST_ID}
+      style={[themedStyle.container, style]}
+    >
+      {label ? (
+        <Label
+          accessibilityLabel={label}
+          style={[themedStyle.label, labelStyle]}
+        >
+          {label}
+        </Label>
+      ) : null}
+      <View
+        accessible
+        style={fieldContainerStyle}
+        testID={INPUT_CONTAINER_TEST_ID}
+      >
+        <TextInput
+          {...rest}
+          accessible={accessible}
+          accessibilityLabel={label ? undefined : accessibilityLabel}
+          accessibilityRole={accessibilityRole}
+          accessibilityState={{ disabled, ...accessibilityState }}
+          autoCapitalize={autoCapitalize}
+          editable={!disabled}
+          placeholderTextColor={theme.tokens.colors.font.tertiary}
+          selectionColor={theme.tokens.colors.font.primary}
+          style={[themedStyle.field, fieldStyle]}
+        />
+        {endAccessory ?? null}
+      </View>
+      {error && errorMessage ? (
+        <Label style={errorMessageStyle}>{errorMessage}</Label>
+      ) : null}
+    </View>
+  );
+}

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

@@ -0,0 +1,153 @@
+import React from 'react';
+import { fireEvent, render, renderHook } from '@testing-library/react-native';
+
+import { useTheme } from '../../../theme';
+import { getThemedStyles } from '../styles';
+import TextField, {
+  INPUT_CONTAINER_TEST_ID,
+  TEXTFIELD_CONTAINER_TEST_ID,
+} from '../TextField';
+
+const placeHolderText = 'Placeholder';
+const labelText = 'Label';
+const testID = 'textInput';
+const defaultProps = {
+  testID: testID,
+  label: labelText,
+  placeholder: placeHolderText,
+};
+
+const onChangeText = jest.fn();
+
+describe('TextField', () => {
+  it('renders as expected', async () => {
+    const { toJSON, findAllByRole, getByTestId, getByText } = render(
+      <TextField {...defaultProps} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(await findAllByRole('text')).toHaveLength(1);
+    const textInput = getByTestId(testID);
+    expect(textInput.props.editable).toBe(true);
+    expect(textInput.props.secureTextEntry).toBeUndefined();
+    expect(textInput.props.accessible).toBe(true);
+    expect(textInput.props.autoCapitalize).toBe('none');
+    const label = getByText(labelText);
+    expect(label).not.toBeNull();
+  });
+
+  it('renders as expected when disabled', () => {
+    const { toJSON, getByTestId } = render(
+      <TextField {...defaultProps} disabled />
+    );
+    expect(toJSON()).toMatchSnapshot();
+    const textInput = getByTestId(testID);
+    expect(textInput.props.accessibilityState).toHaveProperty('disabled', true);
+
+    expect(textInput.props.editable).toBe(false);
+  });
+
+  it('renders as expected with error message', async () => {
+    const message = 'Error message';
+    const { toJSON, findAllByRole, getByText } = render(
+      <TextField {...defaultProps} error errorMessage={message} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(await findAllByRole('text')).toHaveLength(2);
+    expect(getByText(message)).not.toBeNull();
+  });
+
+  it(`doesn't render the errorMessage if error prop is false`, () => {
+    const message = 'Error message';
+    const { toJSON, queryByText } = render(
+      <TextField {...defaultProps} errorMessage={message} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+    expect(queryByText(message)).toBeNull();
+  });
+
+  it(`doesn't render the errorMessage if errorMessage prop is undefined`, () => {
+    const message = 'Error message';
+    const { toJSON, queryByText } = render(
+      <TextField {...defaultProps} error />
+    );
+    expect(toJSON()).toMatchSnapshot();
+    expect(queryByText(message)).toBeNull();
+  });
+
+  it('renders as expected as password field', async () => {
+    const { toJSON, findAllByRole, getByTestId } = render(
+      <TextField {...defaultProps} secureTextEntry />
+    );
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(await findAllByRole('text')).toHaveLength(1);
+    const textInput = getByTestId(testID);
+    expect(textInput.props.secureTextEntry).toBe(true);
+  });
+
+  it('renders disabled state correctly', () => {
+    const { getByTestId } = render(
+      <TextField
+        {...defaultProps}
+        disabled
+        onChangeText={onChangeText}
+        accessibilityRole="none"
+      />
+    );
+    const textInput = getByTestId(testID);
+    fireEvent.press(textInput);
+    expect(onChangeText).not.toHaveBeenCalled();
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    const inputContainer = getByTestId(INPUT_CONTAINER_TEST_ID);
+    expect(inputContainer.props.style).toStrictEqual({
+      ...themedStyle.fieldContainer,
+      ...themedStyle.disabled,
+    });
+  });
+
+  it('applies theme and style props', () => {
+    const errorMessageText = 'Error!';
+    const customErrorMessageStyle = { color: 'red' };
+    const customFieldStyle = { color: 'orange' };
+    const customLabelStyle = { color: 'blue' };
+    const customStyle = { backgroundColor: 'purple' };
+
+    const { getByTestId, getByText } = render(
+      <TextField
+        {...defaultProps}
+        error
+        errorMessage={errorMessageText}
+        errorMessageStyle={customErrorMessageStyle}
+        fieldStyle={customFieldStyle}
+        labelStyle={customLabelStyle}
+        style={customStyle}
+      />
+    );
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    const container = getByTestId(TEXTFIELD_CONTAINER_TEST_ID);
+    const inputContainer = getByTestId(INPUT_CONTAINER_TEST_ID);
+    const input = getByTestId(testID);
+    const errorMessage = getByText(errorMessageText);
+
+    expect(container.props.style).toStrictEqual([
+      themedStyle.container,
+      customStyle,
+    ]);
+    expect(inputContainer.props.style).toStrictEqual(
+      themedStyle.fieldContainer
+    );
+    expect(input.props.style).toStrictEqual([
+      themedStyle.field,
+      customFieldStyle,
+    ]);
+    expect(errorMessage.props.style).toContain(customErrorMessageStyle);
+  });
+});