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                                    56x 514x 514x       514x     56x 2187x 2187x 2187x 7x             2180x             2187x     56x 1879x 1879x 1879x 563x   1879x       1879x     56x 1884x 1884x 1884x 1765x 1765x   1884x       1884x     1879x 1622x 1879x 1879x 1879x   56x 1636x 1x             1635x 7x           1628x    
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 {};
};