Newskit Logo
About

Component Defaults Utils

A group of functions used to retrieve values from the component defaults or overrides objects.

Overview

Each component has its own component defaults object as well as overrides prop. Component defaults map foundation and preset tokens to the component, describing the default look and feel. As well as being able to override these defaults in the theme, component overrides allow you to change these tokens as desired when rendering individual instances.

The provided functions, specified below, are used to retrieve the CSS objects sitting behind the theme tokens. These functions don't access the theme directly themselves, they just orchestrate the process of fetching theme values, utilising the other get from theme functions.

getStylePreset and getTypographyPreset parameters

defaultPathstring | undefined
It is an object-path used to access deep properties in the component defaults.
Component defaults objects can have a nested structure that mirrors the structure of the component. Root level key of this object is always the name of the component.
Example: "headline.kicker", "byline.divider", "shareBar" If not provided (undefined or false passed) desired value is looked up only in the respective overrides object.
overridePathstring | false = ""
It is an object-path used to access deep properties in the overrides.
Overrides objects can have as well a nested structure that mirrors the structure of the component.
Example: "kicker", "divider", "" (empty string)
optionsParameters<FromThemeUtil>[2]
This prop consists of different options used to control component-specific behaviours.
propsProps
Is the props of the component including the theme. If the function is used inside a styled component template literal, or a CSS block, Emotion.js will call the function first with the component props passed in.

Syntax


  getStylePreset(defaultPath, overridePath, options)(props)
  
  options: {
    nestedCssSelector?: string;
    isLoading?: boolean;
    isSelected?: boolean;
    isDisabled?: boolean;
    isInvalid?: boolean;
    isValid?: boolean;
    isSvg?: boolean;
    omitStates?: StylePresetStates[];
    filterStates?: StylePresetStates[];
    omitStyles?: StylePresetStyleKeys[];
    filterStyles?: StylePresetStyleKeys[];
  };
  

Used to retrieve values mapped to the stylePreset key in the component defaults/overrides.


  getTypographyPreset(defaultPath, overridePath, options)(props)
  
  options: {
    withCrop?: boolean;
  };
  

Used to retrieve values mapped to the typographyPreset key in the component defaults/overrides.

getResponsiveSpace, getResponsiveSize, getResponsiveMotion and getResponsiveBorder parameters

cssPropertystring
It is a valid CSS property or callback function which will take CSS property as argument
defaultPathstring | undefined
It is an object-path used to access deep properties in the component defaults.
Component defaults objects can have a nested structure that mirrors the structure of the component. Root level key of this object is always the name of the component.
Example: "headline.kicker", "byline.divider", "shareBar" If not provided (undefined or false passed) desired value is looked up only in the respective overrides object.
overridePathstring | false = ""
It is an object-path used to access deep properties in the overrides.
Overrides objects can have as well a nested structure that mirrors the structure of the component.
Example: "kicker", "divider", "" (empty string)
defaultsObjectKeystring
Object key from component-defaults that is holding the value that we are trying to get
propsProps
Is the props of the component including the theme. If the function is used inside a styled component template literal, or a CSS block, Emotion.js will call the function first with the component props passed in.

  getResponsiveSpace(cssProperty, defaultPath, overridePath, defaultsObjectKey)(props)
  // example
  getResponsiveSpace('marginRight', 'drawer.panel', 'panel', 'spaceInline')(props)
  // returns {marginRight: value} or media query object when token is MQ<T>
  

Example return value when the defaultPath is MQ<string>

// drawer.panel  in component defaults
{
  spaceInline: {
    xs: 'sizing010',
    sm: 'sizing020',
    md: 'sizing030',
  }
}
// Using getResponsiveSpace
getResponsiveSpace('marginRight', 'drawer.panel', 'panel', 'spaceInline')(props)
  
// returns media query object
{
'@media screen and (max-width: 479px)': {marginRight: '4px'},
'@media screen and (min-width: 480px) and (max-width: 767px)': {marginRight: '8px'},
'@media screen and (min-width: 768px)': {marginRight: '12px'},
}

Used to retrieve space token


  getResponsiveSize(cssProperty, defaultPath, overridePath, defaultsObjectKey)(props)
  // example
  getResponsiveSize('width', 'drawer.panel', 'panel', 'size')(props)
  // returns {width: value} or media query object when token is MQ<T>
  

Used to retrieve size token


  getResponsiveMotion(cssProperty, defaultPath, overridePath, defaultsObjectKey)(props)
  // example
  getResponsiveMotion('transitionDuration', 'drawer.panel', 'panel', 'motionDuration')(props)
  // returns {transitionDuration: value} or media query object when token is MQ<T>
  

Used to retrieve motion token


  getResponsiveBorder(cssProperty, defaultPath, overridePath, defaultsObjectKey)(props)
  // example
  getResponsiveBorder('borderWidth', 'drawer.panel', 'panel', 'weight')(props)
  // returns {borderWidth: value} or media query object when token is MQ<T>
  

Used to retrieve border token

You can use a callback function instead of passing directly cssProperty


  // callback
  const cb = (space) => ({paddingLeft: space, paddingRight: space})
  // example
  getResponsiveSpace(cb, 'drawer.panel', 'panel', 'spaceInset')(props)
  // returns {paddingLeft: value, paddingRight: value} or media query object when token is MQ<T>
  

getStylePreset, getTypographyPreset, getResponsiveSpace, getResponsiveSize, getResponsiveMotion and getResponsiveBorder Return value

Returns a CSS object, mapped to a theme token (mapped to a key in the component defaults/overrides) if valid attributes are received.

Here is an example of using the different functions:

Deprecated getSpacingInlineHorizontal, getSpacingInlineVertical, getSpacingStackHorizontal, getSpacingStackVertical and getSpacingInset


  // @deprecated
  getSpacingInlineHorizontal(defaultPath, overridePath, options)(props)
  
  getResponsiveSpace('marginRight', defaultPath, overridePath, 'spaceInline')(props)
  

Used to retrieve value mapped to the spaceInline key in the component defaults/overrides and places it as margin-right CSS property when the text or itmes flow is horizontal.


    // @deprecated
    getSpacingInlineVertical(defaultPath, overridePath, options)(props)
    
    getResponsiveSpace('marginBottom', defaultPath, overridePath, 'spaceInline')(props)
  

Used to retrieve value mapped to the spaceInline key in the component defaults/overrides and places it as margin-bottom CSS property when the text or itmes flow is vertical.


    // @deprecated
    getSpacingStackHorizontal(defaultPath, overridePath, options)(props)
  
    getResponsiveSpace('marginRight', defaultPath, overridePath, 'spaceStack')(props)
  

Used to retrieve value mapped to the spaceStack key in the component defaults/overrides and places it as margin-bottom CSS property when the text or itmes flow is horizontal.


    // @deprecated
    getSpacingStackVertical(defaultPath, overridePath, options)(props)
  
    getResponsiveSpace('marginBottom', defaultPath, overridePath, 'spaceStack')(props)
  

Used to retrieve value mapped to the spaceStack key in the component defaults/overrides and places it as margin-right CSS property when the text or itmes flow is vertical.


    // @deprecated
    getSpacingInset(defaultPath, overridePath, options)(props)
  
    getResponsiveSpace('padding', defaultPath, overridePath, 'spaceInset')(props)
  

Used to retrieve value mapped to the spaceInsite key in the component defaults/overrides and applies it as padding CSS property to an element.

getSpacingInlineHorizontal, getSpacingInlineVertical, getSpacingStackHorizontal, getSpacingStackVertical and getSpacingInset Return value

Returns a CSS value, or object, mapped to a theme token (mapped to a key in the component defaults/overrides) if valid attributes are received.

Returns an empty string if invalid attributes or no attributes are provided.