Molecules

molecules.js

const MOLECULES_LIB = {
  'headline-500': ['type-38','type-48-sm','type-60-md','type-100-lg'],
  'headline-400': ['type-38','type-48-sm','type-60-md','type-80-lg'],
  'headline-300': ['type-21','type-38-md','type-48-lg'],
  'headline-200': ['type-21','type-24-md','type-28-lg'],
  'subhead-600': ['type-18','type-21-md'],
  'subhead-500': ['type-16','type-21-md'],
  'subhead-400': ['type-14','type-21-md'],
  'subhead-300': ['type-16','type-18-md'],
  'subhead-200': ['type-14','type-18-md'],
  'body-200': ['type-14','type-16-md'],
  'body-100': ['type-13','type-14-md'],
  'caption-200': ['type-12','type-13-md'],
  'caption-100': ['type-12'],
  
  // Core button styles
  'bttn': [
    'medium',
    'text-center',
    'lh1',
    'pointer',
    'border-none',
    'relative',
    'inline-block',
    'webkit-appearance-none'
  ],

  // Button sizes
  'bttn-xsmall': [
    'h5','lh5','py0','px2','fz-12'
  ],
  'bttn-small': [
    'h6','lh6','py0','px2','fz-12'
  ],
  'bttn-medium': [
    'h7','lh7','py0','px3','fz-14'
  ],
  'bttn-large': [
    'h8','lh8','py0','px4','fz-16'
  ],
  'bttn-xlarge': [
    'h9','lh9','py0','px4','fz-16'
  ]
};

const flatMap = (fn, arr) => arr.map(fn).reduce((xs,x) => xs.concat(x),[])

const responsiveSuffixPattern = /(-(xs|sm|md|lg))$/g;
const moleculeLookUp = (cx) => MOLECULES_LIB[cx]

const separateResponsiveClasses = (cx) => {
  return [
    cx.filter(x => !x.match(responsiveSuffixPattern)),
    cx.filter(x => x.match(responsiveSuffixPattern))
  ];
};

const convertToResponsiveAtoms = (cx) => {
  const suffix = cx.match(responsiveSuffixPattern)[0];
  return moleculeLookUp(cx.replace(suffix,'')).map(x => x + suffix)
};

const molecules = (classList) => {
  const [
    universalClasses,
    responsiveClasses
  ] = separateResponsiveClasses(classList.split(' '));
  
  const convertedResponsiveAtoms = flatMap(convertToResponsiveAtoms, responsiveClasses);
  const convertedUniversalAtoms = flatMap(moleculeLookUp, universalClasses);
  return [...convertedResponsiveAtoms, ...convertedUniversalAtoms].join(' ')
}