@hero-design/rn 7.0.0 → 7.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.0.0",
+  "version": "7.0.3",
   "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.0",
+    "@hero-design/colors": "7.0.3",
     "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/Card.tsx

@@ -0,0 +1,238 @@
+import React, { ComponentProps } from 'react';
+import { View, ViewProps, StyleSheet } from 'react-native';
+import { palette } from '@hero-design/colors';
+import { Card, useTheme, Typography, Icon, Divider } from '../../src/index';
+
+const TextBox = (props: ViewProps) => (
+  <View
+    style={{
+      flex: 1,
+      justifyContent: 'flex-end',
+    }}
+    {...props}
+  />
+);
+
+const Screen = View;
+type DashboardCardProps = ViewProps & {
+  icon: ComponentProps<typeof Icon>['icon'];
+  title: string;
+  subtitle: string;
+};
+
+const DashboardCard = ({
+  style,
+  icon,
+  title,
+  subtitle,
+}: DashboardCardProps) => (
+  <Card testID="inductionContent" style={style}>
+    <View style={{ flex: 1, alignItems: 'flex-end' }}>
+      <Icon icon={icon} />
+    </View>
+    <TextBox>
+      <Typography.Text fontSize="xlarge" fontWeight="semi-bold">
+        {title}
+      </Typography.Text>
+      <Typography.Text fontSize="medium">{subtitle}</Typography.Text>
+    </TextBox>
+  </Card>
+);
+
+const InductionCard = (props: ViewProps) => (
+  <DashboardCard
+    icon="file-verified"
+    title="Induction Content"
+    subtitle="2 files to acknowledge"
+    {...props}
+  />
+);
+const PoliciesCard = (props: ViewProps) => (
+  <DashboardCard
+    icon="file-secured"
+    title="Policies"
+    subtitle="1 to acknowledge"
+    {...props}
+  />
+);
+
+const CertificationsCard = (props: ViewProps) => (
+  <DashboardCard
+    icon="file-certified"
+    title="Certification"
+    subtitle="1 to update"
+    {...props}
+  />
+);
+
+const Payslip = (props: ViewProps) => {
+  const theme = useTheme();
+  const { style, ...otherProps } = props;
+  return (
+    <Card
+      {...otherProps}
+      style={StyleSheet.flatten([
+        {
+          flexDirection: 'row',
+          alignItems: 'stretch',
+          backgroundColor: palette.greyLight75,
+        },
+        style,
+      ])}
+    >
+      <View>
+        <View
+          style={{
+            padding: theme.space.small,
+            backgroundColor: '#C0ECE6',
+            borderRadius: 999,
+            alignContent: 'stretch',
+          }}
+        >
+          <Icon icon="coin" />
+        </View>
+      </View>
+      <View style={{ flex: 1, marginLeft: theme.space.small }}>
+        <Typography.Text fontSize="large" fontWeight="semi-bold">
+          Rosters
+        </Typography.Text>
+        <Typography.Text fontSize="medium">3 shifts this week</Typography.Text>
+      </View>
+      <View
+        style={{
+          alignItems: 'center',
+          alignContent: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Icon icon="arrow-right" />
+      </View>
+    </Card>
+  );
+};
+
+const MyLeaveCard = (props: ViewProps) => {
+  const theme = useTheme();
+  const { style, ...otherProps } = props;
+  return (
+    <Card
+      {...otherProps}
+      style={StyleSheet.flatten([
+        {
+          backgroundColor: palette.greyLight90,
+          paddingBottom: 0,
+          paddingTop: 0,
+          paddingRight: 0,
+          paddingLeft: 0,
+        },
+        style,
+      ])}
+    >
+      <View
+        testID="header"
+        style={{
+          marginHorizontal: theme.space.small,
+          marginTop: theme.space.small,
+          justifyContent: 'space-between',
+          flexDirection: 'row',
+        }}
+      >
+        <Typography.Text fontSize="large" fontWeight="semi-bold">
+          My Leave
+        </Typography.Text>
+
+        <View style={{ flexDirection: 'row' }}>
+          <Typography.Text fontWeight="semi-bold">Add /view</Typography.Text>
+          <Icon
+            icon="circle-add-outlined"
+            size="xsmall"
+            style={{ margin: theme.space.xxsmall }}
+          />
+        </View>
+      </View>
+      <Divider marginVertical="small" />
+      <View testID="content" style={{ margin: theme.space.small }}>
+        <Typography.Text fontSize="medium" fontWeight="semi-bold">
+          Leave Balances
+        </Typography.Text>
+        <View
+          testID="listItem1"
+          style={{ flexDirection: 'row', justifyContent: 'space-between' }}
+        >
+          <Typography.Text>Jury Duty</Typography.Text>
+          <Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
+        </View>
+        <View
+          testID="listItem1"
+          style={{ flexDirection: 'row', justifyContent: 'space-between' }}
+        >
+          <Typography.Text>Annual Leave</Typography.Text>
+          <Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
+        </View>
+        <View
+          testID="listItem1"
+          style={{ flexDirection: 'row', justifyContent: 'space-between' }}
+        >
+          <Typography.Text>Values Champion Award</Typography.Text>
+          <Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
+        </View>
+        <View
+          testID="listItem1"
+          style={{ flexDirection: 'row', justifyContent: 'space-between' }}
+        >
+          <Typography.Text>Family and Domestic</Typography.Text>
+          <Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
+        </View>
+      </View>
+    </Card>
+  );
+};
+
+const CardPlayground = () => {
+  const theme = useTheme();
+  return (
+    <Screen>
+      <View style={{ flexDirection: 'row', height: 250 }}>
+        <View style={{ flex: 1 }}>
+          <InductionCard
+            style={{
+              flex: 1,
+              margin: theme.space.small,
+              backgroundColor: theme.colors.primaryLight,
+            }}
+          />
+        </View>
+        <View style={{ flex: 1 }}>
+          <PoliciesCard
+            style={{
+              flex: 1,
+              backgroundColor: palette.dodgerBlueLight75,
+              margin: theme.space.small,
+            }}
+            testID="policies"
+          />
+          <CertificationsCard
+            style={{
+              flex: 1,
+              margin: theme.space.small,
+              backgroundColor: palette.dodgerBlueLight75,
+            }}
+            testID="certifications"
+          />
+        </View>
+      </View>
+      <Payslip
+        style={{
+          margin: theme.space.small,
+        }}
+      />
+      <MyLeaveCard
+        style={{
+          margin: theme.space.small,
+        }}
+      />
+    </Screen>
+  );
+};
+
+export default CardPlayground;

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,17 +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 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;
+};
+
+type Navigation = NativeStackScreenProps<RootStackParamList>;
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
 
-const components: ComponentEntry[] = [
+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,
@@ -34,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)}
@@ -60,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();
+  });
+});