@hero-design/rn 7.0.0 → 7.0.3

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

@@ -0,0 +1,172 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledText has body intent style 1`] = `
+<Text
+  style={
+    Object {
+      "color": "#292a2b",
+      "fontSize": 14,
+      "fontWeight": "400",
+      "letterSpacing": 0.42,
+      "lineHeight": 22,
+    }
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledText has large fontSize style 1`] = `
+<Text
+  style={
+    Object {
+      "color": "#292a2b",
+      "fontSize": 16,
+      "fontWeight": "400",
+      "letterSpacing": 0.48,
+      "lineHeight": 24,
+    }
+  }
+  themeFontSize="large"
+  themeFontWeight="regular"
+  themeIntent="body"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledText has light fontWeight style 1`] = `
+<Text
+  style={
+    Object {
+      "color": "#292a2b",
+      "fontSize": 14,
+      "fontWeight": "200",
+      "letterSpacing": 0.42,
+      "lineHeight": 22,
+    }
+  }
+  themeFontSize="medium"
+  themeFontWeight="light"
+  themeIntent="body"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledText has medium fontSize style 1`] = `
+<Text
+  style={
+    Object {
+      "color": "#292a2b",
+      "fontSize": 14,
+      "fontWeight": "400",
+      "letterSpacing": 0.42,
+      "lineHeight": 22,
+    }
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledText has regular fontWeight style 1`] = `
+<Text
+  style={
+    Object {
+      "color": "#292a2b",
+      "fontSize": 14,
+      "fontWeight": "400",
+      "letterSpacing": 0.42,
+      "lineHeight": 22,
+    }
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledText has semi-bold fontWeight style 1`] = `
+<Text
+  style={
+    Object {
+      "color": "#292a2b",
+      "fontSize": 14,
+      "fontWeight": "600",
+      "letterSpacing": 0.42,
+      "lineHeight": 22,
+    }
+  }
+  themeFontSize="medium"
+  themeFontWeight="semi-bold"
+  themeIntent="body"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledText has small fontSize style 1`] = `
+<Text
+  style={
+    Object {
+      "color": "#292a2b",
+      "fontSize": 12,
+      "fontWeight": "400",
+      "letterSpacing": 0.36,
+      "lineHeight": 20,
+    }
+  }
+  themeFontSize="small"
+  themeFontWeight="regular"
+  themeIntent="body"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledText has subdued intent style 1`] = `
+<Text
+  style={
+    Object {
+      "color": "#8b8d92",
+      "fontSize": 14,
+      "fontWeight": "400",
+      "letterSpacing": 0.42,
+      "lineHeight": 22,
+    }
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="subdued"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledText has xlarge fontSize style 1`] = `
+<Text
+  style={
+    Object {
+      "color": "#292a2b",
+      "fontSize": 18,
+      "fontWeight": "400",
+      "letterSpacing": 0.54,
+      "lineHeight": 26,
+    }
+  }
+  themeFontSize="xlarge"
+  themeFontWeight="regular"
+  themeIntent="body"
+>
+  This is a test
+</Text>
+`;

package/src/components/Typography/Text/__test__/index.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import Text from '..';
+
+describe('Text', () => {
+  it('renders correctly', () => {
+    const { queryAllByText } = renderWithTheme(<Text>This is a test</Text>);
+
+    expect(queryAllByText('This is a test')).toHaveLength(1);
+  });
+});

package/src/components/Typography/Text/index.tsx

@@ -0,0 +1,41 @@
+import React, { ReactNode } from 'react';
+import { TextProps as NativeTextProps } from 'react-native';
+import { StyledText } from './StyledText';
+
+interface TextProps extends NativeTextProps {
+  /**
+   * Text content.
+   */
+  children: ReactNode;
+  /**
+   * Size of the text.
+   */
+  fontSize?: 'small' | 'medium' | 'large' | 'xlarge';
+  /**
+   * Font weight of the text.
+   */
+  fontWeight?: 'light' | 'regular' | 'semi-bold';
+  /**
+   * Visual intent color to apply to the text.
+   */
+  intent?: 'body' | 'subdued';
+}
+
+const Text = ({
+  children,
+  fontSize = 'medium',
+  fontWeight = 'regular',
+  intent = 'body',
+  ...nativeProps
+}: TextProps) => (
+  <StyledText
+    themeFontSize={fontSize}
+    themeFontWeight={fontWeight}
+    themeIntent={intent}
+    {...nativeProps}
+  >
+    {children}
+  </StyledText>
+);
+
+export default Text;

package/src/components/Typography/index.tsx

@@ -0,0 +1,11 @@
+import Text from './Text';
+
+interface TypographyProps {
+  Text: typeof Text;
+}
+
+const Typography: TypographyProps = {
+  Text,
+};
+
+export default Typography;

package/src/index.ts

@@ -1,6 +1,20 @@
 import { ThemeProvider, useTheme } from 'styled-components-native';
 import theme, { getTheme } from './theme';
 
+import Badge from './components/Badge';
+import Card from './components/Card';
 import Divider from './components/Divider';
+import Icon from './components/Icon';
+import Typography from './components/Typography';
 
-export { theme, getTheme, useTheme, ThemeProvider, Divider };
+export {
+  theme,
+  getTheme,
+  useTheme,
+  ThemeProvider,
+  Badge,
+  Card,
+  Divider,
+  Icon,
+  Typography,
+};

package/src/testHelpers/renderWithTheme.tsx

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

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

@@ -3,6 +3,41 @@
 exports[`theme returns correct theme object 1`] = `
 Object {
   "__hd__": Object {
+    "badge": Object {
+      "borderWidths": Object {
+        "default": "1px",
+      },
+      "colors": Object {
+        "danger": "#de350b",
+        "dangerBackground": "#fcebe7",
+        "info": "#4568fb",
+        "infoBackground": "#ecf0ff",
+        "success": "#017d6d",
+        "successBackground": "#f0fef4",
+        "warning": "#d98a2c",
+        "warningBackground": "#fff6eb",
+      },
+      "fontSizes": Object {
+        "default": "12px",
+      },
+      "fontWeights": Object {
+        "default": 600,
+      },
+      "padding": Object {
+        "default": "4px 8px",
+      },
+      "radii": Object {
+        "default": "4px",
+      },
+    },
+    "card": Object {
+      "padding": Object {
+        "default": "16px",
+      },
+      "radii": Object {
+        "default": "12px",
+      },
+    },
     "divider": Object {
       "borderWiths": Object {
         "default": "1px",
@@ -18,6 +53,46 @@ Object {
         "xsmall": "4px",
       },
     },
+    "icon": Object {
+      "colors": Object {
+        "danger": "#de350b",
+        "info": "#4568fb",
+        "primary": "#7622d7",
+        "success": "#01b39c",
+        "text": "#292a2b",
+        "warning": "#ffa234",
+      },
+      "sizes": Object {
+        "large": 28,
+        "medium": 24,
+        "small": 20,
+        "xlarge": 32,
+        "xsmall": 16,
+      },
+    },
+    "typography": Object {
+      "colors": Object {
+        "body": "#292a2b",
+        "subdued": "#8b8d92",
+      },
+      "fontSizes": Object {
+        "large": 16,
+        "medium": 14,
+        "small": 12,
+        "xlarge": 18,
+      },
+      "fontWeights": Object {
+        "light": 200,
+        "regular": 400,
+        "semiBold": 600,
+      },
+      "lineHeights": Object {
+        "large": "24px",
+        "medium": "22px",
+        "small": "20px",
+        "xlarge": "26px",
+      },
+    },
   },
   "borderWidths": Object {
     "base": 1,
@@ -52,6 +127,10 @@ Object {
     "small": 12,
     "xlarge": 18,
     "xsmall": 10,
+    "xxlarge": 20,
+    "xxxlarge": 24,
+    "xxxxlarge": 28,
+    "xxxxxlarge": 32,
   },
   "fontWeights": Object {
     "bold": 700,

package/src/theme/components/badge.ts

@@ -0,0 +1,38 @@
+import { GlobalTheme } from '../global';
+
+const getBadgeTheme = (theme: GlobalTheme) => {
+  const borderWidths = {
+    default: `${theme.borderWidths.base}px`,
+  };
+
+  const colors = {
+    danger: theme.colors.danger,
+    dangerBackground: theme.colors.dangerBackground,
+    info: theme.colors.info,
+    infoBackground: theme.colors.infoBackground,
+    success: theme.colors.successDark,
+    successBackground: theme.colors.successBackground,
+    warning: theme.colors.warningDark,
+    warningBackground: theme.colors.warningBackground,
+  };
+
+  const padding = {
+    default: `${theme.space.xsmall}px ${theme.space.small}px`,
+  };
+
+  const fontSizes = {
+    default: `${theme.fontSizes.small}px`,
+  };
+
+  const fontWeights = {
+    default: theme.fontWeights.semiBold,
+  };
+
+  const radii = {
+    default: `4px`,
+  };
+
+  return { borderWidths, colors, padding, fontSizes, fontWeights, radii };
+};
+
+export default getBadgeTheme;

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/icon.ts

@@ -0,0 +1,24 @@
+import { GlobalTheme } from '../global';
+
+const getIconTheme = (theme: GlobalTheme) => {
+  const colors = {
+    text: theme.colors.text,
+    primary: theme.colors.primary,
+    info: theme.colors.info,
+    danger: theme.colors.danger,
+    success: theme.colors.success,
+    warning: theme.colors.warning,
+  };
+
+  const sizes = {
+    xsmall: theme.fontSizes.large,
+    small: theme.fontSizes.xxlarge,
+    medium: theme.fontSizes.xxxlarge,
+    large: theme.fontSizes.xxxxlarge,
+    xlarge: theme.fontSizes.xxxxxlarge,
+  };
+
+  return { colors, sizes };
+};
+
+export default getIconTheme;

package/src/theme/components/typography.ts

@@ -0,0 +1,32 @@
+import { GlobalTheme } from '../global';
+
+const getTypographyTheme = (theme: GlobalTheme) => {
+  const colors = {
+    body: theme.colors.text,
+    subdued: theme.colors.disabledText,
+  };
+
+  const fontSizes = {
+    small: theme.fontSizes.small,
+    medium: theme.fontSizes.medium,
+    large: theme.fontSizes.large,
+    xlarge: theme.fontSizes.xlarge,
+  };
+
+  const fontWeights = {
+    light: theme.fontWeights.light,
+    regular: theme.fontWeights.regular,
+    semiBold: theme.fontWeights.semiBold,
+  };
+
+  const lineHeights = {
+    small: `${theme.lineHeights.small}px`,
+    medium: `${theme.lineHeights.medium}px`,
+    large: `${theme.lineHeights.large}px`,
+    xlarge: `${theme.lineHeights.xlarge}px`,
+  };
+
+  return { colors, fontSizes, fontWeights, lineHeights };
+};
+
+export default getTypographyTheme;

package/src/theme/global/typography.ts

@@ -1,6 +1,10 @@
 const BASE = 16;
 
 const fontSizes = {
+  xxxxxlarge: BASE * 2, // 32
+  xxxxlarge: BASE * 1.75, // 28
+  xxxlarge: BASE * 1.5, // 24
+  xxlarge: BASE * 1.25, // 20
   xlarge: BASE * 1.125, // 18
   large: BASE, // 16
   medium: BASE * 0.875, // 14

package/src/theme/index.ts

@@ -1,17 +1,29 @@
 import globalTheme, { GlobalTheme } from './global';
 
+import getBadgeTheme from './components/badge';
+import getCardTheme from './components/card';
 import getDividerTheme from './components/divider';
+import getIconTheme from './components/icon';
+import getTypographyTheme from './components/typography';
 
 type Theme = GlobalTheme & {
   __hd__: {
+    badge: ReturnType<typeof getBadgeTheme>;
+    card: ReturnType<typeof getCardTheme>;
     divider: ReturnType<typeof getDividerTheme>;
+    icon: ReturnType<typeof getIconTheme>;
+    typography: ReturnType<typeof getTypographyTheme>;
   };
 };
 
 const getTheme = (theme: GlobalTheme = globalTheme): Theme => ({
   ...theme,
   __hd__: {
+    badge: getBadgeTheme(theme),
+    card: getCardTheme(theme),
     divider: getDividerTheme(theme),
+    icon: getIconTheme(theme),
+    typography: getTypographyTheme(theme),
   },
 });
 

package/testUtils/setup.ts

@@ -0,0 +1,3 @@
+jest.mock('react-native-vector-icons', () => ({
+  createIconSetFromIcoMoon: jest.fn(() => 'HeroIcon'),
+}));

package/tsconfig.json

@@ -18,11 +18,7 @@
       "styled-components-native": ["./src/styled-components.ts"]
     }
   },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules"
-  ],
+  "include": ["src", "playground"],
+  "exclude": ["node_modules"],
   "extends": "expo/tsconfig.base"
 }

package/types/components/ExampleComponent/StyledView.d.ts

@@ -0,0 +1,7 @@
+import { View } from 'react-native';
+declare const Square: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+    themeSize: 'small' | 'medium' | 'large';
+    themeMargin: 'small' | 'medium' | 'large';
+    themeBgColor: 'primary' | 'danger' | 'warning';
+}, never>;
+export { Square };

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

@@ -0,0 +1,16 @@
+interface Props {
+    /**
+     * Size.
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Margin.
+     */
+    margin: 'small' | 'medium' | 'large';
+    /**
+     * Background color.
+     */
+    bgColor: 'primary' | 'danger' | 'warning';
+}
+declare const ExampleComponent: ({ size, margin, bgColor }: Props) => JSX.Element;
+export default ExampleComponent;

package/types/index.d.ts

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

package/types/playground/components/Badge.d.ts

@@ -0,0 +1,2 @@
+declare const BadgePlayground: () => JSX.Element;
+export default BadgePlayground;

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

@@ -0,0 +1,2 @@
+declare const CardPlayground: () => JSX.Element;
+export default CardPlayground;

package/types/playground/components/Divider.d.ts

@@ -0,0 +1,2 @@
+declare const DividerPlayground: () => JSX.Element;
+export default DividerPlayground;

package/types/playground/components/Icon.d.ts

@@ -0,0 +1,2 @@
+declare const IconPlayground: () => JSX.Element;
+export default IconPlayground;

package/types/playground/components/Typography.d.ts

@@ -0,0 +1,2 @@
+declare const TypographyPlayground: () => JSX.Element;
+export default TypographyPlayground;

package/types/playground/index.d.ts

@@ -0,0 +1,2 @@
+declare const App: () => JSX.Element | null;
+export default App;

package/types/src/components/Badge/StyledBadge.d.ts

@@ -0,0 +1,9 @@
+import { Text, View } from 'react-native';
+declare type ThemeIntent = 'success' | 'warning' | 'danger' | 'info';
+declare const StyledView: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+    themeIntent: ThemeIntent;
+}, never>;
+declare const StyledText: import("styled-components").StyledComponent<typeof Text, import("../../theme").Theme, {
+    themeIntent: ThemeIntent;
+}, never>;
+export { StyledView, StyledText };

package/types/src/components/Badge/index.d.ts

@@ -0,0 +1,22 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { ReactElement } from 'react';
+interface BadgeProps {
+    /**
+     * Content of the `Badge`.
+     */
+    content: string;
+    /**
+     * Visual intent color to apply to `Badge`.
+     */
+    intent?: 'success' | 'warning' | 'danger' | 'info';
+    /**
+     * Addditional style to be applied for `Badge`.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Badge: ({ content, intent, style, testID, }: BadgeProps) => ReactElement;
+export default Badge;

package/types/src/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/src/components/Card/__tests__/Card.spec.d.ts

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

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

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

package/types/src/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;

package/types/src/components/Divider/__tests__/StyledDivider.spec.d.ts

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