@crave/farmblocks-hoc-input/lib/styledComponents/Wrapper.js

A High Order Component that adds behaviour of label support, different styles for focus and errors, and validation error messages.

import styled, { css } from "styled-components";
import { space } from "styled-system";
import { transparentize } from "polished";
import { colors, fontSizes } from "@crave/farmblocks-theme";
const outlineColor = transparentize(0.92, colors.INDIGO_MILK_CAP);

const getColorByStatus = ({
  fallbackColor
}) => ({
  focused,
  active,
  invalid
}) => {
  if (focused || active) return colors.INDIGO_MILK_CAP;
  if (invalid) return colors.STRAWBERRY;
  return fallbackColor;
};

const customCursor = props => props.disabled ? "default" : "pointer";

const fontStyles = css(["font-family:Lato,sans-serif;font-size:", "px;"], fontSizes.MEDIUM);

const focusedStyle = ({
  focused,
  active
}) => (focused || active) && css(["box-shadow:0 0 0px 4px ", ";border-width:2px;margin:-1px;"], outlineColor);

const Wrapper = styled.div.withConfig({
  displayName: "Wrapper",
  componentId: "sc-19afhg7-0"
})(["display:flex;flex-direction:column;", " ", ";> .input{order:2;box-sizing:border-box;border:solid 1px;border-radius:", ";border-color:", ";background-color:", ";", ";display:flex;flex-direction:row;align-items:center;cursor:text;overflow:auto;.wrapped{flex:1;}> input,.select__search & input{padding:", ";line-height:", ";}> textarea{padding:16px;}input,textarea,select{font-family:inherit;font-size:inherit;}> input,> textarea,.select__search & input{min-width:0;border:0;flex:1;outline:none;color:", ";background:none;&::placeholder{color:", ";}&[type=\"search\"]{-webkit-appearance:none;-moz-appearance:none;&::-webkit-search-cancel-button{display:none;}&::-ms-clear{width:0;height:0;}}&[role=\"combobox\"]{cursor:", ";}}> .icon{color:", ";&.left{margin-left:8px;margin-right:-8px;}&.right{margin-right:8px;margin-left:-8px;}}> .clear{color:", ";&:hover{text-decoration:none;color:", ";}a{text-decoration:none;cursor:pointer;}}}.input.dropdown{cursor:", ";}input[type=\"number\"]{-moz-appearance:textfield;}input[type=\"number\"]::-webkit-inner-spin-button,input[type=\"number\"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}.prefix{margin-left:16px;margin-right:-8px;}.suffix{margin-right:16px;margin-left:-8px;}.prefix,.suffix{", ";color:", ";}.label{margin-bottom:8px;}"], space, fontStyles, ({
  borderRadius
}) => borderRadius, getColorByStatus({
  fallbackColor: colors.GREY_16
}), props => props.disabled ? colors.GREY_16 : "#ffffff", focusedStyle, ({
  small
}) => small ? "4px 16px" : "8px 16px", ({
  small
}) => small ? "24px" : "22px", props => props.disabled ? colors.GREY_32 : colors.CARBON, colors.GREY_32, customCursor, getColorByStatus({
  fallbackColor: colors.GREY_16
}), colors.GREY_16, colors.INDIGO_MILK_CAP, customCursor, fontStyles, getColorByStatus({
  fallbackColor: colors.GREY_32
}));
export default Wrapper;