@automattic/jetpack-components 0.39.0

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

@@ -0,0 +1,115 @@
+/**
+ * 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

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

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

@@ -0,0 +1,49 @@
+.wrapper {
+	width: 304px;
+	min-height: 230px;
+	padding: calc( var( --spacing-base ) * 3 ); // 24px;
+	display: flex;
+	flex-direction: column;
+
+	.header {
+		display: flex;
+		margin-bottom: calc( var( --spacing-base ) * 2 ); // 16px
+		justify-content: space-between;
+
+		.title {
+			max-width: 226px;
+		}
+	
+		.close-button {
+			height: calc( var( --spacing-base ) * 3 ); // 24px
+			width: calc( var( --spacing-base ) * 3 ); // 24px
+			min-width: unset;
+			color: var( --jp-gray-90 );
+			background-color: var( --jp-white );
+			flex-shrink: 0;
+
+			&:hover:not(:focus) {
+				box-shadow: none;
+			}
+		}
+	}
+
+	.footer {
+		height: calc( var( --spacing-base ) * 6 ); // 48px
+		margin-top: calc( var( --spacing-base ) * 2 ); // 16px
+		display: flex;
+		justify-content: flex-end;
+		align-items: flex-end;
+		flex-grow: 1;
+
+		.steps {
+			color: var( --jp-gray-60 );
+			flex-grow: 1;
+			margin-bottom: var( --spacing-base );
+		}
+
+		.action-button {
+			flex-shrink: 0;
+		}
+	}
+}

package/components/action-popover/types.ts

@@ -0,0 +1,20 @@
+/**
+ * Types
+ */
+import type { Popover } from '@wordpress/components';
+
+export type ActionPopoverProps = React.ComponentProps< typeof Popover > & {
+	anchor?: Element;
+	offset?: number;
+} & {
+	hideCloseButton?: boolean;
+	title: string;
+	children: React.ReactNode;
+	step?: number;
+	totalSteps?: number;
+	buttonContent?: React.ReactNode;
+	buttonDisabled?: boolean;
+	buttonHref?: string;
+	buttonExternalLink?: boolean;
+	onClick?(): void;
+};

package/components/admin-page/index.tsx

@@ -0,0 +1,58 @@
+import { __ } from '@wordpress/i18n';
+import classNames from 'classnames';
+import JetpackFooter from '../jetpack-footer';
+import JetpackLogo from '../jetpack-logo';
+import Col from '../layout/col';
+import Container from '../layout/container';
+import styles from './style.module.scss';
+import type { AdminPageProps } from './types';
+import type React from 'react';
+
+/**
+ * This is the base structure for any admin page. It comes with Header and Footer.
+ *
+ * All content must be passed as children wrapped in as many <AdminSection> elements as needed.
+ *
+ * @param {AdminPageProps} props - Component properties.
+ * @returns {React.ReactNode} AdminPage component.
+ */
+const AdminPage: React.FC< AdminPageProps > = ( {
+	children,
+	moduleName = __( 'Jetpack', 'jetpack' ),
+	moduleNameHref,
+	a8cLogoHref,
+	showHeader = true,
+	showFooter = true,
+	showBackground = true,
+	header,
+} ) => {
+	const rootClassName = classNames( styles[ 'admin-page' ], {
+		[ styles.background ]: showBackground,
+	} );
+
+	return (
+		<div className={ rootClassName }>
+			{ showHeader && (
+				<Container horizontalSpacing={ 5 }>
+					<Col>{ header ? header : <JetpackLogo /> }</Col>
+				</Container>
+			) }
+			<Container fluid horizontalSpacing={ 0 }>
+				<Col>{ children }</Col>
+			</Container>
+			{ showFooter && (
+				<Container horizontalSpacing={ 5 }>
+					<Col>
+						<JetpackFooter
+							moduleName={ moduleName }
+							a8cLogoHref={ a8cLogoHref }
+							moduleNameHref={ moduleNameHref }
+						/>
+					</Col>
+				</Container>
+			) }
+		</div>
+	);
+};
+
+export default AdminPage;

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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,13 @@
+.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-page/style.module.scss

@@ -0,0 +1,11 @@
+.admin-page {
+	margin-left: -20px; // to neutralize the padding of #wpcontent.
+
+	@media (max-width: 782px) {
+		margin-left: -10px; // to neutralize the padding of #wpcontent.
+	}
+
+	&.background {
+		background-color: var(--jp-white);
+	}
+}

package/components/admin-page/types.ts

@@ -0,0 +1,41 @@
+export type AdminPageProps = {
+	/**
+	 * The page content
+	 */
+	children: React.ReactNode;
+
+	/**
+	 * Link for 'An Automattic Airline' in the footer.
+	 */
+	a8cLogoHref?: string;
+
+	/**
+	 * Name of the module, e.g. 'Jetpack Search' that will be displayed in the footer.
+	 */
+	moduleName?: string;
+
+	/**
+	 * Whether or not to display the Header
+	 */
+	showHeader?: boolean;
+
+	/**
+	 * Custom header. Optional
+	 */
+	header?: React.ReactNode;
+
+	/**
+	 * Whether or not to display the Footer
+	 */
+	showFooter?: boolean;
+
+	/**
+	 * Link that the Footer Module name will link to (optional).
+	 */
+	moduleNameHref?: string;
+
+	/**
+	 * Whether or not to display the Background Color
+	 */
+	showBackground?: boolean;
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './style.module.scss';
+import type { AdminSectionBaseProps } from '../types';
+
+/**
+ * This is the wrapper component to build sections within your admin page.
+ *
+ * @param {AdminSectionBaseProps} props - Component properties.
+ * @returns {React.ReactNode} AdminSection component.
+ */
+const AdminSection: React.FC< AdminSectionBaseProps > = ( { children } ) => {
+	return <div className={ styles.section }>{ children }</div>;
+};
+
+export default AdminSection;

package/components/admin-section/basic/style.module.scss

@@ -0,0 +1,3 @@
+.section {
+	background-color: var(--jp-white);
+}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './style.module.scss';
+import type { AdminSectionBaseProps } from '../types';
+
+/**
+ * The wrapper component for a Hero Section to be used in admin pages.
+ *
+ * @param {AdminSectionBaseProps} props - Component properties.
+ * @returns {React.Component} AdminSectionHero component.
+ */
+const AdminSectionHero: React.FC< AdminSectionBaseProps > = ( { children } ) => {
+	return <div className={ styles[ 'section-hero' ] }>{ children }</div>;
+};
+
+export default AdminSectionHero;

package/components/admin-section/hero/style.module.scss

@@ -0,0 +1,3 @@
+.section-hero {
+	background: var( --jp-white-off );
+}

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

@@ -0,0 +1,60 @@
+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/admin-section/types.ts

@@ -0,0 +1,6 @@
+export type AdminSectionBaseProps = {
+	/**
+	 * The section content
+	 */
+	children: React.ReactNode;
+};

package/components/alert/index.tsx

@@ -0,0 +1,61 @@
+import { Icon, warning, info, check } from '@wordpress/icons';
+import classNames from 'classnames';
+import React from 'react';
+import styles from './style.module.scss';
+
+type AlertProps = {
+	/** The severity of the alert. */
+	level: 'error' | 'warning' | 'info' | 'success';
+
+	/** Show/Hide icon */
+	showIcon?: boolean;
+
+	/** Children to be rendered inside the alert. */
+	children: React.ReactNode;
+};
+
+const getIconByLevel = ( level: AlertProps[ 'level' ] ) => {
+	switch ( level ) {
+		case 'error':
+			return warning;
+		case 'warning':
+			return warning;
+		case 'info':
+			return info;
+		case 'success':
+			return check;
+		default:
+			return warning;
+	}
+};
+
+/**
+ * Alert component
+ *
+ * @param {object} props                   - The component properties.
+ * @param {string} props.level             - The alert level: error, warning, info, success.
+ * @param {boolean} props.showIcon         - Whether to show the alert icon.
+ * @param {React.Component} props.children - The alert content.
+ * @returns {React.ReactElement}             The `Alert` component.
+ */
+const Alert: React.FC< AlertProps > = ( { level, children, showIcon } ) => {
+	const classes = classNames( styles.container, styles[ `is-${ level }` ] );
+
+	return (
+		<div className={ classes }>
+			{ showIcon && (
+				<div className={ styles[ 'icon-wrapper' ] }>
+					<Icon icon={ getIconByLevel( level ) } className={ styles.icon } />
+				</div>
+			) }
+			<div>{ children }</div>
+		</div>
+	);
+};
+
+Alert.defaultProps = {
+	level: 'warning',
+	showIcon: true,
+};
+
+export default Alert;

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

@@ -0,0 +1,24 @@
+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/alert/style.module.scss

@@ -0,0 +1,43 @@
+.container {
+	display: flex;
+	font-size: var( --font-body );
+	line-height: calc( var( --spacing-base ) * 3 );
+	min-height: calc( var( --spacing-base ) * 3 );
+	align-items: center;
+	margin: calc( var( --spacing-base ) * 2 ) 0;
+}
+
+.icon-wrapper {
+	margin-right: calc( var( --spacing-base ) / 2 );
+	width: calc( var( --spacing-base ) * 3 );
+	height: calc( var( --spacing-base ) * 3 );
+	align-self: flex-start;
+}
+
+.is-error {
+	color: var( --jp-red );
+	.icon {
+		fill: var( --jp-red );
+	}
+}
+
+.is-warning {
+	color: var( --jp-yellow-40 );
+	.icon {
+		fill: var( --jp-yellow-40 );
+	}
+}
+
+.is-info {
+	color: var( --jp-blue-40 );
+	.icon {
+		fill: var( --jp-blue-40 );
+	}
+}
+
+.is-success {
+	color: var( --jp-green );
+	.icon {
+		fill: var( --jp-green );
+	}
+}

package/components/automattic-byline-logo/README.md

@@ -0,0 +1,16 @@
+# Automattic Byline Logo
+
+Component that renders the stylish `AN AUTOMATTIC AIRLINE`.
+It takes width and height properties but defaults to 7 in height.
+
+#### How to use:
+
+```js
+<AutomatticBylineLogo height={ 7 } className="jp-automattic-byline-logo-jetpack" />
+```
+
+#### Props
+
+- `className`: String - (default only: `jp-automattic-byline-logo`) the additional class name set on the SVG element.
+- `height`: Number - (default: 8) set the height of the title.
+- `title`: String - (default: `AN AUTOMATTIC AIRLINE`) title of the SVG.

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

@@ -0,0 +1,38 @@
+import { __ } from '@wordpress/i18n';
+import classnames from 'classnames';
+import React from 'react';
+import { AutomatticBylineLogoProps } from './types';
+
+/**
+ * Automattic "By line" Logo component.
+ *
+ * @param {AutomatticBylineLogoProps} props - Component properties.
+ * @returns {React.ReactNode} AutomatticBylineLogo component.
+ */
+const AutomatticBylineLogo: React.FC< AutomatticBylineLogoProps > = ( {
+	title = __( 'An Automattic Airline', 'jetpack' ),
+	height = 7,
+	className,
+	...otherProps
+} ) => {
+	return (
+		<svg
+			role="img"
+			x="0"
+			y="0"
+			viewBox="0 0 935 38.2"
+			enableBackground="new 0 0 935 38.2"
+			aria-labelledby="jp-automattic-byline-logo-title"
+			height={ height }
+			className={ classnames( 'jp-automattic-byline-logo', className ) }
+			{ ...otherProps }
+		>
+			<desc id="jp-automattic-byline-logo-title">{ title }</desc>
+			<path d="M317.1 38.2c-12.6 0-20.7-9.1-20.7-18.5v-1.2c0-9.6 8.2-18.5 20.7-18.5 12.6 0 20.8 8.9 20.8 18.5v1.2C337.9 29.1 329.7 38.2 317.1 38.2zM331.2 18.6c0-6.9-5-13-14.1-13s-14 6.1-14 13v0.9c0 6.9 5 13.1 14 13.1s14.1-6.2 14.1-13.1V18.6zM175 36.8l-4.7-8.8h-20.9l-4.5 8.8h-7L157 1.3h5.5L182 36.8H175zM159.7 8.2L152 23.1h15.7L159.7 8.2zM212.4 38.2c-12.7 0-18.7-6.9-18.7-16.2V1.3h6.6v20.9c0 6.6 4.3 10.5 12.5 10.5 8.4 0 11.9-3.9 11.9-10.5V1.3h6.7V22C231.4 30.8 225.8 38.2 212.4 38.2zM268.6 6.8v30h-6.7v-30h-15.5V1.3h37.7v5.5H268.6zM397.3 36.8V8.7l-1.8 3.1 -14.9 25h-3.3l-14.7-25 -1.8-3.1v28.1h-6.5V1.3h9.2l14 24.4 1.7 3 1.7-3 13.9-24.4h9.1v35.5H397.3zM454.4 36.8l-4.7-8.8h-20.9l-4.5 8.8h-7l19.2-35.5h5.5l19.5 35.5H454.4zM439.1 8.2l-7.7 14.9h15.7L439.1 8.2zM488.4 6.8v30h-6.7v-30h-15.5V1.3h37.7v5.5H488.4zM537.3 6.8v30h-6.7v-30h-15.5V1.3h37.7v5.5H537.3zM569.3 36.8V4.6c2.7 0 3.7-1.4 3.7-3.4h2.8v35.5L569.3 36.8 569.3 36.8zM628 11.3c-3.2-2.9-7.9-5.7-14.2-5.7 -9.5 0-14.8 6.5-14.8 13.3v0.7c0 6.7 5.4 13 15.3 13 5.9 0 10.8-2.8 13.9-5.7l4 4.2c-3.9 3.8-10.5 7.1-18.3 7.1 -13.4 0-21.6-8.7-21.6-18.3v-1.2c0-9.6 8.9-18.7 21.9-18.7 7.5 0 14.3 3.1 18 7.1L628 11.3zM321.5 12.4c1.2 0.8 1.5 2.4 0.8 3.6l-6.1 9.4c-0.8 1.2-2.4 1.6-3.6 0.8l0 0c-1.2-0.8-1.5-2.4-0.8-3.6l6.1-9.4C318.7 11.9 320.3 11.6 321.5 12.4L321.5 12.4z" />
+			<path d="M37.5 36.7l-4.7-8.9H11.7l-4.6 8.9H0L19.4 0.8H25l19.7 35.9H37.5zM22 7.8l-7.8 15.1h15.9L22 7.8zM82.8 36.7l-23.3-24 -2.3-2.5v26.6h-6.7v-36H57l22.6 24 2.3 2.6V0.8h6.7v35.9H82.8z" />
+			<path d="M719.9 37l-4.8-8.9H694l-4.6 8.9h-7.1l19.5-36h5.6l19.8 36H719.9zM704.4 8l-7.8 15.1h15.9L704.4 8zM733 37V1h6.8v36H733zM781 37c-1.8 0-2.6-2.5-2.9-5.8l-0.2-3.7c-0.2-3.6-1.7-5.1-8.4-5.1h-12.8V37H750V1h19.6c10.8 0 15.7 4.3 15.7 9.9 0 3.9-2 7.7-9 9 7 0.5 8.5 3.7 8.6 7.9l0.1 3c0.1 2.5 0.5 4.3 2.2 6.1V37H781zM778.5 11.8c0-2.6-2.1-5.1-7.9-5.1h-13.8v10.8h14.4c5 0 7.3-2.4 7.3-5.2V11.8zM794.8 37V1h6.8v30.4h28.2V37H794.8zM836.7 37V1h6.8v36H836.7zM886.2 37l-23.4-24.1 -2.3-2.5V37h-6.8V1h6.5l22.7 24.1 2.3 2.6V1h6.8v36H886.2zM902.3 37V1H935v5.6h-26v9.2h20v5.5h-20v10.1h26V37H902.3z" />
+		</svg>
+	);
+};
+
+export default AutomatticBylineLogo;

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

@@ -0,0 +1,20 @@
+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;