woocommerce/plugins/woocommerce-blocks/assets/js/base/components/chip/index.js

71 lines
1.6 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { __, sprintf } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import './style.scss';
/**
* Component used to render a "chip" -- a list item containing some text with
* an X button to remove/dismiss each chip.
*
* Each chip defaults to a list element but this can be customized by providing
* a wrapperElement.
*/
const Chip = ( {
text,
screenReaderText,
element = 'li',
className = '',
onRemove = () => {},
disabled = false,
radius = 'small',
} ) => {
const Wrapper = element;
const wrapperClassName = classNames(
className,
'wc-block-components-chip',
'wc-block-components-chip--radius-' + radius
);
return (
// @ts-ignore
<Wrapper className={ wrapperClassName }>
<span aria-hidden="true" className="wc-block-components-chip__text">
{ text }
</span>
<span className="screen-reader-text">
{ screenReaderText ? screenReaderText : text }
</span>
<button
className="wc-block-components-chip__remove"
onClick={ onRemove }
disabled={ disabled }
aria-label={ sprintf(
/* translators: %s chip text. */
__( 'Remove coupon "%s"', 'woo-gutenberg-products-block' ),
text
) }
>
</button>
</Wrapper>
);
};
Chip.propTypes = {
text: PropTypes.string.isRequired,
screenReaderText: PropTypes.string,
element: PropTypes.elementType,
className: PropTypes.string,
onRemove: PropTypes.func,
radius: PropTypes.oneOf( [ 'none', 'small', 'medium', 'large' ] ),
};
export default Chip;