@hero-design/rn 7.2.2 → 7.3.0

package/src/components/Avatar/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Avatar renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderColor": "#7622d7",
+        "borderRadius": 16,
+        "borderWidth": 1,
+        "height": 32,
+        "overflow": "hidden",
+        "width": 32,
+      },
+      undefined,
+    ]
+  }
+  testID="avatar"
+  themeIntent="primary"
+  themeSize="small"
+>
+  <Image
+    resizeMode="cover"
+    source={
+      Object {
+        "uri": "https://i.pravatar.cc/300",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "height": 32,
+          "width": 32,
+        },
+        undefined,
+      ]
+    }
+    themeSize="small"
+  />
+</View>
+`;
+
+exports[`Avatar trigger press function correctly 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "borderColor": "#7622d7",
+      "borderRadius": 16,
+      "borderWidth": 1,
+      "height": 32,
+      "opacity": 1,
+      "overflow": "hidden",
+      "width": 32,
+    }
+  }
+  testID="avatar"
+>
+  <Image
+    resizeMode="cover"
+    source={
+      Object {
+        "uri": "https://i.pravatar.cc/300",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "height": 32,
+          "width": 32,
+        },
+        undefined,
+      ]
+    }
+    themeSize="small"
+  />
+</View>
+`;

package/src/components/Avatar/__tests__/index.spec.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Avatar from '..';
+
+describe('Avatar', () => {
+  const source = { uri: 'https://i.pravatar.cc/300' };
+  const pressFn = jest.fn();
+
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(<Avatar testID="avatar" source={source} />);
+    expect(wrapper.queryAllByTestId('avatar')).toHaveLength(1);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('trigger press function correctly', () => {
+    const wrapper = renderWithTheme(
+      <Avatar testID="avatar" source={source} onPress={pressFn} />
+    );
+    fireEvent.press(wrapper.getByTestId('avatar'));
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(pressFn).toBeCalled();
+  });
+});

package/src/components/Avatar/index.tsx

@@ -0,0 +1,71 @@
+import {
+  ImageSourcePropType,
+  StyleProp,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+import React from 'react';
+import {
+  StyledImage,
+  StyledPressable,
+  StyledText,
+  StyledTextWrapper,
+  StyledView,
+} from './StyledAvatar';
+
+interface AvatarProps extends ViewProps {
+  /** Callback function when pressing component. */
+  onPress?: () => void;
+  /** Image source to be displayed on avatar. */
+  source?: ImageSourcePropType;
+  /** Renders title in the placeholder. */
+  title?: string;
+  /**
+   * Intent of the Icon.
+   */
+  intent?: 'primary' | 'info' | 'danger' | 'success' | 'warning';
+  /** Size of the avatar. */
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Avatar = ({
+  onPress,
+  source,
+  testID,
+  style,
+  title,
+  size = 'small',
+  intent = 'primary',
+}: AvatarProps) => {
+  const Wrapper = onPress ? StyledPressable : StyledView;
+  return title !== undefined || source !== undefined ? (
+    <Wrapper
+      testID={testID}
+      onPress={onPress}
+      themeIntent={intent}
+      themeSize={size}
+      style={style}
+    >
+      {title !== undefined && source === undefined && (
+        <StyledTextWrapper>
+          <StyledText themeIntent={intent} themeSize={size}>
+            {title}
+          </StyledText>
+        </StyledTextWrapper>
+      )}
+      {source !== undefined && (
+        <StyledImage resizeMode="cover" source={source} themeSize={size} />
+      )}
+    </Wrapper>
+  ) : null;
+};
+
+export default Avatar;

package/src/components/Badge/Status.tsx

@@ -0,0 +1,77 @@
+import { View, StyleProp, ViewStyle, ViewProps, Animated } from 'react-native';
+import React, { ReactNode } from 'react';
+import { StyledStatus } from './StyledBadge';
+
+export interface StatusProps extends ViewProps {
+  /*
+   * The Status Badge's content.
+   */
+  children: ReactNode;
+  /**
+   * Whether the Status Badge is visible.
+   */
+  visible?: boolean;
+  /**
+  /**
+   * Visual intent color to apply to Status Badge.
+   */
+  intent?: 'success' | 'warning' | 'danger' | 'info' | 'archived';
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Status = ({
+  children,
+  visible = true,
+  intent = 'danger',
+  style,
+  testID,
+  ...nativeProps
+}: StatusProps): JSX.Element => {
+  const { current: opacity } = React.useRef<Animated.Value>(
+    new Animated.Value(visible ? 1 : 0)
+  );
+  const isFirstRendering = React.useRef<boolean>(true);
+
+  React.useEffect(() => {
+    // Do not run animation on very first rendering
+    if (isFirstRendering.current) {
+      isFirstRendering.current = false;
+      return;
+    }
+
+    Animated.timing(opacity, {
+      toValue: visible ? 1 : 0,
+      duration: 150,
+      useNativeDriver: true,
+    }).start();
+  }, [visible, opacity]);
+
+  return (
+    <View {...nativeProps} style={style} testID={testID}>
+      {children}
+      <StyledStatus
+        style={{
+          opacity,
+          transform: [
+            {
+              scale: opacity.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0.5, 1],
+              }),
+            },
+          ],
+        }}
+        themeIntent={intent}
+      />
+    </View>
+  );
+};
+
+export default Status;

package/src/components/Badge/StyledBadge.tsx

@@ -1,32 +1,44 @@
-import { View, Text } from 'react-native';
+import { Animated, Text } from 'react-native';
 import styled from '@emotion/native';
 
-const BACKGROUND_INTENTS = {
-  success: 'successBackground',
-  warning: 'warningBackground',
-  danger: 'dangerBackground',
-  info: 'infoBackground',
-} as const;
+type ThemeIntent = 'success' | 'warning' | 'danger' | 'info' | 'archived';
+type ThemePadding = 'narrowContent' | 'wideContent';
 
-type ThemeIntent = 'success' | 'warning' | 'danger' | 'info';
+const StyledView = styled(Animated.View)<{
+  themeIntent: ThemeIntent;
+  themePadding: ThemePadding;
+}>(({ themeIntent, themePadding, theme }) => ({
+  height: theme.__hd__.badge.sizes.height,
+  minWidth: theme.__hd__.badge.sizes.minWidth,
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: theme.__hd__.badge.colors[themeIntent],
+  borderRadius: theme.radii.rounded,
+  paddingHorizontal:
+    themePadding === 'wideContent'
+      ? theme.__hd__.badge.space.horizontalPadding
+      : undefined,
+}));
 
-const StyledView = styled(View)<{ themeIntent: ThemeIntent }>(
-  ({ themeIntent, theme }) => ({
-    borderWidth: theme.__hd__.badge.borderWidths.default,
-    borderRadius: theme.__hd__.badge.radii.default,
-    paddingVertical: theme.__hd__.badge.space.verticalPadding,
-    paddingHorizontal: theme.__hd__.badge.space.horizontalPadding,
-    borderColor: theme.__hd__.badge.colors[themeIntent],
-    backgroundColor: theme.__hd__.badge.colors[BACKGROUND_INTENTS[themeIntent]],
-  })
-);
+const StyledText = styled(Text)(({ theme }) => ({
+  fontFamily: theme.__hd__.badge.fonts.default,
+  fontSize: theme.__hd__.badge.fontSizes.default,
+  color: theme.__hd__.badge.colors.text,
+  includeFontPadding: false,
+  textAlignVertical: 'center',
+  textAlign: 'center',
+}));
 
-const StyledText = styled(Text)<{ themeIntent: ThemeIntent }>(
-  ({ themeIntent, theme }) => ({
-    fontFamily: theme.__hd__.badge.font.default,
-    fontSize: theme.__hd__.badge.fontSize.default,
-    color: theme.__hd__.badge.colors[themeIntent],
-  })
-);
+const StyledStatus = styled(Animated.View)<{
+  themeIntent: ThemeIntent;
+}>(({ themeIntent, theme }) => ({
+  position: 'absolute',
+  top: theme.__hd__.badge.space.statusPositionTop,
+  right: theme.__hd__.badge.space.statusPositionRight,
+  height: theme.__hd__.badge.sizes.statusHeight,
+  width: theme.__hd__.badge.sizes.statusWidth,
+  backgroundColor: theme.__hd__.badge.colors[themeIntent],
+  borderRadius: theme.radii.rounded,
+}));
 
-export { StyledView, StyledText };
+export { StyledView, StyledText, StyledStatus };

package/src/components/Badge/__tests__/Badge.spec.tsx

@@ -38,4 +38,20 @@ describe('Badge', () => {
     expect(toJSON()).toMatchSnapshot();
     expect(getByText('SUBMITTED')).toBeDefined();
   });
+
+  it('renders correctly with custom props', () => {
+    const { getByText, getByTestId, toJSON } = renderWithTheme(
+      <Badge
+        content={90}
+        intent="success"
+        max={50}
+        visible
+        testID="number-badge"
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByTestId('number-badge')).toBeDefined();
+    expect(getByText('50+')).toBeDefined();
+  });
 });

package/src/components/Badge/__tests__/Status.spec.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Badge from '..';
+import Typography from '../../Typography';
+import Icon from '../../Icon';
+
+describe('Status Badge', () => {
+  it('renders correctly', () => {
+    const { getByTestId, toJSON } = renderWithTheme(
+      <Badge.Status>
+        <Icon icon="activate" testID="activate-icon" />
+      </Badge.Status>
+    );
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByTestId('activate-icon')).toBeDefined();
+  });
+
+  it('renders correctly with intent', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <Badge.Status intent="success">
+        <Typography.Text>Activity</Typography.Text>
+      </Badge.Status>
+    );
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Activity')).toBeDefined();
+  });
+});

package/src/components/Badge/__tests__/__snapshots__/Badge.spec.tsx.snap

@@ -2,33 +2,42 @@
 
 exports[`Badge has danger style when intent is danger 1`] = `
 <View
+  collapsable={false}
+  nativeID="animatedComponent"
   style={
-    Array [
-      Object {
-        "backgroundColor": "#fcebe7",
-        "borderColor": "#de350b",
-        "borderRadius": 4,
-        "borderWidth": 1,
-        "paddingHorizontal": 8,
-        "paddingVertical": 2,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#de350b",
+      "borderRadius": 999,
+      "height": 20,
+      "justifyContent": "center",
+      "minWidth": 20,
+      "opacity": 1,
+      "paddingHorizontal": 8,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+    }
   }
   themeIntent="danger"
+  themePadding="wideContent"
 >
   <Text
     style={
       Array [
         Object {
-          "color": "#de350b",
+          "color": "#ffffff",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
+          "includeFontPadding": false,
+          "textAlign": "center",
+          "textAlignVertical": "center",
         },
         undefined,
       ]
     }
-    themeIntent="danger"
   >
     DECLINED
   </Text>
@@ -37,33 +46,42 @@ exports[`Badge has danger style when intent is danger 1`] = `
 
 exports[`Badge has info style when intent is info 1`] = `
 <View
+  collapsable={false}
+  nativeID="animatedComponent"
   style={
-    Array [
-      Object {
-        "backgroundColor": "#ecf0ff",
-        "borderColor": "#4568fb",
-        "borderRadius": 4,
-        "borderWidth": 1,
-        "paddingHorizontal": 8,
-        "paddingVertical": 2,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#4568fb",
+      "borderRadius": 999,
+      "height": 20,
+      "justifyContent": "center",
+      "minWidth": 20,
+      "opacity": 1,
+      "paddingHorizontal": 8,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+    }
   }
   themeIntent="info"
+  themePadding="wideContent"
 >
   <Text
     style={
       Array [
         Object {
-          "color": "#4568fb",
+          "color": "#ffffff",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
+          "includeFontPadding": false,
+          "textAlign": "center",
+          "textAlignVertical": "center",
         },
         undefined,
       ]
     }
-    themeIntent="info"
   >
     SUBMITTED
   </Text>
@@ -72,33 +90,42 @@ exports[`Badge has info style when intent is info 1`] = `
 
 exports[`Badge has success style when intent is success 1`] = `
 <View
+  collapsable={false}
+  nativeID="animatedComponent"
   style={
-    Array [
-      Object {
-        "backgroundColor": "#f0fef4",
-        "borderColor": "#017d6d",
-        "borderRadius": 4,
-        "borderWidth": 1,
-        "paddingHorizontal": 8,
-        "paddingVertical": 2,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#017d6d",
+      "borderRadius": 999,
+      "height": 20,
+      "justifyContent": "center",
+      "minWidth": 20,
+      "opacity": 1,
+      "paddingHorizontal": 8,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+    }
   }
   themeIntent="success"
+  themePadding="wideContent"
 >
   <Text
     style={
       Array [
         Object {
-          "color": "#017d6d",
+          "color": "#ffffff",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
+          "includeFontPadding": false,
+          "textAlign": "center",
+          "textAlignVertical": "center",
         },
         undefined,
       ]
     }
-    themeIntent="success"
   >
     APPROVED
   </Text>
@@ -107,35 +134,89 @@ exports[`Badge has success style when intent is success 1`] = `
 
 exports[`Badge has warning style when intent is warning 1`] = `
 <View
+  collapsable={false}
+  nativeID="animatedComponent"
   style={
-    Array [
-      Object {
-        "backgroundColor": "#fff6eb",
-        "borderColor": "#d98a2c",
-        "borderRadius": 4,
-        "borderWidth": 1,
-        "paddingHorizontal": 8,
-        "paddingVertical": 2,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#d98a2c",
+      "borderRadius": 999,
+      "height": 20,
+      "justifyContent": "center",
+      "minWidth": 20,
+      "opacity": 1,
+      "paddingHorizontal": 8,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+    }
   }
   themeIntent="warning"
+  themePadding="wideContent"
 >
   <Text
     style={
       Array [
         Object {
-          "color": "#d98a2c",
+          "color": "#ffffff",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
+          "includeFontPadding": false,
+          "textAlign": "center",
+          "textAlignVertical": "center",
         },
         undefined,
       ]
     }
-    themeIntent="warning"
   >
     PENDING
   </Text>
 </View>
 `;
+
+exports[`Badge renders correctly with custom props 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#017d6d",
+      "borderRadius": 999,
+      "height": 20,
+      "justifyContent": "center",
+      "minWidth": 20,
+      "opacity": 1,
+      "paddingHorizontal": 8,
+      "transform": Array [
+        Object {
+          "scale": 1,
+        },
+      ],
+    }
+  }
+  testID="number-badge"
+  themeIntent="success"
+  themePadding="wideContent"
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#ffffff",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+          "includeFontPadding": false,
+          "textAlign": "center",
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ]
+    }
+  >
+    50+
+  </Text>
+</View>
+`;