@automattic/jetpack-components 0.39.0

package/components/notice/stories/index.stories.jsx

@@ -0,0 +1,90 @@
+import { ExternalLink } from '@wordpress/components';
+import Button from '../../button';
+import Notice from '../index';
+
+export default {
+	title: 'JS Packages/Components/Notice',
+	component: Notice,
+	argTypes: {
+		level: {
+			control: {
+				type: 'select',
+			},
+			options: [ 'info', 'success', 'warning', 'error' ],
+		},
+		hideCloseButton: {
+			control: {
+				type: 'boolean',
+			},
+		},
+	},
+};
+
+const Template = args => <Notice { ...args } />;
+
+export const _default = Template.bind( {} );
+_default.args = {
+	level: 'info',
+	title: 'Improve your hovercraft',
+	children:
+		'Make your hovercraft better with HoverPack; the best hovercraft upgrade kit on the market.',
+	onClose: () => alert( 'Close clicked' ),
+	actions: [
+		<Button key="install" isPrimary>
+			Install now
+		</Button>,
+		<ExternalLink key="learn-more" href="https://en.wikipedia.org/wiki/Hovercraft">
+			Learn more
+		</ExternalLink>,
+	],
+	hideCloseButton: false,
+};
+
+export const warning = Template.bind( {} );
+warning.args = {
+	level: 'warning',
+	title: 'Your hovercraft is full of eels.',
+	children: (
+		<div>
+			Either your vehicle needs to be cleared, or some kind of translation error has occurred.
+		</div>
+	),
+	actions: [
+		<Button key="bail" isPrimary>
+			Start Bailing
+		</Button>,
+		<ExternalLink key="learn-more" href="https://en.wikipedia.org/wiki/Hovercraft">
+			Learn more
+		</ExternalLink>,
+	],
+	hideCloseButton: false,
+};
+
+export const success = Template.bind( {} );
+success.args = {
+	level: 'success',
+	title: 'Your hovercraft has been upgraded.',
+	children: 'Please enjoy your newer, cooler hovercraft.',
+	onClose: () => alert( 'Close clicked' ),
+	actions: [
+		<Button key="start" isPrimary>
+			Start crafting
+		</Button>,
+	],
+	hideCloseButton: false,
+};
+
+export const error = Template.bind( {} );
+error.args = {
+	level: 'error',
+	title: 'The eels have stolen your hovercraft.',
+	children:
+		'We were unable to remove the eels from your hovercraft. Please contact the authorities, as the eels are armed and dangerous.',
+	onClose: () => alert( 'Close clicked' ),
+	actions: [
+		<ExternalLink key="learn-more" href="https://en.wikipedia.org/wiki/Eel">
+			Learn more
+		</ExternalLink>,
+	],
+	hideCloseButton: false,
+};

package/components/notice/style.module.scss

@@ -0,0 +1,107 @@
+.container {
+	display: flex;
+	align-items: flex-start;
+
+	font-size: var( --font-body );
+
+	border: 1px solid var( --jp-black );
+	border-radius: 4px;
+	border-color: var( --jp-gray-5 );
+	border-left-width: 6px;
+
+	padding: 24px 31px 27px 18px;
+}
+
+.icon-wrapper {
+	margin-right: 20px;
+	width: calc( var( --spacing-base ) * 3 );
+	height: calc( var( --spacing-base ) * 3 );
+}
+
+.close-button {
+	width: calc( var( --spacing-base ) * 3 );
+	height: calc( var( --spacing-base ) * 3 );
+
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+	outline: none;
+}
+
+// Mobile layout differences.
+@media screen and ( max-width: 600px ) {
+	.container {
+		position: relative;
+		padding-top: 68px;
+		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.06);
+	}
+
+	.icon-wrapper {
+		position: absolute;
+		top: 24px;
+		left: 24px;
+	}
+
+	.close-button {
+		position: absolute;
+		top: 24px;
+		right: 24px;
+	}
+}
+
+.main-content {
+	flex-grow: 1;
+}
+
+.title {
+	font-weight: 600;
+	margin-bottom: 8px;
+}
+
+.action-bar {
+	display: flex;
+	align-items: center;
+	margin-top: 20px;
+
+	a {
+		&, &:hover, &:active, &:focus {
+			color: var( --jp-black );
+		}
+	}
+
+	> * {
+		margin-right: 24px;
+	}
+}
+
+.is-error {
+	border-left-color: var( --jp-red );
+
+	.icon {
+		fill: var( --jp-red );
+	}
+}
+
+.is-warning {
+	border-left-color: var( --jp-yellow-20 );
+
+	.icon {
+		fill: var( --jp-yellow-20 );
+	}
+}
+
+.is-info {
+	border-left-color: var( --black );
+
+	.icon {
+		fill: var( --black );
+	}
+}
+
+.is-success {
+	border-left-color: var( --jp-green );
+
+	.icon {
+		fill: var( --jp-green );
+	}
+}

package/components/number-format/README.md

@@ -0,0 +1,25 @@
+numberFormat
+=========
+
+This utility function can be used to format numbers so they are displayed in the format expected for a specific locale.
+
+For example, a large number such as `123456` would be displayed as `123,456` in US English, and as `123 456` in FR French.
+
+The function relies on `Intl.NumberFormat` to format the numbers, based on the locale information available in WordPress, or based on the browser locale as a fallback.
+
+## General Usage:
+
+```js
+import { numberFormat } from '@automattic/jetpack-components';
+
+render() {
+	const number = '123456';
+	const options = {
+		notation: 'compact',
+		compactDisplay: 'short',
+	};
+	return (
+		<>{ numberFormat( number ) }</> // 123K
+	);
+}
+```

package/components/number-format/index.ts

@@ -0,0 +1,16 @@
+import { getUserLocale } from '../../lib/locale';
+
+/**
+ * Format a number using the locale in use by the user viewing the page.
+ *
+ * @param {number} number - The number to format.
+ * @param {Intl.NumberFormatOptions} options - The format options
+ * @returns {string} Formatted number.
+ */
+const numberFormat = ( number: number, options: Intl.NumberFormatOptions = {} ): string => {
+	const locale = getUserLocale();
+
+	return new Intl.NumberFormat( locale, options ).format( number );
+};
+
+export default numberFormat;

package/components/pricing-card/index.tsx

@@ -0,0 +1,127 @@
+import { getCurrencyObject } from '@automattic/format-currency';
+import { Button } from '@wordpress/components';
+import { sprintf, __ } from '@wordpress/i18n';
+import TermsOfService from '../terms-of-service';
+import type { PricingCardProps } from './types';
+import type { CurrencyObject } from '@automattic/format-currency/src/types';
+import type React from 'react';
+
+import './style.scss';
+
+/**
+ * Whether or not to display a price's decimal part in the UI.
+ * Needed as `getCurrencyObject` will always return the decimal part populated even if it
+ * doesn't exist.
+ *
+ * @param {CurrencyObject} currencyObject -- A currency object returned from `getCurrencyObject`.
+ * @returns {boolean} Whether or not to display the price decimal part.
+ */
+const showPriceDecimals = ( currencyObject: CurrencyObject ): boolean => {
+	return currencyObject.fraction.indexOf( '00' ) === -1;
+};
+
+/**
+ * The Pricing card component.
+ *
+ * @param {PricingCardProps} props -- The component props.
+ * @returns {React.ReactNode} The rendered component.
+ */
+const PricingCard: React.FC< PricingCardProps > = ( {
+	currencyCode = 'USD',
+	priceDetails = __( '/month, paid yearly', 'jetpack' ),
+	...props
+} ) => {
+	const currencyObjectBefore = getCurrencyObject( props.priceBefore, currencyCode );
+	const currencyObjectAfter = getCurrencyObject( props.priceAfter, currencyCode );
+
+	return (
+		<div className="jp-components__pricing-card">
+			{ props.icon && (
+				<div className="jp-components__pricing-card__icon">
+					{ 'string' === typeof props.icon ? (
+						<img
+							src={ props.icon }
+							alt={ sprintf(
+								/* translators: placeholder is a product name */
+								__( 'Icon for the product %s', 'jetpack' ),
+								props.title
+							) }
+						/>
+					) : (
+						props.icon
+					) }
+				</div>
+			) }
+			<h1 className="jp-components__pricing-card__title">{ props.title }</h1>
+			<div className="jp-components__pricing-card__pricing">
+				{ props.priceBefore !== props.priceAfter && (
+					<div className="jp-components__pricing-card__price-before">
+						<span className="jp-components__pricing-card__currency">
+							{ currencyObjectBefore.symbol }
+						</span>
+						<span className="jp-components__pricing-card__price">
+							{ currencyObjectBefore.integer }
+						</span>
+						{ showPriceDecimals( currencyObjectBefore ) && (
+							<span className="jp-components__pricing-card__price-decimal">
+								{ ' ' }
+								{ currencyObjectBefore.fraction }
+							</span>
+						) }
+						<div className="jp-components__pricing-card__price-strikethrough"></div>
+					</div>
+				) }
+				<div className="jp-components__pricing-card__price-after">
+					<span className="jp-components__pricing-card__currency">
+						{ currencyObjectAfter.symbol }
+					</span>
+					<span className="jp-components__pricing-card__price">
+						{ currencyObjectAfter.integer }
+					</span>
+					{ showPriceDecimals( currencyObjectAfter ) && (
+						<span className="jp-components__pricing-card__price-decimal">
+							{ currencyObjectAfter.fraction }
+						</span>
+					) }
+				</div>
+				<span className="jp-components__pricing-card__price-details">{ priceDetails }</span>
+			</div>
+
+			{ props.children && (
+				<div className="jp-components__pricing-card__extra-content-wrapper">{ props.children }</div>
+			) }
+
+			{ /*
+			 * Keep the option to pass custom terms of service text,
+			 * but by default, use the shared `TermsOfService` component
+			 * and pass the CTA button's text to it
+			 */ }
+			{ props.tosText && <div className="jp-components__pricing-card__tos">{ props.tosText }</div> }
+
+			{ props.ctaText && (
+				<>
+					{ ! props.tosText && (
+						<div className="jp-components__pricing-card__tos">
+							<TermsOfService agreeButtonLabel={ props.ctaText } />
+						</div>
+					) }
+					<div className="jp-components__pricing-card__cta">
+						<Button
+							className="jp-components__pricing-card__button"
+							label={ props.ctaText }
+							onClick={ props.onCtaClick }
+						>
+							{ props.ctaText }
+						</Button>
+					</div>
+				</>
+			) }
+
+			{ props.infoText && (
+				<div className="jp-components__pricing-card__info">{ props.infoText }</div>
+			) }
+		</div>
+	);
+};
+
+export default PricingCard;

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

@@ -0,0 +1,55 @@
+import { action } from '@storybook/addon-actions';
+import PricingCard from '../index';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+export default {
+	title: 'JS Packages/Components/Pricing Card',
+	component: PricingCard,
+	// TODO: Storybook Actions are not working. See https://github.com/storybookjs/storybook/issues/7215
+	argTypes: {
+		onCtaClick: { action: 'clicked' },
+	},
+} as ComponentMeta< typeof PricingCard >;
+
+// Export additional stories using pre-defined values
+const Template: ComponentStory< typeof PricingCard > = args => <PricingCard { ...args } />;
+
+const DefaultArgs = {
+	title: 'Jetpack Backup',
+	icon: "data:image/svg+xml,%3Csvg width='32' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m21.092 15.164.019-1.703v-.039c0-1.975-1.803-3.866-4.4-3.866-2.17 0-3.828 1.351-4.274 2.943l-.426 1.524-1.581-.065a2.92 2.92 0 0 0-.12-.002c-1.586 0-2.977 1.344-2.977 3.133 0 1.787 1.388 3.13 2.973 3.133H22.399c1.194 0 2.267-1.016 2.267-2.4 0-1.235-.865-2.19-1.897-2.368l-1.677-.29Zm-10.58-3.204a4.944 4.944 0 0 0-.201-.004c-2.75 0-4.978 2.298-4.978 5.133s2.229 5.133 4.978 5.133h12.088c2.357 0 4.267-1.97 4.267-4.4 0-2.18-1.538-3.99-3.556-4.339v-.06c0-3.24-2.865-5.867-6.4-5.867-2.983 0-5.49 1.871-6.199 4.404Z' fill='%23000'/%3E%3C/svg%3E",
+	priceBefore: 9,
+	priceAfter: 4.5,
+	ctaText: 'Get Jetpack Backup',
+	infoText:
+		'Special introductory pricing, all renewals are at full price. 14 day money back guarantee.',
+	onCtaClick: action( 'onCtaClick' ),
+};
+
+// Export Default story
+export const _default = Template.bind( {} );
+_default.args = DefaultArgs;
+
+export const Minimal = Template.bind( {} );
+Minimal.args = {
+	...DefaultArgs,
+	icon: null,
+	ctaText: null,
+	onCtaClick: null,
+	infoText: null,
+};
+
+const TemplateWithChildren = args => (
+	<PricingCard { ...args }>
+		<ul>
+			<li>Automated real-time backups</li>
+			<li>Easy one-click restores</li>
+			<li>Complete list of all site changes</li>
+			<li>Global server infrastructure</li>
+			<li>Best-in-class support</li>
+		</ul>
+	</PricingCard>
+);
+export const WithChildren = TemplateWithChildren.bind( {} );
+WithChildren.args = {
+	...DefaultArgs,
+};

package/components/pricing-card/style.scss

@@ -0,0 +1,112 @@
+@import '@automattic/jetpack-base-styles/style';
+
+.jp-components__pricing-card {
+	width: -moz-fit-content;
+	width: fit-content;
+	max-width: 384px;
+	padding: 24px 24px 32px;
+	background:var( --jp-white );
+	box-shadow: 0px 10px 40px rgba( 0, 0, 0, 0.08 );
+	border-radius: var( --jp-border-radius );
+
+	@media screen and ( min-width: 600px ) {
+		padding: 32px 32px 44px;
+	}
+
+	&__icon {
+		img {
+			height: 32px;
+			width: 32px;
+		}
+	}
+
+	&__title {
+		margin: 16px 0 24px;
+		color: #101517;
+		font-size: 32px;
+		line-height: 38px;
+	}
+
+	&__pricing {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	&__price-before,
+	&__price-after {
+		display: inline-block;
+		margin-bottom: 8px;
+		padding: 0 2px;
+		font-size: 54px;
+		font-weight: 700;
+		line-height: 40px;
+	}
+
+	&__price-before {
+		position: relative;
+		margin-right: 16px;
+		color: var( --jp-gray-20 );
+	}
+
+	&__price-strikethrough {
+		position: absolute;
+		width: 100%;
+		height: 3px;
+		left: 0px;
+		top: 20px;
+		background: var( --jp-pink );
+		border-radius: 1.5px;
+	}
+
+	&__price-after {
+		color: var( --jp-black );
+	}
+
+	&__currency {
+		vertical-align: super;
+		font-size: var( --font-title-small );
+		font-weight: 400;
+		line-height: 20px;
+	}
+
+	&__price-details {
+		align-self: flex-end;
+		margin-bottom: 8px;
+		font-size: 14px;
+		font-weight: 400;
+		line-height: 17px;
+		color: var( --jp-gray-50 );
+		letter-spacing: -0.02em;
+	}
+
+	&__price-decimal {
+		font-size: var( --font-label );
+		line-height: 14px;
+		vertical-align: top;
+	}
+
+	&__button {
+		width: 100%;
+		height: auto;
+		font-size: 18px;
+		background: var( --jp-black );
+		color: var( --jp-white ) !important;
+		border-radius: var( --jp-border-radius );
+		padding: 14px 24px;
+		margin: 24px 0px 32px;
+		justify-content: center;
+		align-items: center;
+	}
+
+	&__info,
+	&__tos {
+		font-size: var( --font-label );
+		line-height: 20px;
+		letter-spacing: -0.02em;
+		color: var( --jp-gray-60 );
+	}
+
+	&__tos {
+		margin-top: 24px;
+	}
+}

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

@@ -0,0 +1,89 @@
+import { jest } from '@jest/globals';
+import { render, screen, cleanup } from '@testing-library/react/pure';
+import PricingCard from '../index';
+
+// Note we're using @testing-library/react/pure here to disable the automatic cleanup.
+// So be sure to call `cleanup()` for each `render()`.
+/* eslint-disable testing-library/no-render-in-setup */
+
+describe( 'PricingCard', () => {
+	const testProps = {
+		title: 'Dummy Pricing Card',
+		icon: 'dummy_icon',
+		priceBefore: 9,
+		priceAfter: 4.5,
+		ctaText: 'Get Dummy Offer',
+		infoText: 'Dummy Info Text',
+		onCtaClick: jest.fn(),
+	};
+
+	describe( 'Initially', () => {
+		let container;
+
+		beforeAll( () => {
+			( { container } = render( <PricingCard { ...testProps } /> ) );
+		} );
+		afterAll( () => {
+			cleanup();
+		} );
+
+		it( 'renders the title', () => {
+			expect( screen.getByRole( 'heading' ) ).toHaveTextContent( 'Dummy Pricing Card' );
+		} );
+
+		it( 'renders the icon', () => {
+			const img = screen.getByAltText( 'Icon for the product Dummy Pricing Card' );
+			expect( img ).toBeInTheDocument();
+			expect( img ).toHaveAttribute( 'src', 'dummy_icon' );
+		} );
+
+		it( 'renders the price before', () => {
+			// eslint-disable-next-line testing-library/no-node-access
+			const node = container.querySelector( '.jp-components__pricing-card__price-before' );
+			expect( node ).toBeInTheDocument();
+			expect( node ).toHaveTextContent( '$9' );
+		} );
+
+		it( 'renders the price after', () => {
+			// eslint-disable-next-line testing-library/no-node-access
+			const node = container.querySelector( '.jp-components__pricing-card__price-after' );
+			expect( node ).toBeInTheDocument();
+			expect( node ).toHaveTextContent( '$4.50' );
+		} );
+
+		it( 'renders the CTA button', () => {
+			expect( screen.getByRole( 'button' ) ).toHaveTextContent( 'Get Dummy Offer' );
+		} );
+
+		it( 'renders the info text', () => {
+			// eslint-disable-next-line testing-library/no-node-access
+			const node = container.querySelector( '.jp-components__pricing-card__info' );
+			expect( node ).toBeInTheDocument();
+			expect( node ).toHaveTextContent( 'Dummy Info Text' );
+		} );
+	} );
+
+	describe( 'When price before and price after match', () => {
+		let container;
+
+		beforeAll( () => {
+			( { container } = render( <PricingCard { ...testProps } priceAfter={ 9 } /> ) );
+		} );
+		afterAll( () => {
+			cleanup();
+		} );
+
+		it( "doesn't render the price before", () => {
+			// eslint-disable-next-line testing-library/no-node-access
+			const node = container.querySelector( '.jp-components__pricing-card__price-before' );
+			expect( node ).not.toBeInTheDocument();
+		} );
+
+		it( 'renders the price after', () => {
+			// eslint-disable-next-line testing-library/no-node-access
+			const node = container.querySelector( '.jp-components__pricing-card__price-after' );
+			expect( node ).toBeInTheDocument();
+			expect( node ).toHaveTextContent( '$9' );
+		} );
+	} );
+} );

package/components/pricing-card/types.ts

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import type { Button } from '@wordpress/components';
+import type React from 'react';
+
+export type PricingCardProps = {
+	/**
+	 * The Title.
+	 */
+	title: string;
+	/**
+	 * The Icon.
+	 */
+	icon?: string | React.ReactNode;
+	/**
+	 * Price before discount.
+	 */
+	priceBefore: number;
+	/**
+	 * Price after discount.
+	 */
+	priceAfter: number;
+	/**
+	 * Price details.
+	 */
+	priceDetails?: string;
+	/**
+	 * The Currency code, eg 'USD'.
+	 */
+	currencyCode?: string;
+	/**
+	 * The CTA copy.
+	 */
+	ctaText?: string;
+	/**
+	 * The CTA callback to be called on click.
+	 */
+	onCtaClick?: React.ComponentProps< typeof Button >[ 'onClick' ];
+	/**
+	 * Optional informative text.
+	 */
+	infoText?: React.ReactNode;
+	/**
+	 * The TOS copy.
+	 */
+	tosText?: React.ReactNode;
+	/**
+	 * Optional Child nodes
+	 */
+	children?: React.ReactNode;
+};