@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
66 lines • 2.69 kB
JavaScript
const TOKEN_PREFIX = "ax";
export function getResponsiveValue(componentName, componentProp, responsiveProp) {
if (!responsiveProp) {
return {};
}
if (typeof responsiveProp === "string") {
return {
[`--__${TOKEN_PREFIX}c-${componentName}-${componentProp}-xs`]: responsiveProp,
};
}
return Object.fromEntries(Object.entries(responsiveProp).map(([breakpointAlias, responsiveValue]) => [
`--__${TOKEN_PREFIX}c-${componentName}-${componentProp}-${breakpointAlias}`,
responsiveValue,
]));
}
const translateTokenStringToCSS = (specialLayout, tokenString, tokenSubgroup, tokenExceptions, invert) => {
return tokenString
.split(" ")
.map((propValue, _, arr) => {
// Handle special layout cases
if (specialLayout === "margin-inline" && propValue === "full") {
return `calc((100vw - ${100 / arr.length}%)/-2)`;
}
if (specialLayout === "padding-inline" && propValue === "full") {
return `calc((100vw - ${100 / arr.length}%)/2)`;
}
if (["mi", "mb"].includes(specialLayout) && propValue === "auto") {
return "auto";
}
// Handle exceptions and space tokens
let output = `var(--${TOKEN_PREFIX}-${tokenSubgroup}-${propValue})`;
if (tokenExceptions.includes(propValue)) {
output = propValue;
}
else if (tokenSubgroup === "space") {
output = `var(--${TOKEN_PREFIX}-${propValue})`;
}
else if (tokenSubgroup === "radius") {
output = `var(--${TOKEN_PREFIX}-radius-${propValue})`;
}
// Handle inversion for negative values
if (invert) {
if (propValue === "0")
return `0`;
return `calc(-1 * ${output})`;
}
return output;
})
.join(" ");
};
export function getResponsiveProps(componentName, componentProp, tokenSubgroup, responsiveProp, invert = false, tokenExceptions = []) {
if (!responsiveProp) {
return {};
}
if (typeof responsiveProp === "string") {
return {
[`--__${TOKEN_PREFIX}c-${componentName}-${componentProp}-xs`]: translateTokenStringToCSS(componentProp, responsiveProp, tokenSubgroup, tokenExceptions, invert),
};
}
const styleProps = {};
Object.entries(responsiveProp).forEach(([breakpointAlias, aliasOrScale]) => {
styleProps[`--__${TOKEN_PREFIX}c-${componentName}-${componentProp}-${breakpointAlias}`] = translateTokenStringToCSS(componentProp, aliasOrScale, tokenSubgroup, tokenExceptions, invert);
});
return styleProps;
}
//# sourceMappingURL=css.js.map