Create helper typography components
- Dominant language
- JavaScript
- Stars
- 193
- Forks
- 112
- PR merge metrics
- No merged PRs in 30d
Description
As a developer
I can have components that use each typography variant
to make it a little easier to layout text
---
### Typical use
```
import { H1, H2, H3, Body, Caption } from '@hig/typography';
function MySpecialMessage() {
return (
Hello, world!
Hello, world!
Hello, world!
Hello, world!
Hello, world!
)
}
```
```
H1.propTypes = {
// All the same propTypes except `variant`
fontWeight: PropTypes.oneOf(AVAILABLE_FONT_WEIGHTS)
align: PropTypes.oneOf(AVAILABLE_ALIGNMENTS),
}
```
- Variant components take same props as `Typography`, except for `variant`
Contributor guide
Research direction
Start by locating the @hig/typography package and its Typography entry point, then review how the H1, H2, H3, Body, and Caption variants are defined. Confirm that each helper exposes the Typography props except variant, supports the shown fontWeight and align props, and matches the requested usage examples.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100