wix-style-react/dist/es/src/Heading/Heading.js

wix-style-react

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["light", "appearance", "children", "dataHook"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

import React from 'react';
import PropTypes from 'prop-types';
import Ellipsis, { extractEllipsisProps } from '../common/Ellipsis';
import { st, classes } from './Heading.st.css';
import { EllipsisCommonProps } from '../common/PropTypes/EllipsisCommon';
import { WixStyleReactContext } from '../WixStyleReactProvider/context';
export var APPEARANCES = {
  H1: 'H1',
  H2: 'H2',
  H3: 'H3',
  H4: 'H4',
  H5: 'H5',
  H6: 'H6'
};

var Heading = function Heading(props) {
  var _extractEllipsisProps = extractEllipsisProps(props),
      ellipsisProps = _extractEllipsisProps.ellipsisProps,
      componentProps = _extractEllipsisProps.componentProps;

  var light = componentProps.light,
      appearance = componentProps.appearance,
      children = componentProps.children,
      dataHook = componentProps.dataHook,
      headingProps = _objectWithoutProperties(componentProps, _excluded);

  return /*#__PURE__*/React.createElement(WixStyleReactContext.Consumer, null, function (_ref) {
    var reducedSpacingAndImprovedLayout = _ref.reducedSpacingAndImprovedLayout;
    return /*#__PURE__*/React.createElement(Ellipsis, _extends({}, ellipsisProps, {
      wrapperClassName: st(classes.root, {
        appearance: appearance,
        reducedSpacingAndImprovedLayout: reducedSpacingAndImprovedLayout
      }),
      render: function render(_ref2) {
        var ref = _ref2.ref,
            ellipsisClasses = _ref2.ellipsisClasses;
        return /*#__PURE__*/React.createElement(appearance.toLowerCase(), _objectSpread(_objectSpread({}, headingProps), {}, {
          ref: ref,
          'data-hook': dataHook,
          className: st(classes.root, {
            light: light,
            appearance: appearance,
            reducedSpacingAndImprovedLayout: reducedSpacingAndImprovedLayout
          }, ellipsisClasses(props.className)),
          'data-appearance': appearance,
          'data-light': light
        }), children);
      }
    }));
  });
};

Heading.displayName = 'Heading';
Heading.propTypes = _objectSpread({
  /** Applies a data-hook HTML attribute that can be used in the tests. */
  dataHook: PropTypes.string,

  /** Renders any kind of content within a heading. Usually it’s a text string. */
  children: PropTypes.any,

  /** Invert heading style so it can be used on a dark or image background. */
  light: PropTypes.bool,

  /** Set the size of a heading. */
  appearance: PropTypes.oneOf(Object.keys(APPEARANCES))
}, EllipsisCommonProps);
Heading.defaultProps = _objectSpread({
  appearance: APPEARANCES.H1,
  light: false
}, Ellipsis.defaultProps);
export default Heading;