@hero-design/rn 7.0.1 → 7.0.2

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,7 +1,20 @@
 import { ThemeProvider, useTheme } from 'styled-components-native';
 import theme, { getTheme } from './theme';
 
-import Divider from './components/Divider';
+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, Card };
+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,33 @@
 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",
@@ -26,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,
@@ -60,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/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,20 +1,29 @@
 import globalTheme, { GlobalTheme } from './global';
 
-import getDividerTheme from './components/divider';
+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__: {
-    divider: ReturnType<typeof getDividerTheme>;
+    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__: {
-    divider: getDividerTheme(theme),
+    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/index.d.ts

@@ -1,5 +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';
-import Card from './components/Card';
-export { theme, getTheme, useTheme, ThemeProvider, Divider, Card };
+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/Icon/HeroIcon/index.d.ts

@@ -0,0 +1,7 @@
+declare type ThemeSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+declare type ThemeIntent = 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
+declare const StyledHeroIcon: import("styled-components").StyledComponent<typeof import("react-native-vector-icons/Icon").Icon, import("../../../theme").Theme, {
+    themeSize: ThemeSize;
+    themeIntent: ThemeIntent;
+}, never>;
+export default StyledHeroIcon;

package/types/src/components/Icon/IconList.d.ts

@@ -0,0 +1,2 @@
+declare const IconList: readonly ["activate", "add-person", "adjustment", "alignment", "bank", "bell", "billing", "bookmark", "box-check", "box", "buildings", "cake", "calendar-clock", "calendar", "carat-down-small", "carat-down", "carat-left", "carat-right", "carat-up", "circle-add", "circle-cancel", "circle-check", "circle-down", "circle-info", "circle-left", "circle-ok", "circle-pencil", "circle-question", "circle-remove", "circle-right", "circle-up", "circle-warning", "clock", "cloud-download", "cloud-upload", "cog", "coin", "contacts", "credit-card", "diamond", "direction-arrows", "directory", "document", "dollar-coin-shine", "double-buildings", "edit-template", "envelope", "expense", "eye-circle", "eye-invisible", "eye", "face-meh", "face-sad", "face-smiley", "feed", "feedbacks", "file-certified", "file-clone", "file-copy", "file-csv", "file-dispose", "file-doc", "file-excel", "file-export", "file-lock", "file-pdf", "file-powerpoint", "file-search", "file-secured", "file-sheets", "file-slide", "file-verified", "file-word", "file", "folder-user", "folder", "funnel-filter", "global-dollar", "globe", "graduation-cap", "graph", "happy-sun", "health-bag", "heart", "home", "image", "import", "incident-siren", "instapay", "list", "loading", "loading-2", "location", "lock", "media-content", "menu", "moneybag", "moon", "multiple-stars", "multiple-users", "node", "open-folder", "paperclip", "payment-summary", "pencil", "phone", "piggy-bank", "plane", "play-circle", "print", "raising-hands", "reply", "reschedule", "rostering", "save", "schedule", "search-person", "send", "speaker", "star-medal", "star", "steps-circle", "stopwatch", "suitcase", "survey", "switch", "tag", "target", "teams", "timesheet", "touch-id", "trash-bin", "unlock", "user", "video-1", "video-2", "activate-outlined", "add-person-outlined", "add-section-outlined", "add-time-outlined", "add", "adjustment-outlined", "alignment-2-outlined", "alignment-outlined", "all-caps", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "at-sign", "bell-outlined", "billing-outlined", "body-outlined", "bold", "bookmark-outlined", "box-check-outlined", "box-outlined", "bullet-points", "cake-outlined", "calendar-dates-outlined", "calendar-star-outlined", "camera-outlined", "cancel", "checkmark", "circle-add-outlined", "circle-cancel-outlined", "circle-down-outlined", "circle-info-outlined", "circle-left-outlined", "circle-ok-outlined", "circle-question-outlined", "circle-remove-outlined", "circle-right-outlined", "circle-up-outlined", "circle-warning-outlined", "clock-2-outlined", "clock-outlined", "cog-outlined", "coin-outlined", "comment-outlined", "contacts-outlined", "credit-card-outlined", "direction-arrows-outlined", "directory-outlined", "document-outlined", "dollar-coin-shine-outlined", "dollar-sign", "double-buildings-outlined", "double-left-arrows", "double-right-arrows", "download-outlined", "edit-template-outlined", "email-outlined", "enter-arrow", "envelope-outlined", "expense-outlined", "external-link", "eye-invisible-outlined", "eye-outlined", "face-id", "face-meh-outlined", "face-open-smiley-outlined", "face-sad-outlined", "face-smiley-outlined", "feed-outlined", "file-certified-outlined", "file-clone-outlined", "file-copy-outlined", "file-dispose-outlined", "file-download-outlined", "file-export-outlined", "file-lock-outlined", "file-outlined", "file-search-outlined", "file-secured-outlined", "file-verified-outlined", "folder-outlined", "folder-user-outlined", "funnel-filter-outline", "graph-outlined", "happy-sun-outlined", "health-bag-outlined", "heart-outlined", "home-outlined", "image-outlined", "import-outlined", "instapay-outlined", "italic", "link-1", "link-2", "list-outlined", "location-outlined", "lock-outlined", "locked-file-outlined", "log-out", "media-content-outlined", "menu-close", "menu-expand", "menu-fold-outlined", "menu-unfold-outlined", "moneybag-outlined", "moon-outlined", "more-horizontal", "more-vertical", "multiple-folders-outlined", "multiple-users-outlined", "node-outlined", "number-points", "number", "payment-summary-outlined", "payslip-outlined", "pencil-outlined", "percentage", "phone-outlined", "piggy-bank-outlined", "plane-outlined", "play-circle-outlined", "print-outlined", "qr-code-outlined", "re-assign", "refresh", "remove", "reply-outlined", "restart", "return-arrow", "rostering-outlined", "save-outlined", "schedule-outlined", "search-outlined", "send-outlined", "share-1", "share-2", "single-down-arrow", "single-left-arrow", "single-right-arrow", "single-up-arrow", "speaker-outlined", "star-outlined", "stopwatch-outlined", "strikethrough", "survey-outlined", "switch-outlined", "sync", "target-outlined", "timesheet-outlined", "transfer", "trash-bin-outlined", "unavailable", "underline", "unlock-outlined", "upload-outlined", "user-outlined", "video-1-outlined", "video-2-outlined"];
+export default IconList;

package/types/src/components/Icon/__tests__/Icon.spec.d.ts

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

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

@@ -0,0 +1,27 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import IconList from './IconList';
+declare type IconName = typeof IconList[number];
+interface IconProps {
+    /**
+     * Name of the `Icon`.
+     */
+    icon: IconName;
+    /**
+     * Addditional style to be applied for `Icon`.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Size of the `Icon`.
+     */
+    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+    /**
+     * Intent of the `Icon`.
+     */
+    intent?: 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Icon: ({ icon, style, size, intent, testID, }: IconProps) => JSX.Element;
+export default Icon;