@hero-design/rn 7.0.1 → 7.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -17,12 +17,13 @@
     "publish:npm": "yarn publish --access public"
   },
   "dependencies": {
-    "@hero-design/colors": "7.0.1",
+    "@hero-design/colors": "7.0.2",
     "styled-components": "6.0.0-alpha.5"
   },
   "peerDependencies": {
     "react": "17.0.2",
-    "react-native": "0.65.1"
+    "react-native": "0.65.1",
+    "react-native-vector-icons": "^9.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",
@@ -42,6 +43,7 @@
     "@types/jest": "^27.0.2",
     "@types/react": "^17.0.39",
     "@types/react-native": "^0.66.16",
+    "@types/react-native-vector-icons": "^6.4.10",
     "@types/styled-components": "^5.1.24",
     "@types/styled-components-react-native": "^5.1.3",
     "@typescript-eslint/eslint-plugin": "^5.12.1",
@@ -62,6 +64,7 @@
     "react-native": "0.65.1",
     "react-native-safe-area-context": "^4.2.5",
     "react-native-screens": "^3.13.1",
+    "react-native-vector-icons": "^9.1.0",
     "react-test-renderer": "17.0.2",
     "rollup": "^2.68.0",
     "ts-jest": "^27.0.7",
@@ -92,6 +95,14 @@
             "projects": "dependencies"
           }
         ]
+      },
+      "dev": {
+        "dependsOn": [
+          {
+            "target": "build",
+            "projects": "dependencies"
+          }
+        ]
       }
     }
   }

package/playground/components/Badge.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Badge, useTheme } from '../../src/index';
+
+const BadgePlayground = () => {
+  const theme = useTheme();
+
+  return (
+    <View
+      style={{
+        marginVertical: theme.space.medium,
+        marginHorizontal: theme.space.medium,
+      }}
+    >
+      <View
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          marginBottom: theme.space.small,
+        }}
+      >
+        <Badge
+          content="APPROVED"
+          intent="success"
+          style={{ marginEnd: theme.space.small }}
+        />
+        <Badge
+          content="PENDING"
+          intent="warning"
+          style={{ marginEnd: theme.space.small }}
+        />
+      </View>
+      <View
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+        }}
+      >
+        <Badge
+          content="DECLINED"
+          intent="danger"
+          style={{ marginEnd: theme.space.small }}
+        />
+        <Badge content="SUBMITTED" style={{ marginEnd: theme.space.small }} />
+      </View>
+    </View>
+  );
+};
+
+export default BadgePlayground;

package/playground/components/Icon.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+import { Typography, Icon, useTheme } from '../../src/index';
+
+const IconPlayground = () => {
+  const theme = useTheme();
+
+  return (
+    <ScrollView
+      contentContainerStyle={{
+        padding: theme.space.medium,
+      }}
+    >
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        Bottom nav - active
+      </Typography.Text>
+      <View style={{ flexDirection: 'row', marginBottom: theme.space.large }}>
+        <Icon icon="home" style={{ marginEnd: theme.space.medium }} />
+        <Icon icon="speaker" style={{ marginEnd: theme.space.medium }} />
+        <Icon icon="bell" style={{ marginEnd: theme.space.medium }} />
+        <Icon icon="user" />
+      </View>
+
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        Bottom nav - inactive
+      </Typography.Text>
+      <View style={{ flexDirection: 'row', marginBottom: theme.space.large }}>
+        <Icon icon="home-outlined" style={{ marginEnd: theme.space.medium }} />
+        <Icon
+          icon="speaker-outlined"
+          style={{ marginEnd: theme.space.medium }}
+        />
+        <Icon icon="bell-outlined" style={{ marginEnd: theme.space.medium }} />
+        <Icon icon="user-outlined" />
+      </View>
+
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        Dashboard - widgets
+      </Typography.Text>
+      <View style={{ flexDirection: 'row', marginBottom: theme.space.large }}>
+        <Icon icon="coin" style={{ marginEnd: theme.space.medium }} />
+        <Icon icon="calendar-clock" style={{ marginEnd: theme.space.medium }} />
+        <Icon icon="file-certified" style={{ marginEnd: theme.space.medium }} />
+        <Icon icon="file-secured" style={{ marginEnd: theme.space.medium }} />
+        <Icon icon="file-verified" />
+      </View>
+
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        Top nav
+      </Typography.Text>
+      <View style={{ flexDirection: 'row', marginBottom: theme.space.large }}>
+        <Icon icon="suitcase" style={{ marginEnd: theme.space.medium }} />
+        <Icon icon="credit-card" />
+      </View>
+
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        FAB icons
+      </Typography.Text>
+      <View style={{ flexDirection: 'row', marginBottom: theme.space.large }}>
+        <Icon icon="plane" style={{ marginEnd: theme.space.medium }} />
+        <Icon icon="reply" style={{ marginEnd: theme.space.medium }} />
+        <Icon icon="health-bag" style={{ marginEnd: theme.space.medium }} />
+        <Icon icon="clock" style={{ marginEnd: theme.space.medium }} />
+        <Icon icon="target" style={{ marginEnd: theme.space.medium }} />
+        <Icon icon="speaker" />
+      </View>
+
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        Icon with colors
+      </Typography.Text>
+      <View style={{ flexDirection: 'row', marginBottom: theme.space.large }}>
+        <Icon
+          icon="plane"
+          intent="text"
+          style={{ marginEnd: theme.space.medium }}
+        />
+        <Icon
+          icon="reply"
+          intent="primary"
+          style={{ marginEnd: theme.space.medium }}
+        />
+        <Icon
+          icon="health-bag"
+          intent="info"
+          style={{ marginEnd: theme.space.medium }}
+        />
+        <Icon
+          icon="clock"
+          intent="danger"
+          style={{ marginEnd: theme.space.medium }}
+        />
+        <Icon
+          icon="target"
+          intent="success"
+          style={{ marginEnd: theme.space.medium }}
+        />
+        <Icon icon="speaker" intent="warning" />
+      </View>
+
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        Icon with different sizes
+      </Typography.Text>
+      <View
+        style={{
+          flexDirection: 'row',
+          marginBottom: theme.space.large,
+          alignItems: 'flex-end',
+        }}
+      >
+        <Icon
+          icon="activate"
+          intent="text"
+          size="xsmall"
+          style={{ marginEnd: theme.space.medium }}
+        />
+        <Icon
+          icon="add-person"
+          intent="primary"
+          size="small"
+          style={{ marginEnd: theme.space.medium }}
+        />
+        <Icon
+          icon="adjustment"
+          intent="info"
+          size="medium"
+          style={{ marginEnd: theme.space.medium }}
+        />
+        <Icon
+          icon="alignment"
+          intent="danger"
+          size="large"
+          style={{ marginEnd: theme.space.medium }}
+        />
+        <Icon icon="bank" intent="success" size="xlarge" />
+      </View>
+    </ScrollView>
+  );
+};
+
+export default IconPlayground;

package/playground/components/Typography.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Typography, useTheme } from '../../src/index';
+
+const TypographyPlayground = () => {
+  const theme = useTheme();
+
+  return (
+    <View style={{ padding: theme.space.large }}>
+      <Typography.Text fontSize="xlarge" fontWeight="semi-bold">
+        This is a title
+      </Typography.Text>
+      <Typography.Text fontSize="large">This is a subtitle</Typography.Text>
+      <Typography.Text>This is a 2nd subtitle</Typography.Text>
+      <Typography.Text>This is body text</Typography.Text>
+      <Typography.Text intent="subdued">This is body text</Typography.Text>
+    </View>
+  );
+};
+
+export default TypographyPlayground;

package/playground/index.tsx

@@ -1,19 +1,42 @@
 import React from 'react';
-import { NavigationContainer, DefaultTheme } from '@react-navigation/native'; // eslint-disable-line import/no-extraneous-dependencies
-import { createNativeStackNavigator } from '@react-navigation/native-stack'; // eslint-disable-line import/no-extraneous-dependencies
-import { SafeAreaView, FlatList, Text, ListRenderItemInfo } from 'react-native';
+/* eslint-disable  import/no-extraneous-dependencies */
+import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackScreenProps,
+} from '@react-navigation/native-stack';
+import { useFonts } from 'expo-font';
+/* eslint-enable import/no-extraneous-dependencies */
+import { SafeAreaView, FlatList, Text } from 'react-native';
 import { ThemeProvider, theme, useTheme } from '../src/index';
-import DividerPlayground from './components/Divider';
+import BadgePlayground from './components/Badge';
 import CardPlayground from './components/Card';
+import DividerPlayground from './components/Divider';
+import IconPlayground from './components/Icon';
+import TypographyPlayground from './components/Typography';
 
-type ComponentEntry = { name: string; component: React.FC };
+const heroIconFontPath = require('../assets/fonts/hero-icons.ttf');
 
-const Stack = createNativeStackNavigator();
+type RootStackParamList = {
+  Home: undefined;
+  Badge: undefined;
+  Card: undefined;
+  Divider: undefined;
+  Icon: undefined;
+  Typography: undefined;
+};
 
-const components: ComponentEntry[] = [
-  { name: 'Divider', component: DividerPlayground },
+type Navigation = NativeStackScreenProps<RootStackParamList>;
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+const components = [
+  { name: 'Badge', component: BadgePlayground },
   { name: 'Card', component: CardPlayground },
-];
+  { name: 'Divider', component: DividerPlayground },
+  { name: 'Icon', component: IconPlayground },
+  { name: 'Typography', component: TypographyPlayground },
+] as const;
 
 const ComponentItem = ({
   name,
@@ -36,13 +59,13 @@ const ComponentItem = ({
   );
 };
 
-const ComponentList = ({ navigation }) => {
+const ComponentList = ({ navigation }: Navigation) => {
   const hdTheme = useTheme();
   return (
     <SafeAreaView style={{ marginHorizontal: hdTheme.space.large }}>
       <FlatList
         data={components}
-        renderItem={({ item }: ListRenderItemInfo<ComponentEntry>) => (
+        renderItem={({ item }) => (
           <ComponentItem
             name={item.name}
             onPress={() => navigation.navigate(item.name)}
@@ -62,6 +85,14 @@ const App = () => {
       background: theme.colors.platformBackground,
     },
   };
+
+  const [fontsLoaded] = useFonts({
+    'hero-icons': heroIconFontPath,
+  });
+  if (!fontsLoaded) {
+    return null;
+  }
+
   return (
     <ThemeProvider theme={theme}>
       <NavigationContainer theme={CustomNavigationTheme}>

package/react-native.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  dependency: {
+    assets: ['./assets/fonts/'],
+  },
+};

package/src/components/Badge/StyledBadge.tsx

@@ -0,0 +1,34 @@
+import { Text, View } from 'react-native';
+import styled, { css } from 'styled-components-native';
+
+const BACKGROUND_INTENTS = {
+  success: 'successBackground',
+  warning: 'warningBackground',
+  danger: 'dangerBackground',
+  info: 'infoBackground',
+} as const;
+
+type ThemeIntent = 'success' | 'warning' | 'danger' | 'info';
+
+const StyledView = styled(View)<{ themeIntent: ThemeIntent }>`
+  border-width: ${({ theme }) => theme.__hd__.badge.borderWidths.default};
+  border-radius: ${({ theme }) => theme.__hd__.badge.radii.default};
+  padding: ${({ theme }) => theme.__hd__.badge.padding.default};
+
+  ${({ themeIntent }) => css`
+    border-color: ${({ theme }) => theme.__hd__.badge.colors[themeIntent]};
+    background-color: ${({ theme }) =>
+      theme.__hd__.badge.colors[BACKGROUND_INTENTS[themeIntent]]};
+  `};
+`;
+
+const StyledText = styled(Text)<{ themeIntent: ThemeIntent }>`
+  font-weight: ${({ theme }) => theme.__hd__.badge.fontWeights.default};
+  font-size: ${({ theme }) => theme.__hd__.badge.fontSizes.default};
+
+  ${({ themeIntent }) => css`
+    color: ${({ theme }) => theme.__hd__.badge.colors[themeIntent]};
+  `};
+`;
+
+export { StyledView, StyledText };

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, theme } from '../../../index';
+import Badge from '..';
+
+describe('Badge', () => {
+  it('has success style when intent is success', () => {
+    const { getByText, toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <Badge content="APPROVED" intent="success" />
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('APPROVED')).toBeDefined();
+  });
+
+  it('has warning style when intent is warning', () => {
+    const { getByText, toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <Badge content="PENDING" intent="warning" />
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('PENDING')).toBeDefined();
+  });
+
+  it('has danger style when intent is danger', () => {
+    const { getByText, toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <Badge content="DECLINED" intent="danger" />
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('DECLINED')).toBeDefined();
+  });
+
+  it('has info style when intent is info', () => {
+    const { getByText, toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <Badge content="SUBMITTED" intent="info" />
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('SUBMITTED')).toBeDefined();
+  });
+});

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

@@ -0,0 +1,161 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Badge has danger style when intent is danger 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "#fcebe7",
+      "borderBottomColor": "#de350b",
+      "borderBottomLeftRadius": 4,
+      "borderBottomRightRadius": 4,
+      "borderBottomWidth": 1,
+      "borderLeftColor": "#de350b",
+      "borderLeftWidth": 1,
+      "borderRightColor": "#de350b",
+      "borderRightWidth": 1,
+      "borderTopColor": "#de350b",
+      "borderTopLeftRadius": 4,
+      "borderTopRightRadius": 4,
+      "borderTopWidth": 1,
+      "paddingBottom": 4,
+      "paddingLeft": 8,
+      "paddingRight": 8,
+      "paddingTop": 4,
+    }
+  }
+  themeIntent="danger"
+>
+  <Text
+    style={
+      Object {
+        "color": "#de350b",
+        "fontSize": 12,
+        "fontWeight": "600",
+      }
+    }
+    themeIntent="danger"
+  >
+    DECLINED
+  </Text>
+</View>
+`;
+
+exports[`Badge has info style when intent is info 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "#ecf0ff",
+      "borderBottomColor": "#4568fb",
+      "borderBottomLeftRadius": 4,
+      "borderBottomRightRadius": 4,
+      "borderBottomWidth": 1,
+      "borderLeftColor": "#4568fb",
+      "borderLeftWidth": 1,
+      "borderRightColor": "#4568fb",
+      "borderRightWidth": 1,
+      "borderTopColor": "#4568fb",
+      "borderTopLeftRadius": 4,
+      "borderTopRightRadius": 4,
+      "borderTopWidth": 1,
+      "paddingBottom": 4,
+      "paddingLeft": 8,
+      "paddingRight": 8,
+      "paddingTop": 4,
+    }
+  }
+  themeIntent="info"
+>
+  <Text
+    style={
+      Object {
+        "color": "#4568fb",
+        "fontSize": 12,
+        "fontWeight": "600",
+      }
+    }
+    themeIntent="info"
+  >
+    SUBMITTED
+  </Text>
+</View>
+`;
+
+exports[`Badge has success style when intent is success 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "#f0fef4",
+      "borderBottomColor": "#017d6d",
+      "borderBottomLeftRadius": 4,
+      "borderBottomRightRadius": 4,
+      "borderBottomWidth": 1,
+      "borderLeftColor": "#017d6d",
+      "borderLeftWidth": 1,
+      "borderRightColor": "#017d6d",
+      "borderRightWidth": 1,
+      "borderTopColor": "#017d6d",
+      "borderTopLeftRadius": 4,
+      "borderTopRightRadius": 4,
+      "borderTopWidth": 1,
+      "paddingBottom": 4,
+      "paddingLeft": 8,
+      "paddingRight": 8,
+      "paddingTop": 4,
+    }
+  }
+  themeIntent="success"
+>
+  <Text
+    style={
+      Object {
+        "color": "#017d6d",
+        "fontSize": 12,
+        "fontWeight": "600",
+      }
+    }
+    themeIntent="success"
+  >
+    APPROVED
+  </Text>
+</View>
+`;
+
+exports[`Badge has warning style when intent is warning 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "#fff6eb",
+      "borderBottomColor": "#d98a2c",
+      "borderBottomLeftRadius": 4,
+      "borderBottomRightRadius": 4,
+      "borderBottomWidth": 1,
+      "borderLeftColor": "#d98a2c",
+      "borderLeftWidth": 1,
+      "borderRightColor": "#d98a2c",
+      "borderRightWidth": 1,
+      "borderTopColor": "#d98a2c",
+      "borderTopLeftRadius": 4,
+      "borderTopRightRadius": 4,
+      "borderTopWidth": 1,
+      "paddingBottom": 4,
+      "paddingLeft": 8,
+      "paddingRight": 8,
+      "paddingTop": 4,
+    }
+  }
+  themeIntent="warning"
+>
+  <Text
+    style={
+      Object {
+        "color": "#d98a2c",
+        "fontSize": 12,
+        "fontWeight": "600",
+      }
+    }
+    themeIntent="warning"
+  >
+    PENDING
+  </Text>
+</View>
+`;

package/src/components/Badge/index.tsx

@@ -0,0 +1,35 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import React, { ReactElement } from 'react';
+import { StyledView, StyledText } from './StyledBadge';
+
+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;
+}
+
+const Badge = ({
+  content,
+  intent = 'info',
+  style,
+  testID,
+}: BadgeProps): ReactElement => (
+  <StyledView testID={testID} themeIntent={intent} style={style}>
+    <StyledText themeIntent={intent}>{content}</StyledText>
+  </StyledView>
+);
+
+export default Badge;

package/src/components/Icon/HeroIcon/index.tsx

@@ -0,0 +1,30 @@
+import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
+import styled, { css } from 'styled-components-native';
+import heroIconConfig from './selection.json';
+
+type ThemeSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type ThemeIntent =
+  | 'text'
+  | 'primary'
+  | 'info'
+  | 'danger'
+  | 'success'
+  | 'warning';
+
+const HeroIcon = createIconSetFromIcoMoon(
+  heroIconConfig,
+  'hero-icons',
+  'hero-icons.ttf'
+);
+
+const StyledHeroIcon = styled(HeroIcon)<{
+  themeSize: ThemeSize;
+  themeIntent: ThemeIntent;
+}>`
+  ${({ themeIntent, themeSize }) => css`
+    color: ${({ theme }) => theme.__hd__.icon.colors[themeIntent]};
+    font-size: ${({ theme }) => theme.__hd__.icon.sizes[themeSize]}px;
+  `};
+`;
+
+export default StyledHeroIcon;