@hero-design/rn 7.18.0 → 7.19.0

package/src/components/Checkbox/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Checkbox renders correctly 1`] = `
+exports[`Checkbox renders correctly when checked is false and there is no description 1`] = `
 <View
   accessible={true}
   collapsable={false}
@@ -15,27 +15,166 @@ exports[`Checkbox renders correctly 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Object {
-      "borderColor": "#8505a2",
-      "borderRadius": 4,
-      "borderWidth": 2,
-      "display": "flex",
       "flexDirection": "row",
-      "height": 24,
-      "justifyContent": "center",
       "opacity": 1,
-      "overflow": "hidden",
-      "width": 24,
     }
   }
-  testID="checkbox"
-/>
+>
+  <View
+    style={
+      Array [
+        Object {
+          "borderColor": "#001f23",
+          "borderRadius": 4,
+          "borderWidth": 2,
+          "flexDirection": "row",
+          "height": 20,
+          "justifyContent": "center",
+          "overflow": "hidden",
+          "width": 20,
+        },
+        undefined,
+      ]
+    }
+    themeDisabled={false}
+  />
+</View>
+`;
+
+exports[`Checkbox renders correctly when checked is true and there is no description 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "flexDirection": "row",
+      "opacity": 1,
+    }
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "borderColor": "#001f23",
+          "borderRadius": 4,
+          "borderWidth": 2,
+          "flexDirection": "row",
+          "height": 20,
+          "justifyContent": "center",
+          "overflow": "hidden",
+          "width": 20,
+        },
+        undefined,
+      ]
+    }
+    themeDisabled={false}
+  >
+    <HeroIcon
+      name="box-check"
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontSize": 24,
+          },
+          Array [
+            Object {
+              "position": "absolute",
+              "top": -3,
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="check-mark"
+      themeIntent="text"
+      themeSize="medium"
+    />
+  </View>
+</View>
+`;
+
+exports[`Checkbox renders correctly when disabled is false, withBorder is false 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "flexDirection": "row",
+      "opacity": 1,
+    }
+  }
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        Array [
+          Object {
+            "flex": 1,
+            "paddingRight": 12,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    Please agree to our privacy policy
+  </Text>
+  <View
+    style={
+      Array [
+        Object {
+          "borderColor": "#001f23",
+          "borderRadius": 4,
+          "borderWidth": 2,
+          "flexDirection": "row",
+          "height": 20,
+          "justifyContent": "center",
+          "overflow": "hidden",
+          "width": 20,
+        },
+        undefined,
+      ]
+    }
+    themeDisabled={false}
+  />
+</View>
 `;
 
-exports[`Checkbox trigger press function correctly 1`] = `
+exports[`Checkbox renders correctly when disabled is false, withBorder is true 1`] = `
 <View
   accessible={true}
   collapsable={false}
-  focusable={true}
+  focusable={false}
   nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -46,18 +185,193 @@ exports[`Checkbox trigger press function correctly 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Object {
-      "borderColor": "#8505a2",
-      "borderRadius": 4,
-      "borderWidth": 2,
-      "display": "flex",
+      "borderColor": "#001f23",
+      "borderRadius": 8,
+      "borderWidth": 1,
       "flexDirection": "row",
-      "height": 24,
-      "justifyContent": "center",
       "opacity": 1,
-      "overflow": "hidden",
-      "width": 24,
+      "padding": 16,
     }
   }
-  testID="checkbox"
-/>
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        Array [
+          Object {
+            "flex": 1,
+            "paddingRight": 12,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    Please agree to our privacy policy
+  </Text>
+  <View
+    style={
+      Array [
+        Object {
+          "borderColor": "#001f23",
+          "borderRadius": 4,
+          "borderWidth": 2,
+          "flexDirection": "row",
+          "height": 20,
+          "justifyContent": "center",
+          "overflow": "hidden",
+          "width": 20,
+        },
+        undefined,
+      ]
+    }
+    themeDisabled={false}
+  />
+</View>
+`;
+
+exports[`Checkbox renders correctly when disabled is true, withBorder is false 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "flexDirection": "row",
+      "opacity": 1,
+    }
+  }
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#808f91",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        Array [
+          Object {
+            "flex": 1,
+            "paddingRight": 12,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="subdued"
+  >
+    Please agree to our privacy policy
+  </Text>
+  <View
+    style={
+      Array [
+        Object {
+          "borderColor": "#808f91",
+          "borderRadius": 4,
+          "borderWidth": 2,
+          "flexDirection": "row",
+          "height": 20,
+          "justifyContent": "center",
+          "overflow": "hidden",
+          "width": 20,
+        },
+        undefined,
+      ]
+    }
+    themeDisabled={true}
+  />
+</View>
+`;
+
+exports[`Checkbox renders correctly when disabled is true, withBorder is true 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "borderColor": "#808f91",
+      "borderRadius": 8,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "opacity": 1,
+      "padding": 16,
+    }
+  }
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "#808f91",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        Array [
+          Object {
+            "flex": 1,
+            "paddingRight": 12,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="subdued"
+  >
+    Please agree to our privacy policy
+  </Text>
+  <View
+    style={
+      Array [
+        Object {
+          "borderColor": "#808f91",
+          "borderRadius": 4,
+          "borderWidth": 2,
+          "flexDirection": "row",
+          "height": 20,
+          "justifyContent": "center",
+          "overflow": "hidden",
+          "width": 20,
+        },
+        undefined,
+      ]
+    }
+    themeDisabled={true}
+  />
+</View>
 `;

package/src/components/Checkbox/__tests__/index.spec.tsx

@@ -5,20 +5,51 @@ import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Checkbox from '..';
 
 describe('Checkbox', () => {
-  it('renders correctly', () => {
-    const wrapper = renderWithTheme(<Checkbox testID="checkbox" />);
-    expect(wrapper.queryAllByTestId('checkbox')).toHaveLength(1);
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
+  it.each`
+    withBorder | disabled
+    ${false}   | ${false}
+    ${false}   | ${true}
+    ${true}    | ${false}
+    ${true}    | ${true}
+  `(
+    'renders correctly when disabled is $disabled, withBorder is $withBorder',
+    ({ disabled, withBorder }) => {
+      const wrapper = renderWithTheme(
+        <Checkbox
+          disabled={disabled}
+          withBorder={withBorder}
+          description="Please agree to our privacy policy"
+        />
+      );
+
+      expect(
+        wrapper.getByText('Please agree to our privacy policy')
+      ).toBeTruthy();
+      expect(wrapper.toJSON()).toMatchSnapshot();
+    }
+  );
+
+  it.each`
+    checked  | length
+    ${false} | ${0}
+    ${true}  | ${1}
+  `(
+    'renders correctly when checked is $checked and there is no description',
+    ({ checked, length }) => {
+      const wrapper = renderWithTheme(<Checkbox checked={checked} />);
+
+      expect(wrapper.queryAllByTestId('check-mark')).toHaveLength(length);
+      expect(wrapper.toJSON()).toMatchSnapshot();
+    }
+  );
 
   it('trigger press function correctly', () => {
     const pressFn = jest.fn();
     const wrapper = renderWithTheme(
       <Checkbox testID="checkbox" onPress={pressFn} />
     );
-    fireEvent.press(wrapper.getByTestId('checkbox'));
 
-    expect(wrapper.toJSON()).toMatchSnapshot();
+    fireEvent.press(wrapper.getByTestId('checkbox'));
     expect(pressFn).toBeCalled();
   });
 });

package/src/components/Checkbox/index.tsx

@@ -1,14 +1,25 @@
 import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import theme from '../../theme';
-import Icon from '../Icon';
-import { StyledWrapper } from './StyledCheckbox';
+import type { StyleProp, ViewStyle } from 'react-native';
+import {
+  StyledCheckbox,
+  StyledCheckMark,
+  StyledDescription,
+  StyledWrapper,
+} from './StyledCheckbox';
 
 export interface CheckboxProps {
   /**
    * Control whether the switch is checked
    */
   checked?: boolean;
+  /**
+   * Checkbox's description.
+   */
+  description?: string;
+  /**
+   * Whether the border is shown.
+   */
+  withBorder?: boolean;
   /**
    * Whether the switch is disabled
    */
@@ -27,9 +38,11 @@ export interface CheckboxProps {
   testID?: string;
 }
 
-const CheckBox = ({
+const Checkbox = ({
   checked,
-  disabled,
+  description,
+  withBorder = false,
+  disabled = false,
   onPress,
   style,
   testID,
@@ -37,22 +50,26 @@ const CheckBox = ({
   <StyledWrapper
     onPress={onPress}
     disabled={disabled}
+    themeDisabled={disabled}
+    themeWithBorder={withBorder}
     style={style}
     testID={testID}
   >
-    {checked && (
-      <Icon
-        icon="circle-ok"
-        intent="primary"
-        size="large"
-        style={{
-          position: 'absolute',
-          top: theme.__hd__.checkbox.space.iconTop,
-          ...(disabled ? { color: theme.__hd__.checkbox.colors.disabled } : {}),
-        }}
-      />
+    {!!description && (
+      <StyledDescription intent={disabled ? 'subdued' : 'body'}>
+        {description}
+      </StyledDescription>
     )}
+    <StyledCheckbox themeDisabled={disabled}>
+      {checked && (
+        <StyledCheckMark
+          icon="box-check"
+          intent={disabled ? 'disabled-text' : 'text'}
+          testID="check-mark"
+        />
+      )}
+    </StyledCheckbox>
   </StyledWrapper>
 );
 
-export default CheckBox;
+export default Checkbox;

package/src/components/Collapse/index.tsx

@@ -1,11 +1,7 @@
-import {
-  Animated,
-  Easing,
-  StyleProp,
-  ViewProps,
-  ViewStyle,
-} from 'react-native';
-import React, { ReactNode, useCallback, useEffect } from 'react';
+import { Animated, Easing } from 'react-native';
+import React, { useCallback, useEffect } from 'react';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import type { ReactNode } from 'react';
 import {
   StyledChildWrapper,
   StyledHiddenWrapper,

package/src/components/ContentNavigator/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import { Value, Wrapper } from './StyledContentNavigator';
 import Button from '../Button';
 

package/src/components/DatePicker/DatePickerAndroid.tsx

@@ -4,7 +4,7 @@ import { TouchableOpacity, View } from 'react-native';
 import formatDate from 'date-fns/fp/format';
 
 import TextInput from '../TextInput';
-import { DatePickerProps } from './types';
+import type { DatePickerProps } from './types';
 
 const DatePickerAndroid = ({
   value,

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -7,7 +7,7 @@ import BottomSheet from '../BottomSheet';
 import TextInput from '../TextInput';
 import Typography from '../Typography';
 import { StyledPickerWrapper } from './StyledDatePicker';
-import { DatePickerProps } from './types';
+import type { DatePickerProps } from './types';
 
 const DatePickerIOS = ({
   value,

package/src/components/DatePicker/StyledDatePicker.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/native';
-import { View, ViewProps } from 'react-native';
+import { View } from 'react-native';
+import type { ViewProps } from 'react-native';
 
 const StyledPickerWrapper = styled(View)<ViewProps>(({ theme }) => ({
   height: theme.__hd__.datePicker.sizes.height,

package/src/components/DatePicker/__tests__/DatePickerIOS.spec.tsx

@@ -1,7 +1,6 @@
 import { fireEvent } from '@testing-library/react-native';
 import React from 'react';
-import { ModalProps } from 'react-native';
-
+import type { ModalProps } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import DatePickerIOS from '../DatePickerIOS';
 

package/src/components/DatePicker/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Platform } from 'react-native';
 import DatePickerAndroid from './DatePickerAndroid';
 import DatePickerIOS from './DatePickerIOS';
-import { DatePickerProps } from './types';
+import type { DatePickerProps } from './types';
 
 const DatePicker = (props: DatePickerProps) => {
   if (Platform.OS === 'ios') {

package/src/components/DatePicker/types.ts

@@ -1,4 +1,4 @@
-import { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 export interface DatePickerProps {
   /**

package/src/components/Divider/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import { StyledDivider } from './StyledDivider';
 
 interface DividerProps extends ViewProps {

package/src/components/Drawer/DragableDrawer/index.tsx

@@ -1,6 +1,7 @@
-import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Animated, PanResponder, Easing } from 'react-native';
 
+import type { ReactNode } from 'react';
 import {
   StyledDragableContainer,
   StyledDragableDrawerContainer,
@@ -11,8 +12,8 @@ import {
   calculateAnimatedToValue,
   calculateSnapPointsData,
   getOffset,
-  SnapPointsData,
 } from './helpers';
+import type { SnapPointsData } from './helpers';
 
 export interface DragableDrawerProps {
   /**

package/src/components/Drawer/StyledDrawer.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/native';
-import { ComponentProps } from 'react';
-import { Animated, Pressable, StyleSheet, View, ViewProps } from 'react-native';
+import { Animated, Pressable, StyleSheet, View } from 'react-native';
+import type { ComponentProps } from 'react';
+import type { ViewProps } from 'react-native';
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 

package/src/components/Drawer/index.tsx

@@ -1,5 +1,6 @@
-import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Animated, Easing } from 'react-native';
+import type { ReactNode } from 'react';
 import DragableDrawer from './DragableDrawer';
 
 import {

package/src/components/Empty/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-
+import type { StyleProp, ViewStyle } from 'react-native';
 import {
   StyledWrapper,
   StyledIllustration,

package/src/components/FAB/ActionGroup/ActionItem.tsx

@@ -1,5 +1,6 @@
-import React, { ComponentProps } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import Icon from '../../Icon';
 import {
   StyledActionItem,

package/src/components/FAB/ActionGroup/StyledActionGroup.tsx

@@ -1,9 +1,10 @@
-import { ComponentProps } from 'react';
-import { Animated, View, ViewProps } from 'react-native';
+import { Animated, View } from 'react-native';
 import styled from '@emotion/native';
+import type { ComponentProps } from 'react';
+import type { ViewProps } from 'react-native';
 import FAB from '../FAB';
 import Typography from '../../Typography';
-import { TextProps } from '../../Typography/Text';
+import type { TextProps } from '../../Typography/Text';
 
 const StyledContainer = styled(View)<ViewProps>({
   position: 'absolute',