Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
export const PopoverWrapper = styled.div`
display: flex;
flex-direction: column;
height: 100%;
min-height: 340px;
min-width: 280px;
@media only screen and (max-width: ${props => props.fullScreenBreakpoint}) {
min-height: calc(100vh - 32px);
}
`;
export const CountryListWrapper = styled.ul`
padding: 0;
margin: 0;
border-top: solid 1px ${colors.GREY_16};
flex: 1;
width: 100%;
`;
export const NationalNumberInput = styled(TextInput)`
.input {
overflow: unset;
@media only screen and (max-width: ${props =>
props.tooltipProps?.fullScreenBreakpoint ||
props.fullScreenBreakpoint}) {
input {
/* This prevents iOS from zooming in the input on focus */
font-size: 16px;
}
}
}
type: PropTypes.string,
leftIcon: PropTypes.node,
rightIcon: PropTypes.node,
external: PropTypes.bool,
size: PropTypes.number,
lineHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
onClick: PropTypes.func,
disabled: PropTypes.bool,
fontWeight: PropTypes.string,
className: PropTypes.string,
// ... and all properties of html <a>
};
Link.defaultProps = {
type: linkTypes.FEATURED,
size: fontSizes.MEDIUM,
lineHeight: 1,
disabled: false,
external: false,
fontWeight: fontWeights.SEMIBOLD,
};
export default Link;
</a>
border-color: ${colors.INDIGO_MILK_CAP};
.toggle {
border-color: ${colors.INDIGO_MILK_CAP};
left: 10px;
}
`;
}
if (!props.checked) {
return css`
border-color: ${colors.INDIGO_MILK_CAP};
`;
}
return css`
color: ${colors.INDIGO_MILK_CAP};
background-color: #ffffff;
border-color: ${colors.INDIGO_MILK_CAP};
`;
/* eslint-enable consistent-return */
};
import styled, { css } from "styled-components";
import { transparentize } from "polished";
import { colors } from "@crave/farmblocks-theme";
const hoverBgColor = transparentize(0.94, colors.INDIGO_MILK_CAP);
const hoverChildBgColor = transparentize(0.9, colors.BLUE_CORN);
// Equivalent to GREY_16 over white
// Semi-transparent borders don't work well with colSpan
const borderColor = "#d3dadc";
const border = `1px solid ${borderColor}`;
const borderTop = props =>
props.selectionHeaderVisible &&
css`
border-top: none;
`;
const stickyHeaderCss = ({ stickyHeader, stickyHeaderTopOffset }) =>
stickyHeader &&
css`
padding-right: 16px;
}
&.corner-icon {
position: relative;
padding-left: 40px;
}
/* corner icon for grouped rows */
&.corner-icon:before {
content: "";
float: left;
box-sizing: border-box;
width: 8px;
height: 8px;
border-left: 2px solid ${colors.INDIGO_MILK_CAP};
border-bottom: 2px solid ${colors.INDIGO_MILK_CAP};
position: absolute;
top: calc(50% - 3px);
left: 16px;
}
& .checkbox {
height: 16px;
label {
/* Increase the hit area of the checkbox
This is important for tables with onRowClick */
padding: 8px;
margin: -8px;
}
}
onClick={event => {
// We stop propagation to avoid giving focus to the main input
// This happens because the popover is inside the input wrapper
event.stopPropagation();
}}
fullScreenBreakpoint={fullScreenBreakpoint}
>
);
}}
/>
);
// story helper components
const TopNav = styled.div`
box-sizing: border-box;
display: flex;
align-items: center;
padding: 8px;
height: 56px;
box-shadow: 0px 1px 1px 0px ${colors.GREY_32};
position: fixed;
top: 0;
right: 0;
left: 0;
background-color: white;
z-index: ${({ isPush }) => (!isPush ? 90 : 101)};
`;
const NavHeader = styled.div`
display: flex;
align-items: center;
padding: 8px;
min-height: 56px;
box-sizing: border-box;
overflow-x: hidden;
`;
import { colors } from "@crave/farmblocks-theme";
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;
value: PropTypes.any, // eslint-disable-line
className: PropTypes.string,
};
MapBalloon.defaultProps = {
align: alignments.LEFT,
open: false,
x: 0,
y: 0,
animated: false,
borderRadius: "8px",
pinColor: colors.CORN,
opacity: 1,
pinSize: 40,
balloonSize: 260,
captionSize: fontSizes.LARGE,
imageTextSize: 28,
};
export default MapBalloon;
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