@hero-design/rn 7.0.4 → 7.1.0

package/playground/components/Card.tsx

@@ -1,19 +1,17 @@
 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}
-  />
-);
+import {
+  useTheme,
+  scale,
+  Card,
+  Typography,
+  Icon,
+  Divider,
+} from '../../src/index';
 
 const Screen = View;
+
 type DashboardCardProps = ViewProps & {
   icon: ComponentProps<typeof Icon>['icon'];
   title: string;
@@ -25,19 +23,28 @@ const DashboardCard = ({
   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>
-);
+}: DashboardCardProps) => {
+  const theme = useTheme();
+  return (
+    <Card style={style}>
+      <View style={{ flex: 1, alignItems: 'flex-end' }}>
+        <Icon icon={icon} />
+      </View>
+      <View
+        style={{
+          flex: 1,
+          justifyContent: 'flex-end',
+          margin: theme.space.small,
+        }}
+      >
+        <Typography.Text fontSize="xlarge" fontWeight="semi-bold">
+          {title}
+        </Typography.Text>
+        <Typography.Text fontSize="medium">{subtitle}</Typography.Text>
+      </View>
+    </Card>
+  );
+};
 
 const InductionCard = (props: ViewProps) => (
   <DashboardCard
@@ -59,13 +66,13 @@ const PoliciesCard = (props: ViewProps) => (
 const CertificationsCard = (props: ViewProps) => (
   <DashboardCard
     icon="file-certified"
-    title="Certification"
+    title="Certifications"
     subtitle="1 to update"
     {...props}
   />
 );
 
-const Payslip = (props: ViewProps) => {
+const RostersCard = (props: ViewProps) => {
   const theme = useTheme();
   const { style, ...otherProps } = props;
   return (
@@ -74,39 +81,30 @@ const Payslip = (props: ViewProps) => {
       style={StyleSheet.flatten([
         {
           flexDirection: 'row',
-          alignItems: 'stretch',
-          backgroundColor: palette.greyLight75,
+          alignItems: 'center',
+          backgroundColor: palette.greyLight90,
         },
         style,
       ])}
     >
-      <View>
+      <View style={{ padding: theme.space.small }}>
         <View
           style={{
             padding: theme.space.small,
-            backgroundColor: '#C0ECE6',
+            backgroundColor: theme.colors.infoLight,
             borderRadius: 999,
-            alignContent: 'stretch',
           }}
         >
-          <Icon icon="coin" />
+          <Icon icon="calendar-clock" />
         </View>
       </View>
       <View style={{ flex: 1, marginLeft: theme.space.small }}>
-        <Typography.Text fontSize="large" fontWeight="semi-bold">
+        <Typography.Text fontSize="xlarge" 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" />
+        <Typography.Text fontSize="large">3 shifts this week</Typography.Text>
       </View>
+      <Icon icon="arrow-right" />
     </Card>
   );
 };
@@ -129,58 +127,53 @@ const MyLeaveCard = (props: ViewProps) => {
       ])}
     >
       <View
-        testID="header"
         style={{
-          marginHorizontal: theme.space.small,
-          marginTop: theme.space.small,
+          padding: theme.space.medium,
           justifyContent: 'space-between',
           flexDirection: 'row',
         }}
       >
-        <Typography.Text fontSize="large" fontWeight="semi-bold">
+        <Typography.Text fontSize="xlarge" fontWeight="semi-bold">
           My Leave
         </Typography.Text>
-
-        <View style={{ flexDirection: 'row' }}>
-          <Typography.Text fontWeight="semi-bold">Add /view</Typography.Text>
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <Typography.Text fontSize="large" fontWeight="semi-bold">
+            Add / view
+          </Typography.Text>
           <Icon
             icon="circle-add-outlined"
             size="xsmall"
-            style={{ margin: theme.space.xxsmall }}
+            style={{ marginLeft: theme.space.small }}
           />
         </View>
       </View>
-      <Divider marginVertical="small" />
-      <View testID="content" style={{ margin: theme.space.small }}>
-        <Typography.Text fontSize="medium" fontWeight="semi-bold">
+      <Divider />
+      <View style={{ padding: theme.space.medium }}>
+        <Typography.Text
+          fontSize="large"
+          fontWeight="semi-bold"
+          style={{ marginBottom: theme.space.small }}
+        >
           Leave Balances
         </Typography.Text>
-        <View
-          testID="listItem1"
-          style={{ flexDirection: 'row', justifyContent: 'space-between' }}
-        >
-          <Typography.Text>Jury Duty</Typography.Text>
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+          <Typography.Text fontSize="large">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>
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+          <Typography.Text fontSize="large">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>
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+          <Typography.Text fontSize="large">
+            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>
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+          <Typography.Text fontSize="large">
+            Family and Domestic
+          </Typography.Text>
           <Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
         </View>
       </View>
@@ -191,13 +184,12 @@ const MyLeaveCard = (props: ViewProps) => {
 const CardPlayground = () => {
   const theme = useTheme();
   return (
-    <Screen>
-      <View style={{ flexDirection: 'row', height: 250 }}>
-        <View style={{ flex: 1 }}>
+    <Screen style={{ padding: theme.space.medium }}>
+      <View style={{ flexDirection: 'row', height: scale(216) }}>
+        <View style={{ flex: 1, marginRight: theme.space.medium }}>
           <InductionCard
             style={{
               flex: 1,
-              margin: theme.space.small,
               backgroundColor: theme.colors.primaryLight,
             }}
           />
@@ -206,31 +198,22 @@ const CardPlayground = () => {
           <PoliciesCard
             style={{
               flex: 1,
-              backgroundColor: palette.dodgerBlueLight75,
-              margin: theme.space.small,
+              backgroundColor: theme.colors.infoLight,
+              marginBottom: theme.space.medium,
             }}
             testID="policies"
           />
           <CertificationsCard
             style={{
               flex: 1,
-              margin: theme.space.small,
-              backgroundColor: palette.dodgerBlueLight75,
+              backgroundColor: theme.colors.infoLight,
             }}
             testID="certifications"
           />
         </View>
       </View>
-      <Payslip
-        style={{
-          margin: theme.space.small,
-        }}
-      />
-      <MyLeaveCard
-        style={{
-          margin: theme.space.small,
-        }}
-      />
+      <RostersCard style={{ marginTop: theme.space.medium }} />
+      <MyLeaveCard style={{ marginTop: theme.space.medium }} />
     </Screen>
   );
 };

package/playground/components/FAB.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+/* eslint-disable import/no-extraneous-dependencies */
+import {
+  SafeAreaProvider,
+  SafeAreaView,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
+import { FAB, useTheme } from '../../src/index';
+
+const FABPlayground = (): JSX.Element => {
+  const [active, setActive] = useState(false);
+  const insets = useSafeAreaInsets();
+  const theme = useTheme();
+
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={{ flex: 1 }} edges={['right', 'left']}>
+        <FAB
+          icon="add"
+          onPress={() => {
+            setActive(!active);
+          }}
+          animated
+          active={active}
+          style={{
+            position: 'absolute',
+            bottom: Math.max(insets.bottom, theme.space.large),
+            right: theme.space.large,
+          }}
+        />
+
+        <FAB
+          icon="share-1"
+          onPress={() => {
+            alert('button pressed');
+          }}
+          style={{
+            backgroundColor: theme.colors.primary,
+            position: 'absolute',
+            bottom: Math.max(insets.bottom, theme.space.large),
+            left: theme.space.large,
+          }}
+        />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+};
+
+export default FABPlayground;

package/playground/index.tsx

@@ -6,7 +6,6 @@ import {
   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';
@@ -14,6 +13,7 @@ import CardPlayground from './components/Card';
 import DividerPlayground from './components/Divider';
 import IconPlayground from './components/Icon';
 import TypographyPlayground from './components/Typography';
+import FABPlayground from './components/FAB';
 
 const heroIconFontPath = require('../assets/fonts/hero-icons.ttf');
 
@@ -24,6 +24,7 @@ type RootStackParamList = {
   Divider: undefined;
   Icon: undefined;
   Typography: undefined;
+  FAB: undefined;
 };
 
 type Navigation = NativeStackScreenProps<RootStackParamList>;
@@ -36,6 +37,7 @@ const components = [
   { name: 'Divider', component: DividerPlayground },
   { name: 'Icon', component: IconPlayground },
   { name: 'Typography', component: TypographyPlayground },
+  { name: 'FAB', component: FABPlayground },
 ] as const;
 
 const ComponentItem = ({

package/rollup.config.js

@@ -4,6 +4,7 @@ import { babel } from '@rollup/plugin-babel';
 import typescript from '@rollup/plugin-typescript';
 import json from '@rollup/plugin-json';
 import replace from '@rollup/plugin-replace';
+import copy from 'rollup-plugin-copy';
 
 import pkg from './package.json';
 
@@ -23,13 +24,21 @@ export default {
   ],
   external: ['react', 'react-native'],
   plugins: [
-    replace(({
+    replace({
       'process.env.NODE_ENV': JSON.stringify('production'),
-    })),
+    }),
     nodeResolve({ extensions, browser: true }),
     commonjs(),
     json(),
     typescript(),
     babel({ extensions, babelHelpers: 'bundled' }),
+    copy({
+      targets: [
+        {
+          src: 'assets/fonts/hero-icons.ttf',
+          dest: 'lib/assets/fonts',
+        },
+      ],
+    }),
   ],
 };

package/src/components/Badge/index.tsx

@@ -1,18 +1,18 @@
-import { StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import React, { ReactElement } from 'react';
 import { StyledView, StyledText } from './StyledBadge';
 
-interface BadgeProps {
+interface BadgeProps extends ViewProps {
   /**
-   * Content of the `Badge`.
+   * Content of the Badge.
    */
   content: string;
   /**
-   * Visual intent color to apply to `Badge`.
+   * Visual intent color to apply to Badge.
    */
   intent?: 'success' | 'warning' | 'danger' | 'info';
   /**
-   * Addditional style to be applied for `Badge`.
+   * Addditional style.
    */
   style?: StyleProp<ViewStyle>;
   /**
@@ -26,8 +26,14 @@ const Badge = ({
   intent = 'info',
   style,
   testID,
+  ...nativeProps
 }: BadgeProps): ReactElement => (
-  <StyledView testID={testID} themeIntent={intent} style={style}>
+  <StyledView
+    themeIntent={intent}
+    style={style}
+    testID={testID}
+    {...nativeProps}
+  >
     <StyledText themeIntent={intent}>{content}</StyledText>
   </StyledView>
 );

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

@@ -20,10 +20,10 @@ exports[`Card renders correct 1`] = `
         "borderBottomRightRadius": 12,
         "borderTopLeftRadius": 12,
         "borderTopRightRadius": 12,
-        "paddingBottom": 16,
-        "paddingLeft": 16,
-        "paddingRight": 16,
-        "paddingTop": 16,
+        "paddingBottom": 8,
+        "paddingLeft": 8,
+        "paddingRight": 8,
+        "paddingTop": 8,
       },
       Object {
         "backgroundColor": "#292a2b",

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

@@ -8,10 +8,10 @@ exports[`StyledCard renders correct style 1`] = `
       "borderBottomRightRadius": 12,
       "borderTopLeftRadius": 12,
       "borderTopRightRadius": 12,
-      "paddingBottom": 16,
-      "paddingLeft": 16,
-      "paddingRight": 16,
-      "paddingTop": 16,
+      "paddingBottom": 8,
+      "paddingLeft": 8,
+      "paddingRight": 8,
+      "paddingTop": 8,
     }
   }
 />

package/src/components/Card/index.tsx

@@ -1,8 +1,21 @@
-import React from 'react';
-import { ViewProps } from 'react-native';
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import { StyledCard } from './StyledCard';
 
-interface CardProps extends ViewProps {}
+interface CardProps extends ViewProps {
+  /**
+   * Card's content.
+   */
+  children?: ReactNode;
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
 
 const Card = (props: CardProps): JSX.Element => <StyledCard {...props} />;
 

package/src/components/Divider/StyledDivider.tsx

@@ -8,7 +8,7 @@ const StyledDivider = styled(View)<{
   themeMarginVertical?: MarginSize;
 }>`
   border-bottom-width: ${({ theme }) =>
-    theme.__hd__.divider.borderWiths.default};
+    theme.__hd__.divider.borderWidths.default};
   border-bottom-color: ${({ theme }) => theme.__hd__.divider.colors.default};
   max-width: 100%;
 

package/src/components/Divider/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import { StyledDivider } from './StyledDivider';
 
-interface DividerProps {
+interface DividerProps extends ViewProps {
   /**
    * Horizontal margin size. There is no margin by default.
    */
@@ -10,12 +11,29 @@ interface DividerProps {
    * Vertical margin size. There is no margin by default.
    */
   marginVertical?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
 }
 
-const Divider = ({ marginHorizontal, marginVertical }: DividerProps) => (
+const Divider = ({
+  marginHorizontal,
+  marginVertical,
+  style,
+  testID,
+  ...nativeProps
+}: DividerProps) => (
   <StyledDivider
     themeMarginHorizontal={marginHorizontal}
     themeMarginVertical={marginVertical}
+    style={style}
+    testID={testID}
+    {...nativeProps}
   />
 );
 

package/src/components/FAB/AnimatedFABIcon.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+import { IconProps } from '../Icon';
+import { StyledFABIcon } from './StyledFABIcon';
+
+const AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
+
+type Props = {
+  active?: boolean;
+} & IconProps;
+
+const AnimatedFABIcon = ({ active, ...iconProps }: Props) => {
+  const rotateAnimation = useRef<Animated.Value>(
+    new Animated.Value(active ? 1 : 0)
+  );
+  useEffect(() => {
+    const animation = Animated.timing(rotateAnimation.current, {
+      toValue: active ? 1 : 0,
+      useNativeDriver: true,
+    });
+
+    animation.start();
+
+    return () => {
+      animation.stop();
+    };
+  }, [active]);
+
+  const interpolatedRotateAnimation = rotateAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '-45deg'],
+  });
+
+  return (
+    <Animated.View
+      style={StyleSheet.flatten([
+        {
+          transform: [{ rotate: interpolatedRotateAnimation }],
+        },
+      ])}
+    >
+      <AnimatedIcons {...iconProps} />
+    </Animated.View>
+  );
+};
+
+export { AnimatedFABIcon };

package/src/components/FAB/StyledFABContainer.tsx

@@ -0,0 +1,14 @@
+import { TouchableHighlight, TouchableHighlightProps } from 'react-native';
+import styled from 'styled-components-native';
+
+const StyledFABContainer = styled(TouchableHighlight)<TouchableHighlightProps>`
+  height: ${({ theme }) => theme.__hd__.fab.sizes.height};
+  width: ${({ theme }) => theme.__hd__.fab.sizes.width};
+  background-color: ${({ theme }) => theme.__hd__.fab.colors.buttonBackground};
+  border-radius: 999px;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+`;
+
+export { StyledFABContainer };

package/src/components/FAB/StyledFABIcon.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components-native';
+import Icon, { IconProps } from '../Icon';
+
+const StyledFABIcon = styled(Icon)<IconProps>`
+  color: ${({ theme }) => theme.__hd__.fab.colors.icon};
+  font-size: ${({ theme }) => theme.__hd__.fab.fontSizes.default};
+`;
+
+export { StyledFABIcon };

package/src/components/FAB/__tests__/AnimatedFABIcon.spec.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, theme } from '../../../index';
+import { AnimatedFABIcon } from '../AnimatedFABIcon';
+
+describe('AnimatedFABIcon', () => {
+  it.each`
+    active
+    ${true}
+    ${false}
+  `('renders correctly when isActive is $active', ({ active }) => {
+    const { toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <AnimatedFABIcon active={active} icon="add" />
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/FAB/__tests__/StyledFABContainer.spec.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, theme, Typography } from '../../../index';
+import { StyledFABContainer } from '../StyledFABContainer';
+
+describe('StyledFABContainer', () => {
+  it('renders correctly', () => {
+    const { toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <StyledFABContainer>
+          <Typography.Text> button </Typography.Text>
+        </StyledFABContainer>
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/FAB/__tests__/StyledFABIcon.spec.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, theme } from '../../../index';
+import { StyledFABIcon } from '../StyledFABIcon';
+
+describe('StyledFABIcon', () => {
+  it('renders correctly', () => {
+    const { toJSON } = render(
+      <ThemeProvider theme={theme}>
+        <StyledFABIcon icon="add" />
+      </ThemeProvider>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});