@hero-design/rn 8.12.5 → 8.13.0

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

@@ -0,0 +1,343 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Error renders error screen with image correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#f6f6f7",
+        "display": "flex",
+        "flex": 1,
+        "flexDirection": "column",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="in-page"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "display": "flex",
+          "flex": 1,
+          "flexDirection": "column",
+          "justifyContent": "center",
+          "padding": 24,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Image
+      source={
+        Object {
+          "uri": "path_to_image",
+        }
+      }
+      style={
+        Array [
+          Object {
+            "borderRadius": 0,
+            "height": 72,
+            "width": 72,
+          },
+          Array [
+            Object {
+              "height": 176,
+              "marginBottom": 32,
+              "resizeMode": "contain",
+              "width": 176,
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="error-image"
+    />
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "RebondGrotesque-SemiBold",
+              "fontSize": 24,
+              "marginBottom": 8,
+              "textAlign": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeTypeface="neutral"
+    >
+      We’re sorry, something went wrong
+    </Text>
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          Array [
+            Object {
+              "color": "#4d6265",
+              "fontFamily": "RebondGrotesque",
+              "fontSize": 18,
+              "textAlign": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeTypeface="neutral"
+    >
+      Please try again later
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Error renders full screen error page correctly 1`] = `
+<Modal
+  animationType="slide"
+  hardwareAccelerated={false}
+  onDismiss={[Function]}
+  onRequestClose={[Function]}
+  style={
+    Array [
+      Object {
+        "height": "100%",
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  visible={true}
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#ccd2d3",
+          "display": "flex",
+          "flex": 1,
+          "flexDirection": "column",
+        },
+        undefined,
+      ]
+    }
+    themeVariant="full-screen"
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "display": "flex",
+            "flex": 1,
+            "flexDirection": "column",
+            "justifyContent": "center",
+            "padding": 24,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Image
+        source={
+          Object {
+            "uri": "path_to_image",
+          }
+        }
+        style={
+          Array [
+            Object {
+              "borderRadius": 0,
+              "height": 72,
+              "width": 72,
+            },
+            Array [
+              Object {
+                "height": 176,
+                "marginBottom": 32,
+                "resizeMode": "contain",
+                "width": 176,
+              },
+              undefined,
+            ],
+          ]
+        }
+        testID="error-image"
+      />
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            Array [
+              Object {
+                "color": "#001f23",
+                "fontFamily": "RebondGrotesque-SemiBold",
+                "fontSize": 24,
+                "marginBottom": 8,
+                "textAlign": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeTypeface="neutral"
+      >
+        We’re sorry, something went wrong
+      </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            Array [
+              Object {
+                "color": "#4d6265",
+                "fontFamily": "RebondGrotesque",
+                "fontSize": 18,
+                "textAlign": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeTypeface="neutral"
+      >
+        Please try again later
+      </Text>
+    </View>
+  </View>
+</Modal>
+`;
+
+exports[`Error renders title only correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#f6f6f7",
+        "display": "flex",
+        "flex": 1,
+        "flexDirection": "column",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="in-page"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "display": "flex",
+          "flex": 1,
+          "flexDirection": "column",
+          "justifyContent": "center",
+          "padding": 24,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "RebondGrotesque-SemiBold",
+              "fontSize": 24,
+              "marginBottom": 8,
+              "textAlign": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeTypeface="neutral"
+    >
+      We’re sorry, something went wrong
+    </Text>
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          Array [
+            Object {
+              "color": "#4d6265",
+              "fontFamily": "RebondGrotesque",
+              "fontSize": 18,
+              "textAlign": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeTypeface="neutral"
+    >
+      Please try again later
+    </Text>
+  </View>
+</View>
+`;

package/src/components/Error/__tests__/index.spec.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Error from '..';
+
+const title = `We’re sorry, something went wrong`;
+const description = 'Please try again later';
+
+describe('Error', () => {
+  it('renders title only correctly', () => {
+    const { toJSON, getByText } = renderWithTheme(
+      <Error visible title={title} description={description} />
+    );
+
+    expect(getByText(title)).toBeTruthy();
+    expect(getByText(description)).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('renders error screen with image correctly', () => {
+    const { toJSON, getByText, getByTestId } = renderWithTheme(
+      <Error
+        visible
+        title={title}
+        description={description}
+        image="path_to_image"
+      />
+    );
+
+    expect(getByText(title)).toBeTruthy();
+    expect(getByText(description)).toBeTruthy();
+    expect(getByTestId('error-image')).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('renders full screen error page correctly', () => {
+    const { toJSON, getByText, getByTestId } = renderWithTheme(
+      <Error
+        visible
+        variant="full-screen"
+        title={title}
+        description={description}
+        image="path_to_image"
+      />
+    );
+
+    expect(getByText(title)).toBeTruthy();
+    expect(getByText(description)).toBeTruthy();
+    expect(getByTestId('error-image')).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('handles CTA press correctly', () => {
+    const onCtaPress = jest.fn();
+    const onSecondaryCtaPress = jest.fn();
+    const { getByText } = renderWithTheme(
+      <Error
+        visible
+        title={title}
+        description={description}
+        image="path_to_image"
+        ctaText="CTA Text"
+        onCtaPress={onCtaPress}
+        secondaryCtaText="Secondary CTA Text"
+        onSecondaryCtaPress={onSecondaryCtaPress}
+      />
+    );
+
+    const CTA = getByText('CTA Text');
+    fireEvent.press(CTA);
+    expect(onCtaPress).toBeCalledTimes(1);
+
+    const secondaryCTA = getByText('Secondary CTA Text');
+    fireEvent.press(secondaryCTA);
+    expect(onSecondaryCtaPress).toBeCalledTimes(1);
+  });
+});

package/src/components/Error/index.tsx

@@ -0,0 +1,215 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import type { ReactElement } from 'react';
+import type { ImageSourcePropType, ViewProps } from 'react-native';
+import {
+  ErrorVariant,
+  StyledErrorButtonContainer,
+  StyledErrorButtonPrimary,
+  StyledErrorButtonSecondary,
+  StyledErrorContainer,
+  StyledErrorContent,
+  StyledErrorDescription,
+  StyledErrorImage,
+  StyledErrorModal,
+  StyledErrorTitle,
+} 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;
+}
+
+type ErrorProps = ErrorPageProps & {
+  /**
+   * Visibility of the error
+   */
+  visible: boolean;
+};
+
+type onCloseCallbackType = 'cta' | 'secondaryCta' | null;
+
+const ErrorPage = ({
+  variant = 'in-page',
+  title,
+  description,
+  image,
+  testID,
+  ctaText,
+  onCtaPress,
+  secondaryCtaText,
+  onSecondaryCtaPress,
+  ...nativeProps
+}: ErrorPageProps): ReactElement => {
+  const showCta = ctaText && onCtaPress !== undefined;
+  const showSecondaryCta =
+    secondaryCtaText && onSecondaryCtaPress !== undefined;
+  const showButtonContainer = showCta || showSecondaryCta;
+  return (
+    <StyledErrorContainer testID={testID} themeVariant={variant}>
+      <StyledErrorContent {...nativeProps}>
+        {image && (
+          <StyledErrorImage
+            source={typeof image === 'string' ? { uri: image } : image}
+            testID="error-image"
+          />
+        )}
+
+        <StyledErrorTitle>{title}</StyledErrorTitle>
+
+        {description && (
+          <StyledErrorDescription>{description}</StyledErrorDescription>
+        )}
+      </StyledErrorContent>
+
+      {showButtonContainer && (
+        <StyledErrorButtonContainer>
+          {showCta && (
+            <StyledErrorButtonPrimary
+              variant="filled"
+              text={ctaText}
+              onPress={onCtaPress}
+            />
+          )}
+          {showSecondaryCta && (
+            <StyledErrorButtonSecondary
+              variant="text"
+              text={secondaryCtaText}
+              onPress={onSecondaryCtaPress}
+            />
+          )}
+        </StyledErrorButtonContainer>
+      )}
+    </StyledErrorContainer>
+  );
+};
+/**
+ * Renders error page
+ *
+ * @param {ErrorProps}
+ * @return {*}  {ReactElement}
+ */
+const Error = ({
+  visible = true,
+  variant = 'in-page',
+  title,
+  description,
+  testID,
+  ctaText,
+  onCtaPress,
+  secondaryCtaText,
+  onSecondaryCtaPress,
+  ...nativeProps
+}: ErrorProps): ReactElement => {
+  const [isVisible, setIsVisible] = useState(visible);
+  const [ctaPressed, setCtaPressed] = useState<onCloseCallbackType>(null);
+
+  const onCloseModal = useCallback(() => {
+    if (ctaPressed === 'cta' && onCtaPress) {
+      onCtaPress();
+    }
+    if (ctaPressed === 'secondaryCta' && onSecondaryCtaPress) {
+      onSecondaryCtaPress();
+    }
+    setCtaPressed(null);
+  }, [ctaPressed, onCtaPress, onSecondaryCtaPress]);
+
+  useEffect(() => {
+    setIsVisible(visible);
+  }, [visible]);
+
+  // These useEffect lines prevents race condition error when callback contains navigation logic
+  useEffect(() => {
+    if (ctaPressed) {
+      setIsVisible(false);
+    }
+  }, [ctaPressed]);
+
+  useEffect(() => {
+    if (!isVisible) {
+      onCloseModal();
+    }
+  }, [isVisible, onCloseModal]);
+
+  if (variant === 'full-screen') {
+    return (
+      <StyledErrorModal
+        visible={isVisible}
+        onRequestClose={() => setIsVisible(false)}
+        onDismiss={() => setIsVisible(false)}
+        animationType="slide"
+      >
+        <ErrorPage
+          variant={variant}
+          title={title}
+          description={description}
+          testID={testID}
+          ctaText={ctaText}
+          onCtaPress={
+            onCtaPress &&
+            (() => {
+              setCtaPressed('cta');
+            })
+          }
+          secondaryCtaText={secondaryCtaText}
+          onSecondaryCtaPress={
+            onSecondaryCtaPress &&
+            (() => {
+              setCtaPressed('secondaryCta');
+            })
+          }
+          {...nativeProps}
+        />
+      </StyledErrorModal>
+    );
+  }
+
+  return (
+    <ErrorPage
+      variant={variant}
+      title={title}
+      description={description}
+      testID={testID}
+      ctaText={ctaText}
+      onCtaPress={onCtaPress}
+      secondaryCtaText={secondaryCtaText}
+      onSecondaryCtaPress={onSecondaryCtaPress}
+      {...nativeProps}
+    />
+  );
+};
+
+export default Error;

package/src/index.ts

@@ -32,6 +32,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';
@@ -90,6 +91,7 @@ export {
   Divider,
   Drawer,
   Empty,
+  Error,
   FAB,
   Icon,
   Image,

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -420,6 +420,36 @@ Object {
         "wrapperPadding": 16,
       },
     },
+    "error": Object {
+      "colors": Object {
+        "description": "#4d6265",
+        "fullScreenBackground": "#ccd2d3",
+        "inPageBackground": "#f6f6f7",
+        "title": "#001f23",
+      },
+      "fontSizes": Object {
+        "description": 18,
+        "title": 24,
+      },
+      "fonts": Object {
+        "description": "RebondGrotesque",
+        "title": "RebondGrotesque-SemiBold",
+      },
+      "sizes": Object {
+        "image": 176,
+      },
+      "space": Object {
+        "button": Object {
+          "margin": 16,
+          "padding": 16,
+          "wrapperHorizontalPadding": 16,
+          "wrapperVerticalPadding": 48,
+        },
+        "imageMarginBottom": 32,
+        "titleMarginBottom": 8,
+        "wrapperPadding": 24,
+      },
+    },
     "fab": Object {
       "colors": Object {
         "actionItemBackground": "#401960",