@hero-design/rn 7.22.2 → 7.22.3

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'