@hero-design/rn 7.1.0 → 7.1.3-alpha

package/src/components/FAB/ActionGroup/__tests__/index.spec.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+import ActionGroup from '..';
+import { ThemeProvider, theme } from '../../../../index';
+import '@testing-library/jest-native/extend-expect';
+
+describe('ActionGroup', () => {
+  it.each`
+    active
+    ${true}
+    ${false}
+  `('has active $active', ({ active }) => {
+    const { toJSON, getByTestId, getByText } = render(
+      <ThemeProvider theme={theme}>
+        <ActionGroup
+          active={active}
+          headerTitle="What would you like to create?"
+          items={[
+            {
+              icon: 'speaker',
+              title: 'Give shout out',
+              testID: 'speaker-action-item',
+            },
+            { icon: 'target', title: 'Goal', testID: 'target-action-item' },
+            {
+              icon: 'plane',
+              title: 'Leave request',
+              testID: 'plane-action-item',
+            },
+            {
+              icon: 'health-bag',
+              title: 'Safety incident',
+              testID: 'health-bag-action-item',
+            },
+            { icon: 'clock', title: 'Timesheets', testID: 'clock-action-item' },
+          ]}
+        />
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(getByText('What would you like to create?')).toBeDefined();
+    expect(getByTestId('speaker-action-item')).toBeDefined();
+    expect(getByTestId('target-action-item')).toBeDefined();
+    expect(getByTestId('plane-action-item')).toBeDefined();
+    expect(getByTestId('health-bag-action-item')).toBeDefined();
+
+    if (active) {
+      // verify action group appears
+      expect(getByTestId('action-group')).toHaveStyle({
+        transform: [{ translateX: 0 }],
+      });
+      expect(getByTestId('back-drop')).toHaveProp('pointerEvents', 'auto');
+    } else {
+      // verify action group disappears
+      expect(getByTestId('action-group')).toHaveStyle({
+        transform: [{ translateX: 400 }],
+      });
+      expect(getByTestId('back-drop')).toHaveProp('pointerEvents', 'box-none');
+    }
+  });
+
+  describe('when user presses', () => {
+    it('calls onPress', () => {
+      const onPressSpy = jest.fn();
+      const { getByTestId } = render(
+        <ThemeProvider theme={theme}>
+          <ActionGroup onPress={onPressSpy} />
+        </ThemeProvider>
+      );
+      fireEvent(getByTestId('fab'), 'press');
+      expect(onPressSpy).toBeCalledTimes(1);
+    });
+  });
+});

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

@@ -0,0 +1,120 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, View, StyleProp, ViewStyle } from 'react-native';
+import ActionItem, { ActionItemProps } from './ActionItem';
+import {
+  StyledBackdrop,
+  StyledContainer,
+  StyledFAB,
+  StyledHeaderText,
+  StyledActionGroupContainer,
+} from './StyledActionGroup';
+
+type ActionItemsContainerProps = {
+  style?: StyleProp<ViewStyle>;
+  items?: Array<ActionItemProps>;
+};
+const ActionItemsListComponent = ({
+  style,
+  items,
+}: ActionItemsContainerProps) => (
+  <View style={style}>
+    {items?.map(itemProp => (
+      <ActionItem key={itemProp.icon} {...itemProp} />
+    ))}
+  </View>
+);
+
+export interface ActionGroupProps {
+  /*
+   * Title of the action group header.
+   */
+  headerTitle?: string;
+
+  /**
+   * This function is called on pressing the FAB button.
+   * */
+  onPress?: () => void;
+
+  /**
+   * Specify if the FAB button is in active state and the action group is shown.
+   * */
+  active?: boolean;
+
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Action items of the action group.
+   * */
+  items?: Array<ActionItemProps>;
+
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+const ActionGroup = ({
+  headerTitle,
+  onPress,
+  active,
+  style,
+  items,
+  testID,
+}: ActionGroupProps) => {
+  const tranlateXAnimation = useRef<Animated.Value>(
+    new Animated.Value(active ? 1 : 0)
+  );
+  useEffect(() => {
+    const animation = Animated.timing(tranlateXAnimation.current, {
+      toValue: active ? 1 : 0,
+      useNativeDriver: true,
+    });
+
+    animation.start();
+  }, [active]);
+
+  const interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate(
+    {
+      inputRange: [0, 1],
+      outputRange: [400, 0],
+    }
+  );
+  const interpolatedOpacityAnimation = tranlateXAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 0.5],
+  });
+
+  return (
+    <StyledContainer testID={testID} pointerEvents="box-none" style={style}>
+      <StyledBackdrop
+        pointerEvents={active ? 'auto' : 'box-none'}
+        testID="back-drop"
+        style={{ opacity: interpolatedOpacityAnimation }}
+      />
+      <StyledActionGroupContainer
+        testID="action-group"
+        style={{
+          transform: [{ translateX: interpolatedTranlateXAnimation }],
+        }}
+      >
+        {headerTitle && (
+          <StyledHeaderText testID="header-text">
+            {headerTitle}
+          </StyledHeaderText>
+        )}
+        <ActionItemsListComponent items={items} />
+      </StyledActionGroupContainer>
+      <StyledFAB
+        testID="fab"
+        icon="add"
+        onPress={onPress}
+        animated
+        active={active}
+      />
+    </StyledContainer>
+  );
+};
+
+export default ActionGroup;

package/src/components/FAB/FAB.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconProps } from '../Icon';
+import { AnimatedFABIcon } from './AnimatedFABIcon';
+import { StyledFABContainer } from './StyledFABContainer';
+import { StyledFABIcon } from './StyledFABIcon';
+
+export interface FABProps {
+  /**
+   * Name of the Icon.
+   */
+  icon: IconProps['icon'];
+
+  /**
+   * This function is called on pressing the button.
+   * */
+  onPress?: () => void;
+
+  /**
+   * Specify if the button is animated.
+   */
+  animated?: boolean;
+
+  /**
+   * Specify if the button is in active state. It only works if animated is true.
+   */
+  active?: boolean;
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const FAB = ({ onPress, icon, animated, testID, active, style }: FABProps) => (
+  <StyledFABContainer
+    testID={testID}
+    onPress={onPress}
+    activeOpacity={0.6}
+    style={style}
+  >
+    {animated ? (
+      <AnimatedFABIcon active={active} icon={icon} testID="animated-fab-icon" />
+    ) : (
+      <StyledFABIcon icon={icon} testID="styled-fab-icon" />
+    )}
+  </StyledFABContainer>
+);
+
+export default FAB;

package/src/components/FAB/StyledFABIcon.tsx

@@ -3,7 +3,7 @@ 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};
+  font-size: ${({ theme }) => theme.__hd__.fab.fontSizes.buttonIcon};
 `;
 
 export { StyledFABIcon };

package/src/components/FAB/__tests__/__snapshots__/AnimatedFABIcon.spec.tsx.snap

@@ -24,7 +24,7 @@ exports[`AnimatedFABIcon renders correctly when isActive is false 1`] = `
         },
         Object {
           "color": "#ffffff",
-          "fontSize": 28,
+          "fontSize": 24,
         },
         Object {},
       ]
@@ -59,7 +59,7 @@ exports[`AnimatedFABIcon renders correctly when isActive is true 1`] = `
         },
         Object {
           "color": "#ffffff",
-          "fontSize": 28,
+          "fontSize": 24,
         },
         Object {},
       ]

package/src/components/FAB/__tests__/__snapshots__/StyledFABIcon.spec.tsx.snap

@@ -11,7 +11,7 @@ exports[`StyledFABIcon renders correctly 1`] = `
       },
       Object {
         "color": "#ffffff",
-        "fontSize": 28,
+        "fontSize": 24,
       },
     ]
   }

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FAB when animated is false renders styledFABIcon 1`] = `
+exports[`FAB when animated is false renders StyledFABIcon 1`] = `
 <View
   accessible={true}
-  focusable={true}
+  focusable={false}
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -41,11 +41,11 @@ exports[`FAB when animated is false renders styledFABIcon 1`] = `
         },
         Object {
           "color": "#ffffff",
-          "fontSize": 28,
+          "fontSize": 24,
         },
       ]
     }
-    testID="styledFABIcon"
+    testID="styled-fab-icon"
     themeIntent="text"
     themeSize="medium"
   />
@@ -55,7 +55,7 @@ exports[`FAB when animated is false renders styledFABIcon 1`] = `
 exports[`FAB when animated is true renders animatedFABIcon 1`] = `
 <View
   accessible={true}
-  focusable={true}
+  focusable={false}
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -106,12 +106,12 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
           },
           Object {
             "color": "#ffffff",
-            "fontSize": 28,
+            "fontSize": 24,
           },
           Object {},
         ]
       }
-      testID="animatedFABIcon"
+      testID="animated-fab-icon"
       themeIntent="text"
       themeSize="medium"
     />

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

@@ -17,12 +17,12 @@ describe('FAB', () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByTestId('animatedFABIcon')).toHaveLength(1);
+      expect(queryAllByTestId('animated-fab-icon')).toHaveLength(1);
     });
   });
 
   describe('when animated is false', () => {
-    it('renders styledFABIcon', () => {
+    it('renders StyledFABIcon', () => {
       const { queryAllByTestId, toJSON } = render(
         <ThemeProvider theme={theme}>
           <FAB
@@ -33,7 +33,7 @@ describe('FAB', () => {
       );
 
       expect(toJSON()).toMatchSnapshot();
-      expect(queryAllByTestId('styledFABIcon')).toHaveLength(1);
+      expect(queryAllByTestId('styled-fab-icon')).toHaveLength(1);
     });
   });
 
@@ -46,12 +46,12 @@ describe('FAB', () => {
             onPress={onPressSpy}
             icon="add"
             style={{ backgroundColor: theme.colors.backgroundDark }}
-            testID="FAB"
+            testID="fab"
           />
         </ThemeProvider>
       );
 
-      fireEvent(getByTestId('FAB'), 'press');
+      fireEvent(getByTestId('fab'), 'press');
       expect(onPressSpy).toBeCalledTimes(1);
     });
   });

package/src/components/FAB/index.tsx

@@ -1,56 +1,6 @@
-import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { IconProps } from '../Icon';
-import { AnimatedFABIcon } from './AnimatedFABIcon';
-import { StyledFABContainer } from './StyledFABContainer';
-import { StyledFABIcon } from './StyledFABIcon';
+import FAB from './FAB';
+import ActionGroup from './ActionGroup';
 
-interface FABProps {
-  /**
-   * Name of the Icon.
-   */
-  icon: IconProps['icon'];
-
-  /**
-   * This function is called on pressing the button.
-   * */
-  onPress?: () => void;
-
-  /**
-   * Specify if the button is animated.
-   */
-  animated?: boolean;
-
-  /**
-   * Specify if the button is in active state. It only works if animated is true.
-   */
-  active?: boolean;
-  /**
-   * Addditional style.
-   */
-  style?: StyleProp<ViewStyle>;
-
-  /**
-   * Testing id of the component.
-   */
-  testID?: string;
-}
-
-const FAB = ({ onPress, icon, animated, testID, active, style }: FABProps) => (
-  <StyledFABContainer
-    testID={testID}
-    onPress={() => {
-      onPress?.();
-    }}
-    activeOpacity={0.6}
-    style={style}
-  >
-    {animated ? (
-      <AnimatedFABIcon active={active} icon={icon} testID="animatedFABIcon" />
-    ) : (
-      <StyledFABIcon icon={icon} testID="styledFABIcon" />
-    )}
-  </StyledFABContainer>
-);
-
-export default FAB;
+export default Object.assign(FAB, {
+  ActionGroup,
+});

package/src/components/Icon/utils.ts

@@ -0,0 +1,6 @@
+import IconList from './IconList';
+
+const isHeroIcon = (x: any): x is typeof IconList[number] =>
+  IconList.includes(x);
+
+export { isHeroIcon };

package/src/components/Typography/Text/StyledText.tsx

@@ -4,7 +4,7 @@ import styled, { css } from '../../../styled-components';
 const StyledText = styled(Text)<{
   themeFontSize: 'small' | 'medium' | 'large' | 'xlarge';
   themeFontWeight: 'light' | 'regular' | 'semi-bold';
-  themeIntent: 'body' | 'subdued';
+  themeIntent: 'body' | 'subdued' | 'primary';
 }>`
   ${({ themeFontSize, theme }) => {
     switch (themeFontSize) {
@@ -62,6 +62,10 @@ const StyledText = styled(Text)<{
         return css`
           color: ${theme.__hd__.typography.colors.subdued};
         `;
+      case 'primary':
+        return css`
+          color: ${theme.__hd__.typography.colors.primary};
+        `;
     }
   }}
 `;

package/src/components/Typography/Text/index.tsx

@@ -6,7 +6,7 @@ import {
 } from 'react-native';
 import { StyledText } from './StyledText';
 
-interface TextProps extends NativeTextProps {
+export interface TextProps extends NativeTextProps {
   /**
    * Text content.
    */
@@ -22,7 +22,7 @@ interface TextProps extends NativeTextProps {
   /**
    * Visual intent color to apply to the text.
    */
-  intent?: 'body' | 'subdued';
+  intent?: 'body' | 'subdued' | 'primary';
   /**
    * Addditional style.
    */

package/src/index.ts

@@ -3,6 +3,7 @@ import theme, { getTheme } from './theme';
 import { scale } from './utils/scale';
 
 import Badge from './components/Badge';
+import BottomNavigation from './components/BottomNavigation';
 import Card from './components/Card';
 import Divider from './components/Divider';
 import Icon from './components/Icon';
@@ -16,6 +17,7 @@ export {
   scale,
   ThemeProvider,
   Badge,
+  BottomNavigation,
   Card,
   Divider,
   Icon,

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -30,6 +30,21 @@ Object {
         "default": "4px",
       },
     },
+    "bottomNavigation": Object {
+      "colors": Object {
+        "background": "#ffffff",
+        "shadow": "#292a2b",
+      },
+      "shadows": Object {
+        "elevation": 10,
+        "offset": "0px 3px",
+        "opacity": 0.27,
+        "radius": "4.65px",
+      },
+      "sizes": Object {
+        "height": 72,
+      },
+    },
     "card": Object {
       "padding": Object {
         "default": "8px",
@@ -55,16 +70,43 @@ Object {
     },
     "fab": Object {
       "colors": Object {
+        "actionItemBackground": "#d1d9fe",
+        "backdropBackground": "#ffffff",
         "buttonBackground": "#292a2b",
+        "headerText": "#292a2b",
         "icon": "#ffffff",
       },
       "fontSizes": Object {
-        "default": "28px",
+        "actionItemText": "14px",
+        "buttonIcon": "24px",
+        "header": "24px",
+      },
+      "fontWeights": Object {
+        "actionItemText": "400",
+        "header": "600",
+      },
+      "lineHeights": Object {
+        "actionItemText": "22px",
+        "header": "32px",
+      },
+      "radii": Object {
+        "actionItem": "999px",
       },
       "sizes": Object {
         "height": "64px",
         "width": "64px",
       },
+      "space": Object {
+        "actionItemMargin": "8px",
+        "actionItemMarginRight": "24px",
+        "actionItemPaddingBottom": "8px",
+        "actionItemPaddingLeft": "16px",
+        "actionItemPaddingRight": "16px",
+        "actionItemPaddingTop": "8px",
+        "actionItemTextPaddingLeft": "8px",
+        "headerTextMarginBottom": "24px",
+        "headerTextMarginRight": "24px",
+      },
     },
     "icon": Object {
       "colors": Object {
@@ -86,6 +128,7 @@ Object {
     "typography": Object {
       "colors": Object {
         "body": "#292a2b",
+        "primary": "#7622d7",
         "subdued": "#8b8d92",
       },
       "fontSizes": Object {
@@ -157,6 +200,10 @@ Object {
     "small": 20,
     "xlarge": 26,
     "xsmall": 18,
+    "xxlarge": 28,
+    "xxxlarge": 32,
+    "xxxxlarge": 36,
+    "xxxxxlarge": 40,
   },
   "space": Object {
     "large": 24,

package/src/theme/components/bottomNavigation.ts

@@ -0,0 +1,23 @@
+import { GlobalTheme } from '../global';
+
+const getBottomNavigationTheme = (theme: GlobalTheme) => {
+  const colors = {
+    shadow: theme.colors.backgroundDark,
+    background: theme.colors.platformBackground,
+  };
+
+  const sizes = {
+    height: 72,
+  };
+
+  const shadows = {
+    offset: `0px 3px`,
+    opacity: 0.27,
+    radius: `4.65px`,
+    elevation: 10,
+  };
+
+  return { colors, shadows, sizes };
+};
+
+export default getBottomNavigationTheme;

package/src/theme/components/fab.ts

@@ -4,6 +4,9 @@ const getFABTheme = (theme: GlobalTheme) => {
   const colors = {
     buttonBackground: theme.colors.backgroundDark,
     icon: theme.colors.invertedText,
+    headerText: theme.colors.text,
+    actionItemBackground: theme.colors.infoLight,
+    backdropBackground: theme.colors.platformBackground,
   };
 
   const sizes = {
@@ -12,10 +15,38 @@ const getFABTheme = (theme: GlobalTheme) => {
   };
 
   const fontSizes = {
-    default: `${theme.fontSizes.xxxxlarge}px`,
+    header: `${theme.fontSizes.xxxlarge}px`,
+    buttonIcon: `${theme.fontSizes.xxxlarge}px`,
+    actionItemText: `${theme.fontSizes.medium}px`,
   };
 
-  return { fontSizes, colors, sizes };
+  const fontWeights = {
+    header: `${theme.fontWeights.semiBold}`,
+    actionItemText: `${theme.fontWeights.regular}`,
+  };
+
+  const lineHeights = {
+    header: `${theme.lineHeights.xxxlarge}px`,
+    actionItemText: `${theme.lineHeights.medium}px`,
+  };
+
+  const space = {
+    actionItemPaddingLeft: `${theme.space.medium}px`,
+    actionItemPaddingRight: `${theme.space.medium}px`,
+    actionItemPaddingTop: `${theme.space.small}px`,
+    actionItemPaddingBottom: `${theme.space.small}px`,
+    actionItemMargin: `${theme.space.small}px`,
+    actionItemMarginRight: `${theme.space.large}px`,
+    actionItemTextPaddingLeft: `${theme.space.small}px`,
+    headerTextMarginRight: `${theme.space.large}px`,
+    headerTextMarginBottom: `${theme.space.large}px`,
+  };
+
+  const radii = {
+    actionItem: `999px`,
+  };
+
+  return { radii, fontSizes, colors, sizes, lineHeights, fontWeights, space };
 };
 
 export default getFABTheme;

package/src/theme/components/typography.ts

@@ -4,6 +4,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
   const colors = {
     body: theme.colors.text,
     subdued: theme.colors.disabledText,
+    primary: theme.colors.primary,
   };
 
   const fontSizes = {

package/src/theme/global/typography.ts

@@ -22,6 +22,10 @@ const fontWeights = {
 };
 
 const lineHeights = {
+  xxxxxlarge: fontSizes.xxxxxlarge + 8,
+  xxxxlarge: fontSizes.xxxxlarge + 8,
+  xxxlarge: fontSizes.xxxlarge + 8,
+  xxlarge: fontSizes.xxlarge + 8,
   xlarge: fontSizes.xlarge + 8,
   large: fontSizes.large + 8,
   medium: fontSizes.medium + 8,