@hero-design/rn 7.18.1 → 7.19.0

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

@@ -1,9 +1,11 @@
-import React, { ComponentProps } from 'react';
+import React from 'react';
 import { Text } from 'react-native';
 import { fireEvent } from '@testing-library/react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import type { ComponentProps } from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import BottomNavigation, { BottomNavigationTabType } from '..';
+import BottomNavigation from '..';
+import type { BottomNavigationTabType } from '..';
 
 const TestComponent = (
   props: Omit<

package/src/components/BottomNavigation/index.tsx

@@ -1,12 +1,9 @@
-import React, { ReactNode } from 'react';
-import {
-  TouchableWithoutFeedback,
-  StyleProp,
-  ViewStyle,
-  ViewProps,
-} from 'react-native';
+import React from 'react';
+import { TouchableWithoutFeedback } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import Icon, { IconName } from '../Icon';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import Icon from '../Icon';
 import { isHeroIcon } from '../Icon/utils';
 import {
   BottomBar,
@@ -18,6 +15,7 @@ import {
   StyledBottomBarText,
 } from './StyledBottomNavigation';
 import { isIOS } from '../../utils/helpers';
+import type { IconName } from '../Icon';
 
 export type BottomNavigationTabType = {
   key: string;

package/src/components/BottomSheet/Footer.tsx

@@ -1,5 +1,6 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { View } from 'react-native';
+import type { ReactNode } from 'react';
 import Divider from '../Divider';
 import { StyledFooter } from './StyledBottomSheet';
 

package/src/components/BottomSheet/Header.tsx

@@ -1,5 +1,6 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 import { View } from 'react-native';
+import type { ReactElement } from 'react';
 import Button from '../Button';
 import Divider from '../Divider';
 import Typography from '../Typography';

package/src/components/BottomSheet/StyledBottomSheet.tsx

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

package/src/components/BottomSheet/index.tsx

@@ -1,11 +1,7 @@
-import React, {
-  ReactElement,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import { Animated, Easing, Modal, StyleProp, ViewStyle } from 'react-native';
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Easing, Modal } from 'react-native';
+import type { ReactElement, ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import Footer from './Footer';
 import Header from './Header';
 import {

package/src/components/Button/Button.tsx

@@ -1,17 +1,16 @@
 import { useTheme } from '@emotion/react';
-import React, { ReactChild } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-
-import { IconName } from '../Icon';
+import React from 'react';
+import type { ReactChild } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import LoadingIndicator from './LoadingIndicator';
 import {
-  Intent,
   StyledButtonContainer,
   StyledButtonText,
   StyledButtonIconWrapper,
   StyledButtonIcon,
-  ThemeVariant,
 } from './StyledButton';
+import type { IconName } from '../Icon';
+import type { Intent, ThemeVariant } from './StyledButton';
 
 export interface ButtonProps {
   /**

package/src/components/Button/IconButton.tsx

@@ -1,13 +1,10 @@
 import React from 'react';
 
-import {
-  StyleProp,
-  ViewStyle,
-  TouchableOpacity,
-  TouchableOpacityProps,
-} from 'react-native';
+import { TouchableOpacity } from 'react-native';
 
-import Icon, { IconProps, IconName } from '../Icon';
+import type { StyleProp, ViewStyle, TouchableOpacityProps } from 'react-native';
+import Icon from '../Icon';
+import type { IconProps, IconName } from '../Icon';
 
 export interface IconButtonProps {
   /**

package/src/components/Button/LoadingIndicator/StyledLoadingIndicator.tsx

@@ -1,6 +1,8 @@
-import { View, ViewProps } from 'react-native';
-import styled, { ReactNativeStyle } from '@emotion/native';
-import { Theme } from '@emotion/react';
+import { View } from 'react-native';
+import styled from '@emotion/native';
+import type { ViewProps } from 'react-native';
+import type { ReactNativeStyle } from '@emotion/native';
+import type { Theme } from '@emotion/react';
 
 type Intent = 'primary' | 'secondary' | 'danger';
 

package/src/components/Button/LoadingIndicator/index.tsx

@@ -1,12 +1,6 @@
 import React, { useEffect, useRef } from 'react';
-import {
-  Animated,
-  Easing,
-  StyleSheet,
-  StyleProp,
-  ViewStyle,
-  ViewProps,
-} from 'react-native';
+import { Animated, Easing, StyleSheet } from 'react-native';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import {
   StyledLoadingDot,
   StyledLoadingIndicatorWrapper,

package/src/components/Button/StyledButton.tsx

@@ -1,7 +1,7 @@
 import { TouchableHighlight, View } from 'react-native';
-import styled, { ReactNativeStyle } from '@emotion/native';
-import { Theme } from '@emotion/react';
-
+import styled from '@emotion/native';
+import type { ReactNativeStyle } from '@emotion/native';
+import type { Theme } from '@emotion/react';
 import Icon from '../Icon';
 import Typography from '../Typography';
 
@@ -316,6 +316,5 @@ export {
   StyledButtonText,
   StyledButtonIconWrapper,
   StyledButtonIcon,
-  Intent,
-  ThemeVariant,
 };
+export type { Intent, ThemeVariant };

package/src/components/Button/UtilityButton/index.tsx

@@ -1,12 +1,13 @@
-import React, { ReactChild } from 'react';
-import { ViewProps } from 'react-native';
-
-import Icon, { IconName } from '../../Icon';
+import React from 'react';
+import type { ReactChild } from 'react';
+import type { ViewProps } from 'react-native';
+import Icon from '../../Icon';
 import {
   ButtonContainer,
   IconWrapper,
   ButtonText,
 } from './StyledUtilityButton';
+import type { IconName } from '../../Icon';
 
 export interface UtilityButtonProps extends ViewProps {
   /**

package/src/components/Button/index.tsx

@@ -1,7 +1,8 @@
-import { FunctionComponent } from 'react';
-import Button, { ButtonProps } from './Button';
+import type { FunctionComponent } from 'react';
+import Button from './Button';
 import IconButton from './IconButton';
 import UtilityButton from './UtilityButton';
+import type { ButtonProps } from './Button';
 
 interface CompoundButtonProps extends FunctionComponent<ButtonProps> {
   Icon: typeof IconButton;

package/src/components/Calendar/StyledCalendar.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/native';
-import { TouchableOpacity, View, ViewProps } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
+import type { ViewProps } from 'react-native';
 
 const StyledContainer = styled(View)(({ theme }) => ({
   backgroundColor: theme.__hd__.calendar.colors.background,

package/src/components/Card/DataCard/index.tsx

@@ -1,5 +1,6 @@
-import React, { ReactNode } from 'react';
-import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import { StyledDataCard, Indicator } from './StyledDataCard';
 
 export interface DataCardProps extends ViewProps {

package/src/components/Card/index.tsx

@@ -1,5 +1,6 @@
-import React, { ReactNode } from 'react';
-import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import DataCard from './DataCard';
 import { StyledCard, LeftDataCard } from './StyledCard';
 

package/src/components/Checkbox/StyledCheckbox.tsx

@@ -1,18 +1,48 @@
 import styled from '@emotion/native';
-import { TouchableOpacity } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
+import Icon from '../Icon';
+import Typography from '../Typography';
 
-const StyledWrapper = styled(TouchableOpacity)(({ theme, disabled }) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'center',
-  height: theme.__hd__.checkbox.sizes.base,
-  width: theme.__hd__.checkbox.sizes.base,
-  borderRadius: theme.__hd__.checkbox.radii.base,
-  borderWidth: theme.__hd__.checkbox.borderWidths.default,
-  borderColor: disabled
-    ? theme.__hd__.checkbox.colors.disabled
-    : theme.__hd__.checkbox.colors.borderColor,
-  overflow: 'hidden',
+export const StyledWrapper = styled(TouchableOpacity)<{
+  themeWithBorder: boolean;
+  themeDisabled: boolean;
+}>(({ theme, themeWithBorder, themeDisabled }) => {
+  const borderStyle = {
+    borderRadius: theme.__hd__.checkbox.radii.wrapper,
+    borderWidth: theme.__hd__.checkbox.borderWidths.wrapper,
+    padding: theme.__hd__.checkbox.space.wrapperPadding,
+    borderColor: themeDisabled
+      ? theme.__hd__.checkbox.colors.disabledBorder
+      : theme.__hd__.checkbox.colors.default,
+  };
+
+  return {
+    flexDirection: 'row',
+    ...(themeWithBorder && borderStyle),
+  };
+});
+
+export const StyledDescription = styled(Typography.Text)(({ theme }) => ({
+  paddingRight: theme.__hd__.checkbox.space.iconDescriptionPadding,
+  flex: 1,
 }));
 
-export { StyledWrapper };
+export const StyledCheckbox = styled(View)<{ themeDisabled: boolean }>(
+  ({ theme, themeDisabled }) => ({
+    flexDirection: 'row',
+    justifyContent: 'center',
+    height: theme.__hd__.checkbox.sizes.icon,
+    width: theme.__hd__.checkbox.sizes.icon,
+    borderRadius: theme.__hd__.checkbox.radii.icon,
+    borderWidth: theme.__hd__.checkbox.borderWidths.icon,
+    borderColor: themeDisabled
+      ? theme.__hd__.checkbox.colors.disabledBorder
+      : theme.__hd__.checkbox.colors.default,
+    overflow: 'hidden',
+  })
+);
+
+export const StyledCheckMark = styled(Icon)(({ theme }) => ({
+  position: 'absolute',
+  top: theme.__hd__.checkbox.space.iconTop,
+}));

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

@@ -1,10 +1,35 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { StyledWrapper } from '../StyledCheckbox';
+import { StyledWrapper, StyledCheckbox } from '../StyledCheckbox';
 
 describe('StyledWrapper', () => {
-  it('renders correct style', () => {
-    const { toJSON } = renderWithTheme(<StyledWrapper />);
+  it.each`
+    withBorder | disabled
+    ${false}   | ${false}
+    ${true}    | ${false}
+    ${true}    | ${true}
+  `(
+    'renders correctly when disabled is $disabled, withBorder is $withBorder',
+    ({ disabled, withBorder }) => {
+      const { toJSON } = renderWithTheme(
+        <StyledWrapper themeDisabled={disabled} themeWithBorder={withBorder} />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+});
+
+describe('StyledCheckbox', () => {
+  it.each`
+    disabled
+    ${true}
+    ${false}
+  `('renders correctly when disabled is $disabled', ({ disabled }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledCheckbox themeDisabled={disabled} />
+    );
+
     expect(toJSON()).toMatchSnapshot();
   });
 });

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

@@ -1,6 +1,96 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StyledWrapper renders correct style 1`] = `
+exports[`StyledCheckbox renders correctly when disabled is false 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderColor": "#001f23",
+        "borderRadius": 4,
+        "borderWidth": 2,
+        "flexDirection": "row",
+        "height": 20,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "width": 20,
+      },
+      undefined,
+    ]
+  }
+  themeDisabled={false}
+/>
+`;
+
+exports[`StyledCheckbox renders correctly when disabled is true 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderColor": "#808f91",
+        "borderRadius": 4,
+        "borderWidth": 2,
+        "flexDirection": "row",
+        "height": 20,
+        "justifyContent": "center",
+        "overflow": "hidden",
+        "width": 20,
+      },
+      undefined,
+    ]
+  }
+  themeDisabled={true}
+/>
+`;
+
+exports[`StyledWrapper 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,
+    }
+  }
+/>
+`;
+
+exports[`StyledWrapper renders correctly when disabled is false, 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": "#001f23",
+      "borderRadius": 8,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "opacity": 1,
+      "padding": 16,
+    }
+  }
+/>
+`;
+
+exports[`StyledWrapper renders correctly when disabled is true, withBorder is true 1`] = `
 <View
   accessible={true}
   collapsable={false}
@@ -15,16 +105,12 @@ exports[`StyledWrapper renders correct style 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Object {
-      "borderColor": "#8505a2",
-      "borderRadius": 4,
-      "borderWidth": 2,
-      "display": "flex",
+      "borderColor": "#808f91",
+      "borderRadius": 8,
+      "borderWidth": 1,
       "flexDirection": "row",
-      "height": 24,
-      "justifyContent": "center",
       "opacity": 1,
-      "overflow": "hidden",
-      "width": 24,
+      "padding": 16,
     }
   }
 />