@automattic/jetpack-components 0.39.0

package/components/gridicon/types.ts

@@ -0,0 +1,48 @@
+import type { CSSProperties } from 'react';
+
+export type GridiconProps = {
+	/**
+	 * Icon name
+	 */
+	icon: string;
+
+	/**
+	 * HTML class name
+	 */
+	className?: string;
+
+	/**
+	 * Description for SVG for screen readers
+	 */
+	description?: string;
+
+	/**
+	 * Whether SVG is focussable
+	 */
+	focusable?: boolean;
+
+	/**
+	 * SVG height
+	 */
+	height?: number;
+
+	/**
+	 * Click handler
+	 */
+	onClick?: VoidFunction;
+
+	/**
+	 * SVG width and height
+	 */
+	size?: number;
+
+	/**
+	 * SVG style
+	 */
+	style?: CSSProperties;
+
+	/**
+	 * SVG width
+	 */
+	width?: number;
+};

package/components/icon-tooltip/index.tsx

@@ -0,0 +1,96 @@
+import { Popover } from '@wordpress/components';
+import classNames from 'classnames';
+import React, { useCallback, useState } from 'react';
+import Button from '../button';
+import Gridicon from '../gridicon/index';
+import { IconTooltipProps, Placement, Position } from './types';
+
+import './style.scss';
+
+const placementsToPositions = ( placement: Placement ): Position => {
+	const mapping = {
+		'top-end': 'top left',
+		top: 'top center',
+		'top-start': 'top right',
+		'bottom-end': 'bottom left',
+		bottom: 'bottom center',
+		'bottom-start': 'bottom right',
+	};
+
+	return mapping[ placement ] as Position;
+};
+
+/**
+ * Generate Icon Tooltip
+ *
+ * @param {IconTooltipProps} props - Props
+ * @returns {React.ReactElement} - JSX element
+ */
+const IconTooltip: React.FC< IconTooltipProps > = ( {
+	className = '',
+	iconClassName = '',
+	placement = 'bottom-end',
+	animate = true,
+	iconCode = 'info-outline',
+	iconSize = 18,
+	offset = 10,
+	title,
+	children,
+	popoverAnchorStyle = 'icon',
+	forceShow = false,
+	wide = false,
+} ) => {
+	const POPOVER_HELPER_WIDTH = 124;
+	const [ isVisible, setIsVisible ] = useState( false );
+	const showTooltip = useCallback( () => setIsVisible( true ), [ setIsVisible ] );
+	const hideTooltip = useCallback( () => setIsVisible( false ), [ setIsVisible ] );
+
+	const args = {
+		// To be compatible with deprecating prop `position`.
+		position: placementsToPositions( placement ),
+		placement,
+		animate,
+		noArrow: false,
+		resize: false,
+		flip: false,
+		offset, // The distance (in px) between the anchor and the popover.
+		focusOnMount: 'container' as const,
+		onClose: hideTooltip,
+		className: 'icon-tooltip-container',
+	};
+
+	const isAnchorWrapper = popoverAnchorStyle === 'wrapper';
+
+	const wrapperClassNames = classNames( 'icon-tooltip-wrapper', className );
+	const iconShiftBySize = {
+		left: isAnchorWrapper ? 0 : -( POPOVER_HELPER_WIDTH / 2 - iconSize / 2 ) + 'px',
+	};
+
+	const isForcedToShow = isAnchorWrapper && forceShow;
+
+	return (
+		<div className={ wrapperClassNames } data-testid="icon-tooltip_wrapper">
+			{ ! isAnchorWrapper && (
+				<Button variant="link" onClick={ showTooltip }>
+					<Gridicon className={ iconClassName } icon={ iconCode } size={ iconSize } />
+				</Button>
+			) }
+
+			<div
+				className={ classNames( 'icon-tooltip-helper', { 'is-wide': wide } ) }
+				style={ iconShiftBySize }
+			>
+				{ ( isForcedToShow || isVisible ) && (
+					<Popover { ...args }>
+						<div>
+							{ title && <div className="icon-tooltip-title">{ title }</div> }
+							<div className="icon-tooltip-content">{ children }</div>
+						</div>
+					</Popover>
+				) }
+			</div>
+		</div>
+	);
+};
+
+export default IconTooltip;

package/components/icon-tooltip/stories/index.stories.tsx

@@ -0,0 +1,108 @@
+import IconTooltip from '../index';
+import './style.scss';
+import type { Placement } from '../types';
+
+const AVAILABLE_PLACEMENTS: Placement[] = [
+	'top',
+	'top-start',
+	'top-end',
+	'bottom',
+	'bottom-start',
+	'bottom-end',
+];
+
+export default {
+	title: 'JS Packages/Components/IconTooltip',
+	component: IconTooltip,
+	argTypes: {
+		className: {
+			control: { type: 'text' },
+		},
+		iconClassName: {
+			control: { type: 'text' },
+		},
+		placement: {
+			control: { type: 'select' },
+			options: AVAILABLE_PLACEMENTS,
+		},
+		animate: {
+			control: { type: 'boolean' },
+		},
+		iconCode: {
+			control: { type: 'text' },
+		},
+		iconSize: {
+			control: { type: 'number' },
+		},
+		offset: {
+			control: { type: 'number' },
+		},
+		title: {
+			control: { type: 'text' },
+		},
+		children: {
+			control: { type: null },
+		},
+		wide: {
+			control: { type: 'boolean' },
+		},
+	},
+};
+
+const Template = args => (
+	<div style={ { position: 'absolute', height: '1000px', left: '300px', top: '200px' } }>
+		<IconTooltip { ...args } />
+	</div>
+);
+
+const WrapperAnchorTemplate = args => (
+	<div style={ { position: 'absolute', height: '1000px', left: '300px', top: '300px' } }>
+		<div className="tooltip-wrapper">
+			<div className="tooltip-wrapper-anchor">
+				<IconTooltip { ...args }>
+					<>
+						<div>Thank you for upgrading! Now your visitors can search up to 500 records.</div>
+						<div className="tooltip-actions">
+							<span>1 of 2</span>
+						</div>
+					</>
+				</IconTooltip>
+			</div>
+		</div>
+	</div>
+);
+
+// Export Default story
+export const _default = Template.bind( {} );
+
+export const HasContent = Template.bind( {} );
+HasContent.args = {
+	title: 'This is title!',
+	children: (
+		<div>
+			This is children block!<br></br>
+			<br></br>Break Line!
+			<br></br>
+			<ul>
+				<li>Item 1</li>
+				<li>Item 2</li>
+			</ul>
+		</div>
+	),
+};
+
+export const WrapperAnchor = WrapperAnchorTemplate.bind( {} );
+WrapperAnchor.args = {
+	popoverAnchorStyle: 'wrapper',
+	title: 'Site records increased',
+	placement: 'top',
+	forceShow: true,
+};
+
+export const Wide = Template.bind( {} );
+Wide.args = {
+	title: 'This is title!',
+	children: <div>This is a wide tooltip!</div>,
+	wide: true,
+	placement: 'bottom-start',
+};

package/components/icon-tooltip/stories/style.scss

@@ -0,0 +1,36 @@
+.tooltip-wrapper-anchor {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 64px;
+	height: 64px;
+
+	.icon-tooltip-wrapper {
+		width: 100%;
+		height: 100%;
+
+		// To overwrite `margin-bottom`
+		.icon-tooltip-title {
+			font-size: var( --font-title-small );
+			font-weight: 500;
+			margin-bottom: 16px;
+		}
+	}
+
+	.icon-tooltip-helper {
+		width: 100%;
+		height: 100%;
+	}
+
+	.icon-tooltip-content {
+		font-size: var( --font-body );
+	}
+
+	.tooltip-actions {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		color: var( --jp-gray-60 );
+		margin-top: 24px;
+	}
+}

package/components/icon-tooltip/style.scss

@@ -0,0 +1,121 @@
+@import '@automattic/jetpack-base-styles/style';
+
+$arrow-color: var( --jp-gray );
+
+// Fix arrow color
+.components-popover:not(.is-without-arrow)::before {
+	border-color: $arrow-color;
+}
+
+// Namespace to avoid overriding global styles
+.icon-tooltip-helper {
+	/*
+	* Fix arrow placement - section start
+	*/
+	.components-popover:not([data-y-axis=middle])[data-x-axis=left] .components-popover__content {
+		margin-right: -62px;
+	}
+
+	.components-popover:not([data-y-axis=middle])[data-x-axis=right] .components-popover__content {
+		margin-left: -62px;	
+	}
+	/*
+	* Fix arrow placement - section end
+	*/
+
+	/*
+	* Fix arrow position for legacy position option - section start
+	*/
+	.components-popover[data-y-axis=bottom] .components-popover__content {
+		top: 2px !important;
+	}
+
+	.components-popover:not(.is-without-arrow)[data-y-axis=bottom]::before {
+		top: -6px !important;
+	}
+
+	.components-popover:not(.is-without-arrow)[data-y-axis=bottom]::after {
+		top: -4px !important;
+	}
+
+	.components-popover[data-y-axis=top] .components-popover__content {
+		bottom: 10px !important;
+	}
+
+	.components-popover:not(.is-without-arrow)[data-y-axis=top]::before {
+		bottom: 3px;
+	}
+
+	.components-popover:not(.is-without-arrow)[data-y-axis=top]::after {
+		bottom: 4px;
+	}
+	/*
+	* Fix arrow position for legacy position option - section end
+	*/
+
+	.components-popover__content {
+		padding: 24px;
+		width: 304px;
+		white-space: normal;
+		border-radius: 4px;
+		outline: none;
+		border: 1px solid $arrow-color;
+	}
+
+	&.is-wide .components-popover__content {
+		width: 440px;
+	}
+}
+
+.icon-tooltip-wrapper {
+	display: inline-block;
+	position: relative;
+	color: var( --jp-black );
+
+	.components-button.is-link:focus:not(:disabled) {
+		box-shadow: none;
+	}
+}
+
+.icon-tooltip-helper {
+	// POPOVER_HELPER_WIDTH
+	width: 124px;
+	height: 18px;
+	position: absolute;
+	top: 0;
+	// -( POPOVER_HELPER_WIDTH / 2 - iconSize / 2 ) + 'px'
+	left: -53px;
+	pointer-events: none;
+}
+
+.icon-tooltip-container {
+	// Recover events
+	pointer-events: all;
+}
+
+.icon-tooltip-title {
+	font-weight: 600;
+	font-size: 16px;
+	line-height: 19px;
+
+	&:not(:last-child) {
+		margin-bottom: 8px;
+	}
+}
+
+.icon-tooltip-content {
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 24px;
+
+	// Allow bulleted lists in tooltips.
+	ul {
+		margin: 0 0 0 1rem;
+		list-style-type: disc;
+	}
+
+	// Remove bottom margin from last list item.
+	ul li:last-child {
+		margin-bottom: 0;
+	}
+}

package/components/icon-tooltip/test/component.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import IconTooltip from '../index';
+import { IconTooltipProps } from '../types';
+
+describe( 'IconTooltip', () => {
+	const testProps: IconTooltipProps = {
+		title: 'Title',
+		children: <div>Content block</div>,
+	};
+
+	it( 'renders the icon tooltip', () => {
+		render( <IconTooltip { ...testProps } /> );
+		expect( screen.getByTestId( 'icon-tooltip_wrapper' ) ).toBeInTheDocument();
+	} );
+} );

package/components/icon-tooltip/types.ts

@@ -0,0 +1,76 @@
+export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+
+export type Position =
+	| 'top left'
+	| 'top center'
+	| 'top right'
+	| 'bottom left'
+	| 'bottom center'
+	| 'bottom right';
+
+export type IconTooltipProps = {
+	/**
+	 * The wrapper class name of this IconTooltip component.
+	 */
+	className?: string;
+
+	/**
+	 * The class name applied to Gridicon.
+	 */
+	iconClassName?: string;
+
+	/**
+	 * The deprecated position of Popover.
+	 */
+	position?: Position;
+
+	/**
+	 * The placement of Popover.
+	 */
+	placement?: Placement;
+
+	/**
+	 * The animation for Popover appears.
+	 */
+	animate?: boolean;
+
+	/**
+	 * The icon code for Gridicon.
+	 */
+	iconCode?: string;
+
+	/**
+	 * The title of Popover.
+	 */
+	title?: string;
+
+	/**
+	 * The main body content of Popover.
+	 */
+	children?: React.ReactNode;
+
+	/**
+	 * The icon square width and height size (in px) also calculate the Popover shift.
+	 */
+	iconSize?: number;
+
+	/**
+	 * The distance (in px) between the anchor and the Popover.
+	 */
+	offset?: number;
+
+	/**
+	 * Set the Popover anchor for its alignment with placement.
+	 */
+	popoverAnchorStyle?: 'icon' | 'wrapper';
+
+	/**
+	 * Force the Popover to show without an event trigger.
+	 */
+	forceShow?: boolean;
+
+	/**
+	 * Uses a wider content area when enabled.
+	 */
+	wide?: boolean;
+};

package/components/icons/README.md

@@ -0,0 +1,98 @@
+## Jetpack Icons
+
+Exports:
+
+### getIconBySlug( slug )
+
+Available slugs are:
+
+* anti-spam
+* backup
+* boost
+* crm
+* extras
+* scan
+* search
+* star
+* videopress
+* jetpack
+* facebook
+* twitter
+* linkedin
+* tumblr
+* google
+* mastodon
+
+```es6
+import {
+	getIconByslug
+} from '@automattic/jetpack-components';
+
+const Icon = getIconBySlug( 'boost' );
+return (
+	<div>
+		<Icon />
+	</div>
+)
+```
+
+#### Icons
+
+* AntiSpamIcon
+* BackupIcon
+* BoostIcon
+* CheckmarkIcon
+* CrmIcon
+* ScanIcon
+* SearchIcon
+* StarIcon
+* VideopressIcon
+* JetpackIcon
+* FacebookIcon
+* TwitterIcon
+* LinkedinIcon
+* TumblrIcon
+* GoogleIcon
+* MastodonIcon
+
+```es6
+import {
+	AntiSpamIcon,
+	BackupIcon,
+	BoostIcon,
+	CheckmarkIcon,
+	CrmIcon,
+	ScanIcon,
+	SearchIcon,
+	StarIcon,
+	VideoPressIcon,
+	JetpackIcon,
+	FacebookIcon,
+	TwitterIcon,
+	LinkedinIcon,
+	TumblrIcon,
+	GoogleIcon,
+	MastodonIcon
+} from '@automattic/jetpack-components';
+
+return (
+	<div>
+		<AntiSpamIcon />
+		<BackupIcon />
+		<BoostIcon />
+		<CheckmarkIcon />
+		<CrmIcon />
+		<ScanIcon />
+		<SearchIcon />
+		<StarIcon />
+		<VideoPressIcon />
+		<JetpackIcon />
+		<FacebookIcon />
+		<TwitterIcon />
+		<LinkedinIcon />
+		<TumblrIcon />
+		<GoogleIcon />
+		<MastodonIcon />
+	</div>
+)
+```