@hero-design/rn 8.16.0 → 8.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.16.0",
+  "version": "8.17.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.16.0",
+    "@hero-design/colors": "8.17.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -32,6 +32,7 @@
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "^1.10.3 | ~2.1.0",
+    "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^5.4.25",
     "react-native-safe-area-context": "^3.0.2",
     "react-native-vector-icons": "^9.1.0",
@@ -44,7 +45,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.16.0",
+    "@hero-design/eslint-plugin": "8.17.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -60,12 +61,13 @@
     "@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.16.0",
+    "eslint-config-hd": "8.17.0",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.16.0",
+    "prettier-config-hd": "8.17.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",
+    "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^5.4.25",
     "react-native-safe-area-context": "^3.0.2",
     "react-native-vector-icons": "^9.1.0",

package/rollup.config.js

@@ -33,6 +33,7 @@ export default {
     'react-native-webview',
     'react-native-pager-view',
     'react-native-vector-icons',
+    'react-native-linear-gradient',
   ],
   plugins: [
     replace({

package/src/components/Error/StyledError.tsx

@@ -50,6 +50,11 @@ const StyledErrorButtonSecondary = styled(Button)(({ theme }) => ({
   padding: theme.__hd__.error.space.button.padding,
 }));
 
+const StyledErrorImageContainer = styled(View)(({ theme }) => ({
+  marginBottom: theme.__hd__.error.space.imageMarginBottom,
+  width: theme.__hd__.error.sizes.image,
+  height: theme.__hd__.error.sizes.image,
+}));
 const StyledErrorImage = styled(Image)(({ theme }) => ({
   marginBottom: theme.__hd__.error.space.imageMarginBottom,
   width: theme.__hd__.error.sizes.image,
@@ -83,4 +88,5 @@ export {
   StyledErrorContent,
   StyledErrorTitle,
   StyledErrorDescription,
+  StyledErrorImageContainer,
 };

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Error renders error screen with image correctly 1`] = `
+exports[`Error renders error screen with custom image element correctly 1`] = `
 <View
   style={
     Array [
@@ -30,32 +30,169 @@ exports[`Error renders error screen with image correctly 1`] = `
       ]
     }
   >
-    <Image
-      source={
-        Object {
-          "uri": "path_to_image",
+    <View
+      style={
+        Array [
+          Object {
+            "height": 176,
+            "marginBottom": 32,
+            "width": 176,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Image
+        source={
+          Object {
+            "uri": "path_to_image",
+          }
         }
+        style={
+          Array [
+            Object {
+              "borderRadius": 0,
+              "height": 72,
+              "width": 72,
+            },
+            undefined,
+          ]
+        }
+        testID="error-image"
+      />
+    </View>
+    <Text
+      allowFontScaling={false}
+      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
+      allowFontScaling={false}
       style={
         Array [
           Object {
-            "borderRadius": 0,
-            "height": 72,
-            "width": 72,
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
           },
           Array [
             Object {
-              "height": 176,
-              "marginBottom": 32,
-              "resizeMode": "contain",
-              "width": 176,
+              "color": "#4d6265",
+              "fontFamily": "RebondGrotesque",
+              "fontSize": 18,
+              "textAlign": "center",
             },
             undefined,
           ],
         ]
       }
-      testID="error-image"
-    />
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeTypeface="neutral"
+    >
+      Please try again later
+    </Text>
+  </View>
+</View>
+`;
+
+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,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "height": 176,
+            "marginBottom": 32,
+            "width": 176,
+          },
+          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"
+      />
+    </View>
     <Text
       allowFontScaling={false}
       style={
@@ -165,32 +302,45 @@ exports[`Error renders full screen error page correctly 1`] = `
         ]
       }
     >
-      <Image
-        source={
-          Object {
-            "uri": "path_to_image",
-          }
-        }
+      <View
         style={
           Array [
             Object {
-              "borderRadius": 0,
-              "height": 72,
-              "width": 72,
+              "height": 176,
+              "marginBottom": 32,
+              "width": 176,
             },
+            undefined,
+          ]
+        }
+      >
+        <Image
+          source={
+            Object {
+              "uri": "path_to_image",
+            }
+          }
+          style={
             Array [
               Object {
-                "height": 176,
-                "marginBottom": 32,
-                "resizeMode": "contain",
-                "width": 176,
+                "borderRadius": 0,
+                "height": 72,
+                "width": 72,
               },
-              undefined,
-            ],
-          ]
-        }
-        testID="error-image"
-      />
+              Array [
+                Object {
+                  "height": 176,
+                  "marginBottom": 32,
+                  "resizeMode": "contain",
+                  "width": 176,
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="error-image"
+        />
+      </View>
       <Text
         allowFontScaling={false}
         style={

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Error from '..';
+import Image from '../../Image';
 
 const title = `We’re sorry, something went wrong`;
 const description = 'Please try again later';
@@ -26,6 +27,23 @@ describe('Error', () => {
     expect(getByTestId('error-image')).toBeTruthy();
     expect(toJSON()).toMatchSnapshot();
   });
+  it('renders error screen with custom image element correctly', () => {
+    const image = (
+      <Image
+        source={{
+          uri: 'path_to_image',
+        }}
+      />
+    );
+    const { toJSON, getByText, getByTestId } = renderWithTheme(
+      <Error title={title} description={description} image={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

package/src/components/Error/index.tsx

@@ -1,6 +1,15 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import type { ReactElement } from 'react';
-import type { ImageSourcePropType, ViewProps } from 'react-native';
+import React, {
+  ReactElement,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+import type {
+  ImageSourcePropType,
+  ViewProps,
+  ImageProps as RNImageProps,
+} from 'react-native';
 import {
   ErrorVariant,
   StyledErrorButtonContainer,
@@ -10,10 +19,12 @@ import {
   StyledErrorContent,
   StyledErrorDescription,
   StyledErrorImage,
+  StyledErrorImageContainer,
   StyledErrorModal,
   StyledErrorTitle,
 } from './StyledError';
 import { useDeprecation } from '../../utils/hooks';
+import { ImageProps } from '../Image/index';
 
 interface ErrorProps extends ViewProps {
   /**
@@ -37,7 +48,10 @@ interface ErrorProps extends ViewProps {
   /**
    * Image of the error
    */
-  image?: ImageSourcePropType | string;
+  image?:
+    | ReactElement<ImageProps | RNImageProps>
+    | ImageSourcePropType
+    | string;
   /**
    * Testing id of the component.
    */
@@ -62,6 +76,23 @@ interface ErrorProps extends ViewProps {
 
 type onCloseCallbackType = 'cta' | 'secondaryCta' | null;
 
+const renderImage = (
+  image: ReactElement<ImageProps | RNImageProps> | ImageSourcePropType | string
+) => {
+  if (isValidElement(image)) {
+    return React.cloneElement(image, {
+      testID: 'error-image',
+    });
+  }
+
+  return (
+    <StyledErrorImage
+      source={typeof image === 'string' ? { uri: image } : image}
+      testID="error-image"
+    />
+  );
+};
+
 const ErrorPage = ({
   variant = 'in-page',
   title,
@@ -79,15 +110,17 @@ const ErrorPage = ({
     secondaryCtaText && onSecondaryCtaPress !== undefined;
   const showButtonContainer = showCta || showSecondaryCta;
   return (
-    <StyledErrorContainer testID={testID} themeVariant={variant}>
-      <StyledErrorContent {...nativeProps}>
+    <StyledErrorContainer
+      testID={testID}
+      themeVariant={variant}
+      {...nativeProps}
+    >
+      <StyledErrorContent>
         {image && (
-          <StyledErrorImage
-            source={typeof image === 'string' ? { uri: image } : image}
-            testID="error-image"
-          />
+          <StyledErrorImageContainer>
+            {renderImage(image)}
+          </StyledErrorImageContainer>
         )}
-
         <StyledErrorTitle>{title}</StyledErrorTitle>
 
         {description && (

package/src/components/Skeleton/StyledSkeleton.tsx

@@ -0,0 +1,25 @@
+import styled from '@emotion/native';
+import Box from '../Box';
+
+type ThemeIntent = 'light' | 'dark';
+type ThemeVariant = 'circular' | 'rectangular' | 'rounded';
+
+const StyledContainer = styled(Box)<{
+  themeIntent: ThemeIntent;
+  themeVariant: ThemeVariant;
+}>(({ theme, themeIntent, themeVariant }) => ({
+  backgroundColor:
+    themeIntent === 'light'
+      ? theme.__hd__.skeleton.colors.lightBackground
+      : theme.__hd__.skeleton.colors.darkBackground,
+  borderRadius: theme.__hd__.skeleton.radii[themeVariant],
+}));
+
+const StyledGradientContainer = styled(Box)<{ themeVariant: ThemeVariant }>(
+  ({ theme, themeVariant }) => ({
+    overflow: 'hidden',
+    borderRadius: theme.__hd__.skeleton.radii[themeVariant],
+  })
+);
+
+export { StyledContainer, StyledGradientContainer };