567652b0e3
* Create migrate-colors-primer-18.js * Update colors round 1 * upgrade primer packages * Update index.scss * Replace auto colors * remove btn-primary-matte * Turns out the class names and variables names DONT LINE UP... ugh.... * Check for allowed var colors
35 lines
929 B
TypeScript
35 lines
929 B
TypeScript
import { DOMAttributes, ReactNode } from 'react'
|
|
import cx from 'classnames'
|
|
import styles from './Callout.module.scss'
|
|
|
|
export type CalloutPropsT = {
|
|
dangerouslySetInnerHTML?: DOMAttributes<HTMLDivElement>['dangerouslySetInnerHTML']
|
|
variant: 'success' | 'info' | 'warning'
|
|
children?: ReactNode
|
|
className?: string
|
|
}
|
|
|
|
export const Callout = ({
|
|
variant,
|
|
className,
|
|
dangerouslySetInnerHTML,
|
|
children,
|
|
}: CalloutPropsT) => {
|
|
return (
|
|
<div
|
|
data-testid="callout"
|
|
className={cx(
|
|
className,
|
|
styles.container,
|
|
'border rounded-1 p-3 f5',
|
|
variant === 'success' && 'color-border-success color-bg-success',
|
|
variant === 'info' && 'color-border-accent-emphasis color-bg-accent',
|
|
variant === 'warning' && 'color-bg-attention color-border-attention-emphasis'
|
|
)}
|
|
dangerouslySetInnerHTML={dangerouslySetInnerHTML}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|