@hero-design/rn 7.2.2 → 7.3.2

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

@@ -0,0 +1,244 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Drawer renders correctly in invisible state 1`] = `
+<View
+  enableShadow={false}
+  pointerEvents="box-none"
+  style={
+    Array [
+      Object {
+        "bottom": 0,
+        "elevation": 9999,
+        "left": 0,
+        "overflow": "hidden",
+        "position": "absolute",
+        "right": 0,
+        "shadowColor": "transparent",
+        "shadowOffset": Object {
+          "height": 3,
+          "width": 0,
+        },
+        "shadowOpacity": 0.27,
+        "shadowRadius": 4.65,
+        "top": 0,
+        "zIndex": 9999,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    pointerEvents="box-none"
+    style={
+      Object {
+        "backgroundColor": "#292a2b",
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    enableShadow={false}
+    nativeID="animatedComponent"
+    onLayout={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderBottomLeftRadius": 16,
+        "borderBottomRightRadius": 16,
+        "elevation": undefined,
+        "overflow": "hidden",
+        "transform": Array [
+          Object {
+            "translateY": -0,
+          },
+        ],
+      }
+    }
+  >
+    <Text>
+      Drawer Content
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Drawer renders correctly in visible state 1`] = `
+<View
+  enableShadow={false}
+  pointerEvents="box-none"
+  style={
+    Array [
+      Object {
+        "bottom": 0,
+        "elevation": 9999,
+        "left": 0,
+        "overflow": "hidden",
+        "position": "absolute",
+        "right": 0,
+        "shadowColor": "transparent",
+        "shadowOffset": Object {
+          "height": 3,
+          "width": 0,
+        },
+        "shadowOpacity": 0.27,
+        "shadowRadius": 4.65,
+        "top": 0,
+        "zIndex": 9999,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    pointerEvents="auto"
+    style={
+      Object {
+        "backgroundColor": "#292a2b",
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0.35,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    enableShadow={false}
+    nativeID="animatedComponent"
+    onLayout={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderBottomLeftRadius": 16,
+        "borderBottomRightRadius": 16,
+        "elevation": undefined,
+        "overflow": "hidden",
+        "transform": Array [
+          Object {
+            "translateY": -0,
+          },
+        ],
+      }
+    }
+  >
+    <Text>
+      Drawer Content
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Drawer renders correctly with no backdrop 1`] = `
+<View
+  enableShadow={false}
+  pointerEvents="box-none"
+  style={
+    Array [
+      Object {
+        "bottom": 0,
+        "elevation": 9999,
+        "left": 0,
+        "overflow": "hidden",
+        "position": "absolute",
+        "right": 0,
+        "shadowColor": "transparent",
+        "shadowOffset": Object {
+          "height": 3,
+          "width": 0,
+        },
+        "shadowOpacity": 0.27,
+        "shadowRadius": 4.65,
+        "top": 0,
+        "zIndex": 9999,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    pointerEvents="box-none"
+    style={
+      Object {
+        "backgroundColor": "#292a2b",
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    enableShadow={false}
+    nativeID="animatedComponent"
+    onLayout={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderBottomLeftRadius": 16,
+        "borderBottomRightRadius": 16,
+        "elevation": undefined,
+        "overflow": "hidden",
+        "transform": Array [
+          Object {
+            "translateY": -0,
+          },
+        ],
+      }
+    }
+  >
+    <Text>
+      Drawer Content
+    </Text>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Drawer from '..';
+
+describe('Drawer', () => {
+  it('renders correctly in visible state', () => {
+    const { toJSON } = renderWithTheme(
+      <Drawer visible>
+        <Text>Drawer Content</Text>
+      </Drawer>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly in invisible state', () => {
+    const { toJSON } = renderWithTheme(
+      <Drawer visible={false}>
+        <Text>Drawer Content</Text>
+      </Drawer>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with no backdrop', () => {
+    const { toJSON } = renderWithTheme(
+      <Drawer hasBackdrop={false} visible={false}>
+        <Text>Drawer Content</Text>
+      </Drawer>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Drawer/index.tsx

@@ -0,0 +1,93 @@
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import { Animated, Easing } from 'react-native';
+
+import {
+  StyledBackdrop,
+  StyledContainer,
+  StyledDrawerContainer,
+} from './StyledDrawer';
+
+interface DrawerProps {
+  /**
+   * Drawer's visibility.
+   */
+  visible: boolean;
+  /**
+   * Drawer's content.
+   */
+  children?: ReactNode;
+  /**
+   * Enable the drawer's backdrop.
+   */
+  hasBackdrop?: boolean;
+  /**
+   * Callback when the drawer is dismissed by interacting outside of the drawer.
+   */
+  onDismiss?: () => void;
+  /**
+   * Testing id of the component.
+   * */
+  testID?: string;
+}
+
+const Drawer = ({
+  visible,
+  children,
+  hasBackdrop = true,
+  onDismiss,
+  testID,
+}: DrawerProps): JSX.Element => {
+  const animatedValue = useRef(new Animated.Value(visible ? 1 : 0)).current;
+  const [height, setHeight] = useState(0);
+
+  const enableShadow = visible && !hasBackdrop;
+
+  const interpolateTranslateY = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-height, 0],
+  });
+
+  const interpolateBackdropOpacity = hasBackdrop
+    ? animatedValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 0.35],
+      })
+    : 0;
+
+  useEffect(() => {
+    const animation = Animated.timing(animatedValue, {
+      toValue: visible ? 1 : 0,
+      easing: Easing.inOut(Easing.cubic),
+      useNativeDriver: true,
+    });
+
+    animation.start();
+
+    return () => animation.stop();
+  }, [visible]);
+
+  return (
+    <StyledContainer
+      testID={testID}
+      enableShadow={enableShadow}
+      pointerEvents="box-none"
+    >
+      <StyledBackdrop
+        pointerEvents={visible ? 'auto' : 'box-none'}
+        onPress={onDismiss}
+        style={{ opacity: interpolateBackdropOpacity }}
+      />
+      <StyledDrawerContainer
+        enableShadow={enableShadow}
+        onLayout={({ nativeEvent }) => setHeight(nativeEvent.layout.height)}
+        style={{
+          transform: [{ translateY: interpolateTranslateY }],
+        }}
+      >
+        {children}
+      </StyledDrawerContainer>
+    </StyledContainer>
+  );
+};
+
+export default Drawer;

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

@@ -464,12 +464,14 @@ exports[`ActionGroup has active false 1`] = `
       Array [
         Object {
           "alignItems": "center",
+          "alignSelf": "flex-start",
           "backgroundColor": "#292a2b",
           "borderRadius": 999,
-          "height": 64,
+          "flexDirection": "row",
           "justifyContent": "center",
           "overflow": "hidden",
-          "width": 64,
+          "paddingHorizontal": 16,
+          "paddingVertical": 16,
         },
         Array [
           Object {
@@ -483,41 +485,47 @@ exports[`ActionGroup has active false 1`] = `
     }
     testID="fab"
   >
-    <View
-      collapsable={false}
-      nativeID="animatedComponent"
+    <HeroIcon
+      name="add"
       style={
-        Object {
-          "transform": Array [
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 16,
+          },
+          Array [
             Object {
-              "rotate": "0deg",
+              "color": "#ffffff",
+              "lineHeight": 24,
+              "textAlign": "center",
+              "textAlignVertical": "center",
             },
+            undefined,
           ],
-        }
+        ]
+      }
+      testID="styled-fab-icon"
+      themeIntent="text"
+      themeSize="xsmall"
+    />
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#ffffff",
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 16,
+            "lineHeight": 24,
+            "marginHorizontal": 8,
+            "textAlign": "center",
+            "textAlignVertical": "center",
+          },
+          undefined,
+        ]
       }
     >
-      <HeroIcon
-        name="add"
-        style={
-          Array [
-            Object {
-              "color": "#292a2b",
-              "fontSize": 24,
-            },
-            Array [
-              Object {
-                "color": "#ffffff",
-                "fontSize": 24,
-              },
-              Object {},
-            ],
-          ]
-        }
-        testID="animated-fab-icon"
-        themeIntent="text"
-        themeSize="medium"
-      />
-    </View>
+      Shout out
+    </Text>
   </View>
 </View>
 `;
@@ -986,12 +994,14 @@ exports[`ActionGroup has active true 1`] = `
       Array [
         Object {
           "alignItems": "center",
+          "alignSelf": "flex-start",
           "backgroundColor": "#292a2b",
           "borderRadius": 999,
-          "height": 64,
+          "flexDirection": "row",
           "justifyContent": "center",
           "overflow": "hidden",
-          "width": 64,
+          "paddingHorizontal": 16,
+          "paddingVertical": 16,
         },
         Array [
           Object {
@@ -1005,41 +1015,47 @@ exports[`ActionGroup has active true 1`] = `
     }
     testID="fab"
   >
-    <View
-      collapsable={false}
-      nativeID="animatedComponent"
+    <HeroIcon
+      name="add"
       style={
-        Object {
-          "transform": Array [
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontSize": 16,
+          },
+          Array [
             Object {
-              "rotate": "-45deg",
+              "color": "#ffffff",
+              "lineHeight": 24,
+              "textAlign": "center",
+              "textAlignVertical": "center",
             },
+            undefined,
           ],
-        }
+        ]
+      }
+      testID="styled-fab-icon"
+      themeIntent="text"
+      themeSize="xsmall"
+    />
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#ffffff",
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 16,
+            "lineHeight": 24,
+            "marginHorizontal": 8,
+            "textAlign": "center",
+            "textAlignVertical": "center",
+          },
+          undefined,
+        ]
       }
     >
-      <HeroIcon
-        name="add"
-        style={
-          Array [
-            Object {
-              "color": "#292a2b",
-              "fontSize": 24,
-            },
-            Array [
-              Object {
-                "color": "#ffffff",
-                "fontSize": 24,
-              },
-              Object {},
-            ],
-          ]
-        }
-        testID="animated-fab-icon"
-        themeIntent="text"
-        themeSize="medium"
-      />
-    </View>
+      Shout out
+    </Text>
   </View>
 </View>
 `;

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

@@ -12,6 +12,7 @@ describe('ActionGroup', () => {
   `('has active $active', ({ active }) => {
     const { toJSON, getByTestId, getByText } = renderWithTheme(
       <ActionGroup
+        fabTitle="Shout out"
         active={active}
         headerTitle="What would you like to create?"
         items={[
@@ -39,6 +40,7 @@ describe('ActionGroup', () => {
     expect(toJSON()).toMatchSnapshot();
 
     expect(getByText('What would you like to create?')).toBeDefined();
+    expect(getByText('Shout out')).toBeDefined();
     expect(getByTestId('speaker-action-item')).toBeDefined();
     expect(getByTestId('target-action-item')).toBeDefined();
     expect(getByTestId('plane-action-item')).toBeDefined();

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

@@ -29,25 +29,36 @@ 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;
+
+  /**
+   * Title of the floating action button
+   */
+  fabTitle?: string;
+
   /**
    * Additional style.
    */
   style?: StyleProp<ViewStyle>;
+
   /**
    * Action items of the action group.
    * */
+
   items?: Array<ActionItemProps>;
   /**
    * Testing id of the component.
    */
+
   testID?: string;
 }
 const ActionGroup = ({
@@ -57,6 +68,7 @@ const ActionGroup = ({
   style,
   items,
   testID,
+  fabTitle,
 }: ActionGroupProps) => {
   const tranlateXAnimation = useRef<Animated.Value>(
     new Animated.Value(active ? 1 : 0)
@@ -107,6 +119,7 @@ const ActionGroup = ({
         onPress={onPress}
         animated
         active={active}
+        title={fabTitle}
       />
     </StyledContainer>
   );