All files / utils/styledHelpers core.js

100% Statements 42/42
96.15% Branches 25/26
100% Functions 10/10
100% Lines 37/37

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100                                    55x 514x 514x       514x     55x 6697x 6697x 6697x 7x             6690x             6697x     55x 6377x 6377x 6377x 576x   6377x       6377x     55x 6382x 6382x 6382x 6349x 6349x   6382x       6382x     6377x 6120x 6377x 6377x 6377x   55x 6133x 1x             6132x 7x           6125x    
import {
  borderRadius,
  color,
  fontFamily,
  fontSize,
  letterSpacing,
  lineHeight,
  textAlign,
} from 'styled-system';
import { getGlobalOverrides } from 'src/global-styles';
import { defaultStylesBase } from './cssDefaults';
import {
  resolveColor,
  resolveFontFamily,
  scaleFont,
  scaleFactor, resolveBorderRadius,
} from './utils';
 
export const borderRadiusCore = props => {
  const nextGlobalOverrides = getGlobalOverrides(props);
  const nextProps = {
    ...props,
    borderRadius: resolveBorderRadius(props, nextGlobalOverrides),
  };
  return borderRadius(nextProps);
};
 
export const colorCore = props => {
  let nextProps = null;
  const nextGlobalOverrides = getGlobalOverrides(props);
  if (props.variant) {
    nextProps = {
      ...props,
      backgroundColor: resolveColor(props.bg, nextGlobalOverrides, null),
      bg: resolveColor(props.bg, nextGlobalOverrides, null),
      color: resolveColor(props.color, nextGlobalOverrides, null),
    };
  } else {
    nextProps = {
      ...props,
      backgroundColor: resolveColor(props.bg, nextGlobalOverrides, defaultStylesBase.bg),
      bg: resolveColor(props.bg, nextGlobalOverrides, defaultStylesBase.bg),
      color: resolveColor(props.color, nextGlobalOverrides),
    };
  }
  return color(nextProps);
};
 
export const fontSizeCore = props => {
  let value = props.fontSize || defaultStylesBase.fontSize;
  const scaleValue = scaleFactor(props);
  if (scaleValue) {
    value = scaleValue ? scaleFont(value, scaleValue, 1, 'rem') : value;
  }
  const nextProps = {
    ...props,
    fontSize: value,
  };
  return fontSize(nextProps);
};
 
export const fontFamilyCore = props => {
  const defaultValue = resolveFontFamily(defaultStylesBase.fontFamily);
  let value = defaultValue;
  if (props && props.fontFamily) {
    const nextGlobalOverrides = getGlobalOverrides(props);
    value = resolveFontFamily(props.fontFamily, nextGlobalOverrides, defaultValue);
  }
  const nextProps = {
    ...props,
    fontFamily: value,
  };
  return fontFamily(nextProps);
};
 
export const letterSpacingCore = props => letterSpacing({ ...props, letterSpacing: props.kerning || defaultStylesBase.kerning });
export const lineHeightCore = props => lineHeight({ ...props, lineHeight: props.lineHeight || defaultStylesBase.lineHeight });
export const fontStyleCore = props => `${props.italic ? 'font-style: italic;' : ''}`;
export const textAlignCore = props => textAlign({ ...props, textAlign: props.textAlign || defaultStylesBase.textAlign });
export const textDecorationCore = props => `text-decoration: ${props.textDecoration || defaultStylesBase.textDecoration};`;
 
export const ellipsisCore = props => {
  if (props.ellipsis > 1) {
    return {
      display: '-webkit-box',
      overflow: 'hidden',
      WebkitBoxOrient: 'vertical',
      WebkitLineClamp: props.ellipsis,
    };
  }
  if (props.ellipsis) {
    return {
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
    };
  }
  return {};
};