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 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': {
({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}`,
};
React.InputHTMLAttributes = {
...child.props,
};
if (this.props.grow) {
props.grow = this.props.grow;
}
if (typeof this.props.error !== 'undefined') {
props.error = this.props.error;
if (this.props.hintId) {
props['aria-describedby'] = this.props.hintId;
}
if (this.props.error === ErrorType.Error) {
props['aria-invalid'] = true;
}
}
props.id = this.inputId;
return React.cloneElement(child, props);
}
return child;
};
({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,
},
({error, variant}) => ({
backgroundColor: error === ErrorType.Error ? colors.cinnamon500 : colors.cantaloupe400,
color: error === ErrorType.Error ? colors.frenchVanilla100 : colors.blackPepper400,
borderRadius:
variant === BannerVariant.Sticky ? `${borderRadius.m} 0 0 ${borderRadius.m}` : borderRadius.m,
width: variant === BannerVariant.Sticky ? '222px' : '328px',
'&:hover': {
backgroundColor: error === ErrorType.Error ? colors.cinnamon600 : colors.cantaloupe500,
},
})
);
({error, variant}) => ({
backgroundColor: error === ErrorType.Error ? colors.cinnamon500 : colors.cantaloupe400,
color: error === ErrorType.Error ? colors.frenchVanilla100 : colors.blackPepper400,
borderRadius:
variant === BannerVariant.Sticky ? `${borderRadius.m} 0 0 ${borderRadius.m}` : borderRadius.m,
width: variant === BannerVariant.Sticky ? '222px' : '328px',
'&:hover': {
backgroundColor: error === ErrorType.Error ? colors.cinnamon600 : colors.cantaloupe500,
},
})
);