VCNKit/Typography

@vcnkit/typography is a collection of components to represent various types of text.

Installation

NPM

$ npm install --save @vcnkit/typography

Yarn

$ yarn add @vcnkit/typography

Requirements

In order to use this package, you'll need to add ThemeProvider from @vcnkit/theme somewhere in your render tree.

Usage

The following components are available:

• Hero
• Headline
• Title2
• Title1
• Subheading2
• Subheading1
• Body2
• Body1
• Caption

import { Title1, Body2 } from '@vcnkit/typography';

const SomeComponent = () => (
    <div>
        <Title1>This is a title</Title1>
        <Body2>Body text is contained in either a Body2 or Body1</Body2>
    </div>
)

Styles and colors

All the provided components come in various styles which will be determined by passing the correct props.

import { Body2, Caption } from '@vcnkit/typography';

const SomeComponent = () => (
    <div>
        <Body2>This text will show in the default, primary, style.</Body2>
        <Body2 secondary>This will show in the secondary style instead.</Body2>
        <Caption hint>A caption with the hint style</Caption>
        <Caption disabled>A caption with the disabled style</Caption>
    </div>
);

Using custom colors or attaching your own styles

To use a custom color, you can simply extend the exported component.

import { Title1 } from '@vcnkit/typography';

const RedTitle = Title1.extend`
    color: red;
`;

For more information, see Styled Components: Extending Styles

Attaching the various typographic styles to your own components.

@vcnkit/typography exposes helper functions to apply the styles to your own components

createTextStyle(family: string, type: string)

| Arguments | Type | Description | |-----------|--------|-----------------------------------------------------------------------------------------------------------| | family | string | Either 'body' or 'heading' | | type | string | One of: 'hero', 'headline', 'title2', 'title1', 'subheading2', 'subheading1', 'body2', 'body1', 'caption' |

Returns a Styled Components: CSS Helper with the base typographic style (font-family, font-size, font-weight, line-height,color) for the given type.

import styled from 'styled-components';
import { createTextStyle } from '@vcnkit/typography';

const SomeComponent = styled.p`
    ${ createTextStyle('body', 'body1') }
`;

createTextSpacing(family: string, type: string)

| Arguments | Type | Description | |-----------|--------|-----------------------------------------------------------------------------------------------------------| | family | string | Either 'body' or 'heading' | | type | string | One of: 'hero', 'headline', 'title2', 'title1', 'subheading2', 'subheading1', 'body2', 'body1', 'caption' |

Returns a Styled Components: CSS Helper with default margins (margin-top, margin-bottom) for the given type.

import styled from 'styled-components';
import { createTextSpacing } from '@vcnkit/typography';

const SomeComponent = styled.p`
    ${ createTextSpacing('body', 'body1') }
`;

Margins

The components have no margins by default, to render them with the default margins pass the spacing prop. If you want to render the components with a custom margin, simple extend them.

The components all have default margins, to render it without the margin either extend it or simply pass spacing={ false } as prop.

import { Title1 } from '@vcnkit/typography';

const SomeComponent = () => (
    <Title1 spacing>
        This title will have margins.
    </Title1>
);