@hero-design/rn 8.42.4 → 8.43.0

package/src/components/Chip/__tests__/index.spec.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Chip from '..';
+
+describe('Chip', () => {
+  it.each`
+    selected
+    ${true}
+    ${false}
+  `('renders correctly when selected is $selected', ({ selected }) => {
+    const { getByText, toJSON } = renderWithTheme(
+      <Chip label="Cover my bills" selected={selected} />
+    );
+
+    expect(getByText('Cover my bills')).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with default icon', () => {
+    const ChipWithoutIcon = () => {
+      const [selected, setSelected] = React.useState(false);
+
+      return (
+        <Chip
+          label="Cover my bills"
+          testID="chip"
+          selected={selected}
+          onPress={() => setSelected(!selected)}
+        />
+      );
+    };
+
+    const { getByTestId, queryByTestId, toJSON } = renderWithTheme(
+      <ChipWithoutIcon />
+    );
+
+    expect(queryByTestId('chip-icon-checkmark')).toBeFalsy();
+    expect(toJSON()).toMatchSnapshot();
+
+    fireEvent.press(getByTestId('chip'));
+
+    expect(getByTestId('chip-icon-checkmark')).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('does not render icon when variant is outlined', () => {
+    const ChipWithIcon = () => {
+      const [selected, setSelected] = React.useState(false);
+
+      return (
+        <Chip
+          label="Cover my bills"
+          testID="chip"
+          icon="charging-station-outlined"
+          selected={selected}
+          variant="outlined"
+          onPress={() => setSelected(!selected)}
+        />
+      );
+    };
+
+    const { getByTestId, toJSON, queryByTestId } = renderWithTheme(
+      <ChipWithIcon />
+    );
+
+    expect(queryByTestId('chip-icon-charging-station-outlined')).toBeFalsy();
+    expect(toJSON()).toMatchSnapshot();
+
+    fireEvent.press(getByTestId('chip'));
+
+    expect(queryByTestId('chip-icon-charging-station-outlined')).toBeFalsy();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with custom icon', () => {
+    const ChipWithIcon = () => {
+      const [selected, setSelected] = React.useState(false);
+
+      return (
+        <Chip
+          label="Cover my bills"
+          testID="chip"
+          icon="charging-station-outlined"
+          selected={selected}
+          variant="filled"
+          onPress={() => setSelected(!selected)}
+        />
+      );
+    };
+
+    const { getByTestId, toJSON } = renderWithTheme(<ChipWithIcon />);
+
+    expect(getByTestId('chip-icon-charging-station-outlined')).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+
+    fireEvent.press(getByTestId('chip'));
+
+    expect(getByTestId('chip-icon-charging-station-outlined')).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    variant       | selected
+    ${'filled'}   | ${true}
+    ${'filled'}   | ${false}
+    ${'outlined'} | ${true}
+    ${'outlined'} | ${false}
+  `(
+    'renders correctly with variant $variant and selected $selected',
+    ({ variant, selected }) => {
+      const { toJSON } = renderWithTheme(
+        <Chip
+          label="Cover my bills"
+          testID="chip"
+          variant={variant}
+          selected={selected}
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+
+  it('calls onPress when pressed', () => {
+    const onPress = jest.fn();
+
+    const { getByTestId } = renderWithTheme(
+      <Chip label="Cover my bills" testID="chip" onPress={onPress} />
+    );
+
+    fireEvent.press(getByTestId('chip'));
+
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/Chip/index.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+import { IconName } from '../Icon';
+import {
+  StyledChipWrapper,
+  StyledIcon,
+  StyledIconWrapper,
+  StyledLabel,
+} from './StyledChip';
+
+export interface ChipProps extends ViewProps {
+  /**
+   * The label of the chip.
+   */
+  label: string;
+  /**
+   * Variant of the chip.
+   */
+  variant?: 'outlined' | 'filled';
+  /**
+   * Whether the chip is selected.
+   */
+  selected?: boolean;
+  /**
+   * Icon of the chip. Usable only with `variant="filled"`.
+   */
+  icon?: IconName;
+  /**
+   * Callback when the chip is pressed.
+   */
+  onPress?: () => void;
+}
+
+const Chip = ({
+  label,
+  variant = 'outlined',
+  selected = false,
+  icon,
+  onPress,
+  ...otherProps
+}: ChipProps) => {
+  const internalIcon = React.useMemo(() => {
+    if (icon && variant === 'filled') {
+      return icon;
+    }
+    if (selected) {
+      return 'checkmark';
+    }
+    return undefined;
+  }, [icon, selected, variant]);
+
+  return (
+    <StyledChipWrapper
+      onPress={onPress}
+      themeVariant={variant}
+      themeSelected={selected}
+      {...otherProps}
+    >
+      {internalIcon && (
+        <StyledIconWrapper>
+          <StyledIcon
+            size="xsmall"
+            icon={internalIcon}
+            themeSelected={selected}
+            themeVariant={variant}
+            testID={`chip-icon-${internalIcon}`}
+          />
+        </StyledIconWrapper>
+      )}
+
+      <StyledLabel
+        variant="small"
+        themeVariant={variant}
+        themeSelected={selected}
+      >
+        {label}
+      </StyledLabel>
+    </StyledChipWrapper>
+  );
+};
+
+export default Chip;

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

@@ -443,6 +443,12 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
       </View>
     </View>
   </View>
+  <Modal
+    hardwareAccelerated={false}
+    onRequestClose={[Function]}
+    transparent={true}
+    visible={false}
+  />
 </View>
 `;
 
@@ -666,5 +672,11 @@ exports[`DatePicker renders variant Calendar 1`] = `
       </View>
     </View>
   </View>
+  <Modal
+    hardwareAccelerated={false}
+    onRequestClose={[Function]}
+    transparent={true}
+    visible={false}
+  />
 </View>
 `;