@scrnhq/eurovision-elements/library/spacing.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _templateObject = _taggedTemplateLiteral(['\n      ', '\n      @media (min-width: ', ') {\n        ', '\n      }\n    '], ['\n      ', '\n      @media (min-width: ', ') {\n        ', '\n      }\n    ']);

var _styledComponents = require('styled-components');

var _config = require('./config');

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); } /* eslint no-param-reassign: 0 */


/**
 * This method generates spacing as defined in the theme file.
 * You can use this method like this:
 * ${spacing.small`margin-top`}
 * This applies the small spacing for all the breakpoints for the margin-top property.
 *
 * It works by exporting an object with all the spacing variations
 * (e.g. small, medium, large) as css functions that generate all the media
 * queries for the breakpoints.
 */
exports.default = Object.keys(_config.spacingPerBreakpoint).reduce(function (accumulator, label) {
  accumulator[label] = function () {
    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return Object.keys(_config.spacingPerBreakpoint[label]).reduce(function (styledAccumulator, breakpoint) {
      return (0, _styledComponents.css)(_templateObject, styledAccumulator, _config.breakpoints[breakpoint], function () {
        // Get the styles
        var styles = _styledComponents.css.apply(undefined, args);
        // Replace {value} with the actual value
        return styles.map(function (style) {
          return style.replace(/{value}/g, _config.spacingPerBreakpoint[label][breakpoint]);
        });
      });
    }, {});
  };
  return accumulator;
}, {});