vcc-ui/es/components/debug-grid/index.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }

function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React from 'react';
import { useFela } from 'react-fela';
import PropTypes from 'prop-types';
import { Flex } from '../flex';
import { Text } from '../text'; // Testing Only

function DebugColumn(_ref) {
  var _ref$size = _ref.size,
      size = _ref$size === void 0 ? 1 : _ref$size,
      children = _ref.children;

  var _useFela = useFela(),
      theme = _useFela.theme;

  return React.createElement(Flex, {
    extend: _defineProperty({
      boxSizing: 'border-box',
      backgroundColor: 'rgba(0, 0,0,0.1)',
      width: 1024 / 4 * size,
      marginRight: 16,
      height: '100vh',
      ':last-child': {
        marginRight: 0
      }
    }, theme.breakpoints.fromL, {
      width: 1368 / 12 * size,
      marginRight: 24,
      ':last-child': {
        marginRight: 0
      }
    })
  }, React.createElement(Text, {
    extend: {
      paddingLeft: 4
    },
    variant: "bates",
    subStyle: "emphasis"
  }, children));
}

export function DebugGrid(_ref3) {
  var _ref5;

  var _ref3$storybook = _ref3.storybook,
      storybook = _ref3$storybook === void 0 ? false : _ref3$storybook,
      _ref3$disabled = _ref3.disabled,
      disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;

  var _useFela2 = useFela(),
      theme = _useFela2.theme;

  return React.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'
    }
  }, React.createElement(Flex, {
    extend: _defineProperty({
      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'
    }, theme.breakpoints.fromL, {
      display: 'flex'
    })
  }, _toConsumableArray(Array(12).keys()).map(function (i) {
    return React.createElement(DebugColumn, {
      key: i
    }, i + 1);
  })), React.createElement(Flex, {
    extend: (_ref5 = {
      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'
    }, _defineProperty(_ref5, theme.breakpoints.fromM, {
      paddingLeft: 24,
      paddingRight: 24
    }), _defineProperty(_ref5, theme.breakpoints.fromL, {
      display: 'none'
    }), _ref5)
  }, _toConsumableArray(Array(4).keys()).map(function (i) {
    return React.createElement(DebugColumn, {
      key: i
    }, i + 1);
  })));
}
DebugGrid.propTypes = {
  /** Disable debug grid */
  disabled: PropTypes.bool,

  /** Enable if using in a storybook environment */
  storybook: PropTypes.bool
};