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

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

@@ -1,5 +1,141 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Checkbox applies label position prop 1`] = `
+<View
+  accessibilityRole="checkbox"
+  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",
+        "flexDirection": "column",
+        "padding": 8,
+      },
+      undefined,
+    ]
+  }
+  testID="checkboxTestID"
+>
+  <Image
+    accessibilityRole="image"
+    source={
+      Object {
+        "testUri": "../../../src/assets/icons/checkboxOutline.png",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "height": 24,
+          "resizeMode": "contain",
+          "tintColor": undefined,
+          "width": 24,
+        },
+        undefined,
+      ]
+    }
+  />
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        undefined,
+      ]
+    }
+  >
+    test
+  </Text>
+</View>
+`;
+
+exports[`Checkbox applies theme and style props 1`] = `
+<View
+  accessibilityRole="checkbox"
+  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",
+        "flexDirection": "row",
+        "padding": 8,
+      },
+      Object {
+        "padding": 10,
+      },
+    ]
+  }
+  testID="checkboxTestID"
+>
+  <Image
+    accessibilityRole="image"
+    source={
+      Object {
+        "testUri": "../../../src/assets/icons/checkboxOutline.png",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "height": 24,
+          "resizeMode": "contain",
+          "tintColor": undefined,
+          "width": 24,
+        },
+        Object {},
+      ]
+    }
+  />
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Object {},
+      ]
+    }
+  >
+    test
+  </Text>
+</View>
+`;
+
 exports[`Checkbox renders as expected when disabled 1`] = `
 <View
   accessibilityRole="checkbox"
@@ -26,13 +162,15 @@ exports[`Checkbox renders as expected when disabled 1`] = `
         "alignItems": "center",
         "flexDirection": "row",
         "opacity": 0.6,
-        "padding": 4,
+        "padding": 8,
       },
       undefined,
     ]
   }
+  testID="checkboxTestID"
 >
   <Image
+    accessibilityRole="image"
     source={
       Object {
         "testUri": "../../../src/assets/icons/checkboxOutline.png",
@@ -41,15 +179,100 @@ exports[`Checkbox renders as expected when disabled 1`] = `
     style={
       Array [
         Object {
-          "height": undefined,
+          "height": 24,
           "resizeMode": "contain",
           "tintColor": undefined,
-          "width": undefined,
+          "width": 24,
         },
         undefined,
       ]
     }
   />
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        undefined,
+      ]
+    }
+  >
+    test
+  </Text>
+</View>
+`;
+
+exports[`Checkbox renders as expected when passing a number to the size prop 1`] = `
+<View
+  accessibilityRole="checkbox"
+  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",
+        "flexDirection": "row",
+        "padding": 8,
+      },
+      undefined,
+    ]
+  }
+  testID="checkboxTestID"
+>
+  <Image
+    accessibilityRole="image"
+    source={
+      Object {
+        "testUri": "../../../src/assets/icons/checkboxOutline.png",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "height": 42,
+          "resizeMode": "contain",
+          "tintColor": undefined,
+          "width": 42,
+        },
+        undefined,
+      ]
+    }
+  />
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        undefined,
+      ]
+    }
+  >
+    test
+  </Text>
 </View>
 `;
 
@@ -73,14 +296,15 @@ exports[`Checkbox renders as expected when selected is false 1`] = `
       Object {
         "alignItems": "center",
         "flexDirection": "row",
-        "opacity": 1,
-        "padding": 4,
+        "padding": 8,
       },
       undefined,
     ]
   }
+  testID="checkboxTestID"
 >
   <Image
+    accessibilityRole="image"
     source={
       Object {
         "testUri": "../../../src/assets/icons/checkboxOutline.png",
@@ -89,15 +313,33 @@ exports[`Checkbox renders as expected when selected is false 1`] = `
     style={
       Array [
         Object {
-          "height": undefined,
+          "height": 24,
           "resizeMode": "contain",
           "tintColor": undefined,
-          "width": undefined,
+          "width": 24,
         },
         undefined,
       ]
     }
   />
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        undefined,
+      ]
+    }
+  >
+    test
+  </Text>
 </View>
 `;
 
@@ -121,14 +363,15 @@ exports[`Checkbox renders as expected when selected is true 1`] = `
       Object {
         "alignItems": "center",
         "flexDirection": "row",
-        "opacity": 1,
-        "padding": 4,
+        "padding": 8,
       },
       undefined,
     ]
   }
+  testID="checkboxTestID"
 >
   <Image
+    accessibilityRole="image"
     source={
       Object {
         "testUri": "../../../src/assets/icons/checkboxFilled.png",
@@ -137,19 +380,37 @@ exports[`Checkbox renders as expected when selected is true 1`] = `
     style={
       Array [
         Object {
-          "height": undefined,
+          "height": 24,
           "resizeMode": "contain",
           "tintColor": undefined,
-          "width": undefined,
+          "width": 24,
         },
         undefined,
       ]
     }
   />
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        undefined,
+      ]
+    }
+  >
+    test
+  </Text>
 </View>
 `;
 
-exports[`Checkbox renders as expected with accessibilityRole 1`] = `
+exports[`Checkbox renders as expected with custom accessibilityRole 1`] = `
 <View
   accessibilityRole="none"
   accessible={true}
@@ -169,14 +430,82 @@ exports[`Checkbox renders as expected with accessibilityRole 1`] = `
       Object {
         "alignItems": "center",
         "flexDirection": "row",
-        "opacity": 1,
-        "padding": 4,
+        "padding": 8,
+      },
+      undefined,
+    ]
+  }
+  testID="checkboxTestID"
+>
+  <Image
+    accessibilityRole="image"
+    source={
+      Object {
+        "testUri": "../../../src/assets/icons/checkboxOutline.png",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "height": 24,
+          "resizeMode": "contain",
+          "tintColor": undefined,
+          "width": 24,
+        },
+        undefined,
+      ]
+    }
+  />
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        undefined,
+      ]
+    }
+  >
+    test
+  </Text>
+</View>
+`;
+
+exports[`Checkbox renders as expected without a label 1`] = `
+<View
+  accessibilityRole="checkbox"
+  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",
+        "flexDirection": "row",
+        "padding": 8,
       },
       undefined,
     ]
   }
+  testID="checkboxTestID"
 >
   <Image
+    accessibilityRole="image"
     source={
       Object {
         "testUri": "../../../src/assets/icons/checkboxOutline.png",
@@ -185,10 +514,10 @@ exports[`Checkbox renders as expected with accessibilityRole 1`] = `
     style={
       Array [
         Object {
-          "height": undefined,
+          "height": 24,
           "resizeMode": "contain",
           "tintColor": undefined,
-          "width": undefined,
+          "width": 24,
         },
         undefined,
       ]

package/src/primitives/Checkbox/index.ts

@@ -1,2 +1,2 @@
 export { default as Checkbox } from './Checkbox';
-export type { CheckboxProps } from './types';
+export type { CheckboxProps, CheckboxStyles } from './types';

package/src/primitives/Checkbox/styles.ts

@@ -1,8 +1,33 @@
-import { CheckboxStyle } from './types';
+import { StyleSheet } from 'react-native';
 
-export const styles: CheckboxStyle = {
-  container: {
-    alignItems: 'center',
-    padding: 4,
-  },
+import { StrictTheme } from '../../theme';
+import { CheckboxStyles } from './types';
+import { getFlexDirectionFromLabelPosition } from '../Label/utils';
+import { LabelPosition } from '../Label/types';
+
+export const getThemedStyles = (
+  theme: StrictTheme,
+  labelPosition: LabelPosition
+): CheckboxStyles => {
+  const { tokens, components } = theme;
+  const { opacities, space } = tokens;
+
+  return StyleSheet.create({
+    container: {
+      alignItems: 'center',
+      padding: space.xs,
+      flexDirection: getFlexDirectionFromLabelPosition(labelPosition),
+      ...components?.checkbox?.container,
+    },
+    disabled: {
+      opacity: opacities[60],
+      ...components?.checkbox?.disabled,
+    },
+    icon: {
+      ...components?.checkbox?.icon,
+    },
+    label: {
+      ...components?.checkbox?.label,
+    },
+  });
 };

package/src/primitives/Checkbox/types.ts

@@ -1,4 +1,10 @@
-import { PressableProps, StyleProp, ViewStyle } from 'react-native';
+import {
+  ImageStyle,
+  PressableProps,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
 import { IconProps } from '../Icon/types';
 import { LabelProps } from '../Label';
 import { LabelPosition } from '../Label/types';
@@ -10,11 +16,14 @@ export interface CheckboxProps<T> extends PressableProps {
   labelStyle?: LabelProps['style'];
   onChange: (value: T) => void;
   selected?: boolean;
-  size?: number;
+  size?: IconProps['size'];
   style?: StyleProp<ViewStyle>;
   value: T;
 }
 
-export interface CheckboxStyle {
-  container: ViewStyle;
+export interface CheckboxStyles {
+  container?: ViewStyle;
+  disabled?: ViewStyle;
+  icon?: ImageStyle;
+  label?: TextStyle;
 }

package/src/primitives/Divider/Divider.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { useTheme } from '../../theme';
+import { Label } from '../Label';
+import { getThemedStyles } from './styles';
+import { DividerProps } from './types';
+
+export const DIVIDER_LINE_TEST_ID = 'amplify__divider__line';
+
+export default function Divider({
+  children,
+  labelStyle,
+  lineStyle,
+  style,
+}: DividerProps): JSX.Element {
+  const theme = useTheme();
+  const themedStyle = getThemedStyles(theme);
+
+  return (
+    <View style={[themedStyle.container, style]}>
+      <View
+        style={[themedStyle.line, lineStyle]}
+        testID={DIVIDER_LINE_TEST_ID}
+      />
+      {children ? (
+        <>
+          <Label style={[themedStyle.label, labelStyle]}>{children}</Label>
+          <View style={[themedStyle.line, lineStyle]} />
+        </>
+      ) : null}
+    </View>
+  );
+}

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render, renderHook } from '@testing-library/react-native';
+
+import { useTheme } from '../../../theme';
+import Divider, { DIVIDER_LINE_TEST_ID } from '../Divider';
+import { getThemedStyles } from '../styles';
+import { getThemedStyles as getThemedLabelStyles } from '../../Label/styles';
+
+const labelText = 'Divider label';
+
+describe('Divider', () => {
+  it('renders as expected with label', () => {
+    const { toJSON, queryByText } = render(<Divider>{labelText}</Divider>);
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(queryByText(labelText)).toBeDefined();
+  });
+
+  it('renders as expected without label', () => {
+    const { toJSON } = render(<Divider />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('applies theme and style props', () => {
+    const customLabelStyle = { color: 'red' };
+    const customLineStyle = { backgroundColor: 'blue' };
+
+    const { toJSON, getByText, getByTestId } = render(
+      <Divider labelStyle={customLabelStyle} lineStyle={customLineStyle}>
+        {labelText}
+      </Divider>
+    );
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+    const themedLabelStyle = getThemedLabelStyles(result.current);
+
+    const label = getByText(labelText);
+    const line = getByTestId(DIVIDER_LINE_TEST_ID);
+
+    expect(label.props.style).toStrictEqual([
+      themedLabelStyle.text,
+      themedLabelStyle.primary,
+      [themedStyle.label, customLabelStyle],
+    ]);
+
+    expect(line.props.style).toStrictEqual([themedStyle.line, customLineStyle]);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});