vcc-ui/_src/components/grid/debug.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 { Flex } from '../flex';

// 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,
          },
        },
      }}
    >
      {children}
    </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 20px' : 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' },
        }}
      >
        <DebugColumn>1</DebugColumn>
        <DebugColumn>2</DebugColumn>
        <DebugColumn>3</DebugColumn>
        <DebugColumn>4</DebugColumn>
        <DebugColumn>5</DebugColumn>
        <DebugColumn>6</DebugColumn>
        <DebugColumn>7</DebugColumn>
        <DebugColumn>8</DebugColumn>
        <DebugColumn>9</DebugColumn>
        <DebugColumn>10</DebugColumn>
        <DebugColumn>11</DebugColumn>
        <DebugColumn>12</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',
          },
        }}
      >
        <DebugColumn>1</DebugColumn>
        <DebugColumn>2</DebugColumn>
        <DebugColumn>3</DebugColumn>
        <DebugColumn>4</DebugColumn>
      </Flex>
    </div>
  );
}