@hero-design/rn 8.92.3 → 8.94.0

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

@@ -335,6 +335,269 @@ exports[`Success renders success screen with custom image element correctly 1`]
 </View>
 `;
 
+exports[`Success renders success 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": 32,
+              "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="success-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"
+      >
+        Two-Factor Authentication
+      </Text>
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
+            },
+            [
+              {
+                "color": "#4d6265",
+                "textAlign": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeIntent="body"
+        themeTypeface="neutral"
+        themeVariant="regular"
+      >
+        Protecting your sensitive data is important to us. Verifying your mobile number or using an authenticator app makes it harder for attackers to access personal and sensitive information.
+      </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[`Success renders success screen with image correctly 1`] = `
 <View
   style={

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
-import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 import Success from '..';
-import Image from '../../Image';
-import Portal from '../../Portal';
-import Typography from '../../Typography';
+import Image from '../../../Image';
+import Portal from '../../../Portal';
+import Typography from '../../../Typography';
 
 const title = `Two-Factor Authentication`;
 const description = `Protecting your sensitive data is important to us. Verifying your mobile number or using an authenticator app makes it harder for attackers to access personal and sensitive information.`;
@@ -69,6 +69,15 @@ describe('Success', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
+  it('renders success screen with icon correctly', () => {
+    const { toJSON, getByTestId } = renderWithTheme(
+      <Success title={title} description={description} icon="success" />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByTestId('success-icon')).toBeVisible();
+  });
+
   it('renders full screen success page correctly', () => {
     const { toJSON, getByText, getByTestId } = renderWithTheme(
       <Portal.Provider>

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

@@ -16,8 +16,9 @@ import {
   StyledSuccessButtonPrimary,
   StyledSuccessModal,
 } from './StyledSuccess';
-import { ImageProps } from '../Image';
-import { noop } from '../../utils/functions';
+import { ImageProps } from '../../Image';
+import { noop } from '../../../utils/functions';
+import StatusIcon, { StatusIconName } from '../StatusIcon';
 
 export interface SuccessProps extends ViewProps {
   /**
@@ -59,6 +60,10 @@ export interface SuccessProps extends ViewProps {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Status icon to be displayed, this will replace the image prop.
+   */
+  icon?: StatusIconName;
 }
 
 const renderImage = (
@@ -78,6 +83,35 @@ const renderImage = (
   );
 };
 
+const renderImageOrIcon = ({
+  image,
+  icon,
+}: {
+  image?:
+    | ReactElement<ImageProps | RNImageProps>
+    | ImageSourcePropType
+    | string;
+  icon?: StatusIconName;
+}) => {
+  if (icon) {
+    return (
+      <StyledSuccessImageContainer>
+        <StatusIcon icon={icon} testID="success-icon" />
+      </StyledSuccessImageContainer>
+    );
+  }
+
+  if (image) {
+    return (
+      <StyledSuccessImageContainer>
+        {renderImage(image)}
+      </StyledSuccessImageContainer>
+    );
+  }
+
+  return null;
+};
+
 const SuccessPage = ({
   variant = 'in-page',
   title,
@@ -88,6 +122,7 @@ const SuccessPage = ({
   onCtaPress = noop,
   secondaryCtaText,
   onSecondaryCtaPress,
+  icon,
   ...nativeProps
 }: SuccessProps): ReactElement => {
   const showSecondaryButton = secondaryCtaText && onSecondaryCtaPress;
@@ -99,11 +134,7 @@ const SuccessPage = ({
       {...nativeProps}
     >
       <StyledSuccessContent>
-        {!!image && (
-          <StyledSuccessImageContainer>
-            {renderImage(image)}
-          </StyledSuccessImageContainer>
-        )}
+        {renderImageOrIcon({ image, icon })}
         <StyledSuccessTitle level="h4" typeface="playful">
           {title}
         </StyledSuccessTitle>

package/src/index.ts

@@ -38,8 +38,8 @@ import ContentNavigator from './components/ContentNavigator';
 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 Empty from './components/StatusScreens/Empty';
+import Error from './components/StatusScreens/Error';
 import FAB from './components/FAB';
 import HeroDesignProvider from './components/HeroDesignProvider';
 import MapPin from './components/MapPin';
@@ -55,7 +55,7 @@ import Radio from './components/Radio';
 import SectionHeading from './components/SectionHeading';
 import Select from './components/Select';
 import Skeleton from './components/Skeleton';
-import Success from './components/Success';
+import Success from './components/StatusScreens/Success';
 import Switch from './components/Switch';
 import Tabs from './components/Tabs';
 import Tag from './components/Tag';

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

@@ -148,6 +148,7 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "archived": "#606065",
         "border": "#ffffff",
+        "countText": "#ffffff",
         "danger": "#cb300a",
         "info": "#355bfb",
         "primary": "#401960",
@@ -156,6 +157,7 @@ exports[`theme returns correct theme object 1`] = `
         "warning": "#ac5d00",
       },
       "fontSizes": {
+        "count": 6,
         "icon": {
           "medium": 12,
           "small": 8,
@@ -168,10 +170,18 @@ exports[`theme returns correct theme object 1`] = `
         "small": "BeVietnamPro-SemiBold",
       },
       "lineHeights": {
+        "count": 12,
         "medium": 16,
         "small": 10,
       },
+      "radii": {
+        "count": 999,
+      },
       "sizes": {
+        "count": {
+          "height": 12,
+          "width": 12,
+        },
         "medium": {
           "height": 24,
           "minWidth": 24,
@@ -184,6 +194,7 @@ exports[`theme returns correct theme object 1`] = `
         "statusWidth": 8,
       },
       "space": {
+        "countPaddingHorizontal": 2,
         "medium": {
           "horizontalPadding": 8,
         },

package/src/theme/components/badge.ts

@@ -1,3 +1,4 @@
+import { Platform } from 'react-native';
 import type { GlobalTheme } from '../global';
 
 const getBadgeTheme = (theme: GlobalTheme) => {
@@ -10,6 +11,7 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     archived: theme.colors.onArchivedSurface,
     text: theme.colors.onDarkGlobalSurface,
     border: theme.colors.defaultGlobalSurface,
+    countText: theme.colors.onDarkGlobalSurface,
   };
 
   const fonts = {
@@ -24,11 +26,20 @@ const getBadgeTheme = (theme: GlobalTheme) => {
       medium: theme.fontSizes.small,
       small: 8,
     },
+    count: 6,
   };
 
   const lineHeights = {
     medium: theme.lineHeights.small,
     small: 10,
+    count: Platform.select({
+      android: 11, // vertical alignment
+      default: 12,
+    }),
+  };
+
+  const radii = {
+    count: theme.radii.rounded,
   };
 
   const sizes = {
@@ -42,6 +53,10 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     },
     statusHeight: theme.sizes.small,
     statusWidth: theme.sizes.small,
+    count: {
+      width: theme.sizes.smallMedium,
+      height: theme.sizes.smallMedium,
+    },
   };
 
   const borderWidths = {
@@ -57,9 +72,19 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     },
     statusPositionTop: -theme.space.xxsmall,
     statusPositionRight: -theme.space.xxsmall,
+    countPaddingHorizontal: theme.space.xxsmall,
   };
 
-  return { colors, fonts, fontSizes, sizes, space, lineHeights, borderWidths };
+  return {
+    colors,
+    fonts,
+    fontSizes,
+    sizes,
+    space,
+    lineHeights,
+    borderWidths,
+    radii,
+  };
 };
 
 export type BadgeThemeType = ReturnType<typeof getBadgeTheme>;