@hero-design/rn 8.93.0 → 8.94.0

package/types/components/{Empty → StatusScreens/Empty}/StyledEmpty.d.ts

@@ -6,16 +6,22 @@ declare const StyledWrapper: import("@emotion/native").StyledComponent<import("r
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledTitle: import("@emotion/native").StyledComponent<import("../Typography/Title").TitleProps & {
+declare const StyledTitle: import("@emotion/native").StyledComponent<import("../../Typography/Title").TitleProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     themeVariant: ThemeVariant;
 }, {}, {}>;
-declare const StyledDescription: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
+declare const StyledDescription: import("@emotion/native").StyledComponent<import("../../Typography/Body").BodyProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     themeVariant: ThemeVariant;
 }, {}, {}>;
-export { StyledWrapper, StyledTitle, StyledDescription };
+declare const StyledEmptyImageContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledWrapper, StyledTitle, StyledDescription, StyledEmptyImageContainer, };

package/types/components/{Empty → StatusScreens/Empty}/index.d.ts

@@ -1,6 +1,7 @@
 import type { ReactElement } from 'react';
-import type { StyleProp, ViewStyle, ImageProps as RNImageProps } from 'react-native';
-import { ImageProps } from '../Image';
+import type { ImageProps as RNImageProps, StyleProp, ViewStyle } from 'react-native';
+import { ImageProps } from '../../Image';
+import { StatusIconName } from '../StatusIcon';
 interface EmptyProps {
     /**
      * Image to be displayed.
@@ -26,6 +27,10 @@ interface EmptyProps {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Status icon to be displayed, this will replace the image prop.
+     */
+    icon?: StatusIconName;
 }
-declare const Empty: ({ image, title, description, style, testID, variant, }: EmptyProps) => JSX.Element;
+declare const Empty: ({ image, title, description, style, testID, variant, icon, }: EmptyProps) => ReactElement;
 export default Empty;

package/types/components/{Error → StatusScreens/Error}/StyledError.d.ts

@@ -1,6 +1,6 @@
 import { View } from 'react-native';
 type ErrorVariant = 'full-screen' | 'in-page';
-declare const StyledErrorModal: import("@emotion/native").StyledComponent<import("../Modal").ModalProps & {
+declare const StyledErrorModal: import("@emotion/native").StyledComponent<import("../../Modal").ModalProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, {}, {}>;
@@ -24,11 +24,11 @@ declare const StyledErrorButtonContainer: import("@emotion/native").StyledCompon
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledErrorButtonPrimary: import("@emotion/native").StyledComponent<import("../Button/Button").ButtonProps & {
+declare const StyledErrorButtonPrimary: import("@emotion/native").StyledComponent<import("../../Button/Button").ButtonProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, {}, {}>;
-declare const StyledErrorButtonSecondary: import("@emotion/native").StyledComponent<import("../Button/Button").ButtonProps & {
+declare const StyledErrorButtonSecondary: import("@emotion/native").StyledComponent<import("../../Button/Button").ButtonProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, {}, {}>;
@@ -38,15 +38,15 @@ declare const StyledErrorImageContainer: import("@emotion/native").StyledCompone
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledErrorImage: import("@emotion/native").StyledComponent<import("../Image").ImageProps & {
+declare const StyledErrorImage: import("@emotion/native").StyledComponent<import("../../Image").ImageProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, {}, {}>;
-declare const StyledErrorTitle: import("@emotion/native").StyledComponent<import("../Typography/Title").TitleProps & {
+declare const StyledErrorTitle: import("@emotion/native").StyledComponent<import("../../Typography/Title").TitleProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, {}, {}>;
-declare const StyledErrorDescription: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
+declare const StyledErrorDescription: import("@emotion/native").StyledComponent<import("../../Typography/Body").BodyProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, {}, {}>;

package/types/components/{Error → StatusScreens/Error}/index.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement } from 'react';
 import type { ImageSourcePropType, ViewProps, ImageProps as RNImageProps } from 'react-native';
 import { ErrorVariant } from './StyledError';
-import { ImageProps } from '../Image/index';
+import { ImageProps } from '../../Image/index';
+import type { StatusIconName } from '../StatusIcon';
 interface ErrorProps extends ViewProps {
     /**
      * @deprecated use conditional rendering instead
@@ -45,6 +46,10 @@ interface ErrorProps extends ViewProps {
      * Callback when the secondary button is pressed.
      */
     onSecondaryCtaPress?: () => void;
+    /**
+     * Status icon to be displayed, this will replace the image prop.
+     */
+    icon?: StatusIconName;
 }
 /**
  * Renders error page

package/types/components/StatusScreens/StatusIcon/assets/Add.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StatusSvgProps } from '../types';
+declare const Add: ({ stroke, fill, testID }: StatusSvgProps) => React.JSX.Element;
+export default Add;

package/types/components/StatusScreens/StatusIcon/assets/Boom.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StatusSvgProps } from '../types';
+declare const Boom: ({ stroke, fill, testID }: StatusSvgProps) => React.JSX.Element;
+export default Boom;

package/types/components/StatusScreens/StatusIcon/assets/Build.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StatusSvgProps } from '../types';
+declare const Build: ({ stroke, fill, testID }: StatusSvgProps) => React.JSX.Element;
+export default Build;

package/types/components/StatusScreens/StatusIcon/assets/Clock.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StatusSvgProps } from '../types';
+declare const Clock: ({ stroke, fill, testID }: StatusSvgProps) => React.JSX.Element;
+export default Clock;

package/types/components/StatusScreens/StatusIcon/assets/Confetti.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StatusSvgProps } from '../types';
+declare const Confetti: ({ stroke, fill, testID }: StatusSvgProps) => React.JSX.Element;
+export default Confetti;

package/types/components/StatusScreens/StatusIcon/assets/Connections.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StatusSvgProps } from '../types';
+declare const Connections: ({ stroke, fill, testID }: StatusSvgProps) => React.JSX.Element;
+export default Connections;

package/types/components/StatusScreens/StatusIcon/assets/Error.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StatusSvgProps } from '../types';
+declare const ErrorIcon: ({ stroke, fill, testID }: StatusSvgProps) => React.JSX.Element;
+export default ErrorIcon;

package/types/components/StatusScreens/StatusIcon/assets/Info.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StatusSvgProps } from '../types';
+declare const Info: ({ stroke, fill, testID }: StatusSvgProps) => React.JSX.Element;
+export default Info;

package/types/components/StatusScreens/StatusIcon/assets/List.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StatusSvgProps } from '../types';
+declare const List: ({ stroke, fill, testID }: StatusSvgProps) => React.JSX.Element;
+export default List;

package/types/components/StatusScreens/StatusIcon/assets/Location.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StatusSvgProps } from '../types';
+declare const Location: ({ stroke, fill, testID }: StatusSvgProps) => React.JSX.Element;
+export default Location;

package/types/components/StatusScreens/StatusIcon/assets/Merge.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StatusSvgProps } from '../types';
+declare const Merge: ({ stroke, fill, testID }: StatusSvgProps) => React.JSX.Element;
+export default Merge;

package/types/components/StatusScreens/StatusIcon/assets/Notifications.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StatusSvgProps } from '../types';
+declare const Notifications: ({ stroke, fill, testID }: StatusSvgProps) => React.JSX.Element;
+export default Notifications;

package/types/components/StatusScreens/StatusIcon/assets/Search.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StatusSvgProps } from '../types';
+declare const Search: ({ stroke, fill, testID }: StatusSvgProps) => React.JSX.Element;
+export default Search;

package/types/components/StatusScreens/StatusIcon/assets/Star.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StatusSvgProps } from '../types';
+declare const Star: ({ stroke, fill, testID }: StatusSvgProps) => React.JSX.Element;
+export default Star;

package/types/components/StatusScreens/StatusIcon/assets/Success.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StatusSvgProps } from '../types';
+declare const Success: ({ stroke, fill, testID }: StatusSvgProps) => React.JSX.Element;
+export default Success;

package/types/components/StatusScreens/StatusIcon/assets/User.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StatusSvgProps } from '../types';
+declare const User: ({ stroke, fill, testID }: StatusSvgProps) => React.JSX.Element;
+export default User;

package/types/components/StatusScreens/StatusIcon/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export declare const StatusIcons: {
+    readonly add: ({ stroke, fill, testID }: import("./types").StatusSvgProps) => React.JSX.Element;
+    readonly boom: ({ stroke, fill, testID }: import("./types").StatusSvgProps) => React.JSX.Element;
+    readonly build: ({ stroke, fill, testID }: import("./types").StatusSvgProps) => React.JSX.Element;
+    readonly clock: ({ stroke, fill, testID }: import("./types").StatusSvgProps) => React.JSX.Element;
+    readonly connections: ({ stroke, fill, testID }: import("./types").StatusSvgProps) => React.JSX.Element;
+    readonly list: ({ stroke, fill, testID }: import("./types").StatusSvgProps) => React.JSX.Element;
+    readonly location: ({ stroke, fill, testID }: import("./types").StatusSvgProps) => React.JSX.Element;
+    readonly merge: ({ stroke, fill, testID }: import("./types").StatusSvgProps) => React.JSX.Element;
+    readonly notifications: ({ stroke, fill, testID }: import("./types").StatusSvgProps) => React.JSX.Element;
+    readonly search: ({ stroke, fill, testID }: import("./types").StatusSvgProps) => React.JSX.Element;
+    readonly star: ({ stroke, fill, testID }: import("./types").StatusSvgProps) => React.JSX.Element;
+    readonly user: ({ stroke, fill, testID }: import("./types").StatusSvgProps) => React.JSX.Element;
+    readonly confetti: ({ stroke, fill, testID }: import("./types").StatusSvgProps) => React.JSX.Element;
+    readonly error: ({ stroke, fill, testID }: import("./types").StatusSvgProps) => React.JSX.Element;
+    readonly info: ({ stroke, fill, testID }: import("./types").StatusSvgProps) => React.JSX.Element;
+    readonly success: ({ stroke, fill, testID }: import("./types").StatusSvgProps) => React.JSX.Element;
+};
+export type StatusIconName = keyof typeof StatusIcons;
+interface StatusIconProps {
+    icon: StatusIconName;
+    testID?: string;
+}
+declare const StatusIcon: ({ icon, testID }: StatusIconProps) => React.JSX.Element;
+export default StatusIcon;

package/types/components/StatusScreens/StatusIcon/types.d.ts

@@ -0,0 +1,5 @@
+export type StatusSvgProps = {
+    fill?: string;
+    stroke?: string;
+    testID?: string;
+};

package/types/components/{Success → StatusScreens/Success}/StyledSuccess.d.ts

@@ -8,7 +8,7 @@ declare const StyledSuccessContainer: import("@emotion/native").StyledComponent<
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledSuccessImage: import("@emotion/native").StyledComponent<import("../Image").ImageProps & {
+declare const StyledSuccessImage: import("@emotion/native").StyledComponent<import("../../Image").ImageProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, {}, {}>;
@@ -24,11 +24,11 @@ declare const StyledSuccessImageContainer: import("@emotion/native").StyledCompo
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledSuccessTitle: import("@emotion/native").StyledComponent<import("../Typography/Title").TitleProps & {
+declare const StyledSuccessTitle: import("@emotion/native").StyledComponent<import("../../Typography/Title").TitleProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, {}, {}>;
-declare const StyledSuccessDescription: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
+declare const StyledSuccessDescription: import("@emotion/native").StyledComponent<import("../../Typography/Body").BodyProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, {}, {}>;
@@ -38,11 +38,11 @@ declare const StyledSuccessButtonContainer: import("@emotion/native").StyledComp
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledSuccessButtonPrimary: import("@emotion/native").StyledComponent<import("../Button/Button").ButtonProps & {
+declare const StyledSuccessButtonPrimary: import("@emotion/native").StyledComponent<import("../../Button/Button").ButtonProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, {}, {}>;
-declare const StyledSuccessModal: import("@emotion/native").StyledComponent<import("../Modal").ModalProps & {
+declare const StyledSuccessModal: import("@emotion/native").StyledComponent<import("../../Modal").ModalProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, {}, {}>;

package/types/components/{Success → StatusScreens/Success}/index.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement } from 'react';
 import type { ViewProps, ImageSourcePropType, ImageProps as RNImageProps } from 'react-native';
 import { SuccessVariant } from './StyledSuccess';
-import { ImageProps } from '../Image';
+import { ImageProps } from '../../Image';
+import { StatusIconName } from '../StatusIcon';
 export interface SuccessProps extends ViewProps {
     /**
      * Image to be displayed.
@@ -39,6 +40,10 @@ export interface SuccessProps extends ViewProps {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Status icon to be displayed, this will replace the image prop.
+     */
+    icon?: StatusIconName;
 }
 /**
  * Renders success page

package/types/index.d.ts

@@ -20,8 +20,8 @@ import ContentNavigator from './components/ContentNavigator';
 import DatePicker from './components/DatePicker';
 import Divider from './components/Divider';
 import Drawer from './components/Drawer';
-import Empty from './components/Empty';
-import Error from './components/Error';
+import Empty from './components/StatusScreens/Empty';
+import Error from './components/StatusScreens/Error';
 import FAB from './components/FAB';
 import HeroDesignProvider from './components/HeroDesignProvider';
 import MapPin from './components/MapPin';
@@ -37,7 +37,7 @@ import Radio from './components/Radio';
 import SectionHeading from './components/SectionHeading';
 import Select from './components/Select';
 import Skeleton from './components/Skeleton';
-import Success from './components/Success';
+import Success from './components/StatusScreens/Success';
 import Switch from './components/Switch';
 import Tabs from './components/Tabs';
 import Tag from './components/Tag';

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;