@hero-design/rn 6.7.4-1 → 7.0.1

package/src/components/Card/StyledCard.tsx

@@ -0,0 +1,9 @@
+import { View } from 'react-native';
+import styled from 'styled-components-native';
+
+const StyledCard = styled(View)<{}>`
+  border-radius: ${({ theme }) => theme.__hd__.card.radii.default};
+  padding: ${({ theme }) => theme.__hd__.card.padding.default};
+`;
+
+export { StyledCard };

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, RenderAPI } from '@testing-library/react-native';
+import { View } from 'react-native';
+import Card from '..';
+import { theme, ThemeProvider } from '../../../index';
+
+describe('Card', () => {
+  let wrapper: RenderAPI;
+
+  beforeEach(() => {
+    wrapper = render(
+      <ThemeProvider theme={theme}>
+        <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>
+      </ThemeProvider>
+    );
+  });
+
+  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/{ExampleComponent/__tests__/StyledView.spec.tsx → Card/__tests__/StyledCard.spec.tsx}

@@ -1,20 +1,15 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
 import { ThemeProvider, theme } from '../../../index';
-import { Square } from '../StyledView';
+import { StyledCard } from '../StyledCard';
 
-describe('StyledView', () => {
-  it('renders correct styling', () => {
+describe('StyledCard', () => {
+  it('renders correct style', () => {
     const { toJSON } = render(
       <ThemeProvider theme={theme}>
-        <Square
-          themeSize="medium"
-          themeMargin="medium"
-          themeBgColor="primary"
-        />
+        <StyledCard />
       </ThemeProvider>
     );
-
     expect(toJSON()).toMatchSnapshot();
   });
 });

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

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card renders correct 1`] = `
+<View
+  hitSlop={
+    Object {
+      "bottom": 1,
+      "left": 1,
+      "right": 1,
+      "top": 1,
+    }
+  }
+  nativeID="card-native-id"
+  pointerEvents="box-only"
+  removeClippedSubviews={true}
+  style={
+    Array [
+      Object {
+        "borderBottomLeftRadius": 12,
+        "borderBottomRightRadius": 12,
+        "borderTopLeftRadius": 12,
+        "borderTopRightRadius": 12,
+        "paddingBottom": 16,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 16,
+      },
+      Object {
+        "backgroundColor": "#292a2b",
+      },
+    ]
+  }
+  testID="card"
+>
+  <View
+    testID="child-view"
+  />
+</View>
+`;

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

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledCard renders correct style 1`] = `
+<View
+  style={
+    Object {
+      "borderBottomLeftRadius": 12,
+      "borderBottomRightRadius": 12,
+      "borderTopLeftRadius": 12,
+      "borderTopRightRadius": 12,
+      "paddingBottom": 16,
+      "paddingLeft": 16,
+      "paddingRight": 16,
+      "paddingTop": 16,
+    }
+  }
+/>
+`;

package/src/components/Card/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+import { StyledCard } from './StyledCard';
+
+interface CardProps extends ViewProps {}
+
+const Card = (props: CardProps): JSX.Element => <StyledCard {...props} />;
+
+export default Card;

package/src/components/Divider/StyledDivider.tsx

@@ -0,0 +1,70 @@
+import { View } from 'react-native';
+import styled, { css } from 'styled-components-native';
+
+type MarginSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+
+const StyledDivider = styled(View)<{
+  themeMarginHorizontal?: MarginSize;
+  themeMarginVertical?: MarginSize;
+}>`
+  border-bottom-width: ${({ theme }) =>
+    theme.__hd__.divider.borderWiths.default};
+  border-bottom-color: ${({ theme }) => theme.__hd__.divider.colors.default};
+  max-width: 100%;
+
+  ${({ 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};
+        `;
+    }
+  }}
+`;
+
+export { StyledDivider };

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, theme } from '../../../index';
+import Divider from '..';
+
+describe('Divider', () => {
+  it.each`
+    marginHorizontal
+    ${undefined}
+    ${'xsmall'}
+    ${'small'}
+    ${'medium'}
+    ${'large'}
+    ${'xlarge'}
+  `('has $marginHorizontal marginHorizontal style', ({ marginHorizontal }) => {
+    const { toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <Divider marginHorizontal={marginHorizontal} />
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    marginVertical
+    ${undefined}
+    ${'xsmall'}
+    ${'small'}
+    ${'medium'}
+    ${'large'}
+    ${'xlarge'}
+  `('has $marginVertical marginVertical style', ({ marginVertical }) => {
+    const { toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <Divider marginVertical={marginVertical} />
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,165 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Divider has large marginHorizontal style 1`] = `
+<View
+  style={
+    Object {
+      "borderBottomColor": "#dadbde",
+      "borderBottomWidth": 1,
+      "marginHorizontal": 24,
+      "maxWidth": "100%",
+    }
+  }
+  themeMarginHorizontal="large"
+/>
+`;
+
+exports[`Divider has large marginVertical style 1`] = `
+<View
+  style={
+    Object {
+      "borderBottomColor": "#dadbde",
+      "borderBottomWidth": 1,
+      "marginVertical": 24,
+      "maxWidth": "100%",
+    }
+  }
+  themeMarginVertical="large"
+/>
+`;
+
+exports[`Divider has medium marginHorizontal style 1`] = `
+<View
+  style={
+    Object {
+      "borderBottomColor": "#dadbde",
+      "borderBottomWidth": 1,
+      "marginHorizontal": 16,
+      "maxWidth": "100%",
+    }
+  }
+  themeMarginHorizontal="medium"
+/>
+`;
+
+exports[`Divider has medium marginVertical style 1`] = `
+<View
+  style={
+    Object {
+      "borderBottomColor": "#dadbde",
+      "borderBottomWidth": 1,
+      "marginVertical": 16,
+      "maxWidth": "100%",
+    }
+  }
+  themeMarginVertical="medium"
+/>
+`;
+
+exports[`Divider has small marginHorizontal style 1`] = `
+<View
+  style={
+    Object {
+      "borderBottomColor": "#dadbde",
+      "borderBottomWidth": 1,
+      "marginHorizontal": 8,
+      "maxWidth": "100%",
+    }
+  }
+  themeMarginHorizontal="small"
+/>
+`;
+
+exports[`Divider has small marginVertical style 1`] = `
+<View
+  style={
+    Object {
+      "borderBottomColor": "#dadbde",
+      "borderBottomWidth": 1,
+      "marginVertical": 8,
+      "maxWidth": "100%",
+    }
+  }
+  themeMarginVertical="small"
+/>
+`;
+
+exports[`Divider has undefined marginHorizontal style 1`] = `
+<View
+  style={
+    Object {
+      "borderBottomColor": "#dadbde",
+      "borderBottomWidth": 1,
+      "maxWidth": "100%",
+    }
+  }
+/>
+`;
+
+exports[`Divider has undefined marginVertical style 1`] = `
+<View
+  style={
+    Object {
+      "borderBottomColor": "#dadbde",
+      "borderBottomWidth": 1,
+      "maxWidth": "100%",
+    }
+  }
+/>
+`;
+
+exports[`Divider has xlarge marginHorizontal style 1`] = `
+<View
+  style={
+    Object {
+      "borderBottomColor": "#dadbde",
+      "borderBottomWidth": 1,
+      "marginHorizontal": 32,
+      "maxWidth": "100%",
+    }
+  }
+  themeMarginHorizontal="xlarge"
+/>
+`;
+
+exports[`Divider has xlarge marginVertical style 1`] = `
+<View
+  style={
+    Object {
+      "borderBottomColor": "#dadbde",
+      "borderBottomWidth": 1,
+      "marginVertical": 32,
+      "maxWidth": "100%",
+    }
+  }
+  themeMarginVertical="xlarge"
+/>
+`;
+
+exports[`Divider has xsmall marginHorizontal style 1`] = `
+<View
+  style={
+    Object {
+      "borderBottomColor": "#dadbde",
+      "borderBottomWidth": 1,
+      "marginHorizontal": 4,
+      "maxWidth": "100%",
+    }
+  }
+  themeMarginHorizontal="xsmall"
+/>
+`;
+
+exports[`Divider has xsmall marginVertical style 1`] = `
+<View
+  style={
+    Object {
+      "borderBottomColor": "#dadbde",
+      "borderBottomWidth": 1,
+      "marginVertical": 4,
+      "maxWidth": "100%",
+    }
+  }
+  themeMarginVertical="xsmall"
+/>
+`;

package/src/components/Divider/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { StyledDivider } from './StyledDivider';
+
+interface DividerProps {
+  /**
+   * Horizontal margin size. There is no margin by default.
+   */
+  marginHorizontal?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+  /**
+   * Vertical margin size. There is no margin by default.
+   */
+  marginVertical?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+}
+
+const Divider = ({ marginHorizontal, marginVertical }: DividerProps) => (
+  <StyledDivider
+    themeMarginHorizontal={marginHorizontal}
+    themeMarginVertical={marginVertical}
+  />
+);
+
+export default Divider;

package/src/index.ts

@@ -1,7 +1,7 @@
-import { ThemeProvider, useTheme } from './styled-components';
+import { ThemeProvider, useTheme } from 'styled-components-native';
 import theme, { getTheme } from './theme';
 
-// Example components
-import ExampleComponent from './components/ExampleComponent';
+import Divider from './components/Divider';
+import Card from './components/Card';
 
-export { theme, getTheme, useTheme, ThemeProvider, ExampleComponent };
+export { theme, getTheme, useTheme, ThemeProvider, Divider, Card };

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

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`theme returns correct theme object 1`] = `
+Object {
+  "__hd__": Object {
+    "card": Object {
+      "padding": Object {
+        "default": "16px",
+      },
+      "radii": Object {
+        "default": "12px",
+      },
+    },
+    "divider": Object {
+      "borderWiths": Object {
+        "default": "1px",
+      },
+      "colors": Object {
+        "default": "#dadbde",
+      },
+      "space": Object {
+        "large": "24px",
+        "medium": "16px",
+        "small": "8px",
+        "xlarge": "32px",
+        "xsmall": "4px",
+      },
+    },
+  },
+  "borderWidths": Object {
+    "base": 1,
+  },
+  "colors": Object {
+    "backgroundDark": "#292a2b",
+    "backgroundLight": "#fafbfb",
+    "danger": "#de350b",
+    "dangerBackground": "#fcebe7",
+    "dangerLight": "#f2ae9d",
+    "disabledText": "#8b8d92",
+    "info": "#4568fb",
+    "infoBackground": "#ecf0ff",
+    "infoLight": "#d1d9fe",
+    "invertedText": "#ffffff",
+    "outline": "#dadbde",
+    "platformBackground": "#ffffff",
+    "primary": "#7622d7",
+    "primaryLight": "#c8a7ef",
+    "success": "#01b39c",
+    "successBackground": "#f0fef4",
+    "successDark": "#017d6d",
+    "successLight": "#002d27",
+    "text": "#292a2b",
+    "warning": "#ffa234",
+    "warningBackground": "#fff6eb",
+    "warningDark": "#d98a2c",
+  },
+  "fontSizes": Object {
+    "large": 16,
+    "medium": 14,
+    "small": 12,
+    "xlarge": 18,
+    "xsmall": 10,
+  },
+  "fontWeights": Object {
+    "bold": 700,
+    "light": 200,
+    "regular": 400,
+    "semiBold": 600,
+  },
+  "lineHeights": Object {
+    "large": 24,
+    "medium": 22,
+    "small": 20,
+    "xlarge": 26,
+    "xsmall": 18,
+  },
+  "space": Object {
+    "large": 24,
+    "medium": 16,
+    "small": 8,
+    "xlarge": 32,
+    "xsmall": 4,
+    "xxlarge": 40,
+    "xxsmall": 2,
+    "xxxlarge": 48,
+    "xxxxlarge": 56,
+  },
+}
+`;

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

@@ -0,0 +1,7 @@
+import theme from '..';
+
+describe('theme', () => {
+  it('returns correct theme object', () => {
+    expect(theme).toMatchSnapshot();
+  });
+});

package/src/theme/components/card.ts

@@ -0,0 +1,15 @@
+import { GlobalTheme } from '../global';
+
+const getCardTheme = (theme: GlobalTheme) => {
+  const radii = {
+    default: `12px`,
+  };
+
+  const padding = {
+    default: `${theme.space.medium}px`,
+  };
+
+  return { radii, padding };
+};
+
+export default getCardTheme;

package/src/theme/components/divider.ts

@@ -0,0 +1,23 @@
+import { GlobalTheme } from '../global';
+
+const getDividerTheme = (theme: GlobalTheme) => {
+  const colors = {
+    default: theme.colors.outline,
+  };
+
+  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`,
+  };
+
+  const borderWiths = {
+    default: `${theme.borderWidths.base}px`,
+  };
+
+  return { colors, space, borderWiths };
+};
+
+export default getDividerTheme;

package/src/theme/global/borders.ts

@@ -0,0 +1,3 @@
+const borderWidths = { base: 1 };
+
+export { borderWidths };

package/src/theme/global/colors.ts

@@ -16,11 +16,13 @@ const systemPalette = {
   warning: palette.orange,
   warningDark: palette.orangeDark15,
   warningBackground: palette.orangeLight90,
-  platformBackground: palette.greyLight95,
+  platformBackground: palette.white,
+  backgroundLight: palette.greyLight95,
   backgroundDark: palette.greyDark75,
   text: palette.greyDark75,
   disabledText: palette.greyDark15,
   invertedText: palette.white,
+  outline: palette.greyLight60,
 };
 
 export { palette, systemPalette };

package/src/theme/global/index.ts

@@ -1,6 +1,7 @@
 import { systemPalette } from './colors';
 import { space } from './space';
 import { fontSizes, fontWeights, lineHeights } from './typography';
+import { borderWidths } from './borders';
 
 const globalTheme = {
   colors: {
@@ -10,6 +11,7 @@ const globalTheme = {
   fontSizes,
   fontWeights,
   lineHeights,
+  borderWidths,
 };
 
 type GlobalTheme = typeof globalTheme;

package/src/theme/index.ts

@@ -1,17 +1,20 @@
 import globalTheme, { GlobalTheme } from './global';
 
-import getExampleComponentTheme from './components/exampleComponent';
+import getDividerTheme from './components/divider';
+import getCardTheme from './components/card';
 
 type Theme = GlobalTheme & {
   __hd__: {
-    exampleComponent: ReturnType<typeof getExampleComponentTheme>;
+    divider: ReturnType<typeof getDividerTheme>;
+    card: ReturnType<typeof getCardTheme>;
   };
 };
 
 const getTheme = (theme: GlobalTheme = globalTheme): Theme => ({
   ...theme,
   __hd__: {
-    exampleComponent: getExampleComponentTheme(theme),
+    divider: getDividerTheme(theme),
+    card: getCardTheme(theme),
   },
 });
 

package/tsconfig.json

@@ -13,6 +13,10 @@
     "noUnusedLocals": true,
     "skipLibCheck": true,
     "types": ["jest", "styled-components", "styled-components-react-native"],
+    "baseUrl": ".",
+    "paths": {
+      "styled-components-native": ["./src/styled-components.ts"]
+    }
   },
   "include": [
     "src"

package/types/components/Card/StyledCard.d.ts

@@ -0,0 +1,3 @@
+import { View } from 'react-native';
+declare const StyledCard: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
+export { StyledCard };

package/types/components/Card/__tests__/Card.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/Card/__tests__/StyledCard.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/Card/index.d.ts

@@ -0,0 +1,5 @@
+import { ViewProps } from 'react-native';
+interface CardProps extends ViewProps {
+}
+declare const Card: (props: CardProps) => JSX.Element;
+export default Card;