NewsKit Mobile Logo

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 values and 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.

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: {
    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.

getSpacingInlineHorizontal(defaultPath, overridePath, options)(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.

getSpacingInlineVertical(defaultPath, overridePath, options)(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.

getSpacingStackHorizontal(defaultPath, overridePath, options)(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.

getSpacingStackVertical(defaultPath, overridePath, options)(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.

getSpacingInset(defaultPath, overridePath, options)(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.

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.

Example

Here is an example of using the different functions: