Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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;
export const Pre = styled.pre`
display: inline-block;
font-size: 1rem;
background: aliceblue;
color: darkslateblue;
margin: 0;
padding: 4px;
`;
const Grid = styled.div`
display: grid;
grid: auto-flow min-content / repeat(auto-fill, minmax(180px, 1fr));
grid-gap: 8px;
padding: 8px;
background: ${colors.SUGAR};
`;
const GroupHeader = styled(Text)`
grid-column-start: 1;
grid-column-end: -1;
align-self: end;
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;
`;
}
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};
`;
};
import styled from "styled-components";
import { colors as colorConstants } from "@crave/farmblocks-theme";
const FooterContainer = styled.div`
font-family: Lato, sans-serif;
background-color: ${colorConstants.SUGAR};
border-top: solid 1px ${colorConstants.GREY_16};
padding: 16px 24px;
display: flex;
justify-content: space-between;
.button-container {
display: flex;
align: flex-end;
> * {
margin-left: 16px;
}
[tagTypes.SECONDARY]: css`
background-color: ${colorConstants.INDIGO_MILK_CAP};
color: white;
&:hover {
border-color: ${colorConstants.GREY_32};
background-color: ${colorConstants.BLUE_CORN};
}
&:hover .close-icon,
&:focus .close-icon {
color: white;
}
`,
[tagTypes.NEUTRAL]: css`
background-color: ${colorConstants.SUGAR};
color: ${colorConstants.OYSTER};
&:hover {
background-color: ${colorConstants.GREY_16};
}
`,
};
const disabledStyles = {
[tagTypes.SECONDARY]: css`
background-color: ${colorConstants.GREY_32};
pointer-events: none;
padding: 6px 14px 8px 15px;
`,
};
import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import { colors as colorConstants } from "@crave/farmblocks-theme";
import HelperContent from "./HelperContent";
const Container = styled.div`
font-family: Lato, sans-serif;
background-color: ${colorConstants.SUGAR};
border-top: solid 1px ${colorConstants.GREY_16};
padding: 16px 24px;
display: flex;
justify-content: space-between;
`;
Container.displayName = "FooterContainer";
const ActionsContainer = styled.div`
display: flex;
align-items: center;
align: flex-end;
> * {
import { colors } from "@crave/farmblocks-theme";
export const cardTypes = {
FEATURED: "FEATURED",
NEUTRAL: "NEUTRAL",
DEFAULT: "DEFAULT",
};
export const cardTypeColors = {
[cardTypes.FEATURED]: colors.INDIGO_MILK_CAP,
[cardTypes.NEUTRAL]: colors.SUGAR,
[cardTypes.DEFAULT]: "#ffffff",
};
export default {
cardTypes,
cardTypeColors,
};
)}
{render({ highlightColor, variant })}
);
};
SideNav.defaultProps = {
backgroundColor: colors.SUGAR,
highlightColor: colors.RED_ORANGE,
zIndex: 100,
offsetTop: "0",
collapsedWidth: "56px",
expandedWidth: "270px",
variant: PUSH,
expanded: true,
position: "left",
};
SideNav.propTypes = {
/**
Render the sidebar content, passing as args the following props: highlightColor, variant.
*/
render: PropTypes.func,
/**
const switchBackground = props => {
if (props.disabled) {
return colors.GREY_32;
}
if (props.checked) {
return colors.LETTUCE;
}
return colors.SUGAR;
};
const StyledWrapper = styled.div`
width: 400px;
`;
const image = "https://picsum.photos/100?image=0";
const items = [
{ value: "1", label: "Apple", image },
{ value: "2", label: "Banana", image },
{ value: "3", label: "Pear", image },
];
const StyledFooterWrapper = styled.div`
display: flex;
align-items: center;
padding: 16px 8px;
background: ${colors.SUGAR};
.icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
margin: 8px;
border: solid 1px ${colors.GREY_16};
border-radius: 12px;
font-size: 12px;
}
.link {
display: block;
}
`;