wix-style-react/dist/src/GooglePreview/GooglePreview.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _GooglePreviewSt = require("./GooglePreview.st.css");

var _Text = _interopRequireDefault(require("../Text"));

var _Box = _interopRequireDefault(require("../Box"));

var tooltipProps = {
  enterDelay: 200
};
/**
 *  A preview of a title, link and description of SEO result as it displayed in Google
 */

var GooglePreview = function GooglePreview(_ref) {
  var dataHook = _ref.dataHook,
      previewUrl = _ref.previewUrl,
      title = _ref.title,
      description = _ref.description,
      titleMaxLines = _ref.titleMaxLines,
      descriptionMaxLines = _ref.descriptionMaxLines,
      skin = _ref.skin;
  return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    className: (0, _GooglePreviewSt.st)(_GooglePreviewSt.classes.root, {
      transparent: skin === 'transparent'
    }),
    dataHook: dataHook,
    direction: "vertical"
  }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
    weight: "thin",
    size: "tiny",
    light: false,
    className: _GooglePreviewSt.classes.googlePreviewUrl,
    dataHook: 'googlePreview-previewUrl',
    ellipsis: true,
    tooltipProps: tooltipProps
  }, previewUrl), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
    className: _GooglePreviewSt.classes.googlePreviewTitle,
    dataHook: 'googlePreview-title',
    weight: "bold",
    size: "medium",
    secondary: false,
    light: false,
    ellipsis: true,
    tooltipProps: tooltipProps,
    maxLines: titleMaxLines
  }, title), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
    className: _GooglePreviewSt.classes.googlePreviewDescription,
    weight: "thin",
    size: "tiny",
    light: false,
    dataHook: "googlePreview-description",
    ellipsis: true,
    tooltipProps: tooltipProps,
    maxLines: descriptionMaxLines
  }, description));
};

GooglePreview.displayName = 'GooglePreview';
GooglePreview.propTypes = {
  dataHook: _propTypes["default"].string,

  /** A site title */
  title: _propTypes["default"].string,

  /** truncates text at a specific number of lines. */
  titleMaxLines: _propTypes["default"].number,

  /** A link for the site */
  previewUrl: _propTypes["default"].string,

  /** A short description for the site */
  description: _propTypes["default"].string,

  /** truncates text at a specific number of lines. */
  descriptionMaxLines: _propTypes["default"].number,

  /** Widget background color. `transparent` will hide border as well*/
  skin: _propTypes["default"].oneOf(['light', 'transparent'])
};
GooglePreview.defaultProps = {
  titleMaxLines: 1,
  descriptionMaxLines: 2,
  skin: 'light'
};
var _default = GooglePreview;
exports["default"] = _default;