@automattic/jetpack-components 0.41.2 → 0.42.1

package/components/popover/index.tsx

@@ -0,0 +1,19 @@
+import './style.scss';
+
+type PopoverProps = {
+	action: React.ReactNode;
+	icon?: React.ReactNode;
+	children?: React.ReactNode;
+};
+
+const Popover: React.FC< PopoverProps > = ( { icon, children, action } ) => {
+	return (
+		<div className="jp-popover">
+			<div className="jp-popover__icon">{ icon }</div>
+			<div className="jp-popover__body">{ children }</div>
+			<div className="jp-popover__action">{ action }</div>
+		</div>
+	);
+};
+
+export default Popover;

package/components/popover/style.scss

@@ -0,0 +1,25 @@
+.jp-popover {
+	width: 600px;
+	max-width: calc( 100% - 32px );
+	padding: 16px;
+	background-color: #fff;
+	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 4px 8px 0px rgba(0, 0, 0, 0.03);
+	border: 1px solid rgba(220, 220, 222, 1);
+	border-radius: 4px;
+	text-align: center;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+
+	> * {
+		margin: 16px;
+		clear: both;
+	}
+
+	&__body p {
+		font-weight: 400;
+		line-height: 1.6em;
+		font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+	}
+}

package/index.ts

@@ -28,7 +28,7 @@ export { default as Gridicon } from './components/gridicon';
 export { default as IconTooltip } from './components/icon-tooltip';
 export { default as ActionButton } from './components/action-button';
 export { default as PricingCard } from './components/pricing-card';
-export { default as PricingSlider } from './components/pricing-slider';
+export { default as NumberSlider } from './components/number-slider';
 export { default as AdminSection } from './components/admin-section/basic';
 export { default as AdminSectionHero } from './components/admin-section/hero';
 export { default as AdminPage } from './components/admin-page';
@@ -63,6 +63,7 @@ export { default as RecordMeterBar } from './components/record-meter-bar';
 export { default as ContextualUpgradeTrigger } from './components/contextual-upgrade-trigger';
 export { default as Alert } from './components/alert';
 export { default as Notice } from './components/notice';
+export { default as Popover } from './components/popover';
 export { default as Status } from './components/status';
 export { default as IndeterminateProgressBar } from './components/indeterminate-progress-bar';
 export { default as ActionPopover } from './components/action-popover';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.41.2",
+	"version": "0.42.1",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,16 +15,16 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.7",
+		"@automattic/jetpack-boost-score-api": "^0.1.9",
 		"@babel/runtime": "^7",
-		"@wordpress/browserslist-config": "5.21.0",
-		"@wordpress/components": "25.4.0",
-		"@wordpress/compose": "6.15.0",
-		"@wordpress/data": "9.8.0",
-		"@wordpress/date": "4.38.0",
-		"@wordpress/element": "5.15.0",
-		"@wordpress/i18n": "4.38.0",
-		"@wordpress/icons": "9.29.0",
+		"@wordpress/browserslist-config": "5.24.0",
+		"@wordpress/components": "25.7.0",
+		"@wordpress/compose": "6.18.0",
+		"@wordpress/data": "9.11.0",
+		"@wordpress/date": "4.41.0",
+		"@wordpress/element": "5.18.0",
+		"@wordpress/i18n": "4.41.0",
+		"@wordpress/icons": "9.32.0",
 		"classnames": "2.3.2",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "3.1.0",
@@ -33,8 +33,8 @@
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.6",
-		"@babel/core": "7.22.9",
+		"@automattic/jetpack-base-styles": "^0.6.8",
+		"@babel/core": "7.22.11",
 		"@babel/preset-react": "7.22.5",
 		"@jest/globals": "29.4.3",
 		"@storybook/addon-actions": "7.1.0",

package/.gitattributes

@@ -1,8 +0,0 @@
-# Files not needed to be distributed in the package.
-.gitattributes    export-ignore
-node_modules      export-ignore
-
-# Files to exclude from the mirror repo
-/changelog/**     production-exclude
-/.eslintrc.cjs    production-exclude
-/jest.config.cjs  production-exclude

package/components/action-button/stories/index.stories.jsx

@@ -1,38 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import React from 'react';
-import ActionButton from '../index.jsx';
-
-export default {
-	title: 'JS Packages/Components/Action Button',
-	component: ActionButton,
-	// TODO: Storybook Actions are not working. See https://github.com/storybookjs/storybook/issues/7215
-	argTypes: {
-		onButtonClick: { action: 'clicked' },
-	},
-};
-
-// Export additional stories using pre-defined values
-const Template = args => <ActionButton { ...args } />;
-
-const DefaultArgs = {
-	onButtonClick: action( 'onButtonClick' ),
-	displayError: false,
-	isLoading: false,
-	label: 'Action!',
-};
-
-// Export Default story
-export const _default = Template.bind( {} );
-_default.args = DefaultArgs;
-
-export const Loading = Template.bind( {} );
-Loading.args = {
-	...DefaultArgs,
-	isLoading: true,
-};
-
-export const Errored = Template.bind( {} );
-Errored.args = {
-	...DefaultArgs,
-	displayError: true,
-};

package/components/action-button/test/component.jsx

@@ -1,16 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import ActionButton from '../index';
-
-describe( 'ActionButton', () => {
-	const testProps = {
-		label: 'Action!',
-	};
-
-	describe( 'Render the ActionButton component', () => {
-		render( <ActionButton { ...testProps } /> );
-
-		it( 'renders the register button', () => {
-			expect( screen.getByRole( 'button' ) ).toHaveTextContent( 'Action!' );
-		} );
-	} );
-} );

package/components/action-popover/stories/index.stories.jsx

@@ -1,115 +0,0 @@
-/**
- * External dependencies
- */
-import { action } from '@storybook/addon-actions';
-import { useState } from 'react';
-/**
- * Internal dependencies
- */
-import ActionPopover from '../index';
-import styles from './styles.module.scss';
-
-export default {
-	title: 'JS Packages/Components/Action Popover',
-	component: ActionPopover,
-	argTypes: {
-		hideCloseButton: {
-			control: { type: 'boolean' },
-		},
-		title: {
-			control: { type: 'text' },
-		},
-		children: {
-			control: { type: 'text' },
-		},
-		step: {
-			control: { type: 'number' },
-		},
-		totalSteps: {
-			control: { type: 'number' },
-		},
-		buttonContent: {
-			control: { type: 'text' },
-		},
-		buttonDisabled: {
-			control: { type: 'boolean' },
-		},
-		buttonHref: {
-			control: { type: 'text' },
-		},
-		buttonExternalLink: {
-			control: { type: 'boolean' },
-		},
-		offset: {
-			control: { type: 'number' },
-		},
-		position: {
-			control: {
-				type: 'select',
-			},
-			options: [
-				'top left',
-				'top right',
-				'top center',
-				'middle left',
-				'middle right',
-				'middle center',
-				'bottom left',
-				'bottom right',
-				'bottom center',
-			],
-		},
-		noArrow: {
-			control: { type: 'boolean' },
-		},
-		onClose: {
-			table: {
-				disable: true,
-			},
-		},
-		onClick: {
-			table: {
-				disable: true,
-			},
-		},
-	},
-};
-
-const Template = args => {
-	const [ anchor, setAnchor ] = useState( null );
-
-	return (
-		<>
-			<div className={ styles.wrapper }>
-				<div ref={ setAnchor }>⚓</div>
-			</div>
-
-			<ActionPopover { ...args } anchor={ anchor } />
-		</>
-	);
-};
-
-const defaultArgs = {
-	hideCloseButton: false,
-	title: 'Check this out',
-	children: 'Absque sudore et labore nullum opus perfectum est.',
-	step: null,
-	totalSteps: null,
-	buttonContent: 'Next',
-	buttonDisabled: false,
-	offset: 32,
-	position: 'top center',
-	noArrow: true,
-	onClose: () => action( 'close' )(),
-	onClick: () => action( 'click' )(),
-};
-
-export const _default = Template.bind( {} );
-_default.args = defaultArgs;
-
-export const WithSteps = Template.bind( {} );
-WithSteps.args = {
-	...defaultArgs,
-	step: 1,
-	totalSteps: 3,
-};

package/components/action-popover/stories/styles.module.scss

@@ -1,7 +0,0 @@
-.wrapper {
-	height: 100vh;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	background-color: var( --jp-gray-off );
-}

package/components/admin-page/stories/index.stories.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import JetpackLogo from '../../jetpack-logo/index';
-import Text from '../../text/index';
-import AdminPage from '../index';
-import styles from './style.module.scss';
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-
-export default {
-	title: 'JS Packages/Components/Admin Page',
-	component: AdminPage,
-	argTypes: {
-		moduleName: { control: 'text', defaultValue: 'Jetpack' },
-		showHeader: { control: 'boolean', defaultValue: true },
-		showFooter: { control: 'boolean', defaultValue: true },
-		showBackground: { control: 'boolean', defaultValue: true },
-	},
-} as ComponentMeta< typeof AdminPage >;
-
-// Export additional stories using pre-defined values
-const Template: ComponentStory< typeof AdminPage > = args => <AdminPage { ...args } />;
-
-// Export Default story
-export const _default = Template.bind( {} );
-
-export const CustomHeader = Template.bind( {} );
-CustomHeader.args = {
-	header: (
-		<div className={ styles[ 'custom-header' ] }>
-			<JetpackLogo height={ 40 } />
-			<Text className={ styles[ 'logo-title' ] } weight="regular">
-				Next Product is coming up
-			</Text>
-		</div>
-	),
-};

package/components/admin-page/stories/style.module.scss

@@ -1,13 +0,0 @@
-.custom-header {
-	display: flex;
-}
-
-.logo-title {
-	flex: 1;
-	line-height: 30px;
-	font-size: 30px;
-	margin-top: 2px;
-	margin-left: 4px;
-	font-weight: 300;
-	letter-spacing: 0.0625em;
-}

package/components/admin-section/stories/index.stories.tsx

@@ -1,60 +0,0 @@
-import AdminPage from '../../admin-page';
-import Col from '../../layout/col';
-import Container from '../../layout/container';
-import AdminSection from '../basic';
-import AdminSectionHero from '../hero';
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-
-export default {
-	title: 'JS Packages/Components/Admin Sections',
-} as ComponentMeta< typeof AdminSection >;
-
-// Export additional stories using pre-defined values
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory< typeof AdminSection > = args => (
-	<AdminPage>
-		<AdminSectionHero>
-			<Container>
-				<Col lg={ 12 } md={ 8 } sm={ 4 }>
-					<h1>Sample Hero section</h1>
-					<p>This is a sample Hero section</p>
-				</Col>
-			</Container>
-		</AdminSectionHero>
-		<AdminSection>
-			<Container>
-				<Col lg={ 12 } md={ 8 } sm={ 4 }>
-					<h2>Sample Section</h2>
-					<p>This is a sample section</p>
-				</Col>
-			</Container>
-		</AdminSection>
-	</AdminPage>
-);
-
-// Export Default story
-export const _default = Template.bind( {} );
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const onlyBasic = args => (
-	<AdminSection>
-		<Container>
-			<Col lg={ 12 } md={ 8 } sm={ 4 }>
-				<h2>Sample Section</h2>
-				<p>This is a sample section</p>
-			</Col>
-		</Container>
-	</AdminSection>
-);
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const onlyHero = args => (
-	<AdminSectionHero>
-		<Container>
-			<Col lg={ 12 } md={ 8 } sm={ 4 }>
-				<h2>Sample Hero Section</h2>
-				<p>This is a sample Hero section</p>
-			</Col>
-		</Container>
-	</AdminSectionHero>
-);

package/components/alert/stories/index.stories.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import Alert from '../index';
-
-export default {
-	title: 'JS Packages/Components/Alert',
-	component: Alert,
-	argTypes: {
-		level: {
-			control: {
-				type: 'select',
-			},
-			options: [ 'info', 'success', 'warning', 'error' ],
-		},
-	},
-};
-
-const Template = args => <Alert { ...args } />;
-
-export const _default = Template.bind( {} );
-_default.args = {
-	level: 'info',
-	children: "Don't forget to check your email for the latest news.",
-	showIcon: true,
-};

package/components/automattic-byline-logo/stories/index.stories.tsx

@@ -1,20 +0,0 @@
-import AutomatticBylineLogo from '../index';
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-
-export default {
-	title: 'JS Packages/Components/Automattic Byline Logo',
-	component: AutomatticBylineLogo,
-} as ComponentMeta< typeof AutomatticBylineLogo >;
-
-const Template: ComponentStory< typeof AutomatticBylineLogo > = args => (
-	<AutomatticBylineLogo { ...args } />
-);
-
-const DefaultArgs = {
-	title: 'Title',
-	height: '50px',
-	className: 'sample-classname',
-};
-
-export const _default = Template.bind( {} );
-_default.args = DefaultArgs;

package/components/automattic-byline-logo/test/component.tsx

@@ -1,28 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import AutomatticBylineLogo from '../index';
-
-describe( 'AutomatticBylineLogo', () => {
-	const testProps = {
-		className: 'sample-classname',
-	};
-
-	describe( 'Render the AutomatticBylineLogo component', () => {
-		it( 'validate the class name', () => {
-			const { container } = render( <AutomatticBylineLogo { ...testProps } /> );
-			// eslint-disable-next-line testing-library/no-node-access
-			expect( container.firstChild ).toHaveClass( 'sample-classname' );
-		} );
-
-		it( 'renders the default title', () => {
-			render( <AutomatticBylineLogo /> );
-
-			expect( screen.getByText( 'An Automattic Airline' ) ).toBeInTheDocument();
-		} );
-
-		it( 'renders the given title', () => {
-			render( <AutomatticBylineLogo title="An A8C Airline" /> );
-
-			expect( screen.getByText( 'An A8C Airline' ) ).toBeInTheDocument();
-		} );
-	} );
-} );

package/components/boost-score-bar/stories/index.stories.tsx

@@ -1,39 +0,0 @@
-import BoostScoreBar from '../index';
-import type { Meta } from '@storybook/react';
-
-const meta: Meta< typeof BoostScoreBar > = {
-	title: 'JS Packages/Components/Boost Score Bar',
-	component: BoostScoreBar,
-	argTypes: {
-		score: { control: 'range', min: 0, max: 100, defaultValue: 80 },
-		prevScore: { control: 'range', min: 0, max: 100 },
-		isLoading: { control: 'boolean' },
-		showPrevScores: { control: 'boolean' },
-		active: { control: 'boolean' },
-		scoreBarType: { control: 'radio', options: [ 'desktop', 'mobile' ] },
-		noBoostScoreTooltip: { control: 'text' },
-	},
-	decorators: [
-		Story => (
-			<div style={ { width: '80%', maxWidth: '1320px', margin: '200px auto', fontSize: '16px' } }>
-				<Story />
-			</div>
-		),
-	],
-};
-
-const defaultValues = {
-	score: 80,
-	prevScore: 70,
-	isLoading: false,
-	showPrevScores: true,
-	active: true,
-	scoreBarType: 'desktop',
-	noBoostScoreTooltip: 'No boost score',
-};
-
-export default meta;
-
-const Template = args => <BoostScoreBar { ...args } />;
-export const _default = Template.bind( {} );
-_default.args = defaultValues;

package/components/boost-score-bar/test/component.tsx

@@ -1,102 +0,0 @@
-/* eslint-disable testing-library/no-container */
-/* eslint-disable testing-library/no-node-access */
-import { render, screen } from '@testing-library/react';
-import BoostScoreBar from '..';
-import type { BoostScoreBarProps } from '../types';
-
-describe( 'BoostScrollBar', () => {
-	const defaultProps: BoostScoreBarProps = {
-		score: 80,
-		prevScore: 60,
-		scoreBarType: 'desktop',
-		active: true,
-		showPrevScores: true,
-		isLoading: false,
-		noBoostScoreTooltip: 'Test tooltip text',
-	};
-
-	it( 'renders the boost scroll bar when active is true', () => {
-		const { container } = render( <BoostScoreBar { ...defaultProps } /> );
-
-		// eslint-disable-next-line testing-library/no-node-access
-		expect( container.firstChild ).toHaveAttribute( 'class', 'jb-score-bar jb-score-bar--desktop' );
-	} );
-
-	it( 'does not render the boost scroll bar when active is false', () => {
-		const { container } = render( <BoostScoreBar { ...defaultProps } active={ false } /> );
-
-		// eslint-disable-next-line testing-library/no-node-access
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'does not render the tooltip when noBoostScoreTooltip is not provided', () => {
-		render( <BoostScoreBar { ...defaultProps } noBoostScoreTooltip={ undefined } /> );
-
-		expect( screen.queryByRole( 'tooltip' ) ).not.toBeInTheDocument();
-	} );
-
-	it( 'renders the tooltip with the correct text when noBoostScoreTooltip is provided', () => {
-		render( <BoostScoreBar { ...defaultProps } /> );
-
-		expect( screen.getByRole( 'tooltip' ) ).toHaveTextContent( 'Test tooltip text' );
-	} );
-
-	it( 'displays loading spinner when isLoading is true', () => {
-		const { container } = render( <BoostScoreBar { ...defaultProps } isLoading={ true } /> );
-
-		expect( container.querySelector( '.jb-score-bar__loading' ) ).toBeInTheDocument();
-	} );
-
-	it( 'does not display loading spinner when isLoading is false', () => {
-		const { container } = render( <BoostScoreBar { ...defaultProps } /> );
-
-		expect( container.querySelector( '.jb-score-bar__loading' ) ).not.toBeInTheDocument();
-	} );
-
-	it( 'renders mobile icon and text when scoreBarType is mobile', () => {
-		const { container } = render( <BoostScoreBar { ...defaultProps } scoreBarType="mobile" /> );
-
-		expect( screen.getByText( 'Mobile score' ) ).toBeInTheDocument();
-		expect( container.querySelector( '.gridicons-phone' ) ).toBeInTheDocument();
-	} );
-
-	it( 'renders desktop icon and text when scoreBarType is desktop', () => {
-		const { container } = render( <BoostScoreBar { ...defaultProps } /> );
-
-		expect( screen.getByText( 'Desktop score' ) ).toBeInTheDocument();
-		expect( container.querySelector( '.gridicons-computer' ) ).toBeInTheDocument();
-	} );
-
-	it( 'renders previous scores when showPrevScores is true', () => {
-		const { container } = render( <BoostScoreBar { ...defaultProps } /> );
-
-		const previousScoreContainer = container.querySelector( '.jb-score-bar__no_boost_score' );
-
-		expect( previousScoreContainer ).toBeInTheDocument();
-		expect( previousScoreContainer ).toHaveTextContent( '60' );
-	} );
-
-	it( 'does not render previous scores when showPrevScores is false', () => {
-		const { container } = render( <BoostScoreBar { ...defaultProps } showPrevScores={ false } /> );
-
-		expect( container.querySelector( '.jb-score-bar__no_boost_score' ) ).not.toBeInTheDocument();
-	} );
-
-	it( 'renders the correct score bar class when score is < 50', () => {
-		const { container } = render( <BoostScoreBar { ...defaultProps } score={ 40 } /> );
-
-		expect( container.querySelector( '.fill-bad' ) ).toBeInTheDocument();
-	} );
-
-	it( 'renders the correct score bar class when score is >= 50 and < 71', () => {
-		const { container } = render( <BoostScoreBar { ...defaultProps } score={ 60 } /> );
-
-		expect( container.querySelector( '.fill-mediocre' ) ).toBeInTheDocument();
-	} );
-
-	it( 'renders the correct score bar class when score is > 70', () => {
-		const { container } = render( <BoostScoreBar { ...defaultProps } /> );
-
-		expect( container.querySelector( '.fill-good' ) ).toBeInTheDocument();
-	} );
-} );