Replace all FullWidthLayout with WideLayout (#102259)

* Replace all FullWidthLayout with WideLayout

* Domains' side content uses full width of its column in StepContainerV2's version

* Rename prop to maxWidth

* Remove huge-plus

* Use CSS grid in ContentWrapper

* Do not use column layout on mobile devices

* ContentWrapper widths match mockup

The mockups use standard widths for the step content wrapper, however
they don't include the margin at the edge of the screen inside that
total.
This means the goals step heading now wraps the way expected from the
mockup.

* Use column max width calculation instead of using CSS grid

* Cast inline CSS as CSSProperties

* Remove leftover grid rule

* Remove redundant max-width rules

* Fix wide sidebar at checkout

* Remove unused footer prop from wireframes

* Remove unnecessary wrapper div and rename Content to ContentRow

---------

Co-authored-by: Luis Felipe Zaguini <luisfelipezaguini@gmail.com>

Author: p-jackson

client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker-preview.tsx

@@ -651,7 +651,8 @@ const UnifiedDesignPickerPreview = ( {
 	if ( isUsingStepContainerV2 ) {
 		// TODO: Create a new wireframe for the design preview. It should be named "FixedColumnOnTheLeftLayout"
 		return (
-			<Step.FullWidthLayout
+			<Step.WideLayout
+				maxWidth="xhuge"
 				className="step-container-v2--design-picker-preview"
 				topBar={ ( { isLargeViewport } ) => {
 					if ( ! isLargeViewport && activeScreen ) {
@@ -719,7 +720,7 @@ const UnifiedDesignPickerPreview = ( {
 				} }
 			>
 				{ stepContent }
-			</Step.FullWidthLayout>
+			</Step.WideLayout>
 		);
 	}
 

client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx

@@ -450,6 +450,7 @@ const UnifiedDesignPickerStep: StepType< {
 	if ( isUsingStepContainerV2 ) {
 		return (
 			<Step.WideLayout
+				maxWidth="huge"
 				className="step-container-v2--design-picker"
 				topBar={
 					<Step.TopBar

client/landing/stepper/declarative-flow/internals/steps-repository/playground/index.tsx

@@ -38,9 +38,8 @@ export const PlaygroundStep: StepType = ( { navigation, flow } ) => {
 		return (
 			<>
 				<DocumentHead title={ __( 'Playground' ) } />
-				<Step.FullWidthLayout
+				<Step.PlaygroundLayout
 					className="playground-v2"
-					hasContentPadding={ false }
 					topBar={
 						<Step.TopBar
 							rightElement={
@@ -56,7 +55,7 @@ export const PlaygroundStep: StepType = ( { navigation, flow } ) => {
 						playgroundClient={ playgroundClientRef.current }
 						setPlaygroundClient={ setPlaygroundClient }
 					/>
-				</Step.FullWidthLayout>
+				</Step.PlaygroundLayout>
 			</>
 		);
 	}

client/landing/stepper/declarative-flow/internals/steps-repository/playground/style.scss

@@ -1,4 +1,4 @@
 .playground__onboarding-iframe {
 	width: 100%;
-	height: 100vh;
+	height: 100%;
 }

client/landing/stepper/declarative-flow/internals/steps-repository/unified-plans/unified-plans-step.tsx

@@ -495,6 +495,7 @@ function UnifiedPlansStep( {
 			<>
 				<MarketingMessage path="signup/plans" />
 				<Step.WideLayout
+					maxWidth="xhuge"
 					className="step-container-v2--plans"
 					topBar={
 						<Step.TopBar

client/my-sites/checkout/src/components/checkout-main-content.tsx

@@ -838,7 +838,8 @@ export default function CheckoutMainContent( {
 
 	return (
 		<StepContainerV2CheckoutFixer isLargeViewport={ isLargeViewport }>
-			<Step.FullWidthLayout
+			<Step.WideLayout
+				maxWidth="xhuge"
 				hasContentPadding={ false }
 				topBar={
 					<Step.TopBar
@@ -855,15 +856,17 @@ export default function CheckoutMainContent( {
 				}
 			>
 				{ content }
-			</Step.FullWidthLayout>
+			</Step.WideLayout>
 			<LeaveCheckoutModal { ...leaveModalProps } />
 		</StepContainerV2CheckoutFixer>
 	);
 }
 
 const StepContainerV2CheckoutFixer = styled.div< { isLargeViewport: boolean } >`
-	.checkout-wrapper {
-		margin-top: calc( var( --step-container-v2-top-bar-height ) * -1 );
+	// This shouldn't exist. It's a hack to make the top bar appear on top of the checkout sidebar, which extends from the top of the page.
+	.step-container-v2__top-bar {
+		position: relative;
+		z-index: 1;
 	}
 
 	.checkout-skip-button {
@@ -876,18 +879,16 @@ const StepContainerV2CheckoutFixer = styled.div< { isLargeViewport: boolean } >`
 		}
 	}
 
-	// This shouldn't exist. It's a hack to make the top bar appear on top of the checkout sidebar, which extends from the top of the page.
-	// A potentially better solution here is to make the dark area of checkout a pseudo-element and use negative z-index to bring the top bar above it, or use pointer-events: none.
-	.step-container-v2__top-bar {
-		position: relative;
-		z-index: 1;
+	.checkout-sidebar-plan-upsell {
+		margin-inline: 0;
+		max-width: 100%;
 	}
 
 	${ ( props ) =>
 		! props.isLargeViewport &&
 		css`
 			.checkout-sidebar-content {
-				margin-top: var( --step-container-v2-top-bar-height );
+				margin-top: 0;
 			}
 
 			.checkout__summary-button {
@@ -953,8 +954,36 @@ const StepContainerV2CheckoutFixer = styled.div< { isLargeViewport: boolean } >`
 	${ ( props ) =>
 		props.isLargeViewport &&
 		css`
-			.checkout__summary-area {
-				transform: translateY( -54px );
+			.checkout-main-content {
+				padding-left: var( --step-container-v2-content-inline-padding );
+				margin-top: 3rem;
+			}
+
+			.checkout-sidebar-content {
+				--left-padding: 3.875rem;
+				padding: 2.25rem var( --step-container-v2-content-inline-padding ) 0 var( --left-padding );
+				background: none;
+				position: relative;
+				height: 100%;
+
+				&:before {
+					content: '';
+					display: block;
+					background: var( --color-neutral-0 );
+					position: fixed;
+					top: calc( var( --step-container-v2-top-bar-height ) * -1 );
+					transform: translateX( calc( var( --left-padding ) * -1 ) );
+					width: 100vw;
+					bottom: 0;
+				}
+			}
+
+			.checkout-summary-area {
+				max-width: 100%;
+			}
+
+			.checkout__summary-body {
+				margin: 0;
 			}
 		` }
 `;

client/my-sites/marketing/do-it-for-me/faq.tsx

@@ -19,8 +19,6 @@ const FAQHeader = styled.h1`
 
 const FAQSection = styled.div`
 	width: 100%;
-	max-width: 615px;
-	margin: 0 auto;
 `;
 
 const FAQExpander = styled( Button )`

client/signup/steps/domains/style.scss

@@ -546,10 +546,6 @@ body.is-section-signup {
 		margin: 0;
 		flex: 1;
 		width: 100%;
-
-		@include break-large {
-			max-width: 290px;
-		}
 	}
 
 	.domains__domain-side-content.fade-out {

packages/onboarding/src/step-container-v2/README.md

@@ -50,7 +50,7 @@ Read the [how to extend it](#how-to-extend-it) section to learn how to reproduce
 
 **You shouldn't use `StepContainerV2` directly. Instead, use the wireframes that are exported from this package.**
 
-Aside from the stories (run `yarn storybook`), you can follow the examples from `~/client/landing/stepper/declarative-flow/internals/steps-repository`.
+Aside from the stories (run `yarn storybook:start`), you can follow the examples from `~/client/landing/stepper/declarative-flow/internals/steps-repository`.
 
 Please do NOT override the `Step.*` components with CSS as this creates inconsistencies between steps and becomes a maintenance nightmare. Ideally, you should not need to do this as the steps are designed to be composed, and the wireframes are approved by the designers.
 
@@ -103,15 +103,18 @@ export const HorizontalLayout = ( {
 					<>
 						<TopBarRenderer topBar={ topBar } />
 						<ContentWrapper width="wide" centerAligned={ context.isSmallViewport }>
-							<Content className="step-container-v2__content--horizontal-layout">
-								<div className="step-container-v2__content--horizontal-layout-left">
+							<ContentRow
+								columns={ 10 }
+								className="step-container-v2__content-row--horizontal-layout"
+							>
+								<div className="step-container-v2__content-row--horizontal-layout-left">
 									{ heading }
 									{ imageUrl && <img src={ imageUrl } alt="" /> }
 								</div>
-								<div className="step-container-v2__content--horizontal-layout-right">
+								<div className="step-container-v2__content-row--horizontal-layout-right">
 									{ content }
 								</div>
-							</Content>
+							</ContentRow>
 							{ footer }
 						</ContentWrapper>
 						<StickyBottomBarRenderer stickyBottomBar={ stickyBottomBar } />
@@ -126,7 +129,7 @@ export const HorizontalLayout = ( {
 Then, we need to add the styles for the new wireframe. Let's create a new file called `style.scss` and add the following code:
 
 ```scss
-.step-container-v2__content--horizontal-layout {
+.step-container-v2__content-row--horizontal-layout {
 	display: flex;
 	flex-direction: column;
 	gap: 3rem;
@@ -136,12 +139,12 @@ Then, we need to add the styles for the new wireframe. Let's create a new file c
 	}
 }
 
-.step-container-v2__content--horizontal-layout-left,
-.step-container-v2__content--horizontal-layout-right {
+.step-container-v2__content-row--horizontal-layout-left,
+.step-container-v2__content-row--horizontal-layout-right {
 	flex: 1;
 }
 
-.step-container-v2__content--horizontal-layout-left {
+.step-container-v2__content-row--horizontal-layout-left {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
@@ -163,13 +166,13 @@ Let's modify the `children` of `HorizontalLayout` to reflect this new requiremen
 		<>
 			<TopBarRenderer topBar={ topBar } />
 			<ContentWrapper width="wide" centerAligned={ context.isSmallViewport }>
-				<Content className="step-container-v2__content--horizontal-layout">
-					<div className="step-container-v2__content--horizontal-layout-left">
+				<ContentRow columns={ 10 } className="step-container-v2__content-row--horizontal-layout">
+					<div className="step-container-v2__content-row--horizontal-layout-left">
 						{ heading }
 						{ context.isSmallViewport && imageUrl && <img src={ imageUrl } alt="" /> }
 					</div>
-					<div className="step-container-v2__content--horizontal-layout-right">{ content }</div>
-				</Content>
+					<div className="step-container-v2__content-row--horizontal-layout-right">{ content }</div>
+				</ContentRow>
 				{ footer }
 			</ContentWrapper>
 			<StickyBottomBarRenderer stickyBottomBar={ stickyBottomBar } />
@@ -218,6 +221,15 @@ Of course not! The plan is for this new version to replace `StepContainer` entir
 
 There's an utility called `shouldUseStepContainerV2` that allows, at a step level, to define which flows should render this version of the container vs. the original one.
 
+### How do I run storybook?
+
+Either:
+
+- `yarn storybook:start` from the root of this package, or
+- `yarn workspace @automattic/onboarding storybook:start` from the root of the monorepo.
+
+Storybook will open a browser window automatically.
+
 ### Who can I contact if I have any questions?
 
 Ping @quake-team on Slack.

packages/onboarding/src/step-container-v2/components/Content/Content.tsx

@@ -0,0 +1,23 @@
+import clsx from 'clsx';
+import type { CSSProperties, ReactNode } from 'react';
+
+import './style.scss';
+
+export const ContentRow = ( {
+	children,
+	columns = 12,
+	className,
+}: {
+	children: ReactNode;
+	columns?: number;
+	className?: string;
+} ) => {
+	return (
+		<div
+			className={ clsx( 'step-container-v2__content-row', className ) }
+			style={ { '--columns': columns } as CSSProperties }
+		>
+			{ children }
+		</div>
+	);
+};

packages/onboarding/src/step-container-v2/components/Content/style.scss

@@ -0,0 +1,18 @@
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
+
+.step-container-v2__content-row {
+	width: 100%;
+	max-width: 100%;
+
+	@include break-small {
+		--total-column-width: calc(
+			var( --columns ) * var( --step-container-v2-content-column-width )
+		);
+		--total-gap-width: calc(
+			( var( --columns ) - 1 ) * var( --step-container-v2-content-column-gap )
+		);
+
+		max-width: calc( var( --total-gap-width ) + var( --total-column-width ) );
+	}
+}

packages/onboarding/src/step-container-v2/components/ContentRow/ContentRow.tsx

@@ -1,24 +1,24 @@
 import clsx from 'clsx';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import './style.scss';
 
+type MaxWidth = 'wide' | 'huge' | 'xhuge';
+
 export const ContentWrapper = ( {
 	children,
-	width,
+	maxWidth = 'wide',
 	centerAligned,
 	hasPadding = true,
 }: {
 	children: ReactNode;
-	width?: 'wide' | 'full';
+	maxWidth?: MaxWidth;
 	centerAligned?: boolean;
 	hasPadding?: boolean;
 } ) => {
 	return (
 		<div
-			className={ clsx( 'step-container-v2__content-wrapper', {
-				wide: width === 'wide',
-				full: width === 'full',
+			className={ clsx( 'step-container-v2__content-wrapper', maxWidth, {
 				'center-aligned': centerAligned,
 				padding: hasPadding,
 			} ) }