components/extras/StripedAlertBox.tsx

import React from 'react'
import {Box, BoxProps} from 'grommet'


const stripeStyles = {
    warn: {
        backgroundColor: '#F8BD0E80',
        backgroundImage: 'repeating-linear-gradient(45deg, transparent 20px, transparent 40px, #FDD14CA0 40px, #FDD14CA0 60px)'
    },
    error: {
        backgroundColor: '#b04343',
        backgroundImage: 'repeating-linear-gradient(45deg, transparent 20px, transparent 40px, #ff4343A0 40px, #ff4343A0 60px)',
        textColor: "white"
    },
    ok: {
        backgroundColor: '#1ab501',
        backgroundImage: 'repeating-linear-gradient(45deg, transparent 20px, transparent 40px, #29ff00A0 40px, #29ff00A0 60px)'
    }
}

/**
 * A convenience component to wrap visual elements in a striped alert box.
 *
 * This can be used to bring focus to a specific situation on screen.
 *
 * **Example:** While in dev mode, errors in {@link DisplayWhen} will still render the components but wraps them in an alert box.
 * This notifies the dev very clearly that something has gone wrong, but doesn't prevent them from continuing
 * development until it's fixed.
 *
 * @param children
 * @param [type] {'warn' | 'error' | 'ok'} The type of striping to use in the alert.
 * @param [otherProps] Any additional styling props (applied to the wrapping Box)
 *
 * @category Extras
 * @component
 * @example
 * return (
 *  <StripedAlertBox style={{minWidth: "200px", minHeight: "100px", maxWidth: "300px", maxHeight: "100px"}} pad="small" align="center" justify="center">
 *      <h3 style={{margin: '10px', fontWeight:"bold"}}>Alert h3</h3>
 *      <p>This is an example alert. It is a bundle of arbitrary HTML (h3 + p tags)</p>
 *  </StripedAlertBox>
 * )
 */
export function StripedAlertBox({children, type='warn', ...otherProps} : {children: any, type?: 'warn' | 'error' | 'ok'} & BoxProps & { style?: any }) {

    let stripeStyle = stripeStyles[type] || stripeStyles['warn']
    if (otherProps?.style) {
        stripeStyle = {...otherProps.style, ...stripeStyle}
    }
    return <Box fill
                {...otherProps}
                margin={{bottom: "small"}}
                style={stripeStyle}
    >
        {children}
    </Box>
}

export default StripedAlertBox