@telekom/scale-components

Version:
Scale is the digital design system for Telekom products and experiences.
50 lines (49 loc) • 1.57 kB
JavaScript
export function createCssString(setProp) {
  const values = setProp.breakpointValues;
  if (!isBreakpointValuesEmpty(values)) {
    const filledArray = fillEmptyBreakpointValues(values);
    const valuesObj = transformBreakpointValuesData(filledArray);
    const stringSizesArray = Object.entries(valuesObj).map(([key, value]) => `--${setProp.propName}-${key}:${value}`);
    return stringSizesArray.join(';') + ';';
  }
}
export function isBreakpointValuesEmpty(values) {
  let isEmpty = true;
  for (const value of values) {
    if (value.value) {
      isEmpty = false;
      break;
    }
  }
  return isEmpty;
}
export function fillEmptyBreakpointValues(values) {
  const filledArray = [...values];
  for (let i = 1; i < filledArray.length; i++) {
    if (!filledArray[i].value) {
      filledArray[i].value = filledArray[i - 1].value;
    }
  }
  return filledArray;
}
export function transformBreakpointValuesData(values) {
  return values.reduce((a, v) => (Object.assign(Object.assign({}, a), { [v.breakpointName]: v.value })), {});
}
export function propsToBreakpointValuesArray(values) {
  return [
    { breakpointName: 'sm', value: values[0] },
    { breakpointName: 'md', value: values[1] },
    { breakpointName: 'lg', value: values[2] },
    { breakpointName: 'xl', value: values[3] },
    { breakpointName: 'xxl', value: values[4] },
  ];
}
export function createBreakpointValuedProp(propName, values) {
  if (!propName || !values) {
    return;
  }
  return {
    propName,
    breakpointValues: propsToBreakpointValuesArray(values.split(',')),
  };
}