@hero-design/rn 8.92.3 → 8.94.0

package/types/theme/components/badge.d.ts

@@ -9,6 +9,7 @@ declare const getBadgeTheme: (theme: GlobalTheme) => {
         archived: string;
         text: string;
         border: string;
+        countText: string;
     };
     fonts: {
         medium: string;
@@ -21,6 +22,7 @@ declare const getBadgeTheme: (theme: GlobalTheme) => {
             medium: number;
             small: number;
         };
+        count: number;
     };
     sizes: {
         medium: {
@@ -33,6 +35,10 @@ declare const getBadgeTheme: (theme: GlobalTheme) => {
         };
         statusHeight: number;
         statusWidth: number;
+        count: {
+            width: number;
+            height: number;
+        };
     };
     space: {
         medium: {
@@ -43,14 +49,19 @@ declare const getBadgeTheme: (theme: GlobalTheme) => {
         };
         statusPositionTop: number;
         statusPositionRight: number;
+        countPaddingHorizontal: number;
     };
     lineHeights: {
         medium: number;
         small: number;
+        count: number;
     };
     borderWidths: {
         default: number;
     };
+    radii: {
+        count: number;
+    };
 };
 export type BadgeThemeType = ReturnType<typeof getBadgeTheme>;
 export default getBadgeTheme;

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

@@ -1,218 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Empty renders empty state content correctly 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "display": "flex",
-          "flex": 1,
-          "flexDirection": "column",
-          "justifyContent": "center",
-          "padding": 16,
-        },
-        undefined,
-      ]
-    }
-  >
-    <Text
-      allowFontScaling={false}
-      style={
-        [
-          {
-            "color": "#001f23",
-            "fontFamily": "Saiga-Medium",
-            "fontSize": 24,
-            "letterSpacing": 0.24,
-            "lineHeight": 32,
-          },
-          [
-            {
-              "color": "#001f23",
-              "marginBottom": 8,
-              "textAlign": "center",
-            },
-            undefined,
-          ],
-        ]
-      }
-      themeIntent="body"
-      themeLevel="h4"
-      themeTypeface="playful"
-      themeVariant="light"
-    >
-      You have no notification at this time
-    </Text>
-    <Text
-      allowFontScaling={false}
-      style={
-        [
-          {
-            "color": "#001f23",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.48,
-            "lineHeight": 22,
-          },
-          [
-            {
-              "color": "#4d6265",
-              "textAlign": "center",
-            },
-            undefined,
-          ],
-        ]
-      }
-      themeIntent="body"
-      themeTypeface="neutral"
-      themeVariant="small"
-    >
-      We'll notify you later.
-    </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[`Empty renders empty state with image correctly 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <View
-    style={
-      [
-        {
-          "alignItems": "center",
-          "display": "flex",
-          "flex": 1,
-          "flexDirection": "column",
-          "justifyContent": "center",
-          "padding": 16,
-        },
-        undefined,
-      ]
-    }
-  >
-    <Image
-      source={
-        {
-          "uri": "path_to_image",
-        }
-      }
-      style={
-        [
-          {
-            "marginBottom": 24,
-          },
-          undefined,
-        ]
-      }
-    />
-    <Text
-      allowFontScaling={false}
-      style={
-        [
-          {
-            "color": "#001f23",
-            "fontFamily": "Saiga-Medium",
-            "fontSize": 24,
-            "letterSpacing": 0.24,
-            "lineHeight": 32,
-          },
-          [
-            {
-              "color": "#001f23",
-              "marginBottom": 8,
-              "textAlign": "center",
-            },
-            undefined,
-          ],
-        ]
-      }
-      themeIntent="body"
-      themeLevel="h4"
-      themeTypeface="playful"
-      themeVariant="light"
-    >
-      You have no notification at this time
-    </Text>
-    <Text
-      allowFontScaling={false}
-      style={
-        [
-          {
-            "color": "#001f23",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.48,
-            "lineHeight": 22,
-          },
-          [
-            {
-              "color": "#4d6265",
-              "textAlign": "center",
-            },
-            undefined,
-          ],
-        ]
-      }
-      themeIntent="body"
-      themeTypeface="neutral"
-      themeVariant="small"
-    >
-      We'll notify you later.
-    </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>
-`;

package/src/components/Empty/index.tsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import type { ReactElement } from 'react';
-import type {
-  StyleProp,
-  ViewStyle,
-  ImageProps as RNImageProps,
-} from 'react-native';
-
-import { useTheme } from '../../theme';
-import { ImageProps } from '../Image';
-import { StyledWrapper, StyledTitle, StyledDescription } from './StyledEmpty';
-
-interface EmptyProps {
-  /**
-   * Image to be displayed.
-   */
-  image?: ReactElement<ImageProps | RNImageProps>;
-  /**
-   * Empty's title.
-   */
-  title: string;
-  /**
-   * Empty's description.
-   */
-  description?: string;
-  /**
-   * Empty's variant.
-   */
-  variant?: 'light' | 'dark';
-  /**
-   * Additional style.
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * Testing id of the component.
-   */
-  testID?: string;
-}
-
-const Empty = ({
-  image,
-  title,
-  description,
-  style,
-  testID,
-  variant = 'light',
-}: EmptyProps): JSX.Element => {
-  const theme = useTheme();
-  return (
-    <StyledWrapper style={style} testID={testID}>
-      {image !== undefined &&
-        React.cloneElement(image, {
-          ...image.props,
-          style: [
-            {
-              marginBottom: theme.__hd__.empty.space.imageMargin,
-            },
-            image.props.style,
-          ],
-        })}
-      <StyledTitle themeVariant={variant} level="h4" typeface="playful">
-        {title}
-      </StyledTitle>
-      {!!description && (
-        <StyledDescription variant="small" themeVariant={variant}>
-          {description}
-        </StyledDescription>
-      )}
-    </StyledWrapper>
-  );
-};
-
-export default Empty;