@atlaskit/primitives
Version:
Primitives are token-backed low-level building blocks.
46 lines (45 loc) • 1.41 kB
JavaScript
/* metric-text.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./metric-text.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { forwardRef } from 'react';
import invariant from 'tiny-invariant';
const asAllowlist = ['span', 'div'];
const styles = {
root: "_19pkidpf _2hwxidpf _otyridpf _18u0idpf",
'textAlign.center': "_y3gn1h6o",
'textAlign.end': "_y3gnh9n0",
'textAlign.start': "_y3gnv2br"
};
const fontSizeMap = {
small: "_11c8ys40",
medium: "_11c85kmp",
large: "_11c81xwm"
};
/**
* __MetricText__
*
* MetricText is a primitive component that has the Atlassian Design System's design guidelines baked in.
* It is designed for use specifically with displaying metrics and is not to be used for headings or general UI text.
* It renders a `span` by default.
*
* @internal
*/
const MetricText = /*#__PURE__*/forwardRef(({
as: Component = 'span',
align,
testId,
id,
size,
children
}, ref) => {
invariant(asAllowlist.includes(Component), `@atlaskit/primitives: MetricText received an invalid "as" value of "${Component}"`);
const component = /*#__PURE__*/React.createElement(Component, {
ref: ref,
"data-testid": testId,
id: id,
className: ax([styles.root, size && fontSizeMap[size], align && styles[`textAlign.${align}`]])
}, children);
return component;
});
export default MetricText;