@hero-design/rn 8.93.0 → 8.94.0

package/src/components/{Error → StatusScreens/Error}/__tests__/__snapshots__/index.spec.tsx.snap

@@ -147,6 +147,306 @@ exports[`Error renders error screen with custom image element correctly 1`] = `
 </View>
 `;
 
+exports[`Error renders error screen with icon correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "#f6f6f7",
+          "display": "flex",
+          "flex": 1,
+          "flexDirection": "column",
+        },
+        undefined,
+      ]
+    }
+    themeVariant="in-page"
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "flex": 1,
+            "flexDirection": "column",
+            "justifyContent": "center",
+            "padding": 24,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "height": 176,
+              "marginBottom": 24,
+              "width": 176,
+            },
+            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="error-icon"
+          vbHeight={72}
+          vbWidth={72}
+          width="72"
+        >
+          <RNSVGGroup
+            fill={
+              {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
+            <RNSVGDefs>
+              <RNSVGClipPath
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                name="clip0_19647_1720"
+              >
+                <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"
+            />
+            <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"
+            />
+            <RNSVGRect
+              fill={
+                {
+                  "payload": 4282390880,
+                  "type": 0,
+                }
+              }
+              height="21.4"
+              propList={
+                [
+                  "fill",
+                  "stroke",
+                  "strokeWidth",
+                ]
+              }
+              rx="1.2"
+              stroke={
+                {
+                  "payload": 4282390880,
+                  "type": 0,
+                }
+              }
+              strokeWidth="0.4"
+              width="4.4"
+              x="38.8"
+              y="15.8"
+            />
+            <RNSVGRect
+              fill={
+                {
+                  "payload": 4282390880,
+                  "type": 0,
+                }
+              }
+              height="4.4"
+              propList={
+                [
+                  "fill",
+                  "stroke",
+                  "strokeWidth",
+                ]
+              }
+              rx="1.2"
+              stroke={
+                {
+                  "payload": 4282390880,
+                  "type": 0,
+                }
+              }
+              strokeWidth="0.4"
+              width="4.4"
+              x="38.8"
+              y="40.8"
+            />
+          </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"
+      >
+        We’re sorry, something went wrong
+      </Text>
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "Saiga-Regular",
+              "fontSize": 18,
+              "letterSpacing": 0.54,
+              "lineHeight": 26,
+            },
+            [
+              {
+                "color": "#4d6265",
+                "textAlign": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeIntent="body"
+        themeTypeface="playful"
+        themeVariant="regular"
+      >
+        Please try again later
+      </Text>
+    </View>
+  </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[`Error renders error screen with image correctly 1`] = `
 <View
   style={

package/src/components/{Error → StatusScreens/Error}/__tests__/index.spec.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
-import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 import Error from '..';
-import Image from '../../Image';
-import Portal from '../../Portal';
+import Image from '../../../Image';
+import Portal from '../../../Portal';
 
 const title = `We’re sorry, something went wrong`;
 const description = 'Please try again later';
@@ -45,6 +45,16 @@ describe('Error', () => {
     expect(getByTestId('error-image')).toBeTruthy();
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it('renders error screen with icon correctly', () => {
+    const { getByTestId, toJSON } = renderWithTheme(
+      <Error title={title} description={description} icon="error" />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByTestId('error-icon')).toBeVisible();
+  });
+
   it('renders full screen error page correctly', () => {
     const { toJSON, getByText, getByTestId } = renderWithTheme(
       <Portal.Provider>

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

@@ -23,8 +23,10 @@ import {
   StyledErrorModal,
   StyledErrorTitle,
 } from './StyledError';
-import { useDeprecation } from '../../utils/hooks';
-import { ImageProps } from '../Image/index';
+import { useDeprecation } from '../../../utils/hooks';
+import { ImageProps } from '../../Image/index';
+import StatusIcon from '../StatusIcon';
+import type { StatusIconName } from '../StatusIcon';
 
 interface ErrorProps extends ViewProps {
   /**
@@ -72,6 +74,10 @@ interface ErrorProps extends ViewProps {
    * Callback when the secondary button is pressed.
    */
   onSecondaryCtaPress?: () => void;
+  /**
+   * Status icon to be displayed, this will replace the image prop.
+   */
+  icon?: StatusIconName;
 }
 
 type onCloseCallbackType = 'cta' | 'secondaryCta' | null;
@@ -93,6 +99,35 @@ const renderImage = (
   );
 };
 
+const renderImageOrIcon = ({
+  image,
+  icon,
+}: {
+  image?:
+    | ReactElement<ImageProps | RNImageProps>
+    | ImageSourcePropType
+    | string;
+  icon?: StatusIconName;
+}) => {
+  if (icon) {
+    return (
+      <StyledErrorImageContainer>
+        <StatusIcon icon={icon} testID="error-icon" />
+      </StyledErrorImageContainer>
+    );
+  }
+
+  if (image) {
+    return (
+      <StyledErrorImageContainer>
+        {renderImage(image)}
+      </StyledErrorImageContainer>
+    );
+  }
+
+  return null;
+};
+
 const ErrorPage = ({
   variant = 'in-page',
   title,
@@ -103,6 +138,7 @@ const ErrorPage = ({
   onCtaPress,
   secondaryCtaText,
   onSecondaryCtaPress,
+  icon,
   ...nativeProps
 }: ErrorProps): ReactElement => {
   const showCta = ctaText && onCtaPress !== undefined;
@@ -116,11 +152,7 @@ const ErrorPage = ({
       {...nativeProps}
     >
       <StyledErrorContent>
-        {image && (
-          <StyledErrorImageContainer>
-            {renderImage(image)}
-          </StyledErrorImageContainer>
-        )}
+        {renderImageOrIcon({ image, icon })}
         <StyledErrorTitle level="h4" typeface="playful">
           {title}
         </StyledErrorTitle>

package/src/components/StatusScreens/StatusIcon/__tests__/index.spec.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import StatusIcon, { StatusIconName } from '..';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+
+describe('StatusIcon', () => {
+  it.each`
+    icon
+    ${'add'}
+    ${'boom'}
+    ${'build'}
+    ${'clock'}
+    ${'confetti'}
+    ${'connections'}
+    ${'error'}
+    ${'info'}
+    ${'list'}
+    ${'location'}
+    ${'merge'}
+    ${'notifications'}
+    ${'search'}
+    ${'star'}
+    ${'success'}
+    ${'user'}
+  `('should render correctly', ({ icon }) => {
+    const { getByTestId } = renderWithTheme(
+      <StatusIcon icon={icon as StatusIconName} testID={`${icon}-icon`} />
+    );
+
+    expect(getByTestId(`${icon}-icon`)).toBeVisible();
+  });
+});

package/src/components/StatusScreens/StatusIcon/assets/Add.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import Svg, { Line, Rect } from 'react-native-svg';
+import { StatusSvgProps } from '../types';
+
+const Add = ({ stroke, fill, testID }: StatusSvgProps) => {
+  return (
+    <Svg width="73" height="72" viewBox="0 0 73 72" testID={testID}>
+      <Rect
+        x="0.100098"
+        y="11.3684"
+        width="60.6316"
+        height="60.6316"
+        rx="20"
+        fill={fill}
+        stroke="transparent"
+      />
+      <Line
+        x1="30.1001"
+        y1="30"
+        x2="53.1001"
+        y2="30"
+        stroke={stroke}
+        strokeWidth="4"
+        strokeLinecap="round"
+      />
+      <Line
+        x1="41.6001"
+        y1="18.5"
+        x2="41.6001"
+        y2="41.5"
+        stroke={stroke}
+        strokeWidth="4"
+        strokeLinecap="round"
+      />
+      <Rect
+        x="13.4685"
+        y="2"
+        width="56.6316"
+        height="56.6316"
+        rx="18"
+        stroke={stroke}
+        fill="transparent"
+        strokeWidth="4"
+      />
+    </Svg>
+  );
+};
+
+export default Add;

package/src/components/StatusScreens/StatusIcon/assets/Boom.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import Svg, { Path, Mask, Rect } from 'react-native-svg';
+import { StatusSvgProps } from '../types';
+
+const Boom = ({ stroke, fill, testID }: StatusSvgProps) => {
+  return (
+    <Svg width={74} height={79} viewBox="0 0 74 79" testID={testID}>
+      <Path
+        d="M17.762 51.247v12.16L2.996 41.693v-3.91l2.172-2.17h3.474l-.868-2.172-1.738-6.515 2.606-2.605 2.606-2.172-.434-6.514 4.343-1.303 3.908 1.303 3.475-2.606h4.343l6.514 9.989h-5.646c-3.33 9.265-9.989 27.882-9.989 28.229z"
+        fill={fill}
+      />
+      <Mask
+        id="a"
+        maskUnits="userSpaceOnUse"
+        x={0}
+        y={10.4197}
+        width={74}
+        height={68}
+        fill="#000"
+      >
+        <Path fill="#fff" d="M0 10.4197H74V78.4197H0z" />
+        <Path d="M6.684 50.157c.67 1.054 1.425 2.303 2.257 3.66 3.266 5.374 7.329 12.056 10.944 15.345.266.245.542.453.81.67 2.999 3.275 6.912 5.515 10.585 6.704 2.71.882 5.316 1.308 7.818 1.308 7.238 0 13.572-3.637 18.566-10.758a9.692 9.692 0 011.9-2.004l11.314-9.035a5.593 5.593 0 002.094-3.845 5.582 5.582 0 00-1.298-4.18c-1.945-2.316-5.537-2.606-7.99-.647l-6.46 5.166c-.244.186-.556.222-.682.14-.068-.045-.15-.185-.2-.438v-.778c.037-.371.127-.833.326-1.426l3.045-9.436h-.014l4.158-12.866c.959-2.954-.67-6.139-3.624-7.098a5.492 5.492 0 00-3.556.059c.29-1.276.15-2.606-.461-3.778a5.572 5.572 0 00-3.289-2.791c-2.954-.959-6.139.67-7.098 3.624l-.407 1.262a5.558 5.558 0 00-2.814-2.072c-2.954-.95-6.139.67-7.098 3.623l-.832 2.584-5.791-9.116c-1.67-2.62-5.153-3.407-7.781-1.737a5.618 5.618 0 00-2.235 2.777c-.8-1.031-1.91-1.773-3.208-2.063a5.608 5.608 0 00-4.252.743c-2.62 1.669-3.407 5.152-1.737 7.78l.705 1.118a5.608 5.608 0 00-3.393.846 5.583 5.583 0 00-2.479 3.533 5.608 5.608 0 00.742 4.253l1.76 2.768a5.61 5.61 0 00-3.393.846 5.583 5.583 0 00-2.479 3.534 5.608 5.608 0 00.742 4.252l4.805 7.473zM4.892 36.816a3.331 3.331 0 012.502-.44c.869.2 1.597.707 2.072 1.462l6.75 10.622c.172.267.43.44.719.511-.683 2.57-1.172 5.004-1.276 7.008-.081 1.67.06 3.23.349 4.714-1.819-2.687-3.601-5.605-5.094-8.07-.833-1.367-1.597-2.63-2.28-3.697L3.86 41.412a3.331 3.331 0 01-.439-2.502 3.291 3.291 0 011.47-2.094zm1.91-9.31c.198-.87.705-1.598 1.46-2.073a3.314 3.314 0 014.574 1.018l7.483 11.78c-.892 2.584-1.855 5.411-2.674 8.175L11.42 36.6l-4.18-6.592a3.264 3.264 0 01-.439-2.502zm5.88-11.812a3.331 3.331 0 012.502-.44c.869.2 1.597.707 2.072 1.462l6.682 10.527-2.085 6.438c-.173.543-.372 1.122-.58 1.75l-6.487-10.215-3.13-4.949c-.973-1.538-.525-3.6 1.026-4.573zm9.673-1.462c1.538-.986 3.6-.52 4.587 1.018l3.904 6.148c-1.172-.185-2.375-.022-3.452.534a5.534 5.534 0 00-2.465 2.538l-3.592-5.65a3.342 3.342 0 011.018-4.588zM54.9 47.958l-.439 1.357a9.392 9.392 0 00-.43 2.005c.014.348.014.696 0 1.04.118 1.09.593 1.715 1.01 2.072.045.045.104.09.149.127.276.199.592.325.927.393.833.186 1.774-.022 2.56-.624l6.452-5.153c1.484-1.18 3.623-1.031 4.772.326.58.697.856 1.565.765 2.466a3.301 3.301 0 01-1.226 2.27l-11.314 9.035a11.756 11.756 0 00-2.353 2.488c-6.17 8.803-14.173 11.685-23.786 8.582-.2-.068-.407-.14-.602-.222a23.216 23.216 0 01-4.253-2.013c-1.75-1.054-3.429-2.375-4.854-3.963-2.723-3.045-4.542-7.066-4.306-12.056.126-2.687 1.09-6.415 2.248-10.156.29-.95.602-1.91.914-2.85.267-.801.534-1.575.787-2.34.163-.474.326-.95.488-1.401.09-.276.2-.557.29-.824.068-.199.127-.38.199-.579.439-1.298.855-2.488 1.194-3.533l1.493-4.61.923-2.868.326-.986a3.308 3.308 0 011.647-1.937 3.321 3.321 0 014.682 3.963l-.303.95-1.701 5.28-.462 1.434-.51 1.43-.937 2.881c-.023.09-.023.172-.037.267-.045.52.254 1.031.778 1.194a1.161 1.161 0 001.462-.742l.117-.357.326-.995.29-.905.036-.09.045-.14.461-1.426.082-.253 2.524-7.804.045-.15.014-.022.453-1.411v-.023l.452-1.412.013-.022 1.425-4.402a3.34 3.34 0 014.18-2.144 3.34 3.34 0 012.145 4.18l-3.117 9.636-.461 1.434-.453 1.389-1.47 4.528-.778 2.42a1.161 1.161 0 001.1 1.52c.022 0 .035-.013.058-.013.045 0 .09-.014.14-.023a.9.9 0 00.267-.081c.045-.023.09-.045.127-.068.081-.045.15-.104.222-.172.036-.036.067-.059.09-.09.09-.105.163-.231.208-.371l1.018-3.14.905-2.778.37-1.135.372-1.158 1.203-3.705 1.226-3.8 1.194-3.683.172-.534.602-1.854 1.031-3.185a3.34 3.34 0 014.18-2.145c.846.276 1.53.855 1.937 1.647.407.787.475 1.692.208 2.538l-.728 2.248-.43 1.308-.068.208-.439 1.357-1.841 5.687-2.895 8.962-1.679 5.198a1.161 1.161 0 001.1 1.52 1.16 1.16 0 001.099-.801l.325-1.018.037-.127 1.538-4.772 2.352-7.261.326-.996.914-2.814 1.122-3.487.244-.751a3.32 3.32 0 014.18-2.131 3.325 3.325 0 012.13 4.18L57.426 40.21l-1.737 5.375-.2.624-.588 1.75z" />
+      </Mask>
+      <Path
+        d="M6.684 50.157c.67 1.054 1.425 2.303 2.257 3.66 3.266 5.374 7.329 12.056 10.944 15.345.266.245.542.453.81.67 2.999 3.275 6.912 5.515 10.585 6.704 2.71.882 5.316 1.308 7.818 1.308 7.238 0 13.572-3.637 18.566-10.758a9.692 9.692 0 011.9-2.004l11.314-9.035a5.593 5.593 0 002.094-3.845 5.582 5.582 0 00-1.298-4.18c-1.945-2.316-5.537-2.606-7.99-.647l-6.46 5.166c-.244.186-.556.222-.682.14-.068-.045-.15-.185-.2-.438v-.778c.037-.371.127-.833.326-1.426l3.045-9.436h-.014l4.158-12.866c.959-2.954-.67-6.139-3.624-7.098a5.492 5.492 0 00-3.556.059c.29-1.276.15-2.606-.461-3.778a5.572 5.572 0 00-3.289-2.791c-2.954-.959-6.139.67-7.098 3.624l-.407 1.262a5.558 5.558 0 00-2.814-2.072c-2.954-.95-6.139.67-7.098 3.623l-.832 2.584-5.791-9.116c-1.67-2.62-5.153-3.407-7.781-1.737a5.618 5.618 0 00-2.235 2.777c-.8-1.031-1.91-1.773-3.208-2.063a5.608 5.608 0 00-4.252.743c-2.62 1.669-3.407 5.152-1.737 7.78l.705 1.118a5.608 5.608 0 00-3.393.846 5.583 5.583 0 00-2.479 3.533 5.608 5.608 0 00.742 4.253l1.76 2.768a5.61 5.61 0 00-3.393.846 5.583 5.583 0 00-2.479 3.534 5.608 5.608 0 00.742 4.252l4.805 7.473zM4.892 36.816a3.331 3.331 0 012.502-.44c.869.2 1.597.707 2.072 1.462l6.75 10.622c.172.267.43.44.719.511-.683 2.57-1.172 5.004-1.276 7.008-.081 1.67.06 3.23.349 4.714-1.819-2.687-3.601-5.605-5.094-8.07-.833-1.367-1.597-2.63-2.28-3.697L3.86 41.412a3.331 3.331 0 01-.439-2.502 3.291 3.291 0 011.47-2.094zm1.91-9.31c.198-.87.705-1.598 1.46-2.073a3.314 3.314 0 014.574 1.018l7.483 11.78c-.892 2.584-1.855 5.411-2.674 8.175L11.42 36.6l-4.18-6.592a3.264 3.264 0 01-.439-2.502zm5.88-11.812a3.331 3.331 0 012.502-.44c.869.2 1.597.707 2.072 1.462l6.682 10.527-2.085 6.438c-.173.543-.372 1.122-.58 1.75l-6.487-10.215-3.13-4.949c-.973-1.538-.525-3.6 1.026-4.573zm9.673-1.462c1.538-.986 3.6-.52 4.587 1.018l3.904 6.148c-1.172-.185-2.375-.022-3.452.534a5.534 5.534 0 00-2.465 2.538l-3.592-5.65a3.342 3.342 0 011.018-4.588zM54.9 47.958l-.439 1.357a9.392 9.392 0 00-.43 2.005c.014.348.014.696 0 1.04.118 1.09.593 1.715 1.01 2.072.045.045.104.09.149.127.276.199.592.325.927.393.833.186 1.774-.022 2.56-.624l6.452-5.153c1.484-1.18 3.623-1.031 4.772.326.58.697.856 1.565.765 2.466a3.301 3.301 0 01-1.226 2.27l-11.314 9.035a11.756 11.756 0 00-2.353 2.488c-6.17 8.803-14.173 11.685-23.786 8.582-.2-.068-.407-.14-.602-.222a23.216 23.216 0 01-4.253-2.013c-1.75-1.054-3.429-2.375-4.854-3.963-2.723-3.045-4.542-7.066-4.306-12.056.126-2.687 1.09-6.415 2.248-10.156.29-.95.602-1.91.914-2.85.267-.801.534-1.575.787-2.34.163-.474.326-.95.488-1.401.09-.276.2-.557.29-.824.068-.199.127-.38.199-.579.439-1.298.855-2.488 1.194-3.533l1.493-4.61.923-2.868.326-.986a3.308 3.308 0 011.647-1.937 3.321 3.321 0 014.682 3.963l-.303.95-1.701 5.28-.462 1.434-.51 1.43-.937 2.881c-.023.09-.023.172-.037.267-.045.52.254 1.031.778 1.194a1.161 1.161 0 001.462-.742l.117-.357.326-.995.29-.905.036-.09.045-.14.461-1.426.082-.253 2.524-7.804.045-.15.014-.022.453-1.411v-.023l.452-1.412.013-.022 1.425-4.402a3.34 3.34 0 014.18-2.144 3.34 3.34 0 012.145 4.18l-3.117 9.636-.461 1.434-.453 1.389-1.47 4.528-.778 2.42a1.161 1.161 0 001.1 1.52c.022 0 .035-.013.058-.013.045 0 .09-.014.14-.023a.9.9 0 00.267-.081c.045-.023.09-.045.127-.068.081-.045.15-.104.222-.172.036-.036.067-.059.09-.09.09-.105.163-.231.208-.371l1.018-3.14.905-2.778.37-1.135.372-1.158 1.203-3.705 1.226-3.8 1.194-3.683.172-.534.602-1.854 1.031-3.185a3.34 3.34 0 014.18-2.145c.846.276 1.53.855 1.937 1.647.407.787.475 1.692.208 2.538l-.728 2.248-.43 1.308-.068.208-.439 1.357-1.841 5.687-2.895 8.962-1.679 5.198a1.161 1.161 0 001.1 1.52 1.16 1.16 0 001.099-.801l.325-1.018.037-.127 1.538-4.772 2.352-7.261.326-.996.914-2.814 1.122-3.487.244-.751a3.32 3.32 0 014.18-2.131 3.325 3.325 0 012.13 4.18L57.426 40.21l-1.737 5.375-.2.624-.588 1.75z"
+        fill={stroke}
+      />
+      <Path
+        d="M6.684 50.157c.67 1.054 1.425 2.303 2.257 3.66 3.266 5.374 7.329 12.056 10.944 15.345.266.245.542.453.81.67 2.999 3.275 6.912 5.515 10.585 6.704 2.71.882 5.316 1.308 7.818 1.308 7.238 0 13.572-3.637 18.566-10.758a9.692 9.692 0 011.9-2.004l11.314-9.035a5.593 5.593 0 002.094-3.845 5.582 5.582 0 00-1.298-4.18c-1.945-2.316-5.537-2.606-7.99-.647l-6.46 5.166c-.244.186-.556.222-.682.14-.068-.045-.15-.185-.2-.438v-.778c.037-.371.127-.833.326-1.426l3.045-9.436h-.014l4.158-12.866c.959-2.954-.67-6.139-3.624-7.098a5.492 5.492 0 00-3.556.059c.29-1.276.15-2.606-.461-3.778a5.572 5.572 0 00-3.289-2.791c-2.954-.959-6.139.67-7.098 3.624l-.407 1.262a5.558 5.558 0 00-2.814-2.072c-2.954-.95-6.139.67-7.098 3.623l-.832 2.584-5.791-9.116c-1.67-2.62-5.153-3.407-7.781-1.737a5.618 5.618 0 00-2.235 2.777c-.8-1.031-1.91-1.773-3.208-2.063a5.608 5.608 0 00-4.252.743c-2.62 1.669-3.407 5.152-1.737 7.78l.705 1.118a5.608 5.608 0 00-3.393.846 5.583 5.583 0 00-2.479 3.533 5.608 5.608 0 00.742 4.253l1.76 2.768a5.61 5.61 0 00-3.393.846 5.583 5.583 0 00-2.479 3.534 5.608 5.608 0 00.742 4.252l4.805 7.473zM4.892 36.816a3.331 3.331 0 012.502-.44c.869.2 1.597.707 2.072 1.462l6.75 10.622c.172.267.43.44.719.511-.683 2.57-1.172 5.004-1.276 7.008-.081 1.67.06 3.23.349 4.714-1.819-2.687-3.601-5.605-5.094-8.07-.833-1.367-1.597-2.63-2.28-3.697L3.86 41.412a3.331 3.331 0 01-.439-2.502 3.291 3.291 0 011.47-2.094zm1.91-9.31c.198-.87.705-1.598 1.46-2.073a3.314 3.314 0 014.574 1.018l7.483 11.78c-.892 2.584-1.855 5.411-2.674 8.175L11.42 36.6l-4.18-6.592a3.264 3.264 0 01-.439-2.502zm5.88-11.812a3.331 3.331 0 012.502-.44c.869.2 1.597.707 2.072 1.462l6.682 10.527-2.085 6.438c-.173.543-.372 1.122-.58 1.75l-6.487-10.215-3.13-4.949c-.973-1.538-.525-3.6 1.026-4.573zm9.673-1.462c1.538-.986 3.6-.52 4.587 1.018l3.904 6.148c-1.172-.185-2.375-.022-3.452.534a5.534 5.534 0 00-2.465 2.538l-3.592-5.65a3.342 3.342 0 011.018-4.588zM54.9 47.958l-.439 1.357a9.392 9.392 0 00-.43 2.005c.014.348.014.696 0 1.04.118 1.09.593 1.715 1.01 2.072.045.045.104.09.149.127.276.199.592.325.927.393.833.186 1.774-.022 2.56-.624l6.452-5.153c1.484-1.18 3.623-1.031 4.772.326.58.697.856 1.565.765 2.466a3.301 3.301 0 01-1.226 2.27l-11.314 9.035a11.756 11.756 0 00-2.353 2.488c-6.17 8.803-14.173 11.685-23.786 8.582-.2-.068-.407-.14-.602-.222a23.216 23.216 0 01-4.253-2.013c-1.75-1.054-3.429-2.375-4.854-3.963-2.723-3.045-4.542-7.066-4.306-12.056.126-2.687 1.09-6.415 2.248-10.156.29-.95.602-1.91.914-2.85.267-.801.534-1.575.787-2.34.163-.474.326-.95.488-1.401.09-.276.2-.557.29-.824.068-.199.127-.38.199-.579.439-1.298.855-2.488 1.194-3.533l1.493-4.61.923-2.868.326-.986a3.308 3.308 0 011.647-1.937 3.321 3.321 0 014.682 3.963l-.303.95-1.701 5.28-.462 1.434-.51 1.43-.937 2.881c-.023.09-.023.172-.037.267-.045.52.254 1.031.778 1.194a1.161 1.161 0 001.462-.742l.117-.357.326-.995.29-.905.036-.09.045-.14.461-1.426.082-.253 2.524-7.804.045-.15.014-.022.453-1.411v-.023l.452-1.412.013-.022 1.425-4.402a3.34 3.34 0 014.18-2.144 3.34 3.34 0 012.145 4.18l-3.117 9.636-.461 1.434-.453 1.389-1.47 4.528-.778 2.42a1.161 1.161 0 001.1 1.52c.022 0 .035-.013.058-.013.045 0 .09-.014.14-.023a.9.9 0 00.267-.081c.045-.023.09-.045.127-.068.081-.045.15-.104.222-.172.036-.036.067-.059.09-.09.09-.105.163-.231.208-.371l1.018-3.14.905-2.778.37-1.135.372-1.158 1.203-3.705 1.226-3.8 1.194-3.683.172-.534.602-1.854 1.031-3.185a3.34 3.34 0 014.18-2.145c.846.276 1.53.855 1.937 1.647.407.787.475 1.692.208 2.538l-.728 2.248-.43 1.308-.068.208-.439 1.357-1.841 5.687-2.895 8.962-1.679 5.198a1.161 1.161 0 001.1 1.52 1.16 1.16 0 001.099-.801l.325-1.018.037-.127 1.538-4.772 2.352-7.261.326-.996.914-2.814 1.122-3.487.244-.751a3.32 3.32 0 014.18-2.131 3.325 3.325 0 012.13 4.18L57.426 40.21l-1.737 5.375-.2.624-.588 1.75z"
+        stroke={stroke}
+        mask="url(#a)"
+      />
+      <Rect
+        x={37.6458}
+        width={2.60578}
+        height={7.81735}
+        rx={1.30289}
+        transform="rotate(2.496 37.646 0)"
+        fill={stroke}
+      />
+      <Rect
+        x={45.5715}
+        y={2.60578}
+        width={2.60578}
+        height={7.81734}
+        rx={1.30289}
+        transform="rotate(23 45.572 2.606)"
+        fill={stroke}
+      />
+      <Rect
+        width={2.60578}
+        height={7.81735}
+        rx={1.30289}
+        transform="scale(-1 1) rotate(23 -22.347 -77.062)"
+        fill={stroke}
+      />
+    </Svg>
+  );
+};
+
+export default Boom;

package/src/components/StatusScreens/StatusIcon/assets/Build.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import Svg, { Path, Rect, Circle } from 'react-native-svg';
+import { StatusSvgProps } from '../types';
+
+const Build = ({ stroke, fill, testID }: StatusSvgProps) => {
+  return (
+    <Svg width="73" height="72" viewBox="0 0 73 72" testID={testID}>
+      <Rect
+        x="0.615723"
+        y="11.3684"
+        width="60.6316"
+        height="60.6316"
+        rx="20"
+        fill={fill}
+        stroke="transparent"
+      />
+      <Rect
+        x="13.9841"
+        y="2"
+        width="56.6316"
+        height="56.6316"
+        rx="18"
+        strokeWidth="4"
+        stroke={stroke}
+        fill="transparent"
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M33.0369 42.8913C32.7714 42.9823 32.4958 43.0278 32.2152 43.0278C31.3833 43.0278 30.602 42.6258 30.1141 41.9507C29.6286 41.2756 29.4971 40.4059 29.7626 39.617L34.9407 24.0827C35.1961 23.3115 35.8004 22.7047 36.5715 22.4443L52.1059 17.2662C53.0364 16.9552 54.0629 17.198 54.7556 17.8932C55.4484 18.5861 55.6911 19.6126 55.3801 20.543L50.202 36.0774C49.9467 36.8485 49.3424 37.4553 48.5712 37.7132L33.0369 42.8913Z"
+        stroke={stroke}
+        fill={stroke}
+      />
+      <Circle
+        cx="43.0267"
+        cy="29.589"
+        r="3.94521"
+        stroke={stroke}
+        fill={fill}
+      />
+    </Svg>
+  );
+};
+
+export default Build;

package/src/components/StatusScreens/StatusIcon/assets/Clock.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import Svg, { Path, Rect } from 'react-native-svg';
+import { StatusSvgProps } from '../types';
+
+const Clock = ({ stroke, fill, testID }: StatusSvgProps) => {
+  return (
+    <Svg width="73" height="73" viewBox="0 0 73 73" testID={testID}>
+      <Rect
+        x="0.384277"
+        y="12.3684"
+        width="60.6316"
+        height="60.6316"
+        rx="20"
+        fill={fill}
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M30.6916 57.4391C33.3944 57.6293 36.8359 57.6316 41.7001 57.6316C46.5643 57.6316 50.0057 57.6293 52.7085 57.4391C55.3738 57.2516 57.0177 56.8957 58.3216 56.3366C62.0954 54.7183 65.1026 51.7111 66.7209 47.9374C67.28 46.6334 67.6358 44.9895 67.8234 42.3242C68.0136 39.6215 68.0159 36.18 68.0159 31.3158C68.0159 26.4516 68.0136 23.0101 67.8234 20.3073C67.6358 17.6421 67.28 15.9982 66.7209 14.6942C65.1026 10.9204 62.0954 7.91326 58.3216 6.29499C57.0177 5.73584 55.3738 5.38001 52.7085 5.19248C50.0057 5.0023 46.5643 5 41.7001 5C36.8359 5 33.3944 5.0023 30.6916 5.19248C28.0264 5.38001 26.3824 5.73584 25.0785 6.29499C21.3047 7.91326 18.2975 10.9204 16.6793 14.6942C16.1201 15.9982 15.7643 17.6421 15.5768 20.3073C15.3866 23.0101 15.3843 26.4516 15.3843 31.3158C15.3843 36.18 15.3866 39.6215 15.5768 42.3242C15.7643 44.9895 16.1201 46.6334 16.6793 47.9374C18.2975 51.7111 21.3047 54.7183 25.0785 56.3366C26.3824 56.8957 28.0264 57.2516 30.6916 57.4391ZM13.003 13.1178C11.3843 16.8927 11.3843 21.7004 11.3843 31.3158C11.3843 40.9312 11.3843 45.7389 13.003 49.5138C15.0259 54.231 18.7848 57.99 23.5021 60.0128C27.2769 61.6316 32.0847 61.6316 41.7001 61.6316C51.3155 61.6316 56.1232 61.6316 59.8981 60.0128C64.6153 57.99 68.3743 54.231 70.3971 49.5138C72.0159 45.7389 72.0159 40.9312 72.0159 31.3158C72.0159 21.7004 72.0159 16.8927 70.3971 13.1178C68.3743 8.40056 64.6153 4.64158 59.8981 2.61874C56.1232 1 51.3155 1 41.7001 1C32.0847 1 27.2769 1 23.5021 2.61874C18.7848 4.64158 15.0259 8.40056 13.003 13.1178Z"
+        fill={stroke}
+      />
+      <Path
+        d="M41.3843 14.8C32.4514 14.8 25.1843 22.0668 25.1843 31C25.1843 39.9332 32.4511 47.2 41.3843 47.2C50.3175 47.2 57.5843 39.9332 57.5843 31C57.5843 22.0668 50.3175 14.8 41.3843 14.8ZM41.3843 43.6011C34.4369 43.6011 28.7829 37.9474 28.7829 30.9996C28.7829 24.0509 34.4365 18.3982 41.3843 18.3982C48.332 18.3982 53.9857 24.0519 53.9857 30.9996C53.9857 37.9474 48.332 43.6011 41.3843 43.6011Z"
+        fill={stroke}
+        stroke={stroke}
+        strokeWidth="0.4"
+      />
+      <Path
+        d="M40.1357 32.5728L40.136 32.5731L45.0853 37.0085L45.0853 37.0085C45.4289 37.3162 45.8587 37.4677 46.2863 37.4677C46.7793 37.4677 47.2717 37.2663 47.6266 36.8693C48.2902 36.1289 48.2276 34.992 47.4874 34.3283L47.4874 34.3283L43.1717 30.46C43.1784 30.4064 43.1836 30.3487 43.1836 30.289V23.3144C43.1836 22.3209 42.3777 21.5151 41.3843 21.5151C40.3909 21.5151 39.585 22.3209 39.585 23.3144V30.289C39.585 30.2924 39.585 30.2968 39.585 30.302C39.5847 30.4004 39.5837 30.8131 39.6409 31.2636C39.671 31.5006 39.7179 31.7543 39.7923 31.9815C39.8651 32.2043 39.9717 32.4253 40.1357 32.5728Z"
+        fill={stroke}
+        stroke={stroke}
+        strokeWidth="0.4"
+      />
+    </Svg>
+  );
+};
+
+export default Clock;