@wix/design-system
Version:
@wix/design-system
59 lines • 3.39 kB
JavaScript
import React from 'react';
import Heading from '../../Heading';
import Text from '../../Text';
import Tooltip from '../../Tooltip';
import DataHooks from './dataHooks';
import { st, classes } from './AdaptiveHeading.st.css.js';
import { APPEARANCES } from './constants';
const appearanceToComponent = {
[APPEARANCES.H1]: Heading,
[APPEARANCES.H2]: Heading,
[APPEARANCES.H3]: Heading,
[APPEARANCES.H4]: Heading,
[APPEARANCES.H5]: Heading,
[APPEARANCES.H6]: Heading,
[APPEARANCES.tiny]: Text,
};
const appearanceToSizingProps = {
[APPEARANCES.H1]: { size: 'extraLarge' },
[APPEARANCES.H2]: { size: 'large' },
[APPEARANCES.H3]: { size: 'medium' },
[APPEARANCES.H4]: { size: 'small' },
[APPEARANCES.H5]: { size: 'tiny' },
[APPEARANCES.H6]: { size: 'extraTiny' },
[APPEARANCES.tiny]: { size: 'medium', weight: 'bold' },
};
/** AdaptiveHeading */
class AdaptiveHeading extends React.PureComponent {
render() {
const { dataHook, text, appearance = 'H1', light, emptyLast, textInShort, } = this.props;
const Component = appearanceToComponent[appearance];
const sizingProps = appearanceToSizingProps[appearance];
if (!textInShort) {
if (emptyLast) {
return (React.createElement(Component, { ...sizingProps, className: st(classes.headerWrapper, { appearance }), dataHook: dataHook, light: light },
React.createElement("span", { className: classes.headerShort }, "\u00A0"),
React.createElement("span", { "data-hook": DataHooks.text, className: classes.headerFull }, text)));
}
return (React.createElement(Component, { ...sizingProps, dataHook: dataHook, light: light, ellipsis: true },
React.createElement("span", { "data-hook": DataHooks.text }, text)));
}
if (emptyLast) {
return (React.createElement(Component, { ...sizingProps, className: st(classes.headerWrapper, { appearance }), dataHook: dataHook, light: light },
React.createElement("div", { className: classes.headerShort },
React.createElement("div", { "aria-hidden": "true", className: st(classes.headerWrapper, { appearance }) },
React.createElement("span", { className: classes.headerShort }, "\u00A0"),
React.createElement("span", { className: classes.headerFull, "data-hook": DataHooks.textInShort, title: text }, textInShort))),
React.createElement("span", { "data-hook": DataHooks.text, className: classes.headerFull }, text)));
}
return (React.createElement(Component, { ...sizingProps, className: st(classes.headerWrapper, { appearance }), dataHook: dataHook, light: light },
React.createElement("div", { className: classes.headerShort },
React.createElement("span", { "data-hook": DataHooks.textInShort, "aria-hidden": "true", title: text },
React.createElement(Tooltip, { content: text },
React.createElement("div", { className: classes.ellipsis }, textInShort)))),
React.createElement("span", { "data-hook": DataHooks.text, className: classes.headerFull }, text)));
}
}
AdaptiveHeading.displayName = 'AdaptiveHeading';
export default AdaptiveHeading;
//# sourceMappingURL=AdaptiveHeading.js.map