@hero-design/rn 7.1.3-alpha5 → 7.1.3-alpha6

package/playground/components/BottomNavigation.tsx

@@ -27,35 +27,35 @@ const ProfileScreen = () => (
   </View>
 );
 
-const tabs: Tab<number>[] = [
+const tabs: Tab[] = [
   {
-    key: 0,
+    key: 'home',
     title: 'Home',
     icon: 'home',
     component: <HomeScreen />,
   },
   {
-    key: 1,
+    key: 'feed',
     title: 'Feed',
     icon: 'speaker',
     component: <FeedScreen />,
   },
   {
-    key: 2,
+    key: 'alerts',
     title: 'Alerts',
     icon: 'bell',
     component: <AlertsScreen />,
   },
   {
-    key: 3,
+    key: 'profile',
     title: 'Profile',
     icon: 'user',
     component: <ProfileScreen />,
   },
 ];
 
-const MyComponent = () => {
-  const [selectedTabKey, setSelectedTabKey] = React.useState(0);
+const BottomNavigationPlayground = () => {
+  const [selectedTabKey, setSelectedTabKey] = React.useState('home');
 
   return (
     <BottomNavigation
@@ -66,4 +66,4 @@ const MyComponent = () => {
   );
 };
 
-export default MyComponent;
+export default BottomNavigationPlayground;

package/playground/components/Button.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Button, Typography, useTheme } from '../../src/index';
+
+const ButtonPlayground = (): JSX.Element => {
+  const theme = useTheme();
+  return (
+    <View style={{ padding: theme.space.small }}>
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        Different Intents and Sizes from Icon
+      </Typography.Text>
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          marginBottom: theme.space.large,
+        }}
+      >
+        <Button.Icon
+          icon="circle-add-outlined"
+          intent="text"
+          size="xsmall"
+          onPress={() => {}}
+          style={{ marginEnd: theme.space.medium }}
+        />
+        <Button.Icon
+          icon="circle-add-outlined"
+          intent="primary"
+          size="xsmall"
+          onPress={() => {}}
+          style={{ marginEnd: theme.space.medium }}
+        />
+        <Button.Icon
+          icon="circle-add-outlined"
+          intent="success"
+          size="small"
+          onPress={() => {}}
+          style={{ marginEnd: theme.space.medium }}
+        />
+        <Button.Icon
+          icon="circle-add-outlined"
+          intent="info"
+          size="medium"
+          onPress={() => {}}
+          style={{ marginEnd: theme.space.medium }}
+        />
+        <Button.Icon
+          icon="circle-add-outlined"
+          intent="warning"
+          size="large"
+          onPress={() => {}}
+          style={{ marginEnd: theme.space.medium }}
+        />
+        <Button.Icon
+          icon="circle-add-outlined"
+          intent="danger"
+          size="xlarge"
+          onPress={() => {}}
+          style={{ marginEnd: theme.space.medium }}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default ButtonPlayground;

package/playground/components/FAB.tsx

@@ -28,12 +28,15 @@ const FABPlayground = (): JSX.Element => {
         </TouchableHighlight>
         <FAB.ActionGroup
           style={{
-            marginBottom: theme.space.large,
+            marginBottom: theme.space.medium,
           }}
           items={[
+            { icon: 'coin', title: 'Expense Claim' },
             { icon: 'speaker', title: 'Give shout out' },
             { icon: 'target', title: 'Goal' },
             { icon: 'plane', title: 'Leave request' },
+            { icon: 'reply', title: 'Memeber Feedback' },
+            { icon: 'star-medal', title: 'Recognition teammate' },
             { icon: 'health-bag', title: 'Safety incident' },
             { icon: 'clock', title: 'Timesheets' },
           ]}

package/playground/components/Tabs.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Tab } from '../../src/components/Tabs';
+import { Tabs, Typography } from '../../src/index';
+
+const WorkScreen = () => (
+  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+    <Typography.Text>Work Screen</Typography.Text>
+  </View>
+);
+
+const PersonalScreen = () => (
+  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+    <Typography.Text>Personal Screen</Typography.Text>
+  </View>
+);
+
+const tabs: Tab[] = [
+  {
+    key: 'work',
+    title: 'Work',
+    icon: 'suitcase',
+    component: <WorkScreen />,
+  },
+  {
+    key: 'personal',
+    title: 'Personal',
+    icon: 'face-smiley',
+    component: <PersonalScreen />,
+  },
+];
+
+const TabsPlayground = () => {
+  const [selectedTabKey, setSelectedTabKey] = React.useState('work');
+
+  return (
+    <Tabs
+      onChange={newTabKey => setSelectedTabKey(newTabKey)}
+      selectedTabKey={selectedTabKey}
+      tabs={tabs}
+    />
+  );
+};
+
+export default TabsPlayground;

package/playground/index.tsx

@@ -10,11 +10,13 @@ import { SafeAreaView, FlatList } from 'react-native';
 import { ThemeProvider, theme, useTheme, Typography } from '../src/index';
 import BadgePlayground from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
+import Button from './components/Button';
 import CardPlayground from './components/Card';
 import DividerPlayground from './components/Divider';
+import FABPlayground from './components/FAB';
 import IconPlayground from './components/Icon';
+import TabsPlayground from './components/Tabs';
 import TypographyPlayground from './components/Typography';
-import FABPlayground from './components/FAB';
 
 const heroIconFontPath = require('../assets/fonts/hero-icons.ttf');
 const beVietnamProLightFont = require('../assets/fonts/be-vietnam-pro-light.ttf');
@@ -22,14 +24,16 @@ const beVietnamProRegularFont = require('../assets/fonts/be-vietnam-pro-regular.
 const beVietnamProSemiBoldFont = require('../assets/fonts/be-vietnam-pro-semibold.ttf');
 
 type RootStackParamList = {
-  Home: undefined;
   Badge: undefined;
   BottomNavigation: undefined;
+  Button: undefined;
   Card: undefined;
   Divider: undefined;
+  FAB: undefined;
+  Home: undefined;
   Icon: undefined;
+  Tabs: undefined;
   Typography: undefined;
-  FAB: undefined;
 };
 
 type Navigation = NativeStackScreenProps<RootStackParamList>;
@@ -39,11 +43,13 @@ const Stack = createNativeStackNavigator<RootStackParamList>();
 const components = [
   { name: 'Badge', component: BadgePlayground },
   { name: 'BottomNavigation', component: BottomNavigation },
+  { name: 'Button', component: Button },
   { name: 'Card', component: CardPlayground },
   { name: 'Divider', component: DividerPlayground },
+  { name: 'FAB', component: FABPlayground },
   { name: 'Icon', component: IconPlayground },
+  { name: 'Tabs', component: TabsPlayground },
   { name: 'Typography', component: TypographyPlayground },
-  { name: 'FAB', component: FABPlayground },
 ] as const;
 
 const ComponentItem = ({

package/src/components/Badge/StyledBadge.tsx

@@ -1,5 +1,6 @@
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
 import styled, { css } from 'styled-components-native';
+import Typography from '../Typography';
 
 const BACKGROUND_INTENTS = {
   success: 'successBackground',
@@ -22,10 +23,7 @@ const StyledView = styled(View)<{ themeIntent: ThemeIntent }>`
   `};
 `;
 
-const StyledText = styled(Text)<{ themeIntent: ThemeIntent }>`
-  font-family: ${({ theme }) => theme.__hd__.badge.fonts.default};
-  font-size: ${({ theme }) => theme.__hd__.badge.fontSizes.default};
-
+const StyledText = styled(Typography.Text)<{ themeIntent: ThemeIntent }>`
   ${({ themeIntent }) => css`
     color: ${({ theme }) => theme.__hd__.badge.colors[themeIntent]};
   `};

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

@@ -27,12 +27,20 @@ exports[`Badge has danger style when intent is danger 1`] = `
 >
   <Text
     style={
-      Object {
-        "color": "#de350b",
-        "fontFamily": "Be Vietnam Pro SemiBold",
-        "fontSize": 12,
-      }
+      Array [
+        Object {
+          "fontFamily": "Be Vietnam Pro SemiBold",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 20,
+        },
+        Object {
+          "color": "#de350b",
+        },
+      ]
     }
+    themeFontSize="small"
+    themeFontWeight="semi-bold"
     themeIntent="danger"
   >
     DECLINED
@@ -67,12 +75,20 @@ exports[`Badge has info style when intent is info 1`] = `
 >
   <Text
     style={
-      Object {
-        "color": "#4568fb",
-        "fontFamily": "Be Vietnam Pro SemiBold",
-        "fontSize": 12,
-      }
+      Array [
+        Object {
+          "fontFamily": "Be Vietnam Pro SemiBold",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 20,
+        },
+        Object {
+          "color": "#4568fb",
+        },
+      ]
     }
+    themeFontSize="small"
+    themeFontWeight="semi-bold"
     themeIntent="info"
   >
     SUBMITTED
@@ -107,12 +123,20 @@ exports[`Badge has success style when intent is success 1`] = `
 >
   <Text
     style={
-      Object {
-        "color": "#017d6d",
-        "fontFamily": "Be Vietnam Pro SemiBold",
-        "fontSize": 12,
-      }
+      Array [
+        Object {
+          "fontFamily": "Be Vietnam Pro SemiBold",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 20,
+        },
+        Object {
+          "color": "#017d6d",
+        },
+      ]
     }
+    themeFontSize="small"
+    themeFontWeight="semi-bold"
     themeIntent="success"
   >
     APPROVED
@@ -147,12 +171,20 @@ exports[`Badge has warning style when intent is warning 1`] = `
 >
   <Text
     style={
-      Object {
-        "color": "#d98a2c",
-        "fontFamily": "Be Vietnam Pro SemiBold",
-        "fontSize": 12,
-      }
+      Array [
+        Object {
+          "fontFamily": "Be Vietnam Pro SemiBold",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 20,
+        },
+        Object {
+          "color": "#d98a2c",
+        },
+      ]
     }
+    themeFontSize="small"
+    themeFontWeight="semi-bold"
     themeIntent="warning"
   >
     PENDING

package/src/components/Badge/index.tsx

@@ -34,7 +34,9 @@ const Badge = ({
     testID={testID}
     {...nativeProps}
   >
-    <StyledText themeIntent={intent}>{content}</StyledText>
+    <StyledText themeIntent={intent} fontSize="small" fontWeight="semi-bold">
+      {content}
+    </StyledText>
   </StyledView>
 );
 

package/src/components/BottomNavigation/StyledBottomNavigation.tsx

@@ -1,5 +1,6 @@
 import { View } from 'react-native';
 import styled from 'styled-components-native';
+import Typography from '../Typography';
 
 const BottomNavigationTab = styled(View)<{ themeVisibility?: boolean }>`
   flex: 1;
@@ -48,6 +49,11 @@ const BottomBarItem = styled(View)`
   align-items: center;
 `;
 
+const StyledBottomBarText = styled(Typography.Text)`
+  margin-top: ${({ theme }) =>
+    theme.__hd__.bottomNavigation.space.titleMarginTop};
+`;
+
 export {
   BottomBar,
   BottomBarItem,
@@ -55,4 +61,5 @@ export {
   BottomNavigationContainer,
   BottomBarWrapper,
   ContentWrapper,
+  StyledBottomBarText,
 };

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

@@ -12,7 +12,7 @@ const TestComponent = (
   >
 ) => {
   const [selectedTabKey, setSelectedTabKey] = React.useState('home');
-  const tabs: Tab<string>[] = [
+  const tabs: Tab[] = [
     {
       key: 'home',
       title: 'Home',

package/src/components/BottomNavigation/index.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import {
   TouchableWithoutFeedback,
   StyleProp,
@@ -6,10 +6,8 @@ import {
   ViewProps,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTheme } from 'styled-components-native';
-import Icon from '../Icon';
+import Icon, { IconProps } from '../Icon';
 import { isHeroIcon } from '../Icon/utils';
-import Typography from '../Typography';
 import {
   BottomBar,
   BottomBarItem,
@@ -17,25 +15,25 @@ import {
   BottomNavigationContainer,
   BottomNavigationTab,
   ContentWrapper,
+  StyledBottomBarText,
 } from './StyledBottomNavigation';
 import { isIOS } from '../../utils/helpers';
 
-type IconType = ComponentProps<typeof Icon>['icon'];
+type IconType = IconProps['icon'];
 
-export type Tab<V> = {
-  key: V;
+export type Tab = {
+  key: string;
   title?: string;
   icon: IconType;
   component: ReactNode;
   testID?: string;
 };
 
-interface BottomNavigationType<V extends string | number, T extends Tab<V>>
-  extends ViewProps {
+interface BottomNavigationType extends ViewProps {
   /**
    * Callback which is called on tab change, receiving id of upcoming active Tab.
    */
-  onChange: (key: V) => void;
+  onChange: (key: string) => void;
   /**
    * Whether inactive tabs should be removed and unmounted in React.
    * Defaults to `false`.
@@ -44,11 +42,11 @@ interface BottomNavigationType<V extends string | number, T extends Tab<V>>
   /**
    * Current selected tab key.
    */
-  selectedTabKey: V;
+  selectedTabKey: string;
   /**
    * List of Tab to be rendered. Each Tab must have an unique id.
    */
-  tabs: T[];
+  tabs: Tab[];
   /**
    * Addditional style.
    */
@@ -64,14 +62,13 @@ const getInactiveIcon = (icon: IconType): IconType => {
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
 };
 
-const BottomNavigation = <V extends string | number, T extends Tab<V>>({
+const BottomNavigation = ({
   onChange,
   renderActiveTabOnly = false,
   selectedTabKey,
   tabs,
   ...nativeProps
-}: BottomNavigationType<V, T>): JSX.Element => {
-  const theme = useTheme();
+}: BottomNavigationType): JSX.Element => {
   const insets = useSafeAreaInsets();
 
   /**
@@ -146,15 +143,14 @@ const BottomNavigation = <V extends string | number, T extends Tab<V>>({
                     testID={`hero-icon-${icon}`}
                   />
                   {title && (
-                    <Typography.Text
+                    <StyledBottomBarText
                       fontSize="small"
                       fontWeight="semi-bold"
                       intent={active ? 'primary' : 'body'}
-                      style={{ marginTop: theme.space.xsmall }}
                       numberOfLines={1}
                     >
                       {title}
-                    </Typography.Text>
+                    </StyledBottomBarText>
                   )}
                 </BottomBarItem>
               </TouchableWithoutFeedback>

package/src/components/Button/IconButton.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import {
+  StyleProp,
+  ViewStyle,
+  TouchableOpacity,
+  TouchableOpacityProps,
+} from 'react-native';
+
+import Icon, { IconProps } from '../Icon';
+
+export interface IconButtonProps {
+  /**
+   * Set how far you can touch from the button
+   */
+  hitSlop?: TouchableOpacityProps['hitSlop'];
+  /**
+   * Name of the Icon.
+   */
+  icon: IconProps['icon'];
+  /**
+   * Intent of the Icon.
+   */
+  intent?: IconProps['intent'];
+  /**
+   * Set the handler to handle press event.
+   */
+  onPress: () => void;
+  /**
+   * Size of the Icon.
+   */
+  size?: IconProps['size'];
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of component
+   */
+  testID?: string;
+}
+
+const IconButton = ({
+  hitSlop,
+  onPress,
+  icon,
+  testID,
+  style,
+  size,
+  intent,
+}: IconButtonProps) => (
+  <TouchableOpacity
+    style={style}
+    onPress={onPress}
+    testID={testID}
+    hitSlop={hitSlop}
+  >
+    <Icon icon={icon} size={size} intent={intent} />
+  </TouchableOpacity>
+);
+
+export default IconButton;

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

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconButton renders correctly 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  hitSlop={
+    Object {
+      "bottom": 4,
+      "left": 6,
+      "right": 6,
+      "top": 4,
+    }
+  }
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "opacity": 1,
+    }
+  }
+  testID="icon-btn"
+>
+  <HeroIcon
+    name="home"
+    style={
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      }
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+</View>
+`;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+
+import { ThemeProvider, theme } from '../../../index';
+
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+
+import Button from '..';
+
+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>
+    );
+
+    fireEvent.press(getByTestId('icon-btn'));
+    expect(onPress).toBeCalledTimes(1);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Button/index.tsx

@@ -0,0 +1,5 @@
+import IconButton from './IconButton';
+
+const Button = { Icon: IconButton } as const;
+
+export default Button;

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

@@ -26,7 +26,7 @@ const StyledActionGroupContainer = styled(Animated.View)<
 const StyledFAB = styled(FAB)<{}>`
   margin-right: ${({ theme }) => theme.space.large};
   align-self: flex-end;
-  margin-top: ${({ theme }) => theme.space.large};
+  margin-top: ${({ theme }) => theme.space.small};
 `;
 
 const StyledBackdrop = styled(Animated.View)<

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

@@ -533,7 +533,7 @@ exports[`ActionGroup has active true 1`] = `
         "backgroundColor": "#ffffff",
         "bottom": 0,
         "left": 0,
-        "opacity": 0.5,
+        "opacity": 0.9,
         "position": "absolute",
         "right": 0,
         "top": 0,