@hero-design/rn 8.92.3 → 8.94.0

package/src/components/StatusScreens/Empty/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,468 @@
+// 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 icon correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "display": "flex",
+          "flex": 1,
+          "flexDirection": "column",
+          "justifyContent": "center",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "marginBottom": 24,
+          },
+          undefined,
+        ]
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight="72"
+        bbWidth="72"
+        focusable={false}
+        height="72"
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            {
+              "flex": 0,
+              "height": 72,
+              "width": 72,
+            },
+          ]
+        }
+        testID="empty-icon"
+        vbHeight={72}
+        vbWidth={72}
+        width="72"
+      >
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+        >
+          <RNSVGDefs>
+            <RNSVGClipPath
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+              name="clip0_19647_1726"
+            >
+              <RNSVGRect
+                fill={
+                  {
+                    "payload": 4294967295,
+                    "type": 0,
+                  }
+                }
+                height="72"
+                propList={
+                  [
+                    "fill",
+                  ]
+                }
+                width="71.6316"
+                x={0}
+                y={0}
+              />
+            </RNSVGClipPath>
+          </RNSVGDefs>
+          <RNSVGRect
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+            height="60.6316"
+            propList={
+              [
+                "stroke",
+              ]
+            }
+            rx="20"
+            stroke={
+              {
+                "payload": 0,
+                "type": 0,
+              }
+            }
+            width="60.6316"
+            x={0}
+            y="11.3684"
+          />
+          <RNSVGPath
+            clipRule={0}
+            d="M53.5235 19.5692L53.5265 19.5662C52.9085 19.6113 52.3367 19.8945 51.934 20.3553L38.3475 35.8072L31.977 29.3614H31.9739C31.5435 28.9306 30.9563 28.6836 30.3383 28.6776C29.7234 28.6716 29.13 28.9065 28.6903 29.3312C27.7834 30.2047 27.768 31.6355 28.6565 32.53L36.776 40.7468C37.228 41.2047 37.8582 41.4547 38.5069 41.4366C39.1587 41.4185 39.7706 41.1324 40.1948 40.6505L55.4381 23.3039V23.3009C56.2713 22.3551 56.1668 20.9214 55.1983 20.1021C54.7341 19.7166 54.1314 19.5238 53.5258 19.569L53.5235 19.5692Z"
+            fill={
+              {
+                "payload": 4282390880,
+                "type": 0,
+              }
+            }
+            fillRule={0}
+            propList={
+              [
+                "fill",
+                "fillRule",
+              ]
+            }
+          />
+          <RNSVGRect
+            fill={
+              {
+                "payload": 0,
+                "type": 0,
+              }
+            }
+            height="56.6316"
+            propList={
+              [
+                "fill",
+                "stroke",
+                "strokeWidth",
+              ]
+            }
+            rx="18"
+            stroke={
+              {
+                "payload": 4282390880,
+                "type": 0,
+              }
+            }
+            strokeWidth="4"
+            width="56.6316"
+            x="13"
+            y="2"
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <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,
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "marginBottom": 24,
+          },
+          undefined,
+        ]
+      }
+      testID="empty-image"
+    >
+      <Image
+        source={
+          {
+            "uri": "path_to_image",
+          }
+        }
+      />
+    </View>
+    <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 → StatusScreens/Empty}/__tests__/index.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Image } from 'react-native';
 
-import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 import Empty from '..';
 
 describe('Empty', () => {
@@ -17,7 +17,7 @@ describe('Empty', () => {
   });
 
   it('renders empty state with image correctly', () => {
-    const { toJSON } = renderWithTheme(
+    const { toJSON, getByTestId } = renderWithTheme(
       <Empty
         image={<Image source={{ uri: 'path_to_image' }} />}
         title="You have no notification at this time"
@@ -26,5 +26,19 @@ describe('Empty', () => {
     );
 
     expect(toJSON()).toMatchSnapshot();
+    expect(getByTestId('empty-image')).toBeVisible();
+  });
+
+  it('renders empty state with icon correctly', () => {
+    const { toJSON, getByTestId } = renderWithTheme(
+      <Empty
+        icon="success"
+        title="You have no notification at this time"
+        description="We'll notify you later."
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByTestId('empty-icon')).toBeVisible();
   });
 });

package/src/components/StatusScreens/Empty/index.tsx

@@ -0,0 +1,97 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type {
+  ImageProps as RNImageProps,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+import { ImageProps } from '../../Image';
+import StatusIcon, { StatusIconName } from '../StatusIcon';
+import {
+  StyledDescription,
+  StyledEmptyImageContainer,
+  StyledTitle,
+  StyledWrapper,
+} 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;
+  /**
+   * Status icon to be displayed, this will replace the image prop.
+   */
+  icon?: StatusIconName;
+}
+
+const renderImageOrIcon = ({
+  image,
+  icon,
+}: {
+  image?: ReactElement<ImageProps | RNImageProps>;
+  icon?: StatusIconName;
+}) => {
+  if (icon) {
+    return (
+      <StyledEmptyImageContainer>
+        <StatusIcon icon={icon} testID="empty-icon" />
+      </StyledEmptyImageContainer>
+    );
+  }
+
+  if (image) {
+    return (
+      <StyledEmptyImageContainer testID="empty-image">
+        {image}
+      </StyledEmptyImageContainer>
+    );
+  }
+
+  return null;
+};
+
+const Empty = ({
+  image,
+  title,
+  description,
+  style,
+  testID,
+  variant = 'light',
+  icon,
+}: EmptyProps): ReactElement => (
+  <StyledWrapper style={style} testID={testID}>
+    {renderImageOrIcon({ image, icon })}
+    <StyledTitle themeVariant={variant} level="h4" typeface="playful">
+      {title}
+    </StyledTitle>
+    {!!description && (
+      <StyledDescription variant="small" themeVariant={variant}>
+        {description}
+      </StyledDescription>
+    )}
+  </StyledWrapper>
+);
+
+export default Empty;

package/src/components/{Error → StatusScreens/Error}/StyledError.tsx

@@ -1,9 +1,9 @@
 import styled from '@emotion/native';
 import { View } from 'react-native';
-import Image from '../Image';
-import Typography from '../Typography';
-import Button from '../Button';
-import Modal from '../Modal';
+import Image from '../../Image';
+import Typography from '../../Typography';
+import Button from '../../Button';
+import Modal from '../../Modal';
 
 type ErrorVariant = 'full-screen' | 'in-page';