119 lines
2.2 KiB
JavaScript
119 lines
2.2 KiB
JavaScript
import classnames from 'classnames'
|
|
import React from 'react'
|
|
|
|
import styles from './typography.module.css'
|
|
|
|
function H1({ children, noMargin, className, ...props }) {
|
|
const classNames = {
|
|
[styles.h1]: true,
|
|
[styles.noMargin]: noMargin,
|
|
[className]: !!className,
|
|
}
|
|
|
|
return (
|
|
<h1 className={classnames(classNames)} {...props}>
|
|
{children}
|
|
</h1>
|
|
)
|
|
}
|
|
|
|
function H2({ children, noMargin, className, ...props }) {
|
|
const classNames = {
|
|
[styles.h2]: true,
|
|
[styles.noMargin]: noMargin,
|
|
[className]: !!className,
|
|
}
|
|
|
|
return (
|
|
<h2 className={classnames(classNames)} {...props}>
|
|
{children}
|
|
</h2>
|
|
)
|
|
}
|
|
|
|
function H3({ children, noMargin, className, ...props }) {
|
|
const classNames = {
|
|
[styles.h3]: true,
|
|
[styles.noMargin]: noMargin,
|
|
[className]: !!className,
|
|
}
|
|
|
|
return (
|
|
<h3 className={classnames(classNames)} {...props}>
|
|
{children}
|
|
</h3>
|
|
)
|
|
}
|
|
|
|
function H4({ children, noMargin, className, ...props }) {
|
|
const classNames = {
|
|
[styles.h4]: true,
|
|
[styles.noMargin]: noMargin,
|
|
[className]: !!className,
|
|
}
|
|
|
|
return (
|
|
<h4 className={classnames(classNames)} {...props}>
|
|
{children}
|
|
</h4>
|
|
)
|
|
}
|
|
|
|
function H5({ children, noMargin, className, ...props }) {
|
|
const classNames = {
|
|
[styles.h5]: true,
|
|
[styles.noMargin]: noMargin,
|
|
[className]: !!className,
|
|
}
|
|
|
|
return (
|
|
<h5 className={classnames(classNames)} {...props}>
|
|
{children}
|
|
</h5>
|
|
)
|
|
}
|
|
|
|
const P = pBuilder('p')
|
|
const Info1 = pBuilder('info1')
|
|
const Info2 = pBuilder('info2')
|
|
const Info3 = pBuilder('info3')
|
|
const Mono = pBuilder('mono')
|
|
const TL1 = pBuilder('tl1')
|
|
const TL2 = pBuilder('tl2')
|
|
const Label1 = pBuilder('label1')
|
|
const Label2 = pBuilder('label2')
|
|
const Label3 = pBuilder('label3')
|
|
|
|
function pBuilder(elementClass) {
|
|
return ({ inline, noMargin, className, children, ...props }) => {
|
|
const classNames = {
|
|
[className]: !!className,
|
|
[styles[elementClass]]: elementClass,
|
|
[styles.inline]: inline,
|
|
[styles.noMargin]: noMargin,
|
|
}
|
|
return (
|
|
<p className={classnames(classNames)} {...props}>
|
|
{children}
|
|
</p>
|
|
)
|
|
}
|
|
}
|
|
|
|
export {
|
|
H1,
|
|
H2,
|
|
H3,
|
|
H4,
|
|
H5,
|
|
TL1,
|
|
TL2,
|
|
P,
|
|
Info1,
|
|
Info2,
|
|
Info3,
|
|
Mono,
|
|
Label1,
|
|
Label2,
|
|
Label3,
|
|
}
|