@hero-design/rn 8.68.0-alpha.0 → 8.68.0

package/src/components/AnimatedScroller/__tests__/__snapshots__/ScrollablesWithFAB.spec.tsx.snap

@@ -794,7 +794,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
           {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#7622d7",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "bottom": undefined,
             "elevation": 3,
@@ -855,7 +855,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
                   },
                   [
                     {
-                      "color": "#FDFBFF",
+                      "color": "#ffffff",
                       "lineHeight": 24,
                       "textAlign": "center",
                       "textAlignVertical": "center",
@@ -882,7 +882,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
                 },
                 [
                   {
-                    "color": "#FDFBFF",
+                    "color": "#ffffff",
                     "marginHorizontal": 8,
                     "textAlign": "center",
                     "textAlignVertical": "center",
@@ -1697,7 +1697,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#7622d7",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "bottom": undefined,
         "elevation": 3,
@@ -1755,7 +1755,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
               },
               [
                 {
-                  "color": "#FDFBFF",
+                  "color": "#ffffff",
                   "lineHeight": 24,
                   "textAlign": "center",
                   "textAlignVertical": "center",
@@ -1782,7 +1782,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
             },
             [
               {
-                "color": "#FDFBFF",
+                "color": "#ffffff",
                 "marginHorizontal": 8,
                 "textAlign": "center",
                 "textAlignVertical": "center",
@@ -1956,7 +1956,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
           {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#7622d7",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "bottom": undefined,
             "elevation": 3,
@@ -2017,7 +2017,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
                   },
                   [
                     {
-                      "color": "#FDFBFF",
+                      "color": "#ffffff",
                       "lineHeight": 24,
                       "textAlign": "center",
                       "textAlignVertical": "center",
@@ -2044,7 +2044,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
                 },
                 [
                   {
-                    "color": "#FDFBFF",
+                    "color": "#ffffff",
                     "marginHorizontal": 8,
                     "textAlign": "center",
                     "textAlignVertical": "center",
@@ -2199,7 +2199,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#7622d7",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "bottom": undefined,
         "elevation": 3,
@@ -2257,7 +2257,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
               },
               [
                 {
-                  "color": "#FDFBFF",
+                  "color": "#ffffff",
                   "lineHeight": 24,
                   "textAlign": "center",
                   "textAlignVertical": "center",
@@ -2284,7 +2284,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
             },
             [
               {
-                "color": "#FDFBFF",
+                "color": "#ffffff",
                 "marginHorizontal": 8,
                 "textAlign": "center",
                 "textAlignVertical": "center",
@@ -2765,7 +2765,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
           {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#7622d7",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "bottom": undefined,
             "elevation": 3,
@@ -2826,7 +2826,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
                   },
                   [
                     {
-                      "color": "#FDFBFF",
+                      "color": "#ffffff",
                       "lineHeight": 24,
                       "textAlign": "center",
                       "textAlignVertical": "center",
@@ -2853,7 +2853,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
                 },
                 [
                   {
-                    "color": "#FDFBFF",
+                    "color": "#ffffff",
                     "marginHorizontal": 8,
                     "textAlign": "center",
                     "textAlignVertical": "center",
@@ -3315,7 +3315,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#7622d7",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "bottom": undefined,
         "elevation": 3,
@@ -3373,7 +3373,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
               },
               [
                 {
-                  "color": "#FDFBFF",
+                  "color": "#ffffff",
                   "lineHeight": 24,
                   "textAlign": "center",
                   "textAlignVertical": "center",
@@ -3400,7 +3400,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
             },
             [
               {
-                "color": "#FDFBFF",
+                "color": "#ffffff",
                 "marginHorizontal": 8,
                 "textAlign": "center",
                 "textAlignVertical": "center",

package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/StyledAvatarStack.spec.tsx.snap

@@ -38,7 +38,7 @@ exports[`StyledAvatar renders correctly with $variant 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "backgroundColor": "#7622d7",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 40,
         "left": 56,
@@ -160,7 +160,7 @@ exports[`StyledAvatar renders correctly with $variant 2`] = `
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "backgroundColor": "#7622d7",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 40,
         "left": undefined,

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

@@ -86,7 +86,7 @@ exports[`StyledPressable renders correct style 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "backgroundColor": "#7622d7",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 32,
         "opacity": 1,

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

@@ -38,7 +38,7 @@ exports[`Avatar fallbacks to title when there image failed to load 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "backgroundColor": "#7622d7",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 32,
         "opacity": 1,
@@ -177,7 +177,7 @@ exports[`Avatar prioritizes source over title 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "backgroundColor": "#7622d7",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 32,
         "opacity": 1,
@@ -270,7 +270,7 @@ exports[`Avatar shows title when there is no source 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       {
-        "backgroundColor": "#7622d7",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 32,
         "opacity": 1,

package/src/components/Badge/StyledBadge.tsx

@@ -12,23 +12,31 @@ type ThemeIntent =
 
 type ThemePadding = 'narrowContent' | 'wideContent';
 
+type ThemeSize = 'medium' | 'small';
+
 const StyledView = styled(Animated.View)<{
   themeIntent: ThemeIntent;
   themePadding: ThemePadding;
-}>(({ themeIntent, themePadding, theme }) => ({
-  height: theme.__hd__.badge.sizes.height,
-  minWidth: theme.__hd__.badge.sizes.minWidth,
+  themeSize: ThemeSize;
+}>(({ themeIntent, themePadding, themeSize, theme }) => ({
+  height: theme.__hd__.badge.sizes[themeSize].height,
+  minWidth: theme.__hd__.badge.sizes[themeSize].minWidth,
   alignItems: 'center',
   justifyContent: 'center',
   backgroundColor: theme.__hd__.badge.colors[themeIntent],
   borderRadius: theme.radii.rounded,
   paddingHorizontal:
     themePadding === 'wideContent'
-      ? theme.__hd__.badge.space.horizontalPadding
+      ? theme.__hd__.badge.space[themeSize].horizontalPadding
       : undefined,
 }));
 
-const StyledText = styled(Typography.Caption)(({ theme }) => ({
+const StyledText = styled(Typography.Caption)<{
+  themeSize: ThemeSize;
+}>(({ theme, themeSize }) => ({
+  fontSize: theme.__hd__.badge.fontSizes[themeSize],
+  lineHeight: theme.__hd__.badge.lineHeights[themeSize],
+  fontFamily: theme.__hd__.badge.fonts[themeSize],
   color: theme.__hd__.badge.colors.text,
   includeFontPadding: false,
   textAlignVertical: 'center',

package/src/components/Badge/__tests__/Badge.spec.tsx

@@ -63,4 +63,13 @@ describe('Badge', () => {
     expect(getByTestId('number-badge')).toBeDefined();
     expect(getByText('50+')).toBeDefined();
   });
+
+  it('has small style when size is small', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <Badge content="SMALL" size="small" />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('SMALL')).toBeDefined();
+  });
 });

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

@@ -15,9 +15,9 @@ exports[`Badge has danger style when intent is danger 1`] = `
         "alignItems": "center",
         "backgroundColor": "#cb300a",
         "borderRadius": 999,
-        "height": 20,
+        "height": 24,
         "justifyContent": "center",
-        "minWidth": 20,
+        "minWidth": 24,
         "opacity": 1,
         "paddingHorizontal": 8,
         "transform": [
@@ -29,6 +29,7 @@ exports[`Badge has danger style when intent is danger 1`] = `
     }
     themeIntent="danger"
     themePadding="wideContent"
+    themeSize="medium"
   >
     <Text
       allowFontScaling={false}
@@ -44,7 +45,10 @@ exports[`Badge has danger style when intent is danger 1`] = `
           [
             {
               "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
               "includeFontPadding": false,
+              "lineHeight": 16,
               "textAlign": "center",
               "textAlignVertical": "center",
             },
@@ -54,6 +58,7 @@ exports[`Badge has danger style when intent is danger 1`] = `
       }
       themeFontWeight="regular"
       themeIntent="body"
+      themeSize="medium"
     >
       DECLINED
     </Text>
@@ -96,9 +101,9 @@ exports[`Badge has info style when intent is info 1`] = `
         "alignItems": "center",
         "backgroundColor": "#355bfb",
         "borderRadius": 999,
-        "height": 20,
+        "height": 24,
         "justifyContent": "center",
-        "minWidth": 20,
+        "minWidth": 24,
         "opacity": 1,
         "paddingHorizontal": 8,
         "transform": [
@@ -110,6 +115,7 @@ exports[`Badge has info style when intent is info 1`] = `
     }
     themeIntent="info"
     themePadding="wideContent"
+    themeSize="medium"
   >
     <Text
       allowFontScaling={false}
@@ -125,7 +131,10 @@ exports[`Badge has info style when intent is info 1`] = `
           [
             {
               "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
               "includeFontPadding": false,
+              "lineHeight": 16,
               "textAlign": "center",
               "textAlignVertical": "center",
             },
@@ -135,6 +144,7 @@ exports[`Badge has info style when intent is info 1`] = `
       }
       themeFontWeight="regular"
       themeIntent="body"
+      themeSize="medium"
     >
       SUBMITTED
     </Text>
@@ -175,11 +185,11 @@ exports[`Badge has info style when intent is primary 1`] = `
     style={
       {
         "alignItems": "center",
-        "backgroundColor": "#7622d7",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
-        "height": 20,
+        "height": 24,
         "justifyContent": "center",
-        "minWidth": 20,
+        "minWidth": 24,
         "opacity": 1,
         "paddingHorizontal": 8,
         "transform": [
@@ -191,6 +201,7 @@ exports[`Badge has info style when intent is primary 1`] = `
     }
     themeIntent="primary"
     themePadding="wideContent"
+    themeSize="medium"
   >
     <Text
       allowFontScaling={false}
@@ -206,7 +217,10 @@ exports[`Badge has info style when intent is primary 1`] = `
           [
             {
               "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
               "includeFontPadding": false,
+              "lineHeight": 16,
               "textAlign": "center",
               "textAlignVertical": "center",
             },
@@ -216,6 +230,7 @@ exports[`Badge has info style when intent is primary 1`] = `
       }
       themeFontWeight="regular"
       themeIntent="body"
+      themeSize="medium"
     >
       PRIMARY
     </Text>
@@ -243,6 +258,92 @@ exports[`Badge has info style when intent is primary 1`] = `
 </View>
 `;
 
+exports[`Badge has small style when size is small 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#cb300a",
+        "borderRadius": 999,
+        "height": 16,
+        "justifyContent": "center",
+        "minWidth": 16,
+        "opacity": 1,
+        "paddingHorizontal": 4,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+    themeIntent="danger"
+    themePadding="wideContent"
+    themeSize="small"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 12,
+            "letterSpacing": 0.36,
+            "lineHeight": 16,
+          },
+          [
+            {
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 8,
+              "includeFontPadding": false,
+              "lineHeight": 10,
+              "textAlign": "center",
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeSize="small"
+    >
+      SMALL
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`Badge has success style when intent is success 1`] = `
 <View
   style={
@@ -258,9 +359,9 @@ exports[`Badge has success style when intent is success 1`] = `
         "alignItems": "center",
         "backgroundColor": "#017d6d",
         "borderRadius": 999,
-        "height": 20,
+        "height": 24,
         "justifyContent": "center",
-        "minWidth": 20,
+        "minWidth": 24,
         "opacity": 1,
         "paddingHorizontal": 8,
         "transform": [
@@ -272,6 +373,7 @@ exports[`Badge has success style when intent is success 1`] = `
     }
     themeIntent="success"
     themePadding="wideContent"
+    themeSize="medium"
   >
     <Text
       allowFontScaling={false}
@@ -287,7 +389,10 @@ exports[`Badge has success style when intent is success 1`] = `
           [
             {
               "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
               "includeFontPadding": false,
+              "lineHeight": 16,
               "textAlign": "center",
               "textAlignVertical": "center",
             },
@@ -297,6 +402,7 @@ exports[`Badge has success style when intent is success 1`] = `
       }
       themeFontWeight="regular"
       themeIntent="body"
+      themeSize="medium"
     >
       APPROVED
     </Text>
@@ -339,9 +445,9 @@ exports[`Badge has warning style when intent is warning 1`] = `
         "alignItems": "center",
         "backgroundColor": "#ac5d00",
         "borderRadius": 999,
-        "height": 20,
+        "height": 24,
         "justifyContent": "center",
-        "minWidth": 20,
+        "minWidth": 24,
         "opacity": 1,
         "paddingHorizontal": 8,
         "transform": [
@@ -353,6 +459,7 @@ exports[`Badge has warning style when intent is warning 1`] = `
     }
     themeIntent="warning"
     themePadding="wideContent"
+    themeSize="medium"
   >
     <Text
       allowFontScaling={false}
@@ -368,7 +475,10 @@ exports[`Badge has warning style when intent is warning 1`] = `
           [
             {
               "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
               "includeFontPadding": false,
+              "lineHeight": 16,
               "textAlign": "center",
               "textAlignVertical": "center",
             },
@@ -378,6 +488,7 @@ exports[`Badge has warning style when intent is warning 1`] = `
       }
       themeFontWeight="regular"
       themeIntent="body"
+      themeSize="medium"
     >
       PENDING
     </Text>
@@ -420,9 +531,9 @@ exports[`Badge renders correctly with custom props 1`] = `
         "alignItems": "center",
         "backgroundColor": "#017d6d",
         "borderRadius": 999,
-        "height": 20,
+        "height": 24,
         "justifyContent": "center",
-        "minWidth": 20,
+        "minWidth": 24,
         "opacity": 1,
         "paddingHorizontal": 8,
         "transform": [
@@ -435,6 +546,7 @@ exports[`Badge renders correctly with custom props 1`] = `
     testID="number-badge"
     themeIntent="success"
     themePadding="wideContent"
+    themeSize="medium"
   >
     <Text
       allowFontScaling={false}
@@ -450,7 +562,10 @@ exports[`Badge renders correctly with custom props 1`] = `
           [
             {
               "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
               "includeFontPadding": false,
+              "lineHeight": 16,
               "textAlign": "center",
               "textAlignVertical": "center",
             },
@@ -460,6 +575,7 @@ exports[`Badge renders correctly with custom props 1`] = `
       }
       themeFontWeight="regular"
       themeIntent="body"
+      themeSize="medium"
     >
       50+
     </Text>

package/src/components/Badge/index.tsx

@@ -4,7 +4,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import { StyledView, StyledText } from './StyledBadge';
 import BadgeStatus from './Status';
 
-interface BadgeProps extends React.ComponentProps<typeof Animated.View> {
+export interface BadgeProps extends React.ComponentProps<typeof Animated.View> {
   /**
    * Content of the Badge.
    */
@@ -29,6 +29,10 @@ interface BadgeProps extends React.ComponentProps<typeof Animated.View> {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Size of the badge
+   */
+  size?: 'medium' | 'small';
 }
 
 const DEFAULT_MAX_NUMBER = 99;
@@ -43,6 +47,7 @@ const Badge = ({
   intent = 'danger',
   style,
   testID,
+  size = 'medium',
   ...nativeProps
 }: BadgeProps): JSX.Element => {
   const { current: opacity } = React.useRef<Animated.Value>(
@@ -74,6 +79,7 @@ const Badge = ({
       {...nativeProps}
       themeIntent={intent}
       themePadding={getPaddingState(content)}
+      themeSize={size}
       style={[
         {
           opacity,
@@ -90,7 +96,7 @@ const Badge = ({
       ]}
       testID={testID}
     >
-      <StyledText>{content}</StyledText>
+      <StyledText themeSize={size}>{content}</StyledText>
     </StyledView>
   );
 };

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

@@ -72,7 +72,7 @@ exports[`BottomNavigation renders correctly 1`] = `
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
-              "shadowColor": "#7622d7",
+              "shadowColor": "#401960",
               "shadowOffset": {
                 "height": 3,
                 "width": 0,
@@ -139,7 +139,7 @@ exports[`BottomNavigation renders correctly 1`] = `
               style={
                 [
                   {
-                    "color": "#7622d7",
+                    "color": "#401960",
                     "fontSize": 24,
                   },
                   undefined,
@@ -155,7 +155,7 @@ exports[`BottomNavigation renders correctly 1`] = `
               style={
                 [
                   {
-                    "color": "#7622d7",
+                    "color": "#401960",
                     "fontFamily": "BeVietnamPro-SemiBold",
                     "fontSize": 12,
                     "letterSpacing": 0.24,