/** * External dependencies */ import clsx from 'clsx'; /** * Internal dependencies */ import './style.scss'; export interface ChipProps { /** * Text for chip content. */ text: string | JSX.Element; /** * Screenreader text for the content. */ screenReaderText?: string; /** * The element type for the chip. Default 'li'. */ element?: string; /** * CSS class used. */ className?: string; /** * React children. */ children?: React.ReactNode | React.ReactNode[]; /** * Radius size. */ radius?: 'none' | 'small' | 'medium' | 'large'; } /** * Component used to render a "chip" -- a list item containing some text. * * Each chip defaults to a list element but this can be customized by providing * a wrapperElement. */ const Chip: React.FC< ChipProps > = ( { text, screenReaderText = '', element = 'li', className = '', radius = 'small', children = null, ...props } ) => { const Wrapper = element; const wrapperClassName = clsx( className, 'wc-block-components-chip', 'wc-block-components-chip--radius-' + radius ); const showScreenReaderText = Boolean( screenReaderText && screenReaderText !== text ); return ( { text } { showScreenReaderText && ( { screenReaderText } ) } { children } ); }; export default Chip;