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

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

@@ -1,14 +1,11 @@
 import React from 'react';
-import { render } from '@testing-library/react-native';
-import { ThemeProvider, theme } from '../../../index';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Badge from '..';
 
 describe('Badge', () => {
   it('has success style when intent is success', () => {
-    const { getByText, toJSON } = render(
-      <ThemeProvider theme={theme}>
-        <Badge content="APPROVED" intent="success" />
-      </ThemeProvider>
+    const { getByText, toJSON } = renderWithTheme(
+      <Badge content="APPROVED" intent="success" />
     );
 
     expect(toJSON()).toMatchSnapshot();
@@ -16,10 +13,8 @@ describe('Badge', () => {
   });
 
   it('has warning style when intent is warning', () => {
-    const { getByText, toJSON } = render(
-      <ThemeProvider theme={theme}>
-        <Badge content="PENDING" intent="warning" />
-      </ThemeProvider>
+    const { getByText, toJSON } = renderWithTheme(
+      <Badge content="PENDING" intent="warning" />
     );
 
     expect(toJSON()).toMatchSnapshot();
@@ -27,10 +22,8 @@ describe('Badge', () => {
   });
 
   it('has danger style when intent is danger', () => {
-    const { getByText, toJSON } = render(
-      <ThemeProvider theme={theme}>
-        <Badge content="DECLINED" intent="danger" />
-      </ThemeProvider>
+    const { getByText, toJSON } = renderWithTheme(
+      <Badge content="DECLINED" intent="danger" />
     );
 
     expect(toJSON()).toMatchSnapshot();
@@ -38,10 +31,8 @@ describe('Badge', () => {
   });
 
   it('has info style when intent is info', () => {
-    const { getByText, toJSON } = render(
-      <ThemeProvider theme={theme}>
-        <Badge content="SUBMITTED" intent="info" />
-      </ThemeProvider>
+    const { getByText, toJSON } = renderWithTheme(
+      <Badge content="SUBMITTED" intent="info" />
     );
 
     expect(toJSON()).toMatchSnapshot();

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

@@ -3,35 +3,30 @@
 exports[`Badge has danger style when intent is danger 1`] = `
 <View
   style={
-    Object {
-      "backgroundColor": "#fcebe7",
-      "borderBottomColor": "#de350b",
-      "borderBottomLeftRadius": 4,
-      "borderBottomRightRadius": 4,
-      "borderBottomWidth": 1,
-      "borderLeftColor": "#de350b",
-      "borderLeftWidth": 1,
-      "borderRightColor": "#de350b",
-      "borderRightWidth": 1,
-      "borderTopColor": "#de350b",
-      "borderTopLeftRadius": 4,
-      "borderTopRightRadius": 4,
-      "borderTopWidth": 1,
-      "paddingBottom": 4,
-      "paddingLeft": 8,
-      "paddingRight": 8,
-      "paddingTop": 4,
-    }
+    Array [
+      Object {
+        "backgroundColor": "#fcebe7",
+        "borderColor": "#de350b",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 2,
+      },
+      undefined,
+    ]
   }
   themeIntent="danger"
 >
   <Text
     style={
-      Object {
-        "color": "#de350b",
-        "fontFamily": "Be Vietnam Pro SemiBold",
-        "fontSize": 12,
-      }
+      Array [
+        Object {
+          "color": "#de350b",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+        },
+        undefined,
+      ]
     }
     themeIntent="danger"
   >
@@ -43,35 +38,30 @@ exports[`Badge has danger style when intent is danger 1`] = `
 exports[`Badge has info style when intent is info 1`] = `
 <View
   style={
-    Object {
-      "backgroundColor": "#ecf0ff",
-      "borderBottomColor": "#4568fb",
-      "borderBottomLeftRadius": 4,
-      "borderBottomRightRadius": 4,
-      "borderBottomWidth": 1,
-      "borderLeftColor": "#4568fb",
-      "borderLeftWidth": 1,
-      "borderRightColor": "#4568fb",
-      "borderRightWidth": 1,
-      "borderTopColor": "#4568fb",
-      "borderTopLeftRadius": 4,
-      "borderTopRightRadius": 4,
-      "borderTopWidth": 1,
-      "paddingBottom": 4,
-      "paddingLeft": 8,
-      "paddingRight": 8,
-      "paddingTop": 4,
-    }
+    Array [
+      Object {
+        "backgroundColor": "#ecf0ff",
+        "borderColor": "#4568fb",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 2,
+      },
+      undefined,
+    ]
   }
   themeIntent="info"
 >
   <Text
     style={
-      Object {
-        "color": "#4568fb",
-        "fontFamily": "Be Vietnam Pro SemiBold",
-        "fontSize": 12,
-      }
+      Array [
+        Object {
+          "color": "#4568fb",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+        },
+        undefined,
+      ]
     }
     themeIntent="info"
   >
@@ -83,35 +73,30 @@ exports[`Badge has info style when intent is info 1`] = `
 exports[`Badge has success style when intent is success 1`] = `
 <View
   style={
-    Object {
-      "backgroundColor": "#f0fef4",
-      "borderBottomColor": "#017d6d",
-      "borderBottomLeftRadius": 4,
-      "borderBottomRightRadius": 4,
-      "borderBottomWidth": 1,
-      "borderLeftColor": "#017d6d",
-      "borderLeftWidth": 1,
-      "borderRightColor": "#017d6d",
-      "borderRightWidth": 1,
-      "borderTopColor": "#017d6d",
-      "borderTopLeftRadius": 4,
-      "borderTopRightRadius": 4,
-      "borderTopWidth": 1,
-      "paddingBottom": 4,
-      "paddingLeft": 8,
-      "paddingRight": 8,
-      "paddingTop": 4,
-    }
+    Array [
+      Object {
+        "backgroundColor": "#f0fef4",
+        "borderColor": "#017d6d",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 2,
+      },
+      undefined,
+    ]
   }
   themeIntent="success"
 >
   <Text
     style={
-      Object {
-        "color": "#017d6d",
-        "fontFamily": "Be Vietnam Pro SemiBold",
-        "fontSize": 12,
-      }
+      Array [
+        Object {
+          "color": "#017d6d",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+        },
+        undefined,
+      ]
     }
     themeIntent="success"
   >
@@ -123,35 +108,30 @@ exports[`Badge has success style when intent is success 1`] = `
 exports[`Badge has warning style when intent is warning 1`] = `
 <View
   style={
-    Object {
-      "backgroundColor": "#fff6eb",
-      "borderBottomColor": "#d98a2c",
-      "borderBottomLeftRadius": 4,
-      "borderBottomRightRadius": 4,
-      "borderBottomWidth": 1,
-      "borderLeftColor": "#d98a2c",
-      "borderLeftWidth": 1,
-      "borderRightColor": "#d98a2c",
-      "borderRightWidth": 1,
-      "borderTopColor": "#d98a2c",
-      "borderTopLeftRadius": 4,
-      "borderTopRightRadius": 4,
-      "borderTopWidth": 1,
-      "paddingBottom": 4,
-      "paddingLeft": 8,
-      "paddingRight": 8,
-      "paddingTop": 4,
-    }
+    Array [
+      Object {
+        "backgroundColor": "#fff6eb",
+        "borderColor": "#d98a2c",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "paddingHorizontal": 8,
+        "paddingVertical": 2,
+      },
+      undefined,
+    ]
   }
   themeIntent="warning"
 >
   <Text
     style={
-      Object {
-        "color": "#d98a2c",
-        "fontFamily": "Be Vietnam Pro SemiBold",
-        "fontSize": 12,
-      }
+      Array [
+        Object {
+          "color": "#d98a2c",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 12,
+        },
+        undefined,
+      ]
     }
     themeIntent="warning"
   >

package/src/components/Badge/index.tsx

@@ -12,7 +12,7 @@ interface BadgeProps extends ViewProps {
    */
   intent?: 'success' | 'warning' | 'danger' | 'info';
   /**
-   * Addditional style.
+   * Additional style.
    */
   style?: StyleProp<ViewStyle>;
   /**

package/src/components/BottomNavigation/StyledBottomNavigation.tsx

@@ -1,52 +1,53 @@
 import { View } from 'react-native';
-import styled from 'styled-components-native';
+import styled from '@emotion/native';
+import Typography from '../Typography';
 
-const BottomNavigationTab = styled(View)<{ themeVisibility?: boolean }>`
-  flex: 1;
-  display: ${({ themeVisibility }) =>
-    themeVisibility === false ? 'none' : 'flex'};
-`;
+const BottomNavigationTab = styled(View)<{ themeVisibility?: boolean }>(
+  ({ themeVisibility }) => ({
+    flex: 1,
+    display: themeVisibility === false ? 'none' : 'flex',
+  })
+);
 
-const BottomNavigationContainer = styled(View)`
-  flex: 1;
-  overflow: hidden;
-`;
+const BottomNavigationContainer = styled(View)({
+  flex: 1,
+  overflow: 'hidden',
+});
 
-const ContentWrapper = styled(View)`
-  flex: 1;
-`;
+const ContentWrapper = styled(View)({
+  flex: 1,
+});
 
 const BottomBarWrapper = styled(View)<{
   themeInsets: { top: number; right: number; bottom: number; left: number };
-}>`
-  height: ${({ theme, themeInsets }) =>
-    theme.__hd__.bottomNavigation.sizes.height + themeInsets.bottom}px;
-  padding-bottom: ${({ themeInsets }) => themeInsets.bottom}px;
-  padding-left: ${({ themeInsets }) =>
-    Math.max(themeInsets.left, themeInsets.right)}px;
-  padding-right: ${({ themeInsets }) =>
-    Math.max(themeInsets.left, themeInsets.right)}px;
-  background-color: ${({ theme }) =>
-    theme.__hd__.bottomNavigation.colors.background};
-  shadow-color: ${({ theme }) => theme.__hd__.bottomNavigation.colors.shadow};
-  shadow-offset: ${({ theme }) => theme.__hd__.bottomNavigation.shadows.offset};
-  shadow-opacity: ${({ theme }) =>
-    theme.__hd__.bottomNavigation.shadows.opacity};
-  shadow-radius: ${({ theme }) => theme.__hd__.bottomNavigation.shadows.radius};
-  elevation: ${({ theme }) => theme.__hd__.bottomNavigation.shadows.elevation};
-`;
-
-const BottomBar = styled(View)`
-  flex: 1;
-  flex-direction: row;
-  overflow: hidden;
-  align-items: center;
-`;
-
-const BottomBarItem = styled(View)`
-  flex: 1;
-  align-items: center;
-`;
+}>(({ themeInsets, theme }) => ({
+  height: theme.__hd__.bottomNavigation.sizes.height + themeInsets.bottom,
+  paddingBottom: themeInsets.bottom,
+  paddingLeft: Math.max(themeInsets.left, themeInsets.right),
+  paddingRight: Math.max(themeInsets.left, themeInsets.right),
+  backgroundColor: theme.__hd__.bottomNavigation.colors.background,
+  shadowColor: theme.__hd__.bottomNavigation.colors.shadow,
+  shadowOffset: theme.__hd__.bottomNavigation.shadows.offset,
+  shadowOpacity: theme.__hd__.bottomNavigation.shadows.opacity,
+  shadowRadius: theme.__hd__.bottomNavigation.shadows.radius,
+  elevation: theme.__hd__.bottomNavigation.shadows.elevation,
+}));
+
+const BottomBar = styled(View)({
+  flex: 1,
+  flexDirection: 'row',
+  overflow: 'hidden',
+  alignItems: 'center',
+});
+
+const BottomBarItem = styled(View)({
+  flex: 1,
+  alignItems: 'center',
+});
+
+const StyledBottomBarText = styled(Typography.Text)(({ theme }) => ({
+  marginTop: theme.__hd__.bottomNavigation.space.titleMarginTop,
+}));
 
 export {
   BottomBar,
@@ -55,4 +56,5 @@ export {
   BottomNavigationContainer,
   BottomBarWrapper,
   ContentWrapper,
+  StyledBottomBarText,
 };