Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
title={props.formTitle}
loading={props.formLoading}
>
{typeof props.formContent === "function"
? props.formContent(dismiss)
: props.formContent}
)}
/>
);
};
FilterPopover.defaultProps = {
formSaveLabel: "Filter",
triggerFontSize: "14px",
triggerTextColor: colors.CARBON,
triggerFontWeight: "normal",
};
FilterPopover.propTypes = {
triggerLabel: PropTypes.string.isRequired,
triggerFontSize: PropTypes.string,
triggerTextColor: PropTypes.string,
triggerFontWeight: PropTypes.string,
formTitle: PropTypes.string,
formContent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
formLoading: PropTypes.bool,
formSaveLabel: PropTypes.string,
formCancelLabel: PropTypes.string,
onFormSaveClick: PropTypes.func,
onFormCancelClick: PropTypes.func,
// eslint-disable-next-line react/forbid-prop-types
import Button, { buttonTypes, buttonSizes } from "@crave/farmblocks-button";
import { formInputProps, styledInput } from "@crave/farmblocks-hoc-input";
import { SmEdit } from "@crave/farmblocks-icon";
// the cover of a protected field is a div (instead of an input) enhanced with formInput hoc and some extra style overridings
const Cover = styled(styledInput)`
display: block;
.input {
position: absolute;
width: 100%;
height: 48px;
padding: 0 16px;
bottom: 0;
background: ${colors.SUGAR};
color: ${colors.CARBON};
box-shadow: none;
cursor: auto;
}
.clear {
position: absolute;
right: 0px;
}
`;
Cover.displayName = "InputCover";
const Container = styled.div`
position: relative;
display: ${props => props.isEditing && "flex"};
align-items: flex-end;
> :first-child {
}
if (props.invalid) {
return css`
background-color: ${colors.STRAWBERRY};
color: white;
`;
}
if (props.disabled && !props.protected) {
return css`
background-color: ${colors.GREY_16};
color: ${colors.GREY_32};
`;
}
return css`
background-color: ${colors.SUGAR};
color: ${colors.CARBON};
`;
};
}
}
`;
};
const StyledTooltip = styled.div`
visibility: ${({ isVisible }) => (isVisible ? "visible" : "hidden")};
position: absolute;
padding: ${props => props.padding || "8px"};
background-color: #ffffff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16);
border: solid 1px rgba(0, 0, 0, 0.16);
border-radius: 4px;
white-space: pre;
color: ${colors.CARBON};
font-family: lato, sans-serif;
${({ triggerWidth }) =>
positionXStyle(triggerWidth < 32 ? `${triggerWidth / 2 - 16}px` : 0)};
.closeButton {
display: none;
}
${arrow};
${positionYStyle};
overflow: ${props => props.overflow};
@media only screen and (max-width: ${props => props.fullScreenBreakpoint}) {
align-items: center;
justify-content: center;
min-height: 40px;
min-width: 40px;
margin-right: 8px;
font-size: ${({ iconSize }) => iconSize};
color: ${GREY_48};
svg {
display: block;
}
}
&:hover,
&.active {
color: ${colors.CARBON};
background-color: ${({ highlightColor }) =>
transparentize(0.96, highlightColor)};
.icon {
color: ${({ highlightColor }) => highlightColor};
}
}
&.active {
padding-left: 4px;
border-left: 4px solid ${({ highlightColor }) => highlightColor};
}
${({ variant }) => isFullScreen(variant) && fullScreenStyle}
`;
export default NavItem;
);
};
const StyledTooltip = styled.div`
visibility: ${props => (props.isVisible ? "visible" : "hidden")};
position: absolute;
z-index: ${props => props.zIndex};
top: ${props => props.top};
padding: ${props => props.padding || "8px"};
background-color: #ffffff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16);
border: solid 1px rgba(0, 0, 0, 0.16);
border-radius: 4px;
white-space: pre;
color: ${colors.CARBON};
font-family: lato, sans-serif;
${alignX(0)};
${arrow};
overflow: ${props => props.overflow};
`;
export { Container, StyledTooltip };
background: white;
padding: 8px 24px;
min-height: 48px;
.description {
padding: 0 16px;
flex-grow: 1;
line-height: 1.33;
}
cursor: ${props => props.status === statusTypes.CURRENT && "pointer"};
color: ${colorConstants.CARBON};
${colors};
`;
StepContainer.displayName = "StepContainer";
export default StepContainer;
const labelColor = props => {
if (props.focused) {
return colors.INDIGO_MILK_CAP;
}
if (props.invalid) {
return colors.STRAWBERRY;
}
if (props.disabled && !props.protected) {
return colors.GREY_32;
}
return colors.CARBON;
};
background: white;
margin-top: 1em;
padding: 8px;
position: sticky;
top: 0;
border: solid ${colors.SUGAR};
border-width: 8px 0;
`;
const Item = styled.div`
display: flex;
flex-direction: column;
min-height: 180px;
padding: 8px;
align-items: center;
background: white;
color: ${colors.CARBON};
`;
const IconWrapper = styled.div`
flex: 1;
display: flex;
align-items: center;
justify-content: center;
`;
const sizes = {
Sm: 24,
Md: 40,
Lg: 100,
};
const grouped = Object.keys(icons).reduce((acc, iconName) => {
const Icon = icons[iconName];