@hero-design/rn 7.22.2 → 7.23.0

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

@@ -26,16 +26,12 @@ exports[`TimePickerAndroid renders correctly 1`] = `
       style={
         Array [
           Object {
-            "borderColor": "#001f23",
-            "borderRadius": 8,
-            "borderWidth": 1,
             "marginVertical": 8,
             "width": "100%",
           },
           undefined,
         ]
       }
-      themeVariant="filled"
     >
       <View
         style={
@@ -49,6 +45,24 @@ 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,16 +26,12 @@ exports[`TimePickerIOS renders correctly 1`] = `
       style={
         Array [
           Object {
-            "borderColor": "#001f23",
-            "borderRadius": 8,
-            "borderWidth": 1,
             "marginVertical": 8,
             "width": "100%",
           },
           undefined,
         ]
       }
-      themeVariant="filled"
     >
       <View
         style={
@@ -49,6 +45,24 @@ 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={
@@ -488,7 +502,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'

package/src/index.ts

@@ -4,6 +4,7 @@ import theme, {
   useTheme,
   swagSystemPalette,
   workSystemPalette,
+  jobsSystemPalette,
 } from './theme';
 import { scale } from './utils/scale';
 
@@ -43,6 +44,7 @@ import TimePicker from './components/TimePicker';
 import Toast from './components/Toast';
 import Toolbar from './components/Toolbar';
 import Typography from './components/Typography';
+import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
 
 export {
@@ -53,6 +55,7 @@ export {
   ThemeProvider,
   swagSystemPalette,
   workSystemPalette,
+  jobsSystemPalette,
   Accordion,
   Alert,
   Avatar,
@@ -89,6 +92,7 @@ export {
   Toast,
   Toolbar,
   Typography,
+  RefreshControl,
   RichTextEditor,
 };
 

package/src/theme/ThemeSwitcher.tsx

@@ -1,10 +1,15 @@
 import React, { useMemo } from 'react';
 
 import getTheme from './getTheme';
-import { defaultScale, swagSystemPalette, workSystemPalette } from './global';
+import {
+  defaultScale,
+  swagSystemPalette,
+  workSystemPalette,
+  jobsSystemPalette,
+} from './global';
 import ThemeProvider from './ThemeProvider';
 
-type ThemeName = 'swag' | 'work';
+type ThemeName = 'swag' | 'work' | 'jobs';
 
 const ThemeSwitcher = ({
   name = 'swag',
@@ -19,6 +24,8 @@ const ThemeSwitcher = ({
         return getTheme(defaultScale, swagSystemPalette);
       case 'work':
         return getTheme(defaultScale, workSystemPalette);
+      case 'jobs':
+        return getTheme(defaultScale, jobsSystemPalette);
     }
   }, [name]);
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>;