@hero-design/rn 7.1.1 → 7.1.3-alpha2

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",
+                  "fontFamily": "Be Vietnam Pro SemiBold",
+                  "fontSize": 12,
+                  "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",
+                  "fontFamily": "Be Vietnam Pro SemiBold",
+                  "fontSize": 12,
+                  "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",
+                  "fontFamily": "Be Vietnam Pro SemiBold",
+                  "fontSize": 12,
+                  "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",
+                  "fontFamily": "Be Vietnam Pro SemiBold",
+                  "fontSize": 12,
+                  "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/FAB/ActionGroup/ActionItem.tsx

@@ -0,0 +1,28 @@
+import React, { ComponentProps } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import Icon from '../../Icon';
+import { StyledActionItem, StyledActionItemText } from './StyledActionItem';
+
+export interface ActionItemProps {
+  testID?: string;
+  title: string;
+  icon: ComponentProps<typeof Icon>['icon'];
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+const ActionItem = ({
+  icon,
+  title,
+  onPress,
+  style,
+  testID,
+}: ActionItemProps) => (
+  <StyledActionItem style={style} onPress={onPress} testID={testID}>
+    <>
+      <Icon icon={icon} />
+      <StyledActionItemText>{title}</StyledActionItemText>
+    </>
+  </StyledActionItem>
+);
+
+export default ActionItem;

package/src/components/FAB/ActionGroup/StyledActionGroup.tsx

@@ -0,0 +1,59 @@
+import { ComponentProps } from 'react';
+import { Animated, View, ViewProps } from 'react-native';
+import styled from 'styled-components-native';
+import FAB from '../FAB';
+import Typography from '../../Typography';
+import { TextProps } from '../../Typography/Text';
+
+const StyledContainer = styled(View)<ViewProps>`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  align-items: flex-end;
+  justify-content: flex-end;
+`;
+
+const StyledActionGroupContainer = styled(Animated.View)<
+  ComponentProps<typeof Animated.View>
+>`
+  align-items: flex-end;
+  justify-content: flex-end;
+  width: 70%;
+`;
+
+const StyledFAB = styled(FAB)<{}>`
+  margin-right: ${({ theme }) => theme.space.large};
+  align-self: flex-end;
+  margin-top: ${({ theme }) => theme.space.large};
+`;
+
+const StyledBackdrop = styled(Animated.View)<
+  ComponentProps<typeof Animated.View>
+>`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: ${({ theme }) => theme.__hd__.fab.colors.backdropBackground};
+`;
+
+const StyledHeaderText = styled(Typography.Text)<TextProps>`
+  font-size: ${({ theme }) => theme.__hd__.fab.fontSizes.header};
+  line-height: ${({ theme }) => theme.__hd__.fab.lineHeights.header};
+  font-family: ${({ theme }) => theme.__hd__.fab.fonts.header};
+  margin-right: ${({ theme }) => theme.__hd__.fab.space.headerTextMarginRight};
+  margin-bottom: ${({ theme }) =>
+    theme.__hd__.fab.space.headerTextMarginBottom};
+  text-align: right;
+`;
+
+export {
+  StyledHeaderText,
+  StyledBackdrop,
+  StyledContainer,
+  StyledActionGroupContainer,
+  StyledFAB,
+};

package/src/components/FAB/ActionGroup/StyledActionItem.tsx

@@ -0,0 +1,29 @@
+import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
+import styled from 'styled-components-native';
+import Typography from '../../Typography';
+
+const StyledActionItem = styled(TouchableOpacity)<TouchableOpacityProps>`
+  padding-left: ${({ theme }) => theme.__hd__.fab.space.actionItemPaddingLeft};
+  padding-right: ${({ theme }) =>
+    theme.__hd__.fab.space.actionItemPaddingRight};
+  padding-top: ${({ theme }) => theme.__hd__.fab.space.actionItemPaddingTop};
+  padding-bottom: ${({ theme }) =>
+    theme.__hd__.fab.space.actionItemPaddingBottom};
+  margin: ${({ theme }) => theme.__hd__.fab.space.actionItemMargin};
+  margin-right: ${({ theme }) => theme.__hd__.fab.space.actionItemMarginRight};
+  background: ${({ theme }) => theme.__hd__.fab.colors.actionItemBackground};
+  border-radius: ${({ theme }) => theme.__hd__.fab.radii.actionItem};
+  flex-direction: row;
+  align-items: center;
+  align-self: flex-end;
+  overflow: hidden;
+`;
+
+const StyledActionItemText = styled(Typography.Text)<TouchableOpacityProps>`
+  padding-left: ${({ theme }) =>
+    theme.__hd__.fab.space.actionItemTextPaddingLeft};
+  font-size: ${({ theme }) => theme.__hd__.fab.fontSizes.actionItemText};
+  line-height: ${({ theme }) => theme.__hd__.fab.lineHeights.actionItemText};
+  font-family: ${({ theme }) => theme.__hd__.fab.fonts.actionItemText};
+`;
+export { StyledActionItem, StyledActionItemText };