@hero-design/rn 7.0.6 → 7.1.2

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

@@ -0,0 +1,95 @@
+import React, { ComponentProps } from 'react';
+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 '..';
+
+const TestComponent = (
+  props: Omit<
+    ComponentProps<typeof BottomNavigation>,
+    'selectedTabKey' | 'onChange' | 'tabs'
+  >
+) => {
+  const [selectedTabKey, setSelectedTabKey] = React.useState('home');
+  const tabs: Tab<string>[] = [
+    {
+      key: 'home',
+      title: 'Home',
+      icon: 'home',
+      component: <Text>Home Screen</Text>,
+    },
+    {
+      key: 'feed',
+      title: 'Feed',
+      icon: 'speaker-outlined',
+      component: <Text>Feed Screen</Text>,
+    },
+    {
+      key: 'alerts',
+      title: 'Alerts',
+      icon: 'bell-outlined',
+      component: <Text>Alerts Screen</Text>,
+    },
+    {
+      key: 'profile',
+      title: 'Profile',
+      icon: 'user-outlined',
+      component: <Text>Profile Screen</Text>,
+    },
+  ];
+
+  return (
+    <SafeAreaProvider
+      initialMetrics={{
+        frame: { x: 0, y: 0, width: 0, height: 0 },
+        insets: { top: 0, left: 0, right: 0, bottom: 0 },
+      }}
+    >
+      <BottomNavigation
+        {...props}
+        tabs={tabs}
+        selectedTabKey={selectedTabKey}
+        onChange={newTabKey => setSelectedTabKey(newTabKey)}
+      />
+    </SafeAreaProvider>
+  );
+};
+
+describe('BottomNavigation', () => {
+  it('renders correctly', () => {
+    const { getByText, toJSON } = renderWithTheme(<TestComponent />);
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Home')).toBeDefined();
+    fireEvent.press(getByText('Feed'));
+    fireEvent.press(getByText('Alerts'));
+    fireEvent.press(getByText('Profile'));
+
+    // All screens are rendered and component is not unmounted when switching screen.
+    expect(getByText('Home Screen')).toBeDefined();
+    expect(getByText('Feed Screen')).toBeDefined();
+    expect(getByText('Alerts Screen')).toBeDefined();
+    expect(getByText('Profile Screen')).toBeDefined();
+  });
+
+  it('renders correctly with renderActiveTabOnly is true', () => {
+    const { getByText, queryByText, getByTestId } = renderWithTheme(
+      <TestComponent renderActiveTabOnly />
+    );
+
+    // Can switch tab by clicking icon.
+    expect(getByText('Home Screen')).toBeDefined();
+    fireEvent.press(getByTestId('hero-icon-speaker-outlined'));
+    expect(getByText('Feed Screen')).toBeDefined();
+    fireEvent.press(getByTestId('hero-icon-bell-outlined'));
+    expect(getByText('Alerts Screen')).toBeDefined();
+    fireEvent.press(getByTestId('hero-icon-user-outlined'));
+    expect(getByText('Profile Screen')).toBeDefined();
+
+    // Only render selected screen, others are unmounted.
+    expect(queryByText('Home Screen')).toBeNull();
+    expect(queryByText('Feed Screen')).toBeNull();
+    expect(queryByText('Alerts Screen')).toBeNull();
+  });
+});

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

@@ -0,0 +1,315 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BottomNavigation renders correctly 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Object {
+        "flexBasis": 0,
+        "flexGrow": 1,
+        "flexShrink": 1,
+        "overflow": "hidden",
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "flexBasis": 0,
+          "flexGrow": 1,
+          "flexShrink": 1,
+        }
+      }
+    >
+      <View
+        accessibilityElementsHidden={false}
+        collapsable={false}
+        importantForAccessibility="auto"
+        pointerEvents="auto"
+        removeClippedSubviews={false}
+        style={
+          Object {
+            "display": "flex",
+            "flexBasis": 0,
+            "flexGrow": 1,
+            "flexShrink": 1,
+          }
+        }
+        testID="route-screen-home"
+        themeVisibility={true}
+      >
+        <Text>
+          Home Screen
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        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,
+        }
+      }
+      themeInsets={
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "flexBasis": 0,
+            "flexDirection": "row",
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "overflow": "hidden",
+          }
+        }
+      >
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "flexBasis": 0,
+              "flexGrow": 1,
+              "flexShrink": 1,
+            }
+          }
+        >
+          <HeroIcon
+            name="home"
+            style={
+              Object {
+                "color": "#7622d7",
+                "fontSize": 24,
+              }
+            }
+            testID="hero-icon-home"
+            themeIntent="primary"
+            themeSize="medium"
+          />
+          <Text
+            numberOfLines={1}
+            style={
+              Array [
+                Object {
+                  "color": "#7622d7",
+                  "fontSize": 12,
+                  "fontWeight": "600",
+                  "letterSpacing": 0.36,
+                  "lineHeight": 20,
+                },
+                Object {
+                  "marginTop": 4,
+                },
+              ]
+            }
+            themeFontSize="small"
+            themeFontWeight="semi-bold"
+            themeIntent="primary"
+          >
+            Home
+          </Text>
+        </View>
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "flexBasis": 0,
+              "flexGrow": 1,
+              "flexShrink": 1,
+            }
+          }
+        >
+          <HeroIcon
+            name="speaker-outlined"
+            style={
+              Object {
+                "color": "#292a2b",
+                "fontSize": 24,
+              }
+            }
+            testID="hero-icon-speaker-outlined"
+            themeIntent="text"
+            themeSize="medium"
+          />
+          <Text
+            numberOfLines={1}
+            style={
+              Array [
+                Object {
+                  "color": "#292a2b",
+                  "fontSize": 12,
+                  "fontWeight": "600",
+                  "letterSpacing": 0.36,
+                  "lineHeight": 20,
+                },
+                Object {
+                  "marginTop": 4,
+                },
+              ]
+            }
+            themeFontSize="small"
+            themeFontWeight="semi-bold"
+            themeIntent="body"
+          >
+            Feed
+          </Text>
+        </View>
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "flexBasis": 0,
+              "flexGrow": 1,
+              "flexShrink": 1,
+            }
+          }
+        >
+          <HeroIcon
+            name="bell-outlined"
+            style={
+              Object {
+                "color": "#292a2b",
+                "fontSize": 24,
+              }
+            }
+            testID="hero-icon-bell-outlined"
+            themeIntent="text"
+            themeSize="medium"
+          />
+          <Text
+            numberOfLines={1}
+            style={
+              Array [
+                Object {
+                  "color": "#292a2b",
+                  "fontSize": 12,
+                  "fontWeight": "600",
+                  "letterSpacing": 0.36,
+                  "lineHeight": 20,
+                },
+                Object {
+                  "marginTop": 4,
+                },
+              ]
+            }
+            themeFontSize="small"
+            themeFontWeight="semi-bold"
+            themeIntent="body"
+          >
+            Alerts
+          </Text>
+        </View>
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "flexBasis": 0,
+              "flexGrow": 1,
+              "flexShrink": 1,
+            }
+          }
+        >
+          <HeroIcon
+            name="user-outlined"
+            style={
+              Object {
+                "color": "#292a2b",
+                "fontSize": 24,
+              }
+            }
+            testID="hero-icon-user-outlined"
+            themeIntent="text"
+            themeSize="medium"
+          />
+          <Text
+            numberOfLines={1}
+            style={
+              Array [
+                Object {
+                  "color": "#292a2b",
+                  "fontSize": 12,
+                  "fontWeight": "600",
+                  "letterSpacing": 0.36,
+                  "lineHeight": 20,
+                },
+                Object {
+                  "marginTop": 4,
+                },
+              ]
+            }
+            themeFontSize="small"
+            themeFontWeight="semi-bold"
+            themeIntent="body"
+          >
+            Profile
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;

package/src/components/BottomNavigation/index.tsx

@@ -0,0 +1,169 @@
+import React, { ComponentProps, ReactNode } from 'react';
+import {
+  TouchableWithoutFeedback,
+  StyleProp,
+  ViewStyle,
+  ViewProps,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from 'styled-components-native';
+import Icon from '../Icon';
+import { isHeroIcon } from '../Icon/utils';
+import Typography from '../Typography';
+import {
+  BottomBar,
+  BottomBarItem,
+  BottomBarWrapper,
+  BottomNavigationContainer,
+  BottomNavigationTab,
+  ContentWrapper,
+} from './StyledBottomNavigation';
+import { isIOS } from '../../utils/helpers';
+
+type IconType = ComponentProps<typeof Icon>['icon'];
+
+export type Tab<V> = {
+  key: V;
+  title?: string;
+  icon: IconType;
+  component: ReactNode;
+  testID?: string;
+};
+
+interface BottomNavigationType<V extends string | number, T extends Tab<V>>
+  extends ViewProps {
+  /**
+   * Callback which is called on tab change, receiving id of upcoming active Tab.
+   */
+  onChange: (key: V) => void;
+  /**
+   * Whether inactive tabs should be removed and unmounted in React.
+   * Defaults to `false`.
+   */
+  renderActiveTabOnly?: boolean;
+  /**
+   * Current selected tab key.
+   */
+  selectedTabKey: V;
+  /**
+   * List of Tab to be rendered. Each Tab must have an unique id.
+   */
+  tabs: T[];
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const getInactiveIcon = (icon: IconType): IconType => {
+  const inactiveIcon = `${icon}-outlined`;
+  return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
+};
+
+const BottomNavigation = <V extends string | number, T extends Tab<V>>({
+  onChange,
+  renderActiveTabOnly = false,
+  selectedTabKey,
+  tabs,
+  ...nativeProps
+}: BottomNavigationType<V, T>): JSX.Element => {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+
+  /**
+   * List of loaded tabs, tabs will be loaded when navigated to.
+   */
+  const [loaded, setLoaded] = React.useState([selectedTabKey]);
+
+  if (!loaded.includes(selectedTabKey)) {
+    // Set the current tab to be loaded if it was not loaded before
+    setLoaded(loadedState => [...loadedState, selectedTabKey]);
+  }
+
+  return (
+    <BottomNavigationContainer {...nativeProps}>
+      <ContentWrapper>
+        {tabs.map(tab => {
+          const { key, component } = tab;
+          const active = selectedTabKey === key;
+
+          if (renderActiveTabOnly && !active) {
+            return null;
+          }
+
+          if (!loaded.includes(key)) {
+            // Don't render a screen if we've never navigated to it
+            return null;
+          }
+
+          return (
+            <BottomNavigationTab
+              key={key}
+              testID={`route-screen-${selectedTabKey}`}
+              pointerEvents={active ? 'auto' : 'none'}
+              accessibilityElementsHidden={!active}
+              importantForAccessibility={
+                active ? 'auto' : 'no-hide-descendants'
+              }
+              collapsable={false}
+              removeClippedSubviews={
+                // On iOS, set removeClippedSubviews to true only when not focused
+                // This is an workaround for a bug where the clipped view never re-appears.
+                isIOS ? selectedTabKey !== key : true
+              }
+              themeVisibility={active}
+            >
+              {component}
+            </BottomNavigationTab>
+          );
+        })}
+      </ContentWrapper>
+      <BottomBarWrapper themeInsets={insets}>
+        <BottomBar>
+          {tabs.map(tab => {
+            const { key, icon, title, testID } = tab;
+            const active = selectedTabKey === key;
+            const inactiveIcon = getInactiveIcon(icon);
+
+            return (
+              <TouchableWithoutFeedback
+                key={key}
+                onPress={() => {
+                  if (key !== selectedTabKey) {
+                    onChange(key);
+                  }
+                }}
+                testID={testID}
+              >
+                <BottomBarItem>
+                  <Icon
+                    icon={active ? icon : inactiveIcon}
+                    intent={active ? 'primary' : 'text'}
+                    testID={`hero-icon-${icon}`}
+                  />
+                  {title && (
+                    <Typography.Text
+                      fontSize="small"
+                      fontWeight="semi-bold"
+                      intent={active ? 'primary' : 'body'}
+                      style={{ marginTop: theme.space.xsmall }}
+                      numberOfLines={1}
+                    >
+                      {title}
+                    </Typography.Text>
+                  )}
+                </BottomBarItem>
+              </TouchableWithoutFeedback>
+            );
+          })}
+        </BottomBar>
+      </BottomBarWrapper>
+    </BottomNavigationContainer>
+  );
+};
+
+export default BottomNavigation;

package/src/components/Card/StyledCard.tsx

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

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

@@ -20,10 +20,11 @@ exports[`Card renders correct 1`] = `
         "borderBottomRightRadius": 12,
         "borderTopLeftRadius": 12,
         "borderTopRightRadius": 12,
-        "paddingBottom": 16,
-        "paddingLeft": 16,
-        "paddingRight": 16,
-        "paddingTop": 16,
+        "overflow": "hidden",
+        "paddingBottom": 8,
+        "paddingLeft": 8,
+        "paddingRight": 8,
+        "paddingTop": 8,
       },
       Object {
         "backgroundColor": "#292a2b",

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

@@ -8,10 +8,11 @@ exports[`StyledCard renders correct style 1`] = `
       "borderBottomRightRadius": 12,
       "borderTopLeftRadius": 12,
       "borderTopRightRadius": 12,
-      "paddingBottom": 16,
-      "paddingLeft": 16,
-      "paddingRight": 16,
-      "paddingTop": 16,
+      "overflow": "hidden",
+      "paddingBottom": 8,
+      "paddingLeft": 8,
+      "paddingRight": 8,
+      "paddingTop": 8,
     }
   }
 />

package/src/components/FAB/AnimatedFABIcon.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+import { IconProps } from '../Icon';
+import { StyledFABIcon } from './StyledFABIcon';
+
+const AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
+
+type Props = {
+  active?: boolean;
+} & IconProps;
+
+const AnimatedFABIcon = ({ active, ...iconProps }: Props) => {
+  const rotateAnimation = useRef<Animated.Value>(
+    new Animated.Value(active ? 1 : 0)
+  );
+  useEffect(() => {
+    const animation = Animated.timing(rotateAnimation.current, {
+      toValue: active ? 1 : 0,
+      useNativeDriver: true,
+    });
+
+    animation.start();
+
+    return () => {
+      animation.stop();
+    };
+  }, [active]);
+
+  const interpolatedRotateAnimation = rotateAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '-45deg'],
+  });
+
+  return (
+    <Animated.View
+      style={StyleSheet.flatten([
+        {
+          transform: [{ rotate: interpolatedRotateAnimation }],
+        },
+      ])}
+    >
+      <AnimatedIcons {...iconProps} />
+    </Animated.View>
+  );
+};
+
+export { AnimatedFABIcon };

package/src/components/FAB/StyledFABContainer.tsx

@@ -0,0 +1,14 @@
+import { TouchableHighlight, TouchableHighlightProps } from 'react-native';
+import styled from 'styled-components-native';
+
+const StyledFABContainer = styled(TouchableHighlight)<TouchableHighlightProps>`
+  height: ${({ theme }) => theme.__hd__.fab.sizes.height};
+  width: ${({ theme }) => theme.__hd__.fab.sizes.width};
+  background-color: ${({ theme }) => theme.__hd__.fab.colors.buttonBackground};
+  border-radius: 999px;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+`;
+
+export { StyledFABContainer };

package/src/components/FAB/StyledFABIcon.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components-native';
+import Icon, { IconProps } from '../Icon';
+
+const StyledFABIcon = styled(Icon)<IconProps>`
+  color: ${({ theme }) => theme.__hd__.fab.colors.icon};
+  font-size: ${({ theme }) => theme.__hd__.fab.fontSizes.default};
+`;
+
+export { StyledFABIcon };