All files / lib/SearchInput index.js

100% Statements 6/6
100% Branches 4/4
100% Functions 1/1
100% Lines 6/6
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89                          89x       57x   57x                               89x         89x       89x                                                                                        
import React from 'react';
import PropTypes from 'prop-types';
import {
  Icon,
  Input,
 } from '@collab-ui/react';
 
/**
 * @category controls
 * @component search-input
 * @variations collab-ui-react
*/
 
const SearchInput = props => {
  const {
    type,
    ...otherProps
  } = props;
 
  return (
    <Input
      className={
        'cui-search-input' +
        `${type === 'pill' ? ' cui-search-input--pill' : ''}`
      }
      {...otherProps}
    >
      <Icon
        className='cui-search-input__icon'
        name={`${type === 'pill' ? 'search_16' : 'search_20'}`}
      />
    </Input>
  );
};
 
SearchInput.propTypes = {
  /** @prop Style of search input normal or pill | 'normal' */
  type: PropTypes.oneOf(['normal', 'pill'])
};
 
SearchInput.defaultProps = {
  type: 'normal'
};
 
SearchInput.displayName = 'SearchInput';
 
export default SearchInput;
 
/**
* @component input-search
* @section default
* @react
import { SearchInput } from '@collab-ui/react';
 
export default class DefaultSearchInput extends React.PureComponent {
  render() {
    return (
      <SearchInput
        name='defaultSearchInput'
        htmlId='defaultSearchInput'
        inputSize='small-5'
      />
    );
  }
}
 
**/
 
/**
* @component input-search
* @section pill
* @react
import { SearchInput } from '@collab-ui/react';
 
export default class PillSearchInput extends React.PureComponent {
  render() {
    return (
      <SearchInput
        name='pillSearchInput'
        htmlId='pillSearchInput'
        type='pill'
        inputSize='small-5'
      />
    );
  }
}
 
**/