@automattic/jetpack-components 0.39.0

package/components/product-price/price.tsx

@@ -0,0 +1,35 @@
+import { getCurrencyObject } from '@automattic/format-currency';
+import classnames from 'classnames';
+import Text from '../text';
+import styles from './style.module.scss';
+import type { PriceProps } from './types';
+import type React from 'react';
+
+/**
+ * React component to render a Price composition.
+ *
+ * @param {PriceProps} props  - Component props.
+ * @returns {React.ReactNode} -Price react component.
+ */
+export const Price: React.FC< PriceProps > = ( { value, currency, isOff, hidePriceFraction } ) => {
+	const classNames = classnames( styles.price, 'product-price_price', {
+		[ styles[ 'is-not-off-price' ] ]: ! isOff,
+	} );
+
+	const { symbol, integer, fraction } = getCurrencyObject( value, currency );
+	const showPriceFraction = ! hidePriceFraction || ! fraction.endsWith( '00' );
+
+	return (
+		<Text className={ classNames } variant="headline-medium" component="p">
+			<Text className={ styles.symbol } component="sup" variant="title-medium">
+				{ symbol }
+			</Text>
+			{ integer }
+			{ showPriceFraction && (
+				<Text component="sup" variant="body-small" data-testid="PriceFraction">
+					<strong>{ fraction }</strong>
+				</Text>
+			) }
+		</Text>
+	);
+};

package/components/product-price/stories/index.stories.tsx

@@ -0,0 +1,33 @@
+import { CURRENCIES } from '@automattic/format-currency';
+import ProductPrice from '../';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+export default {
+	title: 'JS Packages/Components/Product Price',
+	component: ProductPrice,
+	argTypes: {
+		currency: {
+			control: { type: 'select' },
+			options: Object.keys( CURRENCIES ),
+		},
+	},
+} as ComponentMeta< typeof ProductPrice >;
+
+// Export additional stories using pre-defined values
+const Template: ComponentStory< typeof ProductPrice > = args => <ProductPrice { ...args } />;
+
+const DefaultArgs = {
+	currency: 'USD',
+	price: 24.92,
+	offPrice: 12.42,
+	showNotOffPrice: true,
+	isNotConvenientPrice: false,
+	hidePriceFraction: false,
+	hideDiscountLabel: false,
+	promoLabel: 'NEW',
+	legend: '/month, paid yearly',
+};
+
+// Export Default story
+export const _default = Template.bind( {} );
+_default.args = DefaultArgs;

package/components/product-price/style.module.scss

@@ -0,0 +1,69 @@
+.container {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	justify-content: flex-end;
+}
+
+.price-container {
+	flex-grow: 2;
+	flex-basis: 0;
+}
+
+.price {
+	display: inline-flex;
+	align-items: flex-start;
+	position: relative;
+
+	&:first-child {
+		margin-right: calc( var( --spacing-base ) * 2 );
+	}
+
+	&.is-not-off-price {
+		color: var( --jp-gray-20);
+
+		&:after {
+			content: " ";
+			display: block;
+			width: 100%;
+			height: 3px;
+			background: var( --jp-red);
+			border-radius: var( --jp-border-radius );
+			position: absolute;
+			top: 50%;
+			margin-top: -2px;
+			pointer-events: none;
+		}
+	}
+}
+.footer {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	justify-content: flex-start;
+	margin-bottom: calc( var( --spacing-base ) * 3 );
+}
+
+.legend {
+	color: var( --jp-gray-40 );
+	font-size: var(--font-body-small);
+	line-height: 20px;
+
+	&::after {
+		content: "\200B"; // Pseudo element to keep height
+	}
+}
+
+.promo-label {
+	background-color:  var( --jp-yellow-10);
+	border-radius: 4px;
+	padding-left: var( --spacing-base );
+	padding-right: var( --spacing-base );
+	font-weight: 600;
+	font-size: 13px;
+	margin-left: var( --spacing-base );
+}
+
+.symbol {
+	font-weight: 400;
+}

package/components/product-price/test/component.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react';
+import ProductPrice from '../index';
+
+describe( 'ProductPrice', () => {
+	const testProps = {
+		currency: 'USD',
+	};
+
+	describe( 'When not hiding the price fraction', () => {
+		describe( 'And the fraction is zero', () => {
+			it( 'does not render the price fraction', () => {
+				render( <ProductPrice { ...testProps } hidePriceFraction={ true } price={ 17.0 } /> );
+
+				expect( screen.queryByTestId( 'PriceFraction' ) ).not.toBeInTheDocument();
+			} );
+		} );
+
+		describe( 'And the fraction is not zero', () => {
+			it( 'renders the price fraction', () => {
+				render( <ProductPrice { ...testProps } hidePriceFraction={ false } price={ 17.1 } /> );
+
+				expect( screen.getByTestId( 'PriceFraction' ) ).toBeInTheDocument();
+			} );
+		} );
+	} );
+} );

package/components/product-price/types.ts

@@ -0,0 +1,73 @@
+export type ProductPriceProps = {
+	/**
+	 * Product price.
+	 */
+	price?: number;
+
+	/**
+	 * Product price with discount.
+	 */
+	offPrice?: number;
+
+	/**
+	 * Product currency code.
+	 */
+	currency?: string;
+
+	/**
+	 * Product legend.
+	 */
+	legend?: string;
+
+	/**
+	 * Show the not off price.
+	 */
+	showNotOffPrice?: boolean;
+
+	/**
+	 * Force the price as a not off price.
+	 */
+	isNotConvenientPrice?: boolean;
+
+	/**
+	 * Hides the price fraction if fraction is zero.
+	 */
+	hidePriceFraction?: boolean;
+
+	/**
+	 * Hides discount label
+	 */
+	hideDiscountLabel?: boolean;
+
+	/**
+	 * Custom promo label
+	 */
+	promoLabel?: string;
+
+	/**
+	 * Alternative legend with HTML syntax
+	 */
+	children?: React.ReactNode;
+};
+
+export type PriceProps = {
+	/**
+	 * Price value.
+	 */
+	value: number;
+
+	/**
+	 * Price currency code.
+	 */
+	currency: string;
+
+	/**
+	 * True when it is an off price.
+	 */
+	isOff: boolean;
+
+	/**
+	 * Hides the price fraction if fraction is zero.
+	 */
+	hidePriceFraction?: boolean;
+};

package/components/qr-code/Readme.md

@@ -0,0 +1,5 @@
+# <QRCode>
+
+Simple React component to render a QR Code.
+
+It acts as an abstraction layer of [react.qrcode](https://github.com/zpao/qrcode.react) component, allowing to change it on the fly if it becomes needed.

package/components/qr-code/index.tsx

@@ -0,0 +1,78 @@
+import QRCodeLib from 'qrcode.react';
+import type React from 'react';
+
+type QRCodeLibProps = React.ComponentProps< typeof QRCodeLib >;
+
+export type QRCodeProps = {
+	/**
+	 * The value to encode.
+	 */
+	value?: string;
+
+	/**
+	 * Background color of the QR code.
+	 */
+	bgColor?: string;
+
+	/**
+	 * Foreground color of the QR code.
+	 */
+	fgColor?: string;
+
+	/**
+	 * Error correction level of the QR code.
+	 */
+	level?: QRCodeLibProps[ 'level' ];
+
+	/**
+	 * Whether to include margin in the QR code.
+	 */
+	includeMargin?: boolean;
+
+	/**
+	 * Render the QR code as a `canvas` or `svg`.
+	 */
+	renderAs?: QRCodeLibProps[ 'renderAs' ];
+
+	/**
+	 * Size of the QR code.
+	 */
+	size?: number;
+
+	/**
+	 * Image settings for the QR code.
+	 */
+	imageSettings?: QRCodeLibProps[ 'imageSettings' ];
+};
+
+/**
+ * Renders a QR Code.
+ *
+ * @param {QRCodeProps} props - Component props
+ * @returns {React.ReactNode} - React component.
+ */
+const QRCode: React.FC< QRCodeProps > = ( {
+	value = 'https://jetpack.com',
+	bgColor,
+	fgColor,
+	level,
+	includeMargin,
+	imageSettings,
+	renderAs = 'canvas',
+	size = 248,
+} ) => {
+	return (
+		<QRCodeLib
+			value={ value }
+			size={ size }
+			bgColor={ bgColor }
+			fgColor={ fgColor }
+			level={ level }
+			includeMargin={ includeMargin }
+			imageSettings={ imageSettings }
+			renderAs={ renderAs }
+		/>
+	);
+};
+
+export default QRCode;

package/components/qr-code/stories/index.stories.tsx

@@ -0,0 +1,32 @@
+import QRCode from '../index';
+
+export default {
+	title: 'JS Packages/Components/QRCode',
+	component: QRCode,
+	argTypes: {
+		value: {
+			control: { type: 'text' },
+		},
+		size: {
+			control: { type: 'number' },
+		},
+		level: {
+			control: { type: 'select' },
+			options: [ 'L', 'M', 'Q', 'H' ],
+		},
+		fgColor: {
+			control: { type: 'color' },
+		},
+		bgColor: {
+			control: { type: 'color' },
+		},
+		renderAs: {
+			control: { type: 'select' },
+			options: [ 'canvas', 'svg' ],
+		},
+	},
+};
+
+const Template = args => <QRCode { ...args } />;
+
+export const _default = Template.bind( {} );

package/components/record-meter-bar/index.tsx

@@ -0,0 +1,135 @@
+import { __ } from '@wordpress/i18n';
+import React, { useMemo } from 'react';
+import numberFormat from '../number-format';
+
+import './style.scss';
+
+type RecordMeterBarItem = {
+	/**
+	 * Count for the given item
+	 */
+	count: number;
+	/**
+	 * Label to be used for the given item
+	 */
+	label: string;
+	/**
+	 * Color code for the background color for the item
+	 */
+	backgroundColor: string;
+};
+
+export type RecordMeterBarProps = {
+	/**
+	 * Total number of items for the record meter. If not provided, its is the sum of item.count of all items.
+	 */
+	totalCount?: number;
+	/**
+	 * The items to display in Record meter.
+	 */
+	items: Array< RecordMeterBarItem >;
+	/**
+	 * The formatting style for legend item display. If not provided, it defaults to showing legend label after count
+	 */
+	showLegendLabelBeforeCount?: boolean;
+	/**
+	 * The sort style for legend item. If not provided, it defaults to no sorting.
+	 */
+	sortByCount?: 'ascending' | 'descending';
+};
+
+/**
+ * Generate Record Meter bar
+ *
+ * @param {RecordMeterBarProps} props - Props
+ * @returns {React.ReactElement} - JSX element
+ */
+const RecordMeterBar: React.FC< RecordMeterBarProps > = ( {
+	totalCount,
+	items = [],
+	showLegendLabelBeforeCount = false,
+	sortByCount,
+} ) => {
+	const total = useMemo( () => {
+		// If total count is not given, then compute it from items' count
+		return (
+			totalCount ||
+			items.reduce( ( currentTotal, { count } ) => {
+				return currentTotal + count;
+			}, 0 )
+		);
+	}, [ items, totalCount ] );
+
+	const itemsToRender = useMemo( () => {
+		if ( sortByCount ) {
+			// create a new array because .sort() updates the array in place.
+			return [ ...items ].sort( ( a, z ) => {
+				return 'ascending' === sortByCount ? a.count - z.count : z.count - a.count;
+			} );
+		}
+		return items;
+	}, [ items, sortByCount ] );
+
+	return (
+		<div className="record-meter-bar">
+			<div className="record-meter-bar__items" aria-hidden="true">
+				{ itemsToRender.map( ( { count, label, backgroundColor } ) => {
+					const widthPercent = ( ( count / total ) * 100 ).toPrecision( 2 );
+					return (
+						<div key={ label } style={ { backgroundColor, flexBasis: `${ widthPercent }%` } }></div>
+					);
+				} ) }
+			</div>
+			<div className="record-meter-bar__legend" aria-hidden="true">
+				<ul className="record-meter-bar__legend--items">
+					{ itemsToRender.map( ( { count, label, backgroundColor } ) => {
+						const formattedCount = numberFormat( count );
+						return (
+							<li key={ label } className="record-meter-bar__legend--item">
+								<div
+									className="record-meter-bar__legend--item-circle"
+									style={ { backgroundColor } }
+								/>
+								{ ! showLegendLabelBeforeCount && (
+									<span>
+										<span className="record-meter-bar__legend--item-count">{ formattedCount }</span>
+										<span className="record-meter-bar__legend--item-label">{ label }</span>
+									</span>
+								) }
+								{ showLegendLabelBeforeCount && (
+									<span>
+										<span className="record-meter-bar__legend--item-label record-meter-bar__legend--item-label-first">
+											{ label }
+										</span>
+										<span className="record-meter-bar__legend--item-count">
+											({ formattedCount })
+										</span>
+									</span>
+								) }
+							</li>
+						);
+					} ) }
+				</ul>
+			</div>
+			<table className="screen-reader-text">
+				<caption>{ __( 'Summary of the records', 'jetpack' ) }</caption>
+				<tbody>
+					<tr>
+						<th scope="col">{ __( 'Record type', 'jetpack' ) }</th>
+						<th scope="col">{ __( 'Record count', 'jetpack' ) }</th>
+					</tr>
+					{ itemsToRender.map( ( { label, count } ) => {
+						return (
+							<tr key={ label }>
+								<td>{ label }</td>
+								<td>{ count }</td>
+							</tr>
+						);
+					} ) }
+				</tbody>
+			</table>
+		</div>
+	);
+};
+
+export default RecordMeterBar;

package/components/record-meter-bar/stories/index.stories.tsx

@@ -0,0 +1,39 @@
+import RecordMeterBar, { RecordMeterBarProps } from '../index';
+
+export default {
+	title: 'JS Packages/Components/RecordMeterBar',
+	component: RecordMeterBar,
+	argTypes: {
+		sortByCount: {
+			control: { type: 'select' },
+			options: [ undefined, 'ascending', 'descending' ],
+		},
+	},
+};
+
+const Template = args => <RecordMeterBar { ...args } />;
+
+const DefaultArgs: RecordMeterBarProps = {
+	items: [
+		{ count: 18, label: 'Posts', backgroundColor: '#00BA37' },
+		{ count: 30, label: 'Plugins', backgroundColor: '#3895BA' },
+		{ count: 52, label: 'Comments', backgroundColor: '#E68B28' },
+		{ count: 24, label: 'Authors', backgroundColor: '#3859BA' },
+	],
+};
+
+// Export Default story
+export const _default = Template.bind( {} );
+_default.args = DefaultArgs;
+
+export const WithTotalCount = Template.bind( {} );
+WithTotalCount.args = {
+	...DefaultArgs,
+	totalCount: 200,
+};
+
+export const LabelBeforeCount = Template.bind( {} );
+LabelBeforeCount.args = {
+	...DefaultArgs,
+	showLegendLabelBeforeCount: true,
+};

package/components/record-meter-bar/style.scss

@@ -0,0 +1,38 @@
+.record-meter-bar {
+	padding-block: 1em;
+
+	&__items {
+		height: 2rem;
+		display: flex;
+		border-radius: 1rem;
+		overflow: hidden;
+		margin-bottom: 2em;
+		background-color: var(--jp-gray-off);
+	}
+
+	&__legend {
+		&--items {
+			display: flex;
+			margin: 0;
+		}
+		&--item {
+			display: flex;
+			margin: 0;
+			margin-inline-end: 1em;
+			align-items: center;
+		}
+		&--item-circle {
+			width: 1rem;
+			height: 1rem;
+			display: inline-block;
+			margin-inline-end: 0.4em;
+			border-radius: 100%;
+		}
+		&--item-count {
+			margin-inline-end: 0.4em;
+		}
+		&--item-label-first {
+			margin-inline-end: 0.4em;
+		}
+	}
+}

package/components/record-meter-bar/test/component.tsx

@@ -0,0 +1,52 @@
+import { render, queryByAttribute } from '@testing-library/react';
+import RecordMeterBar, { RecordMeterBarProps } from '../index';
+
+const getRecordBarItems = ( container: HTMLElement ) => {
+	// eslint-disable-next-line testing-library/no-node-access
+	return queryByAttribute( 'class', container, 'record-meter-bar__items' ).children;
+};
+
+const getRecordBarLegendItems = ( container: HTMLElement ) => {
+	// eslint-disable-next-line testing-library/no-node-access
+	return queryByAttribute( 'class', container, 'record-meter-bar__legend--items' ).children;
+};
+
+describe( 'RecordMeterBar', () => {
+	const testProps: RecordMeterBarProps = {
+		items: [
+			{ count: 18, label: 'Posts', backgroundColor: '#00BA37' },
+			{ count: 30, label: 'Plugins', backgroundColor: '#3895BA' },
+			{ count: 52, label: 'Comments', backgroundColor: '#E68B28' },
+			{ count: 24, label: 'Authors', backgroundColor: '#3859BA' },
+		],
+	};
+	it( 'renders nothing when no items are passed', () => {
+		const { container } = render( <RecordMeterBar items={ [] } /> );
+
+		expect( getRecordBarItems( container ) ).toHaveLength( 0 );
+	} );
+
+	it( 'renders the bar when NO totalCount is passed', () => {
+		const { container } = render( <RecordMeterBar { ...testProps } /> );
+
+		expect( getRecordBarItems( container ) ).toHaveLength( 4 );
+	} );
+
+	it( 'renders the bar when totalCount IS passed', () => {
+		const { container } = render( <RecordMeterBar { ...testProps } totalCount={ 200 } /> );
+
+		expect( getRecordBarItems( container ) ).toHaveLength( 4 );
+	} );
+
+	it( 'renders the legend when NO totalCount is passed', () => {
+		const { container } = render( <RecordMeterBar { ...testProps } /> );
+
+		expect( getRecordBarLegendItems( container ) ).toHaveLength( 4 );
+	} );
+
+	it( 'renders the legend when totalCount IS passed', () => {
+		const { container } = render( <RecordMeterBar { ...testProps } totalCount={ 200 } /> );
+
+		expect( getRecordBarLegendItems( container ) ).toHaveLength( 4 );
+	} );
+} );

package/components/spinner/README.md

@@ -0,0 +1,28 @@
+# Spinner (DEPRECATED)
+
+## We encourage to use [core Spinner](https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/spinner#readme) component instead
+---------
+
+Spinner is a React component for rendering a loading indicator.
+
+## Usage
+
+```jsx
+import React from 'react';
+import Spinner from '@automattic/jetpack-components';
+
+export default class extends React.Component {
+	render() {
+		return <Spinner />;
+	}
+}
+```
+
+## Props
+
+The following props can be passed to the Spinner component:
+
+| PROPERTY  | TYPE     | REQUIRED | DEFAULT   | DESCRIPTION                                     |
+| --------- | -------- | -------- | --------- | ----------------------------------------------- |
+| **size**  | _number_ | no       | `20`      | The width and height of the spinner, in pixels. |
+| **color** | _strong_ | no       | `#000000` | The color of the spinner, in hex.               |

package/components/spinner/index.jsx

@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import './style.scss';
+
+const Spinner = props => {
+	const className = props.className + ' jp-components-spinner';
+
+	const styleOuter = {
+		width: props.size,
+		height: props.size,
+		fontSize: props.size, // allows border-width to be specified in em units
+		borderTopColor: props.color,
+	};
+
+	const styleInner = {
+		borderTopColor: props.color,
+		borderRightColor: props.color,
+	};
+
+	return (
+		<div className={ className }>
+			<div className="jp-components-spinner__outer" style={ styleOuter }>
+				<div className="jp-components-spinner__inner" style={ styleInner } />
+			</div>
+		</div>
+	);
+};
+
+Spinner.propTypes = {
+	/** The spinner color. */
+	color: PropTypes.string,
+	/** CSS class names. */
+	className: PropTypes.string,
+	/** The spinner size. */
+	size: PropTypes.number,
+};
+
+Spinner.defaultProps = {
+	color: '#FFFFFF',
+	className: '',
+	size: 20,
+};
+
+export default Spinner;