All files / Icon/BellIcon BellIcon.tsx

100% Statements 9/9
75% Branches 3/4
100% Functions 1/1
100% Lines 9/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143              1x                             1x                                                                                                                                 1x           7x   7x                                                                   1x 1x             1x   1x      
import _ from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import Icon, { IIconProps } from '../Icon';
import { lucidClassNames } from '../../../util/style-helpers';
import { Overwrite } from '../../../util/component-types';
 
const cx = lucidClassNames.bind('&-BellIcon');
 
interface IBellIconPropsRaw extends IIconProps {
	/** Show or hide a dot on the bell to indicate a notification. */
	hasDot?: boolean;
 
	/** Featured color of the dot */
	featuredColor?: 'info' | 'success' | 'warning' | 'danger';
}
 
export type IBellIconProps = Overwrite<
	React.SVGAttributes<SVGGElement>,
	IBellIconPropsRaw
>;
 
export const iconPropTypes = {
	/** Size variations of the icons. \`size\` directly effects height and width
		but the developer should also be conscious of the relationship with
		\`viewBox\`. */
	size: PropTypes.number,
 
	/** Size handles width and height, whereas \`width\` can manually override the width that would be set by size. */
	width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
	/** Size handles width and height, whereas \`height\` can manually override the height that would be set by size. */
	height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
	/** \`viewBox\` is very important for SVGs. You can think of \`viewBox\` as
		the "artboard" for our SVG while \`size\` is the presented height and
		width. */
	viewBox: PropTypes.string,
 
	/** Sets the color of the Icon.  May not be applicable for icons that are tied
		to specific colors (e.g. DangerIcon). */
	color: PropTypes.oneOf([
		'neutral-dark',
		'neutral-light',
		'neutral-extra-light',
		'primary',
		'white',
		'success',
		'warning',
		'secondary-one',
		'secondary-two',
		'secondary-three',
		'secondary-five',
	]),
 
	/** Any valid SVG aspect ratio. */
	aspectRatio: PropTypes.string,
 
	/** Adds styling that makes the icon appear clickable. */
	isClickable: PropTypes.bool,
 
	/** Adds styling that makes the icon appear disabled.  Also forces
		isClickable to be false. */
	isDisabled: PropTypes.bool,
 
	/** Called when the user clicks the \`Icon\`. Signature:
		\`({event, props}) => {}\` */
	onClick: PropTypes.func,
 
	/** Called when the user clicks an active, clickable \`Icon\`. Signature:
		\`({event, props}) => {}\` */
	onSelect: PropTypes.func,
 
	/** Any valid React children. */
	children: PropTypes.element,
 
	/** Classes that are appended to the component defaults. This prop is run
		through the \`classnames\` library. */
	className: PropTypes.string,
 
	/** Show or hide a dot on the bell to indicate a notification. */
	hasDot: PropTypes.bool,
 
	/** Featured color of the dot */
	featuredColor: PropTypes.oneOf(['info', 'success', 'warning', 'danger']),
};
 
export const BellIcon = ({
	className,
	featuredColor = 'info',
	hasDot = false,
	...passThroughs
}: IBellIconProps) => {
	const showBellDot = hasDot;
 
	return (
		<Icon
			{..._.omit(passThroughs, ['initialState'])}
			className={cx('&', className)}
		>
			{showBellDot ? (
				<g>
					<path
						strokeLinecap='butt'
						d='M5.5 12.502v.5c0 1.381 1.119 2.5 2.5 2.5s2.5-1.119 2.5-2.5l.003-.495M3.056 7.432c-.54 2.214-1.556 3.07-1.556 3.07v2h13v-2s-1.884-1.587-1.884-6.024c0-.901-.909-3.976-4.616-3.976-.279 0-.543.017-.791.05'
					/>
					<path
						className={cx(
							'&',
							{
								'&-is-info': featuredColor === 'info',
								'&-is-success': featuredColor === 'success',
								'&-is-warning': featuredColor === 'warning',
								'&-is-danger': featuredColor === 'danger',
							},
							className
						)}
						d='M3.5-.148c1.737 0 3.15 1.413 3.15 3.15s-1.413 3.15-3.15 3.15S.35 4.739.35 3.002 1.763-.148 3.5-.148'
					/>
				</g>
			) : (
				<g>
					<path d='M5.5 12.5v.5a2.5 2.5 0 1 0 5 0l.003-.495M14.5 12.5v-2s-1.884-1.587-1.884-6.024C12.616 3.575 11.707.5 8 .5S3.384 3.575 3.384 4.476C3.384 8.913 1.5 10.5 1.5 10.5v2h13z' />
				</g>
			)}
		</Icon>
	);
};
 
BellIcon.displayName = 'BellIcon';
BellIcon.peek = {
	description: `Typically used for notifications. The dot indicates that there is an unread message.`,
	categories: ['visual design', 'icons'],
	extend: 'Icon',
	madeFrom: ['Icon'],
};
 
BellIcon.propTypes = iconPropTypes;
 
BellIcon.defaultProps = Icon.defaultProps;
 
export default BellIcon;