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

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

@@ -1,24 +1,92 @@
 import React from 'react';
 import { Text } from 'react-native';
-import TestRenderer from 'react-test-renderer';
+import { fireEvent, render, renderHook } from '@testing-library/react-native';
 
+import { useTheme } from '../../../theme';
+import { getThemedStyles } from '../styles';
 import Button from '../Button';
 
-const title = 'A preesable button';
-const Title = () => <Text>{title}</Text>;
+const labelText = 'A pressable button';
+const Title = () => <Text>{labelText}</Text>;
 
 describe('Button', () => {
   it('renders as expected with a string passed as children', () => {
-    const button = TestRenderer.create(<Button>{title}</Button>);
-    expect(button.toJSON()).toMatchSnapshot();
+    const { toJSON, getByRole, getByText } = render(
+      <Button>{labelText}</Button>
+    );
+
+    expect(getByRole('button')).toBeDefined();
+    expect(getByText(labelText)).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it('renders as expected with a component passed as children', () => {
-    const button = TestRenderer.create(
+    const { toJSON, getByRole, getByText } = render(
       <Button>
         <Title />
       </Button>
     );
-    expect(button.toJSON()).toMatchSnapshot();
+
+    expect(getByRole('button')).toBeDefined();
+    expect(getByText(labelText)).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('handles an onPress callback', () => {
+    const onPressMock = jest.fn();
+
+    const { getByRole } = render(
+      <Button onPress={onPressMock}>{labelText}</Button>
+    );
+
+    const button = getByRole('button');
+    fireEvent.press(button);
+    expect(onPressMock).toHaveBeenCalled();
+  });
+
+  it('handles disabled state', () => {
+    const onPressMock = jest.fn();
+
+    const { getByRole } = render(
+      <Button disabled onPress={onPressMock}>
+        {labelText}
+      </Button>
+    );
+
+    const button = getByRole('button');
+    fireEvent.press(button);
+    expect(onPressMock).not.toHaveBeenCalled();
+  });
+
+  it('applies accessibility role', () => {
+    const { queryByRole, getByRole } = render(
+      <Button accessibilityRole="none">{labelText}</Button>
+    );
+
+    expect(queryByRole('button')).toBe(null);
+    expect(getByRole('none')).toBeDefined();
+  });
+
+  it('applies theme and style props', () => {
+    const customStyle = { backgroundColor: 'blue' };
+    const customTextStyle = { color: 'red' };
+
+    const { toJSON, getByRole, getByText } = render(
+      <Button style={customStyle} textStyle={customTextStyle}>
+        {labelText}
+      </Button>
+    );
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    expect(getByRole('button').props.style).toContain(customStyle);
+    expect(getByText(labelText).props.style).toStrictEqual([
+      {
+        ...themedStyle.text,
+      },
+      customTextStyle,
+    ]);
+    expect(toJSON()).toMatchSnapshot();
   });
 });

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

@@ -1,7 +1,65 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Button 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 {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "borderRadius": 4,
+        "justifyContent": "center",
+        "paddingHorizontal": 16,
+        "paddingVertical": 12,
+      },
+      Object {
+        "borderColor": "hsl(210, 8%, 55%)",
+        "borderWidth": 1,
+      },
+      null,
+      null,
+      Object {
+        "backgroundColor": "blue",
+      },
+    ]
+  }
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+          "fontSize": 16,
+          "fontWeight": "700",
+          "textAlign": "center",
+        },
+        Object {
+          "color": "red",
+        },
+      ]
+    }
+  >
+    A pressable button
+  </Text>
+</View>
+`;
+
 exports[`Button renders as expected with a component passed as children 1`] = `
 <View
+  accessibilityRole="button"
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -14,15 +72,35 @@ exports[`Button renders as expected with a component passed as children 1`] = `
   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,
+      undefined,
+    ]
+  }
 >
   <Text>
-    A preesable button
+    A pressable button
   </Text>
 </View>
 `;
 
 exports[`Button renders as expected with a string passed as children 1`] = `
 <View
+  accessibilityRole="button"
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -35,18 +113,40 @@ exports[`Button renders as expected with a string passed as children 1`] = `
   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,
+      undefined,
+    ]
+  }
 >
   <Text
     style={
       Array [
         Object {
-          "alignSelf": "center",
+          "color": "hsl(210, 50%, 10%)",
+          "fontSize": 16,
+          "fontWeight": "700",
+          "textAlign": "center",
         },
         undefined,
       ]
     }
   >
-    A preesable button
+    A pressable button
   </Text>
 </View>
 `;

package/src/primitives/Button/styles.ts

@@ -1,6 +1,64 @@
 import { StyleSheet } from 'react-native';
+
+import { StrictTheme } from '../../theme';
 import { ButtonStyles } from './types';
 
-export const styles: ButtonStyles = StyleSheet.create({
-  text: { alignSelf: 'center' },
-});
+export const getThemedStyles = (theme: StrictTheme): ButtonStyles => {
+  const { tokens, components } = theme;
+  const {
+    colors,
+    fontSizes,
+    fontWeights,
+    opacities,
+    space,
+    radii,
+    borderWidths,
+  } = tokens;
+
+  return StyleSheet.create({
+    container: {
+      alignItems: 'center',
+      backgroundColor: colors.transparent,
+      justifyContent: 'center',
+      paddingVertical: space.small,
+      paddingHorizontal: space.medium,
+      borderRadius: radii.small,
+      ...components?.button?.container,
+    },
+    containerDefault: {
+      borderWidth: borderWidths.small,
+      borderColor: colors.border.primary,
+      ...components?.button?.containerDefault,
+    },
+    containerPrimary: {
+      backgroundColor: colors.brand.primary[80],
+      ...components?.button?.containerPrimary,
+    },
+    containerLink: {
+      ...components?.button?.containerLink,
+    },
+    disabled: {
+      opacity: opacities[60],
+      ...components?.button?.disabled,
+    },
+    pressed: {
+      opacity: opacities[60],
+      ...components?.button?.pressed,
+    },
+    text: {
+      textAlign: 'center',
+      color: colors.font.primary,
+      fontSize: fontSizes.medium,
+      fontWeight: fontWeights.bold,
+      ...components?.button?.text,
+    },
+    textPrimary: {
+      color: colors.font.inverse,
+      ...components?.button?.textPrimary,
+    },
+    textLink: {
+      color: colors.font.interactive,
+      ...components?.button?.textLink,
+    },
+  });
+};

package/src/primitives/Button/types.ts

@@ -1,9 +1,21 @@
-import { PressableProps, StyleProp, TextStyle } from 'react-native';
+import { PressableProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+export type ButtonVariant = 'primary' | 'default' | 'link';
 
 export interface ButtonProps extends PressableProps {
   textStyle?: StyleProp<TextStyle>;
+  variant?: ButtonVariant;
 }
 
 export interface ButtonStyles {
-  text: TextStyle;
+  container?: ViewStyle;
+  containerPrimary?: ViewStyle;
+  containerDefault?: ViewStyle;
+  containerLink?: ViewStyle;
+  disabled?: ViewStyle;
+  pressed?: ViewStyle;
+  text?: TextStyle;
+  textPrimary?: TextStyle;
+  textDefault?: TextStyle;
+  textLink?: TextStyle;
 }

package/src/primitives/Checkbox/Checkbox.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { Pressable, ViewStyle } from 'react-native';
 
-import { icons } from '../../assets';
-import { styles } from './styles';
-import { Label } from '../Label';
 import { CheckboxProps } from './types';
-import { getFlexDirectionFromLabelPosition } from '../Label/utils';
 import { Icon } from '../Icon';
+import { Label } from '../Label';
+import { getThemedStyles } from './styles';
+import { icons } from '../../assets';
+import { useTheme } from '../../theme';
 
 export default function Checkbox<T>({
   accessibilityRole = 'checkbox',
@@ -23,6 +23,8 @@ export default function Checkbox<T>({
   ...rest
 }: CheckboxProps<T>): JSX.Element {
   const [checked, setChecked] = useState(selected ?? false);
+  const theme = useTheme();
+  const themedStyle = getThemedStyles(theme, labelPosition);
 
   const handleOnChange = useCallback(() => {
     onChange?.(value);
@@ -31,11 +33,10 @@ export default function Checkbox<T>({
 
   const containerStyle: ViewStyle = useMemo(
     () => ({
-      ...styles.container,
-      flexDirection: getFlexDirectionFromLabelPosition(labelPosition),
-      opacity: disabled ? 0.6 : 1,
+      ...themedStyle.container,
+      ...(disabled && themedStyle.disabled),
     }),
-    [disabled, labelPosition]
+    [disabled, themedStyle]
   );
 
   return (

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

@@ -1,8 +1,22 @@
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent, render, renderHook } from '@testing-library/react-native';
+import { ImageStyle, ViewStyle } from 'react-native';
+
 import Checkbox from '../Checkbox';
+import { useTheme } from '../../../theme';
+import { getThemedStyles } from '../styles';
+import { icons } from '../../../assets';
+import { IconStyles } from '../../Icon/types';
 
 const onChange = jest.fn();
+const testID = 'checkboxTestID';
+const label = 'test';
+const props = {
+  testID,
+  onChange,
+  label,
+  value: '',
+};
 
 describe('Checkbox', () => {
   beforeEach(() => {
@@ -11,40 +25,131 @@ describe('Checkbox', () => {
 
   [true, false].forEach((value) => {
     it(`renders as expected when selected is ${value}`, () => {
-      const { toJSON } = render(
-        <Checkbox selected={value} value={value} onChange={onChange} />
+      const { toJSON, getByRole, getByText } = render(
+        <Checkbox {...props} selected={value} value={value} />
       );
       expect(toJSON()).toMatchSnapshot();
+
+      expect(getByRole('checkbox')).toBeDefined();
+
+      const icon = getByRole('image');
+      expect(icon).toBeDefined();
+      expect(icon.props.source).toEqual(
+        value ? icons.checkboxFilled : icons.checkboxOutline
+      );
+
+      expect(getByText(label)).toBeDefined();
     });
   });
 
-  it('renders as expected when disabled', () => {
-    const { toJSON } = render(
-      <Checkbox disabled value="" onChange={onChange} />
+  it('renders as expected without a label', () => {
+    const { toJSON, getByRole, queryByRole } = render(
+      <Checkbox {...props} label={undefined} />
     );
     expect(toJSON()).toMatchSnapshot();
+
+    expect(getByRole('checkbox')).toBeDefined();
+    expect(queryByRole('text')).toBeNull();
+    const icon = getByRole('image');
+    expect(icon).toBeDefined();
+    expect(icon.props.source).toEqual(icons.checkboxOutline);
   });
 
-  it('renders as expected with accessibilityRole', () => {
-    const { toJSON } = render(
-      <Checkbox value="" onChange={onChange} accessibilityRole={'none'} />
+  it('renders as expected when disabled', () => {
+    const { toJSON, getByTestId } = render(<Checkbox {...props} disabled />);
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(getByTestId(testID).props.accessibilityState).toHaveProperty(
+      'disabled',
+      true
+    );
+  });
+
+  it('renders as expected with custom accessibilityRole', () => {
+    const { toJSON, getByRole, queryByRole } = render(
+      <Checkbox {...props} accessibilityRole={'none'} />
     );
     expect(toJSON()).toMatchSnapshot();
+
+    expect(getByRole('none')).toBeDefined();
+    expect(queryByRole('checkbox')).toBeNull();
   });
 
   it('calls the expected handler when selected', () => {
-    const { getByRole } = render(<Checkbox value="" onChange={onChange} />);
-    const checkbox = getByRole('checkbox');
+    const { getByTestId } = render(<Checkbox {...props} />);
+    const checkbox = getByTestId(testID);
     fireEvent.press(checkbox);
     expect(onChange).toHaveBeenCalledTimes(1);
   });
 
   it('does nothing when disabled', () => {
-    const { getByRole } = render(
-      <Checkbox value="" onChange={onChange} disabled />
-    );
-    const checkbox = getByRole('checkbox');
+    const { getByTestId } = render(<Checkbox {...props} disabled />);
+    const checkbox = getByTestId(testID);
     fireEvent.press(checkbox);
     expect(onChange).not.toHaveBeenCalled();
   });
+
+  it('renders as expected when passing a number to the size prop', () => {
+    const customSize = 42;
+
+    const { toJSON, getByTestId, getByRole } = render(
+      <Checkbox {...props} size={customSize} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current, 'end');
+
+    expect(getByTestId(testID).props.style).toStrictEqual([
+      themedStyle.container,
+      undefined,
+    ]);
+
+    const iconStyle = (
+      getByRole('image').props.style as IconStyles
+    )[0] as ImageStyle;
+    expect(iconStyle.height).toBe(customSize);
+    expect(iconStyle.width).toBe(customSize);
+  });
+
+  it('applies label position prop', () => {
+    const customLabelPosition = 'bottom';
+    const { toJSON, getByTestId } = render(
+      <Checkbox {...props} labelPosition={customLabelPosition} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+
+    const checkboxStyle = (
+      getByTestId(testID).props.style as IconStyles
+    )[0] as ViewStyle;
+    expect(checkboxStyle.flexDirection).toBe('column');
+  });
+
+  it('applies theme and style props', () => {
+    const labelPosition = 'end';
+    const customStyle = { container: { padding: 10 }, icon: {}, label: {} };
+
+    const { toJSON, getByTestId } = render(
+      <Checkbox
+        {...props}
+        style={customStyle.container}
+        iconStyle={customStyle.icon}
+        labelStyle={customStyle.label}
+        labelPosition={labelPosition}
+      />
+    );
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current, labelPosition);
+
+    expect(toJSON()).toMatchSnapshot();
+
+    const checkbox = getByTestId(testID);
+    expect(checkbox.props.style).toStrictEqual([
+      themedStyle.container,
+      customStyle.container,
+    ]);
+  });
 });