@automattic/onboarding 1.0.0 → 1.0.1

package/src/step-container-v2/wireframes/CenteredColumnLayout/CenteredColumnLayout.stories.tsx

@@ -0,0 +1,122 @@
+import { createInterpolateElement } from '@wordpress/element';
+import { Heading, TopBar, BackButton, PrimaryButton, StickyBottomBar, SkipButton } from '../..';
+import { WireframePlaceholder } from '../../helpers/wireframe-placeholder';
+import { withStepContainerV2ContextDecorator } from '../../helpers/withStepContainerV2ContextDecorator';
+import { CenteredColumnLayout } from './CenteredColumnLayout';
+import type { Meta } from '@storybook/react';
+
+const meta: Meta< typeof CenteredColumnLayout > = {
+	title: 'Onboarding/StepWireframes/CenteredColumnLayout',
+	component: CenteredColumnLayout,
+	decorators: [ withStepContainerV2ContextDecorator ],
+};
+
+export default meta;
+
+export const FourColumnsCenteredLayout = () => {
+	const backButton = <BackButton />;
+	const nextButton = <PrimaryButton />;
+	const skipButton = <SkipButton />;
+
+	return (
+		<CenteredColumnLayout
+			columnWidth={ 4 }
+			topBar={ <TopBar leftElement={ backButton } rightElement={ skipButton } /> }
+			heading={
+				<Heading
+					text="Four Columns Centered Layout"
+					subText={ createInterpolateElement(
+						'An example of the <code>CenteredColumnLayout</code> wireframe layout.',
+						{
+							code: <code />,
+						}
+					) }
+				/>
+			}
+			stickyBottomBar={ <StickyBottomBar rightElement={ nextButton } /> }
+		>
+			<WireframePlaceholder height={ 370 }>Content</WireframePlaceholder>
+		</CenteredColumnLayout>
+	);
+};
+
+export const SixColumnsCenteredLayout = () => {
+	const backButton = <BackButton />;
+	const nextButton = <PrimaryButton />;
+	const skipButton = <SkipButton />;
+
+	return (
+		<CenteredColumnLayout
+			columnWidth={ 6 }
+			topBar={ <TopBar leftElement={ backButton } rightElement={ skipButton } /> }
+			heading={
+				<Heading
+					text="Six Columns Centered Layout"
+					subText={ createInterpolateElement(
+						'An example of the <code>CenteredColumnLayout</code> wireframe layout.',
+						{
+							code: <code />,
+						}
+					) }
+				/>
+			}
+			stickyBottomBar={ <StickyBottomBar rightElement={ nextButton } /> }
+		>
+			<WireframePlaceholder height={ 500 }>Content</WireframePlaceholder>
+		</CenteredColumnLayout>
+	);
+};
+
+export const EightColumnsCenteredLayout = () => {
+	const backButton = <BackButton />;
+	const nextButton = <PrimaryButton />;
+	const skipButton = <SkipButton />;
+
+	return (
+		<CenteredColumnLayout
+			columnWidth={ 8 }
+			topBar={ <TopBar leftElement={ backButton } rightElement={ skipButton } /> }
+			heading={
+				<Heading
+					text="Six Columns Centered Layout"
+					subText={ createInterpolateElement(
+						'An example of the <code>CenteredColumnLayout</code> wireframe layout.',
+						{
+							code: <code />,
+						}
+					) }
+				/>
+			}
+			stickyBottomBar={ <StickyBottomBar rightElement={ nextButton } /> }
+		>
+			<WireframePlaceholder height={ 500 }>Content</WireframePlaceholder>
+		</CenteredColumnLayout>
+	);
+};
+
+export const TenColumnsCenteredLayout = () => {
+	const backButton = <BackButton />;
+	const nextButton = <PrimaryButton />;
+	const skipButton = <SkipButton />;
+
+	return (
+		<CenteredColumnLayout
+			columnWidth={ 10 }
+			topBar={ <TopBar leftElement={ backButton } rightElement={ skipButton } /> }
+			heading={
+				<Heading
+					text="Eight Columns Centered Layout"
+					subText={ createInterpolateElement(
+						'An example of the <code>CenteredColumnLayout</code> wireframe layout.',
+						{
+							code: <code />,
+						}
+					) }
+				/>
+			}
+			stickyBottomBar={ <StickyBottomBar rightElement={ nextButton } /> }
+		>
+			<WireframePlaceholder height={ 500 }>Content</WireframePlaceholder>
+		</CenteredColumnLayout>
+	);
+};

package/src/step-container-v2/wireframes/CenteredColumnLayout/CenteredColumnLayout.tsx

@@ -0,0 +1,66 @@
+import { ReactNode } from 'react';
+import { ContentRow } from '../../components/ContentRow/ContentRow';
+import { ContentWrapper } from '../../components/ContentWrapper/ContentWrapper';
+import { StepContainerV2 } from '../../components/StepContainerV2/StepContainerV2';
+import { ContentProp } from '../../components/StepContainerV2/context';
+import { StickyBottomBarRenderer } from '../../components/StickyBottomBar/StickyBottomBarRenderer';
+import { isTopBar } from '../../components/TopBar/TopBar';
+import { renderTopBar, TopBarRenderer } from '../../components/TopBar/TopBarRenderer';
+
+interface CenteredColumnLayoutProps {
+	topBar?: ContentProp;
+	heading?: ReactNode;
+	headingColumnWidth?: 4 | 5 | 6 | 8 | 10;
+	className?: string;
+	children?: ContentProp;
+	stickyBottomBar?: ContentProp;
+	columnWidth: 4 | 5 | 6 | 8 | 10;
+	verticalAlign?: 'center';
+	noGap?: boolean;
+}
+
+export const CenteredColumnLayout = ( {
+	columnWidth,
+	topBar,
+	heading,
+	headingColumnWidth = 6,
+	className,
+	children,
+	stickyBottomBar,
+	verticalAlign,
+	noGap,
+}: CenteredColumnLayoutProps ) => {
+	return (
+		<StepContainerV2
+			initialTopBarHeight={
+				// Calculate the top bar height on the server side to avoid layout shifts.
+				typeof window === 'undefined' &&
+				isTopBar(
+					renderTopBar( topBar, {
+						isLargeViewport: false,
+						isSmallViewport: false,
+					} )
+				)
+					? 'calc( var( --step-container-v2-top-bar-content-height ) + 2 * var( --step-container-v2-top-bar-padding ) )'
+					: '0px'
+			}
+		>
+			{ ( context ) => {
+				const content = typeof children === 'function' ? children( context ) : children;
+
+				return (
+					<>
+						<TopBarRenderer topBar={ topBar } />
+						<ContentWrapper centerAligned={ verticalAlign === 'center' } noGap={ noGap }>
+							{ heading && <ContentRow columns={ headingColumnWidth }>{ heading }</ContentRow> }
+							<ContentRow columns={ columnWidth } className={ className }>
+								{ content }
+							</ContentRow>
+						</ContentWrapper>
+						<StickyBottomBarRenderer stickyBottomBar={ stickyBottomBar } />
+					</>
+				);
+			} }
+		</StepContainerV2>
+	);
+};

package/src/step-container-v2/wireframes/FixedColumnOnTheLeftLayout/FixedColumnOnTheLeftLayout.stories.tsx

@@ -0,0 +1,51 @@
+import { createInterpolateElement } from '@wordpress/element';
+import { TopBar, BackButton, PrimaryButton, StickyBottomBar, LinkButton } from '../..';
+import { WireframePlaceholder } from '../../helpers/wireframe-placeholder';
+import { withStepContainerV2ContextDecorator } from '../../helpers/withStepContainerV2ContextDecorator';
+import { FixedColumnOnTheLeftLayout } from './FixedColumnOnTheLeftLayout';
+import type { Meta } from '@storybook/react';
+
+const meta: Meta< typeof FixedColumnOnTheLeftLayout > = {
+	title: 'Onboarding/StepWireframes/FixedColumnOnTheLeftLayout',
+	component: FixedColumnOnTheLeftLayout,
+	decorators: [ withStepContainerV2ContextDecorator ],
+};
+
+export default meta;
+
+export const ThreeColumnsOnTheLeft = () => (
+	<FixedColumnOnTheLeftLayout
+		fixedColumnWidth={ 3 }
+		topBar={
+			<TopBar
+				leftElement={ <BackButton /> }
+				rightElement={
+					<span>
+						Need help? <LinkButton>Contact us</LinkButton>
+					</span>
+				}
+			/>
+		}
+		heading={
+			<FixedColumnOnTheLeftLayout.Heading
+				text="Fixed Column on the Left"
+				subText={ createInterpolateElement(
+					'An example of the <code>FixedColumnOnTheLeftLayout</code> wireframe layout.',
+					{
+						code: <code />,
+					}
+				) }
+			/>
+		}
+		stickyBottomBar={ ( context ) => {
+			if ( context.isLargeViewport ) {
+				return null;
+			}
+
+			return <StickyBottomBar rightElement={ <PrimaryButton /> } />;
+		} }
+	>
+		<WireframePlaceholder style={ { flex: 1 } }>Sidebar</WireframePlaceholder>
+		<WireframePlaceholder height="100%">Main</WireframePlaceholder>
+	</FixedColumnOnTheLeftLayout>
+);

package/src/step-container-v2/wireframes/FixedColumnOnTheLeftLayout/FixedColumnOnTheLeftLayout.tsx

@@ -0,0 +1,69 @@
+import { ComponentProps, ReactNode } from 'react';
+import { ContentRow } from '../../components/ContentRow/ContentRow';
+import { ContentWrapper } from '../../components/ContentWrapper/ContentWrapper';
+import { Heading } from '../../components/Heading/Heading';
+import { StepContainerV2 } from '../../components/StepContainerV2/StepContainerV2';
+import { ContentProp } from '../../components/StepContainerV2/context';
+import { StickyBottomBarRenderer } from '../../components/StickyBottomBar/StickyBottomBarRenderer';
+import { TopBarRenderer } from '../../components/TopBar/TopBarRenderer';
+import './style.scss';
+
+interface FixedColumnOnTheLeftLayoutProps {
+	topBar?: ContentProp;
+	heading?: ReactNode;
+	footer?: ReactNode;
+	children: [ ContentProp, ContentProp ];
+	stickyBottomBar?: ContentProp;
+	fixedColumnWidth: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+}
+
+const FixedColumnOnTheLeftLayout = ( {
+	fixedColumnWidth,
+	children,
+	topBar,
+	heading,
+	footer,
+	stickyBottomBar,
+}: FixedColumnOnTheLeftLayoutProps ) => {
+	return (
+		<StepContainerV2>
+			{ ( context ) => {
+				const [ fixedColumn, secondColumn ] = children.map( ( child ) => {
+					if ( typeof child === 'function' ) {
+						return child( context );
+					}
+					return child;
+				} );
+
+				return (
+					<>
+						<TopBarRenderer topBar={ topBar } />
+						<ContentWrapper
+							axisDirection={ context.isLargeViewport ? 'horizontal' : 'vertical' }
+							noTopPadding={ context.isLargeViewport }
+						>
+							<ContentRow
+								columns={ context.isLargeViewport ? fixedColumnWidth : undefined }
+								stretched
+								className="step-container-v2--fixed-column-on-the-left-layout__fixed-column"
+							>
+								{ heading }
+								{ fixedColumn }
+								{ footer }
+							</ContentRow>
+							<ContentRow stretched>{ secondColumn }</ContentRow>
+						</ContentWrapper>
+						<StickyBottomBarRenderer stickyBottomBar={ stickyBottomBar } />
+					</>
+				);
+			} }
+		</StepContainerV2>
+	);
+};
+
+// eslint-disable-next-line react/display-name
+FixedColumnOnTheLeftLayout.Heading = ( props: ComponentProps< typeof Heading > ) => (
+	<Heading { ...props } align="left" size="small" />
+);
+
+export { FixedColumnOnTheLeftLayout };

package/src/step-container-v2/wireframes/FixedColumnOnTheLeftLayout/style.scss

@@ -0,0 +1,14 @@
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
+
+.step-container-v2--fixed-column-on-the-left-layout {
+	&__fixed-column {
+		display: flex;
+		flex-direction: column;
+		gap: 2rem;
+
+		@include break-large {
+			padding-top: 1.5rem;
+		}
+	}
+}

package/src/step-container-v2/wireframes/Loading/Loading.stories.tsx

@@ -0,0 +1,27 @@
+import { withStepContainerV2ContextDecorator } from '../../helpers/withStepContainerV2ContextDecorator';
+import { Loading } from './Loading';
+import type { Meta } from '@storybook/react';
+
+const meta: Meta< typeof Loading > = {
+	title: 'Onboarding/StepWireframes/Loading',
+	component: Loading,
+	decorators: [ withStepContainerV2ContextDecorator ],
+};
+
+export default meta;
+
+export const Default = () => {
+	return <Loading title="Loading" progress={ 0.5 } />;
+};
+
+export const Indeterminate = () => {
+	return <Loading title="Loading" progress={ undefined } />;
+};
+
+export const NoTitle = () => {
+	return <Loading progress={ undefined } />;
+};
+
+export const DelayedTitle = () => {
+	return <Loading title="Reticulating splines" progress={ undefined } delay={ 2000 } />;
+};

package/src/step-container-v2/wireframes/Loading/Loading.tsx

@@ -0,0 +1,52 @@
+import { ProgressBar } from '@wordpress/components';
+import { ReactNode, useEffect, useState } from 'react';
+import { Heading } from '../../components/Heading/Heading';
+import { StepContainerV2 } from '../../components/StepContainerV2/StepContainerV2';
+import { TopBar, type TopBarProps } from '../../components/TopBar/TopBar';
+
+import './style.scss';
+
+interface LoadingProps {
+	title?: ReactNode;
+	progress?: number;
+	delay?: number;
+	compactLogo?: TopBarProps[ 'compactLogo' ];
+}
+
+export const Loading = ( { title, progress, delay = 0, compactLogo }: LoadingProps ) => {
+	const [ shouldDisplayTitle, setShouldDisplayTitle ] = useState( delay === 0 );
+
+	const [ prevDelay, setPrevDelay ] = useState( delay );
+	if ( delay !== prevDelay ) {
+		setPrevDelay( delay );
+		setShouldDisplayTitle( delay === 0 );
+	}
+
+	useEffect( () => {
+		if ( delay === 0 ) {
+			return;
+		}
+
+		const timeout = setTimeout( () => {
+			setShouldDisplayTitle( true );
+		}, delay );
+
+		return () => clearTimeout( timeout );
+	}, [ delay ] );
+
+	return (
+		<StepContainerV2>
+			<TopBar compactLogo={ compactLogo } />
+			<div className="step-container-v2--loading">
+				{ title && shouldDisplayTitle && (
+					<div className="step-container-v2--loading__heading-wrapper">
+						<div className="step-container-v2--loading__heading">
+							<Heading text={ title } size="small" align="center" />
+						</div>
+					</div>
+				) }
+				<ProgressBar className="step-container-v2--loading__progress-bar" value={ progress } />
+			</div>
+		</StepContainerV2>
+	);
+};

package/src/step-container-v2/wireframes/Loading/style.scss

@@ -0,0 +1,22 @@
+.step-container-v2--loading {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	inset: 0;
+
+	&__heading-wrapper {
+		position: absolute;
+		height: 0;
+	}
+
+	&__heading {
+		transform: translateY( -100% );
+		padding-bottom: 3rem;
+	}
+
+	&__progress-bar {
+		--wp-components-color-foreground: var( --color-accent, #3858e9 );
+	}
+}

package/src/step-container-v2/wireframes/Loading/test/Loading.test.tsx

@@ -0,0 +1,42 @@
+import { act, render, screen } from '@testing-library/react';
+import { Loading } from '../Loading';
+import '@testing-library/jest-dom';
+
+jest.useFakeTimers();
+
+test( 'renders the title', () => {
+	render( <Loading title="Test 123" /> );
+	expect( screen.getByText( 'Test 123' ) ).toBeInTheDocument();
+} );
+
+test( 'hides title as long as delay', () => {
+	render( <Loading title="Test 123" delay={ 1000 } /> );
+	expect( screen.queryByText( 'Test 123' ) ).not.toBeInTheDocument();
+
+	act( () => jest.advanceTimersByTime( 2000 ) );
+
+	expect( screen.getByText( 'Test 123' ) ).toBeInTheDocument();
+} );
+
+test( 'dropping delay prop immediately renders title', () => {
+	const { rerender } = render( <Loading title="Test 123" delay={ 1000 } /> );
+
+	jest.advanceTimersByTime( 500 );
+	expect( screen.queryByText( 'Test 123' ) ).not.toBeInTheDocument();
+
+	rerender( <Loading title="Test 123" /> );
+	expect( screen.getByText( 'Test 123' ) ).toBeInTheDocument();
+} );
+
+test( 'increasing delay prop resets timer', () => {
+	const { rerender } = render( <Loading title="Test 123" delay={ 1000 } /> );
+
+	expect( screen.queryByText( 'Test 123' ) ).not.toBeInTheDocument();
+
+	rerender( <Loading title="Test 123" delay={ 2000 } /> );
+	act( () => jest.advanceTimersByTime( 1500 ) );
+	expect( screen.queryByText( 'Test 123' ) ).not.toBeInTheDocument();
+
+	act( () => jest.advanceTimersByTime( 1000 ) );
+	expect( screen.getByText( 'Test 123' ) ).toBeInTheDocument();
+} );

package/src/step-container-v2/wireframes/PlaygroundLayout/PlaygroundLayout.stories.tsx

@@ -0,0 +1,21 @@
+import { TopBar, BackButton, PrimaryButton } from '../..';
+import { WireframePlaceholder } from '../../helpers/wireframe-placeholder';
+import { withStepContainerV2ContextDecorator } from '../../helpers/withStepContainerV2ContextDecorator';
+import { PlaygroundLayout } from './PlaygroundLayout';
+import type { Meta } from '@storybook/react';
+
+const meta: Meta< typeof PlaygroundLayout > = {
+	title: 'Onboarding/StepWireframes/PlaygroundLayout',
+	component: PlaygroundLayout,
+	decorators: [ withStepContainerV2ContextDecorator ],
+};
+
+export default meta;
+
+export const Default = () => (
+	<PlaygroundLayout
+		topBar={ <TopBar leftElement={ <BackButton /> } rightElement={ <PrimaryButton /> } /> }
+	>
+		<WireframePlaceholder height="100%">Main</WireframePlaceholder>
+	</PlaygroundLayout>
+);

package/src/step-container-v2/wireframes/PlaygroundLayout/PlaygroundLayout.tsx

@@ -0,0 +1,31 @@
+import clsx from 'clsx';
+import { StepContainerV2 } from '../../components/StepContainerV2/StepContainerV2';
+import { ContentProp } from '../../components/StepContainerV2/context';
+import { TopBarRenderer } from '../../components/TopBar/TopBarRenderer';
+
+import './style.scss';
+
+interface PlaygroundLayoutProps {
+	topBar?: ContentProp;
+	className?: string;
+	children?: ContentProp;
+}
+
+export const PlaygroundLayout = ( { topBar, className, children }: PlaygroundLayoutProps ) => {
+	return (
+		<StepContainerV2>
+			{ ( context ) => {
+				const content = typeof children === 'function' ? children( context ) : children;
+
+				return (
+					<>
+						<TopBarRenderer topBar={ topBar } />
+						<div className={ clsx( 'step-container-v2__playground-layout', className ) }>
+							{ content }
+						</div>
+					</>
+				);
+			} }
+		</StepContainerV2>
+	);
+};

package/src/step-container-v2/wireframes/PlaygroundLayout/style.scss

@@ -0,0 +1,5 @@
+.step-container-v2__playground-layout {
+	height: calc(
+		100vh - var( --step-container-v2-top-bar-height )
+	);
+}

package/src/step-container-v2/wireframes/TwoColumnLayout/TwoColumnLayout.stories.tsx

@@ -0,0 +1,93 @@
+import { createInterpolateElement } from '@wordpress/element';
+import { Heading, TopBar, BackButton, PrimaryButton, StickyBottomBar } from '../..';
+import { WireframePlaceholder } from '../../helpers/wireframe-placeholder';
+import { withStepContainerV2ContextDecorator } from '../../helpers/withStepContainerV2ContextDecorator';
+import { TwoColumnLayout } from './TwoColumnLayout';
+import type { Meta } from '@storybook/react';
+
+const meta: Meta< typeof TwoColumnLayout > = {
+	title: 'Onboarding/StepWireframes/TwoColumnLayout',
+	component: TwoColumnLayout,
+	decorators: [ withStepContainerV2ContextDecorator ],
+};
+
+export default meta;
+
+export const ThreeColumnsOnRightLayout = () => (
+	<TwoColumnLayout
+		firstColumnWidth={ 2 }
+		secondColumnWidth={ 1 }
+		topBar={ <TopBar leftElement={ <BackButton /> } /> }
+		heading={
+			<Heading
+				text="Three Columns on the Right"
+				subText={ createInterpolateElement(
+					'An example of the <code>TwoColumnLayout</code> wireframe layout.',
+					{
+						code: <code />,
+					}
+				) }
+			/>
+		}
+		stickyBottomBar={ <StickyBottomBar rightElement={ <PrimaryButton /> } /> }
+	>
+		<WireframePlaceholder height={ 616 }>Main</WireframePlaceholder>
+		<WireframePlaceholder height={ 616 }>Sidebar</WireframePlaceholder>
+	</TwoColumnLayout>
+);
+
+export const EqualTwoColumnLayout = () => (
+	<TwoColumnLayout
+		firstColumnWidth={ 1 }
+		secondColumnWidth={ 1 }
+		topBar={ <TopBar leftElement={ <BackButton /> } /> }
+		heading={
+			<Heading
+				text="Two Equal Columns"
+				subText={ createInterpolateElement(
+					'An example of the <code>TwoColumnLayout</code> wireframe layout.',
+					{
+						code: <code />,
+					}
+				) }
+			/>
+		}
+		stickyBottomBar={ <StickyBottomBar rightElement={ <PrimaryButton /> } /> }
+	>
+		<WireframePlaceholder height={ 616 }>Content 1</WireframePlaceholder>
+		<WireframePlaceholder height={ 616 }>Content 2</WireframePlaceholder>
+	</TwoColumnLayout>
+);
+
+export const WithRenderProp = () => (
+	<TwoColumnLayout
+		firstColumnWidth={ 1 }
+		secondColumnWidth={ 1 }
+		topBar={ <TopBar leftElement={ <BackButton /> } /> }
+		heading={
+			<Heading
+				text="Columns Rendered with Render Prop"
+				subText={ createInterpolateElement(
+					'An example of the <code>TwoColumnLayout</code> wireframe layout.',
+					{
+						code: <code />,
+					}
+				) }
+			/>
+		}
+		stickyBottomBar={ <StickyBottomBar rightElement={ <PrimaryButton /> } /> }
+	>
+		{ ( { isSmallViewport, isLargeViewport } ) => (
+			<>
+				<WireframePlaceholder height={ 616 }>
+					<div>Content 1</div>
+					<pre>is small viewport: { isSmallViewport.toString() }</pre>
+				</WireframePlaceholder>
+				<WireframePlaceholder height={ 616 }>
+					<div>Content 1</div>
+					<pre>is large viewport: { isLargeViewport.toString() }</pre>
+				</WireframePlaceholder>
+			</>
+		) }
+	</TwoColumnLayout>
+);