@hero-design/rn 8.70.0 → 8.72.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.70.0",
+  "version": "8.72.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Accordion/AccordionItem.tsx

@@ -38,7 +38,7 @@ const AccordionItem = ({
       )}
       <Icon
         icon={open ? 'arrow-up' : 'arrow-down'}
-        intent="secondary"
+        intent="primary"
         size="small"
       />
     </StyledHeaderWrapper>

package/src/components/Accordion/__tests__/__snapshots__/AccordionItem.spec.tsx.snap

@@ -82,13 +82,13 @@ exports[`AccordionItem renders correctly when header is an element 1`] = `
         style={
           [
             {
-              "color": "#795e90",
+              "color": "#401960",
               "fontSize": 20,
             },
             undefined,
           ]
         }
-        themeIntent="secondary"
+        themeIntent="primary"
         themeSize="small"
       />
     </View>
@@ -260,13 +260,13 @@ exports[`AccordionItem renders correctly when header is string 1`] = `
         style={
           [
             {
-              "color": "#795e90",
+              "color": "#401960",
               "fontSize": 20,
             },
             undefined,
           ]
         }
-        themeIntent="secondary"
+        themeIntent="primary"
         themeSize="small"
       />
     </View>
@@ -438,13 +438,13 @@ exports[`AccordionItem renders correctly when open 1`] = `
         style={
           [
             {
-              "color": "#795e90",
+              "color": "#401960",
               "fontSize": 20,
             },
             undefined,
           ]
         }
-        themeIntent="secondary"
+        themeIntent="primary"
         themeSize="small"
       />
     </View>
@@ -616,13 +616,13 @@ exports[`AccordionItem renders correctly when variant is card 1`] = `
         style={
           [
             {
-              "color": "#795e90",
+              "color": "#401960",
               "fontSize": 20,
             },
             undefined,
           ]
         }
-        themeIntent="secondary"
+        themeIntent="primary"
         themeSize="small"
       />
     </View>

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

@@ -90,13 +90,13 @@ exports[`Accordion allows fully controlled 1`] = `
           style={
             [
               {
-                "color": "#795e90",
+                "color": "#401960",
                 "fontSize": 20,
               },
               undefined,
             ]
           }
-          themeIntent="secondary"
+          themeIntent="primary"
           themeSize="small"
         />
       </View>
@@ -237,13 +237,13 @@ exports[`Accordion allows fully controlled 1`] = `
           style={
             [
               {
-                "color": "#795e90",
+                "color": "#401960",
                 "fontSize": 20,
               },
               undefined,
             ]
           }
-          themeIntent="secondary"
+          themeIntent="primary"
           themeSize="small"
         />
       </View>
@@ -424,13 +424,13 @@ exports[`Accordion renders correctly 1`] = `
           style={
             [
               {
-                "color": "#795e90",
+                "color": "#401960",
                 "fontSize": 20,
               },
               undefined,
             ]
           }
-          themeIntent="secondary"
+          themeIntent="primary"
           themeSize="small"
         />
       </View>
@@ -571,13 +571,13 @@ exports[`Accordion renders correctly 1`] = `
           style={
             [
               {
-                "color": "#795e90",
+                "color": "#401960",
                 "fontSize": 20,
               },
               undefined,
             ]
           }
-          themeIntent="secondary"
+          themeIntent="primary"
           themeSize="small"
         />
       </View>
@@ -758,13 +758,13 @@ exports[`Accordion renders correctly when variant is card 1`] = `
           style={
             [
               {
-                "color": "#795e90",
+                "color": "#401960",
                 "fontSize": 20,
               },
               undefined,
             ]
           }
-          themeIntent="secondary"
+          themeIntent="primary"
           themeSize="small"
         />
       </View>
@@ -916,13 +916,13 @@ exports[`Accordion renders correctly when variant is card 1`] = `
           style={
             [
               {
-                "color": "#795e90",
+                "color": "#401960",
                 "fontSize": 20,
               },
               undefined,
             ]
           }
-          themeIntent="secondary"
+          themeIntent="primary"
           themeSize="small"
         />
       </View>

package/src/components/Badge/StyledBadge.tsx

@@ -1,6 +1,7 @@
 import { Animated } from 'react-native';
 import styled from '@emotion/native';
 import Typography from '../Typography';
+import Icon from '../Icon';
 
 type ThemeIntent =
   | 'primary'
@@ -14,11 +15,14 @@ type ThemePadding = 'narrowContent' | 'wideContent';
 
 type ThemeSize = 'medium' | 'small';
 
+type ThemeVariant = 'filled' | 'outlined';
+
 const StyledView = styled(Animated.View)<{
   themeIntent: ThemeIntent;
   themePadding: ThemePadding;
   themeSize: ThemeSize;
-}>(({ themeIntent, themePadding, themeSize, theme }) => ({
+  themeVariant: ThemeVariant;
+}>(({ themeIntent, themePadding, themeSize, themeVariant, theme }) => ({
   height: theme.__hd__.badge.sizes[themeSize].height,
   minWidth: theme.__hd__.badge.sizes[themeSize].minWidth,
   alignItems: 'center',
@@ -29,6 +33,11 @@ const StyledView = styled(Animated.View)<{
     themePadding === 'wideContent'
       ? theme.__hd__.badge.space[themeSize].horizontalPadding
       : undefined,
+  borderWidth: theme.__hd__.badge.borderWidths.default,
+  borderColor:
+    themeVariant === 'outlined'
+      ? theme.__hd__.badge.colors.border
+      : theme.__hd__.badge.colors[themeIntent],
 }));
 
 const StyledText = styled(Typography.Caption)<{
@@ -55,4 +64,10 @@ const StyledStatus = styled(Animated.View)<{
   borderRadius: theme.radii.rounded,
 }));
 
-export { StyledView, StyledText, StyledStatus };
+const StyledIcon = styled(Icon)<{
+  themeSize: ThemeSize;
+}>(({ themeSize, theme }) => ({
+  fontSize: theme.__hd__.badge.fontSizes[themeSize],
+}));
+
+export { StyledView, StyledText, StyledStatus, StyledIcon };

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

@@ -72,4 +72,19 @@ describe('Badge', () => {
     expect(toJSON()).toMatchSnapshot();
     expect(getByText('SMALL')).toBeDefined();
   });
+
+  it('has outlined style when variant is outlined', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <Badge content="OUTLINED" variant="outlined" />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('OUTLINED')).toBeDefined();
+  });
+
+  it('render icon correctly', () => {
+    const { toJSON } = renderWithTheme(<Badge icon="checkmark" />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
 });

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

@@ -14,7 +14,9 @@ exports[`Badge has danger style when intent is danger 1`] = `
       {
         "alignItems": "center",
         "backgroundColor": "#cb300a",
+        "borderColor": "#cb300a",
         "borderRadius": 999,
+        "borderWidth": 2,
         "height": 24,
         "justifyContent": "center",
         "minWidth": 24,
@@ -30,6 +32,7 @@ exports[`Badge has danger style when intent is danger 1`] = `
     themeIntent="danger"
     themePadding="wideContent"
     themeSize="medium"
+    themeVariant="filled"
   >
     <Text
       allowFontScaling={false}
@@ -100,7 +103,9 @@ exports[`Badge has info style when intent is info 1`] = `
       {
         "alignItems": "center",
         "backgroundColor": "#355bfb",
+        "borderColor": "#355bfb",
         "borderRadius": 999,
+        "borderWidth": 2,
         "height": 24,
         "justifyContent": "center",
         "minWidth": 24,
@@ -116,6 +121,7 @@ exports[`Badge has info style when intent is info 1`] = `
     themeIntent="info"
     themePadding="wideContent"
     themeSize="medium"
+    themeVariant="filled"
   >
     <Text
       allowFontScaling={false}
@@ -186,7 +192,9 @@ exports[`Badge has info style when intent is primary 1`] = `
       {
         "alignItems": "center",
         "backgroundColor": "#401960",
+        "borderColor": "#401960",
         "borderRadius": 999,
+        "borderWidth": 2,
         "height": 24,
         "justifyContent": "center",
         "minWidth": 24,
@@ -202,6 +210,7 @@ exports[`Badge has info style when intent is primary 1`] = `
     themeIntent="primary"
     themePadding="wideContent"
     themeSize="medium"
+    themeVariant="filled"
   >
     <Text
       allowFontScaling={false}
@@ -258,6 +267,95 @@ exports[`Badge has info style when intent is primary 1`] = `
 </View>
 `;
 
+exports[`Badge has outlined style when variant is outlined 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#cb300a",
+        "borderColor": "#ffffff",
+        "borderRadius": 999,
+        "borderWidth": 2,
+        "height": 24,
+        "justifyContent": "center",
+        "minWidth": 24,
+        "opacity": 1,
+        "paddingHorizontal": 8,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+    themeIntent="danger"
+    themePadding="wideContent"
+    themeSize="medium"
+    themeVariant="outlined"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 12,
+            "letterSpacing": 0.36,
+            "lineHeight": 16,
+          },
+          [
+            {
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
+              "includeFontPadding": false,
+              "lineHeight": 16,
+              "textAlign": "center",
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeSize="medium"
+    >
+      OUTLINED
+    </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 small style when size is small 1`] = `
 <View
   style={
@@ -272,7 +370,9 @@ exports[`Badge has small style when size is small 1`] = `
       {
         "alignItems": "center",
         "backgroundColor": "#cb300a",
+        "borderColor": "#cb300a",
         "borderRadius": 999,
+        "borderWidth": 2,
         "height": 16,
         "justifyContent": "center",
         "minWidth": 16,
@@ -288,6 +388,7 @@ exports[`Badge has small style when size is small 1`] = `
     themeIntent="danger"
     themePadding="wideContent"
     themeSize="small"
+    themeVariant="filled"
   >
     <Text
       allowFontScaling={false}
@@ -358,7 +459,9 @@ exports[`Badge has success style when intent is success 1`] = `
       {
         "alignItems": "center",
         "backgroundColor": "#017d6d",
+        "borderColor": "#017d6d",
         "borderRadius": 999,
+        "borderWidth": 2,
         "height": 24,
         "justifyContent": "center",
         "minWidth": 24,
@@ -374,6 +477,7 @@ exports[`Badge has success style when intent is success 1`] = `
     themeIntent="success"
     themePadding="wideContent"
     themeSize="medium"
+    themeVariant="filled"
   >
     <Text
       allowFontScaling={false}
@@ -444,7 +548,9 @@ exports[`Badge has warning style when intent is warning 1`] = `
       {
         "alignItems": "center",
         "backgroundColor": "#ac5d00",
+        "borderColor": "#ac5d00",
         "borderRadius": 999,
+        "borderWidth": 2,
         "height": 24,
         "justifyContent": "center",
         "minWidth": 24,
@@ -460,6 +566,7 @@ exports[`Badge has warning style when intent is warning 1`] = `
     themeIntent="warning"
     themePadding="wideContent"
     themeSize="medium"
+    themeVariant="filled"
   >
     <Text
       allowFontScaling={false}
@@ -516,6 +623,83 @@ exports[`Badge has warning style when intent is warning 1`] = `
 </View>
 `;
 
+exports[`Badge render icon correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#cb300a",
+        "borderColor": "#cb300a",
+        "borderRadius": 999,
+        "borderWidth": 2,
+        "height": 24,
+        "justifyContent": "center",
+        "minWidth": 24,
+        "opacity": 1,
+        "paddingHorizontal": undefined,
+        "transform": [
+          {
+            "scale": 1,
+          },
+        ],
+      }
+    }
+    themeIntent="danger"
+    themePadding="narrowContent"
+    themeSize="medium"
+    themeVariant="filled"
+  >
+    <HeroIcon
+      name="checkmark"
+      style={
+        [
+          {
+            "color": "#ffffff",
+            "fontSize": 24,
+          },
+          [
+            {
+              "fontSize": 12,
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeIntent="text-inverted"
+      themeSize="medium"
+    />
+  </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 renders correctly with custom props 1`] = `
 <View
   style={
@@ -530,7 +714,9 @@ exports[`Badge renders correctly with custom props 1`] = `
       {
         "alignItems": "center",
         "backgroundColor": "#017d6d",
+        "borderColor": "#017d6d",
         "borderRadius": 999,
+        "borderWidth": 2,
         "height": 24,
         "justifyContent": "center",
         "minWidth": 24,
@@ -547,6 +733,7 @@ exports[`Badge renders correctly with custom props 1`] = `
     themeIntent="success"
     themePadding="wideContent"
     themeSize="medium"
+    themeVariant="filled"
   >
     <Text
       allowFontScaling={false}

package/src/components/Badge/index.tsx

@@ -1,39 +1,10 @@
 import { Animated } from 'react-native';
-import React from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
-import { StyledView, StyledText } from './StyledBadge';
+import React, { useMemo } from 'react';
+import { StyledView, StyledText, StyledIcon } from './StyledBadge';
 import BadgeStatus from './Status';
+import { BasicBadgeProps, IconBadgeProps } from './types';
 
-export interface BadgeProps extends React.ComponentProps<typeof Animated.View> {
-  /**
-   * Content of the Badge.
-   */
-  content: string | number;
-  /**
-   * Whether the Badge is visible.
-   */
-  visible?: boolean;
-  /**
-   * The maximum number displayed on the badge. If number exceeds this value, `${max}+` are displayed instead. (Only applied when content is number.)
-   */
-  max?: number;
-  /**
-   * Visual intent color to apply to Badge.
-   */
-  intent?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
-  /**
-   * Additional style.
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * Testing id of the component.
-   */
-  testID?: string;
-  /**
-   * Size of the badge
-   */
-  size?: 'medium' | 'small';
-}
+export type BadgeProps = BasicBadgeProps | IconBadgeProps;
 
 const DEFAULT_MAX_NUMBER = 99;
 
@@ -48,6 +19,8 @@ const Badge = ({
   style,
   testID,
   size = 'medium',
+  variant = 'filled',
+  icon,
   ...nativeProps
 }: BadgeProps): JSX.Element => {
   const { current: opacity } = React.useRef<Animated.Value>(
@@ -69,10 +42,16 @@ const Badge = ({
     }).start();
   }, [visible, opacity]);
 
-  const content =
-    typeof originalContent === 'number' && originalContent > max
+  const isIconBadge = !!icon;
+
+  const content = useMemo(() => {
+    if (isIconBadge) {
+      return '';
+    }
+    return typeof originalContent === 'number' && originalContent > max
       ? `${max}+`
       : String(originalContent);
+  }, [isIconBadge, originalContent, max]);
 
   return (
     <StyledView
@@ -80,6 +59,7 @@ const Badge = ({
       themeIntent={intent}
       themePadding={getPaddingState(content)}
       themeSize={size}
+      themeVariant={variant}
       style={[
         {
           opacity,
@@ -96,7 +76,11 @@ const Badge = ({
       ]}
       testID={testID}
     >
-      <StyledText themeSize={size}>{content}</StyledText>
+      {isIconBadge ? (
+        <StyledIcon icon={icon} themeSize={size} intent="text-inverted" />
+      ) : (
+        <StyledText themeSize={size}>{content}</StyledText>
+      )}
     </StyledView>
   );
 };

package/src/components/Badge/types.ts

@@ -0,0 +1,55 @@
+import { Animated, StyleProp, ViewStyle } from 'react-native';
+import { IconName } from '../Icon';
+
+interface BaseBadgeProps extends React.ComponentProps<typeof Animated.View> {
+  /**
+   * Whether the Badge is visible.
+   */
+  visible?: boolean;
+  /**
+   * The maximum number displayed on the badge. If number exceeds this value, `${max}+` are displayed instead. (Only applied when content is number.)
+   */
+  max?: number;
+  /**
+   * Visual intent color to apply to Badge.
+   */
+  intent?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+  /**
+   * Size of the badge
+   */
+  size?: 'medium' | 'small';
+  /**
+   * Variant of the badge
+   */
+  variant?: 'filled' | 'outlined';
+}
+
+export interface BasicBadgeProps extends BaseBadgeProps {
+  /**
+   * Content of the Badge.
+   */
+  content: string | number;
+  /**
+   * Use Icon as the content of the Badge.
+   */
+  icon?: never;
+}
+
+export interface IconBadgeProps extends BaseBadgeProps {
+  /**
+   * Content of the Badge.
+   */
+  content?: never;
+  /**
+   * Use Icon as the content of the Badge.
+   */
+  icon: IconName;
+}