{"size": 2509, "ext": "js", "max_stars_repo_path": "assets/javascripts/kitten/components/atoms/horizontal-stroke/index.js", "max_stars_repo_name": "KissKissBankBank/kitten", "max_stars_repo_stars_event_min_datetime": "2016-12-14T15:04:17.000Z", "max_stars_repo_stars_event_max_datetime": "2022-01-15T01:06:13.000Z", "max_issues_repo_path": "assets/javascripts/kitten/components/atoms/horizontal-stroke/index.js", "max_issues_repo_name": "KissKissBankBank/kitten", "max_issues_repo_issues_event_min_datetime": "2016-12-08T13:38:38.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T16:53:56.000Z", "max_forks_repo_path": "assets/javascripts/kitten/components/atoms/horizontal-stroke/index.js", "max_forks_repo_name": "KissKissBankBank/kitten", "max_forks_repo_forks_event_min_datetime": "2017-08-11T12:08:20.000Z", "max_forks_repo_forks_event_max_datetime": "2018-09-18T08:46:25.000Z"}
{"max_stars_count": 44, "max_issues_count": 1450, "max_forks_count": 3, "avg_line_length": 20.2338709677, "max_line_length": 83, "alphanum_fraction": 0.6249501794}
import React from 'react'
import PropTypes from 'prop-types'
import styled, { css } from 'styled-components'
import COLORS from '../../../constants/colors-config'
import { pxToRem } from '../../../helpers/utils/typography'
import classNames from 'classnames'
import { strokeModifierStylesWithoutMargin } from './common/stroke-modifier-styles'

export const MICRO = css`
  width: ${pxToRem(15)};
  height: ${pxToRem(2)};
`

export const TINY = css`
  width: ${pxToRem(20)};
  height: ${pxToRem(2)};
`

export const DEFAULT = css`
  width: ${pxToRem(30)};
  height: ${pxToRem(4)};
`

export const BIG = css`
  width: ${pxToRem(50)};
  height: ${pxToRem(4)};
`

export const HUGE = css`
  width: ${pxToRem(100)};
  height: ${pxToRem(6)};
`

export const StyledHorizontalStroke = styled.div`
  border: none;
  background: ${({ color }) => color || COLORS.font1};

  &.k-HorizontalStroke--size--micro {
    ${MICRO}
  }

  &.k-HorizontalStroke--size--tiny {
    ${TINY}
  }

  &.k-HorizontalStroke--size--default {
    ${DEFAULT}
  }

  &.k-HorizontalStroke--size--big {
    ${BIG}
  }

  &.k-HorizontalStroke--size--huge {
    ${HUGE}
  }

  ${strokeModifierStylesWithoutMargin('&.k-HorizontalStroke--modifier')}
`

export const HorizontalStroke = ({
  className,
  style,
  size,
  modifier,
  customSize,
  color,
  ...props
}) => {
  const modifierClassName = () => {
    if (!modifier) return `k-HorizontalStroke--size--${size}`

    return `k-HorizontalStroke--modifier--${modifier}`
  }

  const customStyles = () => {
    if (!customSize) return
    return {
      height: customSize && customSize.height,
      width: customSize && customSize.width,
    }
  }

  return (
    <StyledHorizontalStroke
      {...props}
      className={classNames(
        'k-HorizontalStroke',
        className,
        modifierClassName(),
      )}
      style={{ ...customStyles(), ...style }}
      color={color}
    />
  )
}

HorizontalStroke.propTypes = {
  size: PropTypes.oneOf(['micro', 'tiny', 'default', 'big', 'huge']),
  modifier: PropTypes.oneOf([
    'primary',
    'secondary',
    'tertiary',
    'quaternary',
    'quinary',
    'senary',
    'septenary',
  ]),
  customSize: PropTypes.shape({
    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  }),
  color: PropTypes.string,
}

HorizontalStroke.defaultProps = {
  size: 'default',
  customSize: {
    width: null,
    height: null,
  },
  color: COLORS.font1,
}
