@hero-design/rn 8.68.0-alpha.1 → 8.68.0

package/src/components/Search/SearchTwoLine.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconName } from '../Icon';
+import { renderPrefix, renderSuffix } from './utils';
+import {
+  StyledContainer,
+  StyledHandlerContainer,
+  StyledInputContainer,
+} from './StyledSearch';
+import Typography from '../Typography';
+
+interface SearchTwoLineProps {
+  /**
+   * Name of Icon or ReactElement to render on the left side of the input, before the user's cursor.
+   */
+  prefix?: IconName | React.ReactElement;
+  /**
+   * Name of Icon or ReactElement to render on the right side of the input.
+   */
+  suffix?: IconName | React.ReactElement;
+  /**
+   * Additional wrapper style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Label of the Input handler.
+   */
+  label: React.ReactNode;
+  /**
+   * Content of the Input handler.
+   */
+  content: React.ReactNode;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const SearchTwoLine = (props: SearchTwoLineProps) => {
+  const {
+    prefix = 'search-outlined',
+    suffix,
+    style,
+    label,
+    content,
+    testID,
+  } = props;
+  return (
+    <StyledContainer style={style} testID={testID}>
+      <StyledInputContainer themeFocused={false}>
+        {renderPrefix({ prefix })}
+        <StyledHandlerContainer>
+          <Typography.Caption fontWeight="semi-bold">
+            {label}
+          </Typography.Caption>
+          {content}
+        </StyledHandlerContainer>
+        {!!suffix && renderSuffix({ suffix })}
+      </StyledInputContainer>
+    </StyledContainer>
+  );
+};
+
+export default SearchTwoLine;

package/src/components/Search/StyledSearch.tsx

@@ -0,0 +1,67 @@
+import styled from '@emotion/native';
+import { TextInput, View } from 'react-native';
+import Badge from '../Badge';
+
+export type State = 'default' | 'filled' | 'disabled' | 'readonly';
+
+export const StyledContainer = styled(View)(() => ({
+  width: '100%',
+}));
+
+export const StyledInputContainer = styled(View)<{
+  themeFocused: boolean;
+}>(({ theme, themeFocused }) => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  paddingHorizontal: theme.__hd__.search.space.containerHorizontalPadding,
+  paddingVertical: theme.__hd__.search.space.containerVerticalPadding,
+  backgroundColor: theme.__hd__.search.colors.containerBackground,
+  height: 56,
+  borderRadius: theme.__hd__.search.radii.container,
+  borderWidth: theme.__hd__.search.borderWidths.container.focused,
+  borderColor: themeFocused
+    ? theme.__hd__.search.colors.borders
+    : theme.__hd__.search.colors.containerBackground,
+}));
+
+export const StyledAffixContainer = styled(View)(({ theme }) => ({
+  paddingHorizontal: theme.__hd__.search.space.prefixHorizontalPadding,
+}));
+
+export const StyledSuffixContainer = styled(View)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: theme.__hd__.search.sizes.surfixSize,
+  height: theme.__hd__.search.sizes.surfixSize,
+  backgroundColor: theme.__hd__.search.colors.surfixBackground,
+  borderRadius: theme.__hd__.search.radii.surfix,
+}));
+
+export const StyledInput = styled(TextInput)(({ theme }) => ({
+  textAlignVertical: 'center',
+  fontSize: theme.__hd__.search.fontSizes.text,
+  alignSelf: 'stretch',
+  flexGrow: 1,
+  flexShrink: 1,
+  marginHorizontal: theme.__hd__.search.space.inputHorizontalMargin,
+  paddingVertical: 0,
+  fontFamily: theme.__hd__.search.fonts.text,
+}));
+
+export const StyledHandlerContainer = styled(View)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  alignItems: 'flex-start',
+  flexGrow: 1,
+  height: '100%',
+  marginHorizontal: theme.__hd__.search.space.inputHorizontalMargin,
+}));
+
+export const StyledBadge = styled(Badge)(({ theme }) => ({
+  position: 'absolute',
+  top: theme.__hd__.search.space.badgeTop,
+  right: theme.__hd__.search.space.badgeRight,
+  zIndex: 2,
+}));

package/src/components/Search/__tests__/SearchOneLine.spec.tsx

@@ -0,0 +1,197 @@
+import React from 'react';
+import { fireEvent, within } from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import SearchOneLine, { getState } from '../SearchOneLine';
+import Typography from '../../Typography';
+
+describe('getState', () => {
+  it.each`
+    disabled | editable | isEmptyValue | expected
+    ${false} | ${true}  | ${true}      | ${'default'}
+    ${false} | ${true}  | ${false}     | ${'filled'}
+    ${false} | ${false} | ${true}      | ${'readonly'}
+    ${true}  | ${false} | ${true}      | ${'disabled'}
+  `(
+    'should return the correct state when disabled $disabled, editable $editable, isEmptyValue $isEmptyValue',
+    ({ disabled, editable, isEmptyValue, expected }) => {
+      expect(
+        getState({
+          disabled,
+          editable,
+          isEmptyValue,
+        })
+      ).toBe(expected);
+    }
+  );
+});
+
+describe('SearchOneLine', () => {
+  describe('idle', () => {
+    it('renders correctly', () => {
+      const { getByTestId, toJSON } = renderWithTheme(
+        <SearchOneLine
+          prefix="search-outlined"
+          suffix="adjustment"
+          testID="idle-search-text-input"
+          placeholder="Search"
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(getByTestId('idle-search-text-input')).toBeTruthy();
+      expect(
+        within(getByTestId('idle-search-text-input')).queryAllByTestId(
+          'text-input'
+        )
+      ).toHaveLength(1);
+      expect(
+        within(getByTestId('idle-search-text-input')).queryAllByTestId(
+          'input-prefix'
+        )
+      ).toHaveLength(1);
+      expect(
+        within(getByTestId('idle-search-text-input')).queryAllByTestId(
+          'input-suffix'
+        )
+      ).toHaveLength(1);
+    });
+
+    it('renders custom affix correctly', () => {
+      const { getByTestId, toJSON } = renderWithTheme(
+        <SearchOneLine
+          prefix={<Typography.Caption>Prefix</Typography.Caption>}
+          suffix={<Typography.Caption>Suffix</Typography.Caption>}
+          testID="idle-search-input"
+          placeholder="Search"
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(
+        within(getByTestId('idle-search-input')).getByText('Prefix')
+      ).toBeTruthy();
+      expect(
+        within(getByTestId('idle-search-input')).getByText('Suffix')
+      ).toBeTruthy();
+    });
+
+    describe('handler', () => {
+      it('onChangeText work correctly', () => {
+        const onChangeText = jest.fn();
+        const { getByTestId } = renderWithTheme(
+          <SearchOneLine
+            prefix="search-outlined"
+            testID="idle-search-input"
+            onChangeText={onChangeText}
+          />
+        );
+        const input = within(getByTestId('idle-search-input')).getByTestId(
+          'text-input'
+        );
+        fireEvent.changeText(input, 'Park Chae Young');
+        expect(onChangeText).toHaveBeenCalledWith('Park Chae Young');
+      });
+
+      it('onFocus work correctly', () => {
+        const onFocus = jest.fn();
+        const { getByTestId } = renderWithTheme(
+          <SearchOneLine
+            prefix="search-outlined"
+            testID="idle-search-input"
+            onFocus={onFocus}
+          />
+        );
+        const input = within(getByTestId('idle-search-input')).getByTestId(
+          'text-input'
+        );
+        fireEvent(input, 'focus');
+        expect(onFocus).toHaveBeenCalled();
+      });
+
+      it('onBlur work correctly', () => {
+        const onBlur = jest.fn();
+        const { getByTestId } = renderWithTheme(
+          <SearchOneLine
+            prefix="search-outlined"
+            testID="idle-search-input"
+            onBlur={onBlur}
+          />
+        );
+        const input = within(getByTestId('idle-search-input')).getByTestId(
+          'text-input'
+        );
+        fireEvent(input, 'blur');
+        expect(onBlur).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('filled', () => {
+    it('renders correctly', () => {
+      const { toJSON, queryAllByTestId, queryAllByDisplayValue } =
+        renderWithTheme(
+          <SearchOneLine
+            prefix="search-outlined"
+            suffix="adjustment"
+            testID="idle-search-text-input"
+            placeholder="Search"
+            value="Jennie Kim"
+          />
+        );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByDisplayValue('Jennie Kim')).toHaveLength(1);
+      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
+      expect(queryAllByTestId('input-suffix')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
+    });
+  });
+
+  describe('readonly', () => {
+    it('renders correctly', () => {
+      const onChangeText = jest.fn();
+      const { toJSON, queryAllByTestId, queryAllByDisplayValue, getByTestId } =
+        renderWithTheme(
+          <SearchOneLine
+            prefix="search-outlined"
+            suffix="adjustment"
+            testID="idle-search-text-input"
+            placeholder="Search"
+            value="Lalisa"
+            onChangeText={onChangeText}
+          />
+        );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByDisplayValue('Lalisa')).toHaveLength(1);
+      expect(queryAllByTestId('input-prefix')).toHaveLength(1);
+      expect(queryAllByTestId('input-suffix')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
+      expect(getByTestId('text-input')).not.toHaveProp('editable', 'false');
+    });
+  });
+
+  describe('disabled', () => {
+    it('renders correctly', () => {
+      const onChangeText = jest.fn();
+      const { toJSON, queryAllByTestId, getByTestId } = renderWithTheme(
+        <SearchOneLine
+          prefix="search-outlined"
+          suffix="adjustment"
+          testID="disabled-text-input"
+          placeholder="Search"
+          value="Jisoo"
+          disabled
+          onChangeText={onChangeText}
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
+      expect(getByTestId('disabled-text-input')).toHaveProp(
+        'pointerEvents',
+        'none'
+      );
+    });
+  });
+});

package/src/components/Search/__tests__/SearchSuffixIcon.spec.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import SearchSuffixIcon from '../SearchSuffixIcon';
+
+describe('SearchSuffixIcon', () => {
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(
+      <SearchSuffixIcon suffix="adjustment" badge={{ content: 7 }} />
+    );
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Search/__tests__/SearchTwoLine.spec.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import SearchTwoLine from '../SearchTwoLine';
+import Typography from '../../Typography';
+
+describe('SearchTwoLine', () => {
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(
+      <SearchTwoLine
+        label="Find Work"
+        content={<Typography.Caption>Anywhere</Typography.Caption>}
+        prefix="search-outlined"
+        suffix="adjustment"
+      />
+    );
+    expect(wrapper.getByText('Find Work')).toBeDefined();
+    expect(wrapper.getByText('Anywhere')).toBeDefined();
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});