Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
({error}) => {
let errorBorderColor;
let errorRingColor;
if (error === ErrorType.Error) {
errorRingColor = inputColors.error.border;
} else if (error === ErrorType.Alert) {
errorRingColor = inputColors.warning.border;
errorBorderColor = colors.cantaloupe600;
} else {
return {};
}
return {
borderRadius: borderRadius.m,
transition: '100ms box-shadow',
boxShadow: errorBorderColor
? `inset 0 0 0 1px ${errorBorderColor}, inset 0 0 0 3px ${errorRingColor}`
: `inset 0 0 0 2px ${errorRingColor}`,
padding: `${spacing.xxxs} ${spacing.xs}`,
margin: `-${spacing.xxxs} -${spacing.xs}`,
};
}
);
const BannerViewAll = styled('span')(
{
textDecoration: 'underline',
},
({variant}) => ({
display: variant === BannerVariant.Sticky ? 'none' : undefined,
})
);
export default class Banner extends React.Component {
static Variant = BannerVariant;
static ErrorType = ErrorType;
public static defaultProps = {
actionText: 'View All',
error: ErrorType.Alert,
variant: BannerVariant.Full,
};
public render() {
const {label, onClick, actionText, variant, error, ...props} = this.props;
const bannerIcon = error === ErrorType.Error ? exclamationCircleIcon : exclamationTriangleIcon;
const iconColor = error === ErrorType.Error ? colors.frenchVanilla100 : colors.blackPepper400;
const iconSize = 24;
return (
({error}) => {
let errorRingColor;
let errorRingBorderColor = 'transparent';
if (error === ErrorType.Error) {
errorRingColor = inputColors.error.border;
} else if (error === ErrorType.Alert) {
errorRingColor = inputColors.warning.border;
errorRingBorderColor = colors.cantaloupe600;
} else {
return;
}
const styles = {
'& ~ div:first-of-type': {
boxShadow: `
0 0 0 2px ${colors.frenchVanilla100},
0 0 0 4px ${errorRingColor},
0 0 0 5px ${errorRingBorderColor}`,
},
'&:focus ~ div:first-of-type': {
...focusRing(2, 2, false),
},
({error}) => {
let errorRingColor;
let errorRingBorderColor = 'transparent';
if (error === ErrorType.Error) {
errorRingColor = inputColors.error.border;
} else if (error === ErrorType.Alert) {
errorRingColor = inputColors.warning.border;
errorRingBorderColor = colors.cantaloupe600;
} else {
return;
}
const errorStyles = {
'& ~ div:first-of-type': {
border: `1px solid ${errorRingColor}`,
boxShadow: `0 0 0 1px ${errorRingColor}, 0 0 0 2px ${errorRingBorderColor}`,
},
'&:not(:checked):not(:disabled):not(:focus):hover ~ div:first-of-type': {
borderColor: errorRingColor,
},
'&:checked ~ div:first-of-type': {
borderColor: colors.blueberry400,