@wix/design-system/dist/esm/Heading/Heading.js

@wix/design-system

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import Ellipsis, { extractEllipsisProps } from '../common/Ellipsis';
import { st, classes } from './Heading.st.css.js';
import { EllipsisCommonProps } from '../common/PropTypes/EllipsisCommon';
import deprecationLog from '../utils/deprecationLog';
import { WixStyleReactMaskingContext } from '../WixStyleReactMaskingProvider/context';
import { WixDesignSystemContext } from '../WixDesignSystemProvider/context';
import { APPEARANCES, SIZE } from './Heading.constants';
const sizeToAppearance = {
    [SIZE.EXTRA_LARGE]: APPEARANCES.H1,
    [SIZE.LARGE]: APPEARANCES.H2,
    [SIZE.MEDIUM]: APPEARANCES.H3,
    [SIZE.SMALL]: APPEARANCES.H4,
    [SIZE.TINY]: APPEARANCES.H5,
    [SIZE.EXTRA_TINY]: APPEARANCES.H6,
};
const Heading = ({ light = false, ellipsis = false, appendTo = Ellipsis.defaultProps.appendTo, flip = Ellipsis.defaultProps.flip, fixed = Ellipsis.defaultProps.fixed, placement = Ellipsis.defaultProps.placement, zIndex = Ellipsis.defaultProps.zIndex, enterDelay = Ellipsis.defaultProps.enterDelay, exitDelay = Ellipsis.defaultProps.exitDelay, showTooltip = Ellipsis.defaultProps.showTooltip, ...propsWithNoDefaults }) => {
    const props = {
        ...Ellipsis.defaultProps,
        light,
        ellipsis,
        appendTo,
        flip,
        fixed,
        placement,
        zIndex,
        enterDelay,
        exitDelay,
        showTooltip,
        ...propsWithNoDefaults,
    };
    const { ellipsisProps, componentProps } = extractEllipsisProps(props);
    const { appearance, as, children, dataHook, size, id, light: _light, ...headingProps } = componentProps;
    useEffect(() => {
        if (appearance) {
            deprecationLog('<Heading/> - prop "appearance" is deprecated and will be removed in next major release, please use "size" property instead.');
        }
    }, [appearance]);
    const headingType = (size && sizeToAppearance[size]) ||
        appearance ||
        sizeToAppearance[SIZE.EXTRA_LARGE];
    return (React.createElement(WixStyleReactMaskingContext.Consumer, null, ({ maskingClassNames }) => (React.createElement(WixDesignSystemContext.Consumer, null, ({ newColorsBranding }) => (React.createElement(Ellipsis, { ...ellipsisProps, wrapperClassName: st(classes.root, {
            appearance: headingType,
            size: newColorsBranding ? size : undefined,
        }), render: ({ ref, ellipsisClasses, ellipsisInlineStyle }) => React.createElement(as || headingType.toLowerCase(), {
            ...headingProps,
            id,
            ref,
            style: ellipsisInlineStyle,
            'data-hook': dataHook,
            className: st(classes.root, { light, appearance: headingType, newColorsBranding }, ellipsisClasses(props.className), maskingClassNames),
            'data-appearance': appearance,
            'data-size': size,
            'data-light': light,
            'data-mask': !!maskingClassNames,
            'data-id': id,
        }, children) }))))));
};
Heading.displayName = 'Heading';
Heading.propTypes = {
    ...EllipsisCommonProps,
    ellipsis: PropTypes.bool,
    maxLines: PropTypes.number,
    dataHook: PropTypes.string,
    children: PropTypes.any,
    light: PropTypes.bool,
    appearance: PropTypes.oneOf(Object.keys(APPEARANCES)),
    as: PropTypes.string,
    size: PropTypes.oneOf(Object.values(SIZE)),
    id: PropTypes.string,
};
export default Heading;
//# sourceMappingURL=Heading.js.map