@hero-design/rn 8.22.0-alpha.0 → 8.23.0

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

@@ -0,0 +1,497 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Success renders full screen success page correctly 1`] = `
+<Modal
+  animationType="slide"
+  hardwareAccelerated={false}
+  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,
+        ]
+      }
+    >
+      <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="success-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 {
+              "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[`Success renders succe screen with custom image element 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,
+            },
+            undefined,
+          ]
+        }
+        testID="success-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 {
+            "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[`Success renders success 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="success-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 {
+            "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[`Success 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
+      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 {
+            "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/Success/__tests__/index.spec.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Success from '..';
+import Image from '../../Image';
+
+const title = `We’re sorry, something went wrong`;
+const description = 'Please try again later';
+
+describe('Success', () => {
+  it('renders title only correctly', () => {
+    const { toJSON, getByText } = renderWithTheme(
+      <Success title={title} description={description} />
+    );
+
+    expect(getByText(title)).toBeTruthy();
+    expect(getByText(description)).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('renders success screen with image correctly', () => {
+    const { toJSON, getByText, getByTestId } = renderWithTheme(
+      <Success title={title} description={description} image="path_to_image" />
+    );
+
+    expect(getByText(title)).toBeTruthy();
+    expect(getByText(description)).toBeTruthy();
+    expect(getByTestId('success-image')).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('renders succe screen with custom image element correctly', () => {
+    const image = (
+      <Image
+        source={{
+          uri: 'path_to_image',
+        }}
+      />
+    );
+    const { toJSON, getByText, getByTestId } = renderWithTheme(
+      <Success title={title} description={description} image={image} />
+    );
+
+    expect(getByText(title)).toBeTruthy();
+    expect(getByText(description)).toBeTruthy();
+    expect(getByTestId('success-image')).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('renders full screen success page correctly', () => {
+    const { toJSON, getByText, getByTestId } = renderWithTheme(
+      <Success
+        variant="full-screen"
+        title={title}
+        description={description}
+        image="path_to_image"
+      />
+    );
+
+    expect(getByText(title)).toBeTruthy();
+    expect(getByText(description)).toBeTruthy();
+    expect(getByTestId('success-image')).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('handles CTA press correctly', () => {
+    const onCtaPress = jest.fn();
+    const { getByText } = renderWithTheme(
+      <Success
+        title={title}
+        description={description}
+        image="path_to_image"
+        ctaText="CTA Text"
+        onCtaPress={onCtaPress}
+      />
+    );
+
+    const CTA = getByText('CTA Text');
+    fireEvent.press(CTA);
+    expect(onCtaPress).toBeCalledTimes(1);
+  });
+});

package/src/components/Success/index.tsx

@@ -0,0 +1,129 @@
+import React, { ReactElement, isValidElement } from 'react';
+import type {
+  ViewProps,
+  ImageSourcePropType,
+  ImageProps as RNImageProps,
+} from 'react-native';
+import {
+  SuccessVariant,
+  StyledSuccessImage,
+  StyledSuccessContainer,
+  StyledSuccessContent,
+  StyledSuccessImageContainer,
+  StyledSuccessTitle,
+  StyledSuccessDescription,
+  StyledSuccessButtonContainer,
+  StyledSuccessButtonPrimary,
+  StyledSuccessModal,
+} from './StyledSuccess';
+import { ImageProps } from '../Image';
+import { noop } from '../../utils/functions';
+
+export interface SuccessProps extends ViewProps {
+  /**
+   * Image to be displayed.
+   */
+  image?:
+    | ReactElement<ImageProps | RNImageProps>
+    | ImageSourcePropType
+    | string;
+  /**
+   * Success's title.
+   */
+  title: string;
+  /**
+   * Success's description.
+   */
+  description?: string;
+  /**
+   * Success's variant.
+   */
+  variant?: SuccessVariant;
+  /**
+   * Action button text
+   */
+  ctaText?: string;
+  /**
+   * Callback when the action button is pressed.
+   */
+  onCtaPress?: () => void;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const renderImage = (
+  image: ReactElement<ImageProps | RNImageProps> | ImageSourcePropType | string
+) => {
+  if (isValidElement(image)) {
+    return React.cloneElement(image, {
+      testID: 'success-image',
+    });
+  }
+
+  return (
+    <StyledSuccessImage
+      source={typeof image === 'string' ? { uri: image } : image}
+      testID="success-image"
+    />
+  );
+};
+
+const SuccessPage = ({
+  variant = 'in-page',
+  title,
+  description,
+  image,
+  testID,
+  ctaText,
+  onCtaPress = noop,
+  ...nativeProps
+}: SuccessProps): ReactElement => {
+  return (
+    <StyledSuccessContainer
+      testID={testID}
+      themeVariant={variant}
+      {...nativeProps}
+    >
+      <StyledSuccessContent>
+        {!!image && (
+          <StyledSuccessImageContainer>
+            {renderImage(image)}
+          </StyledSuccessImageContainer>
+        )}
+        <StyledSuccessTitle>{title}</StyledSuccessTitle>
+
+        {!!description && (
+          <StyledSuccessDescription>{description}</StyledSuccessDescription>
+        )}
+      </StyledSuccessContent>
+
+      {!!ctaText && (
+        <StyledSuccessButtonContainer>
+          <StyledSuccessButtonPrimary text={ctaText} onPress={onCtaPress} />
+        </StyledSuccessButtonContainer>
+      )}
+    </StyledSuccessContainer>
+  );
+};
+
+/**
+ * Renders success page
+ *
+ * @param {SuccessProps} props
+ * @return {*}  {ReactElement}
+ */
+const Success = (props: SuccessProps): ReactElement => {
+  const { variant } = props;
+  if (variant === 'full-screen') {
+    return (
+      <StyledSuccessModal animationType="slide">
+        <SuccessPage {...props} />
+      </StyledSuccessModal>
+    );
+  }
+
+  return <SuccessPage {...props} />;
+};
+export default Success;

package/src/components/Tag/StyledTag.tsx

@@ -14,7 +14,7 @@ type ThemeIntent =
 type ThemeVariant = 'filled' | 'outlined';
 
 const getFilledStyles = (themeIntent: ThemeIntent, theme: Theme) => ({
-  textColor: theme.__hd__.tag.colors.text,
+  textColor: theme.__hd__.tag.colors[themeIntent],
   borderColor: theme.__hd__.tag.colors[`${themeIntent}Background`],
   backgroundColor: theme.__hd__.tag.colors[`${themeIntent}Background`],
 });