@hero-design/rn 7.6.1-alpha.0 → 7.8.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/components/Toolbar/StyledToolbar.tsx

@@ -0,0 +1,42 @@
+import styled from '@emotion/native';
+import { TouchableOpacity, View, ViewProps } from 'react-native';
+
+const ToolbarWrapper = styled(View)<ViewProps>(({ theme }) => ({
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  zIndex: 9999,
+  elevation: 9999,
+  width: '100%',
+  paddingVertical: theme.__hd__.toolbar.space.verticalPadding,
+  paddingHorizontal: theme.__hd__.toolbar.space.horizontalPadding,
+  borderTopWidth: theme.__hd__.toolbar.borderWidths.default,
+  borderColor: theme.__hd__.toolbar.colors.border,
+  flexDirection: 'row',
+  alignItems: 'center',
+  backgroundColor: theme.__hd__.toolbar.colors.background,
+}));
+
+const alignment = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end',
+} as const;
+
+const ToolbarGroupWrapper = styled(View)<{
+  align: 'left' | 'center' | 'right';
+}>(({ align }) => ({
+  flex: 1,
+  flexDirection: 'row',
+  justifyContent: alignment[align],
+  alignItems: 'center',
+}));
+
+const ToolbarItemWrapper = styled(TouchableOpacity)(({ theme }) => ({
+  paddingVertical: theme.__hd__.toolbar.space.verticalPadding,
+  paddingHorizontal: theme.__hd__.toolbar.space.horizontalPadding,
+  alignItems: 'center',
+}));
+
+export { ToolbarWrapper, ToolbarGroupWrapper, ToolbarItemWrapper };

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ToolbarGroupWrapper } from './StyledToolbar';
+import ToolbarItem, { ToolbarItemProps } from './ToolbarItem';
+
+export interface ToolbarGroupProps {
+  /**
+   * List of action items in the toolbar group.
+   */
+  items?: ToolbarItemProps[];
+  /**
+   * Alignment of the items in the group.
+   */
+  align: 'left' | 'center' | 'right';
+}
+
+const ToolbarGroup = ({ align = 'right', items = [] }: ToolbarGroupProps) => (
+  <ToolbarGroupWrapper align={align}>
+    {items.map(({ label, icon, onPress, disabled, intent }) => (
+      <ToolbarItem
+        key={`${label}-${icon}`}
+        label={label}
+        icon={icon}
+        intent={intent}
+        onPress={onPress}
+        disabled={disabled}
+      />
+    ))}
+  </ToolbarGroupWrapper>
+);
+
+export default ToolbarGroup;

package/src/components/Toolbar/ToolbarItem.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import Icon, { IconName } from '../Icon';
+import Typography from '../Typography';
+import { ToolbarItemWrapper } from './StyledToolbar';
+
+export interface ToolbarItemProps {
+  /**
+   * Visual intent of the toolbar item.
+   */
+  intent?: 'primary' | 'info' | 'success' | 'danger' | 'warning';
+  /**
+   * Icon of the toolbar item.
+   */
+  icon?: IconName;
+  /**
+   * Action label of the toolbar item.
+   */
+  label?: string;
+  /**
+   * Callback that trigger when user press the toolbar item.
+   */
+  onPress?: () => void;
+  /**
+   * Whether the toolbar item is disabled.
+   */
+  disabled?: boolean;
+}
+
+const ToolbarItem = ({
+  icon,
+  label,
+  onPress,
+  intent = 'primary',
+  disabled = false,
+}: ToolbarItemProps) => (
+  <ToolbarItemWrapper onPress={onPress} disabled={disabled}>
+    {icon ? (
+      <Icon
+        icon={icon}
+        size={label ? 'medium' : 'large'}
+        intent={disabled ? 'disabled-text' : intent}
+        testID={`toolbar-item-icon-${icon}`}
+      />
+    ) : null}
+    {label ? (
+      <Typography.Text
+        fontSize={icon ? 'small' : 'large'}
+        fontWeight="semi-bold"
+        intent={disabled ? 'subdued' : intent}
+      >
+        {label}
+      </Typography.Text>
+    ) : null}
+  </ToolbarItemWrapper>
+);
+
+export default ToolbarItem;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import ToolbarGroup from '../ToolbarGroup';
+
+describe('ToolbarGroup', () => {
+  it.each`
+    align
+    ${'left'}
+    ${'right'}
+    ${'center'}
+  `('renders correctly with when align is $align', ({ align }) => {
+    const { toJSON } = renderWithTheme(
+      <ToolbarGroup
+        align={align}
+        items={[
+          {
+            label: 'Discard',
+            icon: 'home',
+            onPress: jest.fn(),
+          },
+          {
+            label: 'Print',
+            icon: 'print',
+            onPress: jest.fn(),
+          },
+        ]}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,57 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import ToolbarItem from '../ToolbarItem';
+
+describe('ToolbarItems', () => {
+  it.each`
+    intent
+    ${'primary'}
+    ${'info'}
+    ${'success'}
+    ${'danger'}
+    ${'warning'}
+  `('renders correctly when intent is $intent', ({ intent }) => {
+    const onPress = jest.fn();
+    const { toJSON, getByText, getByTestId } = renderWithTheme(
+      <ToolbarItem
+        label="Action"
+        intent={intent}
+        icon="home"
+        onPress={onPress}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Action')).toBeDefined();
+    expect(getByTestId('toolbar-item-icon-home')).toBeDefined();
+
+    fireEvent.press(getByText('Action'));
+    expect(onPress).toBeCalled();
+  });
+
+  it('renders correctly when disabled', () => {
+    const onPress = jest.fn();
+    const { toJSON, getByText } = renderWithTheme(
+      <ToolbarItem
+        label="Action"
+        icon="home"
+        intent="primary"
+        onPress={onPress}
+        disabled
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    fireEvent.press(getByText('Action'));
+    expect(onPress).not.toBeCalled();
+  });
+
+  it('not renders icon when icon prop is not provided', () => {
+    const { queryByTestId } = renderWithTheme(
+      <ToolbarItem label="Action" intent="primary" />
+    );
+
+    expect(queryByTestId('toolbar-item-icon')).toBeNull();
+  });
+});