@bigbinary/neetoui
Version:
neetoUI drives the experience at all neeto products
142 lines (139 loc) • 4.73 kB
JavaScript
import _extends from '@babel/runtime/helpers/extends';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import classnames from 'classnames';
var _excluded = ["style", "weight", "lineHeight", "component", "children", "textTransform", "className"];
var FONT_WEIGHTS = {
thin: "thin",
extralight: "extralight",
light: "light",
normal: "normal",
medium: "medium",
semibold: "semibold",
bold: "bold",
extrabold: "extrabold",
black: "black"
};
var STYLES = {
h1: "h1",
h2: "h2",
h3: "h3",
h4: "h4",
h5: "h5",
h6: "h6",
body1: "body1",
body2: "body2",
body3: "body3",
nano: "nano"
};
var LINE_HEIGHTS = {
none: "none",
tight: "tight",
snug: "snug",
normal: "normal",
relaxed: "relaxed",
loose: "loose"
};
var TEXT_TRANSFORM = {
none: "none",
capitalize: "capitalize",
uppercase: "uppercase",
lowercase: "lowercase",
fullwidth: "fullwidth",
inherit: "inherit",
initial: "initial",
revert: "revert",
unset: "unset"
};
var DEFAULT_COMPONENTS = {
h1: "h1",
h2: "h2",
h3: "h3",
h4: "h4",
h5: "h5",
h6: "h6",
body1: "p",
body2: "p",
body3: "p",
nano: "span"
};
var COMPONENTS = {
h1: "h1",
h2: "h2",
h3: "h3",
h4: "h4",
h5: "h5",
h6: "h6",
p: "p",
span: "span",
b: "b",
strong: "strong",
i: "i",
em: "em",
mark: "mark",
del: "del",
s: "s",
ins: "ins",
sub: "sub",
sup: "sup",
u: "u",
code: "code",
blockquote: "blockquote"
};
var Typography = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
var _ref$style = _ref.style,
style = _ref$style === void 0 ? "body1" : _ref$style,
weight = _ref.weight,
lineHeight = _ref.lineHeight,
component = _ref.component,
children = _ref.children,
textTransform = _ref.textTransform,
_ref$className = _ref.className,
className = _ref$className === void 0 ? "" : _ref$className,
otherProps = _objectWithoutProperties(_ref, _excluded);
var Component = component ? COMPONENTS[component] : style ? DEFAULT_COMPONENTS[style] : "p";
return /*#__PURE__*/React__default.createElement(Component, _extends({
ref: ref,
className: classnames(_defineProperty({
"neeto-ui-typography": true,
"neeto-ui-text-h1": style === STYLES.h1,
"neeto-ui-text-h2": style === STYLES.h2,
"neeto-ui-text-h3": style === STYLES.h3,
"neeto-ui-text-h4": style === STYLES.h4,
"neeto-ui-text-h5": style === STYLES.h5,
"neeto-ui-text-h6": style === STYLES.h6,
"neeto-ui-text-body1": style === STYLES.body1,
"neeto-ui-text-body2": style === STYLES.body2,
"neeto-ui-text-body3": style === STYLES.body3,
"neeto-ui-text-nano": style === STYLES.nano,
"neeto-ui-text-transform-none": textTransform === TEXT_TRANSFORM.none,
"neeto-ui-text-transform-capitalize": textTransform === TEXT_TRANSFORM.capitalize,
"neeto-ui-text-transform-uppercase": textTransform === TEXT_TRANSFORM.uppercase,
"neeto-ui-text-transform-lowercase": textTransform === TEXT_TRANSFORM.lowercase,
"neeto-ui-text-transform-fullwidth": textTransform === TEXT_TRANSFORM.fullwidth,
"neeto-ui-text-transform-inherit": textTransform === TEXT_TRANSFORM.inherit,
"neeto-ui-text-transform-initial": textTransform === TEXT_TRANSFORM.initial,
"neeto-ui-text-transform-revert": textTransform === TEXT_TRANSFORM.revert,
"neeto-ui-text-transform-unset": textTransform === TEXT_TRANSFORM.unset,
"neeto-ui-font-thin": weight === FONT_WEIGHTS.thin,
"neeto-ui-font-extralight": weight === FONT_WEIGHTS.extralight,
"neeto-ui-font-light": weight === FONT_WEIGHTS.light,
"neeto-ui-font-normal": weight === FONT_WEIGHTS.normal,
"neeto-ui-font-medium": weight === FONT_WEIGHTS.medium,
"neeto-ui-font-semibold": weight === FONT_WEIGHTS.semibold,
"neeto-ui-font-bold": weight === FONT_WEIGHTS.bold,
"neeto-ui-font-extrabold": weight === FONT_WEIGHTS.extrabold,
"neeto-ui-font-black": weight === FONT_WEIGHTS.black,
"neeto-ui-leading-none": lineHeight === LINE_HEIGHTS.none,
"neeto-ui-leading-tight": lineHeight === LINE_HEIGHTS.tight,
"neeto-ui-leading-snug": lineHeight === LINE_HEIGHTS.snug,
"neeto-ui-leading-normal": lineHeight === LINE_HEIGHTS.normal,
"neeto-ui-leading-relaxed": lineHeight === LINE_HEIGHTS.relaxed,
"neeto-ui-leading-loose": lineHeight === LINE_HEIGHTS.loose
}, className, className))
}, otherProps), children);
});
Typography.displayName = "Typography";
export { Typography as default };
//# sourceMappingURL=Typography.js.map