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

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

@@ -1,8 +1,8 @@
+import '@testing-library/jest-native/extend-expect';
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent } from '@testing-library/react-native';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 import ActionGroup from '..';
-import { ThemeProvider, theme } from '../../../../index';
-import '@testing-library/jest-native/extend-expect';
 
 describe('ActionGroup', () => {
   it.each`
@@ -10,32 +10,30 @@ describe('ActionGroup', () => {
     ${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>
+    const { toJSON, getByTestId, getByText } = renderWithTheme(
+      <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' },
+        ]}
+      />
     );
 
     expect(toJSON()).toMatchSnapshot();
@@ -64,10 +62,8 @@ describe('ActionGroup', () => {
   describe('when user presses', () => {
     it('calls onPress', () => {
       const onPressSpy = jest.fn();
-      const { getByTestId } = render(
-        <ThemeProvider theme={theme}>
-          <ActionGroup onPress={onPressSpy} />
-        </ThemeProvider>
+      const { getByTestId } = renderWithTheme(
+        <ActionGroup onPress={onPressSpy} />
       );
       fireEvent(getByTestId('fab'), 'press');
       expect(onPressSpy).toBeCalledTimes(1);

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

@@ -29,27 +29,23 @@ 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.
+   * Additional style.
    */
   style?: StyleProp<ViewStyle>;
-
   /**
    * Action items of the action group.
    * */
   items?: Array<ActionItemProps>;
-
   /**
    * Testing id of the component.
    */

package/src/components/FAB/AnimatedFABIcon.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { Animated, StyleSheet } from 'react-native';
 import { IconProps } from '../Icon';
-import { StyledFABIcon } from './StyledFABIcon';
+import { StyledFABIcon } from './StyledFAB';
 
 const AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
 

package/src/components/FAB/FAB.tsx

@@ -1,35 +1,31 @@
 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 { StyledFABContainer, StyledFABIcon } from './StyledFAB';
+import { IconName } from '../Icon';
 
 export interface FABProps {
   /**
    * Name of the Icon.
    */
-  icon: IconProps['icon'];
+  icon: IconName;
 
   /**
    * 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.
+   * Additional style.
    */
   style?: StyleProp<ViewStyle>;
-
   /**
    * Testing id of the component.
    */

package/src/components/FAB/StyledFAB.tsx

@@ -0,0 +1,22 @@
+import { TouchableHighlight, TouchableHighlightProps } from 'react-native';
+import styled from '@emotion/native';
+import Icon, { IconProps } from '../Icon';
+
+const StyledFABContainer = styled(TouchableHighlight)<TouchableHighlightProps>(
+  ({ theme }) => ({
+    height: theme.__hd__.fab.sizes.height,
+    width: theme.__hd__.fab.sizes.width,
+    backgroundColor: theme.__hd__.fab.colors.buttonBackground,
+    borderRadius: 999,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  })
+);
+
+const StyledFABIcon = styled(Icon)<IconProps>(({ theme }) => ({
+  color: theme.__hd__.fab.colors.icon,
+  fontSize: theme.__hd__.fab.fontSizes.buttonIcon,
+}));
+
+export { StyledFABContainer, StyledFABIcon };

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react-native';
-import { ThemeProvider, theme } from '../../../index';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import { AnimatedFABIcon } from '../AnimatedFABIcon';
 
 describe('AnimatedFABIcon', () => {
@@ -9,10 +8,8 @@ describe('AnimatedFABIcon', () => {
     ${true}
     ${false}
   `('renders correctly when isActive is $active', ({ active }) => {
-    const { toJSON } = render(
-      <ThemeProvider theme={theme}>
-        <AnimatedFABIcon active={active} icon="add" />
-      </ThemeProvider>
+    const { toJSON } = renderWithTheme(
+      <AnimatedFABIcon active={active} icon="add" />
     );
 
     expect(toJSON()).toMatchSnapshot();

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { Typography } from '../../../index';
+import { StyledFABContainer, StyledFABIcon } from '../StyledFAB';
+
+describe('StyledFABContainer', () => {
+  it('renders correctly', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledFABContainer>
+        <Typography.Text> button </Typography.Text>
+      </StyledFABContainer>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledFABIcon', () => {
+  it('renders correctly', () => {
+    const { toJSON } = renderWithTheme(<StyledFABIcon icon="add" />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -22,11 +22,13 @@ exports[`AnimatedFABIcon renders correctly when isActive is false 1`] = `
           "color": "#292a2b",
           "fontSize": 24,
         },
-        Object {
-          "color": "#ffffff",
-          "fontSize": 24,
-        },
-        Object {},
+        Array [
+          Object {
+            "color": "#ffffff",
+            "fontSize": 24,
+          },
+          Object {},
+        ],
       ]
     }
     themeIntent="text"
@@ -57,11 +59,13 @@ exports[`AnimatedFABIcon renders correctly when isActive is true 1`] = `
           "color": "#292a2b",
           "fontSize": 24,
         },
-        Object {
-          "color": "#ffffff",
-          "fontSize": 24,
-        },
-        Object {},
+        Array [
+          Object {
+            "color": "#ffffff",
+            "fontSize": 24,
+          },
+          Object {},
+        ],
       ]
     }
     themeIntent="text"

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

@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledFABContainer renders correctly 1`] = `
+<View
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#292a2b",
+        "borderRadius": 999,
+        "height": 64,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "width": 64,
+      },
+      undefined,
+    ]
+  }
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+     button 
+  </Text>
+</View>
+`;
+
+exports[`StyledFABIcon renders correctly 1`] = `
+<HeroIcon
+  name="add"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "color": "#ffffff",
+          "fontSize": 24,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;

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

@@ -16,10 +16,7 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
       Object {
         "alignItems": "center",
         "backgroundColor": "#292a2b",
-        "borderBottomLeftRadius": 999,
-        "borderBottomRightRadius": 999,
-        "borderTopLeftRadius": 999,
-        "borderTopRightRadius": 999,
+        "borderRadius": 999,
         "height": 64,
         "justifyContent": "center",
         "overflow": "hidden",
@@ -39,10 +36,13 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
           "color": "#292a2b",
           "fontSize": 24,
         },
-        Object {
-          "color": "#ffffff",
-          "fontSize": 24,
-        },
+        Array [
+          Object {
+            "color": "#ffffff",
+            "fontSize": 24,
+          },
+          undefined,
+        ],
       ]
     }
     testID="styled-fab-icon"
@@ -68,10 +68,7 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
       Object {
         "alignItems": "center",
         "backgroundColor": "#292a2b",
-        "borderBottomLeftRadius": 999,
-        "borderBottomRightRadius": 999,
-        "borderTopLeftRadius": 999,
-        "borderTopRightRadius": 999,
+        "borderRadius": 999,
         "height": 64,
         "justifyContent": "center",
         "overflow": "hidden",
@@ -104,11 +101,13 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
             "color": "#292a2b",
             "fontSize": 24,
           },
-          Object {
-            "color": "#ffffff",
-            "fontSize": 24,
-          },
-          Object {},
+          Array [
+            Object {
+              "color": "#ffffff",
+              "fontSize": 24,
+            },
+            Object {},
+          ],
         ]
       }
       testID="animated-fab-icon"

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

@@ -1,19 +1,18 @@
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react-native';
-import { ThemeProvider, theme } from '../../../index';
+import { fireEvent } from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { theme } from '../../../index';
 import FAB from '..';
 
 describe('FAB', () => {
   describe('when animated is true', () => {
     it('renders animatedFABIcon', () => {
-      const { queryAllByTestId, toJSON } = render(
-        <ThemeProvider theme={theme}>
-          <FAB
-            icon="add"
-            animated
-            style={{ backgroundColor: theme.colors.backgroundDark }}
-          />
-        </ThemeProvider>
+      const { queryAllByTestId, toJSON } = renderWithTheme(
+        <FAB
+          icon="add"
+          animated
+          style={{ backgroundColor: theme.colors.backgroundDark }}
+        />
       );
 
       expect(toJSON()).toMatchSnapshot();
@@ -23,13 +22,11 @@ describe('FAB', () => {
 
   describe('when animated is false', () => {
     it('renders StyledFABIcon', () => {
-      const { queryAllByTestId, toJSON } = render(
-        <ThemeProvider theme={theme}>
-          <FAB
-            icon="add"
-            style={{ backgroundColor: theme.colors.backgroundDark }}
-          />
-        </ThemeProvider>
+      const { queryAllByTestId, toJSON } = renderWithTheme(
+        <FAB
+          icon="add"
+          style={{ backgroundColor: theme.colors.backgroundDark }}
+        />
       );
 
       expect(toJSON()).toMatchSnapshot();
@@ -40,15 +37,13 @@ describe('FAB', () => {
   describe('when onPress', () => {
     it('triggers onPress', () => {
       const onPressSpy = jest.fn();
-      const { getByTestId } = render(
-        <ThemeProvider theme={theme}>
-          <FAB
-            onPress={onPressSpy}
-            icon="add"
-            style={{ backgroundColor: theme.colors.backgroundDark }}
-            testID="fab"
-          />
-        </ThemeProvider>
+      const { getByTestId } = renderWithTheme(
+        <FAB
+          onPress={onPressSpy}
+          icon="add"
+          style={{ backgroundColor: theme.colors.backgroundDark }}
+          testID="fab"
+        />
       );
 
       fireEvent(getByTestId('fab'), 'press');

package/src/components/Icon/HeroIcon/index.tsx

@@ -1,5 +1,5 @@
 import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
-import styled, { css } from 'styled-components-native';
+import styled from '@emotion/native';
 import heroIconConfig from './selection.json';
 
 type ThemeSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
@@ -20,11 +20,9 @@ const HeroIcon = createIconSetFromIcoMoon(
 const StyledHeroIcon = styled(HeroIcon)<{
   themeSize: ThemeSize;
   themeIntent: ThemeIntent;
-}>`
-  ${({ themeIntent, themeSize }) => css`
-    color: ${({ theme }) => theme.__hd__.icon.colors[themeIntent]};
-    font-size: ${({ theme }) => theme.__hd__.icon.sizes[themeSize]}px;
-  `};
-`;
+}>(({ themeIntent, themeSize, theme }) => ({
+  color: theme.__hd__.icon.colors[themeIntent],
+  fontSize: theme.__hd__.icon.sizes[themeSize],
+}));
 
 export default StyledHeroIcon;

package/src/components/Icon/__tests__/__snapshots__/{Icon.spec.tsx.snap → index.spec.tsx.snap}

@@ -4,10 +4,13 @@ exports[`Icon renders correctly 1`] = `
 <HeroIcon
   name="home"
   style={
-    Object {
-      "color": "#292a2b",
-      "fontSize": 24,
-    }
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      undefined,
+    ]
   }
   themeIntent="text"
   themeSize="medium"
@@ -18,10 +21,13 @@ exports[`Icon renders correctly with color and size 1`] = `
 <HeroIcon
   name="home"
   style={
-    Object {
-      "color": "#de350b",
-      "fontSize": 28,
-    }
+    Array [
+      Object {
+        "color": "#de350b",
+        "fontSize": 28,
+      },
+      undefined,
+    ]
   }
   themeIntent="danger"
   themeSize="large"
@@ -32,10 +38,13 @@ exports[`Icon renders correctly with intent 1`] = `
 <HeroIcon
   name="home"
   style={
-    Object {
-      "color": "#7622d7",
-      "fontSize": 24,
-    }
+    Array [
+      Object {
+        "color": "#7622d7",
+        "fontSize": 24,
+      },
+      undefined,
+    ]
   }
   themeIntent="primary"
   themeSize="medium"

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Icon from '..';
+
+describe('Icon', () => {
+  it('renders correctly', () => {
+    const { toJSON } = renderWithTheme(<Icon icon="home" />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with intent', () => {
+    const { toJSON } = renderWithTheme(<Icon icon="home" intent="primary" />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with color and size', () => {
+    const { toJSON } = renderWithTheme(
+      <Icon icon="home" intent="danger" size="large" />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Icon/index.tsx

@@ -3,7 +3,7 @@ import { StyleProp, TextStyle } from 'react-native';
 import IconList from './IconList';
 import HeroIcon from './HeroIcon';
 
-type IconName = typeof IconList[number];
+export type IconName = typeof IconList[number];
 
 export interface IconProps {
   /**

package/src/components/Tabs/StyledTabs.tsx

@@ -0,0 +1,70 @@
+import { View, FlatList } from 'react-native';
+import styled from '@emotion/native';
+import Icon from '../Icon';
+import Typography from '../Typography';
+
+const TabScreen = styled(View)<{ themeVisibility?: boolean }>(
+  ({ themeVisibility }) => ({
+    flex: 1,
+    display: themeVisibility === false ? 'none' : 'flex',
+  })
+);
+
+const TabContainer = styled(View)({
+  flex: 1,
+  overflow: 'hidden',
+});
+
+const ContentWrapper = styled(View)({
+  flex: 1,
+});
+
+const HeaderTabWrapper = styled(View)<{
+  themeInsets: { top: number; right: number; bottom: number; left: number };
+}>(({ themeInsets, theme }) => ({
+  paddingLeft: Math.max(themeInsets.left, themeInsets.right),
+  paddingRight: Math.max(themeInsets.left, themeInsets.right),
+  backgroundColor: theme.__hd__.tabs.colors.background,
+}));
+
+const StyledFlatList = (styled(FlatList)(({ theme }) => ({
+  paddingLeft: theme.__hd__.tabs.space.flatListHorizontalPadding,
+  paddingRight: theme.__hd__.tabs.space.flatListHorizontalPadding,
+})) as unknown) as new <T>() => FlatList<T>;
+
+const HeaderTabItem = styled(View)(({ theme }) => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  paddingLeft: theme.__hd__.tabs.space.itemHorizontalPadding,
+  paddingRight: theme.__hd__.tabs.space.itemHorizontalPadding,
+  paddingTop: theme.__hd__.tabs.space.itemVerticalPadding,
+  paddingBottom: theme.__hd__.tabs.space.itemVerticalPadding,
+}));
+
+const StyledHeaderTabIcon = styled(Icon)<{ themeActive: boolean }>(
+  ({ themeActive, theme }) => ({
+    color: themeActive
+      ? theme.__hd__.tabs.colors.active
+      : theme.__hd__.tabs.colors.inactive,
+  })
+);
+
+const StyledHeaderTabText = styled(Typography.Text)<{ themeActive: boolean }>(
+  ({ themeActive, theme }) => ({
+    marginLeft: theme.__hd__.tabs.space.titleMarginLeft,
+    color: themeActive
+      ? theme.__hd__.tabs.colors.active
+      : theme.__hd__.tabs.colors.inactive,
+  })
+);
+
+export {
+  StyledFlatList,
+  HeaderTabItem,
+  TabScreen,
+  TabContainer,
+  HeaderTabWrapper,
+  ContentWrapper,
+  StyledHeaderTabIcon,
+  StyledHeaderTabText,
+};