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

package/src/components/Card/__tests__/StyledCard.spec.tsx

@@ -1,15 +1,10 @@
 import React from 'react';
-import { render } from '@testing-library/react-native';
-import { ThemeProvider, theme } from '../../../index';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import { StyledCard } from '../StyledCard';
 
 describe('StyledCard', () => {
   it('renders correct style', () => {
-    const { toJSON } = render(
-      <ThemeProvider theme={theme}>
-        <StyledCard />
-      </ThemeProvider>
-    );
+    const { toJSON } = renderWithTheme(<StyledCard />);
     expect(toJSON()).toMatchSnapshot();
   });
 });

package/src/components/Card/__tests__/__snapshots__/StyledCard.spec.tsx.snap

@@ -3,17 +3,14 @@
 exports[`StyledCard renders correct style 1`] = `
 <View
   style={
-    Object {
-      "borderBottomLeftRadius": 12,
-      "borderBottomRightRadius": 12,
-      "borderTopLeftRadius": 12,
-      "borderTopRightRadius": 12,
-      "overflow": "hidden",
-      "paddingBottom": 8,
-      "paddingLeft": 8,
-      "paddingRight": 8,
-      "paddingTop": 8,
-    }
+    Array [
+      Object {
+        "borderRadius": 12,
+        "overflow": "hidden",
+        "padding": 8,
+      },
+      undefined,
+    ]
   }
 />
 `;

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

@@ -16,15 +16,9 @@ exports[`Card renders correct 1`] = `
   style={
     Array [
       Object {
-        "borderBottomLeftRadius": 12,
-        "borderBottomRightRadius": 12,
-        "borderTopLeftRadius": 12,
-        "borderTopRightRadius": 12,
+        "borderRadius": 12,
         "overflow": "hidden",
-        "paddingBottom": 8,
-        "paddingLeft": 8,
-        "paddingRight": 8,
-        "paddingTop": 8,
+        "padding": 8,
       },
       Object {
         "backgroundColor": "#292a2b",

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { RenderAPI } from '@testing-library/react-native';
+import { View } from 'react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { theme } from '../../../index';
+import Card from '..';
+
+describe('Card', () => {
+  let wrapper: RenderAPI;
+
+  beforeEach(() => {
+    wrapper = renderWithTheme(
+      <Card
+        style={{ backgroundColor: theme.colors.backgroundDark }}
+        testID="card"
+        nativeID="card-native-id"
+        hitSlop={{ top: 1, left: 1, bottom: 1, right: 1 }}
+        pointerEvents="box-only"
+        removeClippedSubviews
+      >
+        <View testID="child-view" />
+      </Card>
+    );
+  });
+
+  it('renders correct', () => {
+    expect(wrapper.queryAllByTestId('card')).toHaveLength(1);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('has child', () => {
+    expect(wrapper.queryAllByTestId('child-view')).toHaveLength(1);
+  });
+});

package/src/components/Divider/StyledDivider.tsx

@@ -1,70 +1,28 @@
 import { View } from 'react-native';
-import styled, { css } from 'styled-components-native';
+import styled from '@emotion/native';
 
 type MarginSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 
 const StyledDivider = styled(View)<{
   themeMarginHorizontal?: MarginSize;
   themeMarginVertical?: MarginSize;
-}>`
-  border-bottom-width: ${({ theme }) =>
-    theme.__hd__.divider.borderWidths.default};
-  border-bottom-color: ${({ theme }) => theme.__hd__.divider.colors.default};
-  max-width: 100%;
+}>(({ themeMarginHorizontal, themeMarginVertical, theme }) => {
+  const horizontalMargin =
+    themeMarginHorizontal !== undefined
+      ? { marginHorizontal: theme.__hd__.divider.space[themeMarginHorizontal] }
+      : {};
+  const verticalMargin =
+    themeMarginVertical !== undefined
+      ? { marginVertical: theme.__hd__.divider.space[themeMarginVertical] }
+      : {};
 
-  ${({ themeMarginHorizontal, theme }) => {
-    switch (themeMarginHorizontal) {
-      case undefined:
-        return css``;
-      case 'xsmall':
-        return css`
-          margin-horizontal: ${theme.__hd__.divider.space.xsmall};
-        `;
-      case 'small':
-        return css`
-          margin-horizontal: ${theme.__hd__.divider.space.small};
-        `;
-      case 'medium':
-        return css`
-          margin-horizontal: ${theme.__hd__.divider.space.medium};
-        `;
-      case 'large':
-        return css`
-          margin-horizontal: ${theme.__hd__.divider.space.large};
-        `;
-      case 'xlarge':
-        return css`
-          margin-horizontal: ${theme.__hd__.divider.space.xlarge};
-        `;
-    }
-  }}
-
-  ${({ themeMarginVertical, theme }) => {
-    switch (themeMarginVertical) {
-      case undefined:
-        return css``;
-      case 'xsmall':
-        return css`
-          margin-vertical: ${theme.__hd__.divider.space.xsmall};
-        `;
-      case 'small':
-        return css`
-          margin-vertical: ${theme.__hd__.divider.space.small};
-        `;
-      case 'medium':
-        return css`
-          margin-vertical: ${theme.__hd__.divider.space.medium};
-        `;
-      case 'large':
-        return css`
-          margin-vertical: ${theme.__hd__.divider.space.large};
-        `;
-      case 'xlarge':
-        return css`
-          margin-vertical: ${theme.__hd__.divider.space.xlarge};
-        `;
-    }
-  }}
-`;
+  return {
+    maxWidth: '100%',
+    borderBottomColor: theme.__hd__.divider.colors.default,
+    borderBottomWidth: theme.__hd__.divider.borderWidths.default,
+    ...horizontalMargin,
+    ...verticalMargin,
+  };
+});
 
 export { StyledDivider };

package/src/components/Divider/__tests__/StyledDivider.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 Divider from '..';
 
 describe('Divider', () => {
@@ -13,10 +12,8 @@ describe('Divider', () => {
     ${'large'}
     ${'xlarge'}
   `('has $marginHorizontal marginHorizontal style', ({ marginHorizontal }) => {
-    const { toJSON } = render(
-      <ThemeProvider theme={theme}>
-        <Divider marginHorizontal={marginHorizontal} />
-      </ThemeProvider>
+    const { toJSON } = renderWithTheme(
+      <Divider marginHorizontal={marginHorizontal} />
     );
 
     expect(toJSON()).toMatchSnapshot();
@@ -31,10 +28,8 @@ describe('Divider', () => {
     ${'large'}
     ${'xlarge'}
   `('has $marginVertical marginVertical style', ({ marginVertical }) => {
-    const { toJSON } = render(
-      <ThemeProvider theme={theme}>
-        <Divider marginVertical={marginVertical} />
-      </ThemeProvider>
+    const { toJSON } = renderWithTheme(
+      <Divider marginVertical={marginVertical} />
     );
 
     expect(toJSON()).toMatchSnapshot();

package/src/components/Divider/__tests__/__snapshots__/StyledDivider.spec.tsx.snap

@@ -3,12 +3,15 @@
 exports[`Divider has large marginHorizontal style 1`] = `
 <View
   style={
-    Object {
-      "borderBottomColor": "#dadbde",
-      "borderBottomWidth": 1,
-      "marginHorizontal": 24,
-      "maxWidth": "100%",
-    }
+    Array [
+      Object {
+        "borderBottomColor": "#dadbde",
+        "borderBottomWidth": 1,
+        "marginHorizontal": 24,
+        "maxWidth": "100%",
+      },
+      undefined,
+    ]
   }
   themeMarginHorizontal="large"
 />
@@ -17,12 +20,15 @@ exports[`Divider has large marginHorizontal style 1`] = `
 exports[`Divider has large marginVertical style 1`] = `
 <View
   style={
-    Object {
-      "borderBottomColor": "#dadbde",
-      "borderBottomWidth": 1,
-      "marginVertical": 24,
-      "maxWidth": "100%",
-    }
+    Array [
+      Object {
+        "borderBottomColor": "#dadbde",
+        "borderBottomWidth": 1,
+        "marginVertical": 24,
+        "maxWidth": "100%",
+      },
+      undefined,
+    ]
   }
   themeMarginVertical="large"
 />
@@ -31,12 +37,15 @@ exports[`Divider has large marginVertical style 1`] = `
 exports[`Divider has medium marginHorizontal style 1`] = `
 <View
   style={
-    Object {
-      "borderBottomColor": "#dadbde",
-      "borderBottomWidth": 1,
-      "marginHorizontal": 16,
-      "maxWidth": "100%",
-    }
+    Array [
+      Object {
+        "borderBottomColor": "#dadbde",
+        "borderBottomWidth": 1,
+        "marginHorizontal": 16,
+        "maxWidth": "100%",
+      },
+      undefined,
+    ]
   }
   themeMarginHorizontal="medium"
 />
@@ -45,12 +54,15 @@ exports[`Divider has medium marginHorizontal style 1`] = `
 exports[`Divider has medium marginVertical style 1`] = `
 <View
   style={
-    Object {
-      "borderBottomColor": "#dadbde",
-      "borderBottomWidth": 1,
-      "marginVertical": 16,
-      "maxWidth": "100%",
-    }
+    Array [
+      Object {
+        "borderBottomColor": "#dadbde",
+        "borderBottomWidth": 1,
+        "marginVertical": 16,
+        "maxWidth": "100%",
+      },
+      undefined,
+    ]
   }
   themeMarginVertical="medium"
 />
@@ -59,12 +71,15 @@ exports[`Divider has medium marginVertical style 1`] = `
 exports[`Divider has small marginHorizontal style 1`] = `
 <View
   style={
-    Object {
-      "borderBottomColor": "#dadbde",
-      "borderBottomWidth": 1,
-      "marginHorizontal": 8,
-      "maxWidth": "100%",
-    }
+    Array [
+      Object {
+        "borderBottomColor": "#dadbde",
+        "borderBottomWidth": 1,
+        "marginHorizontal": 8,
+        "maxWidth": "100%",
+      },
+      undefined,
+    ]
   }
   themeMarginHorizontal="small"
 />
@@ -73,12 +88,15 @@ exports[`Divider has small marginHorizontal style 1`] = `
 exports[`Divider has small marginVertical style 1`] = `
 <View
   style={
-    Object {
-      "borderBottomColor": "#dadbde",
-      "borderBottomWidth": 1,
-      "marginVertical": 8,
-      "maxWidth": "100%",
-    }
+    Array [
+      Object {
+        "borderBottomColor": "#dadbde",
+        "borderBottomWidth": 1,
+        "marginVertical": 8,
+        "maxWidth": "100%",
+      },
+      undefined,
+    ]
   }
   themeMarginVertical="small"
 />
@@ -87,11 +105,14 @@ exports[`Divider has small marginVertical style 1`] = `
 exports[`Divider has undefined marginHorizontal style 1`] = `
 <View
   style={
-    Object {
-      "borderBottomColor": "#dadbde",
-      "borderBottomWidth": 1,
-      "maxWidth": "100%",
-    }
+    Array [
+      Object {
+        "borderBottomColor": "#dadbde",
+        "borderBottomWidth": 1,
+        "maxWidth": "100%",
+      },
+      undefined,
+    ]
   }
 />
 `;
@@ -99,11 +120,14 @@ exports[`Divider has undefined marginHorizontal style 1`] = `
 exports[`Divider has undefined marginVertical style 1`] = `
 <View
   style={
-    Object {
-      "borderBottomColor": "#dadbde",
-      "borderBottomWidth": 1,
-      "maxWidth": "100%",
-    }
+    Array [
+      Object {
+        "borderBottomColor": "#dadbde",
+        "borderBottomWidth": 1,
+        "maxWidth": "100%",
+      },
+      undefined,
+    ]
   }
 />
 `;
@@ -111,12 +135,15 @@ exports[`Divider has undefined marginVertical style 1`] = `
 exports[`Divider has xlarge marginHorizontal style 1`] = `
 <View
   style={
-    Object {
-      "borderBottomColor": "#dadbde",
-      "borderBottomWidth": 1,
-      "marginHorizontal": 32,
-      "maxWidth": "100%",
-    }
+    Array [
+      Object {
+        "borderBottomColor": "#dadbde",
+        "borderBottomWidth": 1,
+        "marginHorizontal": 32,
+        "maxWidth": "100%",
+      },
+      undefined,
+    ]
   }
   themeMarginHorizontal="xlarge"
 />
@@ -125,12 +152,15 @@ exports[`Divider has xlarge marginHorizontal style 1`] = `
 exports[`Divider has xlarge marginVertical style 1`] = `
 <View
   style={
-    Object {
-      "borderBottomColor": "#dadbde",
-      "borderBottomWidth": 1,
-      "marginVertical": 32,
-      "maxWidth": "100%",
-    }
+    Array [
+      Object {
+        "borderBottomColor": "#dadbde",
+        "borderBottomWidth": 1,
+        "marginVertical": 32,
+        "maxWidth": "100%",
+      },
+      undefined,
+    ]
   }
   themeMarginVertical="xlarge"
 />
@@ -139,12 +169,15 @@ exports[`Divider has xlarge marginVertical style 1`] = `
 exports[`Divider has xsmall marginHorizontal style 1`] = `
 <View
   style={
-    Object {
-      "borderBottomColor": "#dadbde",
-      "borderBottomWidth": 1,
-      "marginHorizontal": 4,
-      "maxWidth": "100%",
-    }
+    Array [
+      Object {
+        "borderBottomColor": "#dadbde",
+        "borderBottomWidth": 1,
+        "marginHorizontal": 4,
+        "maxWidth": "100%",
+      },
+      undefined,
+    ]
   }
   themeMarginHorizontal="xsmall"
 />
@@ -153,12 +186,15 @@ exports[`Divider has xsmall marginHorizontal style 1`] = `
 exports[`Divider has xsmall marginVertical style 1`] = `
 <View
   style={
-    Object {
-      "borderBottomColor": "#dadbde",
-      "borderBottomWidth": 1,
-      "marginVertical": 4,
-      "maxWidth": "100%",
-    }
+    Array [
+      Object {
+        "borderBottomColor": "#dadbde",
+        "borderBottomWidth": 1,
+        "marginVertical": 4,
+        "maxWidth": "100%",
+      },
+      undefined,
+    ]
   }
   themeMarginVertical="xsmall"
 />

package/src/components/Divider/index.tsx

@@ -12,7 +12,7 @@ interface DividerProps extends ViewProps {
    */
   marginVertical?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
   /**
-   * Addditional style.
+   * Additional style.
    */
   style?: StyleProp<ViewStyle>;
   /**

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

@@ -18,10 +18,8 @@ const ActionItem = ({
   testID,
 }: ActionItemProps) => (
   <StyledActionItem style={style} onPress={onPress} testID={testID}>
-    <>
-      <Icon icon={icon} />
-      <StyledActionItemText>{title}</StyledActionItemText>
-    </>
+    <Icon icon={icon} />
+    <StyledActionItemText>{title}</StyledActionItemText>
   </StyledActionItem>
 );
 

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

@@ -1,54 +1,53 @@
 import { ComponentProps } from 'react';
 import { Animated, View, ViewProps } from 'react-native';
-import styled from 'styled-components-native';
+import styled from '@emotion/native';
 import FAB from '../FAB';
 import Typography from '../../Typography';
 import { TextProps } from '../../Typography/Text';
 
-const StyledContainer = styled(View)<ViewProps>`
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  align-items: flex-end;
-  justify-content: flex-end;
-`;
+const StyledContainer = styled(View)<ViewProps>({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  alignItems: 'flex-end',
+  justifyContent: 'flex-end',
+});
 
 const StyledActionGroupContainer = styled(Animated.View)<
   ComponentProps<typeof Animated.View>
->`
-  align-items: flex-end;
-  justify-content: flex-end;
-  width: 70%;
-`;
+>({
+  alignItems: 'flex-end',
+  justifyContent: 'flex-end',
+  width: '70%',
+});
 
-const StyledFAB = styled(FAB)<{}>`
-  margin-right: ${({ theme }) => theme.space.large};
-  align-self: flex-end;
-  margin-top: ${({ theme }) => theme.space.large};
-`;
+const StyledFAB = styled(FAB)(({ theme }) => ({
+  marginRight: theme.__hd__.fab.space.buttonMarginRight,
+  marginTop: theme.__hd__.fab.space.buttonMarginTop,
+  alignSelf: 'flex-end',
+}));
 
 const StyledBackdrop = styled(Animated.View)<
   ComponentProps<typeof Animated.View>
->`
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: ${({ theme }) => theme.__hd__.fab.colors.backdropBackground};
-`;
+>(({ theme }) => ({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  backgroundColor: theme.__hd__.fab.colors.backdropBackground,
+}));
 
-const StyledHeaderText = styled(Typography.Text)<TextProps>`
-  font-size: ${({ theme }) => theme.__hd__.fab.fontSizes.header};
-  line-height: ${({ theme }) => theme.__hd__.fab.lineHeights.header};
-  font-family: ${({ theme }) => theme.__hd__.fab.fonts.header};
-  margin-right: ${({ theme }) => theme.__hd__.fab.space.headerTextMarginRight};
-  margin-bottom: ${({ theme }) =>
-    theme.__hd__.fab.space.headerTextMarginBottom};
-  text-align: right;
-`;
+const StyledHeaderText = styled(Typography.Text)<TextProps>(({ theme }) => ({
+  fontSize: theme.__hd__.fab.fontSizes.header,
+  lineHeight: theme.__hd__.fab.lineHeights.header,
+  fontFamily: theme.__hd__.fab.fonts.header,
+  marginRight: theme.__hd__.fab.space.headerTextMarginRight,
+  marginBottom: theme.__hd__.fab.space.headerTextMarginBottom,
+  textAlign: 'right',
+}));
 
 export {
   StyledHeaderText,

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

@@ -1,29 +1,31 @@
 import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
-import styled from 'styled-components-native';
+import styled from '@emotion/native';
 import Typography from '../../Typography';
 
-const StyledActionItem = styled(TouchableOpacity)<TouchableOpacityProps>`
-  padding-left: ${({ theme }) => theme.__hd__.fab.space.actionItemPaddingLeft};
-  padding-right: ${({ theme }) =>
-    theme.__hd__.fab.space.actionItemPaddingRight};
-  padding-top: ${({ theme }) => theme.__hd__.fab.space.actionItemPaddingTop};
-  padding-bottom: ${({ theme }) =>
-    theme.__hd__.fab.space.actionItemPaddingBottom};
-  margin: ${({ theme }) => theme.__hd__.fab.space.actionItemMargin};
-  margin-right: ${({ theme }) => theme.__hd__.fab.space.actionItemMarginRight};
-  background: ${({ theme }) => theme.__hd__.fab.colors.actionItemBackground};
-  border-radius: ${({ theme }) => theme.__hd__.fab.radii.actionItem};
-  flex-direction: row;
-  align-items: center;
-  align-self: flex-end;
-  overflow: hidden;
-`;
+const StyledActionItem = styled(TouchableOpacity)<TouchableOpacityProps>(
+  ({ theme }) => ({
+    paddingLeft: theme.__hd__.fab.space.actionItemPaddingLeft,
+    paddingRight: theme.__hd__.fab.space.actionItemPaddingRight,
+    paddingTop: theme.__hd__.fab.space.actionItemPaddingTop,
+    paddingBottom: theme.__hd__.fab.space.actionItemPaddingBottom,
+    margin: theme.__hd__.fab.space.actionItemMargin,
+    marginRight: theme.__hd__.fab.space.actionItemMarginRight,
+    backgroundColor: theme.__hd__.fab.colors.actionItemBackground,
+    borderRadius: theme.__hd__.fab.radii.actionItem,
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-end',
+    overflow: 'hidden',
+  })
+);
+
+const StyledActionItemText = styled(Typography.Text)<TouchableOpacityProps>(
+  ({ theme }) => ({
+    paddingLeft: theme.__hd__.fab.space.actionItemTextPaddingLeft,
+    fontSize: theme.__hd__.fab.fontSizes.actionItemText,
+    lineHeight: theme.__hd__.fab.lineHeights.actionItemText,
+    fontFamily: theme.__hd__.fab.fonts.actionItemText,
+  })
+);
 
-const StyledActionItemText = styled(Typography.Text)<TouchableOpacityProps>`
-  padding-left: ${({ theme }) =>
-    theme.__hd__.fab.space.actionItemTextPaddingLeft};
-  font-size: ${({ theme }) => theme.__hd__.fab.fontSizes.actionItemText};
-  line-height: ${({ theme }) => theme.__hd__.fab.lineHeights.actionItemText};
-  font-family: ${({ theme }) => theme.__hd__.fab.fonts.actionItemText};
-`;
 export { StyledActionItem, StyledActionItemText };