@automattic/jetpack-components 0.39.0

package/components/pricing-slider/index.tsx

@@ -0,0 +1,53 @@
+import classNames from 'classnames';
+import React from 'react';
+import ReactSlider from 'react-slider';
+import { PricingSliderProps } from './types';
+import './style.scss';
+
+/**
+ * Generate Pricing Slider
+ * More support from the original ReactSlider component: https://zillow.github.io/react-slider/
+ *
+ * @param {PricingSliderProps} props - Props
+ * @returns {React.ReactElement} - JSX element
+ */
+const PricingSlider: React.FC< PricingSliderProps > = ( {
+	className,
+	maxValue = 100,
+	minValue = 0,
+	step = 1,
+	value,
+	onChange,
+	onBeforeChange,
+	onAfterChange,
+	renderThumb,
+} ) => {
+	const componentClassName = classNames( 'jp-components-pricing-slider', className );
+
+	const renderThumbCallback = renderThumb
+		? renderThumb
+		: ( props, state ) => {
+				return <div { ...props }>{ state.valueNow }</div>;
+		  };
+
+	return (
+		<div className={ componentClassName } data-testid="pricing-slider">
+			<ReactSlider
+				className="jp-components-pricing-slider__control"
+				thumbClassName="jp-components-pricing-slider__thumb"
+				thumbActiveClassName="jp-components-pricing-slider__thumb--is-active"
+				trackClassName="jp-components-pricing-slider__track"
+				value={ value }
+				max={ maxValue }
+				min={ minValue }
+				step={ step }
+				renderThumb={ renderThumbCallback } // eslint-disable-line react/jsx-no-bind
+				onChange={ onChange } // eslint-disable-line react/jsx-no-bind
+				onBeforeChange={ onBeforeChange } // eslint-disable-line react/jsx-no-bind
+				onAfterChange={ onAfterChange } // eslint-disable-line react/jsx-no-bind
+			/>
+		</div>
+	);
+};
+
+export default PricingSlider;

package/components/pricing-slider/stories/index.stories.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import PricingSlider from '../index';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+export default {
+	title: 'JS Packages/Components/Pricing Slider',
+	component: PricingSlider,
+} as ComponentMeta< typeof PricingSlider >;
+
+// Export additional stories using pre-defined values
+const Template: ComponentStory< typeof PricingSlider > = args => <PricingSlider { ...args } />;
+
+// Export Default story
+export const _default = Template.bind( {} );
+
+// Export additional stories using chaning values
+const TemplateWithChangingValue: ComponentStory< typeof PricingSlider > = args => {
+	const [ value, setValue ] = useState( 10 );
+	const [ endValue, setEndValue ] = useState( 10 );
+	const renderThumb = ( props, state ) => {
+		return (
+			<div { ...props }>
+				{ state.valueNow } - { state.valueNow % 2 === 0 ? 'Even' : 'Odd' }
+			</div>
+		);
+	};
+
+	return (
+		<div>
+			<PricingSlider
+				{ ...args }
+				value={ value }
+				onChange={ setValue }
+				onAfterChange={ setEndValue }
+				renderThumb={ renderThumb } // eslint-disable-line react/jsx-no-bind
+			/>
+			<div>{ `Value on changing: ${ value }` }</div>
+			<div>{ `Value on change ends: ${ endValue }` }</div>
+		</div>
+	);
+};
+
+// Export With Default Value story
+export const WithDefaultValue = TemplateWithChangingValue.bind( {} );

package/components/pricing-slider/style.scss

@@ -0,0 +1,55 @@
+@import '@automattic/jetpack-base-styles/style';
+
+$thumb-height: 40px;
+$track-height: 8px;
+
+@mixin adjust-track-rail-styles {
+	height: $track-height;
+	border-radius: 8px; /* stylelint-disable-line scales/radii */
+}
+
+// Base styles
+.jp-components-pricing-slider__control {
+	width: 100%;
+	height: $thumb-height;
+}
+
+.jp-components-pricing-slider__track {
+	@include adjust-track-rail-styles;
+	top: calc(($thumb-height / 2) - ($track-height / 2));
+	background: var(--jp-gray);
+
+	&.jp-components-pricing-slider__track-0 {
+		background: var(--jp-green-40);
+	}
+
+	&.jp-components-pricing-slider__track-1 {
+		background: var(--jp-gray);
+	}
+}
+
+.jp-components-pricing-slider__thumb {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 8px 16px;
+	height: $thumb-height;
+	background-color: var(--jp-white);
+	border: 1px solid var(--jp-gray);
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 8px rgba(0, 0, 0, 0.08);
+	border-radius: 4px;
+	color: var(--jp-black);
+	font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+	font-style: normal;
+	font-weight: 600;
+	font-size: var(--font-body);
+	line-height: 24px;
+	letter-spacing: -0.02em;
+	white-space: nowrap;
+	cursor: pointer;
+
+	&.jp-components-pricing-slider__thumb--is-active {
+		// On focus styling
+		outline: none;
+	}
+}

package/components/pricing-slider/test/component.tsx

@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import ResizeObserver from 'resize-observer-polyfill';
+import PricingSlider from '../index';
+
+describe( 'PricingSlider', () => {
+	beforeAll( () => {
+		global.ResizeObserver = ResizeObserver;
+	} );
+
+	it( 'renders the pricing slider', () => {
+		render( <PricingSlider /> );
+		expect( screen.getByTestId( 'pricing-slider' ) ).toBeInTheDocument();
+	} );
+} );

package/components/pricing-slider/types.ts

@@ -0,0 +1,58 @@
+import type { HTMLProps, RefCallback } from 'react';
+
+interface HTMLPropsWithRefCallback< T > extends HTMLProps< T > {
+	ref: RefCallback< T >;
+}
+
+export type PricingSliderProps = {
+	/**
+	 * The wrapper class name of this PricingSlider component.
+	 */
+	className?: string;
+
+	/**
+	 * The maximum value of the slider.
+	 */
+	maxValue?: number;
+
+	/**
+	 * The minimum value of the slider.
+	 */
+	minValue?: number;
+
+	/**
+	 * The initial value of the slider.
+	 */
+	value?: number;
+
+	/**
+	 * The step value of the slider.
+	 */
+	step?: number;
+
+	/**
+	 * Callback called on every value change.
+	 * The function will be called with two arguments, the first being the new value(s) the second being thumb index.
+	 */
+	onChange?: ( value: number ) => void;
+
+	/**
+	 * Callback called before starting to move a thumb. The callback will only be called if the action will result in a change.
+	 * The function will be called with two arguments, the first being the initial value(s) the second being thumb index.
+	 */
+	onBeforeChange?: ( value: number ) => void;
+
+	/**
+	 * Callback called only after moving a thumb has ended. The callback will only be called if the action resulted in a change.
+	 * The function will be called with two arguments, the first being the result value(s) the second being thumb index.
+	 */
+	onAfterChange?: ( value: number ) => void;
+
+	/**
+	 * Node to render on the slider.
+	 */
+	renderThumb?: (
+		props: HTMLPropsWithRefCallback< HTMLDivElement >,
+		state: { index: number; value: number | ReadonlyArray< number >; valueNow: number }
+	) => JSX.Element | null;
+};

package/components/pricing-table/index.tsx

@@ -0,0 +1,200 @@
+import { __, sprintf } from '@wordpress/i18n';
+import { Icon, check, closeSmall } from '@wordpress/icons';
+import classnames from 'classnames';
+import {
+	createContext,
+	useContext,
+	Children,
+	cloneElement,
+	PropsWithChildren,
+	ReactElement,
+} from 'react';
+import React, { CSSProperties } from 'react';
+import IconTooltip from '../icon-tooltip';
+import useBreakpointMatch from '../layout/use-breakpoint-match';
+import TermsOfService from '../terms-of-service';
+import Text from '../text';
+import styles from './styles.module.scss';
+import {
+	PricingTableProps,
+	PricingTableColumnProps,
+	PricingTableHeaderProps,
+	PricingTableItemProps,
+} from './types';
+
+const INCLUDED_TEXT = __( 'Included', 'jetpack' );
+const NOT_INCLUDED_TEXT = __( 'Not included', 'jetpack' );
+const COMING_SOON_TEXT = __( 'Coming soon', 'jetpack' );
+
+const PricingTableContext = createContext( undefined );
+
+const getItemLabels = ( isComingSoon, isIncluded, featureNameLabel ) => {
+	if ( isComingSoon ) {
+		return {
+			lg: COMING_SOON_TEXT,
+			// translators: Name of the current feature
+			default: sprintf( __( '%s coming soon', 'jetpack' ), featureNameLabel ),
+		};
+	}
+
+	return {
+		lg: isIncluded ? INCLUDED_TEXT : NOT_INCLUDED_TEXT,
+		default: isIncluded
+			? featureNameLabel
+			: sprintf(
+					/* translators: Name of the current feature */
+					__( '%s not included', 'jetpack' ),
+					featureNameLabel
+			  ),
+	};
+};
+
+export const PricingTableItem: React.FC< PricingTableItemProps > = ( {
+	isIncluded = false,
+	isComingSoon = false,
+	index = 0,
+	label = null,
+	tooltipInfo,
+	tooltipTitle,
+	tooltipClassName = '',
+} ) => {
+	const [ isLg ] = useBreakpointMatch( 'lg' );
+	const item = useContext( PricingTableContext )[ index ];
+	const showTick = isComingSoon || isIncluded;
+
+	const featureNameLabel = item.name;
+
+	const defaultTooltipInfo = item.tooltipInfo;
+	const defaultTooltipTitle = item.tooltipTitle;
+	const showTooltip = tooltipInfo || ( ! isLg && defaultTooltipInfo );
+
+	const labels = getItemLabels( isComingSoon, isIncluded, featureNameLabel );
+
+	const defaultLabel = isLg ? labels.lg : labels.default;
+
+	return (
+		<div className={ classnames( styles.item, styles.value ) }>
+			<Icon
+				className={ classnames(
+					styles.icon,
+					showTick ? styles[ 'icon-check' ] : styles[ 'icon-cross' ]
+				) }
+				size={ 32 }
+				icon={ showTick ? check : closeSmall }
+			/>
+			<Text variant="body-small">{ label || defaultLabel }</Text>
+			{ showTooltip && (
+				<IconTooltip
+					title={ tooltipTitle ? tooltipTitle : defaultTooltipTitle }
+					iconClassName={ styles[ 'popover-icon' ] }
+					className={ classnames( styles.popover, tooltipClassName ) }
+					placement={ 'bottom-end' }
+					iconSize={ 14 }
+					offset={ 4 }
+					wide={ Boolean( tooltipTitle && tooltipInfo ) }
+				>
+					<Text variant="body-small" component="div">
+						{ tooltipInfo || defaultTooltipInfo }
+					</Text>
+				</IconTooltip>
+			) }
+		</div>
+	);
+};
+
+export const PricingTableHeader: React.FC< PricingTableHeaderProps > = ( { children } ) => (
+	<div className={ styles.header }>{ children }</div>
+);
+
+export const PricingTableColumn: React.FC< PricingTableColumnProps > = ( {
+	primary = false,
+	children,
+} ) => {
+	let index = 0;
+
+	return (
+		<div className={ classnames( styles.card, { [ styles[ 'is-primary' ] ]: primary } ) }>
+			{ Children.map( children, child => {
+				const item = child as ReactElement<
+					PropsWithChildren< PricingTableHeaderProps | PricingTableItemProps >
+				>;
+
+				if ( item.type === PricingTableItem ) {
+					index++;
+					return cloneElement( item, { index: index - 1 } );
+				}
+
+				return item;
+			} ) }
+		</div>
+	);
+};
+
+const PricingTable: React.FC< PricingTableProps > = ( {
+	title,
+	items,
+	children,
+	showIntroOfferDisclaimer = false,
+} ) => {
+	const [ isLg ] = useBreakpointMatch( 'lg' );
+
+	return (
+		<PricingTableContext.Provider value={ items }>
+			<div
+				className={ classnames( styles.container, { [ styles[ 'is-viewport-large' ] ]: isLg } ) }
+				style={
+					{
+						'--rows': items.length + 1,
+						'--columns': Children.toArray( children ).length + 1,
+					} as CSSProperties
+				}
+			>
+				<div className={ styles.table }>
+					<Text variant="headline-small">{ title }</Text>
+					{ isLg &&
+						items.map( ( item, i ) => (
+							<div
+								className={ classnames( styles.item, {
+									[ styles[ 'last-feature' ] ]: i === items.length - 1,
+								} ) }
+								key={ i }
+							>
+								<Text variant="body-small">
+									<strong>{ item.name }</strong>
+								</Text>
+								{ item.tooltipInfo && (
+									<IconTooltip
+										title={ item.tooltipTitle }
+										iconClassName={ styles[ 'popover-icon' ] }
+										className={ styles.popover }
+										placement={ item.tooltipPlacement ? item.tooltipPlacement : 'bottom-end' }
+										iconSize={ 14 }
+										offset={ 4 }
+										wide={ Boolean( item.tooltipTitle && item.tooltipInfo ) }
+									>
+										<Text variant="body-small">{ item.tooltipInfo }</Text>
+									</IconTooltip>
+								) }
+							</div>
+						) ) }
+					{ children }
+				</div>
+			</div>
+			<div className={ styles[ 'tos-container' ] }>
+				<div className={ styles.tos }>
+					{ showIntroOfferDisclaimer && (
+						<Text variant="body-small">
+							{ __(
+								'Reduced pricing is a limited offer for the first year and renews at regular price.',
+								'jetpack'
+							) }
+						</Text>
+					) }
+					<TermsOfService multipleButtons />
+				</div>
+			</div>
+		</PricingTableContext.Provider>
+	);
+};
+
+export default PricingTable;

package/components/pricing-table/stories/index.stories.tsx

@@ -0,0 +1,74 @@
+import Button from '../../button';
+import ProductPrice from '../../product-price';
+import PricingTable, { PricingTableColumn, PricingTableHeader, PricingTableItem } from '../index';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+export default {
+	title: 'JS Packages/Components/Pricing Table',
+	component: PricingTable,
+	subcomponents: { PricingTableColumn, PricingTableHeader, PricingTableItem },
+} as ComponentMeta< typeof PricingTable >;
+
+const Template: ComponentStory< typeof PricingTable > = args => {
+	return (
+		<PricingTable { ...args }>
+			<PricingTableColumn primary>
+				<PricingTableHeader>
+					<ProductPrice
+						price={ 9.95 }
+						offPrice={ 4.98 }
+						legend="/month, billed yearly"
+						currency="USD"
+						hideDiscountLabel={ args?.hideDiscountLabel }
+					/>
+					<Button fullWidth>Get Premium</Button>
+				</PricingTableHeader>
+				<PricingTableItem isIncluded={ true } label={ <strong>Up to 1000</strong> } />
+				<PricingTableItem isIncluded={ true } tooltipInfo={ 'This is an info' } />
+				<PricingTableItem
+					isIncluded={ true }
+					tooltipInfo={ 'This is an info with title' }
+					tooltipTitle={ 'Small title' }
+				/>
+				<PricingTableItem isIncluded={ true } />
+				<PricingTableItem isIncluded={ true } />
+			</PricingTableColumn>
+			<PricingTableColumn>
+				<PricingTableHeader>
+					<ProductPrice price={ 0 } legend="Free forever" currency="USD" hidePriceFraction />
+					<Button fullWidth variant="secondary">
+						Start for free
+					</Button>
+				</PricingTableHeader>
+				<PricingTableItem isIncluded={ true } label="Up to 300" />
+				<PricingTableItem
+					isIncluded={ false }
+					label="This is not included"
+					tooltipInfo="This has a tooltip, so its overwrites the default info on small screens"
+				/>
+				<PricingTableItem isIncluded={ false } />
+				<PricingTableItem isIncluded={ true } />
+				<PricingTableItem isIncluded={ true } />
+			</PricingTableColumn>
+		</PricingTable>
+	);
+};
+
+const DefaultArgs = {
+	title: 'Buy premium, or start for free',
+	items: [
+		{ name: 'Feature A with limit', tooltipInfo: 'Default info for Feature A' },
+		{ name: 'Feature B', tooltipInfo: 'Default info for Feature B' },
+		{
+			name: 'Feature C with a longer title that will span multiple lines',
+			tooltipInfo: 'Default info for Feature C',
+			tooltipTitle: 'Title for C',
+		},
+		{ name: 'Feature D', tooltipInfo: 'Default info for Feature D', tooltipTitle: 'Title for D' },
+		{ name: 'Feature E' },
+	],
+	hideDiscountLabel: false,
+};
+
+export const _default = Template.bind( {} );
+_default.args = DefaultArgs;

package/components/pricing-table/styles.module.scss

@@ -0,0 +1,160 @@
+.container {
+	--padding: calc(var(--spacing-base) * 4);
+	color: var(--jp-black);
+}
+
+.table {
+	--gap: calc(var(--spacing-base) * 3);
+	position: relative;
+	padding: var(--padding) 0;
+
+	.is-viewport-large & {
+		display: grid;
+		grid-template-columns: repeat(var(--columns), 1fr);
+		grid-auto-flow: column;
+		grid-template-rows: repeat(var(--rows), minmax(min-content, max-content));
+		column-gap: var(--gap);
+	}
+}
+
+.card {
+	margin-top: var(--padding);
+
+	.is-viewport-large & {
+		display: contents;
+	}
+
+	&.is-primary {
+		> * {
+			background: var(--jp-white);
+			position: relative;
+
+			&::after {
+				content: '';
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				z-index: -1;
+				box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.05);
+			}
+		}
+	}
+
+	> :first-child {
+		border-top-left-radius: var(--jp-border-radius);
+		border-top-right-radius: var(--jp-border-radius);
+		border-width: 1px 1px 0;
+	}
+
+	> :last-child {
+		border-width: 0 1px 1px;
+		border-bottom-left-radius: var(--jp-border-radius);
+		border-bottom-right-radius: var(--jp-border-radius);
+	}
+}
+
+.header {
+	padding: var(--padding);
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.item {
+	display: flex;
+	align-items: center;
+	padding-bottom: calc(var(--spacing-base) * 2);
+	position: relative;
+
+	&:not(:nth-child(2)) {
+		padding-top: calc(var(--spacing-base) * 2);
+
+		&::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: var(--padding);
+			right: var(--padding);
+			height: 1px;
+			.is-viewport-large & {
+				width: calc(100% + var(--gap));
+				left: 0;
+				right: unset;
+			}
+			z-index: 5;
+			background-color: var(--jp-gray);
+
+			// Last pricing column doesn't have any grid gap on the right. So override the default width specified above.
+			.is-viewport-large .table > :last-child & {
+				width: 100%;
+			}
+		}
+	}
+
+	&:last-of-type {
+		padding-bottom: var(--padding);
+	}
+}
+
+.last-feature {
+	padding-bottom: var(--padding);
+}
+
+.value {
+	padding-left: var(--padding);
+	padding-right: var(--padding);
+}
+
+.icon {
+	margin: 0 var(--spacing-base);
+	fill: var(--jp-gray);
+	flex-shrink: 0;
+
+	&.icon-check {
+		fill: var(--jp-green-40);
+	}
+
+	&.icon-cross {
+		fill: var(--jp-red-50);
+	}
+}
+
+.popover {
+	margin-left: auto;
+
+	.is-viewport-large & {
+		top: 1px;
+		margin: 0 var(--spacing-base);
+	}
+}
+
+.item .popover-icon {
+	fill: var(--jp-gray-20);
+	flex-shrink: 0;
+}
+
+.tos {
+	text-align: center;
+	width: fit-content;
+
+	> a {
+		color: black;
+	}
+
+	.is-viewport-large & {
+		padding-left: var(--padding);
+		padding-right: var(--padding);
+		grid-column: 2;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+}
+
+.tos-container {
+	display: flex;
+	align-items: right;
+	justify-content: right;
+	margin: 0 calc(var(--spacing-base) * 4);
+}

package/components/pricing-table/test/component.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import PricingTable, { PricingTableColumn, PricingTableHeader, PricingTableItem } from '../index';
+
+describe( 'PricingTable', () => {
+	const testProps = {
+		title: 'Dummy Pricing Table',
+		items: [
+			{ name: 'Dummy Item 1', tooltipInfo: 'Default Info' },
+			{ name: 'Dummy Item 2', tooltipInfo: 'Default Info' },
+			{ name: 'Dummy Item 3', tooltipInfo: 'Default Info' },
+		],
+		children: (
+			<>
+				<PricingTableColumn>
+					<PricingTableHeader>Header 1</PricingTableHeader>
+					<PricingTableItem isIncluded={ true } />
+					<PricingTableItem isIncluded={ true } />
+					<PricingTableItem isIncluded={ true } />
+				</PricingTableColumn>
+				<PricingTableColumn>
+					<PricingTableHeader>Header 2</PricingTableHeader>
+					<PricingTableItem isIncluded={ true } />
+					<PricingTableItem isIncluded={ true } />
+					<PricingTableItem isIncluded={ false } />
+				</PricingTableColumn>
+			</>
+		),
+	};
+
+	it( 'renders the title', () => {
+		render( <PricingTable { ...testProps }></PricingTable> );
+		expect( screen.getByRole( 'heading' ) ).toHaveTextContent( 'Dummy Pricing Table' );
+	} );
+
+	it( 'renders all included items', () => {
+		render( <PricingTable { ...testProps }></PricingTable> );
+		expect( screen.getAllByText( 'Dummy Item 1' ) ).toHaveLength( 2 );
+		expect( screen.getAllByText( 'Dummy Item 2' ) ).toHaveLength( 2 );
+		expect( screen.getAllByText( 'Dummy Item 3' ) ).toHaveLength( 1 ); // eslint-disable-line jest-dom/prefer-in-document
+	} );
+} );