@hero-design/rn 7.1.3-alpha5 → 7.1.3-alpha8

package/src/components/BottomNavigation/__tests__/__snapshots__/{BottomNavigation.spec.tsx.snap → index.spec.tsx.snap}

@@ -14,21 +14,23 @@ exports[`BottomNavigation renders correctly 1`] = `
 >
   <View
     style={
-      Object {
-        "flexBasis": 0,
-        "flexGrow": 1,
-        "flexShrink": 1,
-        "overflow": "hidden",
-      }
+      Array [
+        Object {
+          "flex": 1,
+          "overflow": "hidden",
+        },
+        undefined,
+      ]
     }
   >
     <View
       style={
-        Object {
-          "flexBasis": 0,
-          "flexGrow": 1,
-          "flexShrink": 1,
-        }
+        Array [
+          Object {
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <View
@@ -38,14 +40,14 @@ exports[`BottomNavigation renders correctly 1`] = `
         pointerEvents="auto"
         removeClippedSubviews={false}
         style={
-          Object {
-            "display": "flex",
-            "flexBasis": 0,
-            "flexGrow": 1,
-            "flexShrink": 1,
-          }
+          Array [
+            Object {
+              "display": "flex",
+              "flex": 1,
+            },
+            undefined,
+          ]
         }
-        testID="route-screen-home"
         themeVisibility={true}
       >
         <Text>
@@ -55,21 +57,24 @@ exports[`BottomNavigation renders correctly 1`] = `
     </View>
     <View
       style={
-        Object {
-          "backgroundColor": "#ffffff",
-          "elevation": 10,
-          "height": 72,
-          "paddingBottom": 0,
-          "paddingLeft": 0,
-          "paddingRight": 0,
-          "shadowColor": "#292a2b",
-          "shadowOffset": Object {
-            "height": 3,
-            "width": 0,
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "elevation": 10,
+            "height": 72,
+            "paddingBottom": 0,
+            "paddingLeft": 0,
+            "paddingRight": 0,
+            "shadowColor": "#292a2b",
+            "shadowOffset": Object {
+              "height": 3,
+              "width": 0,
+            },
+            "shadowOpacity": 0.27,
+            "shadowRadius": 4.65,
           },
-          "shadowOpacity": 0.27,
-          "shadowRadius": 4.65,
-        }
+          undefined,
+        ]
       }
       themeInsets={
         Object {
@@ -82,14 +87,15 @@ exports[`BottomNavigation renders correctly 1`] = `
     >
       <View
         style={
-          Object {
-            "alignItems": "center",
-            "flexBasis": 0,
-            "flexDirection": "row",
-            "flexGrow": 1,
-            "flexShrink": 1,
-            "overflow": "hidden",
-          }
+          Array [
+            Object {
+              "alignItems": "center",
+              "flex": 1,
+              "flexDirection": "row",
+              "overflow": "hidden",
+            },
+            undefined,
+          ]
         }
       >
         <View
@@ -103,21 +109,25 @@ exports[`BottomNavigation renders correctly 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "alignItems": "center",
-              "flexBasis": 0,
-              "flexGrow": 1,
-              "flexShrink": 1,
-            }
+            Array [
+              Object {
+                "alignItems": "center",
+                "flex": 1,
+              },
+              undefined,
+            ]
           }
         >
           <HeroIcon
             name="home"
             style={
-              Object {
-                "color": "#7622d7",
-                "fontSize": 24,
-              }
+              Array [
+                Object {
+                  "color": "#7622d7",
+                  "fontSize": 24,
+                },
+                undefined,
+              ]
             }
             testID="hero-icon-home"
             themeIntent="primary"
@@ -129,14 +139,17 @@ exports[`BottomNavigation renders correctly 1`] = `
               Array [
                 Object {
                   "color": "#7622d7",
-                  "fontFamily": "Be Vietnam Pro SemiBold",
+                  "fontFamily": "BeVietnamPro-SemiBold",
                   "fontSize": 12,
                   "letterSpacing": 0.36,
                   "lineHeight": 20,
                 },
-                Object {
-                  "marginTop": 4,
-                },
+                Array [
+                  Object {
+                    "marginTop": 4,
+                  },
+                  undefined,
+                ],
               ]
             }
             themeFontSize="small"
@@ -157,21 +170,25 @@ exports[`BottomNavigation renders correctly 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "alignItems": "center",
-              "flexBasis": 0,
-              "flexGrow": 1,
-              "flexShrink": 1,
-            }
+            Array [
+              Object {
+                "alignItems": "center",
+                "flex": 1,
+              },
+              undefined,
+            ]
           }
         >
           <HeroIcon
             name="speaker-outlined"
             style={
-              Object {
-                "color": "#292a2b",
-                "fontSize": 24,
-              }
+              Array [
+                Object {
+                  "color": "#292a2b",
+                  "fontSize": 24,
+                },
+                undefined,
+              ]
             }
             testID="hero-icon-speaker-outlined"
             themeIntent="text"
@@ -183,14 +200,17 @@ exports[`BottomNavigation renders correctly 1`] = `
               Array [
                 Object {
                   "color": "#292a2b",
-                  "fontFamily": "Be Vietnam Pro SemiBold",
+                  "fontFamily": "BeVietnamPro-SemiBold",
                   "fontSize": 12,
                   "letterSpacing": 0.36,
                   "lineHeight": 20,
                 },
-                Object {
-                  "marginTop": 4,
-                },
+                Array [
+                  Object {
+                    "marginTop": 4,
+                  },
+                  undefined,
+                ],
               ]
             }
             themeFontSize="small"
@@ -211,21 +231,25 @@ exports[`BottomNavigation renders correctly 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "alignItems": "center",
-              "flexBasis": 0,
-              "flexGrow": 1,
-              "flexShrink": 1,
-            }
+            Array [
+              Object {
+                "alignItems": "center",
+                "flex": 1,
+              },
+              undefined,
+            ]
           }
         >
           <HeroIcon
             name="bell-outlined"
             style={
-              Object {
-                "color": "#292a2b",
-                "fontSize": 24,
-              }
+              Array [
+                Object {
+                  "color": "#292a2b",
+                  "fontSize": 24,
+                },
+                undefined,
+              ]
             }
             testID="hero-icon-bell-outlined"
             themeIntent="text"
@@ -237,14 +261,17 @@ exports[`BottomNavigation renders correctly 1`] = `
               Array [
                 Object {
                   "color": "#292a2b",
-                  "fontFamily": "Be Vietnam Pro SemiBold",
+                  "fontFamily": "BeVietnamPro-SemiBold",
                   "fontSize": 12,
                   "letterSpacing": 0.36,
                   "lineHeight": 20,
                 },
-                Object {
-                  "marginTop": 4,
-                },
+                Array [
+                  Object {
+                    "marginTop": 4,
+                  },
+                  undefined,
+                ],
               ]
             }
             themeFontSize="small"
@@ -265,21 +292,25 @@ exports[`BottomNavigation renders correctly 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "alignItems": "center",
-              "flexBasis": 0,
-              "flexGrow": 1,
-              "flexShrink": 1,
-            }
+            Array [
+              Object {
+                "alignItems": "center",
+                "flex": 1,
+              },
+              undefined,
+            ]
           }
         >
           <HeroIcon
             name="user-outlined"
             style={
-              Object {
-                "color": "#292a2b",
-                "fontSize": 24,
-              }
+              Array [
+                Object {
+                  "color": "#292a2b",
+                  "fontSize": 24,
+                },
+                undefined,
+              ]
             }
             testID="hero-icon-user-outlined"
             themeIntent="text"
@@ -291,14 +322,17 @@ exports[`BottomNavigation renders correctly 1`] = `
               Array [
                 Object {
                   "color": "#292a2b",
-                  "fontFamily": "Be Vietnam Pro SemiBold",
+                  "fontFamily": "BeVietnamPro-SemiBold",
                   "fontSize": 12,
                   "letterSpacing": 0.36,
                   "lineHeight": 20,
                 },
-                Object {
-                  "marginTop": 4,
-                },
+                Array [
+                  Object {
+                    "marginTop": 4,
+                  },
+                  undefined,
+                ],
               ]
             }
             themeFontSize="small"

package/src/components/BottomNavigation/__tests__/{BottomNavigation.spec.tsx → index.spec.tsx}

@@ -3,16 +3,16 @@ import { Text } from 'react-native';
 import { fireEvent } from '@testing-library/react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import BottomNavigation, { Tab } from '..';
+import BottomNavigation, { BottomNavigationTabType } from '..';
 
 const TestComponent = (
   props: Omit<
     ComponentProps<typeof BottomNavigation>,
-    'selectedTabKey' | 'onChange' | 'tabs'
+    'selectedTabKey' | 'onTabPress' | 'tabs'
   >
 ) => {
   const [selectedTabKey, setSelectedTabKey] = React.useState('home');
-  const tabs: Tab<string>[] = [
+  const tabs: BottomNavigationTabType[] = [
     {
       key: 'home',
       title: 'Home',
@@ -50,7 +50,7 @@ const TestComponent = (
         {...props}
         tabs={tabs}
         selectedTabKey={selectedTabKey}
-        onChange={newTabKey => setSelectedTabKey(newTabKey)}
+        onTabPress={newTabKey => setSelectedTabKey(newTabKey)}
       />
     </SafeAreaProvider>
   );

package/src/components/BottomNavigation/index.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import {
   TouchableWithoutFeedback,
   StyleProp,
@@ -6,10 +6,8 @@ import {
   ViewProps,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTheme } from 'styled-components-native';
-import Icon from '../Icon';
+import Icon, { IconName } from '../Icon';
 import { isHeroIcon } from '../Icon/utils';
-import Typography from '../Typography';
 import {
   BottomBar,
   BottomBarItem,
@@ -17,25 +15,23 @@ import {
   BottomNavigationContainer,
   BottomNavigationTab,
   ContentWrapper,
+  StyledBottomBarText,
 } from './StyledBottomNavigation';
 import { isIOS } from '../../utils/helpers';
 
-type IconType = ComponentProps<typeof Icon>['icon'];
-
-export type Tab<V> = {
-  key: V;
+export type BottomNavigationTabType = {
+  key: string;
   title?: string;
-  icon: IconType;
+  icon: IconName;
   component: ReactNode;
   testID?: string;
 };
 
-interface BottomNavigationType<V extends string | number, T extends Tab<V>>
-  extends ViewProps {
+interface BottomNavigationProps extends ViewProps {
   /**
-   * Callback which is called on tab change, receiving id of upcoming active Tab.
+   * Callback which is called on tab press, receiving key of upcoming active Tab.
    */
-  onChange: (key: V) => void;
+  onTabPress: (key: string) => void;
   /**
    * Whether inactive tabs should be removed and unmounted in React.
    * Defaults to `false`.
@@ -44,13 +40,19 @@ interface BottomNavigationType<V extends string | number, T extends Tab<V>>
   /**
    * Current selected tab key.
    */
-  selectedTabKey: V;
+  selectedTabKey: string;
   /**
-   * List of Tab to be rendered. Each Tab must have an unique id.
+   * List of Tabs to be rendered. Each Tab must have an unique key.
    */
-  tabs: T[];
+  tabs: {
+    key: string;
+    title?: string;
+    icon: IconName;
+    component: ReactNode;
+    testID?: string;
+  }[];
   /**
-   * Addditional style.
+   * Additional style.
    */
   style?: StyleProp<ViewStyle>;
   /**
@@ -59,19 +61,18 @@ interface BottomNavigationType<V extends string | number, T extends Tab<V>>
   testID?: string;
 }
 
-const getInactiveIcon = (icon: IconType): IconType => {
+const getInactiveIcon = (icon: IconName): IconName => {
   const inactiveIcon = `${icon}-outlined`;
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
 };
 
-const BottomNavigation = <V extends string | number, T extends Tab<V>>({
-  onChange,
+const BottomNavigation = ({
+  onTabPress,
   renderActiveTabOnly = false,
   selectedTabKey,
   tabs,
   ...nativeProps
-}: BottomNavigationType<V, T>): JSX.Element => {
-  const theme = useTheme();
+}: BottomNavigationProps): JSX.Element => {
   const insets = useSafeAreaInsets();
 
   /**
@@ -88,7 +89,7 @@ const BottomNavigation = <V extends string | number, T extends Tab<V>>({
     <BottomNavigationContainer {...nativeProps}>
       <ContentWrapper>
         {tabs.map(tab => {
-          const { key, component } = tab;
+          const { key, component, testID } = tab;
           const active = selectedTabKey === key;
 
           if (renderActiveTabOnly && !active) {
@@ -103,7 +104,7 @@ const BottomNavigation = <V extends string | number, T extends Tab<V>>({
           return (
             <BottomNavigationTab
               key={key}
-              testID={`route-screen-${selectedTabKey}`}
+              testID={testID ? `route-screen-${testID}` : undefined}
               pointerEvents={active ? 'auto' : 'none'}
               accessibilityElementsHidden={!active}
               importantForAccessibility={
@@ -132,11 +133,7 @@ const BottomNavigation = <V extends string | number, T extends Tab<V>>({
             return (
               <TouchableWithoutFeedback
                 key={key}
-                onPress={() => {
-                  if (key !== selectedTabKey) {
-                    onChange(key);
-                  }
-                }}
+                onPress={() => onTabPress(key)}
                 testID={testID}
               >
                 <BottomBarItem>
@@ -146,15 +143,14 @@ const BottomNavigation = <V extends string | number, T extends Tab<V>>({
                     testID={`hero-icon-${icon}`}
                   />
                   {title && (
-                    <Typography.Text
+                    <StyledBottomBarText
                       fontSize="small"
                       fontWeight="semi-bold"
                       intent={active ? 'primary' : 'body'}
-                      style={{ marginTop: theme.space.xsmall }}
                       numberOfLines={1}
                     >
                       {title}
-                    </Typography.Text>
+                    </StyledBottomBarText>
                   )}
                 </BottomBarItem>
               </TouchableWithoutFeedback>

package/src/components/Button/IconButton.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import {
+  StyleProp,
+  ViewStyle,
+  TouchableOpacity,
+  TouchableOpacityProps,
+} from 'react-native';
+
+import Icon, { IconProps, IconName } from '../Icon';
+
+export interface IconButtonProps {
+  /**
+   * Set how far you can touch from the button.
+   */
+  hitSlop?: TouchableOpacityProps['hitSlop'];
+  /**
+   * Name of the Icon.
+   */
+  icon: IconName;
+  /**
+   * Intent of the Icon.
+   */
+  intent?: IconProps['intent'];
+  /**
+   * Set the handler to handle press event.
+   */
+  onPress: () => void;
+  /**
+   * Size of the Icon.
+   */
+  size?: IconProps['size'];
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of component.
+   */
+  testID?: string;
+}
+
+const IconButton = ({
+  hitSlop,
+  onPress,
+  icon,
+  testID,
+  style,
+  size,
+  intent,
+}: IconButtonProps) => (
+  <TouchableOpacity
+    style={style}
+    onPress={onPress}
+    testID={testID}
+    hitSlop={hitSlop}
+  >
+    <Icon icon={icon} size={size} intent={intent} />
+  </TouchableOpacity>
+);
+
+export default IconButton;

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

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconButton renders correctly 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  hitSlop={
+    Object {
+      "bottom": 4,
+      "left": 6,
+      "right": 6,
+      "top": 4,
+    }
+  }
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "opacity": 1,
+    }
+  }
+  testID="icon-btn"
+>
+  <HeroIcon
+    name="home"
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontSize": 24,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+</View>
+`;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+
+import Button from '..';
+
+describe('IconButton', () => {
+  it('renders correctly', () => {
+    const onPress = jest.fn();
+    const { toJSON, getByTestId } = renderWithTheme(
+      <Button.Icon
+        icon="home"
+        onPress={onPress}
+        testID="icon-btn"
+        hitSlop={{ top: 4, bottom: 4, right: 6, left: 6 }}
+      />
+    );
+
+    fireEvent.press(getByTestId('icon-btn'));
+    expect(onPress).toBeCalledTimes(1);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Button/index.tsx

@@ -0,0 +1,5 @@
+import IconButton from './IconButton';
+
+const Button = { Icon: IconButton } as const;
+
+export default Button;

package/src/components/Card/StyledCard.tsx

@@ -1,10 +1,10 @@
 import { View } from 'react-native';
-import styled from 'styled-components-native';
+import styled from '@emotion/native';
 
-const StyledCard = styled(View)<{}>`
-  border-radius: ${({ theme }) => theme.__hd__.card.radii.default};
-  padding: ${({ theme }) => theme.__hd__.card.padding.default};
-  overflow: hidden;
-`;
+const StyledCard = styled(View)(({ theme }) => ({
+  borderRadius: theme.__hd__.card.radii.default,
+  padding: theme.__hd__.card.padding.default,
+  overflow: 'hidden',
+}));
 
 export { StyledCard };