@hero-design/rn 7.1.3-alpha6 → 7.2.0

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[] = [
+  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

@@ -6,7 +6,7 @@ import {
   ViewProps,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import Icon, { IconProps } from '../Icon';
+import Icon, { IconName } from '../Icon';
 import { isHeroIcon } from '../Icon/utils';
 import {
   BottomBar,
@@ -19,21 +19,19 @@ import {
 } from './StyledBottomNavigation';
 import { isIOS } from '../../utils/helpers';
 
-type IconType = IconProps['icon'];
-
-export type Tab = {
+export type BottomNavigationTabType = {
   key: string;
   title?: string;
-  icon: IconType;
+  icon: IconName;
   component: ReactNode;
   testID?: string;
 };
 
-interface BottomNavigationType 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: string) => void;
+  onTabPress: (key: string) => void;
   /**
    * Whether inactive tabs should be removed and unmounted in React.
    * Defaults to `false`.
@@ -44,11 +42,17 @@ interface BottomNavigationType extends ViewProps {
    */
   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: Tab[];
+  tabs: {
+    key: string;
+    title?: string;
+    icon: IconName;
+    component: ReactNode;
+    testID?: string;
+  }[];
   /**
-   * Addditional style.
+   * Additional style.
    */
   style?: StyleProp<ViewStyle>;
   /**
@@ -57,18 +61,18 @@ interface BottomNavigationType extends ViewProps {
   testID?: string;
 }
 
-const getInactiveIcon = (icon: IconType): IconType => {
+const getInactiveIcon = (icon: IconName): IconName => {
   const inactiveIcon = `${icon}-outlined`;
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
 };
 
 const BottomNavigation = ({
-  onChange,
+  onTabPress,
   renderActiveTabOnly = false,
   selectedTabKey,
   tabs,
   ...nativeProps
-}: BottomNavigationType): JSX.Element => {
+}: BottomNavigationProps): JSX.Element => {
   const insets = useSafeAreaInsets();
 
   /**
@@ -85,7 +89,7 @@ const BottomNavigation = ({
     <BottomNavigationContainer {...nativeProps}>
       <ContentWrapper>
         {tabs.map(tab => {
-          const { key, component } = tab;
+          const { key, component, testID } = tab;
           const active = selectedTabKey === key;
 
           if (renderActiveTabOnly && !active) {
@@ -100,7 +104,7 @@ const BottomNavigation = ({
           return (
             <BottomNavigationTab
               key={key}
-              testID={`route-screen-${selectedTabKey}`}
+              testID={testID ? `route-screen-${testID}` : undefined}
               pointerEvents={active ? 'auto' : 'none'}
               accessibilityElementsHidden={!active}
               importantForAccessibility={
@@ -129,11 +133,7 @@ const BottomNavigation = ({
             return (
               <TouchableWithoutFeedback
                 key={key}
-                onPress={() => {
-                  if (key !== selectedTabKey) {
-                    onChange(key);
-                  }
-                }}
+                onPress={() => onTabPress(key)}
                 testID={testID}
               >
                 <BottomBarItem>

package/src/components/Button/IconButton.tsx

@@ -7,17 +7,17 @@ import {
   TouchableOpacityProps,
 } from 'react-native';
 
-import Icon, { IconProps } from '../Icon';
+import Icon, { IconProps, IconName } from '../Icon';
 
 export interface IconButtonProps {
   /**
-   * Set how far you can touch from the button
+   * Set how far you can touch from the button.
    */
   hitSlop?: TouchableOpacityProps['hitSlop'];
   /**
    * Name of the Icon.
    */
-  icon: IconProps['icon'];
+  icon: IconName;
   /**
    * Intent of the Icon.
    */
@@ -31,11 +31,11 @@ export interface IconButtonProps {
    */
   size?: IconProps['size'];
   /**
-   * Addditional style.
+   * Additional style.
    */
   style?: StyleProp<ViewStyle>;
   /**
-   * Testing id of component
+   * Testing id of component.
    */
   testID?: string;
 }

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

@@ -31,10 +31,13 @@ exports[`IconButton renders correctly 1`] = `
   <HeroIcon
     name="home"
     style={
-      Object {
-        "color": "#292a2b",
-        "fontSize": 24,
-      }
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontSize": 24,
+        },
+        undefined,
+      ]
     }
     themeIntent="text"
     themeSize="medium"

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

@@ -1,8 +1,5 @@
 import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
-
-import { ThemeProvider, theme } from '../../../index';
-
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 
 import Button from '..';
@@ -11,19 +8,16 @@ describe('IconButton', () => {
   it('renders correctly', () => {
     const onPress = jest.fn();
     const { toJSON, getByTestId } = renderWithTheme(
-      <ThemeProvider theme={theme}>
-        <Button.Icon
-          icon="home"
-          onPress={onPress}
-          testID="icon-btn"
-          hitSlop={{ top: 4, bottom: 4, right: 6, left: 6 }}
-        />
-      </ThemeProvider>
+      <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/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 };

package/src/components/Card/__tests__/StyledCard.spec.tsx

@@ -1,15 +1,10 @@
 import React from 'react';
-import { render } from '@testing-library/react-native';
-import { ThemeProvider, theme } from '../../../index';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import { StyledCard } from '../StyledCard';
 
 describe('StyledCard', () => {
   it('renders correct style', () => {
-    const { toJSON } = render(
-      <ThemeProvider theme={theme}>
-        <StyledCard />
-      </ThemeProvider>
-    );
+    const { toJSON } = renderWithTheme(<StyledCard />);
     expect(toJSON()).toMatchSnapshot();
   });
 });

package/src/components/Card/__tests__/__snapshots__/StyledCard.spec.tsx.snap

@@ -3,17 +3,14 @@
 exports[`StyledCard renders correct style 1`] = `
 <View
   style={
-    Object {
-      "borderBottomLeftRadius": 12,
-      "borderBottomRightRadius": 12,
-      "borderTopLeftRadius": 12,
-      "borderTopRightRadius": 12,
-      "overflow": "hidden",
-      "paddingBottom": 8,
-      "paddingLeft": 8,
-      "paddingRight": 8,
-      "paddingTop": 8,
-    }
+    Array [
+      Object {
+        "borderRadius": 12,
+        "overflow": "hidden",
+        "padding": 8,
+      },
+      undefined,
+    ]
   }
 />
 `;

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

@@ -16,15 +16,9 @@ exports[`Card renders correct 1`] = `
   style={
     Array [
       Object {
-        "borderBottomLeftRadius": 12,
-        "borderBottomRightRadius": 12,
-        "borderTopLeftRadius": 12,
-        "borderTopRightRadius": 12,
+        "borderRadius": 12,
         "overflow": "hidden",
-        "paddingBottom": 8,
-        "paddingLeft": 8,
-        "paddingRight": 8,
-        "paddingTop": 8,
+        "padding": 8,
       },
       Object {
         "backgroundColor": "#292a2b",