@hero-design/rn 7.25.1 → 7.27.0

package/src/components/Avatar/StyledAvatar.tsx

@@ -12,25 +12,12 @@ type ThemeSize =
   | 'xxxxxlarge';
 type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
 
-const StyledPressable = styled(TouchableOpacity)<{
+const StyledWrapper = styled(TouchableOpacity)<{
   themeSize: ThemeSize;
   themeIntent: ThemeIntent;
 }>(({ themeSize, themeIntent, theme }) => ({
-  borderWidth: theme.__hd__.avatar.borderWidths.default,
   borderRadius: theme.__hd__.avatar.radii.rounded,
-  borderColor: theme.__hd__.avatar.colors[themeIntent],
-  width: theme.__hd__.avatar.sizes[themeSize],
-  height: theme.__hd__.avatar.sizes[themeSize],
-  overflow: 'hidden',
-}));
-
-const StyledView = styled(View)<{
-  themeSize: ThemeSize;
-  themeIntent: ThemeIntent;
-}>(({ themeSize, themeIntent, theme }) => ({
-  borderWidth: theme.__hd__.avatar.borderWidths.default,
-  borderRadius: theme.__hd__.avatar.radii.rounded,
-  borderColor: theme.__hd__.avatar.colors[themeIntent],
+  backgroundColor: theme.__hd__.avatar.colors[themeIntent],
   width: theme.__hd__.avatar.sizes[themeSize],
   height: theme.__hd__.avatar.sizes[themeSize],
   overflow: 'hidden',
@@ -46,10 +33,10 @@ const StyledTextWrapper = styled(View)(() => ({
 
 const StyledText = styled(Text)<{
   themeSize: ThemeSize;
-  themeIntent: ThemeIntent;
-}>(({ themeSize, themeIntent, theme }) => ({
+}>(({ themeSize, theme }) => ({
+  fontFamily: theme.__hd__.avatar.fonts.default,
   fontSize: theme.__hd__.avatar.fontSizes[themeSize],
-  color: theme.__hd__.avatar.colors[themeIntent],
+  color: theme.__hd__.avatar.colors.text,
   overflow: 'hidden',
 }));
 
@@ -60,10 +47,4 @@ const StyledImage = styled(Image)<{
   height: theme.__hd__.avatar.sizes[themeSize],
 }));
 
-export {
-  StyledPressable,
-  StyledView,
-  StyledImage,
-  StyledTextWrapper,
-  StyledText,
-};
+export { StyledWrapper, StyledImage, StyledTextWrapper, StyledText };

package/src/components/Avatar/__tests__/StyledAvatar.spec.tsx

@@ -1,25 +1,11 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import {
-  StyledView,
-  StyledPressable,
-  StyledImage,
-  StyledText,
-} from '../StyledAvatar';
+import { StyledWrapper, StyledImage, StyledText } from '../StyledAvatar';
 
 describe('StyledPressable', () => {
   it('renders correct style', () => {
     const { toJSON } = renderWithTheme(
-      <StyledPressable themeIntent="primary" themeSize="small" />
-    );
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
-
-describe('StyledView', () => {
-  it('renders correct style', () => {
-    const { toJSON } = renderWithTheme(
-      <StyledView themeIntent="primary" themeSize="small" />
+      <StyledWrapper themeIntent="primary" themeSize="small" />
     );
     expect(toJSON()).toMatchSnapshot();
   });
@@ -29,9 +15,7 @@ describe('StyledText', () => {
   it('renders correct style', () => {
     const text = 'MD';
     const { toJSON } = renderWithTheme(
-      <StyledText themeSize="small" themeIntent="primary">
-        {text}
-      </StyledText>
+      <StyledText themeSize="small">{text}</StyledText>
     );
     expect(toJSON()).toMatchSnapshot();
   });

package/src/components/Avatar/__tests__/__snapshots__/StyledAvatar.spec.tsx.snap

@@ -35,9 +35,8 @@ exports[`StyledPressable renders correct style 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Object {
-      "borderColor": "#401960",
+      "backgroundColor": "#401960",
       "borderRadius": 999,
-      "borderWidth": 1,
       "height": 32,
       "opacity": 1,
       "overflow": "hidden",
@@ -52,36 +51,16 @@ exports[`StyledText renders correct style 1`] = `
   style={
     Array [
       Object {
-        "color": "#401960",
+        "color": "#ffffff",
+        "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 16,
         "overflow": "hidden",
       },
       undefined,
     ]
   }
-  themeIntent="primary"
   themeSize="small"
 >
   MD
 </Text>
 `;
-
-exports[`StyledView renders correct style 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "borderColor": "#401960",
-        "borderRadius": 999,
-        "borderWidth": 1,
-        "height": 32,
-        "overflow": "hidden",
-        "width": 32,
-      },
-      undefined,
-    ]
-  }
-  themeIntent="primary"
-  themeSize="small"
-/>
-`;

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

@@ -1,29 +1,65 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Avatar renders correctly 1`] = `
+exports[`Avatar fallbacks to title when there image failed to load 1`] = `
 <View
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {
-        "borderColor": "#401960",
-        "borderRadius": 999,
-        "borderWidth": 1,
-        "height": 32,
-        "overflow": "hidden",
-        "width": 32,
-      },
-      undefined,
-    ]
+    Object {
+      "backgroundColor": "#401960",
+      "borderRadius": 999,
+      "height": 32,
+      "opacity": 1,
+      "overflow": "hidden",
+      "width": 32,
+    }
   }
-  testID="avatar"
-  themeIntent="primary"
-  themeSize="small"
 >
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "display": "flex",
+          "height": "100%",
+          "justifyContent": "center",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#ffffff",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "overflow": "hidden",
+          },
+          undefined,
+        ]
+      }
+      themeSize="small"
+    >
+      TT
+    </Text>
+  </View>
   <Image
+    onError={[Function]}
+    onLoad={[Function]}
     resizeMode="cover"
     source={
       Object {
-        "uri": "https://i.pravatar.cc/300",
+        "uri": "error URI",
       }
     }
     style={
@@ -35,16 +71,17 @@ exports[`Avatar renders correctly 1`] = `
         undefined,
       ]
     }
+    testID="avatar-image"
     themeSize="small"
   />
 </View>
 `;
 
-exports[`Avatar trigger press function correctly 1`] = `
+exports[`Avatar prioritizes source over title 1`] = `
 <View
   accessible={true}
   collapsable={false}
-  focusable={true}
+  focusable={false}
   nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -55,9 +92,8 @@ exports[`Avatar trigger press function correctly 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Object {
-      "borderColor": "#401960",
+      "backgroundColor": "#401960",
       "borderRadius": 999,
-      "borderWidth": 1,
       "height": 32,
       "opacity": 1,
       "overflow": "hidden",
@@ -67,6 +103,8 @@ exports[`Avatar trigger press function correctly 1`] = `
   testID="avatar"
 >
   <Image
+    onError={[Function]}
+    onLoad={[Function]}
     resizeMode="cover"
     source={
       Object {
@@ -82,7 +120,67 @@ exports[`Avatar trigger press function correctly 1`] = `
         undefined,
       ]
     }
+    testID="avatar-image"
     themeSize="small"
   />
 </View>
 `;
+
+exports[`Avatar shows title when there is no source 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 {
+      "backgroundColor": "#401960",
+      "borderRadius": 999,
+      "height": 32,
+      "opacity": 1,
+      "overflow": "hidden",
+      "width": 32,
+    }
+  }
+  testID="avatar"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "display": "flex",
+          "height": "100%",
+          "justifyContent": "center",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#ffffff",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "overflow": "hidden",
+          },
+          undefined,
+        ]
+      }
+      themeSize="small"
+    >
+      TT
+    </Text>
+  </View>
+</View>
+`;

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

@@ -4,23 +4,40 @@ import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Avatar from '..';
 
 describe('Avatar', () => {
-  const source = { uri: 'https://i.pravatar.cc/300' };
-  const pressFn = jest.fn();
+  it('prioritizes source over title', () => {
+    const wrapper = renderWithTheme(
+      <Avatar
+        testID="avatar"
+        source={{ uri: 'https://i.pravatar.cc/300' }}
+        title="TT"
+      />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
 
-  it('renders correctly', () => {
-    const wrapper = renderWithTheme(<Avatar testID="avatar" source={source} />);
-    expect(wrapper.queryAllByTestId('avatar')).toHaveLength(1);
+  it('shows title when there is no source', () => {
+    const wrapper = renderWithTheme(<Avatar testID="avatar" title="TT" />);
 
+    expect(wrapper.queryAllByText('TT')).toHaveLength(1);
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
 
-  it('trigger press function correctly', () => {
+  it('fallbacks to title when there image failed to load', () => {
     const wrapper = renderWithTheme(
-      <Avatar testID="avatar" source={source} onPress={pressFn} />
+      <Avatar source={{ uri: 'error URI' }} title="TT" />
     );
-    fireEvent.press(wrapper.getByTestId('avatar'));
 
+    fireEvent(wrapper.getByTestId('avatar-image'), 'error');
+    expect(wrapper.queryAllByText('TT')).toHaveLength(1);
     expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('triggers press function correctly', () => {
+    const pressFn = jest.fn();
+    const wrapper = renderWithTheme(<Avatar title="TT" onPress={pressFn} />);
+
+    fireEvent.press(wrapper.getByText('TT'));
     expect(pressFn).toBeCalled();
   });
 });

package/src/components/Avatar/index.ts

@@ -0,0 +1,6 @@
+import Avatar from './Avatar';
+import AvatarStack from './AvatarStack';
+import { useAvatarColors } from './AvatarStack/utils';
+
+export default Object.assign(Avatar, { Stack: AvatarStack });
+export { useAvatarColors };

package/src/components/Badge/__tests__/__snapshots__/Status.spec.tsx.snap

@@ -60,6 +60,7 @@ exports[`Status Badge renders correctly with intent 1`] = `
     themeFontSize="medium"
     themeFontWeight="regular"
     themeIntent="body"
+    themeTypeface="neutral"
   >
     Activity
   </Text>

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

@@ -155,6 +155,7 @@ exports[`BottomNavigation renders correctly 1`] = `
             themeFontSize="small"
             themeFontWeight="semi-bold"
             themeIntent="primary"
+            themeTypeface="neutral"
           >
             Home
           </Text>
@@ -216,6 +217,7 @@ exports[`BottomNavigation renders correctly 1`] = `
             themeFontSize="small"
             themeFontWeight="semi-bold"
             themeIntent="body"
+            themeTypeface="neutral"
           >
             Feed
           </Text>
@@ -277,6 +279,7 @@ exports[`BottomNavigation renders correctly 1`] = `
             themeFontSize="small"
             themeFontWeight="semi-bold"
             themeIntent="body"
+            themeTypeface="neutral"
           >
             Alerts
           </Text>
@@ -338,6 +341,7 @@ exports[`BottomNavigation renders correctly 1`] = `
             themeFontSize="small"
             themeFontWeight="semi-bold"
             themeIntent="body"
+            themeTypeface="neutral"
           >
             Profile
           </Text>

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

@@ -135,6 +135,7 @@ exports[`BottomSheet renders correctly with close state 1`] = `
               themeFontSize="large"
               themeFontWeight="semi-bold"
               themeIntent="body"
+              themeTypeface="neutral"
             >
               Title
             </Text>
@@ -417,6 +418,7 @@ exports[`BottomSheet renders correctly with open state 1`] = `
               themeFontSize="large"
               themeFontWeight="semi-bold"
               themeIntent="body"
+              themeTypeface="neutral"
             >
               Title
             </Text>

package/src/components/Button/UtilityButton/__tests__/__snapshots__/index.spec.tsx.snap

@@ -77,6 +77,7 @@ exports[`UtilityButton snapshot has intent primary style 1`] = `
     themeFontSize="medium"
     themeFontWeight="regular"
     themeIntent="body"
+    themeTypeface="neutral"
   >
     Settings
   </Text>
@@ -160,6 +161,7 @@ exports[`UtilityButton snapshot has intent text style 1`] = `
     themeFontSize="medium"
     themeFontWeight="regular"
     themeIntent="body"
+    themeTypeface="neutral"
   >
     Settings
   </Text>

package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap

@@ -668,6 +668,7 @@ exports[`StyledButtonText has basic-transparent style 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="basic-transparent"
 >
   Example
@@ -701,6 +702,7 @@ exports[`StyledButtonText has filled-danger style 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="filled-danger"
 >
   Example
@@ -734,6 +736,7 @@ exports[`StyledButtonText has filled-primary style 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="filled-primary"
 >
   Example
@@ -767,6 +770,7 @@ exports[`StyledButtonText has filled-secondary style 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="filled-secondary"
 >
   Example
@@ -800,6 +804,7 @@ exports[`StyledButtonText has outlined-danger style 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="outlined-danger"
 >
   Example
@@ -833,6 +838,7 @@ exports[`StyledButtonText has outlined-primary style 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="outlined-primary"
 >
   Example
@@ -866,6 +872,7 @@ exports[`StyledButtonText has outlined-secondary style 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="outlined-secondary"
 >
   Example
@@ -899,6 +906,7 @@ exports[`StyledButtonText has text-danger style 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="text-danger"
 >
   Example
@@ -932,6 +940,7 @@ exports[`StyledButtonText has text-primary style 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="text-primary"
 >
   Example
@@ -965,6 +974,7 @@ exports[`StyledButtonText has text-secondary style 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="text-secondary"
 >
   Example
@@ -999,6 +1009,7 @@ exports[`StyledButtonText renders disabled correctly 1`] = `
   themeFontSize="medium"
   themeFontWeight="regular"
   themeIntent="body"
+  themeTypeface="neutral"
   themeVariant="filled-primary"
 >
   Example

package/src/components/Calendar/__tests__/__snapshots__/CalendarRowItem.spec.tsx.snap

@@ -58,6 +58,7 @@ exports[`CalendarRowItem renders correctly 1`] = `
       themeFontSize="medium"
       themeFontWeight="regular"
       themeIntent="body"
+      themeTypeface="neutral"
     >
       10
     </Text>
@@ -140,6 +141,7 @@ exports[`CalendarRowItem renders correctly 2`] = `
       themeFontSize="medium"
       themeFontWeight="regular"
       themeIntent="subdued"
+      themeTypeface="neutral"
     >
       10
     </Text>
@@ -222,6 +224,7 @@ exports[`CalendarRowItem renders correctly when is current date 1`] = `
       themeFontSize="medium"
       themeFontWeight="regular"
       themeIntent="inverted"
+      themeTypeface="neutral"
     >
       10
     </Text>
@@ -304,6 +307,7 @@ exports[`CalendarRowItem renders correctly when selected, and is current date eq
       themeFontSize="medium"
       themeFontWeight="regular"
       themeIntent="inverted"
+      themeTypeface="neutral"
     >
       10
     </Text>
@@ -386,6 +390,7 @@ exports[`CalendarRowItem renders correctly when selected, and is current date eq
       themeFontSize="medium"
       themeFontWeight="regular"
       themeIntent="inverted"
+      themeTypeface="neutral"
     >
       10
     </Text>

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

@@ -5,7 +5,7 @@ exports[`Indicator renders correctly when intent is archived 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#ccced1",
+        "backgroundColor": "#abacaf",
         "height": "100%",
         "width": 16,
       },

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

@@ -17,7 +17,7 @@ exports[`DataCard renders correctly when intent is archived 1`] = `
     style={
       Array [
         Object {
-          "backgroundColor": "#ccced1",
+          "backgroundColor": "#abacaf",
           "height": "100%",
           "width": 16,
         },

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

@@ -31,6 +31,7 @@ exports[`Card renders correctly when intent is info 1`] = `
     themeFontSize="medium"
     themeFontWeight="regular"
     themeIntent="body"
+    themeTypeface="neutral"
   >
     Card Content
   </Text>
@@ -68,6 +69,7 @@ exports[`Card renders correctly when intent is primary 1`] = `
     themeFontSize="medium"
     themeFontWeight="regular"
     themeIntent="body"
+    themeTypeface="neutral"
   >
     Card Content
   </Text>
@@ -105,6 +107,7 @@ exports[`Card renders correctly when intent is success 1`] = `
     themeFontSize="medium"
     themeFontWeight="regular"
     themeIntent="body"
+    themeTypeface="neutral"
   >
     Card Content
   </Text>
@@ -140,6 +143,7 @@ exports[`Card renders correctly when intent is undefined 1`] = `
     themeFontSize="medium"
     themeFontWeight="regular"
     themeIntent="body"
+    themeTypeface="neutral"
   >
     Card Content
   </Text>

package/src/components/Card/index.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import DataCard from './DataCard';
 import { StyledCard, LeftDataCard } from './StyledCard';
+import { useDeprecation } from '../../utils/hooks';
 
 interface CardProps extends ViewProps {
   /**
@@ -30,16 +31,26 @@ interface CardProps extends ViewProps {
 }
 
 const Card = ({
-  variant = 'basic',
+  variant: _variant,
   intent,
   children,
   ...nativeProps
-}: CardProps): JSX.Element => (
-  <StyledCard {...nativeProps} themeVariant={variant} themeIntent={intent}>
-    {variant === 'data' && <LeftDataCard testID="data-card-indicator" />}
-    {children}
-  </StyledCard>
-);
+}: CardProps): JSX.Element => {
+  const variant: CardProps['variant'] =
+    _variant === undefined ? 'basic' : _variant;
+
+  useDeprecation(
+    "Card's variant prop is deprecated and will be removed in the next major release.\nPlease remove it or use Card.Data instead.",
+    _variant !== undefined
+  );
+
+  return (
+    <StyledCard {...nativeProps} themeVariant={variant} themeIntent={intent}>
+      {variant === 'data' && <LeftDataCard testID="data-card-indicator" />}
+      {children}
+    </StyledCard>
+  );
+};
 
 export default Object.assign(Card, {
   Data: DataCard,