Heading

Page headings, content headings, this is simply h1, h2...h6

Usage

If you are going to use your theme then first you need to define your typography in your theme file like this:

customTheme.js

...

const typography = {
    heading: {
        fontFamily: fonts.primaryFont,
    		fontSize: fontSize.lg,
    		fontWeight: fontWeight.normal,
    		lineHeight: 1.2
    },
    headingSecondary: {
        fontFamily: fonts.secondaryFont,
    		fontSize: fontSize.lg,
    		fontWeight: fontWeight.normal,
    		lineHeight: 1.2
    }
}

then, import Heading in your file:

home.js

import React from 'react'
import { Container, Text } from '@therise3107/axis'

import { fontSize } from 'styles/customTheme' // your theme file

const home = () => (
    <Container>
        <Heading size={fontSize.lg}>Heading h1</Heading>
        <Heading as="h2" size={fontSize.md} type="headingSecondary">
            Heading h2
        </Heading>
    </Container>
)

API Reference

as? type = String

defaultProps: 'h1' propTypes: PropTypes.oneOf([ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ])

align? type = String

Aligns the text in left, right or center

defaultProps: undefined propTypes: PropTypes.oneOf([ 'left', 'right', 'center' ])

density? type = String

Defines the line-height

defaultProps: theme.typography.heading.lineHeight propTypes: PropTypes.oneOf(theme.lineHeight)

this property directly depends on your theme lineHeight

Example usage:

...
import { lineHeight } from 'styles/customTheme' // your theme file

const testComponent = () => <Heading density={lineHeight.cozy}>test</Heading> 

size? type = String

Defines the font size

defaultProps: theme.typography.heading.fontSize? propTypes: PropTypes.oneOf(theme.typography)

spacing? type = String

Defined the letter spacing

defaultProps: undefined propTypes: PropTypes.oneOf(theme.letterSpacing)

type? type = String

Defines the typography, you can use this to provide any css valid css properties

defaultProps: theme.typography.heading propTypes: PropTypes.oneOf(theme.typography)

weight? type = String

Defines the font weight

defaultProps: theme.typography.heading.fontWeight propTypes: PropTypes.oneOf(theme.fontWeight)

Please note if you are providing properties via type example <Heading type={typography.primary} />, then using explicit props like spacing, size etc will override the properties provided via typography.primary

Example usage

React JSX

home.js

import React from 'react'
import { Container, Heading } from '@therise3107/axis'

import { fontSize } from 'styles/customTheme'

const home = () => (
    <Container>
        <Heading type="headingSecondary">
            This fontSize is coming via typography.headingSecondary.fontSize
        </Heading>
        <Heading type="headingSecondary" size={fontSize.md}>
            This font size is coming via theme.fontSize.md
        </Heading>
    </Container>
)

customTheme.js

customTheme.js

...

const typography = {
    heading: {
        fontFamily: fonts.primaryFont,
    		fontSize: fontSize.lg,
    		fontWeight: fontWeight.normal,
    		lineHeight: 1.2
    },
    headingSecondary: {
        fontFamily: fonts.secondaryFont,
    		fontSize: fontSize.lg,
    		fontWeight: fontWeight.normal,
    		lineHeight: 1.2
    }
}