All files / utils/styledHelpers/utils resolvers.js

97.67% Statements 42/43
94.44% Branches 34/36
100% Functions 8/8
97.62% Lines 41/42

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                            55x 35546x 35546x     763x       55x 763x         763x 763x           763x 763x 1x   762x 9x   753x 164x   589x     55x 21785x 21785x 21785x     21785x     55x 12741x 12741x 12741x     55x 22x   22x 2x   20x 20x     55x 227x   227x 8x   219x 219x     55x 2x 2x 2x    
/**
 * Grape UI Core style helpers.
 */
 
import { getGlobalStyles, getGlobalOverrides } from 'src/global-styles';
import { isKeyNestedProp, resolveToProperty } from 'src/utils/objectHelpers';
import { defaultStylesBase } from '..';
import { CSS_INHERIT_VALUE } from '../cssDefaults';
 
/**
 *
 * @param {Object} globalOverrides Takes in global styles as an object. If the object has theme property, it will resolve to new global styled object with theme styles via getGlobalOverrides.
 * Othewise returns the global styles object as is. If undefined returns the default global style object via getGlobalStyles.
 */
export const resolveGlobal = (globalOverrides = getGlobalStyles()) => {
  const theme = resolveToProperty('theme', globalOverrides);
  return theme ? getGlobalOverrides(globalOverrides) : globalOverrides;
};
 
export const getBorderRadiusForFormFieldType = (borderRadius, formStyle) => ((formStyle === 'filled')
  ? `${borderRadius} ${borderRadius} 0 0`
  : borderRadius);
 
export const resolveBorderRadius = (props, globalOverrides, defaultBorderRadius = defaultStylesBase.borderRadius) => {
  Iif (!props) {
    return getBorderRadiusForFormFieldType(defaultBorderRadius);
  }
 
  // Grape UI lg or sm options
  const globalStyles = resolveGlobal(globalOverrides);
  const { border: borderSchema } = globalStyles;
  const {
    borderRadius,
    formStyle,
    lg,
    sm,
  } = props;
  if (borderRadius) {
    return getBorderRadiusForFormFieldType(borderRadius, formStyle);
  }
  if (lg) {
    return getBorderRadiusForFormFieldType(borderSchema.borderRadius.lg, formStyle);
  }
  if (sm) {
    return getBorderRadiusForFormFieldType(borderSchema.borderRadius.sm, formStyle);
  }
  return getBorderRadiusForFormFieldType(borderSchema.borderRadius.base, formStyle);
};
 
export const resolveColor = (colorToResolve, globalOverrides, defaultColor = defaultStylesBase.color) => {
  const globalStyles = resolveGlobal(globalOverrides);
  const { colors: colorSchema } = globalStyles;
  const resolvedValue = isKeyNestedProp(colorToResolve)
    ? resolveToProperty(colorToResolve, colorSchema)
    : resolveToProperty(`${colorToResolve}.base`, colorSchema);
  return resolvedValue || colorToResolve || defaultColor;
};
 
export const resolveFontFamily = (fontFamilyToResolve, globalOverrides, defaultValue) => {
  const globalStyles = resolveGlobal(globalOverrides);
  const { fontFamily: fontFamilySchema } = globalStyles;
  return resolveToProperty(fontFamilyToResolve, fontFamilySchema) || defaultValue;
};
 
export const resolveBoxShadow = (depth, globalOverrides) => {
  const { shadow: shadowSchema } = resolveGlobal(globalOverrides);
 
  if (!depth || typeof depth !== 'string') {
    return CSS_INHERIT_VALUE;
  }
  const resolvedBoxShadow = resolveToProperty(depth, shadowSchema);
  return resolvedBoxShadow || CSS_INHERIT_VALUE;
};
 
export const resolveZIndex = (depth, globalOverrides) => {
  const { zIndex: zIndexSchema } = resolveGlobal(globalOverrides);
 
  if (!depth || typeof depth !== 'string') {
    return CSS_INHERIT_VALUE;
  }
  const resolvedZIndex = resolveToProperty(depth, zIndexSchema);
  return resolvedZIndex || CSS_INHERIT_VALUE;
};
 
export const resolveElevation = (depth, globalOverrides) => {
  const resolvedBoxShadow = resolveBoxShadow(depth, globalOverrides);
  const resolvedZIndex = resolveZIndex(depth, globalOverrides);
  return `z-index: ${resolvedZIndex}; box-shadow: ${resolvedBoxShadow}` || CSS_INHERIT_VALUE;
};