@automattic/onboarding 1.0.0

package/src/navigator/navigator-listener/index.tsx

@@ -0,0 +1,12 @@
+import { useNavigatorListener, OnNavigatorPathChange } from '../hooks';
+
+interface Props {
+	onNavigatorPathChange?: OnNavigatorPathChange;
+}
+
+const NavigatorListener = ( { onNavigatorPathChange }: Props ) => {
+	useNavigatorListener( onNavigatorPathChange );
+	return null;
+};
+
+export default NavigatorListener;

package/src/navigator/navigator-screen/index.tsx

@@ -0,0 +1,24 @@
+import {
+	__experimentalNavigatorScreen as BaseNavigatorScreen,
+	__experimentalUseNavigator as useNavigator,
+} from '@wordpress/components';
+import type { ComponentProps } from 'react';
+
+type Props = ComponentProps< typeof BaseNavigatorScreen > & {
+	partialMatch?: boolean;
+};
+
+/**
+ * A wrapper of the NavigatorScreen to support matching the path partially.
+ */
+const NavigatorScreen = ( { partialMatch, ...props }: Props ) => {
+	const { location } = useNavigator();
+
+	if ( partialMatch && location.path?.startsWith( props.path ) ) {
+		return props.children;
+	}
+
+	return <BaseNavigatorScreen { ...props } />;
+};
+
+export default NavigatorScreen;

package/src/navigator/navigator-screens/hooks/index.tsx

@@ -0,0 +1,2 @@
+export { default as useNavigatorButtons } from './use-navigator-buttons';
+export { default as useNavigatorScreens } from './use-navigator-screens';

package/src/navigator/navigator-screens/hooks/use-navigator-buttons.tsx

@@ -0,0 +1,32 @@
+import { NavigatorButtonAsItem } from '../../navigator-buttons';
+import NavigatorItemGroup from '../../navigator-item-group';
+import type { NavigatorScreenObject } from '../types';
+
+const useNavigatorButtons = ( screens: NavigatorScreenObject[] ) => {
+	if ( screens.length === 0 ) {
+		return null;
+	}
+
+	if ( screens.length === 1 ) {
+		return screens[ 0 ].content;
+	}
+
+	return (
+		<NavigatorItemGroup>
+			{ screens.map( ( { slug, checked, icon, label, path, onSelect } ) => (
+				<NavigatorButtonAsItem
+					key={ path }
+					checked={ checked }
+					icon={ icon }
+					path={ path }
+					aria-label={ label }
+					onClick={ () => onSelect?.( slug ) }
+				>
+					{ label }
+				</NavigatorButtonAsItem>
+			) ) }
+		</NavigatorItemGroup>
+	);
+};
+
+export default useNavigatorButtons;

package/src/navigator/navigator-screens/hooks/use-navigator-screens.tsx

@@ -0,0 +1,57 @@
+import { Button, Gridicon } from '@automattic/components';
+import {
+	__experimentalNavigatorBackButton as NavigatorBackButton,
+	__experimentalNavigatorScreen as NavigatorScreen,
+} from '@wordpress/components';
+import { useTranslate } from 'i18n-calypso';
+import NavigatorHeader from '../../navigator-header';
+import type { NavigatorScreenObject } from '../types';
+
+const useNavigatorScreens = ( screens: NavigatorScreenObject[] ) => {
+	const translate = useTranslate();
+
+	return screens.map(
+		( {
+			slug,
+			path,
+			label,
+			title,
+			description,
+			hideBack,
+			content,
+			actionText,
+			onSubmit,
+			onBack,
+		} ) => (
+			<NavigatorScreen key={ path } path={ path } style={ { animationDuration: '0s' } }>
+				<>
+					<NavigatorHeader
+						title={ <>{ title ?? label }</> }
+						description={ description }
+						hideBack={ hideBack }
+						onBack={ () => onBack?.( slug ) }
+					/>
+					{ content }
+					<div className="navigator-screen__footer">
+						<NavigatorBackButton
+							className="navigator-screen__footer-back-button"
+							as={ Button }
+							title={ translate( 'Back' ) }
+							borderless
+							aria-label={ translate( 'Navigate to the previous view' ) }
+							onClick={ () => onBack?.( slug ) }
+						>
+							<Gridicon icon="chevron-left" size={ 18 } />
+							{ translate( 'Back' ) }
+						</NavigatorBackButton>
+						<NavigatorBackButton as={ Button } primary onClick={ () => onSubmit?.( slug ) }>
+							{ actionText }
+						</NavigatorBackButton>
+					</div>
+				</>
+			</NavigatorScreen>
+		)
+	);
+};
+
+export default useNavigatorScreens;

package/src/navigator/navigator-screens/index.ts

@@ -0,0 +1,3 @@
+export * from './hooks';
+export { default as NavigatorScreens } from './navigator-screens';
+export * from './types';

package/src/navigator/navigator-screens/navigator-screens.scss

@@ -0,0 +1,60 @@
+@import "@automattic/typography/styles/variables";
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+
+.navigator-screen__footer {
+	display: flex;
+	position: fixed;
+	align-items: center;
+	justify-content: space-between;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 60px;
+	padding: 0 20px;
+	box-shadow: inset 0 1px 0 #e2e4e7;
+	box-sizing: border-box;
+	background-color: var(--studio-white);
+
+	a,
+	button {
+		border-radius: 4px;
+		box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
+	}
+
+	.navigator-screen__footer-back-button {
+		display: block;
+		color: #101517;
+		font-size: $font-body-small;
+		font-weight: 600;
+
+		svg.gridicon {
+			width: 20px;
+			height: 20px;
+			top: 5px;
+			margin-right: 2px;
+
+			.rtl & {
+				transform: scaleX(-1);
+			}
+		}
+	}
+
+	@include break-large {
+		display: flex;
+		flex-direction: column;
+		align-items: initial;
+		position: sticky;
+		height: auto;
+		gap: 8px;
+		padding: 32px 16px;
+		margin: 0 -16px;
+		box-shadow: none;
+		box-sizing: content-box;
+
+		.navigator-screen__footer-back-button {
+			display: none;
+		}
+	}
+}

package/src/navigator/navigator-screens/navigator-screens.tsx

@@ -0,0 +1,41 @@
+import {
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+} from '@wordpress/components';
+import NavigatorListener from '../navigator-listener';
+import { useNavigatorScreens } from './hooks';
+import type { NavigatorScreenObject } from './types';
+import './navigator-screens.scss';
+
+interface Props {
+	children: JSX.Element;
+	screens: NavigatorScreenObject[];
+	initialPath?: string;
+	onNavigatorPathChange?: ( path?: string ) => void;
+}
+
+const NavigatorScreens = ( {
+	children,
+	screens,
+	initialPath = '/',
+	onNavigatorPathChange,
+}: Props ) => {
+	const navigatorScreens = useNavigatorScreens( screens );
+
+	// We don't need navigator if there is only one screen
+	if ( screens.length === 1 ) {
+		return children;
+	}
+
+	return (
+		<NavigatorProvider initialPath={ initialPath }>
+			<NavigatorScreen path={ initialPath }>{ children }</NavigatorScreen>
+			{ navigatorScreens }
+			{ onNavigatorPathChange && (
+				<NavigatorListener onNavigatorPathChange={ onNavigatorPathChange } />
+			) }
+		</NavigatorProvider>
+	);
+};
+
+export default NavigatorScreens;

package/src/navigator/navigator-screens/types.ts

@@ -0,0 +1,15 @@
+export type NavigatorScreenObject = {
+	slug: string;
+	checked?: boolean;
+	icon?: JSX.Element;
+	label: string;
+	path: string;
+	title?: string;
+	description?: string;
+	hideBack?: boolean;
+	content: JSX.Element;
+	actionText: string;
+	onSelect?: ( slug: string ) => void;
+	onSubmit?: ( slug: string ) => void;
+	onBack?: ( slug: string ) => void;
+};

package/src/notice/index.tsx

@@ -0,0 +1,16 @@
+import { Icon, info } from '@wordpress/icons';
+import clsx from 'clsx';
+import * as React from 'react';
+
+import './style.scss';
+
+const Notice: React.FunctionComponent< { children: React.ReactNode } > = ( { children } ) => {
+	return (
+		<div className={ clsx( 'onboarding-notice' ) }>
+			<Icon icon={ info } size={ 28 } />
+			<p>{ children }</p>
+		</div>
+	);
+};
+
+export default Notice;

package/src/notice/style.scss

@@ -0,0 +1,19 @@
+.onboarding-notice {
+	display: flex;
+	color: var(--studio-gray-50);
+	font-size: 0.875em; /* stylelint-disable-line declaration-property-unit-allowed-list */
+	margin-bottom: 1.5em;
+
+	svg {
+		align-self: center;
+		fill: var(--color-warning-30);
+		flex-shrink: 0;
+		margin-inline-end: 1em;
+		transform: rotate(180deg);
+	}
+
+	p {
+		margin-bottom: 0;
+		line-height: 28px;
+	}
+}

package/src/progress/index.tsx

@@ -0,0 +1,23 @@
+import clsx from 'clsx';
+import * as React from 'react';
+
+import './style.scss';
+
+interface Props {
+	align?: 'center' | 'left' | 'right';
+	className?: string;
+	children: React.ReactNode;
+}
+
+const Progress = ( { className, align = 'center', children, ...additionalProps }: Props ) => {
+	return (
+		<div
+			className={ clsx( `onboarding-progress onboarding-progress__align-${ align }`, className ) }
+			{ ...additionalProps }
+		>
+			{ children }
+		</div>
+	);
+};
+
+export default Progress;

package/src/progress/style.scss

@@ -0,0 +1,34 @@
+.onboarding-progress {
+
+	&__align-center {
+		text-align: center;
+	}
+
+	&__align-right {
+		text-align: right;
+	}
+
+	&__align-left {
+		text-align: left;
+	}
+
+	.onboarding-title {
+		/* stylelint-disable-next-line scales/font-sizes */
+		font-size: 1.625rem; // 26px
+		margin-bottom: 2rem;
+	}
+
+	.onboarding-subtitle {
+		font-size: 0.875rem;
+		line-height: 1.5;
+
+		span {
+			color: var(--studio-gray-100);
+		}
+	}
+
+	.progress-bar {
+		margin-bottom: 1.5rem;
+		background: var(--studio-gray-10);
+	}
+}

package/src/select-card-checkbox/index.tsx

@@ -0,0 +1,38 @@
+import { CheckboxControl } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
+import clsx from 'clsx';
+import './style.scss';
+
+type SelectCardCheckboxProps = {
+	children: React.ReactNode;
+	className?: string;
+	onChange: ( checked: boolean ) => void;
+	checked: boolean;
+};
+
+const SelectCardCheckbox = ( {
+	children,
+	className,
+	onChange,
+	checked,
+}: SelectCardCheckboxProps ) => {
+	const instanceId = useInstanceId( CheckboxControl );
+	const id = `select-card-checkbox-${ instanceId }`;
+
+	return (
+		<div
+			className={ clsx( 'select-card-checkbox__container', className, {
+				'is-checked': checked,
+			} ) }
+			onClick={ () => onChange( ! checked ) }
+			role="presentation"
+		>
+			<CheckboxControl checked={ checked } id={ id } onChange={ onChange } />
+			<label className="select-card-checkbox__label" htmlFor={ id }>
+				{ children }
+			</label>
+		</div>
+	);
+};
+
+export default SelectCardCheckbox;

package/src/select-card-checkbox/style.scss

@@ -0,0 +1,30 @@
+.select-card-checkbox__container {
+	border: 1px solid #dcdcde;
+	border-radius: 4px;
+	padding: 17px 25px;
+	font-size: 0.875rem;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+
+	.select-card-checkbox__label {
+		pointer-events: none;
+		user-select: none;
+		display: flex;
+		align-items: center;
+	}
+
+	&.is-checked {
+		border: 2px solid #0675c4;
+		background: #f9fbfd;
+		padding: 16px 24px;
+	}
+
+	.components-base-control__field {
+		margin-bottom: 0;
+	}
+
+	.components-checkbox-control__input[type="checkbox"] {
+		border-color: #a7aaad;
+	}
+}

package/src/select-card-radio/index.tsx

@@ -0,0 +1,64 @@
+import clsx from 'clsx';
+import { useId, type FC, type ReactNode, ReactElement, useCallback } from 'react';
+import './style.scss';
+
+interface Option {
+	label: ReactNode;
+	description?: ReactNode;
+	value: string;
+	selected?: boolean;
+}
+
+interface SelectCardRadioProps {
+	option: Option;
+	onChange: ( value: Option[ 'value' ] ) => void;
+	name: string;
+	className?: string;
+}
+
+export const SelectCardRadio: FC< SelectCardRadioProps > = ( {
+	option,
+	onChange,
+	name,
+	className,
+} ) => {
+	const id = useId();
+
+	const handleChange = useCallback(
+		( event: React.ChangeEvent< HTMLInputElement > ) => {
+			onChange?.( event.target.value );
+		},
+		[ onChange ]
+	);
+
+	return (
+		<label
+			htmlFor={ `${ id }-radio` }
+			aria-labelledby={ `${ id }-info` }
+			className={ clsx( 'select-card-radio', className ) }
+		>
+			<input
+				type="radio"
+				className="select-card-radio__input"
+				id={ `${ id }-radio` }
+				value={ option.value }
+				defaultChecked={ option.selected }
+				onChange={ handleChange }
+				name={ name }
+			/>
+			<div className="select-card-radio__info" id={ `${ id }-info` }>
+				<span>{ option.label }</span>
+				<span className="select-card-radio__description">{ option.description }</span>
+			</div>
+		</label>
+	);
+};
+
+interface SelectCardRadioListProps {
+	className?: string;
+	children: ReactElement< typeof SelectCardRadio > | ReactElement< typeof SelectCardRadio >[];
+}
+
+export const SelectCardRadioList: FC< SelectCardRadioListProps > = ( { children, className } ) => {
+	return <div className={ clsx( 'select-card-radio__list', className ) }>{ children }</div>;
+};

package/src/select-card-radio/style.scss

@@ -0,0 +1,44 @@
+
+.select-card-radio {
+	border-radius: 4px;
+	border: 1px solid #dcdcde;
+	display: flex;
+	transition: all 0.15s ease-in-out;
+	padding: 24px 16px;
+	align-items: baseline;
+	font-weight: 500;
+	cursor: pointer;
+
+	&:hover {
+		border-color: var(--color-primary);
+	}
+
+	&:has(input:checked) {
+		border-color: var(--color-primary);
+		box-shadow: 0 0 0 2px var(--color-primary-10);
+		background-color: #f9fbfd;
+	}
+
+	.select-card-radio__info {
+		display: flex;
+		gap: 8px;
+		flex-direction: column;
+	}
+
+	.select-card-radio__description {
+		font-weight: normal;
+		text-wrap: pretty;
+	}
+
+	.select-card-radio__input {
+		margin-right: 16px;
+		appearance: auto;
+	}
+
+}
+
+.select-card-radio__list {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}

package/src/select-card-radio/test/index.tsx

@@ -0,0 +1,50 @@
+/**
+ * @jest-environment jsdom
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { SelectCardRadio } from '../';
+
+describe( 'SelectCardRadio', () => {
+	const option = {
+		label: 'Some label',
+		description: 'Some description',
+		value: 'some-value',
+	};
+
+	const defaultProps = {
+		option: option,
+		onChange: jest.fn(),
+		name: 'radio-name',
+	};
+
+	it( 'shows all available options', () => {
+		render( <SelectCardRadio { ...defaultProps } /> );
+
+		expect( screen.getByText( /Some label/ ) ).toBeVisible();
+		expect( screen.getByText( /Some description/ ) ).toBeVisible();
+	} );
+
+	it( 'starts with an option selected by default', () => {
+		const selectedOption = {
+			label: 'Selected',
+			description: 'Some description',
+			value: 'some-value',
+			selected: true,
+		};
+
+		render( <SelectCardRadio { ...defaultProps } option={ selectedOption } /> );
+
+		expect( screen.getByRole( 'radio', { name: /Selected/ } ) ).toBeChecked();
+	} );
+
+	it( 'trigges the onChange event when an option is selected', async () => {
+		const onChange = jest.fn();
+		render( <SelectCardRadio { ...defaultProps } onChange={ onChange } /> );
+
+		await userEvent.click( screen.getByRole( 'radio' ) );
+
+		expect( onChange ).toHaveBeenCalledWith( option.value );
+	} );
+} );

package/src/select-items/README.md

@@ -0,0 +1,13 @@
+# SelectItems
+
+Items used in the IntentScreen. They consist of a title, description, and icon.
+
+## Props
+
+- **key** _string_ - unique identifier for the item.
+- **title** _string_ - text to use as the header for the item.
+- **description** _string_ - text explaining the item, not translated or wrapped.
+- **icon**: _ReactElement_ - uses WordPress _Icon_ component and sets it to 24px
+- **value**: _string_ - passed to onClick/onSelect handler to identify the item.
+- **actionText**: _sring_ - text for the button.
+- **hidden**: _boolean_ - if true, item is hidden.

package/src/select-items/index.tsx

@@ -0,0 +1,90 @@
+import { Badge, Button } from '@automattic/components';
+import { Icon } from '@wordpress/icons';
+import clsx from 'clsx';
+import './style.scss';
+import { TranslateResult } from 'i18n-calypso';
+
+export interface SelectItem< T > {
+	key: string;
+	title: TranslateResult;
+	badge?: TranslateResult;
+	description: TranslateResult;
+	icon: React.ReactElement;
+	titleIcon?: React.ReactElement; // If titleIcon is set, it will show on the same line of title and, icon will be ignored
+	value: T;
+	actionText: TranslateResult | null;
+	hidden?: boolean;
+	isPrimary?: boolean;
+	allItemClickable?: boolean;
+}
+
+interface Props< T > {
+	className?: string;
+	items: SelectItem< T >[];
+	onSelect: ( value: T ) => void;
+	preventWidows: ( text: TranslateResult, wordsToKeep?: number ) => string;
+}
+
+function SelectItems< T >( { className, items, onSelect, preventWidows }: Props< T > ) {
+	return (
+		<div className={ clsx( 'select-items', className ) }>
+			{ items.map(
+				( {
+					key,
+					title,
+					badge,
+					description,
+					icon,
+					titleIcon,
+					actionText,
+					value,
+					isPrimary,
+					allItemClickable,
+				} ) => (
+					<div key={ key } className="select-items__item">
+						{ ! titleIcon && (
+							<Icon className="select-items__item-icon" icon={ icon } size={ 24 } />
+						) }
+						<div className="select-items__item-info-wrapper">
+							<div className="select-items__item-info">
+								<h2 className="select-items__item-title">
+									{ titleIcon && (
+										<Icon className="select-items__item-icon" icon={ titleIcon } size={ 24 } />
+									) }
+									<span className="select-items__item-title-text">{ preventWidows( title ) }</span>
+									{ badge && (
+										<span className="select-items__item-title-badge">
+											<Badge className="free-domain__primary-badge" type="info-green">
+												{ preventWidows( badge ) }
+											</Badge>
+										</span>
+									) }
+								</h2>
+								<div className="select-items__item-description">
+									{ preventWidows( description ) }
+								</div>
+							</div>
+							{ actionText && (
+								<Button
+									primary={ isPrimary }
+									className="select-items__item-button"
+									onClick={ () => onSelect( value ) }
+								>
+									{ actionText }
+								</Button>
+							) }
+						</div>
+						{ allItemClickable && (
+							<button
+								className="select-items__item-clickable"
+								onClick={ () => onSelect( value ) }
+							/>
+						) }
+					</div>
+				)
+			) }
+		</div>
+	);
+}
+
+export default SelectItems;