@hero-design/rn 8.92.2 → 8.93.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.92.2",
+  "version": "8.93.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -38,6 +38,7 @@
     "react-native-linear-gradient": "^2.8.3",
     "react-native-pager-view": "^6.2.1",
     "react-native-safe-area-context": "^4.7.0",
+    "react-native-svg": "^15.11.2",
     "react-native-vector-icons": "^9.1.0",
     "react-native-webview": "^13.10.2"
   },
@@ -46,7 +47,7 @@
     "@babel/preset-env": "^7.20.0",
     "@babel/preset-react": "^7.20.0",
     "@babel/preset-typescript": "^7.20.0",
-    "@babel/runtime": "^7.20.0",
+    "@babel/runtime": "^7.26.10",
     "@emotion/jest": "^11.11.0",
     "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
@@ -85,6 +86,7 @@
     "react-native-linear-gradient": "2.8.3",
     "react-native-pager-view": "^6.2.1",
     "react-native-safe-area-context": "^4.7.0",
+    "react-native-svg": "^15.11.2",
     "react-native-vector-icons": "^9.1.0",
     "react-native-webview": "13.10.3",
     "react-test-renderer": "18.2.0",

package/rollup.config.mjs

@@ -34,6 +34,7 @@ export default {
     'react',
     'react-native',
     'react-native-safe-area-context',
+    'react-native-svg',
     '@react-native-community/datetimepicker',
     '@react-native-community/slider',
     'react-native-gesture-handler',

package/src/components/Badge/Count.tsx

@@ -0,0 +1,60 @@
+import { View } from 'react-native';
+import React, { useMemo } from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import type { ReactNode } from 'react';
+import { StyledCount, StyledCountText } from './StyledBadge';
+import { DEFAULT_MAX_NUMBER } from './constants';
+
+export interface CountProps extends ViewProps {
+  /*
+   * The Status Badge's content.
+   */
+  children: ReactNode;
+  /**
+   * Whether the Status Badge is visible.
+   */
+  visible?: boolean;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+  /**
+   * The content will be displayed in the badge.
+   */
+  content: number;
+  /**
+   * The maximum number displayed on the badge. If number exceeds this value, `${max}+` are displayed instead. (Only applied when content is number.)
+   */
+  max?: number;
+}
+
+const Status = ({
+  children,
+  visible = true,
+  style,
+  max = DEFAULT_MAX_NUMBER,
+  testID,
+  content: originalContent,
+  ...nativeProps
+}: CountProps): JSX.Element => {
+  const content = useMemo(() => {
+    return originalContent > max ? `${max}+` : String(originalContent);
+  }, [originalContent, max]);
+
+  return (
+    <View {...nativeProps} style={style} testID={testID}>
+      {children}
+      {visible && (
+        <StyledCount testID="count-badge">
+          <StyledCountText>{content}</StyledCountText>
+        </StyledCount>
+      )}
+    </View>
+  );
+};
+
+export default Status;

package/src/components/Badge/StyledBadge.tsx

@@ -1,4 +1,4 @@
-import { Animated } from 'react-native';
+import { Animated, View } from 'react-native';
 import styled from '@emotion/native';
 import Typography from '../Typography';
 import Icon from '../Icon';
@@ -64,10 +64,41 @@ const StyledStatus = styled(Animated.View)<{
   borderRadius: theme.radii.rounded,
 }));
 
+const StyledCount = styled(View)(({ theme }) => ({
+  backgroundColor: theme.__hd__.badge.colors.danger,
+  borderRadius: theme.__hd__.badge.radii.count,
+  minWidth: theme.__hd__.badge.sizes.count.width,
+  height: theme.__hd__.badge.sizes.count.height,
+  alignItems: 'center',
+  justifyContent: 'center',
+  textAlign: 'center',
+  textAlignVertical: 'center',
+  color: theme.__hd__.badge.colors.text,
+  display: 'flex',
+  paddingHorizontal: theme.__hd__.badge.space.countPaddingHorizontal,
+  position: 'absolute',
+  top: theme.__hd__.badge.space.statusPositionTop,
+  right: theme.__hd__.badge.space.statusPositionRight,
+}));
+
+const StyledCountText = styled(Typography.Text)(({ theme }) => ({
+  height: theme.__hd__.badge.sizes.count.height,
+  lineHeight: theme.__hd__.badge.lineHeights.count,
+  color: theme.__hd__.badge.colors.text,
+  fontSize: theme.__hd__.badge.fontSizes.count,
+}));
+
 const StyledIcon = styled(Icon)<{
   themeSize: ThemeSize;
 }>(({ themeSize, theme }) => ({
   fontSize: theme.__hd__.badge.fontSizes[themeSize],
 }));
 
-export { StyledView, StyledText, StyledStatus, StyledIcon };
+export {
+  StyledCountText,
+  StyledView,
+  StyledText,
+  StyledStatus,
+  StyledIcon,
+  StyledCount,
+};

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import BadgeCount from '../Count';
+import Icon from '../../Icon';
+
+describe('BadgeCount', () => {
+  it.each`
+    content | expectedContent
+    ${1}    | ${'1'}
+    ${12}   | ${'12'}
+    ${999}  | ${'99+'}
+  `(
+    'displays $expectedContent for content $content',
+    ({ content, expectedContent }) => {
+      const { getByText, getByTestId, toJSON } = renderWithTheme(
+        <BadgeCount content={content} testID="wrapper">
+          <Icon icon="bell-outlined" size="small" />
+        </BadgeCount>
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(getByText(expectedContent)).toBeDefined();
+      expect(getByTestId('count-badge')).toHaveStyle({
+        backgroundColor: '#cb300a',
+      });
+    }
+  );
+
+  it('should hide if visible is false', () => {
+    const { queryByTestId } = renderWithTheme(
+      <BadgeCount content={1} visible={false} testID="wrapper">
+        <Icon icon="bell-outlined" size="small" />
+      </BadgeCount>
+    );
+
+    expect(queryByTestId('count-badge')).toBeNull();
+  });
+});

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

@@ -0,0 +1,310 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BadgeCount displays 1 for content 1 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    testID="wrapper"
+  >
+    <HeroIcon
+      name="bell-outlined"
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    />
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#cb300a",
+            "borderRadius": 999,
+            "color": "#ffffff",
+            "display": "flex",
+            "height": 12,
+            "justifyContent": "center",
+            "minWidth": 12,
+            "paddingHorizontal": 2,
+            "position": "absolute",
+            "right": -2,
+            "textAlign": "center",
+            "textAlignVertical": "center",
+            "top": -2,
+          },
+          undefined,
+        ]
+      }
+      testID="count-badge"
+    >
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            [
+              {
+                "color": "#ffffff",
+                "fontSize": 6,
+                "height": 12,
+                "lineHeight": 12,
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeTypeface="neutral"
+      >
+        1
+      </Text>
+    </View>
+  </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[`BadgeCount displays 12 for content 12 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    testID="wrapper"
+  >
+    <HeroIcon
+      name="bell-outlined"
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    />
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#cb300a",
+            "borderRadius": 999,
+            "color": "#ffffff",
+            "display": "flex",
+            "height": 12,
+            "justifyContent": "center",
+            "minWidth": 12,
+            "paddingHorizontal": 2,
+            "position": "absolute",
+            "right": -2,
+            "textAlign": "center",
+            "textAlignVertical": "center",
+            "top": -2,
+          },
+          undefined,
+        ]
+      }
+      testID="count-badge"
+    >
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            [
+              {
+                "color": "#ffffff",
+                "fontSize": 6,
+                "height": 12,
+                "lineHeight": 12,
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeTypeface="neutral"
+      >
+        12
+      </Text>
+    </View>
+  </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[`BadgeCount displays 99+ for content 999 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    testID="wrapper"
+  >
+    <HeroIcon
+      name="bell-outlined"
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontSize": 20,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    />
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#cb300a",
+            "borderRadius": 999,
+            "color": "#ffffff",
+            "display": "flex",
+            "height": 12,
+            "justifyContent": "center",
+            "minWidth": 12,
+            "paddingHorizontal": 2,
+            "position": "absolute",
+            "right": -2,
+            "textAlign": "center",
+            "textAlignVertical": "center",
+            "top": -2,
+          },
+          undefined,
+        ]
+      }
+      testID="count-badge"
+    >
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            [
+              {
+                "color": "#ffffff",
+                "fontSize": 6,
+                "height": 12,
+                "lineHeight": 12,
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeTypeface="neutral"
+      >
+        99+
+      </Text>
+    </View>
+  </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>
+`;

package/src/components/Badge/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_MAX_NUMBER = 99;

package/src/components/Badge/index.tsx

@@ -2,12 +2,12 @@ import { Animated } from 'react-native';
 import React, { useMemo } from 'react';
 import { StyledView, StyledText, StyledIcon } from './StyledBadge';
 import BadgeStatus from './Status';
+import BadgeCount from './Count';
 import { BasicBadgeProps, IconBadgeProps } from './types';
+import { DEFAULT_MAX_NUMBER } from './constants';
 
 export type BadgeProps = BasicBadgeProps | IconBadgeProps;
 
-const DEFAULT_MAX_NUMBER = 99;
-
 const getPaddingState = (content: string): 'narrowContent' | 'wideContent' =>
   content.length > 1 ? 'wideContent' : 'narrowContent';
 
@@ -87,4 +87,5 @@ const Badge = ({
 
 export default Object.assign(Badge, {
   Status: BadgeStatus,
+  Count: BadgeCount,
 });

package/src/components/Button/StyledButton.tsx

@@ -1,10 +1,10 @@
-import { TouchableHighlight, View } from 'react-native';
-import styled from '@emotion/native';
 import type { ReactNativeStyle } from '@emotion/native';
+import styled from '@emotion/native';
 import type { Theme } from '@emotion/react';
+import { TouchableHighlight, View } from 'react-native';
+import { scale } from '../../utils/scale';
 import Icon from '../Icon';
 import Typography from '../Typography';
-import { scale } from '../../utils/scale';
 
 type Intent = 'primary' | 'secondary' | 'danger' | 'white';
 
@@ -319,11 +319,17 @@ const StyledButtonText = styled(Typography.Title)<{
   return {
     flexShrink: 1,
     textAlign: 'center',
+    textAlignVertical: 'center',
+    lineHeight: theme.__hd__.button.lineHeights.buttonText,
     ...themeStyling(),
   };
 });
 
-const StyledSmallButtonText = StyledButtonText.withComponent(Typography.Body);
+const StyledSmallButtonText = styled(
+  StyledButtonText.withComponent(Typography.Body)
+)(({ theme }) => ({
+  lineHeight: theme.__hd__.button.lineHeights.utilityButtonText,
+}));
 
 const StyledButtonTitleOfVariantText = styled(Typography.Body)<{
   disabled?: boolean;
@@ -352,8 +358,9 @@ const StyledButtonTitleOfVariantText = styled(Typography.Body)<{
   };
   return {
     flexShrink: 1,
-    lineHeight: theme.__hd__.button.lineHeights.titleOfTextVariant, // align text on Android
+    lineHeight: theme.__hd__.button.lineHeights.titleOfTextVariant,
     textAlign: 'center',
+    textAlignVertical: 'center',
     ...themeStyling(),
   };
 });
@@ -427,10 +434,10 @@ const StyledButtonIcon = styled(Icon)<{
 
 export {
   StyledButtonContainer,
-  StyledButtonText,
-  StyledSmallButtonText,
-  StyledButtonIconWrapper,
   StyledButtonIcon,
+  StyledButtonIconWrapper,
+  StyledButtonText,
   StyledButtonTitleOfVariantText,
+  StyledSmallButtonText,
 };
 export type { Intent, ThemeVariant };

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

@@ -1,5 +1,5 @@
-import { View, TouchableOpacity } from 'react-native';
 import styled from '@emotion/native';
+import { TouchableOpacity, View } from 'react-native';
 
 import Typography from '../../Typography';
 
@@ -17,7 +17,9 @@ export const IconWrapper = styled(View)(({ theme }) => ({
   paddingRight: theme.__hd__.button.space.default.iconPadding,
 }));
 
-export const ButtonText = styled(Typography.Body)({
+export const ButtonText = styled(Typography.Body)(({ theme }) => ({
   flexShrink: 1,
   textAlign: 'center',
-});
+  textAlignVertical: 'center',
+  lineHeight: theme.__hd__.button.lineHeights.utilityButtonText,
+}));

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

@@ -90,7 +90,9 @@ exports[`UtilityButton snapshot has intent primary style 1`] = `
           [
             {
               "flexShrink": 1,
+              "lineHeight": undefined,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],
@@ -216,7 +218,9 @@ exports[`UtilityButton snapshot has intent text style 1`] = `
           [
             {
               "flexShrink": 1,
+              "lineHeight": undefined,
               "textAlign": "center",
+              "textAlignVertical": "center",
             },
             undefined,
           ],