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

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

@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Heading applies style props 1`] = `
+exports[`Heading applies theme and style props 1`] = `
 <Text
   accessibilityRole="header"
   style={
     Array [
       Object {
-        "color": "black",
+        "color": "hsl(210, 50%, 10%)",
       },
       Object {
-        "fontSize": 16,
+        "fontSize": 14,
         "fontWeight": "900",
-        "lineHeight": 24,
+        "lineHeight": 21,
       },
       Object {
         "color": "red",
@@ -19,7 +19,7 @@ exports[`Heading applies style props 1`] = `
     ]
   }
 >
-  Test Heading
+  Styled Heading
 </Text>
 `;
 
@@ -29,12 +29,12 @@ exports[`Heading renders a level 1 Heading as expected 1`] = `
   style={
     Array [
       Object {
-        "color": "black",
+        "color": "hsl(210, 50%, 10%)",
       },
       Object {
-        "fontSize": 56,
+        "fontSize": 40,
         "fontWeight": "100",
-        "lineHeight": 84,
+        "lineHeight": 60,
       },
       undefined,
     ]
@@ -50,12 +50,12 @@ exports[`Heading renders a level 2 Heading as expected 1`] = `
   style={
     Array [
       Object {
-        "color": "black",
+        "color": "hsl(210, 50%, 10%)",
       },
       Object {
-        "fontSize": 44,
+        "fontSize": 32,
         "fontWeight": "200",
-        "lineHeight": 66,
+        "lineHeight": 48,
       },
       undefined,
     ]
@@ -71,12 +71,12 @@ exports[`Heading renders a level 3 Heading as expected 1`] = `
   style={
     Array [
       Object {
-        "color": "black",
+        "color": "hsl(210, 50%, 10%)",
       },
       Object {
-        "fontSize": 34,
+        "fontSize": 24,
         "fontWeight": "300",
-        "lineHeight": 51,
+        "lineHeight": 36,
       },
       undefined,
     ]
@@ -92,12 +92,12 @@ exports[`Heading renders a level 4 Heading as expected 1`] = `
   style={
     Array [
       Object {
-        "color": "black",
+        "color": "hsl(210, 50%, 10%)",
       },
       Object {
-        "fontSize": 26,
+        "fontSize": 20,
         "fontWeight": "500",
-        "lineHeight": 39,
+        "lineHeight": 30,
       },
       undefined,
     ]
@@ -113,12 +113,12 @@ exports[`Heading renders a level 5 Heading as expected 1`] = `
   style={
     Array [
       Object {
-        "color": "black",
+        "color": "hsl(210, 50%, 10%)",
       },
       Object {
-        "fontSize": 20,
+        "fontSize": 16,
         "fontWeight": "700",
-        "lineHeight": 30,
+        "lineHeight": 24,
       },
       undefined,
     ]
@@ -134,12 +134,12 @@ exports[`Heading renders a level 6 Heading as expected 1`] = `
   style={
     Array [
       Object {
-        "color": "black",
+        "color": "hsl(210, 50%, 10%)",
       },
       Object {
-        "fontSize": 16,
+        "fontSize": 14,
         "fontWeight": "900",
-        "lineHeight": 24,
+        "lineHeight": 21,
       },
       undefined,
     ]
@@ -148,3 +148,24 @@ exports[`Heading renders a level 6 Heading as expected 1`] = `
   Heading level 6
 </Text>
 `;
+
+exports[`Heading renders a level 6 Heading by default 1`] = `
+<Text
+  accessibilityRole="header"
+  style={
+    Array [
+      Object {
+        "color": "hsl(210, 50%, 10%)",
+      },
+      Object {
+        "fontSize": 14,
+        "fontWeight": "900",
+        "lineHeight": 21,
+      },
+      undefined,
+    ]
+  }
+>
+  Test Heading
+</Text>
+`;

package/src/primitives/Heading/styles.ts

@@ -1,16 +1,55 @@
 import { StyleSheet } from 'react-native';
+import { StrictTheme } from '../../theme';
+
 import { getLineHeight } from '../../utils';
 import { HeadingStyles } from './types';
 
-export const styles: HeadingStyles = StyleSheet.create({
-  text: {
-    color: 'black',
-  },
-  // these values are completely arbitrary for now
-  1: { fontSize: 56, fontWeight: '100', lineHeight: getLineHeight(56) },
-  2: { fontSize: 44, fontWeight: '200', lineHeight: getLineHeight(44) },
-  3: { fontSize: 34, fontWeight: '300', lineHeight: getLineHeight(34) },
-  4: { fontSize: 26, fontWeight: '500', lineHeight: getLineHeight(26) },
-  5: { fontSize: 20, fontWeight: '700', lineHeight: getLineHeight(20) },
-  6: { fontSize: 16, fontWeight: '900', lineHeight: getLineHeight(16) },
-});
+export const getThemedStyles = (theme: StrictTheme): HeadingStyles => {
+  const {
+    components,
+    tokens: { colors, fontSizes, fontWeights },
+  } = theme;
+
+  return StyleSheet.create({
+    text: {
+      color: colors.font.primary,
+      ...components?.heading?.text,
+    },
+    1: {
+      fontSize: fontSizes.xxxl,
+      fontWeight: fontWeights.hairline,
+      lineHeight: getLineHeight(fontSizes.xxxl),
+      ...components?.heading?.[1],
+    },
+    2: {
+      fontSize: fontSizes.xxl,
+      fontWeight: fontWeights.thin,
+      lineHeight: getLineHeight(fontSizes.xxl),
+      ...components?.heading?.[2],
+    },
+    3: {
+      fontSize: fontSizes.xl,
+      fontWeight: fontWeights.light,
+      lineHeight: getLineHeight(fontSizes.xl),
+      ...components?.heading?.[3],
+    },
+    4: {
+      fontSize: fontSizes.large,
+      fontWeight: fontWeights.medium,
+      lineHeight: getLineHeight(fontSizes.large),
+      ...components?.heading?.[4],
+    },
+    5: {
+      fontSize: fontSizes.medium,
+      fontWeight: fontWeights.bold,
+      lineHeight: getLineHeight(fontSizes.medium),
+      ...components?.heading?.[5],
+    },
+    6: {
+      fontSize: fontSizes.small,
+      fontWeight: fontWeights.black,
+      lineHeight: getLineHeight(fontSizes.small),
+      ...components?.heading?.[6],
+    },
+  });
+};

package/src/primitives/Heading/types.ts

@@ -7,7 +7,7 @@ export interface HeadingProps extends TextProps {
 }
 
 export type HeadingStyles = {
-  text: TextStyle;
+  text?: TextStyle;
 } & {
   [key in Level]: TextStyle;
 };

package/src/primitives/Icon/Icon.tsx

@@ -1,20 +1,32 @@
 import React, { useMemo } from 'react';
 import { Animated, Image } from 'react-native';
 
-import { getStyles } from './styles';
+import { useTheme } from '../../theme';
+import { getThemedStyles } from './styles';
 import { IconProps } from './types';
 
 export default function Icon({
+  accessibilityRole = 'image',
   animated,
   color,
   size,
   style,
   ...rest
 }: IconProps): JSX.Element {
-  const { icon } = useMemo(() => getStyles(color, size), [color, size]);
+  const theme = useTheme();
+  const themedStyle = useMemo(
+    () => getThemedStyles(theme, color, size),
+    [theme, color, size]
+  );
+
+  const imageProps: IconProps = {
+    ...rest,
+    accessibilityRole,
+    style: [themedStyle.icon, style],
+  };
 
   if (animated) {
-    return <Animated.Image {...rest} style={[icon, style]} />;
+    return <Animated.Image {...imageProps} />;
   }
-  return <Image {...rest} style={[icon, style]} />;
+  return <Image {...imageProps} />;
 }

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

@@ -1,25 +1,100 @@
 import React from 'react';
-import { render } from '@testing-library/react-native';
+import { render, renderHook } from '@testing-library/react-native';
+import { ConsoleLogger as Logger } from '@aws-amplify/core';
+
+import { useTheme } from '../../../theme';
+import { getThemedStyles } from '../styles';
 import Icon from '../Icon';
+import { IconProps, iconSizes } from '..';
+import { Size } from '../types';
+
+// use empty mockImplementation to turn off console output
+const warnSpy = jest.spyOn(Logger.prototype, 'warn').mockImplementation();
 
 const MOCK_SOURCE = { uri: 'mock.png' };
+const testID = 'iconTestID';
+const props: IconProps = {
+  source: MOCK_SOURCE,
+  testID,
+};
 
 describe('Icon', () => {
   it('renders as expected', () => {
-    const { toJSON } = render(<Icon source={MOCK_SOURCE} />);
+    const { toJSON, getByTestId } = render(<Icon {...props} />);
     expect(toJSON()).toMatchSnapshot();
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    const image = getByTestId(testID);
+    expect(image.props.accessibilityRole).toEqual('image');
+    expect(image.props.source).toEqual(MOCK_SOURCE);
+
+    expect(themedStyle.icon.height).toEqual(iconSizes.medium);
+    expect(themedStyle.icon.width).toEqual(iconSizes.medium);
+    expect(image.props.style).toStrictEqual([themedStyle.icon, undefined]);
   });
 
   it('renders as expected with custom styles', () => {
     const customStyle = { tintColor: 'red' };
-    const { toJSON } = render(
-      <Icon source={MOCK_SOURCE} style={customStyle} />
+    const { toJSON, getByTestId } = render(
+      <Icon {...props} style={customStyle} />
     );
     expect(toJSON()).toMatchSnapshot();
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    expect(getByTestId(testID).props.style).toStrictEqual([
+      themedStyle.icon,
+      customStyle,
+    ]);
   });
 
   it('renders an animated icon', () => {
-    const { toJSON } = render(<Icon source={MOCK_SOURCE} animated />);
+    const { toJSON } = render(<Icon {...props} animated />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should override size as number', () => {
+    const testSize = 22;
+    const { toJSON, getByTestId } = render(<Icon {...props} size={testSize} />);
     expect(toJSON()).toMatchSnapshot();
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current, undefined, testSize);
+
+    const image = getByTestId(testID);
+    expect(themedStyle.icon.height).toEqual(testSize);
+    expect(themedStyle.icon.width).toEqual(testSize);
+    expect(image.props.style).toStrictEqual([themedStyle.icon, undefined]);
+  });
+
+  it('should override size as string', () => {
+    const testSize = 'large';
+    const { toJSON, getByTestId } = render(<Icon {...props} size={testSize} />);
+    expect(toJSON()).toMatchSnapshot();
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current, undefined, testSize);
+
+    const image = getByTestId(testID);
+    expect(themedStyle.icon.height).toEqual(iconSizes[testSize]);
+    expect(themedStyle.icon.width).toEqual(iconSizes[testSize]);
+    expect(image.props.style).toStrictEqual([themedStyle.icon, undefined]);
+  });
+
+  it('throws an error for invalid size type', () => {
+    const invalidSize = 'small_medium' as unknown as Size;
+
+    const { toJSON } = render(<Icon {...props} size={invalidSize} />);
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy).toHaveBeenCalledWith(
+      `"${invalidSize}" is not a valid icon size. Available values are: ${Object.keys(
+        iconSizes
+      )}`
+    );
   });
 });

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

@@ -2,6 +2,7 @@
 
 exports[`Icon renders an animated icon 1`] = `
 <Image
+  accessibilityRole="image"
   collapsable={false}
   source={
     Object {
@@ -10,17 +11,19 @@ exports[`Icon renders an animated icon 1`] = `
   }
   style={
     Object {
-      "height": undefined,
+      "height": 24,
       "resizeMode": "contain",
       "tintColor": undefined,
-      "width": undefined,
+      "width": 24,
     }
   }
+  testID="iconTestID"
 />
 `;
 
 exports[`Icon renders as expected 1`] = `
 <Image
+  accessibilityRole="image"
   source={
     Object {
       "uri": "mock.png",
@@ -29,19 +32,21 @@ exports[`Icon renders as expected 1`] = `
   style={
     Array [
       Object {
-        "height": undefined,
+        "height": 24,
         "resizeMode": "contain",
         "tintColor": undefined,
-        "width": undefined,
+        "width": 24,
       },
       undefined,
     ]
   }
+  testID="iconTestID"
 />
 `;
 
 exports[`Icon renders as expected with custom styles 1`] = `
 <Image
+  accessibilityRole="image"
   source={
     Object {
       "uri": "mock.png",
@@ -50,15 +55,85 @@ exports[`Icon renders as expected with custom styles 1`] = `
   style={
     Array [
       Object {
-        "height": undefined,
+        "height": 24,
         "resizeMode": "contain",
         "tintColor": undefined,
-        "width": undefined,
+        "width": 24,
       },
       Object {
         "tintColor": "red",
       },
     ]
   }
+  testID="iconTestID"
+/>
+`;
+
+exports[`Icon should override size as number 1`] = `
+<Image
+  accessibilityRole="image"
+  source={
+    Object {
+      "uri": "mock.png",
+    }
+  }
+  style={
+    Array [
+      Object {
+        "height": 22,
+        "resizeMode": "contain",
+        "tintColor": undefined,
+        "width": 22,
+      },
+      undefined,
+    ]
+  }
+  testID="iconTestID"
+/>
+`;
+
+exports[`Icon should override size as string 1`] = `
+<Image
+  accessibilityRole="image"
+  source={
+    Object {
+      "uri": "mock.png",
+    }
+  }
+  style={
+    Array [
+      Object {
+        "height": 32,
+        "resizeMode": "contain",
+        "tintColor": undefined,
+        "width": 32,
+      },
+      undefined,
+    ]
+  }
+  testID="iconTestID"
+/>
+`;
+
+exports[`Icon throws an error for invalid size type 1`] = `
+<Image
+  accessibilityRole="image"
+  source={
+    Object {
+      "uri": "mock.png",
+    }
+  }
+  style={
+    Array [
+      Object {
+        "height": 24,
+        "resizeMode": "contain",
+        "tintColor": undefined,
+        "width": 24,
+      },
+      undefined,
+    ]
+  }
+  testID="iconTestID"
 />
 `;

package/src/primitives/Icon/constants.ts

@@ -0,0 +1,9 @@
+import { IconSizes } from './types';
+
+export const iconSizes: IconSizes = {
+  xs: 16,
+  small: 20,
+  medium: 24,
+  large: 32,
+  xl: 48,
+};

package/src/primitives/Icon/index.ts

@@ -1,2 +1,3 @@
 export { default as Icon } from './Icon';
-export { IconProps } from './types';
+export { IconProps, IconStyles, IconSizes } from './types';
+export { iconSizes } from './constants';

package/src/primitives/Icon/styles.ts

@@ -1,16 +1,47 @@
 import { StyleSheet } from 'react-native';
+import { ConsoleLogger as Logger } from '@aws-amplify/core';
 
+import { StrictTheme } from '../../theme';
 import { IconProps, IconStyles } from './types';
+import { iconSizes } from './constants';
 
-export const getStyles = (
-  color: IconProps['color'],
-  size: IconProps['size']
-): IconStyles =>
-  StyleSheet.create({
+const logger = new Logger('Icon-logger');
+
+const getIconSize = (size: IconProps['size']): number => {
+  if (!size) {
+    return iconSizes.medium;
+  }
+
+  if (typeof size === 'number') {
+    return size;
+  }
+
+  if (!iconSizes[size]) {
+    logger.warn(
+      `"${size}" is not a valid icon size. Available values are: ${Object.keys(
+        iconSizes
+      )}`
+    );
+    return iconSizes.medium;
+  }
+  return iconSizes[size];
+};
+
+export const getThemedStyles = (
+  theme: StrictTheme,
+  color?: IconProps['color'],
+  size?: IconProps['size']
+): Required<IconStyles> => {
+  const { components } = theme;
+  const iconSize = getIconSize(size);
+
+  return StyleSheet.create({
     icon: {
-      height: size,
+      height: iconSize,
       resizeMode: 'contain',
       tintColor: color,
-      width: size,
+      width: iconSize,
+      ...components?.icon,
     },
   });
+};

package/src/primitives/Icon/types.ts

@@ -1,7 +1,10 @@
 import { ColorValue, ImageProps, ImageStyle } from 'react-native';
 
+export type Size = 'xs' | 'small' | 'medium' | 'large' | 'xl';
+export type IconSizes = Record<Size, number>;
+
 export interface IconStyles {
-  icon: ImageStyle;
+  icon?: ImageStyle;
 }
 
 export interface IconProps extends ImageProps {
@@ -18,5 +21,5 @@ export interface IconProps extends ImageProps {
   /**
    * Icon size
    */
-  size?: number;
+  size?: Size | number;
 }

package/src/primitives/IconButton/IconButton.tsx

@@ -1,18 +1,50 @@
-import React from 'react';
-import { Pressable } from 'react-native';
-import { Icon } from '../Icon';
+import React, { useCallback } from 'react';
+import {
+  Pressable,
+  PressableStateCallbackType,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 
+import { useTheme } from '../../theme';
+import { getThemedStyles } from './styles';
+import { Icon, iconSizes } from '../Icon';
 import { IconButtonProps } from './types';
 
 export default function IconButton({
+  accessibilityRole = 'button',
   color,
+  disabled,
   iconStyle,
+  size = iconSizes.medium,
   source,
-  size = 16,
+  style,
   ...rest
 }: IconButtonProps): JSX.Element {
+  const theme = useTheme();
+  const themedStyle = getThemedStyles(theme);
+
+  const pressableStyle = useCallback(
+    ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => {
+      const pressedStateStyle =
+        typeof style === 'function' ? style({ pressed }) : style;
+      return [
+        themedStyle.container,
+        disabled ? themedStyle.disabled : null,
+        pressed ? themedStyle.pressed : null,
+        pressedStateStyle,
+      ];
+    },
+    [disabled, style, themedStyle]
+  );
+
   return (
-    <Pressable {...rest}>
+    <Pressable
+      {...rest}
+      accessibilityRole={accessibilityRole}
+      disabled={disabled}
+      style={pressableStyle}
+    >
       <Icon color={color} size={size} source={source} style={iconStyle} />
     </Pressable>
   );