@cimpress/react-components/dist/esm/docs/components/textfield/SearchField.js

React components to support the MCP styleguide

import React, { useState } from 'react';
import { css, cx } from '@emotion/css';
import { Button, colors, TextField } from '@cimpress/react-components';
import IconSearch from '@cimpress-technology/react-streamline-icons/lib/IconSearch';
const searchButtonStyle = css({
    height: '48px',
});
const searchStyle = cx('btn btn-default', searchButtonStyle);
const SearchField = () => {
    const [search, setSearch] = useState('');
    const onClick = () => {
        console.log(`Searching for ${search}`);
    };
    const onChange = e => setSearch(e.target.value);
    return (React.createElement(TextField, { label: "Search", value: search, onChange: onChange, rightAddon: React.createElement(Button, { className: searchStyle, onClick: onClick },
            React.createElement(IconSearch, { color: colors.ocean.base, size: "lg" })) }));
};
export default SearchField;
//# sourceMappingURL=SearchField.js.map