| 1 |
import { Icon } from '@wordpress/icons'; |
| 2 |
import classNames from 'classnames'; |
| 3 |
import { bannerButtonVariables, buttonHoverClasses, colorsOf } from '../colors'; |
| 4 |
import { iconFor } from '../icons'; |
| 5 |
import { externalLinkProps } from '../notification-link'; |
| 6 |
|
| 7 |
export const Pill = ({ notification, href, external, onClick }) => { |
| 8 |
const ctaLabel = notification['cta-label']; |
| 9 |
const icon = iconFor(notification.icon); |
| 10 |
const colors = colorsOf(notification); |
| 11 |
|
| 12 |
return ( |
| 13 |
<a |
| 14 |
href={href} |
| 15 |
{...externalLinkProps(external)} |
| 16 |
onClick={onClick} |
| 17 |
// Without this the pill has no accessible name where CSS hides the label. |
| 18 |
aria-label={ctaLabel} |
| 19 |
// Core's admin bar is taller below the md breakpoint; the pill matches it. |
| 20 |
className={classNames( |
| 21 |
'inline-flex h-7.5 shrink-0 cursor-pointer items-center gap-1 rounded-sm bg-banner-main px-2.5 text-sm leading-none text-banner-text no-underline md:h-6 md:text-[13px]', |
| 22 |
buttonHoverClasses(colors), |
| 23 |
)} |
| 24 |
style={bannerButtonVariables(colors)} |
| 25 |
data-test="notification-pill" |
| 26 |
> |
| 27 |
{icon && <Icon icon={icon} size={16} className="fill-current" />} |
| 28 |
<span className="ext-notification-pill-label">{ctaLabel}</span> |
| 29 |
</a> |
| 30 |
); |
| 31 |
}; |
| 32 |
|
