vcc-ui/dist/components/debug-grid/debug-grid.js

A React library for building user interfaces at Volvo Cars

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DebugGrid = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _flex = require("../flex");
var _text = require("../text");
const DebugColumn = _ref => {
  let {
    size = 1,
    children
  } = _ref;
  return /*#__PURE__*/_react.default.createElement(_flex.Flex, {
    extend: {
      boxSizing: 'border-box',
      backgroundColor: 'rgba(0, 0,0,0.1)',
      width: 1024 / 4 * size,
      marginRight: 16,
      height: '100vh',
      ':last-child': {
        marginRight: 0
      },
      fromL: {
        width: 1368 / 12 * size,
        marginRight: 24,
        ':last-child': {
          marginRight: 0
        }
      }
    }
  }, /*#__PURE__*/_react.default.createElement(_text.Text, {
    extend: {
      paddingLeft: 4
    },
    variant: "bates",
    subStyle: "emphasis"
  }, children));
};

/** @deprecated */
const DebugGrid = _ref2 => {
  let {
    storybook = false,
    disabled = false
  } = _ref2;
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: disabled ? 'none' : 'block',
      position: 'fixed',
      zIndex: 10000,
      pointerEvents: 'none',
      opacity: 0.5,
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      padding: storybook ? '0 24px' : 0,
      boxSizing: 'border-box'
    }
  }, /*#__PURE__*/_react.default.createElement(_flex.Flex, {
    extend: {
      flexDirection: 'row',
      maxWidth: 1400,
      height: '100vh',
      margin: '0 auto',
      width: '100%',
      paddingLeft: 40,
      paddingRight: 40,
      boxSizing: 'border-box',
      backgroundColor: 'rgba(0, 0,0, 0.05)',
      display: 'none',
      fromL: {
        display: 'flex'
      }
    }
  }, [...Array(12).keys()].map(i => /*#__PURE__*/_react.default.createElement(DebugColumn, {
    key: i
  }, i + 1))), /*#__PURE__*/_react.default.createElement(_flex.Flex, {
    extend: {
      flexDirection: 'row',
      height: '100vh',
      margin: '0 auto',
      width: '100%',
      paddingLeft: 16,
      paddingRight: 16,
      boxSizing: 'border-box',
      backgroundColor: 'rgba(0, 0,0, 0.05)',
      display: 'flex',
      fromM: {
        paddingLeft: 24,
        paddingRight: 24
      },
      fromL: {
        display: 'none'
      }
    }
  }, [...Array(4).keys()].map(i => /*#__PURE__*/_react.default.createElement(DebugColumn, {
    key: i
  }, i + 1))));
};
exports.DebugGrid = DebugGrid;
DebugGrid.propTypes = {
  /** Disable debug grid */
  disabled: _propTypes.default.bool,
  /** Enable if using in a storybook environment */
  storybook: _propTypes.default.bool
};