vcc-ui/_src/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.

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({ size = 1, children }) {
  const { theme } = useFela();

  return (
    <Flex
      extend={{
        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,
          },
        },
      }}
    >
      <Text extend={{ paddingLeft: 4 }} variant="bates" subStyle="emphasis">
        {children}
      </Text>
    </Flex>
  );
}

export function DebugGrid({ storybook = false, disabled = false }) {
  const { theme } = useFela();
  return (
    <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',
      }}
    >
      <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',
          [theme.breakpoints.fromL]: { display: 'flex' },
        }}
      >
        {[...Array(12).keys()].map(i => (
          <DebugColumn key={i}>{i + 1}</DebugColumn>
        ))}
      </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',
          [theme.breakpoints.fromM]: {
            paddingLeft: 24,
            paddingRight: 24,
          },
          [theme.breakpoints.fromL]: {
            display: 'none',
          },
        }}
      >
        {[...Array(4).keys()].map(i => (
          <DebugColumn key={i}>{i + 1}</DebugColumn>
        ))}
      </Flex>
    </div>
  );
}

DebugGrid.propTypes = {
  /** Disable debug grid */
  disabled: PropTypes.bool,
  /** Enable if using in a storybook environment */
  storybook: PropTypes.bool,
};