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 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 | 1x 2x 2x 1x 1x 1x | import PropTypes from 'prop-types'
import PolymorphicElement from '@s-ui/react-primitive-polymorphic-element'
import ComponentTypes from './component/index.js'
import {
DESIGN,
FONT_FAMILY,
FONT_SIZE,
FONT_STRETCH,
FONT_STYLE,
FONT_WEIGHT,
LETTER_SPACING,
LINE_HEIGHT,
TEXT_DECORATION_LINE,
VARIANT
} from './config.js'
import useTypography from './useTypography.js'
const PrimitiveTypography = ({
design,
variant,
as = 'span',
children,
className,
fontSize,
fontFamily,
fontWeight,
fontStyle,
fontStretch, // condensed, extended
letterSpacing,
lineHeight,
textDecorationLine,
isLinked,
isBlurred,
...props
}) => {
const {...resultingProps} = useTypography({
className,
design,
variant,
as,
fontSize,
fontFamily,
fontWeight,
fontStyle,
fontStretch,
letterSpacing,
lineHeight,
textDecorationLine,
isLinked,
isBlurred,
children,
...props
})
return <PolymorphicElement {...resultingProps} />
}
PrimitiveTypography.displayName = 'PrimitiveTypography'
PrimitiveTypography.propTypes = {
/* Render the passed value as the correspondent HTML tag or the component if a function is passed */
as: PropTypes.elementType,
/**
* Allows you to add extra styles and avoid extra DOM elements to style purposes.
*/
className: PropTypes.string,
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Adds the proper styles to look like a link.
*/
isLinked: PropTypes.bool,
/**
* Adds blur effect to the text given.
*/
isBlurred: PropTypes.bool,
/**
* Different kinds of styles proposed.
*/
design: PropTypes.oneOf(Object.values(DESIGN)),
/**
* Different variants of each style defined
*/
variant: PropTypes.oneOf(Object.values(VARIANT)),
/**
* css font size tokens
*/
fontSize: PropTypes.oneOf(Object.values(FONT_SIZE)),
/**
* css font family tokens
*/
fontFamily: PropTypes.oneOf(Object.values(FONT_FAMILY)),
/**
* css font weight tokens
*/
fontWeight: PropTypes.oneOf(Object.values(FONT_WEIGHT)),
/**
* css font style tokens
*/
fontStyle: PropTypes.oneOf(Object.values(FONT_STYLE)),
/**
* css font stretch tokens
*/
fontStretch: PropTypes.oneOf(Object.values(FONT_STRETCH)),
/**
* css letter spacing tokens
*/
letterSpacing: PropTypes.oneOf(Object.values(LETTER_SPACING)),
/**
* css line height tokens
*/
lineHeight: PropTypes.oneOf(Object.values(LINE_HEIGHT)),
/**
* css text decoration line tokens
*/
textDecorationLine: PropTypes.oneOf(Object.values(TEXT_DECORATION_LINE))
}
const {Display1, Display2, Display3, Headline1, Headline2, SubHead, Body1, Body2, Caption, Small, Callout} =
ComponentTypes
export default PrimitiveTypography
export {
useTypography,
DESIGN as primitiveTypographyDesign,
VARIANT as primitiveTypographyVariant,
FONT_SIZE as primitiveTypographyFontSize,
FONT_FAMILY as primitiveTypographyFontFamily,
FONT_WEIGHT as primitiveTypographyFontWeight,
FONT_STYLE as primitiveTypographyFontStyle,
FONT_STRETCH as primitiveTypographyFontStretch,
LETTER_SPACING as primitiveTypographyLetterSpacing,
LINE_HEIGHT as primitiveTypographyLineHeight,
TEXT_DECORATION_LINE as primitiveTypographyTextDecoration,
Display1 as PrimitiveTypographyDisplay1,
Display2 as PrimitiveTypographyDisplay2,
Display3 as PrimitiveTypographyDisplay3,
Headline1 as PrimitiveTypographyHeadline1,
Headline2 as PrimitiveTypographyHeadline2,
SubHead as PrimitiveTypographySubHead,
Body1 as PrimitiveTypographyBody1,
Body2 as PrimitiveTypographyBody2,
Caption as PrimitiveTypographyCaption,
Small as PrimitiveTypographySmall,
Callout as PrimitiveTypographyCallout
}
|