@helpscout/hsds-react/styles/mixins/breakpoints.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.breakpoint = breakpoint;
exports.breakpointAll = breakpointAll;
exports.breakpoints = void 0;

var _lodash = _interopRequireDefault(require("lodash.isfunction"));

var _lodash2 = _interopRequireDefault(require("lodash.isstring"));

var _lodash3 = _interopRequireDefault(require("lodash.isnumber"));

var breakpoints = {
  xs: 0,
  sm: '544px',
  md: '768px',
  lg: '992px'
}; // type BreakpointValue = number | 'xs' | 'sm' | 'md' | 'lg'
// type BreakpointStyles = string | (() => string)

/**
 * Generates a mobile-first @media query CSS rule.
 *
 * @param   {number|string} value Min-width value.
 * @param   {Function|string} styles The styles to render.
 * @returns {string} The compiled @media query rule.
 */

exports.breakpoints = breakpoints;

function breakpoint(value, styles) {
  if (value === void 0) {
    value = 'md';
  }

  if (!(0, _lodash2.default)(value) && !(0, _lodash3.default)(value)) return '';
  var minWidth = breakpoints.hasOwnProperty(value) ? breakpoints[value] : (0, _lodash3.default)(value) ? value + "px" : value;
  var compiledStyles = (0, _lodash.default)(styles) ? styles() : styles;
  return "@media (min-width: " + minWidth + ") {\n    " + compiledStyles + "\n  }";
}

function breakpointAll(content) {
  return "\n    " + content + "\n\n    @media (min-width: " + breakpoints.sm + ") {\n      " + content + "\n    }\n    @media (min-width: " + breakpoints.md + ") {\n      " + content + "\n    }\n    @media (min-width: " + breakpoints.lg + ") {\n      " + content + "\n    }\n  ";
}