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                                    61x 518x 518x       518x     61x 2192x 2192x 2192x 7x             2185x             2192x     61x 1884x 1884x 1884x 565x   1884x       1884x     61x 1889x 1889x 1889x 1770x 1770x   1889x       1889x     1884x 1625x 1884x 1884x 1884x   61x 1641x 1x             1640x 7x           1633x    
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 {};
};