@automattic/onboarding 1.0.0

package/src/step-container/style.scss

@@ -0,0 +1,304 @@
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+@import "../../styles/mixins.scss";
+
+/**
+ *	General
+ */
+.step-container {
+	max-width: 960px;
+	margin: 0 auto;
+
+	// Some steps (like plans) need a larger
+	// width column.
+	&.is-wide-layout {
+		max-width: 1040px;
+	}
+
+	// Some steps (like courses) have their width limitation
+	&.is-full-layout {
+		max-width: unset;
+	}
+
+	// Some steps (intent gathering) use a horizontal layout
+	&.is-horizontal-layout {
+		align-items: flex-start;
+		justify-content: space-between;
+		margin-top: 28px;
+		max-width: 1024px;
+		padding: 0 20px;
+
+		&.has-navigation {
+			padding-bottom: 60px;
+		}
+
+		@include break-small {
+			margin-top: 25vh;
+			display: flex;
+
+			.step-container__header {
+				margin-top: 0;
+				padding-inline-end: 20px;
+			}
+		}
+	}
+
+	.step-container__buttons {
+		text-align: center;
+		margin-bottom: 20px;
+	}
+
+	.step-container__skip-hr {
+		background: var(--color-primary-light);
+		max-width: 270px;
+		margin-bottom: 50px;
+		margin-top: -20px;
+
+		@include break-small {
+			margin: 30px auto;
+		}
+	}
+
+	.is-large-skip-layout .step-container__buttons {
+		margin-bottom: 34px;
+
+		@include break-small {
+			margin-bottom: 14px;
+		}
+	}
+
+	/**
+	 *	Header
+	 */
+	.step-container__header {
+		margin-bottom: 32px;
+		margin-top: 0;
+		display: block;
+		justify-content: space-between;
+		align-items: center;
+
+		.formatted-header {
+			margin: 0;
+			flex-grow: 1;
+
+			.formatted-header__title {
+				@include onboarding-font-recoleta;
+				color: var(--studio-gray-100);
+				letter-spacing: 0.2px;
+				font-size: 2.15rem; /* stylelint-disable-line scales/font-sizes */
+				font-weight: 400;
+				padding: 0;
+				margin: 0;
+
+				@include break-xlarge {
+					font-size: 2.75rem;
+				}
+			}
+
+			.formatted-header__subtitle {
+				padding: 0;
+				text-align: start;
+				color: var(--studio-gray-60);
+				font-size: 1rem;
+				margin-top: 16px;
+				line-height: 24px;
+
+				&.is-center-align {
+					text-align: center;
+				}
+
+				@include break-small {
+					margin-top: 8px;
+				}
+			}
+		}
+
+		.step-container__header-button {
+			@include break-small {
+				flex-basis: 100%;
+			}
+		}
+
+		.step-container__header-image {
+			margin-top: 64px;
+			display: none;
+
+			@include break-small {
+				display: block;
+
+				// Fix overflow caused by header_image
+				img {
+					height: auto;
+					max-width: 100%;
+				}
+			}
+		}
+
+		@include break-small {
+			flex-wrap: wrap;
+			margin-top: 24px;
+		}
+	}
+
+	/**
+	 *	Navigation
+	 */
+	.step-container__navigation {
+		pointer-events: none;
+		* {
+			pointer-events: auto;
+		}
+	}
+	.step-container__navigation.action-buttons {
+		background-color: $white;
+		height: 60px;
+		align-items: center;
+		justify-content: space-between;
+		display: flex;
+		font-size: 0.875rem;
+		position: fixed;
+		z-index: 30;
+		inset-inline-start: 0;
+		inset-inline-end: 0;
+		bottom: 0;
+		padding: 0 20px;
+		margin: 0;
+		border-top: none;
+		box-shadow: inset 0 1px 0 #e2e4e7;
+
+		&:empty {
+			display: none;
+		}
+
+		&.should-hide-nav-buttons {
+			justify-content: flex-end;
+		}
+
+		.step-container__navigation-link {
+			font-size: 0.875rem;
+			font-weight: 500;
+
+			&.button.is-primary {
+				border-radius: 4px;
+				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+			}
+
+			&.has-underline {
+				text-decoration: underline;
+			}
+
+			&.has-skip-heading {
+				transform: translateY(-3px);
+				// override unessecary super specificity added by another class
+				padding-top: 0 !important;
+			}
+		}
+
+		.step-container__navigation-link.forward,
+		.step-container__skip-wrapper {
+			margin-inline-start: auto;
+		}
+
+		.step-container__skip-heading {
+			color: var(--color-text-inverted);
+		}
+
+		.step-container__navigation-logo {
+			display: none;
+			// Align with wordpress logo in signup-header
+			margin-top: 1px;
+			margin-inline-end: 24px;
+			fill: var(--color-text);
+			stroke: var(--color-text);
+
+			@include break-small {
+				display: block;
+			}
+		}
+
+		@include break-small {
+			position: absolute;
+			top: 8px;
+			inset-inline-start: 72px;
+			inset-inline-end: 24px;
+			// Align with wordpress logo in signup-header
+			padding: 1px 0 0;
+			background-color: transparent;
+			border: none;
+			box-shadow: none;
+
+			&.should-sticky-nav-buttons {
+				position: fixed;
+				inset-inline-start: 0;
+				inset-inline-end: 0;
+				padding-inline-start: 24px;
+				padding-inline-end: 24px;
+				background-color: $white;
+			}
+
+			&.has-sticky-nav-buttons-padding {
+				padding-bottom: 48px;
+			}
+		}
+	}
+
+	/**
+	 *	Content
+	 */
+	.step-container__content {
+		margin-top: 0;
+		display: block;
+		min-height: 65vh;
+
+		@supports ( min-height: 65svh ) {
+			min-height: calc(65svh - 50px);
+		}
+	}
+
+	/**
+	 * Jetpack, Sensei and VideoPress Powered
+	 */
+	.step-container__jetpack-powered,
+	.step-container__header-jetpack-powered,
+	.step-container__woocommerce-powered,
+	.step-container__header-woocommerce-powered,
+	.step-container__sensei-powered,
+	.step-container__videopress-powered {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		text-align: center;
+		font-family: "SF Pro Text", $sans;
+		font-size: $font-body-extra-small;
+		font-weight: 400;
+		line-height: 20px;
+
+		svg {
+			margin-inline-end: 6px;
+		}
+	}
+
+	.step-container__jetpack-powered {
+		margin: 1rem 0;
+		width: 100%;
+	}
+
+	.step-container__header-jetpack-powered {
+		position: absolute;
+		top: 32px;
+		visibility: hidden;
+
+		@include break-small {
+			visibility: visible;
+		}
+	}
+
+	.step-container__sensei-powered {
+		padding-bottom: 24px;
+
+		svg {
+			margin-inline-end: 8px;
+		}
+	}
+}

package/src/step-navigation-link/index.tsx

@@ -0,0 +1,71 @@
+import { Button, Gridicon } from '@automattic/components';
+import clsx from 'clsx';
+import { TranslateResult, useTranslate } from 'i18n-calypso';
+import './style.scss';
+
+interface Props {
+	direction: 'back' | 'forward';
+	handleClick?: () => void;
+	label?: TranslateResult;
+	hasBackIcon?: boolean;
+	hasForwardIcon?: boolean;
+	primary?: boolean;
+	borderless?: boolean;
+	cssClass?: string;
+	rel?: string;
+	recordClick?: () => void;
+}
+
+const StepNavigationLink: React.FC< Props > = ( {
+	direction,
+	handleClick,
+	label,
+	hasBackIcon,
+	hasForwardIcon,
+	primary,
+	borderless = true,
+	cssClass,
+	rel,
+	recordClick,
+} ) => {
+	const translate = useTranslate();
+
+	let backGridicon;
+	let text;
+	let forwardGridicon;
+
+	if ( direction === 'back' ) {
+		backGridicon = hasBackIcon ? <Gridicon icon="chevron-left" size={ 18 } /> : null;
+		if ( label ) {
+			text = label;
+		} else {
+			text = translate( 'Back' );
+		}
+	} else if ( direction === 'forward' ) {
+		forwardGridicon = hasForwardIcon ? <Gridicon icon="chevron-right" size={ 18 } /> : null;
+		text = label ? label : translate( 'Skip for now' );
+	}
+
+	const buttonClasses = clsx( 'navigation-link', cssClass );
+
+	const onClick = () => {
+		recordClick?.();
+		handleClick?.();
+	};
+
+	return (
+		<Button
+			primary={ primary }
+			borderless={ borderless }
+			className={ buttonClasses }
+			onClick={ onClick }
+			rel={ rel }
+		>
+			{ backGridicon }
+			{ text }
+			{ forwardGridicon }
+		</Button>
+	);
+};
+
+export default StepNavigationLink;

package/src/step-navigation-link/style.scss

@@ -0,0 +1,42 @@
+$font-body-small: 14px !default;
+
+.button.navigation-link {
+	&.is-borderless {
+		background: none;
+		border: none;
+		color: #101517;
+		font-size: $font-body-small;
+		font-weight: 600;
+		padding: 0;
+
+		svg {
+			width: 20px;
+			height: 20px;
+			top: 5px;
+			margin-right: 2px;
+			fill: #101517;
+			.rtl & {
+				transform: scaleX(-1);
+			}
+		}
+	}
+
+	&.has-underline {
+		text-decoration: underline;
+	}
+
+	&.is-primary {
+		border-radius: 4px;
+		box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
+		background-color: #117ac9;
+		border-color: #117ac9;
+		color: var(--color-text-inverted);
+		padding: 8px 14px;
+	}
+}
+
+.navigation-link--has-skip-heading {
+	//override unessecary super specificity added by another class
+	padding-top: 0 !important;
+	transform: translateY(-3px);
+}

package/src/titles/index.tsx

@@ -0,0 +1,36 @@
+import clsx from 'clsx';
+import * as React from 'react';
+
+import './styles.scss';
+
+type AllowedTagNames = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+interface TitlesProps {
+	className?: string;
+	tagName?: AllowedTagNames;
+	children?: string | React.ReactNode;
+}
+
+/* eslint-disable wpcalypso/jsx-classname-namespace */
+export const Title: React.FunctionComponent< TitlesProps > = ( {
+	className,
+	children,
+	tagName = 'h1',
+	...rest
+} ) =>
+	React.createElement(
+		tagName,
+		{ className: clsx( 'onboarding-title', className ), ...rest },
+		children
+	);
+
+export const SubTitle: React.FunctionComponent< TitlesProps > = ( {
+	className,
+	children,
+	tagName = 'h2',
+	...rest
+} ) =>
+	React.createElement(
+		tagName,
+		{ className: clsx( 'onboarding-subtitle', className ), ...rest },
+		children
+	);

package/src/titles/styles.scss

@@ -0,0 +1,29 @@
+@import "../../styles/variables.scss";
+@import "../../styles/mixins.scss";
+
+.onboarding-title {
+	@include onboarding-heading-text-mobile;
+	color: var(--mainColor);
+	margin: 0;
+
+	@include break-mobile {
+		@include onboarding-heading-text-tablet;
+	}
+
+	@include break-xlarge {
+		@include onboarding-heading-text;
+	}
+}
+
+.onboarding-subtitle {
+	@include onboarding-large-text;
+	font-family: $default-font;
+	font-weight: normal;
+	letter-spacing: 0.2px;
+	color: var(--studio-gray-60);
+	margin: 5px 0 0;
+
+	@include break-small {
+		margin-top: 0;
+	}
+}

package/src/types.d.ts

@@ -0,0 +1 @@
+declare const __i18n_text_domain__: string;

package/src/upload-and-set-site-logo.ts

@@ -0,0 +1,38 @@
+import wpcomRequest from 'wpcom-proxy-request';
+
+export async function uploadAndSetSiteLogo( siteId: string | number | undefined, file: File ) {
+	const formData = [ [ 'media[]', file ] ];
+	// first upload the image
+	const uploadResult = await wpcomRequest< {
+		media?: [
+			{
+				ID: number;
+				URL: string;
+			},
+		];
+	} >( {
+		path: `/sites/${ encodeURIComponent( siteId as string ) }/media/new`,
+		apiVersion: '1.1',
+		formData,
+		method: 'POST',
+	} );
+
+	// then update the site settings to the uploaded image
+	if ( uploadResult.media?.length ) {
+		const imageID = uploadResult.media[ 0 ].ID;
+		const logoResult = await wpcomRequest< {
+			id: number;
+			url: string;
+		} >( {
+			path: `/sites/${ encodeURIComponent( siteId as string ) }/settings`,
+			apiVersion: 'v2',
+			apiNamespace: 'wp/v2',
+			// we know the site doesn't have a logo nor an icon, let's set both
+			body: { site_logo: imageID, site_icon: imageID },
+			query: 'source=onboarding',
+			method: 'POST',
+		} );
+		return { logoResult, uploadResult };
+	}
+	throw new Error( 'No image ID returned' );
+}

package/src/utils/contrastChecker.ts

@@ -0,0 +1,52 @@
+export type RGB = {
+	r: number;
+	g: number;
+	b: number;
+};
+
+// Default background color of Lettre theme
+const LETTRE_THEME_SITE_BACKGROUND_COLOR_RGB = { r: 255, g: 255, b: 255 };
+// Minimum contrast ratio as per WCAG standards "at least 4.5:1 for normal text"
+const MIN_CONTRAST_RATIO = 1 / 4.5;
+
+const luminance = ( { r, g, b }: RGB ) => {
+	const a = [ r, g, b ].map( function ( v ) {
+		v /= 255;
+		return v <= 0.03928 ? v / 12.92 : Math.pow( ( v + 0.055 ) / 1.055, 2.4 );
+	} );
+	return a[ 0 ] * 0.2126 + a[ 1 ] * 0.7152 + a[ 2 ] * 0.0722;
+};
+
+const colorContrastRatio = ( color1luminance: number, color2luminance: number ) =>
+	color1luminance > color2luminance
+		? ( color2luminance + 0.05 ) / ( color1luminance + 0.05 )
+		: ( color1luminance + 0.05 ) / ( color2luminance + 0.05 );
+
+export const hasMinContrast = (
+	textColorRgb: RGB,
+	bgColorRgb = LETTRE_THEME_SITE_BACKGROUND_COLOR_RGB,
+	minContrastRatio = MIN_CONTRAST_RATIO
+): boolean => {
+	const textColorLuminance = luminance( textColorRgb );
+	const bgColorLuminance = luminance( bgColorRgb );
+	const contrast = colorContrastRatio( textColorLuminance, bgColorLuminance );
+	return contrast <= minContrastRatio;
+};
+
+// Works also with shorthand hex triplets such as "#03F"
+export const hexToRgb = ( hex: string ) => {
+	const rgbHex = hex
+		.replace(
+			/^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i,
+			( _m, r, g, b, a ) => '#' + r + r + g + g + b + b + ( a ? a + a : '' )
+		)
+		.substring( 1 )
+		.match( /.{2}/g );
+
+	if ( rgbHex?.length !== 3 && rgbHex?.length !== 4 ) {
+		throw 'Unexpected RGB hex value';
+	}
+
+	const [ r, g, b, a ] = rgbHex.map( ( x ) => parseInt( x, 16 ) );
+	return { r, g, b, a };
+};

package/src/utils/domain-suggester.ts

@@ -0,0 +1,126 @@
+// Taken from: https://www.gmass.co/domains
+// These cover ~88% of email addresses.
+const validDomains = [
+	'gmail.com',
+	'yahoo.com',
+	'hotmail.com',
+	'aol.com',
+	'outlook.com',
+	'comcast.net',
+	'icloud.com',
+	'msn.com',
+	'hotmail.co.uk',
+	'sbcglobal.net',
+];
+
+// Skip suggestions for these domains
+const avoidList = [ 'mail.com', 'ymail.com', 'email.com' ];
+
+// This function extracts the domain from an email address.
+export const extractDomainWithExtension = ( email: string ) => {
+	if ( email ) {
+		email = email.toLowerCase();
+		const atIndex = email.indexOf( '@' );
+		if ( atIndex !== -1 ) {
+			return email.slice( atIndex + 1 );
+		}
+	}
+	return;
+};
+
+// This function replaces the domain in an email address with a new domain.
+const replaceEmailDomain = ( email: string, newDomain: string ) => {
+	if ( email && newDomain ) {
+		email = email.toLowerCase();
+		const atIndex = email.indexOf( '@' );
+		if ( atIndex !== -1 ) {
+			const username = email.substring( 0, atIndex );
+			return username + '@' + newDomain;
+		}
+	}
+	return email;
+};
+
+// This function calculates the Levenshtein distance between two strings.
+// It is used to determine how similar two strings are.
+// For example, the distance between "kitten" and "sitting" is 3.
+const calculateLevenshteinDistance = ( str1: string, str2: string ) => {
+	const m = str1.length;
+	const n = str2.length;
+	const dp = Array.from( Array( m + 1 ), () => Array( n + 1 ).fill( 0 ) );
+
+	for ( let i = 0; i <= m; i++ ) {
+		dp[ i ][ 0 ] = i;
+	}
+
+	for ( let j = 0; j <= n; j++ ) {
+		dp[ 0 ][ j ] = j;
+	}
+
+	for ( let i = 1; i <= m; i++ ) {
+		for ( let j = 1; j <= n; j++ ) {
+			if ( str1[ i - 1 ] === str2[ j - 1 ] ) {
+				dp[ i ][ j ] = dp[ i - 1 ][ j - 1 ];
+			} else {
+				dp[ i ][ j ] = Math.min(
+					dp[ i - 1 ][ j - 1 ] + 1, // substitution
+					dp[ i ][ j - 1 ] + 1, // insertion
+					dp[ i - 1 ][ j ] + 1 // deletion
+				);
+
+				if (
+					i > 1 &&
+					j > 1 &&
+					str1[ i - 1 ] === str2[ j - 2 ] &&
+					str1[ i - 2 ] === str2[ j - 1 ]
+				) {
+					dp[ i ][ j ] = Math.min( dp[ i ][ j ], dp[ i - 2 ][ j - 2 ] + 1 ); // transposition
+				}
+			}
+		}
+	}
+
+	return dp[ m ][ n ];
+};
+
+/**
+ * Suggests a correction for an email address.
+ * @param {string} inputDomain - The email address to be corrected.
+ * @param {number} maxDistance - The maximum Levenshtein distance between the input and the suggestion.
+ */
+export const suggestEmailCorrection = ( inputDomain: string, maxDistance: number = 1 ) => {
+	const extractedInputEmailDomain = extractDomainWithExtension( inputDomain );
+
+	let bestMatch = null;
+	let bestMatchDistance = Infinity;
+
+	if (
+		extractedInputEmailDomain &&
+		! validDomains.includes( extractedInputEmailDomain ) &&
+		! avoidList.includes( extractedInputEmailDomain )
+	) {
+		// Iterate through each valid domain and calculate the Levenshtein distance
+		for ( let i = 0; i < validDomains.length; i++ ) {
+			const validDomain = validDomains[ i ];
+			const distance = calculateLevenshteinDistance( extractedInputEmailDomain, validDomain );
+
+			// Check if the input is in the middle of typing the domain
+			const inTheMiddleOfTyping = validDomain.startsWith( extractedInputEmailDomain );
+
+			// If the distance is within the limit and better than the previous best match, update the suggestion
+			if ( distance <= maxDistance && distance < bestMatchDistance && ! inTheMiddleOfTyping ) {
+				bestMatch = validDomain;
+				bestMatchDistance = distance;
+			}
+		}
+	}
+
+	return {
+		oldEmail: inputDomain,
+		oldDomain: extractedInputEmailDomain,
+		newDomain: bestMatch,
+		newEmail: inputDomain && bestMatch ? replaceEmailDomain( inputDomain, bestMatch ) : null,
+		distance: bestMatchDistance,
+		wasCorrected: bestMatch !== null,
+	};
+};