@hero-design/rn 8.12.5 → 8.13.0

package/src/theme/components/error.ts

@@ -0,0 +1,40 @@
+import type { GlobalTheme } from '../global';
+
+const getErrorTheme = (theme: GlobalTheme) => {
+  const space = {
+    titleMarginBottom: theme.space.small,
+    imageMarginBottom: theme.space.xlarge,
+    wrapperPadding: theme.space.large,
+    button: {
+      wrapperHorizontalPadding: theme.space.medium,
+      wrapperVerticalPadding: theme.space.xxxlarge,
+      margin: theme.space.medium,
+      padding: theme.space.medium,
+    },
+  };
+
+  const sizes = {
+    image: theme.sizes['19xlarge'],
+  };
+
+  const colors = {
+    title: theme.colors.onDefaultGlobalSurface,
+    description: theme.colors.mutedOnDefaultGlobalSurface,
+    fullScreenBackground: theme.colors.decorativePrimarySurface,
+    inPageBackground: theme.colors.neutralGlobalSurface,
+  };
+
+  const fontSizes = {
+    title: theme.fontSizes.xxxlarge,
+    description: theme.fontSizes.xlarge,
+  };
+
+  const fonts = {
+    title: theme.fonts.playful.semiBold,
+    description: theme.fonts.playful.regular,
+  };
+
+  return { fontSizes, colors, sizes, space, fonts };
+};
+
+export default getErrorTheme;

package/src/theme/getTheme.ts

@@ -18,6 +18,7 @@ import getDatePickerTheme from './components/datePicker';
 import getDividerTheme from './components/divider';
 import getDrawerTheme from './components/drawer';
 import getEmptyTheme from './components/empty';
+import getErrorTheme from './components/error';
 import getFABTheme from './components/fab';
 import getIconTheme from './components/icon';
 import getImageTheme from './components/image';
@@ -64,6 +65,7 @@ type Theme = GlobalTheme & {
     divider: ReturnType<typeof getDividerTheme>;
     drawer: ReturnType<typeof getDrawerTheme>;
     empty: ReturnType<typeof getEmptyTheme>;
+    error: ReturnType<typeof getErrorTheme>;
     fab: ReturnType<typeof getFABTheme>;
     icon: ReturnType<typeof getIconTheme>;
     image: ReturnType<typeof getImageTheme>;
@@ -116,6 +118,7 @@ const getTheme = (
       divider: getDividerTheme(globalTheme),
       drawer: getDrawerTheme(globalTheme),
       empty: getEmptyTheme(globalTheme),
+      error: getErrorTheme(globalTheme),
       fab: getFABTheme(globalTheme),
       icon: getIconTheme(globalTheme),
       image: getImageTheme(globalTheme),

package/types/components/Error/StyledError.d.ts

@@ -0,0 +1,54 @@
+/// <reference types="react" />
+import { Modal, View } from 'react-native';
+declare type ErrorVariant = 'full-screen' | 'in-page';
+declare const StyledErrorModal: import("@emotion/native").StyledComponent<import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<Modal> | undefined;
+}>;
+declare const StyledErrorContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVariant: ErrorVariant;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledErrorContent: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledErrorButtonContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledErrorButtonPrimary: import("@emotion/native").StyledComponent<import("../Button/Button").ButtonProps & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledErrorButtonSecondary: import("@emotion/native").StyledComponent<import("../Button/Button").ButtonProps & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledErrorImage: import("@emotion/native").StyledComponent<import("../Image").ImageProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledErrorTitle: import("@emotion/native").StyledComponent<import("../..").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledErrorDescription: import("@emotion/native").StyledComponent<import("../..").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+export { ErrorVariant, StyledErrorModal, StyledErrorImage, StyledErrorContainer, StyledErrorButtonContainer, StyledErrorButtonPrimary, StyledErrorButtonSecondary, StyledErrorContent, StyledErrorTitle, StyledErrorDescription, };

package/types/components/Error/index.d.ts

@@ -0,0 +1,55 @@
+import type { ReactElement } from 'react';
+import type { ImageSourcePropType, ViewProps } from 'react-native';
+import { ErrorVariant } from './StyledError';
+interface ErrorPageProps extends ViewProps {
+    /**
+     * Variant of the error
+     */
+    variant?: ErrorVariant;
+    /**
+     * Title of the error
+     */
+    title: string;
+    /**
+     * Description of the error
+     */
+    description?: string;
+    /**
+     * Image of the error
+     */
+    image?: ImageSourcePropType | string;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Action button text
+     */
+    ctaText?: string;
+    /**
+     * Callback when the action button is pressed.
+     */
+    onCtaPress?: () => void;
+    /**
+     * Secondary button text
+     */
+    secondaryCtaText?: string;
+    /**
+     * Callback when the secondary button is pressed.
+     */
+    onSecondaryCtaPress?: () => void;
+}
+declare type ErrorProps = ErrorPageProps & {
+    /**
+     * Visibility of the error
+     */
+    visible: boolean;
+};
+/**
+ * Renders error page
+ *
+ * @param {ErrorProps}
+ * @return {*}  {ReactElement}
+ */
+declare const Error: ({ visible, variant, title, description, testID, ctaText, onCtaPress, secondaryCtaText, onSecondaryCtaPress, ...nativeProps }: ErrorProps) => ReactElement;
+export default Error;

package/types/index.d.ts

@@ -19,6 +19,7 @@ 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 FAB from './components/FAB';
 import Icon from './components/Icon';
 import Image from './components/Image';
@@ -42,5 +43,5 @@ import Typography from './components/Typography';
 import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
 import PageControl from './components/PageControl';
-export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, FAB, Icon, Image, List, PinInput, Progress, PageControl, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RefreshControl, RichTextEditor, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, Icon, Image, List, PinInput, Progress, PageControl, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RefreshControl, RichTextEditor, };
 export * from './types';

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

@@ -0,0 +1,32 @@
+import type { GlobalTheme } from '../global';
+declare const getErrorTheme: (theme: GlobalTheme) => {
+    fontSizes: {
+        title: number;
+        description: number;
+    };
+    colors: {
+        title: string;
+        description: string;
+        fullScreenBackground: string;
+        inPageBackground: string;
+    };
+    sizes: {
+        image: number;
+    };
+    space: {
+        titleMarginBottom: number;
+        imageMarginBottom: number;
+        wrapperPadding: number;
+        button: {
+            wrapperHorizontalPadding: number;
+            wrapperVerticalPadding: number;
+            margin: number;
+            padding: number;
+        };
+    };
+    fonts: {
+        title: string;
+        description: string;
+    };
+};
+export default getErrorTheme;

package/types/theme/getTheme.d.ts

@@ -16,6 +16,7 @@ import getDatePickerTheme from './components/datePicker';
 import getDividerTheme from './components/divider';
 import getDrawerTheme from './components/drawer';
 import getEmptyTheme from './components/empty';
+import getErrorTheme from './components/error';
 import getFABTheme from './components/fab';
 import getIconTheme from './components/icon';
 import getImageTheme from './components/image';
@@ -60,6 +61,7 @@ declare type Theme = GlobalTheme & {
         divider: ReturnType<typeof getDividerTheme>;
         drawer: ReturnType<typeof getDrawerTheme>;
         empty: ReturnType<typeof getEmptyTheme>;
+        error: ReturnType<typeof getErrorTheme>;
         fab: ReturnType<typeof getFABTheme>;
         icon: ReturnType<typeof getIconTheme>;
         image: ReturnType<typeof getImageTheme>;