@hero-design/rn 7.18.0 → 7.19.0

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

@@ -1,7 +1,9 @@
-import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 import styled from '@emotion/native';
+import type { TouchableOpacityProps } from 'react-native';
 import Typography from '../../Typography';
-import Icon, { IconProps } from '../../Icon';
+import Icon from '../../Icon';
+import type { IconProps } from '../../Icon';
 
 const StyledActionItem = styled(TouchableOpacity)<TouchableOpacityProps>(
   ({ theme }) => ({

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, View, StyleProp, ViewStyle } from 'react-native';
-import { IconName } from '../../Icon';
-import ActionItem, { ActionItemProps } from './ActionItem';
+import { Animated, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import ActionItem from './ActionItem';
 import {
   StyledBackdrop,
   StyledContainer,
@@ -9,6 +9,8 @@ import {
   StyledHeaderText,
   StyledActionGroupContainer,
 } from './StyledActionGroup';
+import type { IconName } from '../../Icon';
+import type { ActionItemProps } from './ActionItem';
 
 type ActionItemsContainerProps = {
   style?: StyleProp<ViewStyle>;

package/src/components/FAB/AnimatedFABIcon.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { Animated, StyleSheet } from 'react-native';
-import { IconProps } from '../Icon';
 import { StyledFABIcon } from './StyledFAB';
+import type { IconProps } from '../Icon';
 
 const AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
 

package/src/components/FAB/FAB.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import { AnimatedFABIcon } from './AnimatedFABIcon';
 import { StyledFABContainer, StyledFABIcon, StyledFABText } from './StyledFAB';
-import { IconName } from '../Icon';
+import type { IconName } from '../Icon';
 
 export interface FABProps {
   /**

package/src/components/FAB/StyledFAB.tsx

@@ -1,11 +1,8 @@
-import {
-  Text,
-  TextProps,
-  TouchableHighlight,
-  TouchableHighlightProps,
-} from 'react-native';
+import { Text, TouchableHighlight } from 'react-native';
 import styled from '@emotion/native';
-import Icon, { IconProps } from '../Icon';
+import type { TextProps, TouchableHighlightProps } from 'react-native';
+import Icon from '../Icon';
+import type { IconProps } from '../Icon';
 
 const StyledFABContainer = styled(TouchableHighlight)<TouchableHighlightProps>(
   ({ theme }) => ({

package/src/components/Icon/AnimatedIcon.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useRef, ComponentProps } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Animated, Easing } from 'react-native';
+import type { ComponentProps } from 'react';
 import StyledHeroIcon from './HeroIcon';
 
 type AnimatedIconProps = ComponentProps<typeof StyledHeroIcon>;

package/src/components/Icon/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, TextStyle } from 'react-native';
+import type { StyleProp, TextStyle } from 'react-native';
 import IconList from './IconList';
 import HeroIcon from './HeroIcon';
 import AnimatedIcon from './AnimatedIcon';

package/src/components/List/BasicListItem.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-
-import { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import { useTheme } from '../../theme';
-import Icon, { IconName } from '../Icon';
+import Icon from '../Icon';
 import Typography from '../Typography';
 import {
   StyledPrefixContainer,
@@ -10,6 +9,7 @@ import {
   StyledTitleContainer,
   StyledListItemContainer,
 } from './StyledBasicListItem';
+import type { IconName } from '../Icon';
 
 export interface ListItemProps {
   /**

package/src/components/List/ListItem.tsx

@@ -1,8 +1,10 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 
-import { StyleProp, ViewStyle, View } from 'react-native';
+import { View } from 'react-native';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import { useTheme } from '../../theme';
-import Icon, { IconName } from '../Icon';
+import Icon from '../Icon';
 import Typography from '../Typography';
 import {
   StyledListItemContainer,
@@ -13,6 +15,7 @@ import {
   StyledSuffixContainer,
   StyledTitleContainer,
 } from './StyledListItem';
+import type { IconName } from '../Icon';
 
 export interface ListItemProps {
   /**

package/src/components/List/StyledListItem.tsx

@@ -31,8 +31,9 @@ const StyledListItemContainer = styled(TouchableHighlight)<{
         borderRadius: theme.__hd__.list.radii.card,
         shadowColor: theme.colors.shadow,
         shadowRadius: theme.__hd__.list.radii.cardShadow,
-        shadowOffset: theme.__hd__.list.offsets.cardShadow,
+        shadowOffset: theme.__hd__.list.shadows.cardOffset,
         shadowOpacity: theme.__hd__.list.opacity.cardShadow,
+        elevation: theme.__hd__.list.shadows.cardElevation,
       };
     default:
       return sharedStyles;

package/src/components/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -731,7 +731,9 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
               Object {
                 "backgroundColor": "#8505a2",
                 "borderRadius": 999,
+                "display": "flex",
                 "height": 28.799999999999997,
+                "justifyContent": "center",
                 "paddingHorizontal": 4,
                 "width": 56,
               },
@@ -739,39 +741,23 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
             ]
           }
           testID="switch"
-          themeChecked={true}
           themeSize="medium"
+          themeVariant="checked"
         >
           <View
+            collapsable={false}
+            nativeID="animatedComponent"
             style={
-              Array [
-                Object {
-                  "borderRadius": 999,
-                  "display": "flex",
-                  "height": 28.799999999999997,
-                  "justifyContent": "center",
-                  "width": 56,
-                },
-                undefined,
-              ]
+              Object {
+                "backgroundColor": "#ffffff",
+                "borderRadius": 999,
+                "height": 20.8,
+                "left": 27.200000000000003,
+                "width": 20.8,
+              }
             }
             themeSize="medium"
-          >
-            <View
-              collapsable={false}
-              nativeID="animatedComponent"
-              style={
-                Object {
-                  "backgroundColor": "#ffffff",
-                  "borderRadius": 999,
-                  "height": 20.8,
-                  "left": 27.200000000000003,
-                  "width": 20.8,
-                }
-              }
-              themeSize="medium"
-            />
-          </View>
+          />
         </View>
       </View>
     </View>

package/src/components/List/__tests__/__snapshots__/StyledListItem.spec.tsx.snap

@@ -102,6 +102,7 @@ exports[`ListItemContainer renders correctly themeSelected false themeVariant ca
         "alignItems": "center",
         "backgroundColor": "#ffffff",
         "borderRadius": 8,
+        "elevation": 10,
         "flexDirection": "row",
         "padding": 16,
         "shadowColor": "#ccced1",
@@ -199,6 +200,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant car
         "alignItems": "center",
         "backgroundColor": "#f3e6f6",
         "borderRadius": 8,
+        "elevation": 10,
         "flexDirection": "row",
         "padding": 16,
         "shadowColor": "#ccced1",

package/src/components/PinInput/PinCell.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import {
-  State,
   StyledCell,
   StyledCellText,
   StyledFilledMask,
   StyledMask,
 } from './StyledPinInput';
+import type { State } from './StyledPinInput';
 
 function PinCell({
   value,

package/src/components/PinInput/index.tsx

@@ -1,10 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import {
-  InteractionManager,
-  StyleProp,
-  TextInput,
-  ViewStyle,
-} from 'react-native';
+import { InteractionManager, TextInput } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import Icon from '../Icon';
 import PinCell from './PinCell';
 import {
@@ -14,8 +10,8 @@ import {
   StyledSpacer,
   StyledPinWrapper,
   StyledWrapper,
-  State,
 } from './StyledPinInput';
+import type { State } from './StyledPinInput';
 
 interface PinInputProps {
   /**

package/src/components/Progress/ProgressBar.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Animated, StyleProp, ViewStyle, ViewProps } from 'react-native';
+import { Animated } from 'react-native';
 
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import { StyledWrapper, StyledInner } from './StyledProgressBar';
 
 export interface ProgressBarProps extends ViewProps {

package/src/components/Progress/ProgressCircle.tsx

@@ -1,13 +1,7 @@
 import { useTheme } from '@emotion/react';
 import React, { useEffect, useRef } from 'react';
-import {
-  Animated,
-  View,
-  StyleSheet,
-  ViewProps,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { Animated, View, StyleSheet } from 'react-native';
+import type { ViewProps, StyleProp, ViewStyle } from 'react-native';
 import {
   StyledContainer,
   StyledDonutCircle,
@@ -16,8 +10,8 @@ import {
   StyledHalfCircleWrapper,
   StyledStrokeEnd,
 } from './StyledProgressCircle';
-import { ThemeIntent } from './types';
 import Typography from '../Typography';
+import type { ThemeIntent } from './types';
 
 export interface ProgressCircleProps extends ViewProps {
   /**

package/src/components/Progress/StyledProgressBar.tsx

@@ -1,7 +1,7 @@
-import { Animated, View, ViewProps } from 'react-native';
+import { Animated, View } from 'react-native';
 import styled from '@emotion/native';
-
-import { ThemeIntent } from './types';
+import type { ViewProps } from 'react-native';
+import type { ThemeIntent } from './types';
 
 const StyledWrapper = styled(View)<ViewProps>(({ theme }) => ({
   height: theme.__hd__.progress.sizes.barHeight,

package/src/components/Progress/StyledProgressCircle.tsx

@@ -1,7 +1,7 @@
-import { View, ViewProps } from 'react-native';
+import { View } from 'react-native';
 import styled from '@emotion/native';
-
-import { ThemeIntent } from './types';
+import type { ViewProps } from 'react-native';
+import type { ThemeIntent } from './types';
 
 const INNER_CIRCLE_PERCENTAGE = 0.85; // 85% width according to design
 const STROKE_WIDTH_PERCENTAGE = 0.075; // 7.5% width  according to design

package/src/components/Radio/Radio.tsx

@@ -1,7 +1,9 @@
-import React, { ReactElement } from 'react';
-import { StyleProp, View, ViewStyle } from 'react-native';
-import Typography from '../Typography';
-import { Circle, InnerCircle, Wrapper } from './StyledRadio';
+import React from 'react';
+import type { ReactElement } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import List from '../List';
+import { Circle, InnerCircle } from './StyledRadio';
 
 export interface RadioProps {
   /**
@@ -26,6 +28,15 @@ export interface RadioProps {
   testID?: string;
 }
 
+const RadioCircle = ({
+  checked,
+  text,
+}: Pick<RadioProps, 'text' | 'checked'>) => (
+  <Circle>
+    {checked && <InnerCircle testID={`${text}-selected-circle`} />}
+  </Circle>
+);
+
 const Radio = ({
   text,
   checked = false,
@@ -33,19 +44,14 @@ const Radio = ({
   style,
   testID,
 }: RadioProps): ReactElement => (
-  <Wrapper
+  <List.BasicItem
     onPress={onPress}
-    themeChecked={checked}
+    selected={checked}
+    title={text}
+    suffix={<RadioCircle checked={checked} text={text} />}
     style={style}
     testID={testID}
-  >
-    <View style={{ flex: 1 }}>
-      <Typography.Text fontSize="large">{text}</Typography.Text>
-    </View>
-    <Circle themeChecked={checked}>
-      {checked && <InnerCircle testID={`${text}-selected-circle`} />}
-    </Circle>
-  </Wrapper>
+  />
 );
 
 export default Radio;

package/src/components/Radio/RadioGroup.tsx

@@ -1,8 +1,10 @@
-import React, { ReactElement } from 'react';
-import { StyleProp, View, ViewStyle } from 'react-native';
+import React from 'react';
+import { View } from 'react-native';
+import type { ReactElement } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import Radio from './Radio';
 import { Spacer } from './StyledRadio';
-import { OptionType } from './types';
+import type { OptionType } from './types';
 
 export interface RadioGroupProps<T> {
   /**

package/src/components/Radio/StyledRadio.tsx

@@ -1,42 +1,25 @@
-import { View, TouchableOpacity } from 'react-native';
+import { View } from 'react-native';
 import styled from '@emotion/native';
 
-const Wrapper = styled(TouchableOpacity)<{ themeChecked: boolean }>(
-  ({ theme, themeChecked }) => ({
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    borderRadius: theme.__hd__.radio.radii.wrapper,
-    padding: theme.__hd__.radio.space.wrapperPadding,
-    backgroundColor: themeChecked
-      ? theme.__hd__.radio.colors.checkedWrapper
-      : theme.__hd__.radio.colors.wrapper,
-  })
-);
-
-const Circle = styled(View)<{ themeChecked: boolean }>(
-  ({ theme, themeChecked }) => ({
-    height: theme.__hd__.radio.sizes.circle,
-    width: theme.__hd__.radio.sizes.circle,
-    borderRadius: theme.radii.rounded,
-    borderWidth: theme.__hd__.radio.borderWidths.circle,
-    borderColor: themeChecked
-      ? theme.__hd__.radio.colors.checkedCircle
-      : theme.__hd__.radio.colors.circle,
-    alignItems: 'center',
-    justifyContent: 'center',
-  })
-);
+const Circle = styled(View)(({ theme }) => ({
+  height: theme.__hd__.radio.sizes.circle,
+  width: theme.__hd__.radio.sizes.circle,
+  borderRadius: theme.radii.rounded,
+  borderWidth: theme.__hd__.radio.borderWidths.circle,
+  borderColor: theme.__hd__.radio.colors.circle,
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
 
 const InnerCircle = styled(View)(({ theme }) => ({
   height: theme.__hd__.radio.sizes.innerCircle,
   width: theme.__hd__.radio.sizes.innerCircle,
   borderRadius: theme.radii.rounded,
-  backgroundColor: theme.__hd__.radio.colors.checkedCircle,
+  backgroundColor: theme.__hd__.radio.colors.circle,
 }));
 
 const Spacer = styled(View)(({ theme }) => ({
   marginTop: theme.__hd__.radio.space.groupTopMargin,
 }));
 
-export { Wrapper, Circle, InnerCircle, Spacer };
+export { Circle, InnerCircle, Spacer };

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

@@ -2,10 +2,13 @@
 
 exports[`rendering renders correctly when checked 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
   accessible={true}
-  collapsable={false}
   focusable={true}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -14,22 +17,26 @@ exports[`rendering renders correctly when checked 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#f3e6f6",
-      "borderRadius": 4,
-      "flexDirection": "row",
-      "justifyContent": "space-between",
-      "opacity": 1,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#f3e6f6",
+        "flexDirection": "row",
+        "opacity": 1,
+        "padding": 16,
+      },
+      undefined,
+    ]
   }
 >
   <View
     style={
-      Object {
-        "flex": 1,
-      }
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
     }
   >
     <Text
@@ -56,43 +63,56 @@ exports[`rendering renders correctly when checked 1`] = `
     style={
       Array [
         Object {
-          "alignItems": "center",
-          "borderColor": "#8505a2",
-          "borderRadius": 999,
-          "borderWidth": 2,
-          "height": 20,
-          "justifyContent": "center",
-          "width": 20,
+          "marginLeft": 8,
         },
         undefined,
       ]
     }
-    themeChecked={true}
   >
     <View
       style={
         Array [
           Object {
-            "backgroundColor": "#8505a2",
+            "alignItems": "center",
+            "borderColor": "#001f23",
             "borderRadius": 999,
-            "height": 10,
-            "width": 10,
+            "borderWidth": 2,
+            "height": 20,
+            "justifyContent": "center",
+            "width": 20,
           },
           undefined,
         ]
       }
-      testID="Option A-selected-circle"
-    />
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#001f23",
+              "borderRadius": 999,
+              "height": 10,
+              "width": 10,
+            },
+            undefined,
+          ]
+        }
+        testID="Option A-selected-circle"
+      />
+    </View>
   </View>
 </View>
 `;
 
 exports[`rendering renders correctly when not checked 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
   accessible={true}
-  collapsable={false}
   focusable={true}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -101,22 +121,26 @@ exports[`rendering renders correctly when not checked 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#ffffff",
-      "borderRadius": 4,
-      "flexDirection": "row",
-      "justifyContent": "space-between",
-      "opacity": 1,
-      "padding": 16,
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "flexDirection": "row",
+        "opacity": 1,
+        "padding": 16,
+      },
+      undefined,
+    ]
   }
 >
   <View
     style={
-      Object {
-        "flex": 1,
-      }
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
     }
   >
     <Text
@@ -143,18 +167,28 @@ exports[`rendering renders correctly when not checked 1`] = `
     style={
       Array [
         Object {
-          "alignItems": "center",
-          "borderColor": "#000000",
-          "borderRadius": 999,
-          "borderWidth": 2,
-          "height": 20,
-          "justifyContent": "center",
-          "width": 20,
+          "marginLeft": 8,
         },
         undefined,
       ]
     }
-    themeChecked={false}
-  />
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderColor": "#001f23",
+            "borderRadius": 999,
+            "borderWidth": 2,
+            "height": 20,
+            "justifyContent": "center",
+            "width": 20,
+          },
+          undefined,
+        ]
+      }
+    />
+  </View>
 </View>
 `;