@highlight-ui/typography

v6.3.7

Published

25 days ago

This is the Typography package used by UI-components in Personio

Downloads

18,036

0High
0Medium
0Low

mislav_lukac_personio_ext

ante.zebic

personio-npm-ci

@highlight-ui/typography

The Typography components which manage the usage of typographic design tokens through props.

Features

Polymorphic component
Support text color tokens
Supports truncation
Supports components that Pre-combines fontFamily, fontSize, fontWeight, letterSpacing, lineHeight, textTransform, and textDecoration
- Heading: offers variants in choice of 2xlarge, xlarge, large, medium, small and xsmall which are identical with the Figma assets.
- Body: Body component offers variants in choice of large, base, small, strong-large, strong-base and strong-small which are identical with the Figma assets.

Installation

Using npm:

npm install @highlight-ui/typography

Using yarn:

yarn add @highlight-ui/typography

Using pnpm:

pnpm add @highlight-ui/typography

In your (S)CSS file:

@import url('@highlight-ui/typography');

Once the package is installed, you can import the library:

import { Body, Heading } from '@highlight-ui/typography';

Usage

Typography (Deprecated)🗑️

import React from 'react';
import { Typography } from '@highlight-ui/typography';

export default function Example() {
  return <Typography>Text</Typography>;
}

Heading component

import React from 'react';
import { Heading } from '@highlight-ui/typography';

export default function Example() {
  return (
    <Heading as="h2" variant="xlarge" color="text-default">
      some large heading
    </Heading>
  );
}

Body component

import React from 'react';
import { Body } from '@highlight-ui/typography';

export default function Example() {
  return (
    <Body variant="large" color="text-default">
      some large text
    </Body>
  );
}

Advanced usage

Changing the rendered HTML tag

By default, the <Body /> component renders a span element, whereas the <Heading /> component has no default (refer to the props table below). To change the HTML tag that will be used for rendering, the as prop can be used to specify any other HTML tag.

import React from 'react';
import { Body } from '@highlight-ui/typography';

export default function Example() {
  return (
    <Body as="p" color="text-default">
      Text
    </Body>
  );
}

Change typographic style through design tokens (Deprecated)🗑️

By default, the Typography component applies the body-base typography token. To override this default style, the token prop can be used to change the applied typographic style.

import React from 'react';
import { Typography } from '@highlight-ui/typography';

export default function Example() {
  return <Typography token="heading-medium">Text</Typography>;
}

Overriding font properties (Deprecated)🗑️

Individual font properties can be overriden through props such as fontFamily. Other properties that can be overriden are: fontSize, fontWeight, letterSpacing, lineHeight, textTransform, and textDecoration. For more details on these props, check out the component's props table.

import React from 'react';
import { Typography } from '@highlight-ui/typography';

export default function Example() {
  return <Typography fontFamily="mono">Text</Typography>;
}

Customizing through a CSS class name (Deprecated)🗑️

Use the className prop to customize the component through CSS classes.

import React from 'react';
import { Typography } from '@highlight-ui/typography';
import styles from './customStyles.scss';

export default function Example() {
  return <Typography className={styles.wrappedText}>Text</Typography>;
}

Props 📜

Heading

Body

Typography (Deprecated)🗑️

Note: This component has been deprecated. Please migrate to the Heading and Body components.

Also accepts props from the React.HTMLAttributes<HTMLElement> type.

Custom types 🔠

Testing

import React from 'react';
import { render } from '@testing-library/react';
import { Body } from '@highlight-ui/typography';

describe('TestExample', () => {
  it('test description', () => {
    render(<Body>Text</Body>);
    // write your expect here
  });
});

Accessibility Considerations

These components should only be used to handle the styling of the text elements themselves. The spacing, alignment and semantics of the text elements should be managed by the parent. While doing this, it is important to consider the correct semantic page regions are being used such as <aside>, <section>, and <nav>.

Accessible usage of the Typography components relies on the following:

Heading elements (e.g. <h1>, <h2>) are nested and used in a logical sequence.
Only one <h1> (as="h1") element per page.
Don't skip heading levels.

Place in design system 💻

The Typography component is being used in all of Highlight UI to display any kind of text element.

Contributing 🖌️

If you're interested in contributing, please visit our contribution page.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@highlight-ui/typography

Features

Installation

Usage

Typography (Deprecated)🗑️

Heading component

Body component

Advanced usage

Changing the rendered HTML tag

Change typographic style through design tokens (Deprecated)🗑️

Overriding font properties (Deprecated)🗑️

Customizing through a CSS class name (Deprecated)🗑️

Props 📜

Heading

Body

Typography (Deprecated)🗑️

Custom types 🔠

Testing

Accessibility Considerations

Place in design system 💻

Contributing 🖌️