How to use the styled-system.lineHeight.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 JustMaier / gathering / src / components / UI / Text.js View on Github external
export const Text = styled.p`
  ${space}
  ${fontSize}
  ${fontWeight}
  ${lineHeight}
  ${color}
  ${textAlign}
  ${p => p.allCaps && css`
    text-transform:uppercase;
  `}
`
Text.propTypes = {
  ...space.propTypes,
  ...fontSize.propTypes,
  ...fontWeight.propTypes,
  ...lineHeight.propTypes,
  ...color.propTypes,
  ...textAlign.propTypes
}
Text.defaultProps = {
  m: 0
}

export const Header = styled(Text.withComponent('h1'))`
  letter-spacing: -0.03em;
  text-shadow: 1px 2px 3px ${_('colors.textShadow')};
`
Header.defaultProps = {
  fontSize: 5,
  fontWeight: 600,
  lineHeight: 1.17,
  m: 0,
github standard-components / standard-components / styled-components / src / Text.js View on Github external
letterSpacing,
  lineHeight,
  space,
  textAlign
)

Text.displayName = 'Text'
Text.defaultProps = {
  m: 0
}
Text.propTypes = {
  ...fontFamily.propTypes,
  ...fontSize.propTypes,
  ...fontWeight.propTypes,
  ...letterSpacing.propTypes,
  ...lineHeight.propTypes,
  ...space.propTypes,
  ...textAlign.propTypes
}

export default Text
github IBM / nicedoc.io / components / text.js View on Github external
import {
  fontFamily,
  fontWeight,
  textAlign,
  lineHeight,
  letterSpacing,
  maxWidth
} from 'styled-system'

const Text = styled(Box)(fontFamily, fontWeight, textAlign, lineHeight, letterSpacing, maxWidth)

Text.propTypes = {
  ...fontFamily.propTypes,
  ...fontWeight.propTypes,
  ...textAlign.propTypes,
  ...lineHeight.propTypes,
  ...maxWidth.propTypes,
  ...letterSpacing.propTypes
}

Text.defaultProps = {
  mb: '1.563rem'
}

export default Text
github priceline / design-system / packages / core / src / Text.js View on Github external
${lineHeight}
  ${space}
  ${caps}
  ${regular}
  ${bold}
  ${textShadow}
`)

Text.displayName = 'Text'

Text.propTypes = {
  ...textStyle.propTypes,
  ...fontSize.propTypes,
  ...fontWeight.propTypes,
  ...textAlign.propTypes,
  ...lineHeight.propTypes,
  ...space.propTypes,
  color: deprecatedColorValue(),
  caps: PropTypes.bool,
  regular: PropTypes.bool,
  bold: PropTypes.bool,
  enableTextShadow: PropTypes.bool,
  textShadowSize: PropTypes.oneOf(['sm', 'md']),
  align: deprecatedPropType('textAlign')
}

Text.span = Text.withComponent('span')
Text.p = Text.withComponent('p')
Text.s = Text.withComponent('s')

export default Text
github styled-system / styled-system / examples / theme-aliases / src / index.js View on Github external
...fontSize.propTypes,
  ...color.propTypes,
}

const Text = styled.div`
  ${space}
  ${fontSize}
  ${fontWeight}
  ${lineHeight}
  ${color}
`
Text.propTypes = {
  ...space.propTypes,
  ...fontSize.propTypes,
  ...fontWeight.propTypes,
  ...lineHeight.propTypes,
  ...color.propTypes,
}

const Heading = Text.withComponent('h1')

Heading.defaultProps = {
  fontSize: 5,
  lineHeight: 1.5,
  m: 0,
}

class App extends React.Component {
  render() {
    return (
github c8r / kit / templates / styled-system / src / Text.js View on Github external
${space}
  ${fontSize}
  ${fontWeight}
  ${lineHeight}
  ${textAlign}
  ${letterSpacing}
`

Text.defaultProps = {}

Text.propTypes = {
  ...color.propTypes,
  ...space.propTypes,
  ...fontSize.propTypes,
  ...fontWeight.propTypes,
  ...lineHeight.propTypes,
  ...textAlign.propTypes,
  ...letterSpacing.propTypes
}

Text.displayName = 'Text'

export default Text
github julienthoma / table-soccer / src / components / index.js View on Github external
const Text = styled('div')`
  ${space}
  ${fontSize}
  ${fontWeight}
  ${lineHeight}
  ${fontStyle}
  ${textAlign}
  ${color}
`;

Text.propTypes = {
  ...space.propTypes,
  ...fontSize.propTypes,
  ...fontWeight.propTypes,
  ...lineHeight.propTypes,
  ...color.propTypes
};

const Heading = Text.withComponent('h1');

Heading.defaultProps = {
  fontSize: 5,
  lineHeight: 1.5,
  m: 0
};

export { Box, Text, Heading, Flex };
github gilbarbara / styled-minimal / src / Box.jsx View on Github external
...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,
  ...maxWidth.propTypes,
  ...minHeight.propTypes,
  ...minWidth.propTypes,
  ...order.propTypes,
  ...position.propTypes,
  ...right.propTypes,
  ...ratio.propTypes,
  ...space.propTypes,
  ...textAlign.propTypes,
  textTransform: PropTypes.string,
  ...top.propTypes,
  ...width.propTypes,
  ...zIndex.propTypes,
};
github styled-system / styled-system / examples / basic / src / index.js View on Github external
...fontSize.propTypes,
  ...color.propTypes,
}

const Text = styled.div`
  ${space}
  ${fontSize}
  ${fontWeight}
  ${lineHeight}
  ${color}
`
Text.propTypes = {
  ...space.propTypes,
  ...fontSize.propTypes,
  ...fontWeight.propTypes,
  ...lineHeight.propTypes,
  ...color.propTypes,
}

const Heading = Text.withComponent('h1')

Heading.defaultProps = {
  fontSize: 5,
  lineHeight: 1.5,
  m: 0,
}

class App extends React.Component {
  render() {
    return (
github heartbeatua / Pulse-Boilerplate / src / components / atoms / Box / Box.js View on Github external
${left};
  ${textStyle};
  ${colorStyle};
  ${buttonStyle};
`;

const Box = props => ;

Box.propTypes = {
  ...space.propTypes,
  ...width.propTypes,
  ...fontSize.propTypes,
  ...color.propTypes,
  ...fontFamily.propTypes,
  ...textAlign.propTypes,
  ...lineHeight.propTypes,
  ...fontWeight.propTypes,
  ...fontStyle.propTypes,
  ...letterSpacing.propTypes,
  ...display.propTypes,
  ...maxWidth.propTypes,
  ...minWidth.propTypes,
  ...height.propTypes,
  ...maxHeight.propTypes,
  ...minHeight.propTypes,
  ...verticalAlign.propTypes,
  ...alignItems.propTypes,
  ...justifyContent.propTypes,
  ...flexWrap.propTypes,
  ...flexDirection.propTypes,
  ...flex.propTypes,
  ...alignContent.propTypes,