@hero-design/rn 7.22.1 → 7.22.3

package/src/components/TextInput/index.tsx

@@ -1,11 +1,11 @@
-import React from "react";
-import { StyleSheet } from "react-native";
+import React from 'react';
+import { StyleSheet } from 'react-native';
 import type {
   TextInputProps as NativeTextInputProps,
   StyleProp,
   ViewStyle,
   TextStyle,
-} from "react-native";
+} from 'react-native';
 import {
   StyledTextInputContainer,
   StyledLabel,
@@ -22,13 +22,12 @@ import {
   StyledTextInputAndLabelContainer,
   StyledLabelContainerInsideTextInput,
   StyledErrorAndHelpTextContainer,
-  StyledBorderBackDrop,
   StyledErrorAndMaxLengthContainer,
-} from "./StyledTextInput";
-import Icon from "../Icon";
-import { useTheme } from "../../theme";
-import type { Variant } from "./StyledTextInput";
-import type { IconName } from "../Icon";
+} from './StyledTextInput';
+import Icon from '../Icon';
+import { useTheme } from '../../theme';
+import type { Variant } from './StyledTextInput';
+import type { IconName } from '../Icon';
 
 export interface TextInputProps extends NativeTextInputProps {
   /**
@@ -114,21 +113,21 @@ export const getVariant = ({
   isEmptyValue?: boolean;
 }): Variant => {
   if (disabled) {
-    return "disabled";
+    return 'disabled';
   }
   if (error) {
-    return "error";
+    return 'error';
   }
   if (!editable || loading) {
-    return "readonly";
+    return 'readonly';
   }
   if (isFocused) {
-    return "focused";
+    return 'focused';
   }
   if (!isEmptyValue) {
-    return "filled";
+    return 'filled';
   }
-  return "default";
+  return 'default';
 };
 
 const TextInput = ({
@@ -151,9 +150,9 @@ const TextInput = ({
   renderInputValue,
   ...nativeProps
 }: TextInputProps): JSX.Element => {
-  const displayText = (value !== undefined ? value : defaultValue) ?? "";
+  const displayText = (value !== undefined ? value : defaultValue) ?? '';
   const isEmptyValue = displayText.length === 0;
-  const actualSuffix = loading ? "loading" : suffix;
+  const actualSuffix = loading ? 'loading' : suffix;
 
   const [isFocused, setIsFocused] = React.useState(false);
 
@@ -175,9 +174,9 @@ const TextInput = ({
       { color: theme.__hd__.textInput.colors.text },
       textStyle,
     ]),
-    testID: "text-input",
+    testID: 'text-input',
     accessibilityState: {
-      disabled: variant === "disabled" || variant === "readonly",
+      disabled: variant === 'disabled' || variant === 'readonly',
     },
     // @ts-ignore
     accessibilityLabelledBy,
@@ -197,18 +196,19 @@ const TextInput = ({
       nativeProps.onChangeText?.(text);
     },
     defaultValue,
-    placeholder: variant === "focused" ? nativeProps.placeholder : undefined,
+    placeholder: variant === 'focused' ? nativeProps.placeholder : undefined,
   };
 
   return (
     <StyledContainer
       pointerEvents={
-        variant === "disabled" || variant === "readonly" ? "none" : "auto"
+        variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto'
       }
       testID={testID}
+      style={style}
+      themeVariant={variant}
     >
       <StyledTextInputContainer>
-        <StyledBorderBackDrop themeVariant={variant} style={style} />
         {(isFocused || (label && !isEmptyValue)) && (
           <StyledLabelContainer pointerEvents="none">
             {required && (
@@ -228,9 +228,9 @@ const TextInput = ({
             )}
           </StyledLabelContainer>
         )}
-        {typeof prefix === "string" ? (
+        {typeof prefix === 'string' ? (
           <Icon
-            intent={variant === "disabled" ? "disabled-text" : "text"}
+            intent={variant === 'disabled' ? 'disabled-text' : 'text'}
             testID="input-prefix"
             icon={prefix}
             size="xsmall"
@@ -264,12 +264,12 @@ const TextInput = ({
             <StyledTextInput {...nativeInputProps} />
           )}
         </StyledTextInputAndLabelContainer>
-        {typeof actualSuffix === "string" ? (
+        {typeof actualSuffix === 'string' ? (
           <Icon
-            intent={variant === "disabled" ? "disabled-text" : "text"}
+            intent={variant === 'disabled' ? 'disabled-text' : 'text'}
             testID="input-suffix"
             icon={actualSuffix}
-            spin={actualSuffix === "loading"}
+            spin={actualSuffix === 'loading'}
             size="xsmall"
           />
         ) : (

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap

@@ -26,12 +26,16 @@ exports[`TimePickerAndroid renders correctly 1`] = `
       style={
         Array [
           Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
             "marginVertical": 8,
             "width": "100%",
           },
           undefined,
         ]
       }
+      themeVariant="filled"
     >
       <View
         style={
@@ -45,24 +49,6 @@ exports[`TimePickerAndroid renders correctly 1`] = `
           ]
         }
       >
-        <View
-          style={
-            Array [
-              Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              undefined,
-            ]
-          }
-          themeVariant="filled"
-        />
         <View
           pointerEvents="none"
           style={

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -26,12 +26,16 @@ exports[`TimePickerIOS renders correctly 1`] = `
       style={
         Array [
           Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
             "marginVertical": 8,
             "width": "100%",
           },
           undefined,
         ]
       }
+      themeVariant="filled"
     >
       <View
         style={
@@ -45,24 +49,6 @@ exports[`TimePickerIOS renders correctly 1`] = `
           ]
         }
       >
-        <View
-          style={
-            Array [
-              Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              undefined,
-            ]
-          }
-          themeVariant="filled"
-        />
         <View
           pointerEvents="none"
           style={
@@ -502,7 +488,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "color": "#8505a2",
+                              "color": "#001f23",
                               "fontFamily": "BeVietnamPro-SemiBold",
                               "fontSize": 16,
                               "letterSpacing": 0.48,

package/src/components/Toast/ToastProvider.tsx

@@ -20,9 +20,7 @@ const ToastProvider = ({
   position = 'top',
 }: ToastProviderProps) => {
   const toastRef = useRef<ToastControllerContextType>(null);
-  const [refState, setRefState] = useState<ToastControllerContextType>(
-    {} as ToastControllerContextType
-  );
+  const [refState, setRefState] = useState<ToastControllerContextType>(null);
 
   useEffect(() => {
     if (toastRef.current) {
@@ -38,7 +36,7 @@ const ToastProvider = ({
   return (
     <ToastContext.Provider value={refState}>
       <View style={{ flex: 1 }}>
-        {children}
+        {refState ? children : null}
         <ToastConfigContext.Provider value={config}>
           <ToastContainer
             ref={toastRef}

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

@@ -0,0 +1,138 @@
+import { fireEvent, waitFor } from '@testing-library/react-native';
+import React, { useEffect, useState } from 'react';
+import { Button, View } from 'react-native';
+import Toast from '..';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+
+describe('Toast', () => {
+  it(`"show" Toast when called correctly`, async () => {
+    const Component = () => {
+      const toast = Toast.useToast();
+
+      useEffect(() => {
+        toast.show({
+          content: 'Your timesheet has been deleted.',
+          intent: 'warning',
+          variant: 'round',
+          duration: 50,
+        });
+      }, []);
+
+      return <View>Hello world</View>;
+    };
+
+    const { queryByText } = renderWithTheme(
+      <Toast.Provider>
+        <Component />
+      </Toast.Provider>
+    );
+
+    expect(queryByText('Your timesheet has been deleted.')).toBeTruthy();
+    await waitFor(() =>
+      expect(queryByText('Your timesheet has been deleted.')).toBeFalsy()
+    );
+  });
+
+  it(`"show" Toast when called correctly`, async () => {
+    const Component = () => {
+      const toast = Toast.useToast();
+
+      return (
+        <View>
+          <Button
+            title="Show Toast"
+            onPress={() =>
+              toast.show({
+                content: 'Your timesheet has been deleted.',
+                intent: 'warning',
+                variant: 'round',
+                duration: 50,
+              })
+            }
+          />
+        </View>
+      );
+    };
+
+    const { queryByText } = renderWithTheme(
+      <Toast.Provider>
+        <Component />
+      </Toast.Provider>
+    );
+
+    fireEvent.press(queryByText('Show Toast'));
+    expect(queryByText('Your timesheet has been deleted.')).toBeTruthy();
+    await waitFor(() =>
+      expect(queryByText('Your timesheet has been deleted.')).toBeFalsy()
+    );
+  });
+
+  it(`"hide" method works correctly`, () => {
+    const Component = () => {
+      const toast = Toast.useToast();
+      const [id, setId] = useState(null);
+
+      useEffect(() => {
+        const toastId = toast.show({
+          content: 'Your timesheet has been deleted.',
+          intent: 'warning',
+          variant: 'round',
+        });
+        setId(toastId);
+      }, []);
+
+      return (
+        <View>
+          <Button title="Hide Toast" onPress={() => toast.hide(id)} />
+        </View>
+      );
+    };
+
+    const { queryByText } = renderWithTheme(
+      <Toast.Provider>
+        <Component />
+      </Toast.Provider>
+    );
+
+    expect(queryByText('Your timesheet has been deleted.')).toBeTruthy();
+    fireEvent.press(queryByText('Hide Toast'));
+    expect(queryByText('Your timesheet has been deleted.')).toBeFalsy();
+  });
+
+  it(`"clearAll" method works correctly`, () => {
+    const Component = () => {
+      const toast = Toast.useToast();
+
+      useEffect(() => {
+        toast.show({
+          content: 'Your timesheet has been deleted.',
+          intent: 'warning',
+          variant: 'round',
+        });
+        toast.show({
+          content: 'No more timesheet available.',
+          intent: 'warning',
+          variant: 'round',
+        });
+      });
+
+      return (
+        <View>
+          <Button title="Clear all Toast" onPress={() => toast.clearAll()} />
+        </View>
+      );
+    };
+
+    const { queryByText } = renderWithTheme(
+      <Toast.Provider displayType="stack">
+        <Component />
+      </Toast.Provider>
+    );
+
+    expect(queryByText('Your timesheet has been deleted.')).toBeTruthy();
+    expect(queryByText('No more timesheet available.')).toBeTruthy();
+    fireEvent.press(queryByText('Clear all Toast'));
+    expect(queryByText('Your timesheet has been deleted.')).toBeFalsy();
+    expect(queryByText('No more timesheet available.')).toBeFalsy();
+  });
+});

package/src/components/Toolbar/ToolbarItem.tsx

@@ -8,7 +8,7 @@ export interface ToolbarItemProps {
   /**
    * Visual intent of the toolbar item.
    */
-  intent?: 'primary' | 'info' | 'success' | 'danger' | 'warning';
+  intent?: 'primary' | 'secondary' | 'info' | 'success' | 'danger' | 'warning';
   /**
    * Icon of the toolbar item.
    */

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarGroup.spec.tsx.snap

@@ -41,7 +41,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
       style={
         Array [
           Object {
-            "color": "#8505a2",
+            "color": "#001f23",
             "fontSize": 24,
           },
           undefined,
@@ -55,7 +55,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
       style={
         Array [
           Object {
-            "color": "#8505a2",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,
@@ -97,7 +97,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
       style={
         Array [
           Object {
-            "color": "#8505a2",
+            "color": "#001f23",
             "fontSize": 24,
           },
           undefined,
@@ -111,7 +111,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
       style={
         Array [
           Object {
-            "color": "#8505a2",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,
@@ -171,7 +171,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
       style={
         Array [
           Object {
-            "color": "#8505a2",
+            "color": "#001f23",
             "fontSize": 24,
           },
           undefined,
@@ -185,7 +185,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
       style={
         Array [
           Object {
-            "color": "#8505a2",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,
@@ -227,7 +227,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
       style={
         Array [
           Object {
-            "color": "#8505a2",
+            "color": "#001f23",
             "fontSize": 24,
           },
           undefined,
@@ -241,7 +241,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
       style={
         Array [
           Object {
-            "color": "#8505a2",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,
@@ -301,7 +301,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
       style={
         Array [
           Object {
-            "color": "#8505a2",
+            "color": "#001f23",
             "fontSize": 24,
           },
           undefined,
@@ -315,7 +315,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
       style={
         Array [
           Object {
-            "color": "#8505a2",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,
@@ -357,7 +357,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
       style={
         Array [
           Object {
-            "color": "#8505a2",
+            "color": "#001f23",
             "fontSize": 24,
           },
           undefined,
@@ -371,7 +371,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
       style={
         Array [
           Object {
-            "color": "#8505a2",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "letterSpacing": 0.36,

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.spec.tsx.snap

@@ -27,7 +27,7 @@ exports[`ToolbarItems renders correctly when disabled 1`] = `
     style={
       Array [
         Object {
-          "color": "#808f91",
+          "color": "#4d6265",
           "fontSize": 24,
         },
         undefined,
@@ -41,7 +41,7 @@ exports[`ToolbarItems renders correctly when disabled 1`] = `
     style={
       Array [
         Object {
-          "color": "#808f91",
+          "color": "#4d6265",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,
@@ -145,7 +145,7 @@ exports[`ToolbarItems renders correctly when intent is info 1`] = `
     style={
       Array [
         Object {
-          "color": "#4568fb",
+          "color": "#b5c3fd",
           "fontSize": 24,
         },
         undefined,
@@ -159,7 +159,7 @@ exports[`ToolbarItems renders correctly when intent is info 1`] = `
     style={
       Array [
         Object {
-          "color": "#4568fb",
+          "color": "#b5c3fd",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,
@@ -204,7 +204,7 @@ exports[`ToolbarItems renders correctly when intent is primary 1`] = `
     style={
       Array [
         Object {
-          "color": "#8505a2",
+          "color": "#001f23",
           "fontSize": 24,
         },
         undefined,
@@ -218,7 +218,7 @@ exports[`ToolbarItems renders correctly when intent is primary 1`] = `
     style={
       Array [
         Object {
-          "color": "#8505a2",
+          "color": "#001f23",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "letterSpacing": 0.36,

package/src/components/Typography/Text/StyledText.tsx

@@ -20,6 +20,7 @@ const StyledText = styled(Text)<{
     | 'body'
     | 'subdued'
     | 'primary'
+    | 'secondary'
     | 'success'
     | 'info'
     | 'warning'

package/src/components/Typography/Text/__tests__/__snapshots__/StyledText.spec.tsx.snap

@@ -49,7 +49,7 @@ exports[`StyledText has info intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#4568fb",
+        "color": "#b5c3fd",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,
@@ -159,7 +159,7 @@ exports[`StyledText has primary intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#8505a2",
+        "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,
@@ -247,7 +247,7 @@ exports[`StyledText has subdued intent style 1`] = `
   style={
     Array [
       Object {
-        "color": "#808f91",
+        "color": "#4d6265",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,

package/src/components/Typography/Text/index.tsx

@@ -33,6 +33,7 @@ export interface TextProps extends NativeTextProps {
     | 'body'
     | 'subdued'
     | 'primary'
+    | 'secondary'
     | 'success'
     | 'info'
     | 'warning'