@wix/design-system
Version:
@wix/design-system
35 lines • 1.32 kB
JavaScript
import { stVars as spacingStVars } from '../../Foundation/stylable/spacing.st.css.js';
import { SPACING } from '../Box.constants';
/** In case the value is a number, it's multiplied by the defined spacing unit.
* Otherwise - there are three options:
* 1. A Spacing Token - SP1, SP2, etc. - where the number is multiplied by the spacing unit.
* 2. A predefined spacing value with semantic name (tiny, small, etc.)
* 3. Space-separated values that are represented by a string (for example: "3px 3px")
* */
export const formatSpacingValue = (value) => {
return value?.toString().split(' ').map(computeSpacingValue).join(' ');
};
function isSpacingKey(value) {
return value in SPACING;
}
const computeSpacingValue = (value) => {
if (isFinite(Number(value))) {
return `calc(${Number(value)} * ${spacingStVars.Spacing})`;
}
if (typeof value === 'string') {
if (value in spacingStVars) {
return spacingStVars[value];
}
else if (isSpacingKey(value)) {
return SPACING[value];
}
}
return `${value}`;
};
export const getSpacingValues = (props) => {
return Object.fromEntries(Object.entries(props).map(([key, value]) => [
key,
formatSpacingValue(value),
]));
};
//# sourceMappingURL=formatSpacingValues.js.map