How to use the styled-system.borderRadius.propTypes function in styled-system

To help you get started, we’ve selected a few styled-system examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github priceline / design-system / packages / core / src / Card.js View on Github external
border:
    borderWidth === 0
      ? '0'
      : `${borderWidth}px solid ${getPaletteColor('base')({
          color: borderColor,
          ...props
        })}`
})

const Card = styled(Box)`
  ${boxShadow} ${boxBorder} ${borderRadius}
  ${applyVariations('Card')}
`

Card.propTypes = {
  ...borderRadius.propTypes,
  boxShadowSize: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
  borderColor: deprecatedColorValue(),
  color: deprecatedColorValue(),
  borderWidth: PropTypes.oneOf([0, 1, 2])
}

Card.defaultProps = {
  borderColor: 'border',
  borderRadius: 1,
  borderWidth: 1
}

Card.displayName = 'Card'

export default Card
github c8r / kit / templates / styled-system / src / Button.js View on Github external
Button.defaultProps = {
  m: 0,
  px: 3,
  py: 2,
  fontSize: 1,
  borderRadius: 2,
  color: 'white',
  bg: 'blue'
}

Button.propTypes = {
  ...color.propTypes,
  ...space.propTypes,
  ...fontSize.propTypes,
  ...borderRadius.propTypes
}

Button.displayName = 'Button'

export default Button
github priceline / design-system / packages / core / src / RatingBadge.js View on Github external
line-height: 1.5;
  ${fontWeight} ${borderRadius};
  ${applyVariations('RatingBadge')}
`

RatingBadge.defaultProps = {
  fontWeight: 'bold',
  px: 2,
  color: 'white',
  bg: 'orange',
  borderRadius: 1
}

RatingBadge.propTypes = {
  ...fontWeight.propTypes,
  ...borderRadius.propTypes,
  bg: deprecatedPropType('color')
}

export default RatingBadge
github JustMaier / gathering / src / components / UI / ColorInput.js View on Github external
<input type="color">
  
))`
  ${borderRadius}
  position:relative;
  overflow:hidden;

  input {
    height: 100%;
    position:relative;
    z-index:-1;
  }
`

ColorInput.propTypes = {
  ...borderRadius.propTypes
}
github JustMaier / gathering / src / components / UI / Image.js View on Github external
overflow:hidden;
  position:relative;

  img {
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    transform: translate(-50%, -50%);
  }
`
Image.propTypes = {
  ...space.propTypes,
  ...size.propTypes,
  ...boxShadow.propTypes,
  ...borderRadius.propTypes,
  ...border.propTypes
}

export const Photo = styled(Image)`
`
Photo.defaultProps = {
  size: '180px',
  border: 'faint',
  boxShadow: 'lg',
  borderRadius: '5px'
}

const CIDPhotoCache = {}
export const CIDPhoto = ({ src: cid, placeholder = placeholderImage, ...props }) => {
  const [src, setSrc] = useState(CIDPhotoCache[cid] || placeholder)
  useEffect(() => {
github JustMaier / gathering / src / components / UI / Button.js View on Github external
&:hover, &:focus, &:active {
    background: ${p => darken(0.05, themeGet(`colors.${p.bg}`, '#555')(p))};
    outline: none;
  }

  &[disabled]{
    background: #555;
    opacity:.5;

  }
`

Button.propTypes = {
  ...space.propTypes,
  ...color.propTypes,
  ...borderRadius.propTypes,
  sm: PropTypes.bool,
  lg: PropTypes.bool,
  block: PropTypes.bool
}

Button.defaultProps = {
  bg: 'primary',
  color: '#fff',
  borderRadius: '5px'
}

export const LinkButton = ({ to, ...props }) => {
  const { history } = useContext(RouterContext)
  const handleClick = (e) => {
    if (props.onClick) props.onClick(e)
    e.preventDefault()
github gilbarbara / styled-minimal / src / Box.jsx View on Github external
space,
  textAlign,
  textTransform,
  top,
  width,
  zIndex,
);
Box.displayName = 'Box';

export const basePropTypes = {
  ...alignContent.propTypes,
  ...alignItems.propTypes,
  ...alignSelf.propTypes,
  ...backgroundImage.propTypes,
  ...borders.propTypes,
  ...borderRadius.propTypes,
  ...bottom.propTypes,
  ...color.propTypes,
  ...display.propTypes,
  ...flex.propTypes,
  ...flexBasis.propTypes,
  ...flexDirection.propTypes,
  ...flexWrap.propTypes,
  ...fontFamily.propTypes,
  ...fontSize.propTypes,
  ...fontStyle.propTypes,
  ...fontWeight.propTypes,
  ...height.propTypes,
  ...justifyContent.propTypes,
  ...left.propTypes,
  ...lineHeight.propTypes,
  ...maxHeight.propTypes,
github heartbeatua / Pulse-Boilerplate / src / components / atoms / Box / Box.js View on Github external
...gridColumnGap.propTypes,
  ...gridColumn.propTypes,
  ...gridRow.propTypes,
  ...gridArea.propTypes,
  ...gridAutoFlow.propTypes,
  ...gridAutoRows.propTypes,
  ...gridAutoColumns.propTypes,
  ...gridTemplateRows.propTypes,
  ...gridTemplateColumns.propTypes,
  ...gridTemplateAreas.propTypes,
  ...background.propTypes,
  ...backgroundImage.propTypes,
  ...backgroundSize.propTypes,
  ...backgroundPosition.propTypes,
  ...backgroundRepeat.propTypes,
  ...borderRadius.propTypes,
  ...borderColor.propTypes,
  ...borders.propTypes,
  ...boxShadow.propTypes,
  ...opacity.propTypes,
  ...overflow.propTypes,
  ...position.propTypes,
  ...zIndex.propTypes,
  ...top.propTypes,
  ...right.propTypes,
  ...bottom.propTypes,
  ...left.propTypes,
  ...textStyle.propTypes,
  ...colorStyle.propTypes,
  ...buttonStyle.propTypes,
};
github priceline / design-system / src / RatingBadge.js View on Github external
line-height: 1.5;
  ${fontWeight} ${borderRadius};
`

RatingBadge.defaultProps = {
  fontWeight: 'bold',
  px: 2,
  color: 'white',
  bg: 'orange',
  borderRadius: 1,
  theme: theme
}

RatingBadge.propTypes = {
  ...fontWeight.propTypes,
  ...borderRadius.propTypes
}

export default RatingBadge
github JustMaier / gathering / src / components / UI / Box.js View on Github external
export const Box = styled.div`
  ${borderRadius}
  ${space}
  ${width}
  ${color}
  ${flex}
  ${flexDirection}
  ${alignItems}
  ${alignSelf}
  ${justifyContent}
  ${justifySelf}
  ${flexWrap}
  display:flex;
`
Box.propTypes = {
  ...borderRadius.propTypes,
  ...space.propTypes,
  ...width.propTypes,
  ...color.propTypes,
  ...flex.propTypes,
  ...flexDirection.propTypes,
  ...alignItems.propTypes,
  ...alignSelf.propTypes,
  ...justifyContent.propTypes,
  ...justifySelf.propTypes,
  ...flexWrap.propTypes
}