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

package/src/components/Typography/Text/__tests__/__snapshots__/StyledText.spec.tsx.snap

@@ -3,13 +3,16 @@
 exports[`StyledText has body intent style 1`] = `
 <Text
   style={
-    Object {
-      "color": "#292a2b",
-      "fontFamily": "Be Vietnam Pro Regular",
-      "fontSize": 14,
-      "letterSpacing": 0.42,
-      "lineHeight": 22,
-    }
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      undefined,
+    ]
   }
   themeFontSize="medium"
   themeFontWeight="regular"
@@ -22,13 +25,16 @@ exports[`StyledText has body intent style 1`] = `
 exports[`StyledText has large fontSize style 1`] = `
 <Text
   style={
-    Object {
-      "color": "#292a2b",
-      "fontFamily": "Be Vietnam Pro Regular",
-      "fontSize": 16,
-      "letterSpacing": 0.48,
-      "lineHeight": 24,
-    }
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 16,
+        "letterSpacing": 0.48,
+        "lineHeight": 24,
+      },
+      undefined,
+    ]
   }
   themeFontSize="large"
   themeFontWeight="regular"
@@ -41,13 +47,16 @@ exports[`StyledText has large fontSize style 1`] = `
 exports[`StyledText has light fontWeight style 1`] = `
 <Text
   style={
-    Object {
-      "color": "#292a2b",
-      "fontFamily": "Be Vietnam Pro Light",
-      "fontSize": 14,
-      "letterSpacing": 0.42,
-      "lineHeight": 22,
-    }
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Light",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      undefined,
+    ]
   }
   themeFontSize="medium"
   themeFontWeight="light"
@@ -60,13 +69,16 @@ exports[`StyledText has light fontWeight style 1`] = `
 exports[`StyledText has medium fontSize style 1`] = `
 <Text
   style={
-    Object {
-      "color": "#292a2b",
-      "fontFamily": "Be Vietnam Pro Regular",
-      "fontSize": 14,
-      "letterSpacing": 0.42,
-      "lineHeight": 22,
-    }
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      undefined,
+    ]
   }
   themeFontSize="medium"
   themeFontWeight="regular"
@@ -79,13 +91,16 @@ exports[`StyledText has medium fontSize style 1`] = `
 exports[`StyledText has regular fontWeight style 1`] = `
 <Text
   style={
-    Object {
-      "color": "#292a2b",
-      "fontFamily": "Be Vietnam Pro Regular",
-      "fontSize": 14,
-      "letterSpacing": 0.42,
-      "lineHeight": 22,
-    }
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      undefined,
+    ]
   }
   themeFontSize="medium"
   themeFontWeight="regular"
@@ -98,13 +113,16 @@ exports[`StyledText has regular fontWeight style 1`] = `
 exports[`StyledText has semi-bold fontWeight style 1`] = `
 <Text
   style={
-    Object {
-      "color": "#292a2b",
-      "fontFamily": "Be Vietnam Pro SemiBold",
-      "fontSize": 14,
-      "letterSpacing": 0.42,
-      "lineHeight": 22,
-    }
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-SemiBold",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      undefined,
+    ]
   }
   themeFontSize="medium"
   themeFontWeight="semi-bold"
@@ -117,13 +135,16 @@ exports[`StyledText has semi-bold fontWeight style 1`] = `
 exports[`StyledText has small fontSize style 1`] = `
 <Text
   style={
-    Object {
-      "color": "#292a2b",
-      "fontFamily": "Be Vietnam Pro Regular",
-      "fontSize": 12,
-      "letterSpacing": 0.36,
-      "lineHeight": 20,
-    }
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.36,
+        "lineHeight": 20,
+      },
+      undefined,
+    ]
   }
   themeFontSize="small"
   themeFontWeight="regular"
@@ -136,13 +157,16 @@ exports[`StyledText has small fontSize style 1`] = `
 exports[`StyledText has subdued intent style 1`] = `
 <Text
   style={
-    Object {
-      "color": "#8b8d92",
-      "fontFamily": "Be Vietnam Pro Regular",
-      "fontSize": 14,
-      "letterSpacing": 0.42,
-      "lineHeight": 22,
-    }
+    Array [
+      Object {
+        "color": "#8b8d92",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      undefined,
+    ]
   }
   themeFontSize="medium"
   themeFontWeight="regular"
@@ -155,13 +179,16 @@ exports[`StyledText has subdued intent style 1`] = `
 exports[`StyledText has xlarge fontSize style 1`] = `
 <Text
   style={
-    Object {
-      "color": "#292a2b",
-      "fontFamily": "Be Vietnam Pro Regular",
-      "fontSize": 18,
-      "letterSpacing": 0.54,
-      "lineHeight": 26,
-    }
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 18,
+        "letterSpacing": 0.54,
+        "lineHeight": 26,
+      },
+      undefined,
+    ]
   }
   themeFontSize="xlarge"
   themeFontWeight="regular"

package/src/emotion.d.ts

@@ -0,0 +1,6 @@
+import '@emotion/react';
+import { Theme as HeroTheme } from './theme';
+
+declare module '@emotion/react' {
+  export interface Theme extends HeroTheme {}
+}

package/src/index.ts

@@ -1,14 +1,16 @@
-import { ThemeProvider, useTheme } from 'styled-components-native';
+import { ThemeProvider, useTheme } from '@emotion/react';
 import theme, { getTheme } from './theme';
 import { scale } from './utils/scale';
 
 import Badge from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
+import Button from './components/Button';
 import Card from './components/Card';
 import Divider from './components/Divider';
+import FAB from './components/FAB';
 import Icon from './components/Icon';
+import Tabs from './components/Tabs';
 import Typography from './components/Typography';
-import FAB from './components/FAB';
 
 export {
   theme,
@@ -18,9 +20,13 @@ export {
   ThemeProvider,
   Badge,
   BottomNavigation,
+  Button,
   Card,
   Divider,
+  FAB,
   Icon,
+  Tabs,
   Typography,
-  FAB,
 };
+
+export * from './types';

package/src/testHelpers/renderWithTheme.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, RenderOptions } from '@testing-library/react-native'; // eslint-disable-line import/no-extraneous-dependencies
-import { ThemeProvider, theme } from '../index';
+import { ThemeProvider } from '@emotion/react';
+import { theme } from '../index';
 
 const renderWithTheme = (ui: JSX.Element, options?: RenderOptions) =>
   render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>, options);

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

@@ -5,7 +5,7 @@ Object {
   "__hd__": Object {
     "badge": Object {
       "borderWidths": Object {
-        "default": "1px",
+        "default": 1,
       },
       "colors": Object {
         "danger": "#de350b",
@@ -17,17 +17,18 @@ Object {
         "warning": "#d98a2c",
         "warningBackground": "#fff6eb",
       },
-      "fontSizes": Object {
-        "default": "12px",
-      },
-      "fonts": Object {
-        "default": "Be Vietnam Pro SemiBold",
+      "font": Object {
+        "default": "BeVietnamPro-SemiBold",
       },
-      "padding": Object {
-        "default": "4px 8px",
+      "fontSize": Object {
+        "default": 12,
       },
       "radii": Object {
-        "default": "4px",
+        "default": 4,
+      },
+      "space": Object {
+        "horizontalPadding": 8,
+        "verticalPadding": 2,
       },
     },
     "bottomNavigation": Object {
@@ -37,35 +38,41 @@ Object {
       },
       "shadows": Object {
         "elevation": 10,
-        "offset": "0px 3px",
+        "offset": Object {
+          "height": 3,
+          "width": 0,
+        },
         "opacity": 0.27,
-        "radius": "4.65px",
+        "radius": 4.65,
       },
       "sizes": Object {
         "height": 72,
       },
+      "space": Object {
+        "titleMarginTop": 4,
+      },
     },
     "card": Object {
       "padding": Object {
-        "default": "8px",
+        "default": 8,
       },
       "radii": Object {
-        "default": "12px",
+        "default": 12,
       },
     },
     "divider": Object {
       "borderWidths": Object {
-        "default": "1px",
+        "default": 1,
       },
       "colors": Object {
         "default": "#dadbde",
       },
       "space": Object {
-        "large": "24px",
-        "medium": "16px",
-        "small": "8px",
-        "xlarge": "32px",
-        "xsmall": "4px",
+        "large": 24,
+        "medium": 16,
+        "small": 8,
+        "xlarge": 32,
+        "xsmall": 4,
       },
     },
     "fab": Object {
@@ -77,35 +84,37 @@ Object {
         "icon": "#ffffff",
       },
       "fontSizes": Object {
-        "actionItemText": "14px",
-        "buttonIcon": "24px",
-        "header": "24px",
+        "actionItemText": 14,
+        "buttonIcon": 24,
+        "header": 24,
       },
       "fonts": Object {
-        "actionItemText": "Be Vietnam Pro Regular",
-        "header": "Be Vietnam Pro SemiBold",
+        "actionItemText": "BeVietnamPro-Regular",
+        "header": "BeVietnamPro-SemiBold",
       },
       "lineHeights": Object {
-        "actionItemText": "22px",
-        "header": "32px",
+        "actionItemText": 22,
+        "header": 32,
       },
       "radii": Object {
-        "actionItem": "999px",
+        "actionItem": 999,
       },
       "sizes": Object {
-        "height": "64px",
-        "width": "64px",
+        "height": 64,
+        "width": 64,
       },
       "space": Object {
-        "actionItemMargin": "8px",
-        "actionItemMarginRight": "24px",
-        "actionItemPaddingBottom": "8px",
-        "actionItemPaddingLeft": "16px",
-        "actionItemPaddingRight": "16px",
-        "actionItemPaddingTop": "8px",
-        "actionItemTextPaddingLeft": "8px",
-        "headerTextMarginBottom": "24px",
-        "headerTextMarginRight": "24px",
+        "actionItemMargin": 8,
+        "actionItemMarginRight": 24,
+        "actionItemPaddingBottom": 8,
+        "actionItemPaddingLeft": 16,
+        "actionItemPaddingRight": 16,
+        "actionItemPaddingTop": 8,
+        "actionItemTextPaddingLeft": 8,
+        "buttonMarginRight": 24,
+        "buttonMarginTop": 24,
+        "headerTextMarginBottom": 24,
+        "headerTextMarginRight": 24,
       },
     },
     "icon": Object {
@@ -125,6 +134,19 @@ Object {
         "xsmall": 16,
       },
     },
+    "tabs": Object {
+      "colors": Object {
+        "active": "#ffffff",
+        "background": "#7622d7",
+        "inactive": "#ffffff50",
+      },
+      "space": Object {
+        "flatListHorizontalPadding": 8,
+        "itemHorizontalPadding": 16,
+        "itemVerticalPadding": 24,
+        "titleMarginLeft": 8,
+      },
+    },
     "typography": Object {
       "colors": Object {
         "body": "#292a2b",
@@ -138,15 +160,15 @@ Object {
         "xlarge": 18,
       },
       "fonts": Object {
-        "light": "Be Vietnam Pro Light",
-        "regular": "Be Vietnam Pro Regular",
-        "semiBold": "Be Vietnam Pro SemiBold",
+        "light": "BeVietnamPro-Light",
+        "regular": "BeVietnamPro-Regular",
+        "semiBold": "BeVietnamPro-SemiBold",
       },
       "lineHeights": Object {
-        "large": "24px",
-        "medium": "22px",
-        "small": "20px",
-        "xlarge": "26px",
+        "large": 24,
+        "medium": 22,
+        "small": 20,
+        "xlarge": 26,
       },
     },
   },
@@ -189,9 +211,9 @@ Object {
     "xxxxxlarge": 32,
   },
   "fonts": Object {
-    "light": "Be Vietnam Pro Light",
-    "regular": "Be Vietnam Pro Regular",
-    "semiBold": "Be Vietnam Pro SemiBold",
+    "light": "BeVietnamPro-Light",
+    "regular": "BeVietnamPro-Regular",
+    "semiBold": "BeVietnamPro-SemiBold",
   },
   "lineHeights": Object {
     "large": 24,

package/src/theme/components/badge.ts

@@ -2,7 +2,7 @@ import { GlobalTheme } from '../global';
 
 const getBadgeTheme = (theme: GlobalTheme) => {
   const borderWidths = {
-    default: `${theme.borderWidths.base}px`,
+    default: theme.borderWidths.base,
   };
 
   const colors = {
@@ -16,23 +16,24 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     warningBackground: theme.colors.warningBackground,
   };
 
-  const padding = {
-    default: `${theme.space.xsmall}px ${theme.space.small}px`,
+  const font = {
+    default: theme.fonts.semiBold,
   };
 
-  const fonts = {
-    default: theme.fonts.semiBold,
+  const fontSize = {
+    default: theme.fontSizes.small,
   };
 
-  const fontSizes = {
-    default: `${theme.fontSizes.small}px`,
+  const space = {
+    horizontalPadding: theme.space.small,
+    verticalPadding: theme.space.xxsmall,
   };
 
   const radii = {
-    default: `4px`,
+    default: 4,
   };
 
-  return { borderWidths, colors, padding, fonts, fontSizes, radii };
+  return { borderWidths, colors, font, fontSize, space, radii };
 };
 
 export default getBadgeTheme;

package/src/theme/components/bottomNavigation.ts

@@ -11,13 +11,17 @@ const getBottomNavigationTheme = (theme: GlobalTheme) => {
   };
 
   const shadows = {
-    offset: `0px 3px`,
+    offset: { width: 0, height: 3 },
     opacity: 0.27,
-    radius: `4.65px`,
+    radius: 4.65,
     elevation: 10,
   };
 
-  return { colors, shadows, sizes };
+  const space = {
+    titleMarginTop: theme.space.xsmall,
+  };
+
+  return { colors, shadows, sizes, space };
 };
 
 export default getBottomNavigationTheme;

package/src/theme/components/card.ts

@@ -2,11 +2,11 @@ import { GlobalTheme } from '../global';
 
 const getCardTheme = (theme: GlobalTheme) => {
   const radii = {
-    default: `12px`,
+    default: 12,
   };
 
   const padding = {
-    default: `${theme.space.small}px`,
+    default: theme.space.small,
   };
 
   return { radii, padding };

package/src/theme/components/divider.ts

@@ -6,15 +6,15 @@ const getDividerTheme = (theme: GlobalTheme) => {
   };
 
   const space = {
-    xsmall: `${theme.space.xsmall}px`,
-    small: `${theme.space.small}px`,
-    medium: `${theme.space.medium}px`,
-    large: `${theme.space.large}px`,
-    xlarge: `${theme.space.xlarge}px`,
+    xsmall: theme.space.xsmall,
+    small: theme.space.small,
+    medium: theme.space.medium,
+    large: theme.space.large,
+    xlarge: theme.space.xlarge,
   };
 
   const borderWidths = {
-    default: `${theme.borderWidths.base}px`,
+    default: theme.borderWidths.base,
   };
 
   return { colors, space, borderWidths };

package/src/theme/components/fab.ts

@@ -10,8 +10,8 @@ const getFABTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    width: '64px',
-    height: '64px',
+    width: 64,
+    height: 64,
   };
 
   const fonts = {
@@ -20,30 +20,32 @@ const getFABTheme = (theme: GlobalTheme) => {
   };
 
   const fontSizes = {
-    header: `${theme.fontSizes.xxxlarge}px`,
-    buttonIcon: `${theme.fontSizes.xxxlarge}px`,
-    actionItemText: `${theme.fontSizes.medium}px`,
+    header: theme.fontSizes.xxxlarge,
+    buttonIcon: theme.fontSizes.xxxlarge,
+    actionItemText: theme.fontSizes.medium,
   };
 
   const lineHeights = {
-    header: `${theme.lineHeights.xxxlarge}px`,
-    actionItemText: `${theme.lineHeights.medium}px`,
+    header: theme.lineHeights.xxxlarge,
+    actionItemText: theme.lineHeights.medium,
   };
 
   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`,
+    actionItemPaddingLeft: theme.space.medium,
+    actionItemPaddingRight: theme.space.medium,
+    actionItemPaddingTop: theme.space.small,
+    actionItemPaddingBottom: theme.space.small,
+    actionItemMargin: theme.space.small,
+    actionItemMarginRight: theme.space.large,
+    actionItemTextPaddingLeft: theme.space.small,
+    buttonMarginTop: theme.space.large,
+    buttonMarginRight: theme.space.large,
+    headerTextMarginRight: theme.space.large,
+    headerTextMarginBottom: theme.space.large,
   };
 
   const radii = {
-    actionItem: `999px`,
+    actionItem: 999,
   };
 
   return { radii, fonts, fontSizes, colors, sizes, lineHeights, space };

package/src/theme/components/tabs.ts

@@ -0,0 +1,20 @@
+import { GlobalTheme } from '../global';
+
+const getTabsTheme = (theme: GlobalTheme) => {
+  const colors = {
+    background: theme.colors.primary,
+    active: theme.colors.invertedText,
+    inactive: `${theme.colors.invertedText}50`,
+  };
+
+  const space = {
+    flatListHorizontalPadding: theme.space.small,
+    titleMarginLeft: theme.space.small,
+    itemHorizontalPadding: theme.space.medium,
+    itemVerticalPadding: theme.space.large,
+  };
+
+  return { colors, space };
+};
+
+export default getTabsTheme;

package/src/theme/components/typography.ts

@@ -21,10 +21,10 @@ const getTypographyTheme = (theme: GlobalTheme) => {
   };
 
   const lineHeights = {
-    small: `${theme.lineHeights.small}px`,
-    medium: `${theme.lineHeights.medium}px`,
-    large: `${theme.lineHeights.large}px`,
-    xlarge: `${theme.lineHeights.xlarge}px`,
+    small: theme.lineHeights.small,
+    medium: theme.lineHeights.medium,
+    large: theme.lineHeights.large,
+    xlarge: theme.lineHeights.xlarge,
   };
 
   return { colors, fonts, fontSizes, lineHeights };