wix-style-react
Version:
wix-style-react
34 lines • 2.14 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './GooglePreview.st.css';
import Text from '../Text';
import Box from '../Box';
const tooltipProps = { enterDelay: 200 };
/**
* A preview of a title, link and description of SEO result as it displayed in Google
*/
const GooglePreview = ({ dataHook, previewUrl, title, description, titleMaxLines = 1, descriptionMaxLines = 2, skin = 'light', }) => (React.createElement(Box, { className: st(classes.root, {
transparent: skin === 'transparent',
}), dataHook: dataHook, direction: "vertical" },
React.createElement(Text, { weight: "thin", size: "tiny", light: false, className: classes.googlePreviewUrl, dataHook: "googlePreview-previewUrl", ellipsis: true, tooltipProps: tooltipProps }, previewUrl),
React.createElement(Text, { className: classes.googlePreviewTitle, dataHook: "googlePreview-title", weight: "bold", size: "medium", secondary: false, light: false, ellipsis: true, tooltipProps: tooltipProps, maxLines: titleMaxLines }, title),
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 = {
/** Applies a data-hook HTML attribute to be used in the tests */
dataHook: PropTypes.string,
/** Sets the title of the page (middle section) */
title: PropTypes.string,
/** Truncates title text at a specific number of lines */
titleMaxLines: PropTypes.number,
/** Sets the link for the site (top section) */
previewUrl: PropTypes.string,
/** Sets a short description for the page (bottom section, optional) */
description: PropTypes.string,
/** Truncates description text at a specific number of lines */
descriptionMaxLines: PropTypes.number,
/** Sets widget background color */
skin: PropTypes.oneOf(['light', 'transparent']),
};
export default GooglePreview;
//# sourceMappingURL=GooglePreview.js.map