Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | 1x 2x 2x 2x 1x 2x 1x 2x 1x 2x 2x 2x | import cx from 'classnames'
import merge from 'lodash.merge'
import {BASE_CLASS, DESIGN, KIND, TEXT_DECORATION_LINE, VARIANT} from './config.js'
const getInheritedProps = ({design, variant}) => {
Eif (typeof KIND[design] === 'object') {
Eif (typeof KIND[design][variant] === 'object') {
return KIND[design][variant]
}
}
return {}
}
const getLinkProps = ({isLinked}, props) => {
return {
...props,
...(isLinked && {textDecorationLine: TEXT_DECORATION_LINE.UNDERLINE})
}
}
const getClassNames = ({
design,
variant,
fontSize,
fontFamily,
fontWeight,
fontStyle,
fontStretch,
letterSpacing,
lineHeight,
textDecorationLine,
className,
isBlurred,
isLinked
}) => {
return cx(
BASE_CLASS,
[`${BASE_CLASS}-design-${design}`, `${BASE_CLASS}-variant-${variant}`],
{
[`${BASE_CLASS}-linked`]: isLinked,
[`${BASE_CLASS}-fontSize-${fontSize}`]: fontSize !== undefined,
[`${BASE_CLASS}-fontFamily-${fontFamily}`]: fontFamily !== undefined,
[`${BASE_CLASS}-fontWeight-${fontWeight}`]: fontWeight !== undefined,
[`${BASE_CLASS}-fontStyle-${fontStyle}`]: fontStyle !== undefined,
[`${BASE_CLASS}-fontStretch-${fontStretch}`]: fontStretch !== undefined,
[`${BASE_CLASS}-letterSpacing-${letterSpacing}`]: letterSpacing !== undefined,
[`${BASE_CLASS}-lineHeight-${lineHeight}`]: lineHeight !== undefined,
[`${BASE_CLASS}-textDecorationLine-${textDecorationLine}`]: textDecorationLine !== undefined,
[`${BASE_CLASS}-blurred-${isBlurred}`]: isBlurred !== undefined
},
className
)
}
const useTypography = ({
design = DESIGN.BODY_1,
variant = VARIANT.DEFAULT,
as,
fontSize,
fontFamily,
fontWeight,
fontStyle,
fontStretch,
letterSpacing,
lineHeight,
textDecorationLine,
isLinked,
isBlurred,
children,
...props
}) => {
const {className: inheritedClassName, ...inheritedProps} = getLinkProps(
{isLinked},
getInheritedProps({design, variant})
)
const className = getClassNames(
merge(inheritedProps, {
...props,
design,
variant,
fontSize,
fontFamily,
fontWeight,
fontStyle,
fontStretch,
letterSpacing,
lineHeight,
textDecorationLine,
isBlurred,
isLinked
})
)
return {
...props,
...{
className,
...(as && {as})
},
children
}
}
export default useTypography
|