@hero-design/rn 8.12.5-alpha.1 → 8.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.12.5-alpha.1",
+  "version": "8.13.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.12.5",
+    "@hero-design/colors": "8.13.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -44,7 +44,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.12.5",
+    "@hero-design/eslint-plugin": "8.13.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -60,9 +60,9 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.12.5",
+    "eslint-config-hd": "8.13.0",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.12.5",
+    "prettier-config-hd": "8.13.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Error/StyledError.tsx

@@ -0,0 +1,86 @@
+import styled from '@emotion/native';
+import { Modal, View } from 'react-native';
+import Image from '../Image';
+import Typography from '../Typography';
+import Button from '../Button';
+
+type ErrorVariant = 'full-screen' | 'in-page';
+
+const StyledErrorModal = styled(Modal)({
+  height: '100%',
+  width: '100%',
+});
+
+const StyledErrorContainer = styled(View)<{ themeVariant: ErrorVariant }>(
+  ({ theme, themeVariant }) => ({
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    backgroundColor:
+      themeVariant === 'in-page'
+        ? theme.__hd__.error.colors.inPageBackground
+        : theme.__hd__.error.colors.fullScreenBackground,
+  })
+);
+
+const StyledErrorContent = styled(View)(({ theme }) => ({
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: theme.__hd__.error.space.wrapperPadding,
+}));
+
+const StyledErrorButtonContainer = styled(View)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  paddingHorizontal: theme.__hd__.error.space.button.wrapperHorizontalPadding,
+  paddingVertical: theme.__hd__.error.space.button.wrapperVerticalPadding,
+}));
+
+const StyledErrorButtonPrimary = styled(Button)(({ theme }) => ({
+  padding: theme.__hd__.error.space.button.padding,
+}));
+
+const StyledErrorButtonSecondary = styled(Button)(({ theme }) => ({
+  marginTop: theme.__hd__.error.space.button.margin,
+  padding: theme.__hd__.error.space.button.padding,
+}));
+
+const StyledErrorImage = styled(Image)(({ theme }) => ({
+  marginBottom: theme.__hd__.error.space.imageMarginBottom,
+  width: theme.__hd__.error.sizes.image,
+  height: theme.__hd__.error.sizes.image,
+  resizeMode: 'contain',
+}));
+
+const StyledErrorTitle = styled(Typography.Text)(({ theme }) => ({
+  fontFamily: theme.__hd__.error.fonts.title,
+  fontSize: theme.__hd__.error.fontSizes.title,
+  textAlign: 'center',
+  marginBottom: theme.__hd__.error.space.titleMarginBottom,
+  color: theme.__hd__.error.colors.title,
+}));
+
+const StyledErrorDescription = styled(Typography.Text)(({ theme }) => ({
+  fontFamily: theme.__hd__.error.fonts.description,
+  fontSize: theme.__hd__.error.fontSizes.description,
+  textAlign: 'center',
+  color: theme.__hd__.error.colors.description,
+}));
+
+export {
+  ErrorVariant,
+  StyledErrorModal,
+  StyledErrorImage,
+  StyledErrorContainer,
+  StyledErrorButtonContainer,
+  StyledErrorButtonPrimary,
+  StyledErrorButtonSecondary,
+  StyledErrorContent,
+  StyledErrorTitle,
+  StyledErrorDescription,
+};

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);
+  });
+});