@gravity-ui/uikit
Version:
Gravity UI base styling and components
53 lines (52 loc) • 2.09 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Text = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const colorText_1 = require("./colorText/colorText.js");
const text_1 = require("./text/text.js");
/**
* A component for working with typography.
*
* Storybook: https://preview.gravity-ui.com/uikit/?path=/story/components-text--default
*
* **Hint:** Hover on props in your editor to read jsdoc
*
* Provides a convenient API for working with mixins of typography and text colors. Just point at the prop in you favorite code editor and read the accompanying documentation via `jsdoc` on where to apply this or that font or color.
*
* ```jsx
* import {Text} from '@gravity-ui/uikit';
*
* <Text variant="body-1" color="inherit" ellipsis>some test</Text>
* ```
*
* You can also use a more flexible way of setting the style. "Gravity UI" also provide `text` utility function.
*
*```jsx
* import {text} from '@gravity-ui/uikit';
*
* // textStyles = 'text text_variant_display-1 some-class-name'
* const textStyles = text({variant: 'display-1'}, 'some-class-name');
*
* <span className={textStyles}>some text</span>
* ```
*/
exports.Text = React.forwardRef(function Text({ as, children, variant, className, ellipsis, color, whiteSpace, wordBreak, ellipsisLines, style: outerStyle, qa, ...rest }, ref) {
const Tag = as || 'span';
const style = {
...outerStyle,
};
if (typeof ellipsisLines === 'number') {
style.WebkitLineClamp = ellipsisLines;
}
return ((0, jsx_runtime_1.jsx)(Tag, { ref: ref, className: (0, text_1.text)({
variant,
ellipsis,
whiteSpace,
wordBreak,
ellipsisLines: typeof ellipsisLines === 'number',
}, color ? (0, colorText_1.colorText)({ color }, className) : className), style: style, "data-qa": qa, ...rest, children: children }));
});
exports.Text.displayName = 'Text';
//# sourceMappingURL=Text.js.map