@automattic/jetpack-components 0.41.1 → 0.42.0

package/components/loading-placeholder/stories/index.stories.tsx

@@ -1,78 +0,0 @@
-/**
- * Internal dependencies
- */
-import LoadingPlaceholder from '..';
-/**
- * Types
- */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-
-export default {
-	title: 'JS Packages/Components/Loading Placeholder',
-	component: LoadingPlaceholder,
-	parameters: {
-		layout: 'centered',
-	},
-} as ComponentMeta< typeof LoadingPlaceholder >;
-
-const Template: ComponentStory< typeof LoadingPlaceholder > = args => (
-	<LoadingPlaceholder { ...args } />
-);
-
-export const Fluid = Template.bind( {} );
-Fluid.decorators = [
-	Story => (
-		<div
-			style={ {
-				width: '200px',
-				height: '300px',
-			} }
-		>
-			<Story />
-		</div>
-	),
-];
-
-Fluid.argTypes = {
-	width: {
-		table: {
-			disable: true,
-		},
-	},
-	height: {
-		table: {
-			disable: true,
-		},
-	},
-};
-
-Fluid.args = {
-	width: null,
-	height: null,
-};
-
-export const Fixed = Template.bind( {} );
-
-Fixed.args = {
-	width: 200,
-	height: 300,
-};
-
-Fixed.argTypes = {
-	width: {
-		control: {
-			type: 'range',
-			min: 0,
-			max: 500,
-			step: 1,
-		},
-	},
-	height: {
-		control: {
-			type: 'range',
-			min: 0,
-			max: 500,
-			step: 1,
-		},
-	},
-};

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

@@ -1,90 +0,0 @@
-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/pricing-card/stories/index.stories.tsx

@@ -1,55 +0,0 @@
-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/test/component.tsx

@@ -1,89 +0,0 @@
-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-slider/stories/index.stories.tsx

@@ -1,44 +0,0 @@
-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/test/component.tsx

@@ -1,14 +0,0 @@
-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-table/stories/index.stories.tsx

@@ -1,74 +0,0 @@
-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/test/component.tsx

@@ -1,41 +0,0 @@
-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
-	} );
-} );

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

@@ -1,104 +0,0 @@
-import ProductOffer from '..';
-import { IconsCard } from '../icons-card';
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-
-export default {
-	title: 'JS Packages/Components/Product Offer',
-	component: ProductOffer,
-	parameters: {
-		actions: { argTypesRegex: '^on.*' },
-		layout: 'centered',
-	},
-} as ComponentMeta< typeof ProductOffer >;
-
-const Template: ComponentStory< typeof ProductOffer > = args => <ProductOffer { ...args } />;
-
-export const SecurityBundle = Template.bind( {} );
-SecurityBundle.parameters = {};
-SecurityBundle.args = {
-	slug: 'security',
-	icon: '',
-	name: 'Security',
-	title: 'Security',
-	subTitle: '',
-	description: 'Comprehensive site security, including Backup, Scan, and Anti-spam.',
-	isBundle: true,
-	isCard: true,
-	supportedProducts: [ 'backup', 'scan', 'anti-spam' ],
-	features: [
-		'Real-time cloud backups with 10GB storage',
-		'Automated real-time malware scan',
-		'One-click fixes for most threats',
-		'Comment & form spam protection',
-	],
-	pricing: {
-		currency: 'USD',
-		price: 24.92,
-		offPrice: 12.42,
-	},
-	buttonText: '',
-	addProductUrl: '',
-	hasRequiredPlan: false,
-	isLoading: false,
-	error: '',
-};
-
-export const JetpackBackup = Template.bind( {} );
-JetpackBackup.parameters = {};
-JetpackBackup.args = {
-	slug: 'backup',
-	icon: '',
-	name: 'Backup',
-	title: 'Jepack Backup',
-	subTitle: '',
-	description:
-		'Never lose a word, image, page, or time worrying about your site with automated backups & one-click restores.',
-	features: [
-		'Real-time cloud backups',
-		'10GB of backup storage',
-		'30-day archive & activity log',
-		'One-click restores',
-	],
-	isBundle: false,
-	isCard: true,
-	pricing: {
-		currency: 'USD',
-		price: 9.66,
-		offPrice: 3.95,
-	},
-	addProductUrl: '',
-	hasRequiredPlan: false,
-	isLoading: false,
-};
-
-export const JetpackProtect = Template.bind( {} );
-JetpackProtect.parameters = {};
-JetpackProtect.args = {
-	slug: 'protect',
-	icon: 'jetpack',
-	title: 'Protect',
-	subTitle: 'Protect your site and scan for security vulnerabilities listed in our database.',
-	features: [
-		'Over 20,000 listed vulnerabilities',
-		'Daily automatic scans',
-		'Check plugin and theme version status',
-		'Easy to navigate and use',
-	],
-	isBundle: false,
-	isCard: true,
-	pricing: {
-		isFree: true,
-	},
-	addProductUrl: '',
-	hasRequiredPlan: false,
-	isLoading: false,
-};
-
-const IconsCardTemplate: ComponentStory< typeof IconsCard > = args => <IconsCard { ...args } />;
-
-export const IconsCardStory = IconsCardTemplate.bind( {} );
-IconsCardStory.parameters = {};
-IconsCardStory.args = {
-	products: [ 'backup', 'scan', 'anti-spam' ],
-};
-IconsCardStory.storyName = 'Icons Card';

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

@@ -1,33 +0,0 @@
-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/test/component.tsx

@@ -1,26 +0,0 @@
-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/qr-code/stories/index.stories.tsx

@@ -1,32 +0,0 @@
-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( {} );