{"size": 1861, "ext": "js", "max_stars_repo_path": "src/molecules/BlockHeader/GrayBox/GrayBox.js", "max_stars_repo_name": "policygenius/athenaeum", "max_stars_repo_stars_event_min_datetime": "2017-07-19T23:37:11.000Z", "max_stars_repo_stars_event_max_datetime": "2021-04-22T18:05:56.000Z", "max_issues_repo_path": "src/molecules/BlockHeader/GrayBox/GrayBox.js", "max_issues_repo_name": "policygenius/athenaeum", "max_issues_repo_issues_event_min_datetime": "2017-04-04T22:06:05.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-18T01:51:46.000Z", "max_forks_repo_path": "src/molecules/BlockHeader/GrayBox/GrayBox.js", "max_forks_repo_name": "policygenius/athenaeum", "max_forks_repo_forks_event_min_datetime": "2017-06-10T14:57:15.000Z", "max_forks_repo_forks_event_max_datetime": "2021-09-03T18:01:04.000Z"}
{"max_stars_count": 8, "max_issues_count": 257, "max_forks_count": 6, "avg_line_length": 21.8941176471, "max_line_length": 78, "alphanum_fraction": 0.6190220312}
import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';

import Layout from 'atoms/Layout';
import StyledWrapper from 'atoms/StyledWrapper';
import Col from 'atoms/Layout/Col';
import colors from 'atoms/Color/colors.scss';

import styles from './gray-box.module.scss';

const GrayBox = ({
  cols,
  variant,
  colorDash,
  colorDashPosition,
  children,
  className,
  verticalPadding,
  leftOffset
}) => {

  const classes = cx(
    styles['gray-box'],
    styles[`gray-box-lg-${cols}`],
    variant && styles[variant],
    colorDash && colors[`color-dash-${colorDash}`],
    leftOffset && styles[`offset-${leftOffset}`],
    colorDashPosition === 'left' ? styles['left-dash'] : styles['right-dash'],
    className
  );

  const styleOverrides = ({ breakpoints }) => {
    let str = '';

    if (verticalPadding) {
      str += `
        padding-top: ${verticalPadding};
        padding-bottom: ${verticalPadding};
      `;
    }

    if (leftOffset) {
      str += `
      @media ${breakpoints.mediumUp} {
        margin-left: ${(100 / 12) * leftOffset}% !important;
        max-width: ${100 - ((100 / 12) * (cols - leftOffset))}% !important;
      }
      `;
    }

    return str;
  };

  return (
    <Layout
      mediumCols={[ cols - 1 ]}
      className={classes}
    >
      <StyledWrapper
        css={styleOverrides}
        component={Col}
        fullwidth
      >
        {children}
      </StyledWrapper>
    </Layout>
  );
};

GrayBox.propTypes = {
  supertitle: PropTypes.string,
  className: PropTypes.string,
  title: PropTypes.string,
  cols: PropTypes.number,
  variant: PropTypes.string,
  colorDash: PropTypes.string,
  children: PropTypes.node,
  verticalPadding: PropTypes.string,
  leftOffset: PropTypes.number,
  colorDashPosition: PropTypes.oneOf([ 'left', 'right' ]),
};

export default GrayBox;
