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

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './GooglePreview.st.css';
import Text from '../Text';
import Box from '../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.createElement(Box, {
    className: st(classes.root, {
      transparent: skin === 'transparent'
    }),
    dataHook: dataHook,
    direction: "vertical"
  }, /*#__PURE__*/React.createElement(Text, {
    weight: "thin",
    size: "tiny",
    light: false,
    className: classes.googlePreviewUrl,
    dataHook: 'googlePreview-previewUrl',
    ellipsis: true,
    tooltipProps: tooltipProps
  }, previewUrl), /*#__PURE__*/React.createElement(Text, {
    className: classes.googlePreviewTitle,
    dataHook: 'googlePreview-title',
    weight: "bold",
    size: "medium",
    secondary: false,
    light: false,
    ellipsis: true,
    tooltipProps: tooltipProps,
    maxLines: titleMaxLines
  }, title), /*#__PURE__*/React.createElement(Text, {
    className: 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.string,

  /** A site title */
  title: PropTypes.string,

  /** truncates text at a specific number of lines. */
  titleMaxLines: PropTypes.number,

  /** A link for the site */
  previewUrl: PropTypes.string,

  /** A short description for the site */
  description: PropTypes.string,

  /** truncates text at a specific number of lines. */
  descriptionMaxLines: PropTypes.number,

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