@hero-design/rn 7.6.1-alpha → 7.7.0

package/src/components/Toast/__tests__/__snapshots__/ToastContainer.spec.tsx.snap

@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToastContainer renders correctly with displayType: displayType, position: bottom 1`] = `
+<View
+  pointerEvents="box-none"
+  position="bottom"
+  style={
+    Array [
+      Object {
+        "bottom": 0,
+        "elevation": 9999,
+        "flexDirection": "column-reverse",
+        "left": 0,
+        "paddingHorizontal": 24,
+        "paddingVertical": 16,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`ToastContainer renders correctly with displayType: displayType, position: top 1`] = `
+<View
+  pointerEvents="box-none"
+  position="top"
+  style={
+    Array [
+      Object {
+        "bottom": 0,
+        "elevation": 9999,
+        "flexDirection": "column",
+        "left": 0,
+        "paddingHorizontal": 24,
+        "paddingVertical": 16,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`ToastContainer renders correctly with displayType: single, position: bottom 1`] = `
+<View
+  pointerEvents="box-none"
+  position="bottom"
+  style={
+    Array [
+      Object {
+        "bottom": 0,
+        "elevation": 9999,
+        "flexDirection": "column-reverse",
+        "left": 0,
+        "paddingHorizontal": 24,
+        "paddingVertical": 16,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`ToastContainer renders correctly with displayType: single, position: top 1`] = `
+<View
+  pointerEvents="box-none"
+  position="top"
+  style={
+    Array [
+      Object {
+        "bottom": 0,
+        "elevation": 9999,
+        "flexDirection": "column",
+        "left": 0,
+        "paddingHorizontal": 24,
+        "paddingVertical": 16,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+      undefined,
+    ]
+  }
+/>
+`;

package/src/components/Toast/index.tsx

@@ -0,0 +1,11 @@
+import ToastContainer from './ToastContainer';
+import ToastProvider from './ToastProvider';
+import { useToast } from './ToastContext';
+
+const Toast = {
+  Provider: ToastProvider,
+  Container: ToastContainer,
+  useToast,
+};
+
+export default Toast;

package/src/components/Toast/types.ts

@@ -0,0 +1,70 @@
+import { ReactElement } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconName } from '../Icon';
+
+export interface ToastProps {
+  /**
+   * Toast content.
+   */
+  content: string | ReactElement;
+  /**
+   * Icon name of the Toast.
+   * - undefined: use default icon according to Toast intent.
+   * - null: no icon at all.
+   * - IconName: an icon identifier from hero-design icon list.
+   */
+  icon?: null | IconName;
+  /**
+   * Visual intent color to apply to alert.
+   */
+  intent?: 'success' | 'info' | 'warning' | 'error';
+  /**
+   * Toast variants
+   */
+  variant?: 'default' | 'round';
+  /**
+   * Whether the toast message should be dismissed after the duration expired.
+   */
+  autoDismiss?: boolean;
+  /**
+   * Duration (in miliseconds) of how long the toast message will be displayed before it disapprears.
+   */
+  duration?: number;
+  /**
+   * Display action button with passed on the right side of the toast message.
+   * This action button will will dismiss the toast on pressed.
+   */
+  actionLabel?: string | ReactElement;
+  /**
+   * Callback that will be called when the action button of the toast is pressed.
+   */
+  onAction?: () => void;
+  /**
+   * Callback that will be called when the toast message is dismissed.
+   */
+  onDismiss?: () => void;
+  /**
+   * Addtitional style.
+   */
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface ToastContainerProps {
+  /**
+   * Displays multiple toasts at a time or one by one.
+   */
+  displayType?: 'single' | 'stack';
+  /**
+   * Position that the toast message will appear on the screen.
+   */
+  position?: 'top' | 'bottom';
+  /**
+   * Additional style for toasts container.
+   */
+  style?: StyleProp<ViewStyle>;
+}
+
+export type ToastItemProps = {
+  id: string;
+  props: Omit<ToastProps, 'position'>;
+};

package/src/index.ts

@@ -9,6 +9,7 @@ import BottomSheet from './components/BottomSheet';
 import Button from './components/Button';
 import Card from './components/Card';
 import Collapse from './components/Collapse';
+import Checkbox from './components/Checkbox';
 import ContentNavigator from './components/ContentNavigator';
 import Divider from './components/Divider';
 import Drawer from './components/Drawer';
@@ -23,6 +24,7 @@ import Switch from './components/Switch';
 import Tabs from './components/Tabs';
 import Tag from './components/Tag';
 import TextInput from './components/TextInput';
+import Toast from './components/Toast';
 import Typography from './components/Typography';
 
 export {
@@ -39,6 +41,7 @@ export {
   Button,
   Card,
   Collapse,
+  Checkbox,
   ContentNavigator,
   Divider,
   Drawer,
@@ -53,6 +56,7 @@ export {
   Tabs,
   Tag,
   TextInput,
+  Toast,
   Typography,
 };
 

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

@@ -172,6 +172,25 @@ Object {
         "default": 12,
       },
     },
+    "checkbox": Object {
+      "borderWidths": Object {
+        "default": 2,
+      },
+      "colors": Object {
+        "borderColor": "#7622d7",
+        "disabled": "#727478",
+        "text": "#ffffff",
+      },
+      "radii": Object {
+        "base": 4,
+      },
+      "sizes": Object {
+        "base": 24,
+      },
+      "space": Object {
+        "iconTop": -4,
+      },
+    },
     "contentNavigator": Object {
       "space": Object {
         "valueHorizontalPadding": 8,
@@ -464,6 +483,28 @@ Object {
         "labelTop": -10,
       },
     },
+    "toast": Object {
+      "borderWidths": Object {
+        "base": 1,
+      },
+      "colors": Object {
+        "divider": "#fafbfb",
+        "error": "#de350b",
+        "info": "#1dbeee",
+        "success": "#01b39c",
+        "warning": "#ffa234",
+      },
+      "radii": Object {
+        "default": 16,
+      },
+      "sizes": Object {
+        "height": 48,
+      },
+      "space": Object {
+        "largePadding": 24,
+        "mediumPadding": 16,
+      },
+    },
     "typography": Object {
       "colors": Object {
         "body": "#292a2b",

package/src/theme/components/checkbox.ts

@@ -0,0 +1,37 @@
+import { GlobalTheme } from '../global';
+
+const getCheckboxTheme = (theme: GlobalTheme) => {
+  const colors = {
+    borderColor: theme.colors.primary,
+    text: theme.colors.invertedText,
+    disabled: theme.colors.inactiveBackground,
+  };
+
+  const space = {
+    // to remove the empty space above the check icon
+    // and also to center the check mark
+    iconTop: -theme.space.xsmall,
+  };
+
+  const sizes = {
+    base: theme.space.large,
+  };
+
+  const radii = {
+    base: theme.radii.base,
+  };
+
+  const borderWidths = {
+    default: theme.borderWidths.medium,
+  };
+
+  return {
+    colors,
+    space,
+    sizes,
+    radii,
+    borderWidths,
+  };
+};
+
+export default getCheckboxTheme;

package/src/theme/components/toast.ts

@@ -0,0 +1,33 @@
+import { scale } from '../../utils/scale';
+import { GlobalTheme } from '../global';
+
+const getToastTheme = (theme: GlobalTheme) => {
+  const colors = {
+    success: theme.colors.success,
+    warning: theme.colors.warning,
+    error: theme.colors.danger,
+    info: theme.colors.infoMediumLight,
+    divider: theme.colors.backgroundLight,
+  };
+
+  const sizes = {
+    height: scale(48),
+  };
+
+  const space = {
+    mediumPadding: theme.space.medium,
+    largePadding: theme.space.large,
+  };
+
+  const radii = {
+    default: theme.radii.xlarge,
+  };
+
+  const borderWidths = {
+    base: theme.borderWidths.base,
+  };
+
+  return { colors, radii, sizes, space, borderWidths };
+};
+
+export default getToastTheme;

package/src/theme/index.ts

@@ -16,6 +16,7 @@ import getBottomNavigationTheme from './components/bottomNavigation';
 import getBottomSheetTheme from './components/bottomSheet';
 import getButtonTheme from './components/button';
 import getCardTheme from './components/card';
+import getCheckboxTheme from './components/checkbox';
 import getContentNavigatorTheme from './components/contentNavigator';
 import getDividerTheme from './components/divider';
 import getDrawerTheme from './components/drawer';
@@ -30,6 +31,7 @@ import getSwitchTheme from './components/switch';
 import getTabsTheme from './components/tabs';
 import getTagTheme from './components/tag';
 import getTextInputTheme from './components/textInput';
+import getToastTheme from './components/toast';
 import getTypographyTheme from './components/typography';
 
 type Theme = GlobalTheme & {
@@ -41,6 +43,7 @@ type Theme = GlobalTheme & {
     bottomSheet: ReturnType<typeof getBottomSheetTheme>;
     button: ReturnType<typeof getButtonTheme>;
     card: ReturnType<typeof getCardTheme>;
+    checkbox: ReturnType<typeof getCheckboxTheme>;
     contentNavigator: ReturnType<typeof getContentNavigatorTheme>;
     divider: ReturnType<typeof getDividerTheme>;
     drawer: ReturnType<typeof getDrawerTheme>;
@@ -55,6 +58,7 @@ type Theme = GlobalTheme & {
     tabs: ReturnType<typeof getTabsTheme>;
     tag: ReturnType<typeof getTagTheme>;
     textInput: ReturnType<typeof getTextInputTheme>;
+    toast: ReturnType<typeof getToastTheme>;
     typography: ReturnType<typeof getTypographyTheme>;
   };
 };
@@ -74,6 +78,7 @@ const getTheme = (
       bottomSheet: getBottomSheetTheme(globalTheme),
       button: getButtonTheme(globalTheme),
       card: getCardTheme(globalTheme),
+      checkbox: getCheckboxTheme(globalTheme),
       contentNavigator: getContentNavigatorTheme(globalTheme),
       divider: getDividerTheme(globalTheme),
       drawer: getDrawerTheme(globalTheme),
@@ -88,6 +93,7 @@ const getTheme = (
       tabs: getTabsTheme(globalTheme),
       tag: getTagTheme(globalTheme),
       textInput: getTextInputTheme(globalTheme),
+      toast: getToastTheme(globalTheme),
       typography: getTypographyTheme(globalTheme),
     },
   };