Typography Component

We can extend the idea of Base components to create Typography components
this pattern helps ensure consistency and keep your styling DRY.

Example

  1. import React from 'react';
  2. import { alternateFont, typeScale, boldFontWeight } from './styles';
  3. const Text = ({
  4. tag = 'span',
  5. size = 4,
  6. alt,
  7. center,
  8. bold,
  9. caps,
  10. ...props
  11. }) => {
  12. const Tag = tag;
  13. const sx = {
  14. fontFamily: alt ? alternateFont : null,
  15. fontSize: typeScale[size],
  16. fontWeight: bold ? boldFontWeight : null,
  17. textAlign: center ? 'center' : null,
  18. textTransform: caps ? 'uppercase' : null
  19. };
  20. return <Tag {...props} style={sx}/>
  21. };
  22. const LeadText = (props) => <Text {...props} tag='p' size={3}/>;
  23. const Caps = (props) => <Text {...props} caps/>;
  24. const MetaText = (props) => <Text {...props} size={5} caps/>;
  25. const AltParagraph = (props) => <Text {...props} tag='p' alt/>;
  26. const CapsButton = ({ children, ...props }) => (
  27. <Button {...props}>
  28. <Caps>
  29. {children}
  30. </Caps>
  31. </Button>
  32. );

Usage

  1. const TypographyComponent = () => (
  2. <div>
  3. <LeadText>
  4. This is a lead with some<Caps>all caps</Caps>.
  5. It has a larger font size than the default paragraph.
  6. </LeadText>
  7. <MetaText>
  8. This is smaller text, like form helper copy.
  9. </MetaText>
  10. </div>
  11. );