How to use @crave/farmblocks-theme - 10 common examples

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