@hero-design/rn 7.7.0 → 7.8.0

package/src/components/Select/SingleSelect/__tests__/index.spec.tsx

@@ -0,0 +1,89 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import SingleSelect from '..';
+
+const options = [
+  { text: 'Monday', value: 'mon' },
+  { text: 'Tuesday', value: 'tue' },
+  { text: 'Wednesday', value: 'wed' },
+  { text: 'Thursday', value: 'thu' },
+  { text: 'Friday', value: 'fri' },
+  { text: 'Saturday', value: 'sat' },
+  { text: 'Sunday', value: 'sun' },
+];
+
+describe('rendering', () => {
+  it('renders correctly when bottom sheet is NOT visible', () => {
+    const { queryAllByText, toJSON, getByTestId } = renderWithTheme(
+      <SingleSelect
+        label="Allow notifications"
+        options={options}
+        value="mon"
+        onConfirm={jest.fn()}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(queryAllByText('Allow notifications')).toHaveLength(2);
+    expect(getByTestId('text-input').props.value).toBe('Monday');
+  });
+
+  it('renders correctly when bottom sheet is visible', () => {
+    const { queryAllByText, getByText, toJSON, getByTestId } = renderWithTheme(
+      <SingleSelect
+        label="Allow notifications"
+        options={options}
+        value="mon"
+        onConfirm={jest.fn()}
+      />
+    );
+    fireEvent.press(getByTestId('text-input'));
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(queryAllByText('Allow notifications')).toHaveLength(2);
+    expect(getByText('Monday')).toBeDefined();
+    expect(getByText('Tuesday')).toBeDefined();
+    expect(getByText('Wednesday')).toBeDefined();
+    expect(getByText('Thursday')).toBeDefined();
+    expect(getByText('Friday')).toBeDefined();
+    expect(getByText('Saturday')).toBeDefined();
+    expect(getByText('Sunday')).toBeDefined();
+  });
+});
+
+describe('behavior', () => {
+  it('calls onConfirm when pressing footer of bottom sheet', () => {
+    const onPress = jest.fn();
+    const { getByText, getByTestId } = renderWithTheme(
+      <SingleSelect
+        label="Allow notifications"
+        options={options}
+        value="mon"
+        onConfirm={onPress}
+        testID="single-select"
+      />
+    );
+    fireEvent.press(getByTestId('single-select'));
+    fireEvent.press(getByText('Monday'));
+
+    expect(onPress).toBeCalledTimes(1);
+  });
+
+  it('does NOT call onConfirm when pressing closing button of bottom sheet', () => {
+    const onPress = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <SingleSelect
+        label="Allow notifications"
+        options={options}
+        value="mon"
+        onConfirm={onPress}
+        testID="single-select"
+      />
+    );
+    fireEvent.press(getByTestId('single-select'));
+    fireEvent.press(getByTestId('bottom-sheet-close-icon'));
+
+    expect(onPress).toBeCalledTimes(0);
+  });
+});

package/src/components/Select/SingleSelect/index.tsx

@@ -0,0 +1,89 @@
+import { useTheme } from '@emotion/react';
+import React, { useState } from 'react';
+import { StyleProp, ViewStyle, TouchableOpacity } from 'react-native';
+
+import { OptionType } from '../types';
+import BottomSheet from '../../BottomSheet';
+import OptionList from './OptionList';
+import TextInput from '../../TextInput';
+
+export interface SingleSelectProps<T> {
+  /**
+   * An array of options to be selected.
+   */
+  options: OptionType<T>[];
+  /**
+   * Current selected value.
+   */
+  value: T | null;
+  /**
+   * event handler for confirm button
+   */
+  onConfirm: (value: T | null) => void;
+  /**
+   * Field label.
+   */
+  label: string;
+  /**
+   * Used to extract a unique key for a given option at the specified index. Key is used for caching and as the react key to track item re-ordering.
+   * The default extractor checks option.key, and then falls back to using the index, like React does.
+   */
+  keyExtractor?: (option: OptionType<T>, index?: number) => string;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const SingleSelect = <T,>({
+  options,
+  value,
+  testID,
+  style,
+  label,
+  onConfirm,
+}: SingleSelectProps<T>) => {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+  const [selectingValue, setSelectingValue] = useState<T | null>(value);
+  const displayedValue = options.find(opt => value === opt.value)?.text;
+
+  return (
+    <TouchableOpacity onPress={() => setOpen(true)}>
+      <TextInput
+        label={label}
+        value={displayedValue}
+        onPressIn={() => setOpen(true)}
+        editable={false}
+        // when input is not editable on Android, the text color is gray
+        // hence, adding this to make the text color the same as iOS
+        textStyle={{ color: theme.colors.text }}
+        suffix="arrow-down"
+        multiline
+        style={style}
+        testID={testID}
+      />
+      <BottomSheet
+        open={open}
+        onRequestClose={() => setOpen(false)}
+        onDismiss={() => setSelectingValue(value)}
+        header={label}
+      >
+        <OptionList
+          options={options}
+          value={selectingValue}
+          onPress={selectedValue => {
+            setOpen(false);
+            onConfirm(selectedValue);
+          }}
+        />
+      </BottomSheet>
+    </TouchableOpacity>
+  );
+};
+
+export default SingleSelect;

package/src/components/Select/{MultiSelect/StyledMultiSelect.tsx → StyledSelect.tsx}

@@ -1,6 +1,6 @@
 import { View, TouchableOpacity } from 'react-native';
 import styled from '@emotion/native';
-import Typography from '../../Typography';
+import Typography from '../Typography';
 
 const OptionWrapper = styled(TouchableOpacity)<{ themeSelected: boolean }>(
   ({ theme, themeSelected }) => ({

package/src/components/Select/{MultiSelect/__tests__/StyledMultiSelect.spec.tsx → __tests__/StyledSelect.spec.tsx}

@@ -1,11 +1,11 @@
 import React from 'react';
-import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import {
   OptionWrapper,
   OptionListWrapper,
   Spacer,
   FooterText,
-} from '../StyledMultiSelect';
+} from '../StyledSelect';
 
 describe('OptionWrapper', () => {
   it.each`

package/src/components/Select/helpers.tsx

@@ -0,0 +1,18 @@
+import { OptionType } from './types';
+
+export const getKey = <T,>(
+  option: OptionType<T>,
+  index: number,
+  keyExtractor?: (opt: OptionType<T>, i?: number) => string
+) => {
+  let key: React.Key = '';
+  if (keyExtractor !== undefined) {
+    key = keyExtractor(option, index);
+  } else if (option.key !== undefined) {
+    key = option.key;
+  } else {
+    key = index;
+  }
+
+  return key;
+};

package/src/components/Select/index.tsx

@@ -1,5 +1,6 @@
 import MultiSelect from './MultiSelect';
+import SingleSelect from './SingleSelect';
 
-const CompoundSelect = { Multi: MultiSelect } as const;
-
-export default CompoundSelect;
+export default Object.assign(SingleSelect, {
+  Multi: MultiSelect,
+});

package/src/components/Switch/index.tsx

@@ -34,7 +34,7 @@ export interface SwitchProps {
    */
   size?: 'small' | 'medium';
   /**
-   * Addditional style.
+   * Additional style.
    */
   style?: StyleProp<ViewStyle>;
   /**

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

@@ -6,7 +6,7 @@ exports[`Toast Icon render custom icon correctly 1`] = `
   nativeID="animatedComponent"
   style={
     Object {
-      "backgroundColor": "#1dbeee",
+      "backgroundColor": "#b5c3fd",
       "borderRadius": 0,
       "flexDirection": "row",
       "minHeight": 48,
@@ -243,7 +243,7 @@ exports[`Toast renders correctly when intent is info 1`] = `
   nativeID="animatedComponent"
   style={
     Object {
-      "backgroundColor": "#1dbeee",
+      "backgroundColor": "#b5c3fd",
       "borderRadius": 0,
       "flexDirection": "row",
       "minHeight": 48,

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();
+  });
+});