@automattic/jetpack-components 0.41.2 → 0.42.0

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( {} );

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

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

@@ -1,52 +0,0 @@
-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/stories/index.stories.jsx

@@ -1,20 +0,0 @@
-/* eslint-disable react/react-in-jsx-scope */
-import React from 'react';
-import Spinner from '../index.jsx';
-
-export default {
-	title: 'JS Packages/Components/Spinner',
-	component: Spinner,
-	argTypes: {
-		color: { control: 'color' },
-	},
-	parameters: {
-		backgrounds: {
-			default: 'dark',
-		},
-	},
-};
-
-const Template = args => <Spinner { ...args } />;
-
-export const _default = Template.bind( {} );

package/components/spinner/test/component.jsx

@@ -1,17 +0,0 @@
-import { render } from '@testing-library/react';
-import Spinner from '../index';
-
-describe( 'Spinner', () => {
-	const testProps = {
-		className: 'sample-classname',
-	};
-
-	describe( 'Render the Spinner component', () => {
-		const { container } = render( <Spinner { ...testProps } /> );
-
-		it( 'validate the class name', () => {
-			// eslint-disable-next-line testing-library/no-node-access
-			expect( container.firstChild ).toHaveClass( 'sample-classname' );
-		} );
-	} );
-} );

package/components/split-button/stories/index.stories.tsx

@@ -1,35 +0,0 @@
-import SplitButton from '../index';
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-
-export default {
-	title: 'JS Packages/Components/Split Button',
-	component: SplitButton,
-	argTypes: {
-		variant: { type: 'select', options: [ undefined, 'secondary', 'primary', 'tertiary', 'link' ] },
-	},
-	args: {
-		controls: [
-			{
-				title: 'Add to cart',
-				icon: null,
-				onClick: () => null,
-			},
-			{
-				title: 'Add to wishlist',
-				icon: null,
-				onClick: () => null,
-			},
-		],
-	},
-	parameters: {
-		backgrounds: {
-			default: 'dark',
-		},
-	},
-} as ComponentMeta< typeof SplitButton >;
-
-const Template: ComponentStory< typeof SplitButton > = args => (
-	<SplitButton { ...args }>Buy now!</SplitButton>
-);
-
-export const _default = Template.bind( {} );

package/components/stat-card/stories/index.mdx

@@ -1,35 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/blocks';
-import StatCard from '../index';
-import * as StatCardStories from './index.stories';
-
-<Meta of={StatCardStories} />
-
-# StatCard
-
-Component that shows a stat value.
-
-## API
-
-### icon
-
-- type: `JSX.Element`
-
-### label
-
-- type: `string`
-
-### value
-
-- type: `number`
-
-### variant
-
-- type: `string`
-- default: `"square"`
-
-It accepts 2 values: `square` and `horizontal`.
-
-<Canvas withSource="open">
-  <Story id="js-packages-components-stat-card--default" />
-  <Story id="js-packages-components-stat-card--horizontal" />
-</Canvas>

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

@@ -1,41 +0,0 @@
-import { Icon, postList } from '@wordpress/icons';
-import StatCard from '..';
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-
-export default {
-	title: 'JS Packages/Components/Stat Card',
-	component: StatCard,
-	argTypes: {
-		variant: {
-			control: { type: 'radio' },
-			options: [ 'square', 'horizontal' ],
-		},
-		label: {
-			control: { type: 'text' },
-		},
-		value: {
-			control: { type: 'number' },
-		},
-		icon: {
-			table: {
-				disable: true,
-			},
-		},
-	},
-} as ComponentMeta< typeof StatCard >;
-
-const defaultArgs = {
-	icon: <Icon icon={ postList } color="green" />,
-	label: 'Posted this month',
-	value: 1806,
-};
-
-const Template: ComponentStory< typeof StatCard > = args => {
-	return <StatCard { ...args } />;
-};
-
-export const _default = Template.bind( {} );
-_default.args = defaultArgs;
-
-export const Horizontal = Template.bind( {} );
-Horizontal.args = { ...defaultArgs, variant: 'horizontal' };

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

@@ -1,24 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import StatCard from '../index';
-
-describe( 'StatCard', () => {
-	const testProps = {
-		icon: <div></div>,
-		label: 'Label',
-		value: 1806,
-	};
-
-	describe( 'when using the square variant', () => {
-		it( 'renders the compact value', () => {
-			render( <StatCard { ...testProps } variant="square" /> );
-			expect( screen.getByText( '1.8K' ) ).toBeInTheDocument();
-		} );
-	} );
-
-	describe( 'when using the horizontal variant', () => {
-		it( 'renders the full value', () => {
-			render( <StatCard { ...testProps } variant="horizontal" /> );
-			expect( screen.getByText( '1,806' ) ).toBeInTheDocument();
-		} );
-	} );
-} );

package/components/status/stories/index.stories.tsx

@@ -1,44 +0,0 @@
-import Status from '..';
-
-export default {
-	title: 'JS Packages/Components/Status',
-	component: Status,
-	parameters: {
-		layout: 'centered',
-	},
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Active = args => {
-	return <Status status="active" />;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Error = args => {
-	return <Status status="error" />;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const ActionNeeded = args => {
-	return <Status status="action" />;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Initializing = args => {
-	return <Status status="initializing" />;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Inactive = args => {
-	return <Status status="inactive" />;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const CustomLabel = args => {
-	return <Status label="Code is poetry" />;
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const NoLabel = args => {
-	return <Status status="active" label="" />;
-};

package/components/terms-of-service/test/index.test.jsx

@@ -1,52 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import TermsOfService from '..';
-
-describe( 'TermsofService', () => {
-	it( "references only 'the buttons above' if multipleButtons is true", () => {
-		render( <TermsOfService multipleButtons /> );
-		expect(
-			screen.getByText(
-				( content, { textContent } ) =>
-					content !== '' && // filter out parent/wrapper elements
-					textContent.startsWith(
-						`By clicking the buttons above, you agree to our Terms of Service`
-					)
-			)
-		).toBeInTheDocument();
-	} );
-
-	it( 'references the label of the agreement button if one is defined', () => {
-		const buttonLabel = 'The best button ever';
-
-		render( <TermsOfService agreeButtonLabel={ buttonLabel } /> );
-		expect(
-			screen.getByText(
-				( content, { textContent } ) =>
-					content !== '' && // filter out parent/wrapper elements
-					textContent.startsWith(
-						`By clicking the ${ buttonLabel } button, you agree to our Terms of Service`
-					)
-			)
-		).toBeInTheDocument();
-	} );
-
-	it( 'links to the Terms of Service document (single button)', () => {
-		render( <TermsOfService agreeButtonLabel={ 'whatever' } /> );
-		expect( screen.getByText( 'Terms of Service', { selector: 'a' } ) ).toBeInTheDocument();
-	} );
-
-	it( 'links to the Terms of Service document (multiple buttons)', () => {
-		render( <TermsOfService multipleButtons /> );
-		expect( screen.getByText( 'Terms of Service', { selector: 'a' } ) ).toBeInTheDocument();
-	} );
-
-	it( 'links to the data sharing document (single button)', () => {
-		render( <TermsOfService agreeButtonLabel={ 'whatever' } /> );
-		expect( screen.getByText( 'share details', { selector: 'a' } ) ).toBeInTheDocument();
-	} );
-
-	it( 'links to the data sharing document (multiple buttons)', () => {
-		render( <TermsOfService multipleButtons /> );
-		expect( screen.getByText( 'share details', { selector: 'a' } ) ).toBeInTheDocument();
-	} );
-} );

package/components/testimonials/test/component.tsx

@@ -1,103 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import Testimonials from '../index';
-import { Testimonial } from '../testimonial';
-
-const testimonials = [
-	{
-		quote: 'This is a quote',
-		author: 'John Doe',
-		profession: 'CEO',
-		img: 'https://via.placeholder.com/150',
-	},
-	{
-		quote: 'This is another quote',
-		author: 'Jane Doe',
-		profession: 'CTO',
-		img: 'https://via.placeholder.com/149',
-	},
-	{
-		quote: 'This is yet another quote',
-		author: 'Mary Doe',
-		profession: 'CFO',
-		img: 'https://via.placeholder.com/148',
-	},
-];
-
-describe( 'Testimonial', () => {
-	it( 'should render the testimonial', () => {
-		const { quote, author, profession } = testimonials[ 0 ];
-
-		render( <Testimonial { ...testimonials[ 0 ] } hidden={ false } /> );
-
-		expect( screen.getByText( `“${ quote }”` ) ).toBeInTheDocument();
-		expect( screen.getByText( author ) ).toBeInTheDocument();
-		expect( screen.getByText( profession ) ).toBeInTheDocument();
-		expect( screen.getByAltText( author ) ).toBeInTheDocument();
-	} );
-} );
-
-describe( 'Testimonials', () => {
-	it( 'should render the first testimonial on load', () => {
-		const { quote, author, profession } = testimonials[ 0 ];
-		render( <Testimonials testimonials={ testimonials } /> );
-
-		expect( screen.getByText( `“${ quote }”` ) ).toBeInTheDocument();
-		expect( screen.getByText( author ) ).toBeInTheDocument();
-		expect( screen.getByText( profession ) ).toBeInTheDocument();
-		expect( screen.getByAltText( author ) ).toBeInTheDocument();
-	} );
-
-	it( 'should render the next testimonial when the right arrow is clicked', () => {
-		const { author: secondAuthor } = testimonials[ 1 ];
-
-		render( <Testimonials testimonials={ testimonials } /> );
-
-		const rightArrow = screen.getByTestId( 'right-arrow' );
-		userEvent.click( rightArrow );
-
-		expect( screen.getByText( secondAuthor ) ).toBeInTheDocument();
-
-		userEvent.click( rightArrow );
-
-		const { author: thirdAuthor } = testimonials[ 2 ];
-
-		expect( screen.getByText( thirdAuthor ) ).toBeInTheDocument();
-
-		userEvent.click( rightArrow );
-
-		const { author } = testimonials[ 0 ];
-
-		expect( screen.getByText( author ) ).toBeInTheDocument();
-	} );
-
-	it( 'should render the previous testimonial when the left arrow is clicked', () => {
-		const { author: thirdAuthor } = testimonials[ 2 ];
-
-		render( <Testimonials testimonials={ testimonials } /> );
-
-		const leftArrow = screen.getByTestId( 'left-arrow' );
-		userEvent.click( leftArrow );
-
-		expect( screen.getByText( thirdAuthor ) ).toBeInTheDocument();
-
-		userEvent.click( leftArrow );
-
-		const { author: secondAuthor } = testimonials[ 1 ];
-
-		expect( screen.getByText( secondAuthor ) ).toBeInTheDocument();
-
-		userEvent.click( leftArrow );
-
-		const { author } = testimonials[ 0 ];
-
-		expect( screen.getByText( author ) ).toBeInTheDocument();
-	} );
-
-	it( 'should not render the arrows if there is only one testimonial', () => {
-		render( <Testimonials testimonials={ [ testimonials[ 0 ] ] } /> );
-
-		expect( screen.queryByTestId( 'left-arrow' ) ).not.toBeInTheDocument();
-		expect( screen.queryByTestId( 'right-arrow' ) ).not.toBeInTheDocument();
-	} );
-} );

package/components/text/stories/headings.index.stories.tsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import { H2, H3 } from '../index';
-import styles from './style.module.scss';
-import type { H3Props } from '../types';
-
-const TIPOGRAPHY_WEIGHTS: Array< H3Props[ 'weight' ] > = [ 'regular', 'bold' ];
-
-export default {
-	title: 'JS Packages/Components/Text/Heading',
-	component: H2,
-	argTypes: {
-		children: {
-			control: { type: 'text' },
-		},
-		weight: {
-			control: { type: 'select' },
-			options: TIPOGRAPHY_WEIGHTS,
-		},
-	},
-};
-
-/**
- * Helper component to create a the story.
- *
- * @param {object} props                   - Component props.
- * @param {React.Component} props.children - Icon component children.
- * @returns {React.Component}                Text component instance.
- */
-function Instance( { children } ) {
-	return (
-		<div className={ styles.instance }>
-			<span>Text above to the the component...</span>
-			{ children }
-			<span>Text below to the the component...</span>
-		</div>
-	);
-}
-
-const TemplateH2 = args => (
-	<Instance>
-		<H2 { ...args }>
-			{ args?.children ||
-				'Headline Medium - Manage your Jetpack plan and products all in one place' }
-		</H2>
-	</Instance>
-);
-
-const TemplateH3 = args => (
-	<Instance>
-		<H3 { ...args }>
-			{ args?.children ||
-				'Headline Small - Manage your Jetpack plan and products all in one place' }
-		</H3>
-	</Instance>
-);
-
-const Template = args => {
-	return (
-		<>
-			<TemplateH2 { ...args } />
-			<TemplateH3 { ...args } />
-		</>
-	);
-};
-
-const DefaultArgs = {};
-export const Default = Template.bind( {} );
-Default.args = DefaultArgs;
-
-export const HeadlineH2 = TemplateH2.bind( {} );
-HeadlineH2.storyName = 'H2';
-HeadlineH2.args = {
-	weight: 'bold',
-} as H3Props;
-
-export const HeadlineH3 = TemplateH3.bind( {} );
-HeadlineH3.storyName = 'H3';
-HeadlineH3.args = {
-	weight: 'bold',
-} as H3Props;